Andreas/mtg_python_deckbuilder
1
0
Fork 0
mirror of https://github.com/mwisnowski/mtg_python_deckbuilder.git synced 2026-01-29 20:56:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: optimize must-have controls and commander catalog

Browse source
This commit is contained in:
matt 2025-10-07 15:56:57 -07:00
parent b7bfc4ca09
commit 3877890889
23 changed files with 1150 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -235,7 +235,11 @@ small, .muted{ color: var(--muted); }
/* Skeletons */
[data-skeleton]{ position: relative; }
[data-skeleton].is-loading > *{ opacity: 0; }
[data-skeleton].is-loading > :not([data-skeleton-placeholder]){ opacity: 0; }
[data-skeleton-placeholder]{ display:none; pointer-events:none; }
[data-skeleton].is-loading > [data-skeleton-placeholder]{ display:flex; flex-direction:column; opacity:1; }
[data-skeleton][data-skeleton-overlay="false"]::after,
[data-skeleton][data-skeleton-overlay="false"]::before{ display:none !important; }
[data-skeleton]::after{
content: '';
position: absolute; inset: 0;
@ -309,10 +313,63 @@ small, .muted{ color: var(--muted); }
border-color: #f5e6a8; /* soft parchment gold */
box-shadow: 0 0 0 2px rgba(245,230,168,.28) inset;
}
.card-tile.must-include{
border-color: rgba(74,222,128,.85);
box-shadow: 0 0 0 1px rgba(74,222,128,.32) inset, 0 0 12px rgba(74,222,128,.2);
}
.card-tile.must-exclude{
border-color: rgba(239,68,68,.85);
box-shadow: 0 0 0 1px rgba(239,68,68,.35) inset;
opacity: .95;
}
.card-tile.must-include.must-exclude{
border-color: rgba(249,115,22,.85);
box-shadow: 0 0 0 1px rgba(249,115,22,.4) inset;
}
.card-tile img{ width:160px; height:auto; border-radius:6px; box-shadow: 0 6px 18px rgba(0,0,0,.35); background:#111; }
.card-tile .name{ font-weight:600; margin-top:.25rem; font-size:.92rem; }
.card-tile .reason{ color:var(--muted); font-size:.85rem; margin-top:.15rem; }
.must-have-controls{
display:flex;
justify-content:center;
gap:.35rem;
flex-wrap:wrap;
margin-top:.35rem;
}
.must-have-btn{
border:1px solid var(--border);
background:rgba(30,41,59,.6);
color:#f8fafc;
font-size:11px;
text-transform:uppercase;
letter-spacing:.06em;
padding:.25rem .6rem;
border-radius:9999px;
cursor:pointer;
transition: all .18s ease;
}
.must-have-btn.include[data-active="1"], .must-have-btn.include:hover{
border-color: rgba(74,222,128,.75);
background: rgba(74,222,128,.18);
color: #bbf7d0;
box-shadow: 0 0 0 1px rgba(16,185,129,.25);
}
.must-have-btn.exclude[data-active="1"], .must-have-btn.exclude:hover{
border-color: rgba(239,68,68,.75);
background: rgba(239,68,68,.18);
color: #fecaca;
box-shadow: 0 0 0 1px rgba(239,68,68,.25);
}
.must-have-btn:focus-visible{
outline:2px solid rgba(59,130,246,.6);
outline-offset:2px;
}
.card-tile.must-exclude .must-have-btn.include[data-active="0"],
.card-tile.must-include .must-have-btn.exclude[data-active="0"]{
opacity:.65;
}
.group-grid{ content-visibility: auto; contain: layout paint; contain-intrinsic-size: 540px 360px; }
.alt-list{ list-style:none; padding:0; margin:0; display:grid; gap:.25rem; content-visibility: auto; contain: layout paint; contain-intrinsic-size: 320px 220px; }