Andreas/mtg_python_deckbuilder
1
0
Fork 0
mirror of https://github.com/mwisnowski/mtg_python_deckbuilder.git synced 2025-12-22 10:30:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): finished JavaScript consolidation, tested JavaScript items, refined themes and color palettes, tested all themes and palettes, ensured all interactive lements use theme-aware css

Browse source
This commit is contained in:
matt 2025-10-29 15:45:40 -07:00
parent 9379732eec
commit 3c45a31aa3
19 changed files with 498 additions and 632 deletions
Download patch file Download diff file Expand all files Collapse all files

62
code/web/static/styles.css
View file

@ -1116,10 +1116,10 @@ video {
/* warm beige background (keep existing) */
--panel: #ebe5d8;
/* lighter warm cream - more contrast with bg, subtle panels */
--text: #1a1410;
/* dark brown for readability */
--muted: #6b655d;
/* warm muted brown (keep existing) */
--text: #0d0a08;
/* very dark brown/near-black for strong readability */
--muted: #5a544c;
/* darker muted brown for better contrast */
--border: #bfb5a3;
/* darker warm-gray border for better definition */
/* Navbar/banner: darker warm brown for hierarchy */
@ -1652,6 +1652,42 @@ select,input[type="text"],input[type="number"]{
padding:.35rem .4rem;
}
/* Range slider styling */
input[type="range"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: var(--bg);
border-radius: 4px;
outline: none;
border: 1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--blue-main);
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--panel);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
input[type="range"]::-moz-range-thumb{
width: 20px;
height: 20px;
background: var(--blue-main);
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--panel);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
fieldset{
border:1px solid var(--border);
border-radius:8px;
@ -1740,8 +1776,8 @@ small, .muted{
}
.toast{
background: rgba(17,24,39,.95);
color:#e5e7eb;
background: var(--panel);
color:var(--text);
border:1px solid var(--border);
border-radius:10px;
padding:.5rem .65rem;
@ -2084,8 +2120,8 @@ small, .muted{
position:absolute;
top:6px;
left:6px;
background:rgba(17,24,39,.9);
color:#e5e7eb;
background:var(--panel);
color:var(--text);
border:1px solid var(--border);
border-radius:12px;
font-size:12px;
@ -2211,7 +2247,7 @@ small, .muted{
width:20px;
height:20px;
border-radius:50%;
background:#1f2937;
background:var(--bg);
font-size:12px;
}
@ -2225,7 +2261,7 @@ small, .muted{
position: sticky;
top: calc(var(--banner-offset, 48px) + 6px);
z-index: 100;
background: linear-gradient(180deg, rgba(15,17,21,.98), rgba(15,17,21,.92));
background: var(--panel);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
border-radius: 10px;
@ -2712,8 +2748,8 @@ img.lqip.loaded {
}
.analytics-accordion summary:hover {
background: #1f2937;
border-color: #374151;
background: color-mix(in srgb, var(--bg) 70%, var(--text) 30%);
border-color: var(--text);
}
.analytics-accordion summary:active {
@ -3509,7 +3545,7 @@ img.lqip.loaded {
.modal-content {
position: relative;
background: #0f1115;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);