style(src/styles/window): migrate to glass color variables
This commit is contained in:
9 files changed
+100
-105
No files matched your search
@@ -6,21 +6,21 @@
|
||||
font-size: apply(font-lg);
|
||||
font-weight: bold;
|
||||
|
||||
color: @fg-a95;
|
||||
color: @glass-text;
|
||||
margin: 6px 10px;
|
||||
}
|
||||
|
||||
.battery-power-source {
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
color: @fg-a80;
|
||||
color: @glass-text-secondary;
|
||||
margin: 0px 12px;
|
||||
}
|
||||
|
||||
.battery-section-title {
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
color: @fg-a90;
|
||||
color: @glass-text;
|
||||
margin: 8px 12px 4px 12px;
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
font-size: apply(font-lg);
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
color: @fg-a95;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
#energy-mode-button-clickable {
|
||||
@@ -44,11 +44,11 @@
|
||||
}
|
||||
|
||||
#energy-mode-button-clickable:hover {
|
||||
background: @fg-a10;
|
||||
background: @glass-hover;
|
||||
}
|
||||
|
||||
#energy-mode-button-clickable:hover #energy-mode-icon {
|
||||
background-color: @fg-a25;
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
#energy-mode-icon {
|
||||
@@ -58,18 +58,18 @@
|
||||
margin-bottom: -2px;
|
||||
margin-right: 6px;
|
||||
margin-left: -6px;
|
||||
background-color: @fg-a10;
|
||||
color: @fg-a70;
|
||||
background-color: @glass-hover;
|
||||
color: @glass-text-secondary;
|
||||
}
|
||||
|
||||
.battery-power-source {
|
||||
font-size: apply(font-sm);
|
||||
margin-bottom: -4px;
|
||||
color: @fg-a50;
|
||||
color: @glass-text-secondary;
|
||||
}
|
||||
.battery-section-title {
|
||||
font-size: apply(font-base);
|
||||
color: @fg-a70;
|
||||
color: @glass-text-secondary;
|
||||
margin: 2px 0 0 8px;
|
||||
}
|
||||
.battery-power-mode {
|
||||
@@ -78,7 +78,7 @@
|
||||
|
||||
.battery-settings-button:hover {
|
||||
margin-top: -5px;
|
||||
background: @fg-a10;
|
||||
background: @glass-hover;
|
||||
min-height: 30px;
|
||||
border-radius: apply(radius-sm);
|
||||
}
|
||||
@@ -97,12 +97,12 @@
|
||||
#energy-mode-button {
|
||||
margin-top: -8px;
|
||||
margin-bottom: 4px;
|
||||
color: @fg-a85;
|
||||
color: @glass-text-secondary;
|
||||
}
|
||||
.gamemode-button {
|
||||
font-size: apply(font-sm);
|
||||
margin-left: -6px;
|
||||
color: @fg-a85;
|
||||
color: @glass-text-secondary;
|
||||
}
|
||||
|
||||
#game-mode-button {
|
||||
@@ -121,27 +121,27 @@
|
||||
}
|
||||
|
||||
#game-mode-button-clickable:hover {
|
||||
background: @fg-a10;
|
||||
background: @glass-hover;
|
||||
}
|
||||
|
||||
#game-mode-button-clickable:hover #game-mode-icon {
|
||||
background-color: @fg-a25;
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
#game-mode-icon {
|
||||
border-radius: apply(radius-full);
|
||||
padding: 4px;
|
||||
margin-right: 8px;
|
||||
background-color: @fg-a10;
|
||||
color: @fg-a70;
|
||||
background-color: @glass-hover;
|
||||
color: @glass-text-secondary;
|
||||
}
|
||||
|
||||
#energy-mode-icon.connected {
|
||||
background-color: @primary;
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
}
|
||||
|
||||
#game-mode-icon.connected {
|
||||
background-color: @primary;
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
}
|
||||
@@ -5,10 +5,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#dock-canvas-box {
|
||||
padding: 0px 50px 5px 50px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#dock-outer-box {
|
||||
background: transparent;
|
||||
|
||||
@@ -7,14 +7,14 @@
|
||||
}
|
||||
|
||||
#lock-notch-stack {
|
||||
background-color: #000000;
|
||||
background-color: @shadow;
|
||||
border-radius: 0 0 apply(radius-lg) apply(radius-lg);
|
||||
min-width: 200px;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
#lock-notch-corner {
|
||||
background-color: #000000;
|
||||
background-color: @shadow;
|
||||
border-radius: 0;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
@@ -34,7 +34,7 @@
|
||||
#indicator-box #bt-button *,
|
||||
#indicator-box #network-button *,
|
||||
#indicator-box #battery-button * {
|
||||
color: @fg-a60;
|
||||
color: @glass-text-secondary;
|
||||
}
|
||||
|
||||
#indicator-box #bt-button:hover,
|
||||
@@ -46,7 +46,7 @@
|
||||
#indicator-box #bt-button:hover *,
|
||||
#indicator-box #network-button:hover *,
|
||||
#indicator-box #battery-button:hover * {
|
||||
color: @fg-a60;
|
||||
color: @glass-text-secondary;
|
||||
}
|
||||
#container-box {
|
||||
min-height: 50px;
|
||||
@@ -54,7 +54,7 @@
|
||||
transition: all 0.7s ease-in-out;
|
||||
}
|
||||
#password-entry {
|
||||
background-color: @fg-a40;
|
||||
background-color: @glass-surface-2;
|
||||
border-radius: apply(radius-xl);
|
||||
color: white;
|
||||
min-width: 220px;
|
||||
@@ -76,7 +76,7 @@
|
||||
}
|
||||
#lock-date label {
|
||||
background-color: transparent;
|
||||
color: @fg-a60;
|
||||
color: @glass-text-secondary;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
margin-top: 80px;
|
||||
@@ -84,7 +84,7 @@
|
||||
}
|
||||
#lock-clock label {
|
||||
background-color: transparent;
|
||||
color: @fg-a60;
|
||||
color: @glass-text-secondary;
|
||||
border: none;
|
||||
font-size: 120px;
|
||||
margin-top: -20px;
|
||||
@@ -104,6 +104,6 @@
|
||||
}
|
||||
#unlock-text {
|
||||
font-size: 15px;
|
||||
color: @fg-a60;
|
||||
color: @glass-text-secondary;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
#osd-container {
|
||||
background-color: @bg-a50;
|
||||
background-color: @glass-popup;
|
||||
padding: 12px 20px;
|
||||
margin: 70px;
|
||||
min-width: 180px;
|
||||
min-height: 200px;
|
||||
border-radius: apply(radius-lg);
|
||||
border: 1px solid @glass-border-soft;
|
||||
}
|
||||
|
||||
#osd-container scale {
|
||||
@@ -12,7 +13,7 @@
|
||||
}
|
||||
|
||||
#osd-container trough {
|
||||
background: var(--surface);
|
||||
background: @glass-surface-1;
|
||||
min-height: 15px;
|
||||
margin-right: 4px;
|
||||
transition: all apply(transition-slower) cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
@@ -21,6 +22,6 @@
|
||||
|
||||
#osd-container trough highlight {
|
||||
border-radius: apply(radius-full);
|
||||
background: var(--primary);
|
||||
background: @glass-accent;
|
||||
transition: all apply(transition-slower) cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
#panel {
|
||||
background-color: @bg-a50;
|
||||
background-color: @glass-panel;
|
||||
margin: -4px 0;
|
||||
transition: all 120ms ease-in-out;
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
#global-menu:hover,
|
||||
#global-menu.active,
|
||||
#workspaces>button:hover {
|
||||
background-color: @primary;
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
#workspaces>button.active {
|
||||
background-color: alpha(@foreground, 0.4);
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
#workspaces>button.active label {
|
||||
@@ -60,7 +60,7 @@
|
||||
}
|
||||
|
||||
#workspaces>button.active:hover {
|
||||
background-color: @primary;
|
||||
background-color: @glass-accent;
|
||||
}
|
||||
|
||||
#workspaces>button.active:hover label {
|
||||
@@ -68,7 +68,7 @@
|
||||
}
|
||||
|
||||
#workspaces>button.urgent {
|
||||
background-color: alpha(@error, 0.7);
|
||||
background-color: @glass-error;
|
||||
}
|
||||
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
#panel-notch-stack {
|
||||
background-color: #000000;
|
||||
background-color: @shadow;
|
||||
border-radius: 0 0 apply(radius-lg) apply(radius-lg);
|
||||
min-width: 200px;
|
||||
min-height: 34px;
|
||||
@@ -100,7 +100,7 @@
|
||||
|
||||
|
||||
#panel-notch-corner {
|
||||
background-color: #000000;
|
||||
background-color: @shadow;
|
||||
border-radius: 0;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
@@ -150,14 +150,14 @@
|
||||
#notch-indicator-icon {
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
color: @on-surface-variant;
|
||||
color: @glass-text-secondary;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
#notch-indicator-label {
|
||||
font-size: apply(font-xs);
|
||||
font-weight: 600;
|
||||
color: @on-surface-variant;
|
||||
color: @glass-text-secondary;
|
||||
letter-spacing: 0.5px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
#sc-toolbar {
|
||||
background-color: @bg-a50;
|
||||
border: 1px solid @border-subtle;
|
||||
background-color: @glass-popup;
|
||||
border: 1px solid @glass-border;
|
||||
border-radius: apply(radius-sm);
|
||||
padding: 5px 6px 5px 8px;
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
#sc-close-btn:hover {
|
||||
background-color: @error-a70;
|
||||
background-color: @glass-error;
|
||||
color: @on-error;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
@@ -41,18 +41,18 @@
|
||||
}
|
||||
|
||||
#sc-tool-btn:hover {
|
||||
background-color: @bg-hover;
|
||||
background-color: @glass-hover;
|
||||
}
|
||||
|
||||
#sc-tool-btn.active {
|
||||
background-color: @bg-active;
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
|
||||
#sc-separator {
|
||||
min-width: 1px;
|
||||
min-height: 18px;
|
||||
background-color: @border-subtle;
|
||||
background-color: @glass-divider;
|
||||
margin: 5px 8px;
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
}
|
||||
|
||||
#sc-options-btn:hover {
|
||||
background-color: @bg-hover;
|
||||
background-color: @glass-hover;
|
||||
}
|
||||
|
||||
#sc-options-label {
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
#sc-options-arrow {
|
||||
font-size: apply(font-xs);
|
||||
color: @text-dim;
|
||||
color: @glass-text-secondary;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
#sc-action-btn {
|
||||
padding: 5px 20px;
|
||||
border-radius: apply(radius-full);
|
||||
background-color: @primary;
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
font-size: apply(font-sm);
|
||||
font-weight: 600;
|
||||
@@ -102,12 +102,11 @@
|
||||
}
|
||||
|
||||
#sc-action-btn:hover {
|
||||
background-color: @primary-a80;
|
||||
box-shadow: 0 2px 12px @primary-a50;
|
||||
background-color: alpha(@glass-accent, 0.8);
|
||||
}
|
||||
|
||||
#sc-action-btn.recording {
|
||||
background-color: @error;
|
||||
background-color: @glass-error;
|
||||
color: @on-error;
|
||||
}
|
||||
|
||||
@@ -116,17 +115,15 @@
|
||||
}
|
||||
|
||||
#sc-action-btn.recording:hover {
|
||||
background-color: @error-a70;
|
||||
box-shadow: 0 2px 12px @error-a40;
|
||||
background-color: alpha(@glass-error, 0.8);
|
||||
}
|
||||
|
||||
|
||||
#sc-menu {
|
||||
background-color: @bg-a90;
|
||||
border: 1px solid @border-subtle;
|
||||
background-color: @glass-menu;
|
||||
border: 1px solid @glass-border;
|
||||
border-radius: apply(radius-md);
|
||||
padding: 4px 0;
|
||||
box-shadow: 0 8px 32px @shadow-a40;
|
||||
}
|
||||
|
||||
#sc-menu-item {
|
||||
@@ -137,13 +134,13 @@
|
||||
}
|
||||
|
||||
#sc-menu-item:hover {
|
||||
background-color: @bg-hover;
|
||||
background-color: @glass-hover;
|
||||
}
|
||||
|
||||
#sc-menu-section {
|
||||
font-size: apply(font-xs);
|
||||
font-weight: 700;
|
||||
color: @text-muted;
|
||||
color: @glass-text-secondary;
|
||||
padding: 8px 16px 2px 16px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@@ -151,24 +148,24 @@
|
||||
/* Dim hint on the right of submenu parent items (Timer / Microphone) */
|
||||
.sc-menu-hint {
|
||||
font-size: apply(font-xs);
|
||||
color: @text-dim;
|
||||
color: @glass-text-secondary;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
#sc-menu-sep {
|
||||
background-color: @border-subtle;
|
||||
background-color: @glass-divider;
|
||||
min-height: 1px;
|
||||
margin: 4px 10px;
|
||||
}
|
||||
|
||||
|
||||
.sc-switch {
|
||||
background-color: @fg-a25;
|
||||
background-color: @glass-border;
|
||||
border-radius: apply(radius-full);
|
||||
transition: background-color apply(transition-slow) ease;
|
||||
}
|
||||
|
||||
.sc-switch.checked {
|
||||
background-color: @primary;
|
||||
color: @fg-a90;
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
#settings-window {
|
||||
background-color: @bg-a50;
|
||||
background-color: @glass-card;
|
||||
border-radius: apply(radius-md);
|
||||
border: 1px solid @outline-a40;
|
||||
border: 1px solid @glass-border;
|
||||
min-width: 850px;
|
||||
min-height: 600px;
|
||||
}
|
||||
@@ -11,10 +11,10 @@
|
||||
}
|
||||
|
||||
#settings-sidebar {
|
||||
background-color: @bg-a95;
|
||||
background-color: @glass-surface-2;
|
||||
padding: 20px 10px;
|
||||
min-width: 200px;
|
||||
border-right: 1px solid @outline-a40;
|
||||
border-right: 1px solid @glass-divider;
|
||||
}
|
||||
|
||||
#settings-sidebar-button {
|
||||
@@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
#settings-sidebar-button:hover {
|
||||
background-color: @primary;
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
#settings-sidebar-button.active {
|
||||
background-color: @primary;
|
||||
background-color: @glass-accent;
|
||||
}
|
||||
|
||||
#settings-sidebar-button.active Label {
|
||||
@@ -60,12 +60,12 @@
|
||||
#settings-row {
|
||||
padding: 12px 15px;
|
||||
border-radius: apply(radius-sm);
|
||||
background-color: @fg-a03;
|
||||
background-color: @glass-hover;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#settings-row:hover {
|
||||
background-color: @fg-a10;
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
#settings-row-label {
|
||||
@@ -75,47 +75,47 @@
|
||||
|
||||
#settings-row-description {
|
||||
font-size: apply(font-sm);
|
||||
color: @fg-a60;
|
||||
color: @glass-text-secondary;
|
||||
}
|
||||
|
||||
#settings-switch {
|
||||
min-width: 40px;
|
||||
min-height: 22px;
|
||||
background-color: @fg-a30;
|
||||
background-color: @glass-border;
|
||||
border-radius: apply(radius-full);
|
||||
padding: 3px;
|
||||
transition: background-color apply(transition-slow) ease;
|
||||
}
|
||||
|
||||
#settings-switch.active {
|
||||
background-color: @primary;
|
||||
color: @fg-a90;
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
}
|
||||
|
||||
#settings-entry {
|
||||
background-color: @bg-a70;
|
||||
background-color: @glass-surface-1;
|
||||
padding: 8px 12px;
|
||||
border-radius: apply(radius-xs);
|
||||
border: 1px solid @outline-a40;
|
||||
border: 1px solid @glass-border;
|
||||
min-width: 200px;
|
||||
color: @foreground;
|
||||
}
|
||||
|
||||
#settings-entry:focus {
|
||||
border-color: @primary;
|
||||
border-color: @glass-ring;
|
||||
}
|
||||
|
||||
#settings-combo {
|
||||
background-color: @bg-a70;
|
||||
background-color: @glass-surface-1;
|
||||
padding: 4px 8px;
|
||||
border-radius: apply(radius-xs);
|
||||
border: 1px solid @outline-a40;
|
||||
border: 1px solid @glass-border;
|
||||
min-width: 150px;
|
||||
color: @foreground;
|
||||
}
|
||||
|
||||
#settings-combo:hover {
|
||||
background-color: @fg-a10;
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
#settings-list-tags {
|
||||
@@ -123,7 +123,7 @@
|
||||
}
|
||||
|
||||
#settings-list-tag {
|
||||
background-color: @fg-a08;
|
||||
background-color: @glass-hover;
|
||||
border-radius: apply(radius-md);
|
||||
padding: 4px 10px;
|
||||
margin-right: 5px;
|
||||
@@ -131,7 +131,7 @@
|
||||
}
|
||||
|
||||
#settings-list-tag:hover {
|
||||
background-color: @fg-a15;
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
#settings-list-tag Label {
|
||||
@@ -139,18 +139,18 @@
|
||||
}
|
||||
|
||||
#settings-list-tag-close {
|
||||
color: @fg-a60;
|
||||
color: @glass-text-secondary;
|
||||
font-size: apply(font-2xs);
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
#settings-list-tag-close:hover {
|
||||
color: @primary;
|
||||
color: @glass-accent;
|
||||
}
|
||||
|
||||
#settings-list-entry {
|
||||
background-color: @fg-a03;
|
||||
border: 1px dashed @outline-a40;
|
||||
background-color: @glass-hover;
|
||||
border: 1px dashed @glass-border;
|
||||
padding: 6px 12px;
|
||||
border-radius: apply(radius-xs);
|
||||
font-size: apply(font-md);
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
margin: 8px;
|
||||
padding: 5px;
|
||||
border-radius: apply(radius-lg);
|
||||
background-color: @bg-a80;
|
||||
border: 1px solid @outline-a40;
|
||||
background-color: @glass-popup;
|
||||
border: 1px solid @glass-border;
|
||||
}
|
||||
|
||||
.spotlight-scroll-clip {
|
||||
@@ -18,7 +18,7 @@
|
||||
padding: 8px;
|
||||
border: solid 1px transparent;
|
||||
border-radius: apply(radius-md);
|
||||
background-color: @fg-a12;
|
||||
background-color: @glass-hover;
|
||||
transition: background-color apply(transition-medium) ease-in-out;
|
||||
}
|
||||
|
||||
@@ -26,20 +26,20 @@
|
||||
padding: 8px;
|
||||
border: solid 1px transparent;
|
||||
border-radius: apply(radius-md);
|
||||
background-color: @fg-a12;
|
||||
background-color: @glass-hover;
|
||||
transition: border apply(transition-fast) ease-in-out,
|
||||
background-color apply(transition-medium) ease-in-out;
|
||||
}
|
||||
|
||||
.app-slot:hover {
|
||||
border-color: @outline-a40;
|
||||
background-color: @fg-a18;
|
||||
border-color: @glass-border;
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
.app-slot:focus,
|
||||
.app-slot.selected {
|
||||
border-color: @primary-a40;
|
||||
background-color: @primary-a20;
|
||||
border-color: @glass-ring;
|
||||
background-color: @glass-selected;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
@@ -49,12 +49,12 @@
|
||||
}
|
||||
|
||||
.app-description {
|
||||
color: @text-dim;
|
||||
color: @glass-text-secondary;
|
||||
font-size: apply(font-sm);
|
||||
}
|
||||
|
||||
.calc-expression {
|
||||
color: @text-dim;
|
||||
color: @glass-text-secondary;
|
||||
font-size: apply(font-base);
|
||||
}
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
}
|
||||
|
||||
.power-menu-description {
|
||||
color: @text-muted;
|
||||
color: @glass-text-secondary;
|
||||
font-size: apply(font-sm);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
#app-switcher-container {
|
||||
background-color: @bg-a50;
|
||||
background-color: @glass-popup;
|
||||
border-radius: apply(radius-xl);
|
||||
padding: 16px 24px;
|
||||
border: 1px solid @glass-border;
|
||||
}
|
||||
|
||||
#app-switcher-view {
|
||||
@@ -16,11 +17,11 @@
|
||||
}
|
||||
|
||||
#app-switcher-button.hovered {
|
||||
background-color: @fg-a10;
|
||||
background-color: @glass-hover;
|
||||
}
|
||||
|
||||
#app-switcher-button.selected {
|
||||
background-color: @primary-a30;
|
||||
background-color: @glass-selected;
|
||||
}
|
||||
|
||||
#app-switcher-icon-box {
|
||||
|
||||
Reference in new issue
Block a user