Search the source of every open source package.
18 results
OptionsScreen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transform: scale( 1 );
transition: none;
pointer-events: all;
background-color: #111111;
.title {
color: white;
text-shadow: none;
box-shadow: none;
align-self: flex-end;
font-size: 75px;
text-shadow: 0px 0px 2px black;
flex-shrink: 0;
font-family: Consolas;
margin: 20px 0px;
}
.button {
//flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-shrink: 0;
flex-grow: 0;
color: rgba(255,255,255, 0.9);
width: auto;
padding: 15px 32px;
text-align: center;
align-self: center;
font-size: 24px;
font-weight: 600;
margin: 20px;
gap: 0;
transition: all 50ms linear;
cursor: pointer;
}
> .container {
position: relative;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
.title {
align-self: center;
font-size: 60px;
flex-shrink: 0;
}
> .buttons {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-shrink: 0;
// gap: 8px;
}
.content {
padding: 5px;
flex-grow: 1;
flex-direction: column;
align-self: center;
//border-radius: 20px;
&.bg {
//background-color: rgba(220,220,220,0.5);
}
}
}
// Buttons on the left side
.container .buttons {
.button-bg .button {
width: 100%;
min-width: 400px;
max-width: 600px;
}
}
.content {
height: auto;
// Buttons inside the content box
.buttons {
.button {
padding: 5px;
font-size: 30px;
}
}
&.tabs-container {
flex-grow: 0;
flex-shrink: 0;
overflow: hidden;
}
.tabs-group {
flex-direction: row;
align-items: center;
flex-grow: 0;
.button {
margin: 0 15px;
background-color: #242424;
// Can't remove this sound once it's set
// Use .inactive instead
&:hover {
//sound-in: ui.button.over;
}
&:hover {
background-color: #3B3B3B; //#EC594F;
}
&:active {
background-color: #6E6E6E33; //#D32F2F;
}
&.active {
background-color: #F44336;
}
&.inactive:hover {
sound-in: ui.button.over;
}
}
}
}
.content.tab-content {
// CONTENT ADD HERE
.button {
margin: 0;
}
}
.content.tab-content .button, .menu.buttons .button {
&:hover {
sound-in: ui.button.over;
}
&.green {
background-color: #4CAF50;
&:hover {
background-color: #57BB5A;
}
&:active {
background-color: #45A049;
}
}
&.red {
background-color: #F44336;
&:hover {
background-color: #EC594F;
}
&:active {
background-color: #D32F2F;
}
}
&.gray, &.grey {
background-color: #666;
color: white;
&:hover {
background-color: #777;
}
&:active {
background-color: #444;
}
}
}
.table {
position: relative;
flex-shrink: 1;
flex-grow: 0;
justify-content: center;
flex-wrap: wrap;
color: #9b9fa8;
align-self: center;
max-width: 1500px;
width: 85%;
font-size: 30px;
// TABLE ADD HERE
overflow-y: scroll;
.row {
flex-direction: row;
width: 100%;
align-items: center;
justify-content: center;
flex-grow: 0;
flex-shrink: 0;
font-weight: 600;
margin: 10px 0;
}
.row.title {
color: white;
margin-top: 20px;
padding: 5px 0;
justify-content: flex-start;
font-size: 32px;
font-weight: 800;
border-bottom: 0.2em solid rgb(30, 30, 30, 0.25);
&:first-child {
margin-top: 0;
}
}
.column {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.column:last-child {
align-items: flex-end;
justify-content: center;
//height: 100%;
}
.column.value {
.button {
width: 100px;
justify-content: center;
}
}
SliderControl {
width: 100%;
}
}
.cycling-selector {
display: flex;
flex-direction: column;
align-items: center;
width: 100%; /* Adjust width as needed */
max-width: 500px; /* Set max width */
background-color: #111; /* Dark background similar to your image */
padding: 10px;
border-radius: 5px;
color: white;
font-family: Arial, sans-serif;
}
.cycling-label {
text-align: center;
margin-bottom: 10px; /* Spacing between label and controls */
font-size: 14px;
width: 100%;
}
.cycling-controls {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.button {
width: auto;
padding: 5px;
}
}
.cycling-controls .value {
align-items: center;
font-weight: bold;
font-size: 22px;
padding: 5px;
}
.cycling-controls .arrow {
border: none;
color: white;
font-size: 40px;
line-height: 10px;
cursor: pointer;
padding: 5px;
&.left {
padding-left: 0;
}
&.right {
padding-right: 0;
}
}
.cycling-controls .arrow:hover {
color: #ccc;
}
}
.video-texture {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* Outdated Revision Warning UI - Dual Mode Support */
.ns-outdated-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: all;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
/* ── Base Container ── */
.ns-outdated-container {
background-color: #1a1a2e;
border-radius: 12px;
padding: 24px 32px;
max-width: 420px;
min-width: 360px;
width: 90%;
display: flex;
flex-direction: column;
gap: 16px;
}
/* ── Force Upgrade Mode: Warning styling ── */
.ns-outdated-container.force-upgrade {
border: 2px solid #f59e0b;
box-shadow: 0 8px 32px rgba(245, 158, 11, 0.25);
}
.ns-outdated-container.force-upgrade .ns-outdated-title {
color: #fbbf24;
}
.ns-outdated-container.force-upgrade .ns-outdated-countdown {
background-color: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.3);
color: #fbbf24;
}
.ns-outdated-container.force-upgrade .ns-outdated-countdown.expired {
background-color: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
/* ── Allow Continue Mode: Informational styling ── */
.ns-outdated-container.allow-continue {
border: 2px solid #3b82f6;
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.25);
}
.ns-outdated-container.allow-continue .ns-outdated-title {
color: #60a5fa;
}
/* ── Title ── */
.ns-outdated-title {
font-size: 18px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ── Info Text ── */
.ns-outdated-info {
font-size: 14px;
color: #e2e8f0;
text-align: center;
line-height: 1.5;
}
/* ── Countdown ── */
.ns-outdated-countdown {
font-size: 13px;
text-align: center;
padding: 12px 16px;
border-radius: 8px;
line-height: 1.4;
white-space: pre-line;
}
/* ── Buttons Container ── */
.ns-outdated-buttons {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
/* ── Continue Playing Button (Allow Continue primary) ── */
.ns-outdated-continue-btn {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
border: none;
border-radius: 8px;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: background 0.15s, transform 0.1s;
}
.ns-outdated-continue-btn:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
transform: translateY(-1px);
}
.ns-outdated-continue-btn:active {
transform: translateY(0);
}
/* ── Divider (Or update to latest) ── */
.ns-outdated-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0;
}
.ns-outdated-divider::before,
.ns-outdated-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(148, 163, 184, 0.25);
}
.ns-outdated-divider Label {
color: #64748b;
font-size: 12px;
white-space: nowrap;
}
/* ── Secondary Buttons (Create/Join) ── */
.ns-outdated-create-btn,
.ns-outdated-join-btn {
background: rgba(148, 163, 184, 0.15);
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 8px;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: background 0.15s, transform 0.1s;
}
.ns-outdated-create-btn:hover,
.ns-outdated-join-btn:hover {
background: rgba(148, 163, 184, 0.25);
transform: translateY(-1px);
}
.ns-outdated-create-btn:active,
.ns-outdated-join-btn:active {
transform: translateY(0);
}
/* ── Dismiss Button (Force Upgrade only) ── */
.ns-outdated-dismiss-btn {
background-color: transparent;
color: #94a3b8;
border: none;
padding: 8px;
font-size: 13px;
cursor: pointer;
text-align: center;
transition: color 0.15s;
}
.ns-outdated-dismiss-btn:hover {
color: #e2e8f0;
}
/* ── Hidden state ── */
.hidden {
display: none !important;
}
// Razor Designer — default preview theme.
//
// stylesheet that distils s&box's canonical design tokens from s&box UI
// === Root / type baseline ============================================
.root {
color: #fafaff;
font-family: Inter;
font-size: 14px;
}
// === Flex element aliases (row / column / .grow etc.) ================
row, .row {
flex-direction: row;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
column, .column {
flex-direction: column;
gap: 4px;
flex-shrink: 0;
}
.grow { flex-grow: 1; }
.shrink { flex-shrink: 1; }
.no-grow { flex-grow: 0; }
.flex-gap-4 { gap: 4px; }
.flex-gap-8 { gap: 8px; }
.flex-gap-12 { gap: 12px; }
.flex-gap-16 { gap: 16px; }
.flex-gap-24 { gap: 24px; }
.flex-gap-32 { gap: 32px; }
// === Labels (type scale) =============================================
label.eyebrow {
font-family: Poppins;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #B5BED4;
font-weight: 700;
}
label.small {
font-size: 12px;
font-weight: 600;
}
label.medium {
font-size: 16px;
font-family: Poppins;
font-weight: 600;
}
label.large {
font-size: 16px;
font-family: Poppins;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
label.heading {
font-family: Poppins;
font-size: 16px;
font-weight: 700;
color: #C2C9DB;
}
label.title {
font-family: Poppins;
font-size: 26px;
font-weight: 600;
color: #fafaff;
}
label.hero {
font-family: Poppins;
font-size: 60px;
font-weight: 500;
color: #fafaff;
}
// === Icons ===========================================================
icon {
font-family: Material Icons;
font-size: 14px;
color: #fafaff;
align-items: center;
justify-content: center;
}
icon.small { font-size: 12px; }
icon.medium { font-size: 16px; }
icon.large { font-size: 16px; }
icon.eyebrow { font-size: 10px; color: #B5BED4; }
icon.huge { font-size: 32px; }
icon.giant { font-size: 64px; }
// === Separators ======================================================
separator {
background-color: rgba(194, 201, 219, 0.1);
flex-shrink: 0;
}
separator.horizontal { height: 1px; width: 100%; margin: 4px 0; }
separator.vertical { width: 1px; height: 100%; margin: 0 4px; align-self: stretch; }
// === Reusable border mix-ins =========================================
.has-border { border: 1px solid rgba(194, 201, 219, 0.1); }
.has-border-transparent { border: 1px solid transparent; }
// === Generic Button family ===========================================
.button {
background-color: rgba(0, 0, 0, 0);
border: 1px solid transparent;
border-radius: 6px;
padding: 8px 16px;
color: #C2C9DB;
align-items: center;
justify-content: center;
gap: 8px;
font-family: Inter;
font-size: 14px;
font-weight: 500;
}
.button:hover {
background-color: rgba(85, 102, 145, 0.1);
border-color: rgba(194, 201, 219, 0.1);
color: #fafaff;
}
// Primary CTA — flat brand-blue surface, larger pad, heavier rounding.
.button.primary {
font-family: Poppins;
background-image: none;
background-color: #3273eb;
color: #ffffff;
font-weight: 700;
padding: 8px 18px;
border-radius: 8px;
border: 3px solid transparent;
}
// Tab-style underline button.
.button.uplight {
background-image: none;
background-color: rgba(0, 0, 0, 0);
color: #C6D4EE;
border: none;
border-bottom: 4px solid transparent;
border-radius: 0;
padding: 8px 24px;
}
// Ghost / cancel.
.button.ghost {
background-image: none;
background-color: rgba(0, 0, 0, 0);
color: #C2C9DB;
border: 1px solid rgba(194, 201, 219, 0.1);
}
// Danger.
.button.danger {
background-image: none;
background-color: rgba(255, 93, 106, 0.1);
border: 1px solid rgba(255, 93, 106, 0.3);
color: #ff5d6a;
}
// Icon-only square (32×32).
.button.icon-only {
padding: 0;
width: 32px;
height: 32px;
justify-content: center;
}
// Close shorthand.
.button.close {
background-image: none;
background-color: rgba(255, 0, 0, 0.1);
border: 1px solid rgba(255, 0, 0, 0.1);
color: #fafaff;
}
// === TextEntry =======================================================
// .textentry is what TextEntry / NumberEntry emit. Recessed dark surface.
.textentry {
background-color: #11141D;
border: 1px solid rgba(194, 201, 219, 0.1);
border-radius: 6px;
padding: 8px 12px;
color: #fafaff;
min-height: 32px;
align-items: center;
gap: 8px;
}
// `.placeholder` lives on TextEntry's inner Label child (TextEntry.cs:670
.textentry .placeholder { color: #687AA6; }
// === Badge ===========================================================
.Badge, .badge {
flex-direction: row;
align-items: center;
gap: 4px;
padding: 3px 6px;
background-color: #283043;
border-radius: 4px;
flex-shrink: 0;
}
.Badge label, .badge label {
font-family: Poppins;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #C2C9DB;
font-weight: 700;
}
.Badge icon, .badge icon { font-size: 10px; color: #C2C9DB; }
.Badge .number, .badge .number {
background-color: rgba(0, 0, 0, 0.5);
padding: 1px 4px;
border-radius: 2px;
margin-left: 2px;
}
.Badge.online, .badge.online { background-color: rgba(0, 0, 0, 0.9); }
.Badge.online label, .Badge.online icon,
.badge.online label, .badge.online icon { color: #ffffff; }
.Badge.clear, .badge.clear { background-color: rgba(25, 29, 42, 0.75); border: 1px solid rgba(194, 201, 219, 0.1); }
.Badge.positive, .badge.positive { background-color: rgba(99, 217, 107, 0.1); }
.Badge.positive label, .Badge.positive icon,
.badge.positive label, .badge.positive icon { color: #63d96b; }
.Badge.negative, .badge.negative { background-color: rgba(255, 93, 106, 0.1); }
.Badge.negative label, .Badge.negative icon,
.badge.negative label, .badge.negative icon { color: #ff5d6a; }
.Badge.promise, .badge.promise { background-color: rgba(255, 189, 50, 0.1); }
.Badge.promise label, .Badge.promise icon,
.badge.promise label, .badge.promise icon { color: #ffbd32; }
// === Avatar ==========================================================
.Avatar .avatar, .avatar .avatar {
width: 24px; height: 24px;
background-image: linear-gradient(to bottom right, #465477 0%, #283043 100%);
border-radius: 4px;
flex-shrink: 0;
}
.Avatar.large .avatar, .avatar.large .avatar { width: 32px; height: 32px; }
.Avatar.small .avatar, .avatar.small .avatar { width: 16px; height: 16px; border-radius: 2px; }
// === Switch ==========================================================
.Switch, .switch {
flex-direction: row;
cursor: pointer;
}
.Switch .inner, .switch .inner {
width: 58px; height: 34px;
background-image: linear-gradient(to bottom right, #283043 0%, #191D2A 100%);
border-radius: 17px;
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 4px;
align-items: center;
justify-content: center;
position: relative;
}
.Switch .background, .switch .background {
width: 100%; height: 100%;
background-color: #11141D;
border-radius: 14px;
}
.Switch .dot, .switch .dot {
position: absolute;
right: 32px;
top: 10px;
width: 14px;
height: 14px;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.1);
background-image: linear-gradient(to bottom, #cccccc 0%, #777777 100%);
}
.Switch.active .inner, .switch.active .inner {
background-image: linear-gradient(to bottom right, #37425D 0%, #283043 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.Switch.active .dot, .switch.active .dot {
right: 10px;
background-image: linear-gradient(to bottom, #ffffff 0%, #bbbbbb 100%);
}
// === Slider ==========================================================
.Slider, .slider {
flex-direction: row;
align-items: center;
gap: 8px;
min-width: 200px;
}
.Slider .track, .slider .track {
flex-grow: 1;
height: 7px;
background-color: #283043;
border-radius: 4px;
position: relative;
}
.Slider .track-active, .slider .track-active {
position: absolute;
left: 0; top: 0; bottom: 0;
background-color: #3273eb;
border-radius: 4px;
}
.Slider .thumb, .slider .thumb {
width: 16px; height: 16px;
background-color: #ffffff;
border-radius: 8px;
}
.Slider .value, .slider .value {
width: 50px;
text-align: right;
color: #C2C9DB;
font-size: 14px;
}
// === DropDown ========================================================
.DropDown, .dropdown {
flex-direction: row;
align-items: center;
gap: 4px;
padding: 6px 12px;
background-color: rgba(0, 0, 0, 0.45);
border-radius: 6px;
border: 1px solid rgba(194, 201, 219, 0.1);
color: #fafaff;
min-height: 32px;
min-width: 140px;
font-family: Inter;
}
// === Checkbox ========================================================
.checkbox {
flex-direction: row;
align-items: center;
color: #fafaff;
cursor: pointer;
gap: 8px;
}
.checkbox > .checkmark {
width: 22px;
height: 22px;
border: 3px solid #3273eb;
border-radius: 4px;
align-items: center;
justify-content: center;
color: transparent;
background-color: rgba(0, 0, 0, 0);
}
.checkbox.is-checked > .checkmark {
color: #ffffff;
background-color: #3273eb;
}
// === Card ============================================================
.Card, .card {
background-color: #11141D;
border: 1px solid rgba(194, 201, 219, 0.1);
border-radius: 6px;
overflow: hidden;
}
.Card .inner, .card .inner {
background-color: #11141D;
padding: 8px;
border-radius: 4px;
}
// === PackageCard (game tile) =========================================
.PackageCard, .packagecard {
flex-direction: column;
border-radius: 6px;
height: 200px;
background-color: rgba(17, 20, 29, 0);
}
.PackageCard .image, .packagecard .image {
flex-grow: 1;
border: 1px solid rgba(255, 255, 255, 0.025);
background-position: center;
background-size: cover;
border-radius: 4px;
background-color: #283043;
}
.PackageCard column, .packagecard column { padding: 8px 2px; gap: 4px; }
.PackageCard .package-title, .packagecard .package-title {
font-family: Poppins;
font-size: 16px;
font-weight: 600;
max-width: 150px;
overflow: hidden;
white-space: nowrap;
}
.PackageCard .package-users, .packagecard .package-users {
background-color: rgba(10, 10, 10, 0.95);
padding: 3px 5px;
border-radius: 2px;
font-size: 11px;
color: #ddeeff;
border: 1px solid rgba(194, 201, 219, 0.1);
align-items: center;
gap: 3px;
}
.PackageCard.wide, .packagecard.wide { height: 250px; }
.PackageCard.small, .packagecard.small { height: 200px; }
.PackageCard.tall, .packagecard.tall { height: 400px; }
.PackageCard.list, .packagecard.list {
flex-direction: row;
height: 64px;
gap: 12px;
padding: 4px;
}
.PackageCard.list .image, .packagecard.list .image { height: 100%; flex-grow: 0; }
// === Page shell ======================================================
.Page, .page {
flex-direction: column;
background-color: #11141D;
flex-grow: 1;
}
.Page .inner, .page .inner {
flex-direction: row;
flex-grow: 1;
overflow: hidden;
width: 100%;
}
.Page .sidebar, .page .sidebar {
width: 400px;
flex-shrink: 0;
background-color: #191D2A;
flex-direction: column;
gap: 8px;
padding: 50px;
overflow-y: scroll;
}
.Page .pagebody, .page .pagebody {
flex-grow: 1;
flex-direction: column;
overflow-y: scroll;
}
// === Modal ===========================================================
.Modal, .modal {
background-color: rgba(16, 17, 23, 0.86);
align-items: center;
justify-content: center;
color: #ffffff;
}
// === Popup panel (dropdowns, right-click) ============================
.popup-panel {
background-color: #1b202c;
color: #8e9ec2;
border-radius: 4px;
border: 1px solid rgba(194, 201, 219, 0.1);
overflow: hidden;
min-width: 200px;
flex-direction: column;
}
.popup-panel.medium { max-width: 300px; }
.popup-panel .information { padding: 16px; font-size: 14px; opacity: 0.5; }
// === Tooltip =========================================================
.tooltip {
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(85, 85, 85, 0.1);
padding: 10px;
border-radius: 4px;
color: #ffffff;
font-family: Inter;
font-weight: 700;
font-size: 12px;
}
// === Progress ========================================================
.Progress, .progress {
width: 100%;
height: 6px;
border-radius: 4px;
overflow: hidden;
background-color: #191D2A;
}
.Progress .inner, .progress .inner { height: 100%; background-color: #556691; }
.Progress.primary .inner, .progress.primary .inner { background-color: #3273eb; }
.Progress.green .inner, .progress.green .inner { background-color: #63d96b; }
// === Spinner (static shape; mockup's @keyframes spin is dropped) =====
.Spinner, .spinner {
width: 32px;
height: 32px;
border: 4px solid #ffffff;
border-radius: 16px;
}
// === IconPanel (engine class) + library alias `i` ====================
.iconpanel, i {
font-family: Material Icons;
font-size: 18px;
color: #fafaff;
align-items: center;
justify-content: center;
}
// === Form / Field / FieldControl (Sandbox.UI real classes) ===========
.form {
background-image: linear-gradient(to bottom, #283043 0%, #1F2535 100%);
background-color: rgba(0, 0, 0, 0);
border: 1px solid rgba(194, 201, 219, 0.1);
border-radius: 6px;
min-height: 60px;
padding: 8px;
}
.field {
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 1px solid rgba(194, 201, 219, 0.06);
min-height: 28px;
padding: 4px 0;
}
.field-control {
background-color: #191D2A;
border: 1px solid rgba(194, 201, 219, 0.08);
border-radius: 4px;
min-height: 28px;
flex-grow: 1;
}
// === Catch-all stand-in classes (MirrorRecord) =======================
.preview-panel {
border: 1px solid rgba(194, 201, 219, 0.1);
background-color: rgba(40, 48, 67, 0.3);
min-height: 28px;
}
.preview-buttongroup {
background-color: rgba(40, 48, 67, 0.4);
border: 1px solid rgba(194, 201, 219, 0.1);
border-radius: 8px;
min-height: 32px;
}
.preview-dropdown {
background-image: linear-gradient(to bottom, #37425D 0%, #283043 100%);
background-color: rgba(0, 0, 0, 0);
border: 1px solid rgba(194, 201, 219, 0.1);
border-radius: 8px;
color: #fafaff;
min-height: 32px;
position: relative;
}
.preview-dropdown > .inner {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 32px;
background-color: rgba(17, 20, 29, 0.4);
border-left: 1px solid rgba(194, 201, 219, 0.1);
align-items: center;
justify-content: center;
}
// ================================================================================================
// FIELD KIT UI SYSTEM · Placement Kit · demo key-hint card
//
// SOURCE OF TRUTH: docs/design/ui-system/tokens.dc.html
// (+ components.dc.html for the parts, placement-kit.dc.html for this screen)
//
// DRIFT NOTE. s&box cannot express a library-to-library dependency, so a kit must never @import
// another kit's stylesheet. Every kit carries its OWN copy of the token values below, and this
// kit's two panels each carry a copy. Nothing syncs them: if a value moves on the tokens page,
// hand-update it here, in TweakPanel.razor.scss, and in every other kit.
//
// ENGINE-LEGAL SUBSET (the mockups are browser HTML and contain CSS this engine cannot parse):
// border-width + border-color only, never `border: 1px solid x` (border-style is a parse error
// that aborts the whole stylesheet); no box-shadow; no letter-spacing; no `inset` shorthand; no
// percent max-height on an absolute card; explicit px line-heights; font sizes only from
// {12, 13, 14, 16}.
//
// CONTRAST LAW (overrides the mockups wherever they are dimmer): nothing a player reads is dimmer
// than #E8EAED, key badges are pure #FFFFFF at weight 700. The 42px close x is the only close
// affordance on this card; there is no ESC badge, here or anywhere.
// ================================================================================================
// ---- base tokens (shared across kits, copied per kit) ----
$fk-panel-bg: rgba( 15, 17, 21, 0.92 );
$fk-border: rgba( 255, 255, 255, 0.08 );
$fk-border-hi: rgba( 255, 255, 255, 0.12 );
$fk-row: rgba( 255, 255, 255, 0.05 );
$fk-hover: rgba( 255, 255, 255, 0.10 );
$fk-text-hi: #F2F4F7;
$fk-text: #E8EAED;
$fk-key-glyph: #FFFFFF;
// No accent token here on purpose: this card is entirely neutral in the mockup. Tinting the key
// chips would compete with the tweak panel, which is where the green (#5CE3A4) does its work.
$fk-ui-font: Poppins, sans-serif;
$fk-mono-font: "Roboto Mono", monospace;
DemoHintCard {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
font-family: $fk-ui-font;
// Only the card takes clicks, so the scene keeps the cursor everywhere else.
.hc-card {
position: absolute;
top: 40px;
left: 40px;
width: 440px;
flex-direction: column;
gap: 12px;
padding: 20px;
pointer-events: all;
background-color: $fk-panel-bg;
border-width: 1px;
border-color: $fk-border;
border-radius: 16px;
color: $fk-text;
}
.hc-hdr {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.hc-title {
font-size: 16px;
line-height: 22px;
font-weight: 700;
color: $fk-text-hi;
}
// 42px hit target on a 16px glyph, matching the tweak panel. The negative margins pull it back
// into the card's 20px padding so the header row stays compact.
.hc-x {
font-size: 16px;
line-height: 22px;
color: $fk-text-hi;
width: 42px;
height: 42px;
margin: -8px -12px -8px 0px;
justify-content: center;
align-items: center;
border-radius: 6px;
cursor: pointer;
pointer-events: all;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
}
.hc-lede {
font-size: 13px;
line-height: 20px;
color: $fk-text;
}
.hc-rows {
flex-direction: column;
gap: 8px;
}
.hc-row {
flex-direction: row;
// flex-start, not centre: the longer hints wrap to two lines, and a key chip floating half
// way down its own explanation is the one place this card stops looking like the mockup.
align-items: flex-start;
gap: 12px;
}
// Fixed-width chip so every key column lines up and a chip never splits across a wrapped line.
// Width is the whole box (no horizontal padding), which keeps the column exact.
.hc-key {
font-family: $fk-mono-font;
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $fk-key-glyph;
width: 110px;
flex-shrink: 0;
padding: 3px 0px;
justify-content: center;
align-items: center;
background-color: $fk-row;
border-width: 1px;
border-color: $fk-border-hi;
border-radius: 5px;
}
.hc-what {
font-size: 13px;
line-height: 20px;
color: $fk-text;
flex-grow: 1;
}
.hc-foot {
font-size: 13px;
line-height: 20px;
color: $fk-text;
border-top-width: 1px;
border-top-color: $fk-border;
padding-top: 12px;
}
}
// ================================================================================================
// FIELD KIT UI SYSTEM · Day / Night Kit · time panel
//
// SOURCE OF TRUTH: docs/design/ui-system/tokens.dc.html
// (+ components.dc.html for the parts, daynight-kit.dc.html for this screen)
//
// DRIFT NOTE. s&box cannot express a library-to-library dependency, so a kit must never @import
// another kit's stylesheet. Every kit therefore carries its OWN copy of the token values below.
// Nothing syncs them. If a value moves on the tokens page, hand-update it here AND in every other
// kit's .razor.scss, then re-check the kits side by side.
//
// ENGINE-LEGAL SUBSET. The mockups are browser HTML and contain CSS this engine cannot parse. The
// translations, all applied below:
// · never `border: 1px solid x` -> border-width + border-color only. border-style is a parse
// error that aborts the WHOLE stylesheet and collapses the panel to 0x0.
// · never box-shadow. All depth comes from the alpha surfaces.
// · never letter-spacing. Hierarchy is size, weight and case.
// · never the `inset` shorthand -> top/left/width/height, expanded.
// · never a percent max-height on an absolute card, and no glyph outside the shipped font
// anywhere (the mockups' dropdown caret included): it renders as tofu.
// · explicit px line-heights, never unitless ratios.
// · font sizes come only from {12, 13, 14, 16}, plus 20 for the hero clock readout and nothing
// else (the tokens page reserves 20 for exactly that). Five distinct sizes against a budget of
// eight per panel assembly.
//
// FONT DECLARATIONS ARE INLINE AND UNQUOTED, AND THAT IS LOAD-BEARING. Write
// `font-family: Poppins, sans-serif;` and `font-family: Roboto Mono, monospace;` literally at every
// site. A SCSS variable holding the family, or a quoted family name, does not survive this engine's
// stylesheet parse: the rule is dropped and the panel silently falls back to the default face. This
// cost a live debugging session; do not "tidy" these into a $token.
//
// CONTRAST LAW (overrides the mockups wherever they are dimmer). Nothing a player reads to operate
// a control is dimmer than #E8EAED. Key badges are pure #FFFFFF at weight 700. The 42px close x is
// present and is the ONLY close affordance: no ESC badge, ever.
//
// SLIDER MECHANIC (components.dc.html, fk-slider-row). .dn-hit is a transparent 7px-padded wrapper
// so the grab area is 28px tall rather than the 14px the track draws; .dn-track is the visible pill
// and .dn-fill is an absolutely positioned, pointer-events:none decoration inside it. Wrapper and
// track BOTH own pointer events and both carry the drag handlers: they share a left edge and a
// width, so whichever one the cursor lands on computes the same fraction, and the bubbled duplicate
// call writes the same value twice. Do not "simplify" the pair away; the fill must never resize the
// row and the drag must be measured against the track, not the fill.
// ================================================================================================
// ---- base tokens (shared across kits, copied per kit) ----
$fk-panel-bg: rgba( 15, 17, 21, 0.92 );
$fk-border: rgba( 255, 255, 255, 0.08 );
$fk-border-hi: rgba( 255, 255, 255, 0.12 );
$fk-row: rgba( 255, 255, 255, 0.05 );
$fk-row-2: rgba( 255, 255, 255, 0.06 );
$fk-hover: rgba( 255, 255, 255, 0.10 );
$fk-track: rgba( 255, 255, 255, 0.12 );
$fk-track-hover: rgba( 255, 255, 255, 0.16 );
$fk-text-hi: #F2F4F7;
$fk-text: #E8EAED;
$fk-key-glyph: #FFFFFF;
// ---- kit accent (Day / Night Kit · hue 300) ----
$fk-accent: #C9AEF2;
$fk-accent-hover: #D4BEF6;
$fk-accent-ink: #140A1A;
DayNightPanel {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
font-family: Poppins, sans-serif;
// The card is the only thing that takes clicks, so the cursor stays usable over the panel while
// the rest of the scene ignores it.
.dn-card {
position: absolute;
top: 40px;
right: 40px;
width: 420px;
flex-direction: column;
gap: 12px;
padding: 20px;
pointer-events: all;
background-color: $fk-panel-bg;
border-width: 1px;
border-color: $fk-border;
border-radius: 16px;
color: $fk-text;
}
// ---- header ----
.dn-hdr {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.dn-title {
font-size: 16px;
line-height: 22px;
font-weight: 700;
color: $fk-text-hi;
}
.dn-hr {
flex-direction: row;
align-items: center;
gap: 4px;
}
.dn-key {
font-family: Roboto Mono, monospace;
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: $fk-key-glyph;
background-color: $fk-row;
border-width: 1px;
border-color: $fk-border-hi;
border-radius: 5px;
padding: 3px 8px;
flex-shrink: 0;
}
// 42px hit target on a 16px glyph (owner ruling: 34px is too small to hit). The negative margins
// pull the box back into the 20px card padding so the header stays compact.
.dn-x {
font-size: 16px;
line-height: 22px;
color: $fk-text-hi;
width: 42px;
height: 42px;
margin: -8px -12px -8px 0px;
justify-content: center;
align-items: center;
border-radius: 6px;
cursor: pointer;
pointer-events: all;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
}
.dn-empty {
font-size: 13px;
line-height: 20px;
color: $fk-text;
}
// ---- hero clock readout (the one 20px type site in the kit) ----
.dn-hero {
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: $fk-row;
border-radius: 10px;
padding: 12px 14px;
}
.dn-hl {
font-size: 13px;
line-height: 20px;
color: $fk-text-hi;
}
.dn-hv {
font-family: Roboto Mono, monospace;
font-size: 20px;
line-height: 26px;
font-weight: 600;
color: $fk-text-hi;
}
// ---- kicker line: day index and where the weather came from ----
// Wrap row of short atomic runs, each one nowrap and unshrinkable, so nothing splits mid-word.
// Single-value gap on purpose. The tokens page asks for 3px between wrapped rows and 8px between
// runs, but nothing shipped in these kits uses the two-value `gap: 3px 8px` form and this engine's
// parser is not proven on it. One value is the safe subset; 8px both ways reads fine.
.dn-meta {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.dn-mk {
font-family: Roboto Mono, monospace;
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: $fk-text;
white-space: nowrap;
flex-shrink: 0;
}
// ---- label + value + slider rows ----
.dn-row {
flex-direction: column;
gap: 6px;
}
.dn-rlab {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.dn-rl {
font-size: 13px;
line-height: 20px;
color: $fk-text-hi;
}
.dn-rv {
font-family: Roboto Mono, monospace;
font-size: 14px;
line-height: 20px;
color: $fk-text;
}
.dn-slider {
flex-direction: row;
align-items: center;
gap: 10px;
}
.dn-stp {
font-family: Roboto Mono, monospace;
font-size: 14px;
line-height: 20px;
color: $fk-text-hi;
width: 28px;
height: 28px;
flex-shrink: 0;
justify-content: center;
align-items: center;
background-color: $fk-row-2;
border-width: 1px;
border-color: $fk-hover;
border-radius: 6px;
cursor: pointer;
transition: all 0.12s ease;
&:hover {
color: $fk-accent-ink;
background-color: $fk-accent;
}
}
// Transparent grab wrapper: 14px track plus 7px above and below = the 28px hit area the system
// asks for. Horizontal padding is zero on purpose so its width equals the track's exactly.
.dn-hit {
flex-grow: 1;
flex-direction: column;
justify-content: center;
padding: 7px 0px;
pointer-events: all;
cursor: pointer;
}
.dn-track {
position: relative;
width: 100%;
height: 14px;
border-radius: 99px;
background-color: $fk-track;
pointer-events: all;
cursor: pointer;
transition: all 0.12s ease;
&:hover { background-color: $fk-track-hover; }
.dn-fill {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
min-width: 14px;
border-radius: 99px;
background-color: $fk-accent;
pointer-events: none;
}
}
// ---- jump-to pill chips ----
.dn-chips {
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
}
.dn-chip {
font-family: Roboto Mono, monospace;
font-size: 13px;
line-height: 20px;
font-weight: 600;
color: $fk-text-hi;
background-color: $fk-track;
border-radius: 99px;
padding: 5px 14px;
white-space: nowrap;
flex-shrink: 0;
cursor: pointer;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
&.on {
color: $fk-accent-ink;
background-color: $fk-accent;
&:hover { background-color: $fk-accent-hover; }
}
}
// ---- segmented groups (weather, run/pause) ----
.dn-seg-group {
flex-direction: row;
align-items: center;
background-color: $fk-row;
border-radius: 99px;
padding: 3px;
}
// Weather fills the card width, so its segments share the row evenly.
.dn-seg-group.wide {
width: 100%;
}
.dn-seg {
font-family: Roboto Mono, monospace;
font-size: 13px;
line-height: 20px;
font-weight: 600;
color: $fk-text-hi;
justify-content: center;
align-items: center;
border-radius: 99px;
padding: 5px 16px;
white-space: nowrap;
cursor: pointer;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
&.on {
color: $fk-accent-ink;
background-color: $fk-accent;
&:hover { background-color: $fk-accent-hover; }
}
&.grow { flex-grow: 1; }
// The run / pause pair sits inline beside its label rather than filling the card, and the
// mockup gives that tighter pair 4px of vertical padding against the wide group's 5px.
&.tight { padding: 4px 16px; }
}
// Label beside an inline control (the run / pause row).
.dn-inline {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
// ---- a read-only advisory (shown on a client, where the host owns the clock) ----
.dn-note {
font-size: 13px;
line-height: 20px;
color: $fk-text;
background-color: $fk-row;
border-radius: 10px;
padding: 9px 12px;
}
// ---- actions ----
.dn-btns {
flex-direction: row;
gap: 8px;
border-top-width: 1px;
border-top-color: $fk-border;
padding-top: 12px;
}
.dn-btn {
font-size: 13px;
line-height: 20px;
font-weight: 600;
color: $fk-text-hi;
background-color: $fk-row-2;
border-width: 1px;
border-color: $fk-hover;
border-radius: 10px;
padding: 10px 0px;
flex-grow: 1;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
// Copy config is the primary action on this card: accent fill, ink text, no hairline.
&.primary {
color: $fk-accent-ink;
background-color: $fk-accent;
border-color: $fk-accent;
&:hover { background-color: $fk-accent-hover; }
}
}
}
$accent: #ffb13b;
root {
position: absolute;
width: 100%;
height: 100%;
font-family: "Poppins", sans-serif;
color: white;
pointer-events: none;
flex-direction: column;
}
.top {
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 36px;
.mode { font-size: 20px; font-weight: 600; letter-spacing: 4px; color: $accent; text-shadow: 0 2px 6px black; }
.lobby { font-size: 40px; font-weight: 800; letter-spacing: 3px; text-shadow: 0 3px 10px black; }
.timer { font-size: 30px; font-weight: 700; text-shadow: 0 2px 6px black; &.urgent { color: #ff5a4d; } }
}
.status {
position: absolute; top: 48%; width: 100%; justify-content: center;
font-size: 24px; font-weight: 600; text-shadow: 0 2px 8px black;
}
.chat {
position: absolute; top: 70%; width: 100%; justify-content: center;
font-size: 18px; color: $accent; text-shadow: 0 2px 6px black;
}
.hints {
position: absolute; bottom: 24px; width: 100%; justify-content: center; gap: 18px;
span {
font-size: 15px; color: rgba(255,255,255,0.85);
background-color: rgba(0,0,0,0.35); padding: 5px 12px; border-radius: 6px;
}
}
.menu {
pointer-events: all;
position: absolute; width: 100%; height: 100%;
flex-direction: column; align-items: center; justify-content: center;
background-color: rgba(8, 10, 16, 0.72);
.title { font-size: 40px; font-weight: 800; letter-spacing: 6px; }
.sub { font-size: 18px; color: rgba(255,255,255,0.7); margin-bottom: 28px; }
.row { flex-direction: row; gap: 18px; }
.mode {
flex-direction: column; align-items: center; justify-content: center;
width: 220px; height: 150px; border-radius: 14px;
background: linear-gradient(160deg, rgba(40,46,66,0.95), rgba(22,26,40,0.95));
border: 2px solid rgba(255,255,255,0.08);
transition: all 0.12s ease-out; cursor: pointer;
&:hover { border-color: $accent; transform: scale(1.04); }
.k { font-size: 22px; color: $accent; font-weight: 700; }
.n { font-size: 24px; font-weight: 700; margin-top: 8px; }
}
.back {
margin-top: 30px; font-size: 16px; color: rgba(255,255,255,0.8);
background-color: rgba(255,255,255,0.08); padding: 10px 20px; border-radius: 8px; cursor: pointer;
&:hover { background-color: rgba(255,255,255,0.16); }
}
}
// ================================================================================================
// FIELD KIT UI SYSTEM · Placement Kit · transform tweak panel
//
// SOURCE OF TRUTH: docs/design/ui-system/tokens.dc.html
// (+ components.dc.html for the parts, placement-kit.dc.html for this screen)
//
// DRIFT NOTE. s&box cannot express a library-to-library dependency, so a kit must never @import
// another kit's stylesheet. Every kit therefore carries its OWN copy of the token values below.
// Nothing syncs them. If a value moves on the tokens page, hand-update it here AND in every other
// kit's .razor.scss, then re-check the kits side by side.
//
// ENGINE-LEGAL SUBSET. The mockups are browser HTML and contain CSS this engine cannot parse. The
// translations, all applied below:
// · never `border: 1px solid x` -> border-width + border-color only. border-style is a parse
// error that aborts the WHOLE stylesheet and collapses the panel to 0x0.
// · never box-shadow. All depth comes from the alpha surfaces.
// · never letter-spacing. Hierarchy is size, weight and case.
// · never the `inset` shorthand -> top/left/width/height, expanded.
// · never a percent max-height on an absolute card, and no glyph outside the shipped font
// anywhere (the mockups' dropdown caret included): it renders as tofu.
// · explicit px line-heights, never unitless ratios.
// · font sizes come only from {12, 13, 14, 16}. Four per panel is the budget; this sheet uses
// all four and no others.
//
// CONTRAST LAW (overrides the mockups wherever they are dimmer). Nothing a player reads to operate
// a control is dimmer than #E8EAED. Key badges are pure #FFFFFF at weight 700. The 42px close x is
// present and is the ONLY close affordance: no ESC badge, ever.
//
// SLIDER MECHANIC, unchanged from the original sheet and load-bearing: .tp-track is
// position:relative with pointer-events:all, .tp-fill is position:absolute with pointer-events:none.
// That combination is what lets the fill grow WITHOUT resizing the row and keeps the drag position
// measured against the track rather than the fill. Do not "simplify" it.
// ================================================================================================
// ---- base tokens (shared across kits, copied per kit) ----
$fk-panel-bg: rgba( 15, 17, 21, 0.92 );
$fk-border: rgba( 255, 255, 255, 0.08 );
$fk-border-hi: rgba( 255, 255, 255, 0.12 );
$fk-row: rgba( 255, 255, 255, 0.05 );
$fk-row-2: rgba( 255, 255, 255, 0.06 );
$fk-hover: rgba( 255, 255, 255, 0.10 );
$fk-track: rgba( 255, 255, 255, 0.12 );
$fk-track-hover: rgba( 255, 255, 255, 0.16 );
$fk-text-hi: #F2F4F7;
$fk-text: #E8EAED;
$fk-key-glyph: #FFFFFF;
// ---- kit accent (Placement Kit · hue 155) ----
$fk-accent: #5CE3A4;
$fk-accent-hover: #74EAB4;
$fk-accent-ink: #0A1A12;
$fk-ui-font: Poppins, sans-serif;
$fk-mono-font: "Roboto Mono", monospace;
TweakPanel {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
font-family: $fk-ui-font;
// The card is the only thing that takes clicks, so the cursor stays usable over the panel
// while the rest of the scene ignores it.
.tp-card {
position: absolute;
top: 40px;
right: 40px;
width: 420px;
flex-direction: column;
gap: 12px;
padding: 20px;
pointer-events: all;
background-color: $fk-panel-bg;
border-width: 1px;
border-color: $fk-border;
border-radius: 16px;
color: $fk-text;
}
// ---- header ----
.tp-hdr {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.tp-title {
font-size: 16px;
line-height: 22px;
font-weight: 700;
color: $fk-text-hi;
}
.tp-hr {
flex-direction: row;
align-items: center;
gap: 4px;
}
.tp-key {
font-family: $fk-mono-font;
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $fk-key-glyph;
background-color: $fk-row;
border-width: 1px;
border-color: $fk-border-hi;
border-radius: 5px;
padding: 3px 8px;
}
// 42px hit target on a 16px glyph (owner ruling: 34px is too small to hit). The negative
// margins pull the box back into the 20px card padding so the header stays compact.
.tp-x {
font-size: 16px;
line-height: 22px;
color: $fk-text-hi;
width: 42px;
height: 42px;
margin: -8px -12px -8px 0px;
justify-content: center;
align-items: center;
border-radius: 6px;
cursor: pointer;
pointer-events: all;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
}
.tp-empty {
font-size: 13px;
line-height: 20px;
color: $fk-text;
}
// ---- one tab per tweak target ----
.tp-tabs {
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
}
.tp-tab {
font-size: 13px;
line-height: 18px;
font-weight: 500;
color: $fk-text-hi;
background-color: $fk-row;
border-radius: 6px;
padding: 5px 12px;
cursor: pointer;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
&.on {
font-weight: 600;
color: $fk-accent-ink;
background-color: $fk-accent;
}
}
// ---- sub line: what the numbers below are measured against ----
.tp-sub {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.tp-item {
font-size: 13px;
line-height: 20px;
font-weight: 600;
color: $fk-text-hi;
}
.tp-note {
font-family: $fk-mono-font;
font-size: 12px;
line-height: 16px;
color: $fk-text;
}
// ---- three-state step size toggle (pill group, one accent segment) ----
.tp-steprow {
flex-direction: row;
align-items: center;
gap: 8px;
}
.tp-sl {
font-size: 13px;
line-height: 20px;
color: $fk-text-hi;
}
.tp-seg-group {
flex-direction: row;
align-items: center;
background-color: $fk-row;
border-radius: 99px;
padding: 3px;
}
.tp-seg {
font-family: $fk-mono-font;
font-size: 13px;
line-height: 18px;
font-weight: 600;
color: $fk-text-hi;
border-radius: 99px;
padding: 4px 12px;
cursor: pointer;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
&.on {
color: $fk-accent-ink;
background-color: $fk-accent;
&:hover { background-color: $fk-accent-hover; }
}
}
// ---- editable rows ----
.tp-rows {
flex-direction: column;
gap: 10px;
}
.tp-row {
flex-direction: column;
gap: 6px;
// A hairline above the first rotation row and above Scale, so the seven sliders read as
// three groups instead of one undifferentiated stack.
&.hdr {
border-top-width: 1px;
border-top-color: $fk-border;
padding-top: 10px;
}
}
.tp-rlab {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.tp-rl {
font-size: 13px;
line-height: 20px;
color: $fk-text-hi;
}
.tp-rv {
font-family: $fk-mono-font;
font-size: 14px;
line-height: 18px;
color: $fk-text;
}
.tp-slider {
flex-direction: row;
align-items: center;
gap: 10px;
}
.tp-stp {
font-family: $fk-mono-font;
font-size: 14px;
line-height: 18px;
color: $fk-text-hi;
width: 28px;
height: 28px;
flex-shrink: 0;
justify-content: center;
align-items: center;
background-color: $fk-row-2;
border-width: 1px;
border-color: $fk-hover;
border-radius: 6px;
cursor: pointer;
transition: all 0.12s ease;
&:hover {
color: $fk-accent-ink;
background-color: $fk-accent;
}
}
.tp-track {
position: relative;
flex-grow: 1;
height: 14px;
border-radius: 99px;
background-color: $fk-track;
pointer-events: all;
cursor: pointer;
&:hover { background-color: $fk-track-hover; }
.tp-fill {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
// min-width keeps the pill from collapsing below its own radius at the bottom of a
// range: a slider at 0 still reads as a slider, not an empty track.
min-width: 14px;
border-radius: 99px;
background-color: $fk-accent;
pointer-events: none;
}
}
// ---- actions ----
.tp-btns {
flex-direction: row;
gap: 8px;
}
.tp-btn {
font-size: 13px;
line-height: 18px;
font-weight: 600;
color: $fk-text-hi;
background-color: $fk-row-2;
border-width: 1px;
border-color: $fk-hover;
border-radius: 10px;
padding: 10px 0px;
flex-grow: 1;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
// Copy is the primary action on this card: accent fill, ink text, no hairline.
&.primary {
color: $fk-accent-ink;
background-color: $fk-accent;
border-color: $fk-accent;
&:hover { background-color: $fk-accent-hover; }
}
}
}
// ================================================================================================
// FIELD KIT UI SYSTEM · Day / Night Kit · demo key-hint card
//
// SOURCE OF TRUTH: docs/design/ui-system/tokens.dc.html
// (+ components.dc.html for the parts, daynight-kit.dc.html for this screen)
//
// DRIFT NOTE. s&box cannot express a library-to-library dependency, so a kit must never @import
// another kit's stylesheet. Every kit carries its OWN copy of the token values below, and this
// kit's two panels each carry a copy. Nothing syncs them: if a value moves on the tokens page,
// hand-update it here, in Ui/DayNightPanel.razor.scss, and in every other kit.
//
// ENGINE-LEGAL SUBSET (the mockups are browser HTML and contain CSS this engine cannot parse):
// border-width + border-color only, never `border: 1px solid x` (border-style is a parse error
// that aborts the whole stylesheet); no box-shadow; no letter-spacing; no `inset` shorthand; no
// percent max-height on an absolute card; explicit px line-heights; font sizes only from
// {12, 13, 14, 16}.
//
// FONT DECLARATIONS ARE INLINE AND UNQUOTED, AND THAT IS LOAD-BEARING. `font-family: Poppins,
// sans-serif;` and `font-family: Roboto Mono, monospace;` written out at every site. A SCSS
// variable holding the family, or a quoted family name, does not survive this engine's stylesheet
// parse: the rule is dropped and the card silently falls back to the default face.
//
// CONTRAST LAW (overrides the mockups wherever they are dimmer): nothing a player reads is dimmer
// than #E8EAED, key badges are pure #FFFFFF at weight 700. The 42px close x is the only close
// affordance on this card; there is no ESC badge, here or anywhere.
// ================================================================================================
// ---- base tokens (shared across kits, copied per kit) ----
$fk-panel-bg: rgba( 15, 17, 21, 0.92 );
$fk-border: rgba( 255, 255, 255, 0.08 );
$fk-border-hi: rgba( 255, 255, 255, 0.12 );
$fk-row: rgba( 255, 255, 255, 0.05 );
$fk-hover: rgba( 255, 255, 255, 0.10 );
$fk-text-hi: #F2F4F7;
$fk-text: #E8EAED;
$fk-key-glyph: #FFFFFF;
// No accent token here on purpose: this card is entirely neutral, the way the placement kit's hint
// card is. Tinting the key chips would compete with the time panel, which is where the violet
// (#C9AEF2) does its work.
DayNightHintCard {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
font-family: Poppins, sans-serif;
// Only the card takes clicks, so the scene keeps the cursor everywhere else.
.dh-card {
position: absolute;
top: 40px;
left: 40px;
width: 440px;
flex-direction: column;
gap: 12px;
padding: 20px;
pointer-events: all;
background-color: $fk-panel-bg;
border-width: 1px;
border-color: $fk-border;
border-radius: 16px;
color: $fk-text;
}
.dh-hdr {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.dh-title {
font-size: 16px;
line-height: 22px;
font-weight: 700;
color: $fk-text-hi;
}
// 42px hit target on a 16px glyph, matching the time panel. The negative margins pull it back into
// the card's 20px padding so the header row stays compact.
.dh-x {
font-size: 16px;
line-height: 22px;
color: $fk-text-hi;
width: 42px;
height: 42px;
margin: -8px -12px -8px 0px;
justify-content: center;
align-items: center;
border-radius: 6px;
cursor: pointer;
pointer-events: all;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
}
.dh-lede {
font-size: 13px;
line-height: 20px;
color: $fk-text;
}
.dh-rows {
flex-direction: column;
gap: 8px;
}
.dh-row {
flex-direction: row;
// flex-start, not centre: the longer hints wrap to two lines, and a key chip floating half
// way down its own explanation is the one place this card stops looking like the mockup.
// Same correction the placement kit's hint card carries.
align-items: flex-start;
gap: 12px;
}
// Fixed-width chip so every key column lines up and a chip never splits across a wrapped line.
// Width is the whole box (no horizontal padding), which keeps the column exact.
.dh-key {
font-family: Roboto Mono, monospace;
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: $fk-key-glyph;
width: 110px;
flex-shrink: 0;
padding: 3px 0px;
justify-content: center;
align-items: center;
background-color: $fk-row;
border-width: 1px;
border-color: $fk-border-hi;
border-radius: 5px;
}
.dh-what {
font-size: 13px;
line-height: 20px;
color: $fk-text;
flex-grow: 1;
}
// Live status strip: short atomic mono runs, each unshrinkable and nowrap, so a wrap never splits
// one mid-word.
// Single-value gap on purpose: nothing shipped in these kits uses the two-value `gap: 3px 8px` form
// and this engine's parser is not proven on it. One value is the safe subset.
.dh-live {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
border-top-width: 1px;
border-top-color: $fk-border;
padding-top: 12px;
}
.dh-lk {
font-family: Roboto Mono, monospace;
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: $fk-text;
white-space: nowrap;
flex-shrink: 0;
}
.dh-foot {
font-size: 13px;
line-height: 20px;
color: $fk-text;
}
}
// ================================================================================================
// FIELD KIT UI SYSTEM · Vehicle Physics Kit · demo tuning lab
//
// SOURCE OF TRUTH: docs/design/ui-system/tokens.dc.html
// (+ components.dc.html for the parts, vehicle-physics.dc.html screen 03.A for
// this panel. 03.B/03.C/03.D on that page are the GAME's overlays, not this kit's.)
//
// DRIFT NOTE. s&box cannot express a library-to-library dependency, so a kit must never @import
// another kit's stylesheet. Every kit carries its OWN copy of the token values below. Nothing syncs
// them: if a value moves on the tokens page, hand-update it here and in every other kit.
//
// ENGINE-LEGAL SUBSET. The mockups are browser HTML and carry CSS this engine cannot parse. What
// changed on the way in, all applied below:
// · never `border: 1px solid x` -> border-width + border-color only. border-style is a parse
// error that aborts the WHOLE stylesheet and collapses the panel to 0x0.
// · never box-shadow (the previous version of this sheet had two; the alpha surfaces carry the
// depth instead).
// · never the `inset` shorthand -> top/left/width/height, expanded.
// · never letter-spacing, never a percent max-height on an absolute card, no glyphs outside the
// shipped font.
// · explicit px line-heights and explicit px font sizes, only from {12, 13, 14, 16}. The previous
// version declared NO font size at all and rode the engine default, so the panel had no type
// hierarchy; that is what the sizes below fix.
//
// CONTRAST LAW (overrides the mockups wherever they are dimmer): nothing a player reads to operate
// a control is dimmer than #E8EAED, key badges are pure #FFFFFF at weight 700. The expanded card
// carries a 42px close x, which is the only close affordance; no ESC badge anywhere.
//
// SLIDER MECHANIC, unchanged and load-bearing: .track is position:relative with pointer-events:all,
// .fill is position:absolute with pointer-events:none, so the fill grows without resizing the row
// and the drag stays measured against the track.
// ================================================================================================
// ---- base tokens (shared across kits, copied per kit) ----
$fk-panel-bg: rgba( 15, 17, 21, 0.92 );
$fk-border: rgba( 255, 255, 255, 0.08 );
$fk-border-hi: rgba( 255, 255, 255, 0.12 );
$fk-row: rgba( 255, 255, 255, 0.05 );
$fk-row-2: rgba( 255, 255, 255, 0.06 );
$fk-hover: rgba( 255, 255, 255, 0.10 );
$fk-track: rgba( 255, 255, 255, 0.12 );
$fk-track-hover: rgba( 255, 255, 255, 0.16 );
$fk-text-hi: #F2F4F7;
$fk-text: #E8EAED;
$fk-key-glyph: #FFFFFF;
// ---- kit accent (Vehicle Physics Kit · base hue 210) ----
$fk-accent: #4AD9F2;
$fk-accent-hover: #58E1F7;
$fk-accent-ink: #0A161A;
$fk-ui-font: Poppins, sans-serif;
$fk-mono-font: "Roboto Mono", monospace;
DemoTuningPanel {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
font-family: $fk-ui-font;
.mono { font-family: $fk-mono-font; }
// Shared key chip: pure white bold on a gray plate, never tinted.
.kbd {
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $fk-key-glyph;
background-color: $fk-row;
border-width: 1px;
border-color: $fk-border-hi;
border-radius: 5px;
padding: 3px 8px;
}
// Top-right key legend (car switching). A persistent hint, not a panel, so it carries no close
// affordance: the mockup shows the same.
.legend {
position: absolute;
right: 40px;
top: 40px;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 10px 14px;
background-color: $fk-panel-bg;
border-width: 1px;
border-color: $fk-border;
border-radius: 16px;
.title {
font-size: 13px;
line-height: 18px;
font-weight: 600;
color: $fk-text-hi;
}
}
.panel {
position: absolute;
left: 40px;
top: 40px;
width: 380px;
flex-direction: column;
gap: 12px;
padding: 20px;
background-color: $fk-panel-bg;
border-width: 1px;
border-color: $fk-border;
border-radius: 16px;
pointer-events: all;
.head {
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
font-size: 16px;
line-height: 22px;
font-weight: 700;
color: $fk-text-hi;
}
}
// Key chip + close x, kept together at the right end of the header.
.hr {
flex-direction: row;
align-items: center;
gap: 4px;
}
// 42px hit target on a 16px glyph. The negative margins pull the box back into the card's
// 20px padding so the header row stays compact.
.x {
font-size: 16px;
line-height: 22px;
color: $fk-text-hi;
width: 42px;
height: 42px;
margin: -8px -12px -8px 0px;
justify-content: center;
align-items: center;
border-radius: 6px;
cursor: pointer;
pointer-events: all;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
}
.hint {
font-size: 13px;
line-height: 20px;
color: $fk-text;
}
// Collapsed legend chip: same anchor as the expanded card (left/top 40px via .panel), sized
// to its content so it reads as the card's top-left corner waiting to grow. No close x: it
// IS the closed state.
&.chip {
width: auto;
padding: 10px 14px;
gap: 0px;
cursor: pointer;
.head {
gap: 8px;
justify-content: flex-start;
.title {
font-size: 13px;
line-height: 18px;
font-weight: 600;
color: $fk-text-hi;
}
}
}
.dials {
flex-direction: column;
gap: 12px;
.dial {
flex-direction: column;
gap: 6px;
}
.drow {
flex-direction: row;
justify-content: space-between;
align-items: center;
.dname {
font-size: 13px;
line-height: 20px;
color: $fk-text-hi;
}
.dval {
font-size: 14px;
line-height: 18px;
color: $fk-text;
}
}
.dctl {
flex-direction: row;
align-items: center;
gap: 10px;
.step {
font-size: 14px;
line-height: 18px;
width: 28px;
height: 28px;
flex-shrink: 0;
justify-content: center;
align-items: center;
color: $fk-text-hi;
background-color: $fk-row-2;
border-width: 1px;
border-color: $fk-hover;
border-radius: 6px;
cursor: pointer;
transition: all 0.12s ease;
&:hover {
color: $fk-accent-ink;
background-color: $fk-accent;
}
}
.track {
// Click-to-jump + drag-to-scrub hit box. Events must land on the track (not the
// fill) so the mouse local position stays track-relative: pointer-events all
// here, none on the fill.
position: relative;
flex-grow: 1;
height: 14px;
border-radius: 99px;
background-color: $fk-track;
pointer-events: all;
cursor: pointer;
&:hover { background-color: $fk-track-hover; }
.fill {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
// min-width keeps the pill from collapsing below its own radius at the bottom
// of a dial's range: a dial at its minimum still reads as a slider.
min-width: 14px;
border-radius: 99px;
background-color: $fk-accent;
pointer-events: none;
}
}
}
// Cycling value chip (Assists, Tires): accent fill, ink text, mono label.
.cycle {
font-size: 14px;
line-height: 18px;
font-weight: 600;
justify-content: center;
align-items: center;
color: $fk-accent-ink;
background-color: $fk-accent;
border-radius: 6px;
padding: 4px 14px;
cursor: pointer;
transition: all 0.12s ease;
&:hover { background-color: $fk-accent-hover; }
}
}
.foot {
flex-direction: column;
gap: 8px;
.btn {
font-size: 13px;
line-height: 18px;
font-weight: 600;
justify-content: center;
align-items: center;
color: $fk-text-hi;
background-color: $fk-row-2;
border-width: 1px;
border-color: $fk-hover;
border-radius: 10px;
padding: 11px 0px;
cursor: pointer;
transition: all 0.12s ease;
&:hover { background-color: $fk-hover; }
}
}
}
}
// ── Static tokens — layout, type, radii, borders ──────────────────────────────
// The palette is RUNTIME, not compile-time: SkafinityTheme.cs derives it from one accent
// colour and the .razor binds it as inline style= values, so a consuming game re-themes the
// board without editing (or forking) this file. Nothing here sets a fill or a text colour
// that the theme owns.
//
// Two rules keep the split clean:
// * The stylesheet owns every BORDER and the razor sets none, so a :hover / .selected
// border rule is never in competition with an inline style.
// * Hover feedback is therefore a border, not a fill — the fill is themed.
// Both are neutral white alphas, which read against any accent the host passes in.
$radius: 2px;
$font: Consolas, 'Roboto Mono', monospace;
$edge: rgba(255,255,255,0.12); // the board's own outline
$rule: rgba(255,255,255,0.10); // dividers
$hover: rgba(255,255,255,0.35); // hover border
$pick: rgba(255,255,255,0.85); // selected / current border
$busy: rgba(255,255,255,0.55); // a queue entry mid-render
$surface: rgba(255,255,255,0.07); // neutral inputs (seed box, n, text entry)
// ────────────────────────────────────────────────────────────────────────────────
skafinitymusicpanel {
// Fill the ScreenPanel; flex-centre the board. pointer-events:none so a closed panel
// never blocks anything — only the board itself takes pointer events.
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
justify-content: center; align-items: center;
pointer-events: none;
font-family: $font;
// The board — sized to its content (no scroll range to drag-pan). Keep it lean enough
// to fit a 1080-tall reference; it extends past the box rather than scrolling.
.music {
flex-shrink: 0;
width: 96%; max-width: 1320px;
flex-direction: column;
align-items: stretch;
padding: 14px 32px;
border: 1.5px solid $edge;
border-radius: 4px;
gap: 6px;
pointer-events: all;
}
.music > div { flex-shrink: 0; }
.header { flex-direction: row; align-items: center; justify-content: space-between; }
.title {
justify-content: center; white-space: nowrap;
font-size: 26px; font-weight: bold; letter-spacing: 6px; color: white;
}
.close {
width: 34px; height: 34px; justify-content: center; align-items: center;
font-size: 20px; font-weight: bold; color: rgba(255,255,255,0.6);
background-color: rgba(255,255,255,0.08); border-radius: $radius;
cursor: pointer; pointer-events: all;
&:hover { color: #ffffff; background-color: rgba(255,255,255,0.2); }
}
.divider { height: 2px; background-color: $rule; margin: 0; }
.top { flex-direction: row; flex-wrap: wrap; gap: 6px 32px; }
.top > .row { width: 46%; }
.row { flex-direction: column; gap: 3px; }
.genre-row .cells { gap: 6px; }
.label { font-size: 14px; letter-spacing: 2px; white-space: nowrap; }
.play-row { flex-direction: row; align-items: center; gap: 8px; }
.seed-box, .num {
justify-content: center; align-items: center; height: 32px; padding: 0 14px;
font-size: 15px; letter-spacing: 1px; color: white;
background-color: $surface; border-radius: $radius;
}
.num { min-width: 60px; font-weight: bold; }
.tag-input {
width: 360px; height: 32px; padding: 0 12px; font-size: 15px; color: white;
background-color: $surface;
border: 2px solid rgba(255,255,255,0.15); border-radius: $radius; pointer-events: all;
}
.cells { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; }
.btn {
justify-content: center; align-items: center; height: 32px; padding: 0 16px;
font-size: 14px;
border: 2px solid transparent; border-radius: $radius; cursor: pointer; pointer-events: all;
&.wide { min-width: 96px; }
&.reroll { height: 28px; padding: 0 12px; font-size: 13px; margin-left: 12px; }
&:hover { border-color: $hover; }
&.toggle.on { border-color: $pick; }
}
.cell {
justify-content: center; align-items: center; height: 19px;
font-size: 13px; color: rgba(255,255,255,0.8);
border: 2px solid transparent; border-radius: $radius; cursor: pointer; pointer-events: all;
&:hover { border-color: $hover; }
&.choice { padding: 0 10px; height: 28px; }
&.tick { width: 11px; }
&.selected { border-color: $pick; }
}
// GLOBAL knobs: four compact columns.
.vibe-grid { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
.vibe { width: 22%; flex-direction: column; gap: 2px; }
.vibe-head { flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; }
.vibe-name { font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,0.55); white-space: nowrap; }
.vibe-val { font-size: 12px; color: white; white-space: nowrap; }
// instrument mixer matrix: rows = voices, Volume leftmost
.matrix { flex-direction: column; gap: 3px; }
.mrow { flex-direction: row; align-items: flex-start; gap: 12px; }
.mvoice { width: 76px; flex-shrink: 0; align-items: flex-start; justify-content: flex-start;
font-size: 13px; font-weight: bold; letter-spacing: 1px; color: white; }
.mhead .mlabel { font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.4); }
.mcell { width: 0; flex-grow: 1; flex-direction: column; gap: 3px; }
.hint { font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
// ── Progress bar (queue entries + buffering banner) ──
.bar {
width: 100%; height: 6px; background-color: rgba(255,255,255,0.08);
border-radius: $radius; overflow: hidden;
}
.bar-fill { height: 6px; border-radius: $radius; }
// ── Buffering banner ("Generating…" while playback waits on a seek) ──
.buffering { flex-direction: column; gap: 4px; }
.buffering-label { font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
// ── Queue / timeline strip — history · current · look-ahead, click an entry to jump ──
.queue { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.qitem {
width: 88px; flex-direction: column; gap: 3px;
padding: 6px 8px;
border: 2px solid transparent; border-radius: $radius; cursor: pointer; pointer-events: all;
&:hover { border-color: $hover; }
&.gen { border-color: $busy; }
&.current { border-color: $pick; }
}
.qn { font-size: 14px; font-weight: bold; color: white; }
.qgenre { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.qstate { font-size: 11px; color: rgba(255,255,255,0.5); min-height: 6px; white-space: nowrap; }
}
TwitchChatExample
{
position: absolute;
justify-content: flex-end;
align-items: flex-start;
flex-direction: column-reverse;
color: white;
TwitchChatEntry
{
position: relative;
flex-shrink: 0;
width: 100%;
align-items: flex-start;
left: 0px;
transition: all 0.2s ease-out;
&:intro
{
left: -16px;
opacity: 0;
}
gap: 4px;
.username
{
align-items: center;
flex-shrink: 0;
.badges
{
.badge
{
width: 18px;
height: 18px;
background-color: white;
margin-right: 3px;
border-radius: 2px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
&.moderator
{
background-color: #00AD03;
background-image: url("badges/moderator.png");
}
&.subscriber
{
background-color: #6441A4;
background-image: url("badges/subscriber.png");
}
&.vip
{
background-color: #E005B9;
background-image: url("badges/vip.png");
}
&.broadcaster
{
background-color: #e91916;
background-image: url("badges/broadcaster.png");
}
&.premium
{
background-color: #00a0d6;
background-image: url("badges/premium.png");
}
&.staff
{
background-color: black;
background-image: url("badges/staff.png");
}
&.turbo
{
background-color: #59399A;
background-image: url("badges/turbo.png");
}
&.verified
{
background-image: url("badges/verified.png");
}
}
}
.avatar
{
width: 24px;
height: 24px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 50%;
margin-right: 4px;
}
.name
{
font-weight: 700;
}
}
.message
{
flex-wrap: wrap;
> *
{
margin-right: 4px;
flex-shrink: 0;
}
.emote
{
width: 24px;
height: 24px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
}
}
}@keyframes pop-up {
from {
opacity: 0;
transform: translateY( 100% );
}
to {
opacity: 1;
transform: translateY( 0% );
}
}
@keyframes hide {
from {
opacity: 1;
transform: translateY( 0% );
}
to {
opacity: 0;
transform: translateY( 100% );
}
}
@keyframes spin {
from {
transform: rotate( 0deg );
}
to {
transform: rotate( 360deg );
}
}
VideoControlOverlay {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
> #spinner {
display: none;
}
&.loading > #spinner {
display: flex;
position: absolute;
left: 30%;
top: 30%;
width: 40%;
height: 40%;
animation: spin 1s infinite;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
&.conceal > #bottomBar {
transform: translateY( 100% );
opacity: 0;
animation: hide 0.08s;
}
> #bottomBar {
position: absolute;
bottom: 0%;
width: 100%;
align-items: center;
padding: 5px;
font-family: Poppins;
background-color: #000000FC;
color: #FFFFFFF0;
transform: translateY( 0% );
opacity: 1;
animation: pop-up 0.08s;
.button {
border: 1px solid #FFFFFF02;
border-radius: 5px;
padding: 5px;
background-color: #000E;
&:hover {
background-color: #222E;
}
&:active {
transform: scale(0.98);
}
}
.symbol {
font-size: 32px;
font-family: Material Icons;
}
> * {
margin: 0px 5px;
}
#timecodeArea {
position: relative;
width: 20%;
justify-content: center;
align-items: center;
font-size: 18px;
&.big {
width: 22.5%;
}
.progress {
flex-wrap: nowrap;
align-items: center;
&.time {
min-width: 10%;
}
&.right {
justify-content: flex-end;
}
}
}
#progressBar {
.inner {
justify-content: center;
min-height: 0px;
.track {
height: 14px;
margin: 0px;
.thumb {
height: 14px;
width: 14px;
}
}
}
.value-tooltip {
// Only required because SliderControl.ShowValueTooltip isn't hooked up to anything.
display: none;
}
}
}
}
// ============================================================================================
// TIPS STUDIO stylesheet. The approved Field Kits UI system (docs/design/ui-system) translated into
// the s&box panel-CSS subset: a centred 1360px modal over a dim scrim, three columns, flex and px
// only. Self-contained on purpose: s&box compiles SCSS per file at runtime, so an @import of a
// game-side theme would break wherever this kit is vendored.
//
// RETINT: change the three $fk-accent values below and nothing else moves.
//
// ============================================================================================
// TYPE. This panel ships the mockup's scale: 16 / 14 / 13 / 12 with exact px line heights
// (16/22 titles, 14/18 mono values keycaps steppers and dropdowns, 13/20 body labels buttons and
// tabs, 12/16 kickers captions and meta). Four distinct sizes, inside the engine's per-assembly
// budget, and the same pairings the other kits ship. No letter-spacing anywhere, that one really
// does corrupt glyphs.
//
// AN EARLIER NOTE HERE CLAIMED font-size RENDERS TEXT AS SOLID BLOCKS, AND STRIPPED EVERY SIZE OUT
// OF THIS PANEL. That claim was wrong and it is retracted. It was read off MCP camera captures: the
// capture path rasterizes sized text as filled grey blocks, so a screenshot of any panel that
// declares font-size looks corrupted. On the physical screen those same panels render pin sharp,
// owner-verified on engine 26.07.22 (2026-07-31) against the Sound Mixer panels, which declare all
// four sizes and are crisp.
//
// So a capture cannot verify TEXT. Geometry is judgeable in a capture (boxes, spacing, corners,
// fills); glyphs are not, and the check for text is the owner's eye on a real screen. Never delete
// a font-size on screenshot evidence again.
// ============================================================================================
//
// OTHER ENGINE RULES this file obeys, each of which has cost someone a session:
// - Borders are border-width + border-color ONLY. A `border:` shorthand or any `border-style` is a
// parse error that aborts the whole stylesheet and collapses the panel to 0x0, and SCSS compiles
// in the editor at runtime, so a headless build never sees it.
// - No box-shadow, no letter-spacing, no backdrop-filter, no inset shorthand.
// - Scroll regions are a FIXED px height under a pinned header. A percentage max-height on an
// absolutely positioned card measures against a parent the style engine has not sized yet, and
// the card collapses.
// - Wrapping rows space their children with margins, not gap, and a scrolling column never gets gap.
// - A fixed-size flex child declares BOTH width (or height) and flex-basis: flex-basis wins for the
// main axis, and an inherited 0 basis collapses the column to nothing.
// - Text nodes stay inside one line's worth of box. A run that overflows its box rasterizes as a
// solid grey block or clips to blank, so long strings are chunked before they reach the markup.
// - Text stays bright. #E8EAED is the floor for anything an author reads to operate the panel;
// key glyphs are pure white at weight 700.
// ============================================================================================
// ---- accent: the whole retint surface ----
$fk-accent: #e3c85e;
$fk-accent-hover: #edd478;
$fk-accent-ink: #1a160a;
// ---- base surfaces ----
$fk-panel-bg: rgba( 15, 17, 21, 0.94 );
$fk-scrim: rgba( 6, 8, 10, 0.55 );
$fk-well: #14171c;
$fk-toast-bg: rgba( 15, 17, 21, 0.92 );
$fk-row: rgba( 255, 255, 255, 0.05 );
$fk-row-2: rgba( 255, 255, 255, 0.06 );
$fk-hover: rgba( 255, 255, 255, 0.10 );
$fk-border: rgba( 255, 255, 255, 0.08 );
$fk-border-hi: rgba( 255, 255, 255, 0.12 );
$fk-border-soft: rgba( 255, 255, 255, 0.05 );
$fk-accent-edge: rgba( 227, 200, 94, 0.60 );
// ---- text ----
$fk-text-hi: #f2f4f7;
$fk-text: #e8eaed;
$fk-key-glyph: #ffffff;
$fk-danger: #ff6b6b;
$fk-danger-bg: rgba( 255, 107, 107, 0.10 );
$fk-danger-edge: rgba( 255, 107, 107, 0.35 );
// ---- pad chip (controller blue, the one non-accent hue) ----
$fk-pad-bg: rgba( 60, 70, 90, 0.60 );
$fk-pad-edge: rgba( 150, 190, 240, 0.65 );
// FONTS ARE DECLARED INLINE, never through a variable, and the UI family is the BARE name. The engine
// auto-registers fonts by family name and resolves them itself; the working precedent everywhere in the
// kits is `font-family: Poppins, sans-serif;` and `font-family: "Roboto Mono", monospace;`. A quoted
// "Poppins" behind a "Segoe UI" fallback did not resolve, and every element that should have been
// Poppins fell back to the engine default, which reads as mono. Owner caught it on a real screen; a
// capture cannot show it (font FACE resolution is not screenshot-verifiable).
// The three-column body height, and the height of one control row. Every fixed box below is derived
// from these two, so moving one keeps the columns aligned.
//
// Both are the mockup's own numbers. The control row is the mockup's 38 (9 and 9 padding, 2 border,
// over a mono line), and the body is the mockup's 593. They were 660 / 42 while this sheet had no
// font sizes and every line stood at the engine default.
//
// THE ONE NUMBER THAT IS NOT THE MOCKUP'S, and the reason the fixed boxes below are not either:
// this engine draws a text line HALF AGAIN as tall as the px line-height you declare. Measured on a
// live 1:1 capture (2026-07-31, engine 26.07.22): 16/22 renders a 33px line, 13/20 renders 30. So a
// 13px button is 9 + 9 + 2 + 30 = 50 tall, not 40, and every stack of them runs long. Keep the
// mockup's outer boxes and let the two scroll regions absorb it: measure, do not assume.
$ts-body-h: 593px;
$ts-ctrl-h: 38px;
// ============================================================================================
// Root and scrim
// ============================================================================================
// The root covers the screen and takes NO pointer events: without that it hit-tests every pixel and
// swallows the clicks meant for the game underneath. Root none, scrim and modal all.
.ts-root {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
font-family: Poppins, sans-serif;
color: $fk-text;
}
.ts-scrim {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: $fk-scrim;
pointer-events: all;
}
.ts-modal {
width: 1360px;
flex-basis: 1360px;
flex-direction: column;
flex-shrink: 0;
background-color: $fk-panel-bg;
border-width: 1px;
border-color: $fk-border;
border-radius: 16px;
pointer-events: all;
}
// ============================================================================================
// Header
// ============================================================================================
.ts-hdr {
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
padding-top: 20px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
border-bottom-width: 1px;
border-bottom-color: $fk-border;
}
.ts-hdr-left {
flex-direction: row;
align-items: center;
}
.ts-title {
font-size: 16px;
line-height: 22px;
font-weight: 700;
text-transform: uppercase;
color: $fk-text-hi;
margin-right: 12px;
}
.ts-hdr-meta {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
color: $fk-text;
flex-shrink: 0;
}
// A generous target: this is the close affordance, and a small one is a fight.
.ts-x {
font-size: 16px;
line-height: 22px;
width: 42px;
flex-basis: 42px;
height: 42px;
flex-shrink: 0;
align-items: center;
justify-content: center;
margin-top: -8px;
margin-right: -12px;
margin-bottom: -8px;
border-radius: 6px;
font-weight: 700;
color: $fk-text-hi;
cursor: pointer;
pointer-events: all;
transition: all 0.1s ease;
&:hover {
background-color: $fk-hover;
}
}
// ============================================================================================
// The three columns
// ============================================================================================
.ts-cols {
flex-direction: row;
flex-shrink: 0;
height: $ts-body-h;
flex-basis: $ts-body-h;
}
// ---- left: the merged catalog ----
.ts-left {
width: 300px;
flex-basis: 300px;
height: $ts-body-h;
flex-shrink: 0;
flex-direction: column;
padding: 16px;
border-right-width: 1px;
border-right-color: $fk-border;
}
.ts-list-hdr {
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
padding-bottom: 8px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-color: $fk-border;
}
.ts-list-t {
font-size: 13px;
line-height: 20px;
font-weight: 600;
color: $fk-text-hi;
flex-shrink: 0;
}
.ts-list-m {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
color: $fk-text;
flex-shrink: 0;
}
.ts-list {
// The mockup's 472 less the 20 the taller lines cost the header and the button under it, so the
// column still ends 16 above the modal's bottom edge (32 padding + 49 header + 452 + 10 + 50).
height: 452px;
flex-basis: 452px;
flex-shrink: 0;
flex-direction: column;
overflow-y: scroll;
margin-bottom: 10px;
pointer-events: all;
}
.ts-row {
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
background-color: $fk-row;
border-radius: 6px;
padding: 7px 10px;
margin-bottom: 4px;
cursor: pointer;
pointer-events: all;
transition: all 0.1s ease;
&:hover {
background-color: $fk-hover;
}
// flex-shrink 0 is load bearing. A text node squeezed narrower than its own run does not ellipsis
// or wrap here, it rasterizes as a solid filled block, which is exactly what a long id next to a
// state chip did. Better to overflow the row than to blank the id out.
.ts-row-id {
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
flex-shrink: 0;
color: $fk-text;
margin-right: 10px;
}
.ts-row-meta {
flex-direction: row;
align-items: center;
flex-shrink: 0;
}
.ts-row-src {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
flex-shrink: 0;
color: $fk-text;
}
.ts-row-state {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
flex-shrink: 0;
font-weight: 700;
color: $fk-accent-ink;
background-color: $fk-accent;
border-radius: 5px;
padding: 0px 6px;
}
// The row being edited: accent fill, ink text, exactly as the draft row reads in the mockup. The
// children name their own colour, so the override has to name them too.
&.on {
background-color: $fk-accent;
.ts-row-id {
color: $fk-accent-ink;
}
.ts-row-src {
color: $fk-accent-ink;
}
.ts-row-state {
color: $fk-accent-ink;
background-color: rgba( 26, 22, 10, 0.18 );
}
&:hover {
background-color: $fk-accent-hover;
}
}
}
.ts-left-btns {
flex-direction: row;
flex-shrink: 0;
}
// ---- middle: the draft editor ----
// flex-grow 1 over a ZERO basis, so the column is exactly the width the other two leave behind
// rather than the width its widest row would like to be.
.ts-mid {
flex-grow: 1;
flex-basis: 0px;
height: $ts-body-h;
flex-direction: column;
padding: 16px 24px;
overflow-y: scroll;
pointer-events: all;
}
// ---- right: preview and bake ----
.ts-rail {
width: 460px;
flex-basis: 460px;
height: $ts-body-h;
flex-shrink: 0;
flex-direction: column;
padding: 16px 20px;
border-left-width: 1px;
border-left-color: $fk-border;
}
// ============================================================================================
// Fields
// ============================================================================================
// A row of fields side by side.
.ts-frow {
flex-direction: row;
flex-shrink: 0;
margin-bottom: 14px;
}
.ts-field {
flex-direction: column;
margin-right: 12px;
// 200, where the mockup draws 280 for the Id and for a trigger's Input action. 280 does not fit
// either row and the type scale did not change that: the middle column is 548 wide, and the Id row
// spends 12 + 150 on Priority, which would leave the Prerequisites field 98 for a value that runs
// to 118 at 14px mono ("handbrake-turn") plus 50 of padding and chevron, and a run that overflows
// its box rasterizes as a solid block. The trigger rows are worse: they compose up to three fields
// (param, a 150 stepper, and Max show seconds, whose own stepper will not shrink below 148), which
// needs 602 of a 548 box at 280 and fits with room at 200. Measure the widest composition before
// widening this.
&.w200 { width: 200px; flex-basis: 200px; flex-shrink: 0; }
// 150px is the mockup's Priority column, and it is also the narrowest this box can honestly be:
// the stepper inside it is 28 + 6 + 80 + 6 + 28, and none of those five children shrink, so a
// 130px declaration was a box lying about its own content and stealing the difference from the
// field beside it.
&.w150 { width: 150px; flex-basis: 150px; flex-shrink: 0; }
&.w120 { width: 120px; flex-basis: 120px; flex-shrink: 0; }
&.grow { flex-grow: 1; flex-basis: 0px; }
&.last { margin-right: 0px; }
}
.ts-lab {
font-size: 13px;
line-height: 20px;
color: $fk-text-hi;
margin-bottom: 6px;
flex-shrink: 0;
}
// Label on the left, a short semantic note on the right.
.ts-lab-row {
flex-shrink: 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
.ts-lab {
margin-bottom: 0px;
}
.ts-cap {
font-size: 12px;
line-height: 16px;
margin-top: 0px;
}
}
// A section's title beside its one-line blurb.
.ts-sec-hd {
flex-shrink: 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.ts-sec-t {
font-size: 12px;
line-height: 16px;
margin-bottom: 0px;
}
}
.ts-cap {
flex-shrink: 0;
font-family: "Roboto Mono", monospace;
color: $fk-text;
margin-top: 6px;
// Sitting in a row rather than under a control.
&.flat {
margin-top: 0px;
}
// The line under the preview well, one block-gap below the last card, as the mockup draws it.
&.well {
margin-top: 14px;
}
}
// A text box. Its height is pinned so it lines up with the steppers and dropdowns beside it.
.ts-in {
flex-shrink: 0;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
height: $ts-ctrl-h;
color: $fk-text;
background-color: $fk-row;
border-width: 1px;
border-color: rgba( 255, 255, 255, 0.10 );
border-radius: 6px;
padding: 0px 12px;
pointer-events: all;
&:focus {
border-color: $fk-accent-edge;
}
}
// ---- stepper: minus, value, plus ----
.ts-step {
flex-direction: row;
align-items: center;
flex-shrink: 0;
}
.ts-stp {
width: 28px;
flex-basis: 28px;
height: $ts-ctrl-h;
flex-shrink: 0;
align-items: center;
justify-content: center;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
color: $fk-text-hi;
background-color: $fk-row-2;
border-width: 1px;
border-color: rgba( 255, 255, 255, 0.10 );
border-radius: 6px;
cursor: pointer;
pointer-events: all;
transition: all 0.1s ease;
&:hover {
color: $fk-accent-ink;
background-color: $fk-accent;
}
}
.ts-val {
flex-grow: 1;
height: $ts-ctrl-h;
align-items: center;
justify-content: center;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
color: $fk-text;
background-color: $fk-row;
border-width: 1px;
border-color: rgba( 255, 255, 255, 0.10 );
border-radius: 6px;
margin-left: 6px;
margin-right: 6px;
&.w80 {
width: 80px;
flex-basis: 80px;
flex-grow: 0;
flex-shrink: 0;
}
}
// ============================================================================================
// Dropdown. The engine has no native select, so this is a field that opens a flat option list
// underneath it, in flow: an absolutely positioned popup would need a z-order this style engine
// does not give siblings.
// ============================================================================================
.ts-drop {
flex-direction: column;
flex-shrink: 0;
}
.ts-drop-face {
flex-shrink: 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: $ts-ctrl-h;
background-color: $fk-row;
border-width: 1px;
border-color: rgba( 255, 255, 255, 0.10 );
border-radius: 6px;
padding: 0px 12px;
cursor: pointer;
pointer-events: all;
transition: all 0.1s ease;
&:hover {
border-color: $fk-accent-edge;
}
// Open: an accent hairline says which field the list below belongs to.
&.open {
background-color: $fk-row-2;
border-color: $fk-accent-edge;
}
}
.ts-drop-val {
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
flex-shrink: 0;
color: $fk-text;
}
// The chevron. The mockup's ▾ is a Geometric Shapes glyph, which none of the shipped fonts cover, so
// it would render as tofu. This is the same mark the engine's own DropDown draws: the Material Icons
// ligature `expand_more`, which ships in addons/base/Assets/fonts and is what Add.Icon() uses.
.ts-chev {
flex-shrink: 0;
font-family: "Material Icons";
font-size: 16px;
line-height: 22px;
color: $fk-text-hi;
margin-left: 8px;
}
// A long option list gets a FIXED height and scrolls. max-height is the shape that compresses
// unpredictably here, so the markup adds `tall` once there are more options than fit.
.ts-drop-list {
flex-direction: column;
background-color: $fk-panel-bg;
border-width: 1px;
border-color: $fk-border-hi;
border-radius: 6px;
padding: 4px;
margin-top: 4px;
pointer-events: all;
&.tall {
height: 232px;
flex-basis: 232px;
flex-shrink: 0;
overflow-y: scroll;
}
}
.ts-drop-opt {
flex-shrink: 0;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
color: $fk-text;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
pointer-events: all;
transition: all 0.1s ease;
&:hover {
background-color: $fk-hover;
}
&.on {
color: $fk-accent-ink;
background-color: $fk-accent;
&:hover {
background-color: $fk-accent-hover;
}
}
}
// ============================================================================================
// Sections, chips, warnings
// ============================================================================================
.ts-sec {
flex-direction: column;
flex-shrink: 0;
border-top-width: 1px;
border-top-color: $fk-border;
padding-top: 12px;
margin-bottom: 14px;
}
.ts-sec-t {
font-family: "Roboto Mono", monospace;
font-weight: 700;
text-transform: uppercase;
color: $fk-accent;
margin-bottom: 8px;
}
// flex-shrink 0 is not optional on a child of a scrolling column. Without it the row is the one
// thing in the middle column that can be squeezed, and a squeezed wrap row collapses to no height
// and paints its chips over the block below (the prerequisite chip landed on top of the Text
// label). Every other block in this column already declares it.
.ts-chips {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
flex-shrink: 0;
margin-bottom: 2px;
// Standing on its own under a field rather than inside a section.
&.block {
margin-bottom: 12px;
}
}
.ts-chip {
flex-shrink: 0;
font-weight: 500;
color: $fk-text-hi;
background-color: $fk-row;
border-radius: 6px;
padding: 4px 12px;
margin-right: 6px;
margin-bottom: 6px;
cursor: pointer;
pointer-events: all;
transition: all 0.1s ease;
&:hover {
background-color: $fk-hover;
}
&.on {
font-weight: 600;
color: $fk-accent-ink;
background-color: $fk-accent;
&:hover {
background-color: $fk-accent-hover;
}
}
&.mono {
font-family: "Roboto Mono", monospace;
font-size: 13px;
line-height: 20px;
}
&.drop {
color: $fk-danger;
}
}
// A composed child trigger, indented behind an accent edge.
.ts-child .ts-frow {
margin-bottom: 0px;
}
.ts-child {
flex-direction: column;
flex-shrink: 0;
background-color: $fk-row;
border-radius: 6px;
border-left-width: 3px;
border-left-color: $fk-accent;
padding: 10px 12px;
margin-bottom: 8px;
}
.ts-warn {
flex-direction: row;
align-items: flex-start;
flex-shrink: 0;
background-color: $fk-danger-bg;
border-width: 1px;
border-color: $fk-danger-edge;
border-radius: 6px;
padding: 9px 12px;
margin-bottom: 8px;
.ts-warn-b {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
font-weight: 700;
color: $fk-danger;
margin-right: 10px;
}
.ts-warn-t {
flex-direction: column;
flex-grow: 1;
}
.ts-warn-l {
font-size: 13px;
line-height: 20px;
flex-shrink: 0;
color: $fk-text;
}
}
// The empty state: a bright line and a short instruction inside a hairline well.
.ts-empty {
flex-direction: column;
align-items: center;
flex-shrink: 0;
border-width: 1px;
border-color: $fk-border;
border-radius: 10px;
padding: 24px 16px;
.ts-empty-t {
font-size: 13px;
line-height: 20px;
flex-shrink: 0;
font-weight: 600;
color: $fk-text-hi;
margin-bottom: 6px;
}
.ts-empty-l {
font-size: 13px;
line-height: 20px;
flex-shrink: 0;
color: $fk-text;
}
}
// ============================================================================================
// Buttons
// ============================================================================================
.ts-btn-row {
flex-direction: row;
align-items: center;
flex-shrink: 0;
&.pad {
margin-top: 8px;
}
}
.ts-btn {
font-size: 13px;
line-height: 20px;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 600;
color: $fk-text-hi;
background-color: $fk-row-2;
border-width: 1px;
border-color: rgba( 255, 255, 255, 0.10 );
border-radius: 10px;
padding: 9px 18px;
cursor: pointer;
pointer-events: all;
transition: all 0.1s ease;
&:hover {
background-color: $fk-hover;
}
// Primary: accent fill, ink text. No hairline, the fill is the edge.
&.pri {
color: $fk-accent-ink;
background-color: $fk-accent;
border-width: 0px;
border-color: $fk-accent;
&:hover {
background-color: $fk-accent-hover;
}
}
&.grow {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0px;
padding-left: 0px;
padding-right: 0px;
}
&.small {
padding: 6px 14px;
}
&.gap {
margin-right: 8px;
}
}
// ============================================================================================
// The right rail: live preview and bake-out
// ============================================================================================
.ts-rail-hdr {
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
margin-bottom: 12px;
}
.ts-kicker {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
color: $fk-accent;
}
// Everything between the pinned header and the pinned bake block. A FIXED height that scrolls, so a
// long tip grows the preview cards without ever pushing the bake buttons off the bottom of the card.
//
// The height is what the rail has left over, and it has to be kept in step by hand, at the line
// heights this engine actually draws (see the note at the top of the file): 593 body, less 32
// padding, less 56 for the header row and its margin, less 50 for the device picker row, less 159
// for the bake block (12 margin, 1 rule, 12 padding, a 50 button row, a 32 caption line, and an
// 8 plus 44 second button row). Under-count it and the bake block hangs below the modal.
.ts-rail-body {
height: 296px;
flex-basis: 296px;
flex-shrink: 0;
flex-direction: column;
overflow-y: scroll;
pointer-events: all;
}
.ts-well {
flex-direction: column;
flex-shrink: 0;
background-color: $fk-well;
border-width: 1px;
border-color: $fk-border-soft;
border-radius: 10px;
padding: 16px;
margin-bottom: 12px;
}
.ts-pv {
flex-direction: column;
flex-shrink: 0;
// The mockup stacks the two preview blocks 14px apart inside the well.
margin-bottom: 14px;
&.last {
margin-bottom: 0px;
}
}
.ts-pv-lab {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
color: $fk-text;
margin-bottom: 6px;
flex-shrink: 0;
}
// A row of small pickers under the preview: which device the real lower-left card reads as.
.ts-pv-row {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
flex-shrink: 0;
margin-bottom: 6px;
}
.ts-pv-key {
font-size: 13px;
line-height: 20px;
color: $fk-text-hi;
margin-right: 8px;
margin-bottom: 6px;
}
.ts-out {
flex-direction: column;
flex-shrink: 0;
border-top-width: 1px;
border-top-color: $fk-border;
padding-top: 12px;
margin-top: 12px;
}
.ts-out-line {
flex-shrink: 0;
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
color: $fk-text;
margin-top: 8px;
&.inline {
margin-top: 0px;
margin-left: 10px;
}
}
// ============================================================================================
// The toast preview cards. Same component as the shipped card (TipsDisplay), restated here because
// a stylesheet does not reach into another panel's tree; keep the two in sync when retinting.
// ============================================================================================
.tsp-card {
flex-direction: row;
align-items: stretch;
flex-shrink: 0;
background-color: $fk-toast-bg;
border-width: 1px;
border-color: $fk-border;
border-radius: 10px;
overflow: hidden;
}
// Square bar, rounded at its ends by the card's `overflow: hidden` above, exactly as the mockup
// builds it. A radius of its own is what put a notch in the corner: a radius scales down to fit its
// own box, so 9px on a 3px-wide bar comes out as a 3px curve, and that curve inside the card's 10px
// one reads as a step. Keep this in step with TipsDisplay's .stripe.
.tsp-stripe {
width: 3px;
flex-basis: 3px;
flex-shrink: 0;
background-color: $fk-accent;
}
.tsp-in {
flex-grow: 1;
flex-direction: row;
align-items: flex-start;
padding: 12px 12px 12px 14px;
}
.tsp-glyph {
font-size: 14px;
line-height: 18px;
flex-shrink: 0;
color: $fk-text;
margin-right: 8px;
}
.tsp-body {
flex-grow: 1;
flex-direction: column;
flex-shrink: 0;
}
.tsp-kicker {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
color: $fk-text-hi;
margin-bottom: 3px;
flex-shrink: 0;
}
.tsp-text {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
font-size: 13px;
font-weight: 500;
color: $fk-text;
// 13/20, the scale's body metric, carried by every child of the row so a wrapped second line
// clears the key chips on the line above by the same rhythm the mockup draws.
line-height: 20px;
span {
font-size: 13px;
line-height: 20px;
color: $fk-text;
// The mockup spaces every child of this row by 3px. A wrapping row cannot use gap, so each
// child carries the same right margin instead: a run against a chip gets the same air as a
// chip against a run, and the pad pill stops touching the word after it.
margin-right: 3px;
}
// A chip never splits across a wrapped line: flex + nowrap + no-shrink keeps it atomic.
.tsp-key {
display: flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $fk-key-glyph;
background-color: $fk-row;
border-width: 1px;
border-color: $fk-border-hi;
border-radius: 5px;
padding-left: 7px;
padding-right: 7px;
margin-left: 0px;
margin-right: 3px;
}
// The pad chip is the same atom rounded into a pill and tinted cooler, so a controller prompt
// reads apart from a keycap at a glance.
.tsp-pad {
display: flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $fk-key-glyph;
background-color: $fk-pad-bg;
border-width: 1px;
border-color: $fk-pad-edge;
border-radius: 99px;
padding-left: 10px;
padding-right: 10px;
margin-left: 0px;
margin-right: 3px;
}
}
.tsp-x {
font-size: 16px;
line-height: 22px;
width: 42px;
flex-basis: 42px;
height: 42px;
flex-shrink: 0;
align-items: center;
justify-content: center;
margin-top: -8px;
margin-right: -8px;
margin-bottom: -8px;
border-radius: 6px;
color: $fk-text-hi;
}
.Main {
width: 100%;
height: 100%;
pointer-events: all;
position: absolute;
justify-content: center;
align-items: center;
background-color: black;
}
SbetweenTest {
position: absolute;
bottom: 20px;
left: 20px;
top: auto;
right: auto;
width: 300px;
height: 100px;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.5);
.title {
font-size: 25px;
font-family: Poppins;
color: #fff;
}
}
SplashScreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// Default black background
background-color: black;
// Background image settings
background-size: cover;
background-position: center;
// Center the content wrapper
display: flex;
justify-content: center;
align-items: center;
// Smooth transition for opacity (2 seconds)
transition: opacity 2s ease-in-out;
opacity: 0; // Invisible by default
&.fade-in {
opacity: 1; // Fades in on start
}
&.fade-out {
opacity: 0; // Fades out when IsFadingOut is true
}
.content {
display: flex;
flex-direction: column; // Stack logo and text vertically
justify-content: center;
align-items: center;
gap: 30px; // Space between the logo and the text block
}
.logo {
// Logo size settings
width: 600px;
height: auto;
object-fit: contain;
}
.text-container {
display: flex;
flex-direction: column; // Stack text lines vertically
align-items: center;
// Common text styling (applies to all lines)
font-family: Poppins, sans-serif;
font-weight: 800;
text-align: center;
letter-spacing: 5px;
// Text shadow for better readability over images
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
label {
margin: 0;
padding: 5px 0; // Small space between individual text lines
}
}
}// ============================================================================================
// THEME TOKENS. This is the whole override surface for the toast's look.
//
// A consumer that vendors this kit themes the panel by editing the values in THIS block and
// nothing else, every rule below reads these variables, so a game (World Builder, say) drops in
// its own palette here without hunting through the stylesheet. They are plain SCSS variables held
// in this one file on purpose: s&box compiles SCSS per file at runtime, and an `@import` of a
// game-side `_theme.scss` was deliberately avoided so the kit renders correctly wherever it is
// vendored. Keep tip text BRIGHT (never dim gray) so it stays legible over any HUD.
//
// The values are the approved Field Kits toast (docs/design/ui-system): a 3px accent stripe, a
// mono kicker, a wrap row of short prose runs and atomic key chips, and a 42px close x.
// ============================================================================================
$fg-tips-panel-bg: rgba( 15, 17, 21, 0.92 ); // card background
$fg-tips-border: rgba( 255, 255, 255, 0.08 );// card hairline
$fg-tips-radius: 10px; // card corner radius
$fg-tips-accent: #e3c85e; // left accent stripe
$fg-tips-accent-hover: #edd478; // the kit's hover accent, for a retint
$fg-tips-accent-ink: #1a160a; // text that sits ON the accent
$fg-tips-glyph: #e8eaed; // the leading emoji glyph
$fg-tips-kicker: #f2f4f7; // the "GUIDE" label
$fg-tips-text: #e8eaed; // the tip body text
// Keyboard keycap chip (square, monospace): *W* markup.
$fg-tips-key-bg: rgba( 255, 255, 255, 0.05 );
$fg-tips-key-border: rgba( 255, 255, 255, 0.12 );
$fg-tips-key-text: #ffffff;
$fg-tips-key-radius: 5px;
// Gamepad button chip (pill, controller-feel): `A` backtick markup.
$fg-tips-pad-bg: rgba( 60, 70, 90, 0.60 );
$fg-tips-pad-border: rgba( 150, 190, 240, 0.65 );
$fg-tips-pad-text: #ffffff;
$fg-tips-pad-radius: 99px;
$fg-tips-close: #f2f4f7; // the × affordance at rest
$fg-tips-close-hover-bg: rgba( 255, 255, 255, 0.10 );
// FONTS ARE DECLARED INLINE, never through a variable, and the UI family is the BARE name. The engine
// auto-registers fonts by family name and resolves them itself; the working precedent everywhere in the
// kits is `font-family: Poppins, sans-serif;` and `font-family: "Roboto Mono", monospace;`. A quoted
// "Poppins" behind a "Segoe UI" fallback did not resolve, and every element that should have been
// Poppins fell back to the engine default, which reads as mono. Owner caught it on a real screen; a
// capture cannot show it (font FACE resolution is not screenshot-verifiable).
// ============================================================================================
// TYPE. This sheet ships the Field Kits type scale: 12 / 13 / 14 / 16 with exact px line heights
// (12/16, 13/20, 14/18, 16/22), the same four sizes and the same pairings the Sound Mixer,
// Placement and Day/Night kits ship. Four distinct sizes, inside the engine's per-assembly budget.
// No letter-spacing anywhere, that one really does corrupt glyphs.
//
// AN EARLIER NOTE HERE CLAIMED font-size RENDERS TEXT AS SOLID BLOCKS, AND STRIPPED EVERY SIZE
// OUT OF THIS SHEET. That claim was wrong and it is retracted. It was read off MCP camera
// captures: the capture path rasterizes sized text as filled grey blocks, so a screenshot of any
// panel that declares font-size looks corrupted. On the physical screen those same panels render
// pin sharp, owner-verified on engine 26.07.22 (2026-07-31) against the Sound Mixer panels, which
// declare all four sizes.
//
// So a capture cannot verify TEXT. Geometry is judgeable in a capture (boxes, spacing, corners,
// fills); glyphs are not, and the check for text is the owner's eye on a real screen. Never
// delete a font-size on screenshot evidence again.
//
// LAYOUT. Structural rules below; colours all come from the tokens above. s&box compiles SCSS in
// the editor/runtime, not in the headless dotnet build, so style errors are invisible to a build.
// Never use `border-style` or the `border:` shorthand: a parse error there aborts the whole
// stylesheet and collapses the panel to 0x0. No box-shadow.
// ============================================================================================
.tips-root {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
.tip {
position: absolute;
// Anchored to the left edge and lifted clear of a vitals stack (bottom-left) and an action bar
// (bottom-centre), well away from a minimap (bottom-right). Move it wherever suits your HUD.
left: 24px;
bottom: 220px;
width: 500px;
// The card grows to fit its tip. This was a hard 96px, which holds the kicker and about one and a
// half lines, so a tip that wrapped lost the bottom of its last line: border-radius makes the
// style engine clip children to the rounded box, so the overflow was sliced rather than spilled.
// The demo's "Stand in the ring and press Space to switch the marker on." is the reported case.
//
// An older note here recorded the style engine UNDER-measuring the auto height of this shape (an
// absolutely-positioned, transform-animated flex column), painting the chrome but dropping the
// content. Re-verified on engine 26.07.22 (2026-07-31) across one and two line tips, repeated
// forced re-renders, a code hotload and a fresh play session: the measurement is correct now.
// min-height keeps a floor under it anyway, so a regression costs a slightly tall card rather
// than an empty one.
height: auto;
min-height: 64px;
// A ROW now: the accent stripe, then the content. align-items stretch is what gives the stripe
// the full height of a card whose height is its content's.
flex-direction: row;
align-items: stretch;
pointer-events: all;
background-color: $fg-tips-panel-bg;
border-width: 1px;
border-color: $fg-tips-border;
border-radius: $fg-tips-radius;
// The card clips its own children, which is what rounds the ends of the accent stripe. Verified
// at 8x on a live capture: without it the square stripe pokes out past the card's corner curve.
// The card's height is its content's, so there is nothing else here for the clip to cut.
overflow: hidden;
// Gentle single-play rise: BuildHash only changes on tip/visibility, so this replays once per
// new tip, not every frame.
animation: tipRise 0.18s ease-out both;
}
// The accent stripe, built exactly as the mockup builds it: a square 3px bar, and the card's
// `overflow: hidden` above rounds its ends against the card's own corner. It carried its own 9px
// left radius before, and that is what the owner saw as a notch: a radius is scaled down until it
// fits its own box, so 9px on a 3px-wide bar comes out as a 3px curve, and that small curve inside
// the card's 10px one reads as a step at the top-left and bottom-left. One curve, not two.
.stripe {
width: 3px;
flex-basis: 3px;
flex-shrink: 0;
background-color: $fg-tips-accent;
}
// The content beside the stripe. A little extra left padding so the text clears the stripe by the
// same amount it clears the other three edges.
.row {
flex-grow: 1;
flex-direction: row;
align-items: flex-start;
padding: 12px 12px 12px 14px;
gap: 10px;
}
.glyph {
font-family: Poppins, sans-serif;
font-size: 14px;
line-height: 18px;
color: $fg-tips-glyph;
flex-shrink: 0;
}
.body {
flex-direction: column;
flex-grow: 1;
}
.kicker {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase; // hierarchy via weight + case; letter-spacing corrupts glyphs
color: $fg-tips-kicker;
margin-bottom: 3px;
}
.text {
font-family: Poppins, sans-serif;
font-size: 13px;
font-weight: 500;
// 13/20, the scale's body metric. Every child of this wrapping row carries it too, so a tip
// that wraps onto a second line clears the key chips on the line above by the same 20px
// rhythm the mockup draws. (The old unitless 1.25 was a workaround for having no sizes.)
line-height: 20px;
// Bright body text, the tip line must always read clearly.
color: $fg-tips-text;
// The row-of-spans layout (plain runs + key chips) needs to wrap BETWEEN spans when the line
// runs out of room (the standard s&box wrap-row recipe), without this the row stays a single
// nowrap line and the engine falls back to breaking mid-word/mid-chip. A wrapping row spaces
// its children with margins; gap under-measures here.
flex-direction: row;
flex-wrap: wrap;
align-items: center;
span {
font-size: 13px;
line-height: 20px;
color: $fg-tips-text;
// The mockup spaces every child of this row by 3px. A wrapping row cannot use gap, so each
// child carries the same right margin instead: a run against a chip gets the same air as a
// chip against a run, and the pad pill stops touching the word after it.
margin-right: 3px;
}
// Keycap: a small bright pill so key names read at a glance. flex + nowrap + no-shrink keep the
// whole label, e.g. "RMB", one atomic, never-splitting chip even on a wrapped line. (s&box
// panel CSS has no inline-flex; plain flex on a wrap-row parent behaves inline here.)
.key {
display: flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $fg-tips-key-text;
background-color: $fg-tips-key-bg;
border-width: 1px;
border-color: $fg-tips-key-border;
border-radius: $fg-tips-key-radius;
padding-left: 7px;
padding-right: 7px;
margin-left: 0px;
margin-right: 3px;
}
// Gamepad button: the same atomic chip, rounded into a pill and tinted a cooler shade so a `A`
// prompt is instantly distinct from a *W* keycap. Authors write gamepad button names in
// backticks (see TipSegment). Same wrap-row / no-shrink rules as the keycap.
.pad {
display: flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $fg-tips-pad-text;
background-color: $fg-tips-pad-bg;
border-width: 1px;
border-color: $fg-tips-pad-border;
border-radius: $fg-tips-pad-radius;
padding-left: 10px;
padding-right: 10px;
margin-left: 0px;
margin-right: 3px;
}
}
// Optional "hide tips" advertise chip, beside the close affordance. Only rendered when the game set a
// device-matching label (HideKeyLabel / HidePadLabel). It reuses the same chip language as the inline
// key/pad runs so the label reads as a real button, plus the word itself in the kicker's voice.
.hint {
flex-direction: row;
align-items: center;
flex-shrink: 0;
gap: 4px;
padding: 2px 6px;
border-radius: 5px;
pointer-events: all;
transition: all 0.1s ease;
&:hover {
background-color: $fg-tips-close-hover-bg;
}
.hint-label {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase; // hierarchy via weight + case; letter-spacing corrupts glyphs
color: $fg-tips-kicker;
}
// Same keycap / pad-chip look as the inline runs (the .text scope's chips don't reach here, so the
// visual is restated from the shared tokens; keep the two in sync when retheming).
.key {
display: flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $fg-tips-key-text;
background-color: $fg-tips-key-bg;
border-width: 1px;
border-color: $fg-tips-key-border;
border-radius: $fg-tips-key-radius;
padding-left: 7px;
padding-right: 7px;
}
.pad {
display: flex;
align-items: center;
flex-shrink: 0;
white-space: nowrap;
font-family: "Roboto Mono", monospace;
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $fg-tips-pad-text;
background-color: $fg-tips-pad-bg;
border-width: 1px;
border-color: $fg-tips-pad-border;
border-radius: $fg-tips-pad-radius;
padding-left: 10px;
padding-right: 10px;
}
}
// A generous target: this is the close affordance, and a small one is a fight. The negative margins
// pull the 42px hit box back into the card's corner so the glyph still sits where the mockup puts it.
.close {
width: 42px;
flex-basis: 42px;
height: 42px;
flex-shrink: 0;
align-items: center;
justify-content: center;
margin-top: -8px;
margin-right: -8px;
margin-bottom: -8px;
border-radius: 6px;
font-family: Poppins, sans-serif;
font-size: 16px;
line-height: 22px;
color: $fg-tips-close;
pointer-events: all;
transition: all 0.1s ease;
&:hover {
background-color: $fg-tips-close-hover-bg;
}
}
}
@keyframes tipRise {
0% { opacity: 0; transform: translateY( 8px ); }
100% { opacity: 1; transform: translateY( 0px ); }
}