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

refactor(styles/widgets): update CSS color variables to use glass theming

Browse Source
This commit is contained in:
sankalp committed 2026-07-14 21:43:22 +05:45
1 parent ef7b200c74
commit 9f192cdc56
7 files changed
+72 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/widgets/about.css
+6 -9
View File
@@ -1,33 +1,30 @@
#about-menu {
background-color: @bg-a50;
background-color: @glass-card;
box-shadow:
inset 0 -0.5px 0 0.5px alpha(@bg-a90, 0.7),
inset 0 0.5px 0 0.5px @outline-a70;
border: 1px solid @outline-a30;
border: 1px solid @glass-border;
border-top: none;
border-radius: 1.25rem;
padding: 2rem;
}
#vendor-label {
color: @fg-a40;
color: @glass-text-secondary;
margin-top: -1rem;
}
#info-label {
color: @fg-a60;
color: @glass-text-secondary;
}
#more-info-button {
background-color: @fg-a40;
background-color: @glass-hover;
border-radius: apply(radius-xs);
padding: 0px 10px;
margin: 1px 2px;
transition: all apply(transition-medium) ease-in-out;
}
#more-info-button:hover {
background-color: @primary;
background-color: @glass-accent;
}
#more-info-button label {
src/styles/widgets/desktop-widgets.css
+19 -15
View File
@@ -4,7 +4,8 @@
min-height: 170px;
border-radius: apply(radius-lg);
transition: all apply(transition-slow);
background: @surface;
background: @glass-widget;
border: 1px solid @glass-border-soft;
}
/* Base Weather Layout */
@@ -13,7 +14,7 @@
}
#city {
color: @fg-a85;
color: @glass-text;
font-weight: 600;
font-size: 18px;
}
@@ -39,7 +40,7 @@
#feels-like {
font-weight: 500;
font-size: 15px;
color: @fg-a80;
color: @glass-text;
}
/* Weather Condition Gradients */
@@ -56,7 +57,7 @@
}
.weather-overcast {
background: linear-gradient(135deg, @bg-a80 0%, @bg-a80 100%);
background: linear-gradient(135deg, @glass-surface-4 0%, @glass-surface-4 100%);
}
.weather-fog {
@@ -64,15 +65,15 @@
}
.weather-light-rain {
background: linear-gradient(135deg, @on-primary 0%, @bg-a90 100%);
background: linear-gradient(135deg, @on-primary 0%, @glass-dialog 100%);
}
.weather-rain {
background: linear-gradient(135deg, @bg-a70 0%, @on-tertiary 100%);
background: linear-gradient(135deg, @glass-surface-3 0%, @on-tertiary 100%);
}
.weather-heavy-rain {
background: linear-gradient(135deg, @surface 0%, @bg-a90 100%);
background: linear-gradient(135deg, @surface 0%, @glass-dialog 100%);
}
.weather-snow,
@@ -86,11 +87,12 @@
/* Calendar Widget */
#calendar-box-widget {
background: linear-gradient(to bottom, @surface, @background);
background: @glass-widget;
margin: 5px 20px 20px 10px;
min-width: 170px;
min-height: 170px;
border-radius: apply(radius-lg);
border: 1px solid @glass-border-soft;
}
#calendar-widget {
@@ -119,7 +121,7 @@
#calendar-day-header-weekend {
font-size: apply(font-sm);
font-weight: 600;
color: @fg-a50;
color: @glass-text-secondary;
min-width: 18px;
min-height: 10px;
}
@@ -136,7 +138,7 @@
#calendar-day-weekend {
font-size: apply(font-sm);
font-weight: 500;
color: @fg-a50;
color: @glass-text-secondary;
min-width: 18px;
min-height: 16px;
}
@@ -172,12 +174,12 @@
padding: 5px;
margin-top: 10px;
font-size: 30px;
color: @fg-a90;
color: @glass-text;
font-weight: 600;
}
#date label {
color: @fg-a90;
color: @glass-text;
margin-top: -10px;
font-size: 90px;
@@ -189,20 +191,22 @@
}
#date-container {
background: linear-gradient(to bottom, @surface, @background);
background: @glass-widget;
margin: 5px 10px 20px 5px;
min-width: 170px;
min-height: 170px;
border-radius: apply(radius-lg);
border: 1px solid @glass-border-soft;
}
/* System Info Widget CSS */
#info-box-widget {
background: linear-gradient(to bottom, @surface, @background);
background: @glass-widget;
margin: 5px 5px 5px 5px;
min-width: 170px;
min-height: 170px;
border-radius: apply(radius-lg);
border: 1px solid @glass-border-soft;
}
#progress-label {
@@ -220,7 +224,7 @@
#info-text {
font-size: apply(font-md);
font-weight: 500;
color: @fg-a60;
color: @glass-text-secondary;
min-width: 32px;
}
src/styles/widgets/dropdown.css
+5 -6
View File
@@ -6,9 +6,8 @@
}
#dropdown-options {
background-color: @bg-a50;
box-shadow: inset 0 0 0 1px alpha(@fg-a40, 0.4);
border: 1px solid @outline-a40;
background-color: @glass-menu;
border: 1px solid @glass-border;
border-radius: 0.75rem;
padding: 0.5rem;
}
@@ -24,7 +23,7 @@
#dropdown-option:hover {
color: @on-primary;
transition: all 20ms ease-in-out;
background-color: @primary;
background-color: @glass-accent;
}
#dropdown-option:hover #dropdown-option-label {
@@ -48,7 +47,7 @@
#dropdown-option-keybind {
font-weight: 500;
color: @fg-a80;
color: @glass-text-secondary;
}
/* Divider */
@@ -60,6 +59,6 @@
margin: 2px;
}
#dropdown-divider {
border-bottom: 1px solid alpha(@fg-a80, 0.3);
border-bottom: 1px solid @glass-divider;
margin: 2px 0;
}
src/styles/widgets/other.css
+3 -3
View File
@@ -12,14 +12,14 @@
.flat-scale trough {
background-color: alpha(@bg-a80, 0.5);
background-color: @glass-surface-1;
min-height: 25px;
border-radius: apply(radius-full);
border: 1px solid alpha(@bg-a75, 0.3);
border: 1px solid @glass-border-soft;
}
.flat-scale highlight {
background-color: @fg-a80;
background-color: @glass-text-secondary;
min-height: 25px;
border-radius: apply(radius-full);
}
src/styles/widgets/pomodoro.css
+9 -10
View File
@@ -1,11 +1,10 @@
#pomodoro-popup {
background-color: @bg-a50;
background-color: @glass-card;
border-radius: apply(radius-md);
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
padding: 15px;
margin-right: 20px;
border: 1px solid @border-strong;
border: 1px solid @glass-border;
}
#pomodoro-container {
@@ -23,7 +22,7 @@
#pomodoro-cycle {
font-size: 13px;
font-weight: 500;
color: @fg-a60;
color: @glass-text-secondary;
font-family: "SF Pro Rounded";
}
@@ -56,7 +55,7 @@
}
#pomodoro-phase-btn {
background-color: @fg-a18;
background-color: @glass-highlight-strong;
color: alpha(@theme_fg_color, 0.7);
border-radius: apply(radius-sm);
padding: 5px 14px;
@@ -65,7 +64,7 @@
}
#pomodoro-phase-btn:hover {
background-color: @fg-a25;
background-color: @glass-active;
color: @theme_fg_color;
}
@@ -88,7 +87,7 @@
}
#pomodoro-reset-btn, #pomodoro-secondary-btn {
background-color: @fg-a18;
background-color: @glass-highlight-strong;
color: @theme_fg_color;
border-radius: apply(radius-sm);
padding: 6px 15px;
@@ -97,11 +96,11 @@
}
#pomodoro-reset-btn:hover, #pomodoro-secondary-btn:hover {
background-color: @fg-a25;
background-color: @glass-active;
}
#pomodoro-spin-box {
background-color: @fg-a18;
background-color: @glass-highlight-strong;
border-radius: apply(radius-sm);
padding: 2px;
}
@@ -118,5 +117,5 @@
}
#pomodoro-spin-btn:hover {
background-color: @fg-a25;
background-color: @glass-active;
}
src/styles/widgets/todo.css
+24 -26
View File
@@ -1,12 +1,11 @@
/* === Main Todo List === */
#todo-list-menu {
background-color: @bg-a50;
background-color: @glass-card;
border-radius: apply(radius-md);
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
padding: 15px;
margin-right: 20px;
border: 1px solid @border-strong;
border: 1px solid @glass-border;
}
#todo-main-container {
@@ -28,13 +27,13 @@
#todo-stats {
font-size: 12px;
color: @fg-a60;
color: @glass-text-secondary;
font-family: "SF Pro Rounded";
}
/* === Add Task Section === */
#todo-add-section {
background-color: @fg-a18;
background-color: @glass-hover;
border-radius: apply(radius-sm);
padding: 8px 10px;
}
@@ -49,11 +48,11 @@
}
#new-todo-entry placeholder {
color: @fg-a40;
color: @glass-text-disabled;
}
#add-todo-button {
background-color: @primary;
background-color: @glass-accent;
border-radius: apply(radius-full);
padding: 6px;
min-width: 24px;
@@ -61,7 +60,7 @@
}
#add-todo-button:hover {
background-color: alpha(@primary, 0.8);
background-color: alpha(@glass-accent, 0.8);
}
/* === Todo Items === */
@@ -77,12 +76,12 @@
}
#todo-item:hover {
background-color: alpha(@fg-a10, 0.3);
background-color: @glass-hover;
}
#todo-divider {
min-height: 1px;
background-color: alpha(@fg-a20, 0.5);
background-color: @glass-highlight-soft;
margin: 0 4px;
}
@@ -104,7 +103,7 @@
}
#todo-checkbox:hover {
background-color: alpha(@fg-a18, 0.5);
background-color: @glass-hover;
border-radius: apply(radius-sm);
}
@@ -125,7 +124,7 @@
min-width: 24px;
min-height: 24px;
font-size: 16px;
color: @fg-a40;
color: @glass-text-secondary;
opacity: 0;
transition: opacity 0.2s ease;
}
@@ -136,7 +135,7 @@
#todo-options-btn:hover {
color: @foreground;
background-color: alpha(@fg-a18, 0.5);
background-color: @glass-hover;
border-radius: apply(radius-sm);
}
@@ -145,7 +144,7 @@
background: transparent;
border: none;
font-size: 12px;
color: @fg-a40;
color: @glass-text-disabled;
padding: 4px;
}
@@ -155,19 +154,18 @@
#todo-footer {
font-size: 11px;
color: @fg-a40;
color: @glass-text-secondary;
font-family: "SF Pro Rounded";
margin-top: 4px;
}
/* === Options Popover === */
#todo-options-popover {
background-color: @bg-a50;
background-color: @glass-card;
border-radius: apply(radius-md);
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
padding: 10px;
margin-right: 20px;
border: 1px solid @border-strong;
border: 1px solid @glass-border;
min-width: 340px;
}
@@ -184,13 +182,13 @@
#todo-opt-subtitle {
font-size: 11px;
color: @fg-a60;
color: @glass-text-secondary;
font-family: "SF Pro Rounded";
}
/* === Color Swatches === */
#todo-color-swatch {
background-color: @fg-a18;
background-color: @glass-hover;
border-radius: apply(radius-full);
padding: 0;
min-width: 28px;
@@ -200,7 +198,7 @@
}
#todo-color-swatch:hover {
border-color: alpha(@foreground, 0.3);
border-color: @glass-border;
}
#todo-color-swatch.selected {
@@ -210,7 +208,7 @@
/* === Deadline Pill === */
#todo-deadline-pill {
background-color: @fg-a18;
background-color: @glass-hover;
border-radius: apply(radius-full);
padding: 6px 12px;
}
@@ -224,7 +222,7 @@
/* === Stepper (reuse pomodoro style) === */
#todo-spin-box {
background-color: @fg-a10;
background-color: @glass-hover;
border-radius: apply(radius-sm);
padding: 2px;
}
@@ -241,7 +239,7 @@
}
#todo-spin-btn:hover {
background-color: @fg-a25;
background-color: @glass-active;
}
#todo-spin-value {
@@ -252,7 +250,7 @@
/* === Preset Buttons === */
#todo-preset-btn {
background-color: @fg-a18;
background-color: @glass-hover;
border-radius: apply(radius-full);
padding: 6px 12px;
font-size: 11px;
@@ -261,5 +259,5 @@
}
#todo-preset-btn:hover {
background-color: @fg-a25;
background-color: @glass-active;
}
src/styles/widgets/tray.css
+6 -6
View File
@@ -1,7 +1,7 @@
tooltip {
border: @bg-a90 solid 1px;
border: 1px solid @glass-border;
border-radius: 0.75rem;
background-color: @bg-a50;
background-color: @glass-tooltip;
}
@keyframes tooltipShow {
@@ -20,17 +20,17 @@ tooltip > * {
}
menu {
border: @bg-a90 solid 1px;
border: 1px solid @glass-border;
border-radius: 0.75rem;
transition: all apply(transition-xfast) ease-in-out;
background-color: @bg-a50;
background-color: @glass-menu;
}
menu > menuitem {
padding: 5px 10px;
margin: 1px 2px;
font-size: apply(font-md);
border-bottom: @bg-a90 solid 1px;
border-bottom: 1px solid @glass-divider;
}
menu > menuitem:last-child {
@@ -41,7 +41,7 @@ menu > menuitem:hover {
font-size: apply(font-md);
border-radius: apply(radius-xs);
color: @on-primary;
background-color: @primary;
background-color: @glass-accent;
}
menu > menuitem:hover > label {