7f2762aeb8
The text-entry rule was an allowlist of type= values, which fails twice. An <input> with no type attribute is a text field but matches no [type=...] selector at all, and any type nobody listed falls through silently. Both had happened: the add-a-word fields carry no type, and the server URL and token are url and password. All four rendered as white UA boxes on a dark page. A denylist of the controls that must keep native rendering — checkbox, radio, range, colour, file, the button-like ones — cannot rot the same way. color-scheme now sits on :root per theme rather than nowhere. It is what tells the browser to paint the parts CSS cannot reach: the select dropdown list, spinner arrows, scrollbars, the autofill wash. Separately, .tiles draws its hairlines with its own background, so as a stretched grid item it filled the rest of the hero's height with a solid block of line colour. align-self: start. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
276 lines
4.6 KiB
CSS
276 lines
4.6 KiB
CSS
/* 오늘 — hero, tiles, phase cards, heatmap, settings. */
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 0.9fr;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.hero-l {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 9px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.hero-l h1 {
|
|
font-size: 34px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: 14px;
|
|
color: var(--ink2);
|
|
}
|
|
|
|
.hero-acts {
|
|
display: flex;
|
|
gap: 9px;
|
|
flex-wrap: wrap;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.goal {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: var(--ink3);
|
|
}
|
|
|
|
.goalbar {
|
|
flex: 1;
|
|
height: 5px;
|
|
background: var(--sunk);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.goalbar i {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--jade);
|
|
}
|
|
|
|
.tiles {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1px;
|
|
background: var(--line);
|
|
border: 1px solid var(--line);
|
|
align-content: start;
|
|
/* The background IS the hairline between tiles, so the box must not be
|
|
taller than its rows: as a stretched grid item it filled the rest of
|
|
the hero's height with a solid slab of line colour. */
|
|
align-self: start;
|
|
}
|
|
|
|
.tile {
|
|
background: var(--paper);
|
|
padding: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
.tile.accent {
|
|
background: var(--jade-soft);
|
|
}
|
|
|
|
.tile .v {
|
|
font-family: var(--serif);
|
|
font-size: 28px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.tile .k {
|
|
font-size: 12px;
|
|
color: var(--ink2);
|
|
}
|
|
|
|
.tile .x {
|
|
font-size: 10.5px;
|
|
color: var(--ink3);
|
|
}
|
|
|
|
/* ── phases ──────────────────────────────────────────────────────── */
|
|
|
|
.phases {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.phase {
|
|
display: flex;
|
|
gap: 13px;
|
|
padding: 13px;
|
|
border: 1px solid var(--line);
|
|
background: var(--raise);
|
|
}
|
|
|
|
.phase[data-st="now"] {
|
|
box-shadow: inset 3px 0 0 0 var(--hwang);
|
|
}
|
|
|
|
.phase[data-st="done"] {
|
|
box-shadow: inset 3px 0 0 0 var(--jade);
|
|
}
|
|
|
|
.phase .n {
|
|
font-size: 30px;
|
|
color: var(--ink3);
|
|
line-height: 1;
|
|
}
|
|
|
|
.ph-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.ph-title {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ph-title .ko {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ph-title .nm {
|
|
font-size: 12px;
|
|
color: var(--ink3);
|
|
}
|
|
|
|
.badge {
|
|
margin-left: auto;
|
|
font-size: 10.5px;
|
|
padding: 1px 7px;
|
|
border: 1px solid var(--line2);
|
|
color: var(--ink3);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.phase[data-st="now"] .badge {
|
|
border-color: var(--hwang);
|
|
color: var(--hwang);
|
|
background: var(--hwang-soft);
|
|
}
|
|
|
|
.phase[data-st="done"] .badge {
|
|
border-color: var(--jade);
|
|
color: var(--jade-ink);
|
|
background: var(--jade-soft);
|
|
}
|
|
|
|
.ph-body .dt {
|
|
font-size: 12.5px;
|
|
color: var(--ink2);
|
|
}
|
|
|
|
.pbar {
|
|
height: 4px;
|
|
background: var(--sunk);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.pbar i {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--jade);
|
|
}
|
|
|
|
.ph-count {
|
|
font-size: 11px;
|
|
color: var(--ink3);
|
|
}
|
|
|
|
/* ── heatmap ─────────────────────────────────────────────────────── */
|
|
|
|
.hm {
|
|
display: grid;
|
|
grid-template-rows: repeat(7, 14px);
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 14px;
|
|
gap: 3px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.hm i {
|
|
display: block;
|
|
background: var(--h0);
|
|
}
|
|
|
|
.hm i[data-level="1"] { background: var(--h1); }
|
|
.hm i[data-level="2"] { background: var(--h2); }
|
|
.hm i[data-level="3"] { background: var(--h3); }
|
|
.hm i[data-level="4"] { background: var(--h4); }
|
|
|
|
/* ── settings ────────────────────────────────────────────────────── */
|
|
|
|
.set-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 13px;
|
|
}
|
|
|
|
.set-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.set-row > span:first-child {
|
|
flex: 1;
|
|
}
|
|
|
|
.set-row span i {
|
|
display: block;
|
|
font-style: normal;
|
|
font-size: 11px;
|
|
color: var(--ink3);
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.phases { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.hero { grid-template-columns: 1fr; }
|
|
.hero-l h1 { font-size: 28px; }
|
|
}
|
|
|
|
/* About panel. */
|
|
.about dl {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 5px 16px;
|
|
margin: 0 0 14px;
|
|
font-size: 13.5px;
|
|
}
|
|
|
|
.about dt {
|
|
color: var(--ink3);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.about dd {
|
|
margin: 0;
|
|
}
|
|
|
|
.attrib-block {
|
|
padding-top: 11px;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 11.5px;
|
|
color: var(--ink3);
|
|
}
|