0.3.1-0-pre.3
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
/* file: crates/apps/game-snake-poc-tauri/frontend/css/main.css */
|
||||
/* version: 1 */
|
||||
/* version: 2 */
|
||||
|
||||
:root {
|
||||
font-family: system-ui, sans-serif;
|
||||
@@ -14,45 +14,222 @@
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom))
|
||||
max(1.5rem, env(safe-area-inset-left));
|
||||
padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom))
|
||||
max(0.75rem, env(safe-area-inset-left));
|
||||
background: #101418;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
.bootstrap-panel {
|
||||
width: min(100%, 34rem);
|
||||
padding: 1.5rem;
|
||||
border: 1px solid currentColor;
|
||||
.app-header,
|
||||
.app-footer,
|
||||
.game-panel,
|
||||
.control-panel {
|
||||
border: 1px solid #50606b;
|
||||
border-radius: 0.75rem;
|
||||
background: #161c21;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 0.5rem;
|
||||
opacity: 0.7;
|
||||
margin: 0 0 0.15rem;
|
||||
color: #9fb0ba;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: clamp(1.6rem, 7vw, 2.4rem);
|
||||
margin-bottom: 0;
|
||||
font-size: clamp(1.25rem, 6vw, 1.85rem);
|
||||
}
|
||||
|
||||
#runtime-status {
|
||||
margin: 0 0 0.75rem;
|
||||
h2 {
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#runtime-provenance {
|
||||
.status-badge,
|
||||
.game-summary output {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 2rem;
|
||||
padding: 0.35rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
background: #29343c;
|
||||
color: #f4f7f8;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body[data-runtime-state="ready"] .status-badge {
|
||||
background: #1d5f3d;
|
||||
}
|
||||
|
||||
body[data-runtime-state="error"] .status-badge {
|
||||
background: #7a2630;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-block: 0.75rem;
|
||||
}
|
||||
|
||||
.game-panel,
|
||||
.control-panel {
|
||||
min-width: 0;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.game-summary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.game-stage {
|
||||
width: min(100%, 21rem);
|
||||
max-height: 58vh;
|
||||
margin-inline: auto;
|
||||
aspect-ratio: 3 / 5;
|
||||
overflow: hidden;
|
||||
border: 1px solid #6d7f8a;
|
||||
border-radius: 0.45rem;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#game {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
font-family: ui-monospace, monospace;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
touch-action: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body[data-runtime-state="error"] #runtime-status {
|
||||
font-weight: 700;
|
||||
#game:focus-visible {
|
||||
box-shadow: inset 0 0 0 3px #8fbfff;
|
||||
}
|
||||
|
||||
.control-panel > div:first-child p {
|
||||
margin-bottom: 0.75rem;
|
||||
color: #b9c4ca;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.direction-pad {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(3.75rem, 5rem));
|
||||
grid-template-rows: repeat(2, minmax(3.3rem, 4.2rem));
|
||||
gap: 0.45rem;
|
||||
justify-content: center;
|
||||
margin-inline: auto;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.direction-pad button {
|
||||
border: 1px solid #7892a1;
|
||||
border-radius: 0.6rem;
|
||||
background: #202b32;
|
||||
color: #f4f7f8;
|
||||
font-size: 1.45rem;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.direction-pad button:active {
|
||||
background: #355365;
|
||||
}
|
||||
|
||||
.direction-up {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.direction-left {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.direction-down {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.direction-right {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.runtime-details {
|
||||
margin: 0.9rem 0 0;
|
||||
padding-top: 0.8rem;
|
||||
border-top: 1px solid #3a474f;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.runtime-details div {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.runtime-details dt {
|
||||
color: #a9b6bd;
|
||||
}
|
||||
|
||||
.runtime-details dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.startup-error {
|
||||
margin: 0.9rem 0 0;
|
||||
padding: 0.65rem;
|
||||
border: 1px solid #b34b57;
|
||||
border-radius: 0.5rem;
|
||||
background: #51232a;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
padding: 0.55rem 0.75rem;
|
||||
color: #a9b6bd;
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.app-main {
|
||||
grid-template-columns: minmax(18rem, 1fr) minmax(17rem, 22rem);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.game-stage {
|
||||
width: min(100%, 24rem);
|
||||
max-height: 70vh;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user