lukas/mathquest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make css more generic

Browse Source
This commit is contained in:
Lukas Cremer
2026-05-13 23:30:53 +02:00
parent f3fa43d452
commit f4a1b4dca9
6 changed files with 129 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
public/style.css
View File

@@ -1,13 +1,29 @@
:root {
--theme-bg: #1a252f;
--theme-bg-mid: #2c3e50;
--theme-bg-light: #34495e;
--theme-bg-hover: #3d566e;
--theme-text: #ecf0f1;
--theme-muted: #7f8c8d;
--theme-muted-light: #bdc3c7;
--theme-accent: #3498db;
--theme-accent-hover: #2980b9;
/* Shell colors — neutral light defaults (auth, class picker) */
--theme-bg: #f0f2f5;
--theme-bg-mid: #ffffff;
--theme-bg-light: #e0e4ea;
--theme-bg-hover: #d0d5de;
--theme-text: #2c3e50;
--theme-muted: #8892a4;
--theme-muted-light: #a8b2c0;
--theme-accent: #4a90d9;
--theme-accent-hover: #3a7bc8;
/* Content area / lesson-level theming */
--theme-content-bg: #e8ecf0;
--theme-card-bg: #ffffff;
--theme-card-radius: 4px;
--theme-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
--theme-font: 'Arial', sans-serif;
--theme-ui-radius: 0px;
--theme-text-transform: uppercase;
--theme-letter-spacing: 1px;
--theme-h1-letter-spacing: 2px;
--theme-sidebar-item-margin: 0;
--theme-sidebar-active-bg: var(--theme-bg);
--theme-sidebar-active-border: 4px solid var(--theme-accent);
--theme-sidebar-active-color: var(--theme-text);
}
* {
@@ -17,7 +33,7 @@
}
body {
font-family: 'Arial', 'Helvetica', sans-serif;
font-family: var(--theme-font);
background: var(--theme-bg-mid);
min-height: 100vh;
padding: 0;
@@ -54,8 +70,8 @@ body {
color: var(--theme-text);
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-transform: var(--theme-text-transform);
letter-spacing: var(--theme-letter-spacing);
}
.sidebar-item {
@@ -65,6 +81,8 @@ body {
border-bottom: 1px solid var(--theme-bg-mid);
background: var(--theme-bg-light);
color: var(--theme-text);
margin: var(--theme-sidebar-item-margin);
border-radius: var(--theme-ui-radius);
}
.sidebar-item:hover {
@@ -72,9 +90,9 @@ body {
}
.sidebar-item.active {
background: var(--theme-bg);
border-left: 4px solid var(--theme-accent);
color: var(--theme-text);
background: var(--theme-sidebar-active-bg);
border-left: var(--theme-sidebar-active-border);
color: var(--theme-sidebar-active-color);
font-weight: bold;
}
@@ -88,7 +106,7 @@ body {
}
.sidebar-item.completed.active {
background: var(--theme-bg);
background: var(--theme-sidebar-active-bg);
border-left: 4px solid #27ae60;
}
@@ -104,9 +122,7 @@ body {
border: 1px solid #7f3030;
color: #c0392b;
font-size: 0.8em;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: inherit;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
display: block;
@@ -125,7 +141,7 @@ body {
.container {
max-width: 100%;
background: #ffffff;
background: var(--theme-content-bg);
padding: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
min-height: 100vh;
@@ -151,23 +167,23 @@ h1 {
color: var(--theme-text);
margin: 0;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
text-transform: var(--theme-text-transform);
letter-spacing: var(--theme-h1-letter-spacing);
}
.points-display {
background: var(--theme-bg-mid);
padding: 15px 25px;
border: 2px solid var(--theme-accent);
border-radius: 4px;
border-radius: var(--theme-ui-radius);
text-align: center;
}
.points-label {
font-size: 0.85em;
color: var(--theme-muted-light);
text-transform: uppercase;
letter-spacing: 1px;
text-transform: var(--theme-text-transform);
letter-spacing: var(--theme-letter-spacing);
margin-bottom: 5px;
}
@@ -193,8 +209,8 @@ h1 {
color: var(--theme-text);
margin-bottom: 10px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-transform: var(--theme-text-transform);
letter-spacing: var(--theme-letter-spacing);
}
.progress-bar-container {
@@ -202,6 +218,7 @@ h1 {
height: 25px;
background: var(--theme-bg-mid);
border: 1px solid var(--theme-bg);
border-radius: var(--theme-ui-radius);
overflow: hidden;
margin-bottom: 8px;
}
@@ -226,17 +243,16 @@ h1 {
}
.chapter-description {
background: #f8f9fa;
background: rgba(0, 0, 0, 0.04);
padding: 20px 25px;
margin-bottom: 30px;
font-size: 1em;
line-height: 1.7;
color: #2c3e50;
border-left: 4px solid var(--theme-accent);
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(0, 0, 0, 0.08);
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.task-container {
@@ -245,13 +261,14 @@ h1 {
}
.task-card {
background: #ffffff;
background: var(--theme-card-bg);
padding: 30px;
border: 2px solid #e0e0e0;
border: 2px solid rgba(0, 0, 0, 0.08);
border-left: 4px solid var(--theme-accent);
border-radius: var(--theme-card-radius);
transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
box-shadow: var(--theme-card-shadow);
}
.task-card:hover {
@@ -301,16 +318,16 @@ h1 {
.task-title {
font-size: 1.1em;
font-weight: bold;
color: var(--theme-bg);
text-transform: uppercase;
letter-spacing: 1px;
color: #1a252f;
text-transform: var(--theme-text-transform);
letter-spacing: var(--theme-letter-spacing);
}
.task-points {
background: var(--theme-bg-light);
color: var(--theme-text);
padding: 6px 15px;
border-radius: 2px;
border-radius: var(--theme-ui-radius);
font-weight: bold;
font-size: 0.9em;
border: 1px solid var(--theme-bg-mid);
@@ -339,10 +356,10 @@ h1 {
font-size: 1.2em;
padding: 12px 18px;
border: 2px solid #bdc3c7;
border-radius: 2px;
border-radius: var(--theme-ui-radius);
width: 150px;
text-align: center;
font-family: 'Arial', sans-serif;
font-family: inherit;
font-weight: bold;
background: #ffffff;
color: #1a1a1a;
@@ -360,12 +377,12 @@ h1 {
border: none;
padding: 12px 30px;
font-size: 1em;
border-radius: 2px;
border-radius: var(--theme-ui-radius);
cursor: pointer;
font-family: 'Arial', sans-serif;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-transform: var(--theme-text-transform);
letter-spacing: var(--theme-letter-spacing);
transition: background-color 0.2s;
}
@@ -437,6 +454,7 @@ h1 {
.auth-card {
background: var(--theme-bg-mid);
border: 1px solid var(--theme-bg-light);
border-radius: var(--theme-ui-radius);
padding: 32px;
width: 100%;
max-width: 360px;
@@ -479,6 +497,7 @@ h1 {
margin-bottom: 10px;
background: var(--theme-bg);
border: 1px solid var(--theme-bg-light);
border-radius: var(--theme-ui-radius);
color: var(--theme-text);
font-size: 0.95em;
transition: border-color 0.2s;
@@ -507,6 +526,7 @@ h1 {
background: var(--theme-accent);
color: white;
border: none;
border-radius: var(--theme-ui-radius);
font-size: 0.95em;
cursor: pointer;
transition: background-color 0.2s;
@@ -532,6 +552,7 @@ h1 {
.class-picker-card {
background: var(--theme-bg-mid);
border: 1px solid var(--theme-bg-light);
border-radius: var(--theme-ui-radius);
padding: 40px;
width: 100%;
max-width: 560px;
@@ -558,6 +579,7 @@ h1 {
.class-card {
background: var(--theme-bg);
border: 2px solid var(--card-accent, var(--theme-accent));
border-radius: var(--theme-ui-radius);
padding: 20px 24px;
cursor: pointer;
transition: opacity 0.15s, transform 0.15s;
@@ -615,8 +637,13 @@ h1 {
.user-name {
color: var(--theme-muted-light);
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 1px;
text-transform: var(--theme-text-transform);
letter-spacing: var(--theme-letter-spacing);
}
.user-buttons {
display: flex;
gap: 6px;
}
.logout-button {
@@ -625,9 +652,9 @@ h1 {
color: var(--theme-muted);
padding: 5px 12px;
font-size: 0.8em;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
font-family: inherit;
text-transform: var(--theme-text-transform);
letter-spacing: var(--theme-letter-spacing);
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}