🐞 fix: Update styles

This commit is contained in:
Keith Solomon
2025-08-15 06:49:43 -05:00
parent 597128aa2e
commit 23e98e3696

View File

@@ -17,21 +17,13 @@
} }
body { body {
background-color: var(--background-color-light);
color: var(--text-color-light);
font-family: sans-serif; font-family: sans-serif;
text-align: center; text-align: center;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
body[data-theme='light'] {
background-color: var(--background-color-light);
color: var(--text-color-light);
}
body[data-theme='dark'] {
background-color: var(--background-color-dark);
color: var(--text-color-dark);
}
.theme-switcher { .theme-switcher {
position: absolute; position: absolute;
right: .75rem; right: .75rem;
@@ -40,21 +32,12 @@ body[data-theme='dark'] {
#theme-switch { #theme-switch {
background: none; background: none;
border: 1px solid; border: 1px solid var(--text-color-light);
color: var(--text-color-light);
cursor: pointer; cursor: pointer;
padding: .25rem .5rem; padding: .25rem .5rem;
} }
body[data-theme='light'] #theme-switch {
border-color: var(--text-color-light);
color: var(--text-color-light);
}
body[data-theme='dark'] #theme-switch {
border-color: var(--text-color-dark);
color: var(--text-color-dark);
}
.container { .container {
margin: auto; margin: auto;
overflow: hidden; overflow: hidden;
@@ -64,11 +47,10 @@ body[data-theme='dark'] #theme-switch {
h1 { color: var(--h1-color-light); } h1 { color: var(--h1-color-light); }
body[data-theme='dark'] h1 { color: var(--h1-color-dark); }
.scores { .scores {
border: 1px solid; border: 1px solid var(--text-color-light);
border-left: none; border-left: none;
color: var(--text-color-light);
border-right: none; border-right: none;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@@ -82,16 +64,6 @@ body[data-theme='dark'] h1 { color: var(--h1-color-dark); }
} }
} }
body[data-theme='light'] .scores {
border-color: var(--text-color-light);
color: var(--text-color-light);
}
body[data-theme='dark'] .scores {
border-color: var(--text-color-dark);
color: var(--text-color-dark);
}
.actions button { .actions button {
background-color: var(--button-background-color); background-color: var(--button-background-color);
border: none; border: none;
@@ -116,25 +88,40 @@ body[data-theme='dark'] .scores {
.log { .log {
margin-top: 1.5rem; margin-top: 1.5rem;
text-align: left; text-align: left;
}
.log ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.log li { li {
background: var(--log-background-color-light);
border-left: 5px solid var(--log-border-color-light);
margin-bottom: .25rem; margin-bottom: .25rem;
padding: .5rem; padding: .5rem;
transition: background-color 0.3s, border-left-color 0.3s; transition: background-color 0.3s, border-left-color 0.3s;
} }
body[data-theme='light'] .log li {
background: var(--log-background-color-light);
border-left: 5px solid var(--log-border-color-light);
} }
body[data-theme='dark'] .log li { /* Dark mode styles */
body[data-theme='dark'] {
background-color: var(--background-color-dark);
color: var(--text-color-dark);
#theme-switch {
border-color: var(--text-color-dark);
color: var(--text-color-dark);
}
h1 { color: var(--h1-color-dark); }
.scores {
border-color: var(--text-color-dark);
color: var(--text-color-dark);
}
.log li {
background: var(--log-background-color-dark); background: var(--log-background-color-dark);
border-left: 5px solid var(--log-border-color-dark); border-left: 5px solid var(--log-border-color-dark);
} }
}