style: replace solid accent hover/active with glass effect
- glass-hover: alpha(@foreground,0.08) → alpha(white,0.10) - glass-active: alpha(@foreground,0.14) → alpha(white,0.50) - panel, settings, dropdown, tray, notification hover → glass-hover - battery, wifi, bluetooth connected icons → glass-active - wifi-icon-box base dimmed to glass-hover for contrast
This commit is contained in:
9 files changed
+40
-30
No files matched your search
@@ -38,8 +38,8 @@
|
||||
|
||||
/* Interactive States */
|
||||
|
||||
@define-color glass-hover alpha(@foreground, 0.08);
|
||||
@define-color glass-active alpha(@foreground, 0.14);
|
||||
@define-color glass-hover alpha(white, 0.10);
|
||||
@define-color glass-active alpha(white, 0.50);
|
||||
@define-color glass-selected alpha(@primary, 0.18);
|
||||
@define-color glass-focus alpha(@primary, 0.25);
|
||||
|
||||
|
||||
@@ -37,7 +37,17 @@
|
||||
}
|
||||
|
||||
#wifi-connections #device-icon.connected {
|
||||
background-color: @glass-accent;
|
||||
background-color: @glass-active;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
/* Bluetooth-specific device icon styles */
|
||||
#bluetooth-connections #device-icon {
|
||||
background-color: @glass-hover;
|
||||
}
|
||||
|
||||
#bluetooth-connections #device-icon.connected {
|
||||
background-color: @glass-active;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
#device-icon.connected {
|
||||
background-color: @glass-accent;
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
#toggle-button {
|
||||
@@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
#toggle-button:checked {
|
||||
background-color: @glass-accent;
|
||||
background-color: @glass-active;
|
||||
}
|
||||
|
||||
|
||||
@@ -123,13 +123,13 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
.wifi-icon-box {
|
||||
background-color: @glass-text-secondary;
|
||||
background-color: @glass-hover;
|
||||
border-radius: apply(radius-full);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.wifi-icon-box-connected {
|
||||
background-color: @glass-accent;
|
||||
background-color: @glass-active;
|
||||
border-radius: apply(radius-full);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
@@ -77,8 +77,8 @@ menu.mac-context-menu {
|
||||
}
|
||||
|
||||
.mac-context-menu menuitem:hover {
|
||||
background-color: @glass-accent;
|
||||
color: @glass-overlay-dark;
|
||||
background-color: @glass-hover;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
.mac-header-pill {
|
||||
|
||||
@@ -21,13 +21,13 @@
|
||||
}
|
||||
|
||||
#dropdown-option:hover {
|
||||
color: @on-primary;
|
||||
color: @glass-text;
|
||||
transition: all 20ms ease-in-out;
|
||||
background-color: @glass-accent;
|
||||
background-color: @glass-hover;
|
||||
}
|
||||
|
||||
#dropdown-option:hover #dropdown-option-label {
|
||||
color: @on-primary;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
#dropdown-option-label {
|
||||
@@ -42,7 +42,7 @@
|
||||
}
|
||||
|
||||
#dropdown-option:hover #dropdown-option-keybind {
|
||||
color: @on-primary;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
#dropdown-option-keybind {
|
||||
|
||||
@@ -40,11 +40,11 @@ menu > menuitem:hover {
|
||||
transition: all 20ms ease-in-out;
|
||||
font-size: apply(font-md);
|
||||
border-radius: apply(radius-xs);
|
||||
color: @on-primary;
|
||||
background-color: @glass-accent;
|
||||
color: @glass-text;
|
||||
background-color: @glass-hover;
|
||||
}
|
||||
|
||||
menu > menuitem:hover > label {
|
||||
color: @on-primary;
|
||||
color: @glass-text;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -137,11 +137,11 @@
|
||||
}
|
||||
|
||||
#energy-mode-icon.connected {
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
background-color: @glass-active;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
#game-mode-icon.connected {
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
background-color: @glass-active;
|
||||
color: @glass-text;
|
||||
}
|
||||
@@ -15,8 +15,8 @@
|
||||
#global-menu:hover,
|
||||
#global-menu.active,
|
||||
#workspaces>button:hover {
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
background-color: @glass-hover;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
#panel-button,
|
||||
@@ -60,11 +60,11 @@
|
||||
}
|
||||
|
||||
#workspaces>button.active:hover {
|
||||
background-color: @glass-accent;
|
||||
background-color: @glass-hover;
|
||||
}
|
||||
|
||||
#workspaces>button.active:hover label {
|
||||
color: @on-primary;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
#workspaces>button.urgent {
|
||||
@@ -83,7 +83,7 @@
|
||||
#global-menu:hover *,
|
||||
#global-menu.active *,
|
||||
#workspaces>button:hover * {
|
||||
color: @on-primary;
|
||||
color: @glass-text;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
}
|
||||
|
||||
#settings-sidebar-button:hover {
|
||||
background-color: @glass-accent;
|
||||
color: @on-primary;
|
||||
background-color: @glass-hover;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
#settings-sidebar-button Label {
|
||||
@@ -34,16 +34,16 @@
|
||||
}
|
||||
|
||||
#settings-sidebar-button.active {
|
||||
background-color: @glass-accent;
|
||||
background-color: @glass-hover;
|
||||
}
|
||||
|
||||
#settings-sidebar-button.active Label {
|
||||
color: @on-primary;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
#settings-sidebar-button:hover *,
|
||||
#settings-sidebar-button.active * {
|
||||
color: @on-primary;
|
||||
color: @glass-text;
|
||||
}
|
||||
|
||||
#settings-content-wrapper {
|
||||
|
||||
Reference in new issue
Block a user