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/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);
}