Search the source of every open source package.
11 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;
}
}
// ── Theme ─────────────────────────────────────────────────────────────────────
// Re-theming the panel is a one-stop edit: override these variables. The palette is
// a dark-green-on-black neon look; nothing below hardcodes a colour outside this block.
$bg: #030d07; // panel background (deep green-black)
$btn: #010603; // buttons / cells — deeper than the panel
$btn-hover: #07190e; // button / cell hover
$border: rgba(47,148,80,0.6); // hover border (muted green)
$filled: #185c2c; // filled ticks / selected volume cells
$accent: #2f9450; // on / ok accent (muted green)
$accent-bg: rgba(47,148,80,0.2); // accent toggle background
$text: rgba(200,236,210,0.9); // primary text (green-tinted)
$text-dim: rgba(180,224,194,0.42); // labels
// ────────────────────────────────────────────────────────────────────────────────
skafinitymusicpanel {
// Fill the ScreenPanel; flex-centre the board. pointer-events:none so a closed panel
// never blocks anything — only the board / button itself take pointer events.
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
justify-content: center; align-items: center;
pointer-events: none;
font-family: Consolas, 'Roboto Mono', monospace;
// Floating toggle button (shown when the board is closed), bottom-left.
.fab {
position: absolute; left: 24px; bottom: 24px;
width: 52px; height: 52px;
justify-content: center; align-items: center;
font-size: 28px; color: $text;
background-color: $btn;
border: 2px solid rgba(255,255,255,0.12); border-radius: 2px;
cursor: pointer; pointer-events: all;
&:hover { background-color: $btn-hover; border-color: $border; }
}
// 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;
background-color: $bg;
border: 1.5px solid rgba(255,255,255,0.12);
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: 2px;
cursor: pointer; pointer-events: all;
&:hover { color: #ffffff; background-color: rgba(255,255,255,0.2); }
}
.divider { height: 2px; background-color: rgba(255,255,255,0.1); 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;
color: $text-dim; 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: rgba(255,255,255,0.07); border-radius: 2px;
}
.num { min-width: 60px; font-weight: bold; }
.tag-input {
width: 360px; height: 32px; padding: 0 12px; font-size: 15px; color: white;
background-color: rgba(255,255,255,0.07);
border: 2px solid rgba(255,255,255,0.15); border-radius: 2px; 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; color: $text;
background-color: $btn;
border: 2px solid transparent; border-radius: 2px; cursor: pointer; pointer-events: all;
&.wide { min-width: 96px; }
&.reroll { height: 28px; padding: 0 12px; font-size: 13px; margin-left: 12px; }
&:hover { background-color: $btn-hover; border: 2px solid $border; }
&.toggle.on { background-color: $accent-bg; border: 2px solid rgba(47,148,80,0.7); color: #cdebd6; }
}
.cell {
justify-content: center; align-items: center; height: 19px;
font-size: 13px; color: rgba(255,255,255,0.8);
background-color: $btn;
border: 2px solid transparent; border-radius: 2px; cursor: pointer; pointer-events: all;
&:hover { background-color: $btn-hover; border: 2px solid $border; }
&.choice { padding: 0 10px; height: 28px; }
&.tick { width: 11px; }
&.tick.filled { background-color: $filled; }
&.filled { background-color: $filled; }
&.selected { border: 2px solid rgba(255,255,255,0.85); }
}
// 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; color: rgba(255,255,255,0.4); white-space: nowrap; }
.hint.ok { color: $accent; }
}
.video-texture {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
// 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;
}
$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); }
}
}
// ── Theme ─────────────────────────────────────────────────────────────────────
// Re-theming the panel is a one-stop edit: override these variables. The palette is
// a dark-green-on-black neon look; nothing below hardcodes a colour outside this block.
$bg: #030d07; // panel background (deep green-black)
$btn: #010603; // buttons / cells — deeper than the panel
$btn-hover: #07190e; // button / cell hover
$border: rgba(47,148,80,0.6); // hover border (muted green)
$filled: #185c2c; // filled ticks / selected volume cells
$accent: #2f9450; // on / ok accent (muted green)
$accent-bg: rgba(47,148,80,0.2); // accent toggle background
$text: rgba(200,236,210,0.9); // primary text (green-tinted)
$text-dim: rgba(180,224,194,0.42); // labels
// ────────────────────────────────────────────────────────────────────────────────
skafinitymusicpanel {
// Fill the ScreenPanel; flex-centre the board. pointer-events:none so a closed panel
// never blocks anything — only the board / button itself take pointer events.
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
justify-content: center; align-items: center;
pointer-events: none;
font-family: Consolas, 'Roboto Mono', monospace;
// Floating toggle button (shown when the board is closed), bottom-left.
.fab {
position: absolute; left: 24px; bottom: 24px;
width: 52px; height: 52px;
justify-content: center; align-items: center;
font-size: 28px; color: $text;
background-color: $btn;
border: 2px solid rgba(255,255,255,0.12); border-radius: 2px;
cursor: pointer; pointer-events: all;
&:hover { background-color: $btn-hover; border-color: $border; }
}
// 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;
background-color: $bg;
border: 1.5px solid rgba(255,255,255,0.12);
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: 2px;
cursor: pointer; pointer-events: all;
&:hover { color: #ffffff; background-color: rgba(255,255,255,0.2); }
}
.divider { height: 2px; background-color: rgba(255,255,255,0.1); 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;
color: $text-dim; 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: rgba(255,255,255,0.07); border-radius: 2px;
}
.num { min-width: 60px; font-weight: bold; }
.tag-input {
width: 360px; height: 32px; padding: 0 12px; font-size: 15px; color: white;
background-color: rgba(255,255,255,0.07);
border: 2px solid rgba(255,255,255,0.15); border-radius: 2px; 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; color: $text;
background-color: $btn;
border: 2px solid transparent; border-radius: 2px; cursor: pointer; pointer-events: all;
&.wide { min-width: 96px; }
&.reroll { height: 28px; padding: 0 12px; font-size: 13px; margin-left: 12px; }
&:hover { background-color: $btn-hover; border: 2px solid $border; }
&.toggle.on { background-color: $accent-bg; border: 2px solid rgba(47,148,80,0.7); color: #cdebd6; }
}
.cell {
justify-content: center; align-items: center; height: 19px;
font-size: 13px; color: rgba(255,255,255,0.8);
background-color: $btn;
border: 2px solid transparent; border-radius: 2px; cursor: pointer; pointer-events: all;
&:hover { background-color: $btn-hover; border: 2px solid $border; }
&.choice { padding: 0 10px; height: 28px; }
&.tick { width: 11px; }
&.tick.filled { background-color: $filled; }
&.filled { background-color: $filled; }
&.selected { border: 2px solid rgba(255,255,255,0.85); }
}
// 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; color: rgba(255,255,255,0.4); white-space: nowrap; }
.hint.ok { color: $accent; }
}
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;
}
}
}
}
.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;
}
}
// ── Theme ─────────────────────────────────────────────────────────────────────
// Re-theming the panel is a one-stop edit: override these variables. The palette is
// rotaliate's dark-purple CRT look; nothing below hardcodes a colour outside this block.
$bg: #07051a; // panel background (rotaliate dark purple)
$btn: #03021a; // buttons / cells — deeper than the panel
$btn-hover: #0a1052; // button / cell hover
$border: rgba(120,150,255,0.6); // hover border
$filled: #2a3aa8; // filled ticks / selected volume cells
$accent: #58e87a; // on / ok accent (green)
$accent-bg: rgba(88,232,122,0.25); // accent toggle background
$text: rgba(255,255,255,0.85); // primary text
$text-dim: rgba(255,255,255,0.45); // labels
// ────────────────────────────────────────────────────────────────────────────────
skafinitymusicpanel {
// Fill the ScreenPanel; flex-centre the board. pointer-events:none so a closed panel
// never blocks anything — only the board / button itself take pointer events.
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
justify-content: center; align-items: center;
pointer-events: none;
font-family: Poppins;
// Floating toggle button (shown when the board is closed), bottom-left.
.fab {
position: absolute; left: 24px; bottom: 24px;
width: 52px; height: 52px;
justify-content: center; align-items: center;
font-size: 28px; color: $text;
background-color: $btn;
border: 2px solid rgba(255,255,255,0.12); border-radius: 26px;
cursor: pointer; pointer-events: all;
&:hover { background-color: $btn-hover; border-color: $border; }
}
// 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;
background-color: $bg;
border: 1.5px solid rgba(255,255,255,0.12);
border-radius: 16px;
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: 8px;
cursor: pointer; pointer-events: all;
&:hover { color: #ffffff; background-color: rgba(255,255,255,0.2); }
}
.divider { height: 2px; background-color: rgba(255,255,255,0.1); 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;
color: $text-dim; 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: rgba(255,255,255,0.07); border-radius: 6px;
}
.num { min-width: 60px; font-weight: bold; }
.tag-input {
width: 360px; height: 32px; padding: 0 12px; font-size: 15px; color: white;
background-color: rgba(255,255,255,0.07);
border: 2px solid rgba(255,255,255,0.15); border-radius: 6px; 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; color: $text;
background-color: $btn;
border: 2px solid transparent; border-radius: 6px; cursor: pointer; pointer-events: all;
&.wide { min-width: 96px; }
&.reroll { height: 28px; padding: 0 12px; font-size: 13px; margin-left: 12px; }
&:hover { background-color: $btn-hover; border: 2px solid $border; }
&.toggle.on { background-color: $accent-bg; border: 2px solid rgba(88,232,122,0.7); color: #d6ffe2; }
}
.cell {
justify-content: center; align-items: center; height: 19px;
font-size: 13px; color: rgba(255,255,255,0.8);
background-color: $btn;
border: 2px solid transparent; border-radius: 5px; cursor: pointer; pointer-events: all;
&:hover { background-color: $btn-hover; border: 2px solid $border; }
&.choice { padding: 0 10px; height: 28px; }
&.tick { width: 11px; }
&.tick.filled { background-color: $filled; }
&.filled { background-color: $filled; }
&.selected { border: 2px solid rgba(255,255,255,0.85); }
}
// 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; color: rgba(255,255,255,0.4); white-space: nowrap; }
.hint.ok { color: $accent; }
}