snw/LittleHome
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

background color support

Browse source
This commit is contained in:
синечка ♡ 2026-03-22 01:28:26 +03:00
parent 6e13ed40da
commit dafac086ef
7 changed files with 176 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/css/global.css
View file

@ -14,10 +14,21 @@ body {
}
#background {
transition: opacity .15s;
--base_bg_color_tint_p: calc(var(--base_bg_color) + var(--base_bg_color_range));
--base_bg_color_tint_n: calc(var(--base_bg_color) - var(--base_bg_color_range));
--c-0-base: hsla(var(--base_bg_color), calc(var(--base_bg_saturation) - 9%), 12%, 1);
--c-1-base: hsla(var(--base_bg_color_tint_p), calc(var(--base_bg_saturation) - 8%), 12%, 1);
--c-3-base: hsla(var(--base_bg_color_tint_n), calc(var(--base_bg_saturation) - 6%), 36%, 1);
height: 100vh;
width: 100vw;
opacity: 1;
}
#background.changing {
opacity: 0;
}
/* https://www.mshr.app/mesh/1727910717365 */
@keyframes hero-gradient-animation {
@ -26,8 +37,10 @@ body {
--s-start-0: 9%;
--s-end-0: 55%;
--y-0: 80%;
--c-0: hsla(266.99999999999983, 1%, 12%, 1);
--c-1: hsla(335.9999999999997, 2%, 22%, 1);
--c-0: var(--c-0-base);
--c-1: var(--c-1-base);
--c-2: hsla(0,0%, 0%, 0.49);
--c-3: var(--c-3-base);
--s-start-1: 5%;
--s-end-1: 72%;
--y-1: 24%;
@ -35,11 +48,9 @@ body {
--s-start-2: 5%;
--s-end-2: 52%;
--y-2: 82%;
--c-2: hsla(53.999999999999886, 0%, 0%, 0.49);
--x-2: 13%;
--s-start-3: 13%;
--s-end-3: 68%;
--c-3: hsla(299, 4%, 36%, 1);
--x-3: 24%;
--y-3: 7%;
}
@ -49,8 +60,10 @@ body {
--s-start-0: 9%;
--s-end-0: 55%;
--y-0: 94%;
--c-0: hsla(266.99999999999943, 0%, 12%, 1);
--c-1: hsla(0, 4%, 19%, 1);
--c-0: var(--c-0-base);
--c-1: var(--c-1-base);
--c-2: hsla(0,0%, 0%, 0.49);
--c-3: var(--c-3-base);
--s-start-1: 5%;
--s-end-1: 72%;
--y-1: 25%;
@ -58,11 +71,9 @@ body {
--s-start-2: 5%;
--s-end-2: 52%;
--y-2: 20%;
--c-2: hsla(54.000000000000036, 0%, 0%, 0.49);
--x-2: 98%;
--s-start-3: 13%;
--s-end-3: 68%;
--c-3: hsla(298.99999999999994, 3%, 41%, 1);
--x-3: 95%;
--y-3: 92%;
}
@ -95,13 +106,13 @@ body {
@property --c-0 {
syntax: '<color>';
inherits: false;
initial-value: hsla(266.99999999999983, 1%, 12%, 1)
initial-value: hsla(0,0,0,0)
}
@property --c-1 {
syntax: '<color>';
inherits: false;
initial-value: hsla(335.9999999999997, 2%, 22%, 1)
initial-value: hsla(0,0,0,0)
}
@property --s-start-1 {
@ -149,7 +160,7 @@ body {
@property --c-2 {
syntax: '<color>';
inherits: false;
initial-value: hsla(53.999999999999886, 0%, 0%, 0.49)
initial-value: hsla(0,0,0,0)
}
@property --x-2 {
@ -173,7 +184,7 @@ body {
@property --c-3 {
syntax: '<color>';
inherits: false;
initial-value: hsla(299, 4%, 36%, 1)
initial-value: hsla(0,0,0,0)
}
@property --x-3 {
@ -191,19 +202,35 @@ body {
#background {
--x-0: 85%;
--y-0: 80%;
--c-0: hsla(266.99999999999983, 1%, 12%, 1);
--c-1: hsla(335.9999999999997, 2%, 22%, 1);
--c-0: hsla(var(--base_bg_color), calc(var(--base_bg_saturation) - 9%), 12%, 1);
--c-1: hsla(var(--base_bg_color_tint_p), calc(var(--base_bg_saturation) - 8%), 22%, 1);
--y-1: 24%;
--x-1: 60%;
--y-2: 82%;
--c-2: hsla(53.999999999999886, 0%, 0%, 0.49);
--c-2: hsla(0,0%, 0%, 0.49);
--x-2: 13%;
--c-3: hsla(299, 4%, 36%, 1);
--c-3: hsla(var(--base_bg_color_tint_n), calc(var(--base_bg_saturation) - 6%), 36%, 1);
--x-3: 24%;
--y-3: 7%;
background-color: hsla(0,0%, 0%, 1);
background-image:
radial-gradient(
circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0),
transparent var(--s-end-0)
),
radial-gradient(
circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1),
transparent var(--s-end-1)
),
radial-gradient(
circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2),
transparent var(--s-end-2)
),
radial-gradient(
circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3),
transparent var(--s-end-3)
)
;
background-color: hsla(0, 0%, 0%, 1);
background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
animation: hero-gradient-animation 10s linear infinite alternate;
background-blend-mode: normal, normal, normal, normal;
}

4
src/css/search.css
View file

@ -26,11 +26,11 @@
#searcher > h1 {
font-family: 'Playfair Display';
font-weight: normal;
font-size: 70px;
font-size: 60px;
text-align: center;
} #searcher > h1 > span {
transition: background .2s;
font-size: 33px;
font-size: 23px;
font-family: 'Fira Code';
background: rgba(255,255,255,.1);
padding: 0 5px 0;

46
src/css/settings.css Normal file
View file

@ -0,0 +1,46 @@
#settingsbutton {
z-index: 11;
position: fixed;
bottom: 5px;
left: 5px;
cursor: pointer;
svg {
transition: background .2s;
border-radius: 100px;
padding: 5px;
width: 20px !important;
height: 20px !important;
fill: rgba(255,255,255,.2) !important;
}
svg:hover {
background: rgba(255,255,255,.1);
}
}
#settingsui {
z-index: 12;
position: fixed;
display: flex;
left: 5px;
bottom: 50px;
background: rgba(255,255,255,.1);
display: flex;
flex-direction: column;
padding: 10px;
border-radius: 10px;
border: solid 1px rgba(255,255,255,.1);
h2 {
font-family: 'Playfair Display';
font-weight: normal;
}
br {
height: 0px !important;
}
h4 {
margin-top: 10px;
font-family: 'Nunito';
/* font-weight: normal; */
}
}

12
src/index.html
View file

@ -6,6 +6,7 @@
<title>Home</title>
<link rel="shortcut icon" href="icon.svg" type="image/x-icon">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/settings.css">
<link rel="stylesheet" href="css/clock.css">
<link rel="stylesheet" href="css/search.css">
<link rel="stylesheet" href="css/update.css">
@ -17,12 +18,23 @@
<p>Search via Google</p>
</div>
<input type="text" id="search_ddd" autocorrect="off" autocomplete="off" autofocus>
<div id="settingsbutton"></div>
<!-- <div id="settingsui">
<h2>Settings</h2>
<h4>Color</h4>
<input type="range" name="hue" id="s_hue" min="0" max="255" step="1">
<h4>Saturation</h4>
<input type="range" name="hue" id="s_hue" min="0" max="80" step="1">
<h4>Range</h4>
<input type="range" name="hue" id="s_hue" min="0" max="255" step="1">
</div> -->
<div id="update" class="hidden"><span>update available</span> <a href="https://github.com/ktnk-dev/LittleHome">download</a></div>
<script src="js/abstract.js"></script>
<script src="js/storage.js"></script>
<script src="js/bang.js"></script>
<script src="js/builtin.js"></script>
<script src="js/update.js"></script>
<script src="js/settings.js"></script>
<script src="js/main.js"></script>
</body>
</html>

1
src/js/main.js
View file

@ -2,4 +2,5 @@ window.addEventListener('DOMContentLoaded', async () => {
clock()
searcher()
check_update()
settings.init()
})

69
src/js/settings.js Normal file
View file

@ -0,0 +1,69 @@
const force_redraw = (element) => {
if (!element) return
element.classList.toggle('twt')
var n = document.createTextNode(' ')
var disp = element.style.display || 'block'
element.appendChild(n)
element.style.display = 'none'
setTimeout(() => {
element.style.display = disp
n.parentNode.removeChild(n)
},20)
}
const settings = {
icons: {
open: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M422.46-81.87q-23.2 0-40.29-15.35-17.08-15.35-20.08-38.04l-10-73.74q-11.09-4.78-22.79-11.08-11.69-6.29-21.26-13.09l-68.26 28q-21.45 9.24-43.15 1.87t-33.67-27.57l-58.05-100.87q-11.98-19.96-7.11-42.53 4.87-22.58 23.33-37.06l59.76-45.5q-.76-5.54-.76-10.58V-480q0-5.04.25-11.09.25-6.04 1.01-14.08l-59.26-43.76q-18.7-14.48-23.7-36.81-5-22.33 6.98-43.02l57.55-100.13q11.97-19.96 33.8-27.45 21.83-7.49 43.28 1.75l69.98 29q8.57-6.8 18.9-12.73 10.34-5.92 23.17-11.2l10-75.98q3-22.93 20.33-38.28 17.34-15.35 40.54-15.35h114.58q23.2 0 40.29 15.35 17.08 15.35 20.08 38.28l10 74.48q12.09 4.78 22.29 10.95 10.19 6.18 19.76 14.48l70.26-29q21.45-9.24 43.15-1.75t33.67 27.45l57.55 100.13q11.98 20.19 6.98 42.77-5 22.58-23.7 37.06l-62 45.76q.76 6.04.76 10.83V-480q0 7.54-.12 12.84-.12 5.29-1.14 10.83l61 44.76q18.7 14.48 23.7 37.06 5 22.58-6.98 42.77l-58.05 100.87q-11.97 19.96-33.8 27.45-21.83 7.49-43.28-1.75l-68.48-29q-8.07 6.3-17.4 11.84-9.34 5.55-24.17 12.83l-10 74.24q-3 22.69-20.08 38.04-17.09 15.35-40.29 15.35H422.46ZM478.78-345q56 0 95.5-39.5t39.5-95.5q0-56-39.5-95.5t-95.5-39.5q-56.26 0-95.63 39.5T343.78-480q0 56 39.37 95.5t95.63 39.5Z"/></svg>`,
close: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-419.35 289.33-228.67Q276.65-216 259-216.25t-30.33-12.92q-12.17-12.68-11.92-30.08t12.42-29.58L419.35-480 229.17-671.17Q217-683.35 217-700.75t12.17-30.08q12.18-12.67 29.83-12.92t30.33 12.42L480-540.65l190.67-190.68Q683.35-744 701-743.75t30.33 12.92q12.17 12.68 11.92 30.08t-12.42 29.58L540.65-480l190.18 191.17Q743-276.65 743-259.25t-12.17 30.08Q718.65-216.5 701-216.25t-30.33-12.42L480-419.35Z"/></svg>`
},
styles: {
'base_bg_color': [0, 360, 'Color', ''],
'base_bg_saturation': [0, 100, 'Saturation', '%'],
'base_bg_color_range': [0, 180, 'Range', ''],
},
set_style: (name, value) => {
setToStorage(`theme_${name}`, value)
const bg = document.querySelector('#background')
bg.style.setProperty(`--${name}`, value)
bg.style.display = 'none'
setTimeout(async () => {
bg.style.display = 'block'
},)
},
init: async () => {
document.querySelector('#settingsbutton').innerHTML = settings.icons.open
document.querySelector('#settingsbutton').onclick = () => settings.open()
Object.keys(settings.styles).map(
key => {
const v = getFromStorage(`theme_${key}`)
if (!v) settings.set_style(key, settings.styles[key][0])
else settings.set_style(key, v)
}
)
},
open: async () => {
const ret = name => parseInt(document.querySelector('#background').style.getPropertyValue(`--${name}`).trim().replace('%', ''))
const setter = (name, trail = '') => (e) => settings.set_style(name, `${e.target.value}${trail}`)
const state = (name, trail = '') => {return {value: ret(name), oninput: setter(name, trail)}}
document.body.appendChild($.div(
{id: 'settingsui'},
$.h2('Settings'),
...Object.keys(settings.styles).map(key => {
const d = settings.styles[key]
return $.div(
$.h4(d[2]),
$.input({type: 'range', min: d[0], max: d[1], ...state(key, d[3])})
)
})
))
document.querySelector('#settingsbutton').innerHTML = settings.icons.close
document.querySelector('#settingsbutton').onclick = () => {
document.querySelector('#settingsui').remove()
settings.init()
}
}
}

2
src/js/storage.js
View file

@ -1,7 +1,7 @@
const CookieManager = {
get: (cname) => {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let decodedCookie = document.cookie;
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];