asolkar/web-workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Using variables for colors

Browse Source
This commit is contained in:
Mahesh Asolkar 2025-03-22 19:02:58 -07:00
parent 924752d772
commit 6389a3695f
1 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
style.css
View File

@ -3,8 +3,18 @@
--table-grade-top: #eee;
--table-grade-bottom: #ddd;
--table-shadow: #ccc;
--table-active: #363;
--table-active-grade: #474;
--table-active: #04a;
--table-active-grade: #037;
--indicator-pending: #aaa;
--indicator-pending-grade: #888;
--indicator-active: #04a;
--indicator-active-grade: #03a;
--indicator-done: #5a5;
--indicator-done-grade: #282;
}
html {
@ -51,7 +61,7 @@ html {
background: linear-gradient(var(--table-active), var(--table-active-grade));
color: white;
border: 1px solid var(--table-active);
box-shadow: 1px 1px 15px var(--table-active);
box-shadow: 1px 1px 10px var(--table-active);
}
.workout-wrapper .set-table td,
.workout-wrapper .set-table th {
@ -73,6 +83,33 @@ html {
width: 30%;
}
/* Workout indicator */
.workout-wrapper .progress-indicator {
display: inline-block;
white-space: pre-wrap;
width: 1em;
border: thin solid gray;
border-radius: 0.5em;
font-size: 0.3em;
vertical-align: middle;
margin-left: 1em;
}
.workout-wrapper .progress-indicator.active {
background: linear-gradient(var(--indicator-active), var(--indicator-active-grade));
border: 1px solid var(--indicator-active);
box-shadow: 1px 1px 7px var(--indicator-active-grade);
}
.workout-wrapper .progress-indicator.pending {
background: linear-gradient(var(--indicator-pending), var(--indicator-pending-grade));
border: 1px solid var(--indicator-pending);
box-shadow: 1px 1px 7px var(--indicator-pending-grade);
}
.workout-wrapper .progress-indicator.done {
background: linear-gradient(var(--indicator-done), var(--indicator-done-grade));
border: 1px solid var(--indicator-done);
box-shadow: 1px 1px 7px var(--indicator-done-grade);
}
/* Global */
.workout-wrapper #app_debug_div {
border: thin dotted blue;