sankalp/Modus
1
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(src/shared/styles): replace hardcoded CSS values with design token variables

Browse Source 
Introduce consistent design tokens for radii and colors, replacing alpha() and hardcoded values with theme variables for easier theming and maintenance.

- New Features:   - Add CSS variable usage for radii (var(--radius-*)) and color tokens (@border-subtle, @text-main, @accent)
- Enhancements:
  - Replace hardcoded border, radius, and color definitions with variable references
  - Align styling with the project's theme system
- Bug Fixes:
  - No bug fixes included
This commit is contained in:
sankalp committed 2026-05-14 15:31:01 +05:45
1 parent 60c63308db
commit 5502f85dd1
18 files changed
+340 -314
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/shared/styles/about.css
+4 -4
View File
@@ -4,7 +4,7 @@
box-shadow:
inset 0 -0.5px 0 0.5px alpha(#555, 0.7),
inset 0 0.5px 0 0.5px alpha(#777, 0.7);
border: 1px solid alpha(#111, 0.3);
border: 1px solid @border-subtle;
border-top: none;
border-radius: 1.25rem;
padding: 2rem;
@@ -12,7 +12,7 @@
#about-options {
background-color: alpha(#333, 0.9);
border-radius: 15px;
border-radius: var(--radius-md);
padding: 2rem;
}
@@ -61,7 +61,7 @@
#more-info-button {
background-color: #888888;
border-radius: 5px;
border-radius: var(--radius-xs);
padding: 0px 10px;
margin: 1px 2px;
transition: all 200ms ease-in-out;
@@ -74,5 +74,5 @@
font-size: 12px;
margin: 0px;
font-weight: 400;
color: #fff;
color: @text-main;
}
src/shared/styles/battery-widget.css
+19 -19
View File
@@ -1,9 +1,9 @@
#battery-window {
margin: 6px;
/* background-color: alpha(#fff, 0.09); */
border: 1px solid alpha(#111, 0.3);
box-shadow: inset 0 0 200px 0 alpha(#111, 0.3);
border-radius: 8px;
/* background-color: alpha(@text-main, 0.09); */
border: 1px solid @border-subtle;
box-shadow: inset 0 0 200px 0 @border-subtle;
border-radius: var(--radius-sm);
}
#battery-widget {
@@ -40,7 +40,7 @@
.battery-status-section {
/* background: rgba(255, 255, 255, 0.06); */
/* border-radius: 12px; */
/* border-radius: var(--radius-md); */
padding: 2px;
/* margin: 8px 0; */
/* border: 1px solid rgba(255, 255, 255, 0.08); */
@@ -56,7 +56,7 @@
#energy-mode-button-clickable {
background: transparent;
border: none;
border-radius: 8px;
border-radius: var(--radius-sm);
padding: 6px 12px;
margin: 1px 0;
}
@@ -66,7 +66,7 @@
}
#energy-mode-icon {
border-radius: 50%;
border-radius: var(--radius-full);
padding: 4px;
margin-top: -2px;
margin-bottom: -2px;
@@ -77,17 +77,17 @@
}
#energy-mode-icon.connected {
background-color: #007aff;
color: #ffffff;
background-color: @accent;
color: @text-main;
}
.battery-power-source {
font-size: 12px;
margin-bottom: -4px;
color: alpha(#ffffff, 0.5);
color: alpha(@text-main, 0.5);
}
.battery-section-title {
font-size: 14px;
color: alpha(#ffffff, 0.7);
color: alpha(@text-main, 0.7);
margin: 2px 0 0 8px;
}
.battery-power-mode {
@@ -96,18 +96,18 @@
.battery-settings-button:hover {
margin-top: -5px;
background: alpha(#ffffff, 0.1);
background: alpha(@text-main, 0.1);
min-height: 30px;
border-radius: 8px;
border-radius: var(--radius-sm);
}
.battery-settings-button {
margin-top: -5px;
min-height: 30px;
border-radius: 8px;
border-radius: var(--radius-sm);
}
.battery-settings-button label {
font-weight: 500;
color: alpha(#ffffff, 1);
color: alpha(@text-main, 1);
}
#energy-mode-button:first-child {
margin-top: 0;
@@ -133,7 +133,7 @@
#game-mode-button-clickable {
background: transparent;
border: none;
border-radius: 8px;
border-radius: var(--radius-sm);
padding: 6px 12px;
margin: 1px 0;
/* min-height: 36px; */
@@ -144,7 +144,7 @@
}
#game-mode-icon {
border-radius: 50%;
border-radius: var(--radius-full);
padding: 4px;
margin-right: 8px;
background-color: rgba(255, 255, 255, 0.1);
@@ -152,6 +152,6 @@
}
#game-mode-icon.connected {
background-color: #007aff;
color: #ffffff;
background-color: @accent;
color: @text-main;
}
src/shared/styles/constant.css
+27 -1
View File
@@ -1,6 +1,32 @@
@define-color bg alpha(#fff, 0.07);
@define-color hover alpha(#fff, 0.1);
@define-color border var(--outline);
@define-color active alpha(#fff, 0.9);
@define-color urgent alpha(var(--on-error), 0.7);
/* New common colors */
@define-color accent #007aff;
@define-color accent-hover #0056cc;
@define-color bg-lighter alpha(#fff, 0.12);
@define-color bg-darker alpha(#000, 0.08);
@define-color text-main #ffffff;
@define-color text-secondary alpha(#fff, 0.6);
@define-color text-dim #999;
@define-color shadow-color alpha(#000, 0.3);
/* Border and Shadow specific */
@define-color border-subtle alpha(#111, 0.3);
@define-color border-strong alpha(#111, 0.4);
@define-color inner-shadow alpha(#000, 0.3);
/* Constants */
:vars {
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 999px;
--transition-fast: 0.15s ease;
--transition-slow: 0.3s ease;
}
src/shared/styles/controlcenter.css
+142 -142
View File
@@ -6,7 +6,7 @@
#control-center-menu {
background-color: transparent;
border-radius: 12px;
border-radius: var(--radius-md);
box-shadow: none;
margin: 0;
}
@@ -14,18 +14,18 @@
#separator {
min-height: 0.09rem;
margin: 3px 0;
background-color: alpha(#fff, 0.2);
border-radius: 8px;
background-color: alpha(@text-main, 0.2);
border-radius: var(--radius-sm);
}
/* #bluetooth-control-window { */
/* #wifi-control-window, */
#battery-control-window {
margin: 6px;
/* background-color: alpha(#fff, 0.09); */
border: 1px solid alpha(#111, 0.3);
box-shadow: inset 0 0 200px 0 alpha(#111, 0.3);
border-radius: 15px;
/* background-color: alpha(@text-main, 0.09); */
border: 1px solid @border-subtle;
box-shadow: inset 0 0 200px 0 @border-subtle;
border-radius: var(--radius-md);
}
#bluetooth-title,
@@ -36,9 +36,9 @@
#control-center-widgets {
background-color: alpha(#010101, 0.01);
box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
/* border: 1px solid alpha(#111, 0.4); */
border-radius: 12px;
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
/* border: 1px solid @border-strong; */
border-radius: var(--radius-md);
padding: 0.5rem;
}
@@ -46,10 +46,10 @@
#wb-widget,
#brightness-menu {
background-color: alpha(#000, 0.08);
box-shadow: inset 0 0 0 0.5px alpha(#aaa, 0.4);
border: 1px solid alpha(#111, 0.4);
border-radius: 12px;
background-color: @bg-darker;
box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
border: 1px solid @border-strong;
border-radius: var(--radius-md);
}
/* Widgets */
@@ -72,7 +72,7 @@
font-size: 12px;
margin-left: 5px;
font-weight: 500;
color: #999;
color: @text-dim;
}
/* WiFi Password Dialog */
@@ -81,8 +81,8 @@
}
#wifi-dialog-background {
background-color: alpha(#fff, 0.05);
border-radius: 12px;
background-color: alpha(@text-main, 0.05);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
min-width: 450px;
@@ -93,12 +93,12 @@
}
#wifi-dialog-icon {
color: #007aff;
color: @accent;
margin-right: 4px;
}
#wifi-dialog-title {
color: #ffffff;
color: @text-main;
font-size: 14px;
font-weight: 500;
}
@@ -115,7 +115,7 @@
}
#wifi-dialog-password-label {
color: #ffffff;
color: @text-main;
font-size: 13px;
font-weight: 500;
margin-bottom: 4px;
@@ -124,14 +124,14 @@
#wifi-dialog-password-entry {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
border-radius: var(--radius-xs);
padding: 8px 12px;
color: #ffffff;
color: @text-main;
font-size: 13px;
}
#wifi-dialog-password-entry:focus {
border-color: #007aff;
border-color: @accent;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
background-color: rgba(255, 255, 255, 0.15);
}
@@ -144,21 +144,21 @@
background-color: transparent;
border: none;
padding: 4px;
border-radius: 4px;
border-radius: var(--radius-xs);
min-width: 24px;
min-height: 24px;
}
#wifi-dialog-show-password-button:hover {
background-color: alpha(#fff, 0.1);
background-color: @hover;
}
#wifi-dialog-show-password-button image {
color: #ffffff;
color: @text-main;
}
#wifi-dialog-show-password-label {
color: #ffffff;
color: @text-main;
font-size: 12px;
}
@@ -168,7 +168,7 @@
#wifi-dialog-cancel-button,
#wifi-dialog-join-button {
border-radius: 6px;
border-radius: var(--radius-xs);
font-size: 13px;
font-weight: 500;
min-width: 80px;
@@ -178,7 +178,7 @@
#wifi-dialog-cancel-button {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
color: @text-main;
}
#wifi-dialog-cancel-button:hover {
@@ -186,14 +186,14 @@
}
#wifi-dialog-join-button {
background-color: #007aff;
border: 1px solid #007aff;
color: #ffffff;
background-color: @accent;
border: 1px solid @accent;
color: @text-main;
}
#wifi-dialog-join-button:hover {
background-color: #0056cc;
border-color: #0056cc;
background-color: @accent-hover;
border-color: @accent-hover;
}
#wifi-dialog-join-button.disabled {
@@ -212,7 +212,7 @@
#bluetooth-widget-title {
font-size: 12px;
font-weight: 500;
color: #fff;
color: @text-main;
}
/* #bluetooth-widget-top { */
@@ -221,7 +221,7 @@
/* } */
#device-icon {
border-radius: 50%;
border-radius: var(--radius-full);
padding: 5px;
margin-bottom: 2.5px;
margin-top: 2.5px;
@@ -230,7 +230,7 @@
}
#devices-title {
color: alpha(#fff, 0.6);
color: @text-secondary;
}
#device-icon.paired {
@@ -245,14 +245,14 @@
min-width: 40px;
min-height: 20px;
background-color: #bababa;
border-radius: 15px;
border-radius: var(--radius-md);
padding: 2px;
transition: background-color 0.3s ease;
}
#toggle-button slider {
background-color: #fff;
border-radius: 50%;
background-color: @text-main;
border-radius: var(--radius-full);
min-width: 16px;
min-height: 8px;
transition: background-color 0.1s cubic-bezier(0.5, 0.25, 0, 1.25);
@@ -263,7 +263,7 @@
}
/* #toggle-button:checked slider { */
/* background-color: #fff; */
/* background-color: @text-main; */
/* } */
/**/
/* #toggle-button:checked image { */
@@ -271,14 +271,14 @@
/* } */
.menu {
background-color: alpha(#000, 0.08);
box-shadow: inset 0 0 0 0.5px alpha(#aaa, 0.4);
border: 1px solid alpha(#111, 0.4);
border-radius: 12px;
background-color: @bg-darker;
box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
border: 1px solid @border-strong;
border-radius: var(--radius-md);
margin: 5px;
/* background-color: alpha(#999, 0.1); */
/* background-color: alpha(@text-dim, 0.1); */
/* border: 0.5px solid alpha(#000, 0.4); */
/* border-radius: 8px; */
/* border-radius: var(--radius-sm); */
padding: 1rem;
}
@@ -303,7 +303,7 @@
#vol-slider-box {
/* margin-bottom: 2px; */
margin-top: -10px;
/* border: 1px solid alpha(#fff, 1); */
/* border: 1px solid alpha(@text-main, 1); */
}
#volume-widget-slider {
@@ -325,12 +325,12 @@
}
#control-center-menu slider {
background: linear-gradient(135deg, #ffffff 0%, #f0f1f2 100%);
background: linear-gradient(135deg, @text-main 0%, #f0f1f2 100%);
border-color: #000;
min-width: 28px;
min-height: 28px;
margin: -2px;
border-radius: 50%;
border-radius: var(--radius-full);
/* background-image: none; */
/* background-color: transparent; */
/* min-width: 4px; */
@@ -339,11 +339,11 @@
}
#control-center-menu slider:hover {
border-color: #999;
border-color: @text-dim;
min-width: 30px;
min-height: 30px;
margin: -3px;
border-radius: 50%;
border-radius: var(--radius-full);
/* background-image: none; */
/* background-color: transparent; */
/* min-width: 4px; */
@@ -354,42 +354,42 @@
#control-center-menu scale {
background-color: transparent;
margin-top: 10px;
border-radius: 20px;
border-radius: var(--radius-xl);
}
#control-center-menu trough {
min-width: 25px;
border-radius: 99px;
border-radius: var(--radius-full);
background-color: alpha(#666, 0.5);
border: 1px solid alpha(#444, 0.3);
}
#control-center-menu highlight {
background: alpha(#fff, 0.8);
border-radius: 99px;
background: alpha(@text-main, 0.8);
border-radius: var(--radius-full);
}
#control-center-menu mark indicator {
background: none;
background-image: none;
color: alpha(#fff, 0.2);
color: alpha(@text-main, 0.2);
}
#control-center-menu mark label {
background: none;
background-image: none;
color: alpha(#fff, 0.2);
color: alpha(@text-main, 0.2);
}
/* Per-app volume control styles */
#per-app-volume-control {
min-height: 140px;
min-width: 328px;
/* background-color: alpha(#000, 0.3); */
/* background-color: alpha(#999, 0.1); */
/* box-shadow: inset 0 0 200px 0 alpha(#111, 0.3); */
/* background-color: @shadow-color; */
/* background-color: alpha(@text-dim, 0.1); */
/* box-shadow: inset 0 0 200px 0 @border-subtle; */
/* border: 0.5px solid alpha(#000, 0.4); */
border-radius: 8px;
border-radius: var(--radius-sm);
padding: 1rem;
/* padding: 1rem; */
@@ -402,37 +402,37 @@
#back-button {
padding: 8px 12px;
background-color: alpha(#fff, 0.1);
border-radius: 8px;
background-color: @hover;
border-radius: var(--radius-sm);
border: none;
color: #fff;
color: @text-main;
font-size: 13px;
font-weight: 500;
transition: background-color 0.2s ease;
}
#back-button:hover {
background-color: alpha(#fff, 0.18);
background-color: alpha(@text-main, 0.18);
}
/* Apple-style app volume items */
.apple-app-volume-item {
margin: 3px 0;
padding: 16px;
background-color: alpha(#fff, 0.08);
border-radius: 12px;
border: 1px solid alpha(#fff, 0.12);
transition: background-color 0.2s ease;
background-color: alpha(@text-main, 0.08);
border-radius: var(--radius-md);
border: 1px solid alpha(@text-main, 0.12);
transition: background-color var(--transition-fast);
}
.apple-app-volume-item:hover {
background-color: alpha(#fff, 0.12);
background-color: alpha(@text-main, 0.12);
}
.apple-app-name {
font-size: 14px;
font-weight: 600;
color: #fff;
color: @text-main;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
@@ -449,22 +449,22 @@
min-width: 28px;
min-height: 6px;
border-radius: 3px;
background-color: alpha(#fff, 0.25);
background-color: alpha(@text-main, 0.25);
border: none;
box-shadow: inset 0 1px 2px alpha(#000, 0.2);
}
#apple-volume-slider highlight {
background: linear-gradient(90deg, #007aff 0%, #0051d0 100%);
background: linear-gradient(90deg, @accent 0%, #0051d0 100%);
border-radius: 3px;
border: none;
box-shadow: 0 1px 3px alpha(#007aff, 0.3);
box-shadow: 0 1px 3px alpha(@accent, 0.3);
}
#apple-volume-slider slider {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
/* border: 2px solid alpha(#007aff, 0.8); */
border-radius: 50%;
/* border: 2px solid alpha(@accent, 0.8); */
border-radius: var(--radius-full);
min-width: 20px;
min-height: 20px;
margin: -10px;
@@ -475,11 +475,11 @@
}
#apple-volume-slider slider:hover {
background: linear-gradient(135deg, #ffffff 0%, #f0f1f2 100%);
border-color: #007aff;
background: linear-gradient(135deg, @text-main 0%, #f0f1f2 100%);
border-color: @accent;
box-shadow:
0 4px 12px alpha(#000, 0.2),
0 2px 6px alpha(#007aff, 0.3);
0 2px 6px alpha(@accent, 0.3);
min-width: 22px;
min-height: 22px;
margin: -9px;
@@ -492,22 +492,22 @@
margin: -9px;
box-shadow:
0 2px 6px alpha(#000, 0.25),
0 1px 3px alpha(#007aff, 0.4);
0 1px 3px alpha(@accent, 0.4);
}
/* Legacy app volume styles (fallback) */
.app-volume-item {
margin: 8px 0;
padding: 8px;
background-color: alpha(#fff, 0.05);
border-radius: 6px;
border: 1px solid alpha(#fff, 0.1);
background-color: alpha(@text-main, 0.05);
border-radius: var(--radius-xs);
border: 1px solid alpha(@text-main, 0.1);
}
.app-name {
font-size: 13px;
font-weight: 500;
color: #fff;
color: @text-main;
margin-bottom: 5px;
}
@@ -518,50 +518,50 @@
#app-volume-slider trough {
min-width: 20px;
border-radius: 99px;
border-radius: var(--radius-full);
background-color: alpha(#666, 0.5);
border: 1px solid alpha(#444, 0.3);
}
#app-volume-slider highlight {
background: alpha(#0078d4, 0.8);
border-radius: 99px;
border-radius: var(--radius-full);
}
#app-volume-slider slider {
background-color: #fff;
background-color: @text-main;
padding: 2px;
min-width: 4px;
min-height: 18px;
border-radius: 20px;
border-radius: var(--radius-xl);
}
/* Circle button for per-app volume */
#per-app-volume-button {
background-color: alpha(#fff, 0.15);
border: 1px solid alpha(#999, 0.6);
background-color: alpha(@text-main, 0.15);
border: 1px solid alpha(@text-dim, 0.6);
/* min-width: 33px; */
/* min-height: 30px; */
border-radius: 50%;
border-radius: var(--radius-full);
}
#per-app-volume-button:hover {
background-color: alpha(#fff, 0.25);
/* border-color: #007aff; */
background-color: alpha(@text-main, 0.25);
/* border-color: @accent; */
box-shadow: 0 4px 12px alpha(#000, 0.2);
}
#per-app-volume-button:active {
background-color: alpha(#fff, 0.2);
background-color: alpha(@text-main, 0.2);
box-shadow: 0 1px 3px alpha(#000, 0.3);
}
#per-app-volume-icon {
background-color: alpha(#fff, 0.15);
background-color: alpha(@text-main, 0.15);
border: 2px solid alpha(#999, 0.6);
border: 2px solid alpha(@text-dim, 0.6);
border-radius: 50%;
border-radius: var(--radius-full);
min-width: 30px;
}
@@ -578,40 +578,40 @@
min-width: 28px;
min-height: 3px;
border-radius: 1.5px;
background-color: alpha(#fff, 0.3);
background-color: alpha(@text-main, 0.3);
border: none;
box-shadow: inset 0 1px 1px alpha(#000, 0.1);
}
#apple-seek-bar highlight {
background: #007aff;
background: @accent;
border-radius: 1.5px;
border: none;
box-shadow: 0 0 2px alpha(#007aff, 0.4);
box-shadow: 0 0 2px alpha(@accent, 0.4);
}
#apple-seek-bar slider {
background: #ffffff;
border: 1px solid alpha(#007aff, 0.8);
border-radius: 50%;
border: 1px solid alpha(@accent, 0.8);
border-radius: var(--radius-full);
min-width: 12px;
min-height: 12px;
margin: -4.5px;
box-shadow:
0 1px 3px alpha(#000, 0.2),
0 0 0 1px alpha(#fff, 0.8);
0 0 0 1px alpha(@text-main, 0.8);
transition: all 0.1s ease;
}
#apple-seek-bar slider:hover {
background: #ffffff;
border-color: #007aff;
background: @text-main;
border-color: @accent;
min-width: 14px;
min-height: 14px;
margin: -5.5px;
box-shadow:
0 2px 6px alpha(#000, 0.25),
0 0 0 2px alpha(#007aff, 0.3);
0 0 0 2px alpha(@accent, 0.3);
}
#apple-seek-bar slider:active {
@@ -621,7 +621,7 @@
margin: -5px;
box-shadow:
0 1px 3px alpha(#000, 0.3),
0 0 0 2px alpha(#007aff, 0.5);
0 0 0 2px alpha(@accent, 0.5);
}
/* macOS-style expanded player - more compact */
@@ -681,7 +681,7 @@
#macos-player-title {
font-weight: 600;
font-size: 16px;
color: #ffffff;
color: @text-main;
margin-bottom: 2px;
}
@@ -689,14 +689,14 @@
font-weight: 400;
margin-top: -2px;
font-size: 13px;
color: alpha(#999, 0.8);
color: alpha(@text-dim, 0.8);
}
#macos-player-album {
font-weight: 400;
margin-top: -4px;
font-size: 13px;
color: alpha(#999, 0.8);
color: alpha(@text-dim, 0.8);
margin-bottom: 8px;
}
@@ -712,12 +712,12 @@
min-height: 2px;
border-radius: 2px;
background-color: alpha(#fff, 0.25);
background-color: alpha(@text-main, 0.25);
border: none;
}
#macos-seek-bar highlight {
background: #ffffff;
background: @text-main;
border-radius: 2px;
border: none;
}
@@ -743,7 +743,7 @@
#macos-position-label,
#macos-length-label {
font-size: 11px;
color: alpha(#999, 0.9);
color: alpha(@text-dim, 0.9);
font-weight: 400;
}
@@ -756,15 +756,15 @@
#macos-control-button {
background: transparent;
border: none;
border-radius: 50%;
border-radius: var(--radius-full);
min-width: 28px;
/* Slightly smaller */
opacity: 0.7;
min-height: 28px;
padding: 5px;
/* Reduced padding */
color: #ffffff;
transition: all 0.15s ease;
color: @text-main;
transition: all var(--transition-fast) ease;
}
#macos-control-button:hover {
@@ -774,15 +774,15 @@
#macos-play-button {
background: transparent;
border: none;
border-radius: 50%;
border-radius: var(--radius-full);
min-width: 36px;
/* Slightly smaller */
opacity: 0.7;
min-height: 36px;
padding: 7px;
/* Reduced padding */
color: #ffffff;
transition: all 0.15s ease;
color: @text-main;
transition: all var(--transition-fast) ease;
}
#macos-play-button:hover {
@@ -796,9 +796,9 @@
}
.macos-switcher-dot {
background: alpha(#fff, 0.3);
background: alpha(@text-main, 0.3);
/* border: none; */
border-radius: 50%;
border-radius: var(--radius-full);
min-width: 12px;
/* Smaller dots */
min-height: 12px;
@@ -808,12 +808,12 @@
}
.macos-switcher-dot:hover {
background: alpha(#fff, 0.5);
background: alpha(@text-main, 0.5);
}
.macos-switcher-dot.active {
background: #ffffff;
box-shadow: 0 0 0 1px alpha(#fff, 0.3);
background: @text-main;
box-shadow: 0 0 0 1px alpha(@text-main, 0.3);
/* Smaller glow */
}
@@ -822,7 +822,7 @@
.compact-app-volume-item {
padding-bottom: 5px;
padding-right: 14px;
border-bottom: 1px solid alpha(#fff, 0.1);
border-bottom: 1px solid @hover;
}
#app-icon {
@@ -851,7 +851,7 @@
min-height: 2px;
border-radius: 2px;
background-color: alpha(#fff, 0.25);
background-color: alpha(@text-main, 0.25);
border: none;
}
@@ -883,18 +883,18 @@
#wifi-connections,
#bluetooth-connections {
/* background-color: rgba(255, 255, 255, 0.08); */
background-color: alpha(#fff, 0.05);
box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
border: 1px solid alpha(#111, 0.4);
border-radius: 8px;
background-color: alpha(@text-main, 0.05);
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
border: 1px solid @border-strong;
border-radius: var(--radius-sm);
/* padding: 0.5rem; */
/* border-radius: 12px; */
/* border-radius: var(--radius-md); */
padding: 10px;
}
/* WiFi network slots - macOS style */
#wifi-network-slot button {
border-radius: 8px;
border-radius: var(--radius-sm);
padding: 4px 4px;
/* min-width: 280px; */
margin: 2px 0;
@@ -910,12 +910,12 @@
}
#wifi-connections #device-icon.connected {
background-color: #007aff;
color: #ffffff;
background-color: @accent;
color: @text-main;
}
#wifi-network-name {
color: #ffffff;
color: @text-main;
font-size: 14px;
font-weight: 500;
}
@@ -932,7 +932,7 @@
padding: 8px 6px;
margin-bottom: -12px;
margin-top: -6px;
border-radius: 8px;
border-radius: var(--radius-sm);
/* transition: background-color 0.2s ease; */
}
@@ -946,7 +946,7 @@
#device-button {
/* background-color: #000; */
border-radius: 8px;
border-radius: var(--radius-sm);
}
.device-slot:hover {
@@ -968,19 +968,19 @@
padding-left: 5px;
margin-top: -2px;
font-weight: bold;
color: #ffffff;
color: @text-main;
}
.wifi-icon-box {
background-color: #aaaaaa;
border-radius: 50%;
border-radius: var(--radius-full);
padding: 2px;
/* margin-right: 8px; */
}
.wifi-icon-box-connected {
background-color: #007aff;
border-radius: 50%;
background-color: @accent;
border-radius: var(--radius-full);
padding: 2px;
/* margin-right: 8px; */
}
src/shared/styles/dock.css
+5 -5
View File
@@ -3,8 +3,8 @@
padding: 4px 4px;
margin: 4px 4px;
border: none;
border-radius: 16px;
transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
border-radius: var(--radius-lg);
transition: all var(--transition-fast) cubic-bezier(0.165, 0.84, 0.44, 1);
}
#dock.shown {
@@ -54,13 +54,13 @@
#dock_item_icon {
border-radius: 13px;
opacity: 0.7;
transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
transition: all var(--transition-fast) cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* #dock_item_indicator { */
/* transition: all 0.15s ease-out; */
/* min-height: 4px; */
/* border-radius: 4px; */
/* border-radius: var(--radius-xs); */
/* } */
#dock_item {
@@ -82,7 +82,7 @@
min-height: 50px;
margin: 0px 4px;
border-radius: 2px;
background-color: #2b5ea7;
background-color: @accent;
}
.dock_separator.hidden {
src/shared/styles/dropdown.css
+7 -7
View File
@@ -6,16 +6,16 @@
}
#dropdown-options {
background-color: alpha(#000, 0.3);
box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
border: 1px solid alpha(#111, 0.4);
background-color: @shadow-color;
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
border: 1px solid @border-strong;
border-radius: 0.75rem;
padding: 0.5rem;
}
#dropdown-option {
background-color: transparent;
border-radius: 5px;
border-radius: var(--radius-xs);
padding: 0px 10px;
margin: 1px 2px;
transition: all 0ms ease-in-out;
@@ -30,7 +30,7 @@
#dropdown-option-label {
font-size: 13px;
margin: 0px;
color: #fff;
color: @text-main;
font-weight: 400;
}
@@ -39,7 +39,7 @@
}
#dropdown-option:hover #dropdown-option-keybind {
color: #fff;
color: @text-main;
}
#dropdown-option-keybind {
@@ -51,7 +51,7 @@
#dropdown-divider-box {
background-color: transparent;
border-radius: 5px;
border-radius: var(--radius-xs);
padding: 0px 10px;
margin: 2px;
}
src/shared/styles/launcher.css
+17 -17
View File
@@ -1,7 +1,7 @@
#launcher {
background-color: alpha(#000, 0.3);
background-color: @shadow-color;
padding: 0;
border-radius: 12px;
border-radius: var(--radius-md);
min-width: 640px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
@@ -17,7 +17,7 @@
#close-button,
#config-button {
background-color: transparent;
border-radius: 6px;
border-radius: var(--radius-xs);
padding: 6px;
transition: all 0.15s ease;
}
@@ -27,27 +27,27 @@
#config-button:hover,
#config-button:focus {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 6px;
border-radius: var(--radius-xs);
}
#close-button.focused,
#config-button.focused {
background-color: rgba(0, 122, 255, 0.2);
border-radius: 6px;
border-radius: var(--radius-xs);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.4);
}
#close-button.focused #close-label {
color: #007aff;
color: @accent;
}
#config-button.focused #config-label {
color: #007aff;
color: @accent;
}
#close-button:active {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 6px;
border-radius: var(--radius-xs);
}
#close-label {
@@ -61,7 +61,7 @@
#config-button:active {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 6px;
border-radius: var(--radius-xs);
}
#config-label {
@@ -134,11 +134,11 @@
}
#launcher-result-item {
border-radius: 8px;
border-radius: var(--radius-sm);
padding: 12px 16px;
margin: 2px 0;
min-height: 64px;
transition: all 0.15s ease;
transition: all var(--transition-fast);
background: transparent;
}
@@ -156,8 +156,8 @@
#launcher-result-item:selected,
#launcher-result-item:hover,
#launcher-result-item.selected {
border-radius: 8px;
background-color: rgba(0, 122, 255, 0.8);
border-radius: var(--radius-sm);
background-color: alpha(@accent, 0.8);
padding: 12px 16px;
margin: 2px 0;
}
@@ -187,7 +187,7 @@
min-width: 56px;
min-height: 56px;
margin-right: 16px;
border-radius: 12px;
border-radius: var(--radius-md);
}
#result-item-title {
@@ -218,13 +218,13 @@
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.9);
padding: 12px;
border-radius: 8px;
border-radius: var(--radius-sm);
margin-bottom: 8px;
font-size: 14px;
}
#network-password-entry:focus {
border: 1px solid rgba(0, 122, 255, 0.6);
border: 1px solid alpha(@accent, 0.6);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
box-shadow: 0 0 0 3px alpha(@accent, 0.2);
}
src/shared/styles/lock.css
+6 -6
View File
@@ -11,8 +11,8 @@
transition: all 0.7s ease-in-out;
}
#password-entry {
background-color: alpha(#fff, 0.4);
border-radius: 20px;
background-color: alpha(@text-main, 0.4);
border-radius: var(--radius-xl);
color: white;
min-width: 220px;
min-height: 40px;
@@ -33,7 +33,7 @@
}
#lock-date label {
background-color: transparent;
color: alpha(#fff, 0.6);
color: alpha(@text-main, 0.6);
border: none;
font-size: 30px;
margin-top: 80px;
@@ -41,7 +41,7 @@
}
#lock-clock label {
background-color: transparent;
color: alpha(#fff, 0.6);
color: alpha(@text-main, 0.6);
border: none;
font-size: 120px;
margin-top: -20px;
@@ -50,7 +50,7 @@
#face-icon image {
margin-bottom: 10px;
border-radius: 99px;
border-radius: var(--radius-full);
}
#face-icon {
padding-bottom: 10px;
@@ -61,6 +61,6 @@
}
#unlock-text {
font-size: 15px;
color: alpha(#fff, 0.6);
color: alpha(@text-main, 0.6);
font-weight: bold;
}
src/shared/styles/notification-center.css
+24 -24
View File
@@ -1,8 +1,8 @@
#noti-center-box {
background-color: transparent;
/* border: 1px solid alpha(#111, 0.3); */
border-radius: 20px;
/* border: 1px solid @border-subtle; */
border-radius: var(--radius-xl);
margin-right: 10px;
/* padding: 20px; */
/* margin: 6px; */
@@ -14,7 +14,7 @@
min-height: 25px;
min-width: 70px;
border: 1px solid #525155;
border-radius: 15px;
border-radius: var(--radius-md);
margin-top: 10px;
}
@@ -23,7 +23,7 @@
}
#noti-clear-button:hover {
background-color: alpha(#fff, 0.09);
background-color: alpha(@text-main, 0.09);
}
/* Expandable notification group styles */
@@ -35,13 +35,13 @@
#single-notification-content {
background-color: alpha(#1c2328, 0.05);
border: 1.5px solid #525155;
border-radius: 12px;
border-radius: var(--radius-md);
padding: 12px;
transition: all 0.2s ease;
}
#single-notification-content:hover {
background-color: alpha(#999, 0.9);
background-color: alpha(@text-dim, 0.9);
border: 1.5px solid #525155;
}
@@ -55,7 +55,7 @@
#stack-shadow-bottom {
background-color: alpha(#1c2328, 0.05);
border-top: 1px solid #525155;
border-radius: 12px;
border-radius: var(--radius-md);
opacity: 1;
min-height: 16px;
margin-left: 20px;
@@ -68,7 +68,7 @@
background-color: alpha(#1c2328, 0.05);
border-top: 1px solid #525155;
border-radius: 12px;
border-radius: var(--radius-md);
opacity: 1;
min-height: 20px;
margin-left: 10px;
@@ -81,7 +81,7 @@
background-color: alpha(#1c2328, 0.05);
border: 1.2px solid #525155;
border-radius: 12px;
border-radius: var(--radius-md);
padding: 12px;
transition: all 0.2s ease;
}
@@ -104,7 +104,7 @@
#notification-content-collapsed {
background-color: alpha(#000, 0.05);
border: 1px solid #525155;
border-radius: 12px;
border-radius: var(--radius-md);
padding: 12px;
margin: 2px 0;
transition: all 0.2s ease;
@@ -117,7 +117,7 @@
/* Notification count badge */
#notification-count-label {
background-color: alpha(#fff, 0.2);
background-color: alpha(@text-main, 0.2);
color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
padding: 2px 6px;
@@ -136,7 +136,7 @@
}
#notification-group-title {
color: #ffffff;
color: @text-main;
font-weight: bold;
font-size: 14px;
}
@@ -144,23 +144,23 @@
#notification-show-less {
background-color: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid alpha(#fff, 0.2);
border-radius: 6px;
border: 1px solid alpha(@text-main, 0.2);
border-radius: var(--radius-xs);
padding: 2px 8px;
font-size: 11px;
margin-right: 8px;
}
#notification-show-less:hover {
background-color: alpha(#999, 0.7);
background-color: alpha(@text-dim, 0.7);
color: rgba(255, 255, 255, 0.9);
}
#notification-close-all {
background-color: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid alpha(#fff, 0.2);
border-radius: 6px;
border: 1px solid alpha(@text-main, 0.2);
border-radius: var(--radius-xs);
padding: 2px 8px;
font-size: 12px;
min-width: 24px;
@@ -191,7 +191,7 @@
.stacked-notification-item {
background-color: alpha(#000, 0.05);
border: 1px solid #525155;
border-radius: 12px;
border-radius: var(--radius-md);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@@ -226,7 +226,7 @@
/* Make expanded notifications clickable with subtle hover effect */
#expanded-notification-list:hover {
background-color: alpha(#111, 0.9);
border-radius: 8px;
border-radius: var(--radius-sm);
transition: background-color 0.2s ease;
}
@@ -239,13 +239,13 @@
background-color: alpha(#1c2328, 0.05);
font-size: 12px;
margin: 10px;
border-radius: 15px;
border-radius: var(--radius-md);
}
#notification-close-all {
margin: 10px 10px 10px 0;
background-color: alpha(#1c2328, 0.05);
border-radius: 15px;
border-radius: var(--radius-md);
}
#notif-close-button {
@@ -270,7 +270,7 @@
min-height: 40px;
padding: 10px;
border: 1px solid #525155;
border-radius: 12px;
border-radius: var(--radius-md);
}
#notification-centre-notifs:last-child {
@@ -284,13 +284,13 @@
#notification-close-header {
min-width: 23px;
min-height: 23px;
border-radius: 50%;
border-radius: var(--radius-full);
}
#notification-close:hover {
background-color: alpha(#666, 0.8);
min-width: 23px;
min-height: 23px;
border-radius: 50%;
border-radius: var(--radius-full);
}
#notification-close-summery:hover .notification-close-header button {
background-color: transparent;
src/shared/styles/notification.css
+13 -13
View File
@@ -1,29 +1,29 @@
#notification {
padding: 10px;
background-color: alpha(#fff, 0.03);
border-radius: 8px;
background-color: alpha(@text-main, 0.03);
border-radius: var(--radius-sm);
margin-top: 10px;
margin-right: 10px;
/* margin: 5px; */
}
#notification-close-button {
background-color: alpha(#999, 0.3);
border-radius: 8px;
background-color: alpha(@text-dim, 0.3);
border-radius: var(--radius-sm);
}
#notification-close-button:hover {
background-color: alpha(#2369ff, 0.9);
background-color: alpha(@accent, 0.9);
}
#notification-action-buttons button {
background-color: alpha(#999, 0.3);
background-color: alpha(@text-dim, 0.3);
padding: 4px;
border-radius: 7px;
transition: background-color 0.1s ease;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
}
#notification-action-buttons button:hover {
background-color: alpha(#2369ff, 0.9);
background-color: alpha(@accent, 0.9);
}
#notification-action-buttons button:active {
@@ -35,11 +35,11 @@
}
#notification-icon {
border-radius: 16px;
border-radius: var(--radius-lg);
}
#notification-image {
border-radius: 16px;
border-radius: var(--radius-lg);
color: var(--on-surface);
}
@@ -64,9 +64,9 @@
#notif-close-button {
background-color: var(--surface);
border-radius: 16px;
border-radius: var(--radius-lg);
padding: 4px;
transition: background-color 0.1s ease;
transition: background-color var(--transition-fast);
}
#notif-close-button:hover,
src/shared/styles/osd.css
+4 -4
View File
@@ -1,10 +1,10 @@
#osd-container {
background-color: alpha(#fff, 0.09);
background-color: alpha(@text-main, 0.09);
padding: 12px 20px;
margin: 70px;
min-width: 180px;
min-height: 200px;
border-radius: 16px;
border-radius: var(--radius-lg);
}
#osd-container scale {
@@ -16,11 +16,11 @@
min-height: 15px;
margin-right: 4px;
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 16px;
border-radius: var(--radius-lg);
}
#osd-container trough highlight {
border-radius: 100px;
border-radius: var(--radius-full);
background: var(--primary);
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
src/shared/styles/panel.css
+3 -3
View File
@@ -33,7 +33,7 @@
#tray-button {
margin: 5px 0;
padding: 0 2px;
border-radius: 8px;
border-radius: var(--radius-sm);
}
#menubar label,
@@ -45,7 +45,7 @@
#global-menu {
margin: 5px 2px;
padding: 0 5px;
border-radius: 5px;
border-radius: var(--radius-xs);
}
#date-time {
@@ -55,7 +55,7 @@
#workspaces>button {
margin: 6px 0;
padding: 0 16px;
border-radius: 8px;
border-radius: var(--radius-sm);
min-width: 12px;
border: 1px solid @border;
}
src/shared/styles/password-dialog.css
+19 -19
View File
@@ -3,8 +3,8 @@
}
#wifi-dialog-background {
background-color: alpha(#fff, 0.05);
border-radius: 12px;
background-color: alpha(@text-main, 0.05);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
min-width: 450px;
@@ -15,12 +15,12 @@
}
#wifi-dialog-icon {
color: #007aff;
color: @accent;
margin-right: 4px;
}
#wifi-dialog-title {
color: #ffffff;
color: @text-main;
font-size: 14px;
font-weight: 500;
}
@@ -37,7 +37,7 @@
}
#wifi-dialog-password-label {
color: #ffffff;
color: @text-main;
font-size: 13px;
font-weight: 500;
margin-bottom: 4px;
@@ -46,14 +46,14 @@
#wifi-dialog-password-entry {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
border-radius: var(--radius-xs);
padding: 8px 12px;
color: #ffffff;
color: @text-main;
font-size: 13px;
}
#wifi-dialog-password-entry:focus {
border-color: #007aff;
border-color: @accent;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
background-color: rgba(255, 255, 255, 0.15);
}
@@ -66,21 +66,21 @@
background-color: transparent;
border: none;
padding: 4px;
border-radius: 4px;
border-radius: var(--radius-xs);
min-width: 24px;
min-height: 24px;
}
#wifi-dialog-show-password-button:hover {
background-color: alpha(#fff, 0.1);
background-color: alpha(@text-main, 0.1);
}
#wifi-dialog-show-password-button image {
color: #ffffff;
color: @text-main;
}
#wifi-dialog-show-password-label {
color: #ffffff;
color: @text-main;
font-size: 12px;
}
@@ -90,7 +90,7 @@
#wifi-dialog-cancel-button,
#wifi-dialog-join-button {
border-radius: 6px;
border-radius: var(--radius-xs);
font-size: 13px;
font-weight: 500;
min-width: 80px;
@@ -100,7 +100,7 @@
#wifi-dialog-cancel-button {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
color: @text-main;
}
#wifi-dialog-cancel-button:hover {
@@ -108,14 +108,14 @@
}
#wifi-dialog-join-button {
background-color: #007aff;
border: 1px solid #007aff;
color: #ffffff;
background-color: @accent;
border: 1px solid @accent;
color: @text-main;
}
#wifi-dialog-join-button:hover {
background-color: #0056cc;
border-color: #0056cc;
background-color: @accent-hover;
border-color: @accent-hover;
}
#wifi-dialog-join-button.disabled {
src/shared/styles/player.css
+24 -24
View File
@@ -1,5 +1,5 @@
#player-stack-button {
border-radius: 5px;
border-radius: var(--radius-xs);
min-width: 7px;
min-height: 7px;
margin: 10px 3px;
@@ -17,40 +17,40 @@
}
#player-stack-button.active {
border-radius: 5px;
border-radius: var(--radius-xs);
background-color: rgb(221.25, 221.25, 223.65);
}
#outer-player-box {
min-height: 110px;
min-width: 320px;
border-radius: 10px;
border-radius: var(--radius-sm);
margin: 0 6px;
background-color: alpha(#000, 0.3);
box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
background-color: @shadow-color;
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
}
#outer-player-box-c {
min-height: 55px;
min-width: 245px;
border-radius: 8px;
border-radius: var(--radius-sm);
/* margin: 0 6px; */
/* background-color: alpha(#000, 0.3); */
/* box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4); */
/* background-color: @shadow-color; */
/* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
}
#outer-no-player-box-c {
min-height: 55px;
min-width: 345px;
border-radius: 8px;
border-radius: var(--radius-sm);
/* margin: 0 6px; */
/* background-color: alpha(#000, 0.3); */
/* box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4); */
/* background-color: @shadow-color; */
/* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
}
#box-c {
background-color: alpha(#000, 0.08);
box-shadow: inset 0 0 0 0.5px alpha(#aaa, 0.4);
border: 1px solid alpha(#111, 0.4);
border-radius: 12px;
background-color: @bg-darker;
box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
border: 1px solid @border-strong;
border-radius: var(--radius-md);
margin-top: 0.5rem;
margin-left: 4px;
margin-right: 4px;
@@ -58,11 +58,11 @@
min-height: 50px;
min-width: 330px;
/* border-radius: 8px; */
/* border-radius: var(--radius-sm); */
/* margin: 0 6px 10px; */
/* border: 0.5px solid alpha(#000, 0.4); */
/* background-color: alpha(#999, 0.1); */
/* box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4); */
/* background-color: alpha(@text-dim, 0.1); */
/* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
}
#player-box:disabled highlight,
#player-box:disabled progress {
@@ -98,7 +98,7 @@
#player-artist-c {
margin-top: -5px;
color: #999;
color: @text-dim;
font-size: 12px;
}
#player-artist,
@@ -142,7 +142,7 @@
margin-bottom: 10px;
background-size: cover;
margin-left: 10px;
border-radius: 5px;
border-radius: var(--radius-xs);
}
.album-image {
min-width: 70px;
@@ -162,17 +162,17 @@
#seek-bar scale {
background-color: transparent;
margin-top: 10px;
border-radius: 10px;
border-radius: var(--radius-sm);
}
#seek-bar trough {
min-width: 10px;
border-radius: 99px;
border-radius: var(--radius-full);
background-color: alpha(#666, 0.5);
border: 1px solid alpha(#444, 0.3);
}
#seek-bar highlight {
background: alpha(#fff, 0.8);
border-radius: 99px;
background: alpha(@text-main, 0.8);
border-radius: var(--radius-full);
}
src/shared/styles/settings.css
+8 -8
View File
@@ -1,6 +1,6 @@
#settings-window {
background-color: var(--background);
border-radius: 12px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
min-width: 850px;
min-height: 600px;
@@ -19,7 +19,7 @@
#settings-sidebar-button {
padding: 10px 15px;
border-radius: 8px;
border-radius: var(--radius-sm);
margin-bottom: 2px;
}
@@ -53,7 +53,7 @@
#settings-row {
padding: 12px 15px;
border-radius: 8px;
border-radius: var(--radius-sm);
background-color: rgba(255, 255, 255, 0.03);
margin-bottom: 2px;
}
@@ -71,7 +71,7 @@
#settings-switch {
background-color: rgba(255, 255, 255, 0.1);
padding: 6px 12px;
border-radius: 20px;
border-radius: var(--radius-xl);
min-width: 50px;
transition: all 0.2s ease;
}
@@ -84,7 +84,7 @@
#settings-entry {
background-color: rgba(255, 255, 255, 0.05);
padding: 8px 12px;
border-radius: 6px;
border-radius: var(--radius-xs);
border: 1px solid var(--border);
min-width: 200px;
color: var(--foreground);
@@ -97,7 +97,7 @@
#settings-combo {
background-color: rgba(255, 255, 255, 0.05);
padding: 4px 8px;
border-radius: 6px;
border-radius: var(--radius-xs);
border: 1px solid var(--border);
min-width: 150px;
color: var(--foreground);
@@ -113,7 +113,7 @@
#settings-list-tag {
background-color: rgba(255, 255, 255, 0.08);
border-radius: 15px;
border-radius: var(--radius-md);
padding: 4px 10px;
margin-right: 5px;
margin-bottom: 5px;
@@ -141,6 +141,6 @@
background-color: rgba(255, 255, 255, 0.03);
border: 1px dashed var(--border);
padding: 6px 12px;
border-radius: 6px;
border-radius: var(--radius-xs);
font-size: 13px;
}
src/shared/styles/switcher.css
+3 -3
View File
@@ -1,6 +1,6 @@
#application-switcher-container {
background-color: var(--shadow);
border-radius: 20px;
border-radius: var(--radius-xl);
padding: 24px;
}
@@ -17,7 +17,7 @@
#window-button {
background-color: transparent;
border-radius: 12px;
border-radius: var(--radius-md);
}
#window-button.active {
@@ -39,7 +39,7 @@
}
#switcher-icon-box {
border-radius: 12px;
border-radius: var(--radius-md);
padding: 4px;
}
src/shared/styles/tray.css
+4 -4
View File
@@ -1,7 +1,7 @@
tooltip {
border: #474747 solid 1px;
border-radius: 0.75rem;
background-color: alpha(#fff, 0.05);
background-color: alpha(@text-main, 0.05);
}
@keyframes tooltipShow {
@@ -23,7 +23,7 @@ menu {
border: #474747 solid 1px;
border-radius: 0.75rem;
transition: all 100ms ease-in-out;
background-color: alpha(#fff, 0.05);
background-color: alpha(@text-main, 0.05);
}
menu > menuitem {
@@ -39,12 +39,12 @@ menu > menuitem:last-child {
menu > menuitem:hover {
transition: all 20ms ease-in-out;
font-size: 13px;
border-radius: 4px;
border-radius: var(--radius-xs);
color: #222;
background-color: alpha(#2369ff, 1);
}
menu > menuitem:hover > label {
color: #fff;
color: @text-main;
font-weight: 400;
}
src/shared/styles/widgets.css
+11 -11
View File
@@ -2,8 +2,8 @@
margin: 5px 5px 20px 5px;
min-width: 170px;
min-height: 170px;
border-radius: 18px;
transition: all 0.5s ease-in-out;
border-radius: var(--radius-lg);
transition: all var(--transition-slow);
background: #202020;
}
@@ -92,7 +92,7 @@
margin: 5px 20px 20px 10px;
min-width: 170px;
min-height: 170px;
border-radius: 16px;
border-radius: var(--radius-lg);
}
#calendar-widget {
@@ -113,7 +113,7 @@
#calendar-day-header {
font-size: 12px;
font-weight: 600;
color: #ffffff;
color: @text-main;
min-width: 18px;
min-height: 10px;
}
@@ -130,7 +130,7 @@
font-size: 12px;
margin: 1.4px 0px 1.4px 0px;
font-weight: 500;
color: #ffffff;
color: @text-main;
min-width: 18px;
min-height: 10px;
}
@@ -148,7 +148,7 @@
font-weight: 700;
color: #191919;
background-color: var(--blue-dim);
border-radius: 50%;
border-radius: var(--radius-full);
min-width: 18px;
min-height: 16px;
padding: 2px;
@@ -174,12 +174,12 @@
padding: 5px;
margin-top: 10px;
font-size: 30px;
color: alpha(#fff, 0.9);
color: alpha(@text-main, 0.9);
font-weight: 600;
}
#date label {
color: alpha(#fff, 0.9);
color: alpha(@text-main, 0.9);
margin-top: -10px;
font-size: 90px;
@@ -195,7 +195,7 @@
margin: 5px 10px 20px 5px;
min-width: 170px;
min-height: 170px;
border-radius: 16px;
border-radius: var(--radius-lg);
}
/* System Info Widget CSS */
@@ -204,7 +204,7 @@
margin: 5px 5px 5px 5px;
min-width: 170px;
min-height: 170px;
border-radius: 16px;
border-radius: var(--radius-lg);
}
#ram-progress {
@@ -252,7 +252,7 @@
#info-value {
font-size: 12px;
font-weight: 600;
color: #ffffff;
color: @text-main;
}
#info-container {