feat: Doing more polishing (M8b)
This commit is contained in:
gauvainboiche
@@ -0,0 +1,83 @@
|
||||
/* Motion: papers landing on the desk, stamps, the dial, page turns. All of it is skipped for people
|
||||
who ask for reduced motion (see the media query at the bottom). */
|
||||
|
||||
/* Papers are dealt onto the desk when a game starts */
|
||||
@keyframes deal {
|
||||
from { opacity: 0; transform: translateY(-28px) rotate(calc(var(--rot, 0deg) - 3deg)); }
|
||||
to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
|
||||
}
|
||||
#pad.is-dealing #dashboard { animation: deal 0.55s ease-out both; }
|
||||
#pad.is-dealing #folder { animation: deal 0.55s 0.12s ease-out both; }
|
||||
#pad.is-dealing #calendar { animation: deal 0.55s 0.24s ease-out both; }
|
||||
#pad.is-dealing #newspaper { animation: deal 0.55s 0.36s ease-out both; }
|
||||
|
||||
/* A proposal arrives in the tray, is stamped, and slides away */
|
||||
@keyframes card-in {
|
||||
from { opacity: 0; transform: translateY(22px) rotate(0.8deg); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
@keyframes card-out {
|
||||
from { opacity: 1; transform: none; }
|
||||
to { opacity: 0; transform: translateX(70%) rotate(7deg); }
|
||||
}
|
||||
@keyframes bump {
|
||||
0% { transform: scale(1); }
|
||||
40% { transform: scale(1.35); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.card--enter { animation: card-in 0.38s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
|
||||
.card--leave { animation: card-out 0.32s ease-in forwards; }
|
||||
.inbox__count.is-bump { animation: bump 0.45s ease-out; }
|
||||
|
||||
/* The calendar page flips when the day changes; the dial hand turns smoothly (set per frame) */
|
||||
@keyframes day-flip {
|
||||
from { opacity: 0.2; transform: perspective(200px) rotateX(-65deg); }
|
||||
to { opacity: 1; transform: perspective(200px) rotateX(0); }
|
||||
}
|
||||
.cal__day.is-flip { animation: day-flip 0.35s ease-out; transform-origin: 50% 0; }
|
||||
|
||||
/* Indicator values flash when they move */
|
||||
@keyframes flash-up { 0% { color: var(--ink-green); } 100% { color: inherit; } }
|
||||
@keyframes flash-down { 0% { color: var(--ink-red); } 100% { color: inherit; } }
|
||||
.gauge__value.is-up { animation: flash-up 1.4s ease-out; }
|
||||
.gauge__value.is-down { animation: flash-down 1.4s ease-out; }
|
||||
|
||||
/* Newspaper: fresh headlines fade up */
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
.paper--news.is-fresh .news__lead { animation: fade-up 0.5s ease-out both; }
|
||||
.paper--news.is-fresh .news__side article { animation: fade-up 0.5s 0.15s ease-out both; }
|
||||
|
||||
/* The ledger opens like a book; the menu folder and the end front page rise into place */
|
||||
@keyframes book-open {
|
||||
from { opacity: 0; transform: perspective(900px) translateY(24px) rotateX(10deg); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
.ledger__book { animation: book-open 0.45s ease-out both; transform-origin: 50% 100%; }
|
||||
@keyframes rise {
|
||||
from { opacity: 0; transform: translateY(18px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
.menu__folder { animation: rise 0.4s ease-out both; }
|
||||
.end__page, #endgame > * { animation: rise 0.6s ease-out both; }
|
||||
|
||||
/* Brass buttons and stamp buttons answer the finger */
|
||||
.brass { transition: transform 0.08s, filter 0.15s, box-shadow 0.15s; }
|
||||
.stamp-btn { transition: background 0.15s, transform 0.08s; }
|
||||
.stamp-btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
|
||||
|
||||
/* The danger "Hold on power" line pulses when it is critical */
|
||||
@keyframes pulse { 50% { opacity: 0.45; } }
|
||||
.intel li[data-level="3"] b, .intel li[data-level="4"] b { animation: pulse 1.6s ease-in-out infinite; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#pad.is-dealing .paper,
|
||||
.card--enter, .card--leave, .inbox__count.is-bump, .cal__day.is-flip,
|
||||
.gauge__value.is-up, .gauge__value.is-down,
|
||||
.paper--news.is-fresh .news__lead, .paper--news.is-fresh .news__side article,
|
||||
.ledger__book, .menu__folder, .end__page, #endgame > *,
|
||||
.intel li b { animation: none !important; }
|
||||
.card--leave { opacity: 0; }
|
||||
}
|
||||
@@ -145,3 +145,53 @@
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card__stamp { animation: none; opacity: 0.9; }
|
||||
}
|
||||
|
||||
/* ---- The tray: counter on the tab, "full" banner, and the pile of waiting sheets ---- */
|
||||
.inbox__count {
|
||||
display: inline-block;
|
||||
min-width: 2.7em;
|
||||
margin-left: 6px;
|
||||
padding: 0 7px;
|
||||
border-radius: 10px;
|
||||
background: var(--ink);
|
||||
color: #f6ead0;
|
||||
font: 700 12px/18px var(--font-num);
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
.inbox__count:empty { display: none; }
|
||||
.inbox__count.is-warn { background: var(--ink-red); }
|
||||
|
||||
.inbox__full {
|
||||
margin: 0 0 8px;
|
||||
padding: 6px 10px;
|
||||
border: 2px solid var(--ink-red);
|
||||
color: var(--ink-red);
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.06em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
transform: rotate(-0.8deg);
|
||||
}
|
||||
.inbox__full[hidden] { display: none; }
|
||||
|
||||
/* Sheets under the top paper: stacked box-shadows that offset a little more for each waiting proposal */
|
||||
.card[data-pile] { transition: box-shadow 0.35s ease; margin: 0 14px 14px 0; }
|
||||
.card[data-pile="0"] { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
|
||||
.card[data-pile="1"] {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35),
|
||||
4px 4px 0 0 #e8dcb8, 4px 4px 0 1px rgba(80, 55, 20, 0.45);
|
||||
}
|
||||
.card[data-pile="2"] {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35),
|
||||
4px 4px 0 0 #e8dcb8, 4px 4px 0 1px rgba(80, 55, 20, 0.45),
|
||||
8px 8px 0 0 #e0d2ab, 8px 8px 0 1px rgba(80, 55, 20, 0.45);
|
||||
}
|
||||
.card[data-pile="3"] {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35),
|
||||
4px 4px 0 0 #e8dcb8, 4px 4px 0 1px rgba(80, 55, 20, 0.45),
|
||||
8px 8px 0 0 #e0d2ab, 8px 8px 0 1px rgba(80, 55, 20, 0.45),
|
||||
12px 12px 0 0 #d8c9a2, 12px 12px 0 1px rgba(80, 55, 20, 0.45);
|
||||
}
|
||||
|
||||
@@ -124,3 +124,26 @@
|
||||
to { opacity: 1; transform: translateY(0) rotate(-0.4deg); }
|
||||
}
|
||||
.menu__stamp { max-width: none; white-space: nowrap; }
|
||||
|
||||
/* ---- The rules, rendered from Markdown ---- */
|
||||
.rules {
|
||||
max-height: 56vh;
|
||||
padding: 2px 10px 6px 2px;
|
||||
overflow-y: auto;
|
||||
font-family: var(--font-head);
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.rules:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
|
||||
.rules h1 { margin: 0 0 8px; font-size: 25px; }
|
||||
.rules h2 { margin: 18px 0 6px; padding-bottom: 2px; border-bottom: 2px solid var(--ink); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
.rules h3 { margin: 12px 0 4px; font-size: 16px; font-style: italic; }
|
||||
.rules p { margin: 0 0 8px; }
|
||||
.rules ul, .rules ol { margin: 0 0 8px; padding-left: 20px; }
|
||||
.rules li { margin-bottom: 2px; }
|
||||
.rules code { font-family: var(--font-num); font-size: 0.9em; background: rgba(28, 42, 68, 0.1); padding: 0 3px; }
|
||||
.rules table { width: 100%; margin: 6px 0 12px; border-collapse: collapse; font-size: 13px; }
|
||||
.rules th, .rules td { padding: 3px 6px; border: 1px solid rgba(43, 36, 24, 0.35); text-align: left; vertical-align: top; }
|
||||
.rules th { background: rgba(28, 42, 68, 0.1); font-weight: 700; }
|
||||
.rules blockquote { margin: 8px 0; padding: 4px 10px; border-left: 4px solid var(--ink-red); background: rgba(255, 255, 255, 0.3); font-style: italic; }
|
||||
.rules hr { border: 0; border-top: 1px dashed rgba(43, 36, 24, 0.5); margin: 14px 0; }
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
/* Phones and small tablets: one column, one paper at a time, a shelf along the top to pick it.
|
||||
Loaded last so it can override the desktop layout. */
|
||||
|
||||
#shelf { display: none; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
#desk {
|
||||
min-height: 100dvh;
|
||||
padding: 6px;
|
||||
place-items: stretch;
|
||||
}
|
||||
|
||||
#pad {
|
||||
width: 100%;
|
||||
height: calc(100dvh - 12px);
|
||||
min-height: 0;
|
||||
padding: 12px 10px 10px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#pad::before { inset: 5px; border-radius: 8px; }
|
||||
#pad > * { grid-column: 1; }
|
||||
|
||||
/* Papers lie flat on a phone: a rotated sheet wastes the little width there is. */
|
||||
.paper { transform: none; }
|
||||
|
||||
/* One paper at a time */
|
||||
#dashboard, #folder, #ledger, #newspaper, #calendar { grid-row: 2; display: none; overflow-y: auto; }
|
||||
#side { display: contents; }
|
||||
#pad[data-view="tray"] #folder,
|
||||
#pad[data-view="brief"] #dashboard,
|
||||
#pad[data-view="news"] #newspaper,
|
||||
#pad[data-view="clock"] #calendar { display: block; }
|
||||
#calendar { align-self: start; }
|
||||
|
||||
/* The ledger is a view of its own while a review is open; the tabs still reach the other papers */
|
||||
#pad.is-ledger #folder { display: none; }
|
||||
#pad[data-view="ledger"] #ledger:not([hidden]) { display: block; }
|
||||
#pad.is-ledger #side { display: contents; }
|
||||
#ledger { grid-column: 1; }
|
||||
|
||||
/* Menu and end screens cover the shelf too */
|
||||
#menu, #endgame { grid-row: 1 / -1; }
|
||||
|
||||
/* ---- The shelf ---- */
|
||||
#shelf {
|
||||
display: grid;
|
||||
grid-row: 1;
|
||||
gap: 6px;
|
||||
z-index: 5;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.shelf__time {
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 5px 8px;
|
||||
background-color: var(--paper);
|
||||
background-image: var(--paper-grain);
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 0 14px rgba(120, 90, 40, 0.22), 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.shelf__dial { width: 40px; height: 40px; }
|
||||
.shelf__date b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 17px; line-height: 1.1; text-transform: capitalize; }
|
||||
.shelf__date span { font-size: 12px; opacity: 0.7; }
|
||||
.shelf__speed { min-width: 56px; min-height: 40px; font-size: 16px; }
|
||||
.shelf__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
|
||||
.shelf__tabs::-webkit-scrollbar { display: none; }
|
||||
.shelf__tab {
|
||||
position: relative;
|
||||
flex: 1 0 auto;
|
||||
min-height: 44px;
|
||||
padding: 4px 11px;
|
||||
font-family: var(--font-type);
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
background: #c6a566;
|
||||
border: 1px solid rgba(90, 60, 20, 0.55);
|
||||
border-radius: 6px 6px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.shelf__tab[aria-pressed="true"] {
|
||||
background-color: var(--paper);
|
||||
box-shadow: inset 0 4px 0 var(--ink-red);
|
||||
}
|
||||
.shelf__tab--ledger { background: #cfe0c8; }
|
||||
.shelf__tab--menu { flex: 0 0 auto; background: linear-gradient(#e7c872, #b98e32); font-weight: 700; }
|
||||
.shelf__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
|
||||
.shelf__badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -3px;
|
||||
min-width: 19px;
|
||||
padding: 0 5px;
|
||||
border-radius: 10px;
|
||||
background: var(--ink);
|
||||
color: #f6ead0;
|
||||
font: 700 12px/19px var(--font-num);
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
}
|
||||
.shelf__badge[hidden] { display: none; }
|
||||
.shelf__badge.is-warn { background: var(--ink-red); }
|
||||
|
||||
/* ---- Papers, sized for a narrow screen ---- */
|
||||
.paper { padding: 12px 12px; }
|
||||
.paper--folder { padding-top: 38px; }
|
||||
.gauge { grid-template-columns: 104px minmax(40px, 1fr) 28px 62px; gap: 6px; }
|
||||
.gauge__spark { width: 62px; }
|
||||
.dash__head h2 { font-size: 19px; }
|
||||
.card { padding: 14px 14px 10px; }
|
||||
.card__title { font-size: 22px; }
|
||||
.card__choices { grid-template-columns: 1fr; gap: 8px; }
|
||||
.stamp-btn { min-height: 62px; flex-direction: row; justify-content: space-between; text-align: left; }
|
||||
.card__keys { display: none; }
|
||||
.card__stamp { font-size: 34px; }
|
||||
.cal__day { font-size: 46px; }
|
||||
|
||||
.ledger__book { height: auto; min-height: 100%; grid-template-columns: 1fr; overflow-y: visible; }
|
||||
.ledger__page { overflow: visible; padding: 12px 12px 12px 24px; }
|
||||
.ledger__page--left, .ledger__page--right { border-radius: 4px; box-shadow: none; }
|
||||
.ledger__page--right { margin-top: 8px; }
|
||||
|
||||
.menu__folder { width: 100%; padding: 40px 14px 16px; }
|
||||
.rules { max-height: calc(100dvh - 250px); }
|
||||
.alerts { top: 8px; width: calc(100% - 16px); }
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.gauge { grid-template-columns: 92px minmax(30px, 1fr) 26px; }
|
||||
.gauge__spark { display: none; }
|
||||
.gauge__label { font-size: 12px; }
|
||||
}
|
||||
|
||||
/* Landscape phones: the shelf shrinks to one row so the paper keeps its height */
|
||||
@media (max-width: 900px) and (max-height: 480px) {
|
||||
#pad { grid-template-rows: auto minmax(0, 1fr); padding: 8px; }
|
||||
.shelf__time { display: none; }
|
||||
}
|
||||
@@ -255,3 +255,12 @@
|
||||
.news__side article + article { border-top: 1px solid rgba(43, 36, 24, 0.35); padding-top: 6px; }
|
||||
.news__side h4 { font-size: 16px; line-height: 1.15; }
|
||||
.news__side p { margin: 2px 0 0; font-size: 13px; }
|
||||
|
||||
/* Dial clock: one full turn of the hand is one in-game day */
|
||||
.cal__top { display: flex; align-items: center; justify-content: center; gap: 12px; }
|
||||
.cal__date { text-align: left; }
|
||||
.cal__dial { width: 76px; height: 76px; flex: none; }
|
||||
.dial__face { fill: #f6efd8; stroke: var(--ink); stroke-width: 3; }
|
||||
.dial__ticks line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
|
||||
.dial__hand { stroke: var(--ink-red); stroke-width: 4; stroke-linecap: round; }
|
||||
.dial__pin { fill: var(--ink); }
|
||||
|
||||
Reference in New Issue
Block a user