mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter synced 2024-11-15 06:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use CSS variables

Browse Source
This commit is contained in:
KernelDeimos 2024-04-07 02:34:04 -04:00
parent 178f851684
commit d1bbbb8e93
2 changed files with 72 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/css/style.css
View File

@ -22,6 +22,28 @@
user-select: none;
}
:root {
--primary-hue: 231;
--primary-saturation: 100%;
--primary-lightness: 50%;
--primary-alpha: 0.7;
--window-head-hue: var(--primary-hue);
--window-head-saturation: var(--primary-saturation);
--window-head-lightness: var(--primary-lightness);
--window-head-alpha: var(--primary-alpha);
--window-sidebar-hue: var(--primary-hue);
--window-sidebar-saturation: var(--primary-saturation);
--window-sidebar-lightness: var(--primary-lightness);
--window-sidebar-alpha: var(--primary-alpha);
--taskbar-hue: var(--primary-hue);
--taskbar-saturation: var(--primary-saturation);
--taskbar-lightness: var(--primary-lightness);
--taskbar-alpha: var(--primary-alpha);
}
html, body {
/* disables two fingers back/forward swipe */
overscroll-behavior-x: none;
@ -827,7 +849,12 @@ span.header-sort-icon img {
.window-head {
overflow: hidden !important;
padding: 0;
background-color: rgba(231, 238, 245, .95);
background-color: hsla(
var(--window-head-hue),
var(--window-head-saturation),
var(--window-head-lightness),
calc(0.5 + 0.5 * var(--window-head-alpha))
);
filter: grayscale(80%);
box-shadow: inset 0px -4px 5px -7px rgb(0 0 0 / 64%);
display: flex;
@ -1025,7 +1052,12 @@ span.header-sort-icon img {
border-right: 1px solid #CCC;
padding: 15px 10px;
box-sizing: border-box;
background-color: rgba(231, 238, 245, .95);
background-color: hsla(
var(--window-sidebar-hue),
var(--window-sidebar-saturation),
var(--window-sidebar-lightness),
calc(0.5 + 0.5*var(--window-sidebar-alpha))
);
overflow-y: scroll;
margin-top: 1px;
}
@ -2019,7 +2051,12 @@ label {
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(231, 238, 245, .9);
background-color: hsla(
var(--taskbar-hue),
var(--taskbar-saturation),
var(--taskbar-lightness),
calc(0.5 + 0.5*var(--taskbar-alpha))
);
display: flex;
justify-content: center;
z-index: 99999;
@ -2126,7 +2163,12 @@ label {
@supports ((backdrop-filter: blur())) {
.taskbar {
background-color: #ffffff94;
background-color: hsla(
var(--taskbar-hue),
var(--taskbar-saturation),
var(--taskbar-lightness),
var(--taskbar-alpha)
);
backdrop-filter: blur(10px);
}
@ -2646,7 +2688,12 @@ label {
@supports ((backdrop-filter: blur())) {
.window-head {
background-color: rgba(231, 238, 245, .80);
background-color: hsla(
var(--window-head-hue),
var(--window-head-saturation),
var(--window-head-lightness),
var(--window-head-alpha)
);
backdrop-filter: blur(10px);
}
@ -2656,7 +2703,13 @@ label {
}
.window-sidebar {
background-color: rgb(231 238 245 / 91%);
/* background-color: var(--puter-window-background); */
background-color: hsla(
var(--window-sidebar-hue),
var(--window-sidebar-saturation),
var(--window-sidebar-lightness),
var(--window-sidebar-alpha)
);
backdrop-filter: blur(10px);
}

20
src/services/ThemeService.js
View File

@ -8,8 +8,9 @@ export class ThemeService extends Service {
lig: 70,
alpha: 1,
};
this.ss = new CSSStyleSheet();
document.adoptedStyleSheets.push(this.ss);
this.root = document.querySelector(':root');
// this.ss = new CSSStyleSheet();
// document.adoptedStyleSheets.push(this.ss);
}
apply (values) {
@ -25,10 +26,15 @@ export class ThemeService extends Service {
reload_ () {
// debugger;
const s = this.state;
this.ss.replace(`
.taskbar, .window-head, .window-sidebar {
background-color: hsla(${s.hue}, ${s.sat}%, ${s.lig}%, ${s.alpha});
}
`)
// this.ss.replace(`
// .taskbar, .window-head, .window-sidebar {
// background-color: hsla(${s.hue}, ${s.sat}%, ${s.lig}%, ${s.alpha});
// }
// `)
// this.root.style.setProperty('--puter-window-background', `hsla(${s.hue}, ${s.sat}%, ${s.lig}%, ${s.alpha})`);
this.root.style.setProperty('--primary-hue', s.hue);
this.root.style.setProperty('--primary-saturation', s.sat + '%');
this.root.style.setProperty('--primary-lightness', s.lig + '%');
this.root.style.setProperty('--primary-alpha', s.alpha);
}
}