From d62360567b6bb9e4e499e57679a653c6e011bf45 Mon Sep 17 00:00:00 2001 From: Luke Street Date: Wed, 9 Sep 2026 22:14:46 -0600 Subject: [PATCH] Use theme variables across remaining RmlUi styles --- res/rml/command_console.rcss | 34 ++++++++++++++--------------- res/rml/mod_browser.rcss | 10 ++++----- res/rml/mods.rcss | 4 ++-- res/rml/overlay.rcss | 11 +--------- res/rml/popover.rcss | 18 +++++++-------- res/rml/prelaunch.rcss | 6 +++-- res/rml/theme.rcss | 5 +++++ res/rml/touch_controls.rcss | 35 ++++++++++++++++-------------- res/rml/touch_controls_editor.rcss | 6 +++-- res/rml/window.rcss | 24 ++++++++++---------- src/dusk/ui/command_console.cpp | 1 + 11 files changed, 78 insertions(+), 76 deletions(-) diff --git a/res/rml/command_console.rcss b/res/rml/command_console.rcss index b5378b5d7a..d19246692a 100644 --- a/res/rml/command_console.rcss +++ b/res/rml/command_console.rcss @@ -1,8 +1,6 @@ -*, *:before, *:after { - box-sizing: border-box; -} - body { + --console-command-color: #FFD966; + display: block; width: 100%; height: 100%; @@ -19,11 +17,11 @@ console { width: 50%; display: flex; flex-direction: column; - background-color: rgba(0, 0, 0, 60%); + background-color: rgba(var(--color-black-rgb), 60%); pointer-events: auto; - font-family: "Noto Mono"; - font-size: 14dp; - color: #FFFFFF; + font-family: var(--font-family-monospace); + font-size: var(--font-size-sm); + color: var(--color-white); transition: background-color 0.8s linear-in-out; } @@ -31,7 +29,7 @@ output { display: block; overflow: hidden; max-height: 480dp; - padding: 4dp 8dp; + padding: var(--space-xs) var(--space-sm); line-height: 1.4em; } @@ -46,11 +44,11 @@ console:not([open]) { } console:not([open])[fading] { - background-color: rgba(0, 0, 0, 0%); + background-color: rgba(var(--color-black-rgb), 0%); } console[open] { - background-color: rgba(0, 0, 0, 60%); + background-color: rgba(var(--color-black-rgb), 60%); transition: none; } @@ -75,19 +73,19 @@ output[open] line { } line.cmd { - color: #FFD966; + color: var(--console-command-color); } console input { display: none; width: 100%; - background-color: rgba(0, 0, 0, 40%); + background-color: rgba(var(--color-black-rgb), 40%); border: 0dp; - border-top: 1dp rgba(255, 255, 255, 20%); - color: #FFFFFF; - font-family: "Noto Mono"; - font-size: 14dp; - padding: 4dp 8dp; + border-top: 1dp rgba(var(--color-white-rgb), 20%); + color: var(--color-white); + font-family: var(--font-family-monospace); + font-size: var(--font-size-sm); + padding: var(--space-xs) var(--space-sm); } console[open] input { diff --git a/res/rml/mod_browser.rcss b/res/rml/mod_browser.rcss index 5eea680dbf..b66b28701b 100644 --- a/res/rml/mod_browser.rcss +++ b/res/rml/mod_browser.rcss @@ -148,7 +148,7 @@ catalog-official-badge { background-color: rgba(var(--color-accent-rgb), 28%); color: var(--color-info); font-style: normal; - font-size: 9dp; + font-size: var(--font-size-3xs); } catalog-card-body > section > b { @@ -290,7 +290,7 @@ catalog-detail-status h2 { display: block; margin: 0; font-family: var(--font-family-heading); - font-size: 25dp; + font-size: var(--font-size-4xl); font-weight: bold; } @@ -394,7 +394,7 @@ catalog-source-actions button { .catalog-install-action icon { flex: 0 0 22dp; - font-size: 22dp; + font-size: var(--font-size-3xl); line-height: 1; } @@ -621,7 +621,7 @@ catalog-detail-body h3 { display: block; margin: 0 0 10dp 0; font-family: var(--font-family-heading); - font-size: 21dp; + font-size: var(--font-size-2xl); font-weight: bold; } @@ -816,7 +816,7 @@ catalog-screenshot-actions button { catalog-filters h1, catalog-results header h1 { - font-size: 23dp; + font-size: var(--font-size-4xl); } catalog-filters h2 { diff --git a/res/rml/mods.rcss b/res/rml/mods.rcss index 58231d982d..264b166e3a 100644 --- a/res/rml/mods.rcss +++ b/res/rml/mods.rcss @@ -89,7 +89,7 @@ mod-entry { } mod-entry.current { - box-shadow: rgba(146, 135, 91, 40%) 0 0 0 1dp; + box-shadow: rgba(var(--color-border-rgb), 40%) 0 0 0 1dp; } mod-entry:hover, @@ -212,7 +212,7 @@ mod-actions button { font-size: var(--font-size-md); padding: 6dp 14dp; background-color: rgba(var(--color-surface-rgb), 80%); - box-shadow: rgba(146, 135, 91, 60%) 0 0 0 1dp; + box-shadow: rgba(var(--color-border-rgb), 60%) 0 0 0 1dp; } mod-header.no-banner { diff --git a/res/rml/overlay.rcss b/res/rml/overlay.rcss index b89365c0dc..a200005ca1 100644 --- a/res/rml/overlay.rcss +++ b/res/rml/overlay.rcss @@ -56,15 +56,6 @@ toast[open] { transform: scale(1); } -/*toast:hover { - cursor: pointer; - background-color: rgba(61, 59, 36, 80%); -} - -toast:active { - background-color: rgba(45, 43, 26, 80%); -}*/ - b { font-weight: bold; } @@ -376,7 +367,7 @@ logo img { left: 0; width: 100%; height: 100%; - filter: drop-shadow(#0008 0 0 14dp); + filter: drop-shadow(rgba(var(--color-black-rgb), 53.333333%) 0 0 14dp); transform-origin: center; } diff --git a/res/rml/popover.rcss b/res/rml/popover.rcss index d7074b7ac3..789e821564 100644 --- a/res/rml/popover.rcss +++ b/res/rml/popover.rcss @@ -22,7 +22,7 @@ popover { border-color: var(--color-border); background-color: rgba(var(--color-surface-rgb), 96%); backdrop-filter: blur(5dp); - box-shadow: 0 6dp 24dp 2dp rgba(0, 0, 0, 55%); + box-shadow: 0 6dp 24dp 2dp rgba(var(--color-black-rgb), 55%); filter: opacity(0); transform: scale(0.95); transform-origin: center; @@ -47,7 +47,7 @@ color-sv { width: 240dp; height: 150dp; border-radius: var(--radius-panel); - box-shadow: rgba(146, 135, 91, 50%) 0 0 0 1dp; + box-shadow: rgba(var(--color-border-rgb), 50%) 0 0 0 1dp; drag: drag; focus: auto; } @@ -59,7 +59,7 @@ color-alpha { width: 240dp; height: 14dp; border-radius: var(--radius-control); - box-shadow: rgba(146, 135, 91, 50%) 0 0 0 1dp; + box-shadow: rgba(var(--color-border-rgb), 50%) 0 0 0 1dp; drag: drag; focus: auto; } @@ -67,13 +67,13 @@ color-alpha { color-sv:focus-visible, color-hue:focus-visible, color-alpha:focus-visible { - box-shadow: #C2A42D 0 0 0 2dp; + box-shadow: var(--color-accent) 0 0 0 2dp; } color-sv.adjusting, color-hue.adjusting, color-alpha.adjusting { - box-shadow: #FFFFFF 0 0 0 3dp; + box-shadow: var(--color-white) 0 0 0 3dp; } color-hue { @@ -88,7 +88,7 @@ color-cursor { border-radius: var(--radius-control); border-width: 2dp; border-color: var(--color-white); - box-shadow: 0 0 4dp 1dp rgba(0, 0, 0, 70%); + box-shadow: 0 0 4dp 1dp rgba(var(--color-black-rgb), 70%); pointer-events: none; } @@ -127,7 +127,7 @@ color-chip { width: 20dp; height: 20dp; border-radius: 5dp; - box-shadow: rgba(255, 255, 255, 45%) 0 0 0 1dp; + box-shadow: rgba(var(--color-white-rgb), 45%) 0 0 0 1dp; } button.color-swatch-button color-chip { @@ -155,7 +155,7 @@ button { background-color: var(--button-background); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-panel); - box-shadow: rgba(146, 135, 91, 30%) 0 0 0 1dp; + box-shadow: rgba(var(--color-border-rgb), 30%) 0 0 0 1dp; color: var(--button-color); cursor: pointer; focus: auto; @@ -164,7 +164,7 @@ button { button:hover, button:focus-visible { background-color: var(--button-background-hover); - box-shadow: #C2A42D 0 0 0 2dp; + box-shadow: var(--color-accent) 0 0 0 2dp; } button:active { diff --git a/res/rml/prelaunch.rcss b/res/rml/prelaunch.rcss index bebba20a50..8d98577ad5 100644 --- a/res/rml/prelaunch.rcss +++ b/res/rml/prelaunch.rcss @@ -1,6 +1,8 @@ body { --color-prelaunch-accent: #FEE685; --color-prelaunch-muted: #A6A09B; + --color-disc-error: #FFC9C9; + --color-disc-mismatch: #FFD6A7; --color-ready: #D8F999; --menu-button-decorator: horizontal-gradient(rgba(var(--color-black-rgb), 0%) rgba(var(--color-black-rgb), 0%)); --menu-button-decorator-hover: horizontal-gradient(#FEE685FF #FEE68500); @@ -281,7 +283,7 @@ body.mirrored version-info { } #disc-status[status=bad] { - color: #FFC9C9; + color: var(--color-disc-error); } #disc-status[status=verifying] { @@ -289,7 +291,7 @@ body.mirrored version-info { } #disc-status[status=mismatch] { - color: #FFD6A7; + color: var(--color-disc-mismatch); } #disc-status[status=unknown] { diff --git a/res/rml/theme.rcss b/res/rml/theme.rcss index fd01d88522..8d49f32a9c 100644 --- a/res/rml/theme.rcss +++ b/res/rml/theme.rcss @@ -64,6 +64,11 @@ body { --color-error-rgb: 204, 68, 68; --color-error: rgb(var(--color-error-rgb)); + --color-progress-done: #44AA22; + --color-progress-ongoing: #2255BB; + --color-danger-border: #852221; + --color-danger-heading: #B3261E; + --button-color: var(--color-text); --button-background: rgba(var(--color-control-rgb), 20%); --button-background-hover: rgba(var(--color-interactive-rgb), 20%); diff --git a/res/rml/touch_controls.rcss b/res/rml/touch_controls.rcss index 33ad894fa1..85320315bf 100644 --- a/res/rml/touch_controls.rcss +++ b/res/rml/touch_controls.rcss @@ -1,4 +1,14 @@ body { + --color-oil-border: rgba(42, 32, 18, 82%); + --color-oil-background: rgba(18, 14, 10, 70%); + --color-oil-fill: rgb(255, 232, 74); + --color-button-a: rgba(34, 112, 123, 62%); + --color-button-b: rgba(161, 61, 66, 58%); + --color-button-x: rgba(83, 115, 151, 56%); + --color-button-y: rgba(113, 91, 150, 54%); + --color-stick-background: rgba(18, 20, 24, 35%); + --color-stick-knob: rgba(238, 236, 226, 55%); + --button-color: rgba(248, 244, 232, 90%); --button-background: rgba(22, 24, 28, 48%); --button-background-active: rgba(63, 78, 90, 68%); @@ -37,8 +47,6 @@ button { background-color: var(--button-background); color: var(--button-color); text-align: center; - /* backdrop-filter: blur(7dp); */ - /* box-shadow: 0 6dp 18dp rgba(0, 0, 0, 28%); */ transform-origin: center; transition: background-color border-color filter transform 0.08s linear-in-out, opacity 0.2s linear-in-out; @@ -143,8 +151,6 @@ action-bar { border-color: var(--button-border-color); border-radius: 23dp; background-color: var(--button-background); - /* backdrop-filter: blur(7dp); */ - /* box-shadow: 0 -6dp 18dp rgba(0, 0, 0, 28%); */ overflow: hidden; opacity: 1; transform-origin: center; @@ -235,10 +241,9 @@ separator { width: 34dp; height: 8dp; padding: var(--space-2xs); - border: 1dp rgba(42, 32, 18, 82%); + border: 1dp var(--color-oil-border); border-radius: var(--radius-small); - background-color: rgba(18, 14, 10, 70%); - /* box-shadow: 0 2dp 6dp rgba(0, 0, 0, 35%); */ + background-color: var(--color-oil-background); } oil-fill { @@ -246,7 +251,7 @@ oil-fill { width: 0%; height: 100%; border-radius: 2dp; - background-color: rgb(255, 232, 74); + background-color: var(--color-oil-fill); } .face.has-item span { @@ -258,19 +263,19 @@ oil-fill { .face.a { border-radius: 37dp; font-size: 31dp; - background-color: rgba(34, 112, 123, 62%); + background-color: var(--color-button-a); } .face.b { - background-color: rgba(161, 61, 66, 58%); + background-color: var(--color-button-b); } .face.x { - background-color: rgba(83, 115, 151, 56%); + background-color: var(--color-button-x); } .face.y { - background-color: rgba(113, 91, 150, 54%); + background-color: var(--color-button-y); } button.control.docked-top, @@ -307,11 +312,9 @@ touch-stick { width: 124dp; height: 124dp; border-radius: 62dp; - background-color: rgba(18, 20, 24, 35%); + background-color: var(--color-stick-background); border-width: 1dp; border-color: rgba(var(--color-white-rgb), 20%); - /* backdrop-filter: blur(7dp); */ - /* box-shadow: 0 8dp 24dp rgba(0, 0, 0, 24%); */ opacity: 0; pointer-events: none; transition: opacity 0.18s linear-in-out; @@ -337,7 +340,7 @@ stick-knob { width: 48dp; height: 48dp; border-radius: 24dp; - background-color: rgba(238, 236, 226, 55%); + background-color: var(--color-stick-knob); border-width: 1dp; border-color: rgba(var(--color-white-rgb), 45%); } diff --git a/res/rml/touch_controls_editor.rcss b/res/rml/touch_controls_editor.rcss index 6b27118cb6..dbf0ae74e4 100644 --- a/res/rml/touch_controls_editor.rcss +++ b/res/rml/touch_controls_editor.rcss @@ -1,8 +1,10 @@ body.touch-editor { + --color-editor-backdrop: rgba(4, 6, 8, 34%); + --color-editor-handle: rgba(34, 37, 42, 86%); --color-editor-accent-rgb: 255, 232, 128; --color-editor-highlight-rgb: 255, 244, 190; - background-color: rgba(4, 6, 8, 34%); + background-color: var(--color-editor-backdrop); z-index: 8; } @@ -48,7 +50,7 @@ resize-handle { border-width: 2dp; border-color: rgba(var(--color-editor-highlight-rgb), 96%); border-radius: 11dp; - background-color: rgba(34, 37, 42, 86%); + background-color: var(--color-editor-handle); pointer-events: auto; } diff --git a/res/rml/window.rcss b/res/rml/window.rcss index 47ce3f1010..ccabe49238 100644 --- a/res/rml/window.rcss +++ b/res/rml/window.rcss @@ -262,7 +262,7 @@ button { opacity: 0.9; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-window); - box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp; + box-shadow: rgba(var(--color-border-rgb), 25%) 0 0 0 1dp; font-size: var(--font-size-2xl); transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out; cursor: pointer; @@ -272,7 +272,7 @@ button { button:not(:disabled):hover, button:not(:disabled):focus-visible { background-color: var(--button-background-hover); - box-shadow: #C2A42D 0 0 0 2dp; + box-shadow: var(--color-accent) 0 0 0 2dp; } button:not(:disabled):selected { @@ -283,7 +283,7 @@ button:not(:disabled):selected { button:not(:disabled):active { opacity: 1; background-color: var(--button-background-active); - box-shadow: #C2A42D 0 0 0 2dp; + box-shadow: var(--color-accent) 0 0 0 2dp; } button:disabled { @@ -305,7 +305,7 @@ select-button { opacity: 0.9; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-window); - box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp; + box-shadow: rgba(var(--color-border-rgb), 25%) 0 0 0 1dp; transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out; cursor: pointer; focus: auto; @@ -314,7 +314,7 @@ select-button { select-button:not(:disabled):hover, select-button:not(:disabled):focus-visible { background-color: var(--button-background-hover); - box-shadow: #C2A42D 0 0 0 2dp; + box-shadow: var(--color-accent) 0 0 0 2dp; } select-button:not(:disabled):selected { @@ -325,7 +325,7 @@ select-button:not(:disabled):selected { select-button:not(:disabled):active { opacity: 1; background-color: var(--button-background-active); - box-shadow: #C2A42D 0 0 0 2dp; + box-shadow: var(--color-accent) 0 0 0 2dp; } select-button:disabled { @@ -362,7 +362,7 @@ select-button.group-button icon { width: 24dp; height: 24dp; font-size: var(--font-size-4xl); - color: inherit; + color: var(--button-color); decorator: text("" center center); } @@ -382,7 +382,7 @@ select-button.color-input color-swatch { width: 48dp; height: 24dp; border-radius: var(--radius-control); - box-shadow: rgba(255, 255, 255, 45%) 0 0 0 1dp; + box-shadow: rgba(var(--color-white-rgb), 45%) 0 0 0 1dp; } select-button.color-input color-swatch.empty { @@ -508,11 +508,11 @@ progress fill { } progress.progress-done fill { - background-color: #44aa22; + background-color: var(--color-progress-done); } progress.progress-ongoing fill { - background-color: #2255bb; + background-color: var(--color-progress-ongoing); } button.achievement-clear { @@ -559,7 +559,7 @@ modal-dialog { } window.modal.danger { - border: 2dp #852221; + border: 2dp var(--color-danger-border); } modal-header { @@ -589,7 +589,7 @@ modal-title { window.modal.danger modal-title, window.modal.danger modal-header icon { - color: #B3261E; + color: var(--color-danger-heading); } modal-body { diff --git a/src/dusk/ui/command_console.cpp b/src/dusk/ui/command_console.cpp index 302c4c47d0..ae3eb4c1d4 100644 --- a/src/dusk/ui/command_console.cpp +++ b/src/dusk/ui/command_console.cpp @@ -18,6 +18,7 @@ namespace { const Rml::String kDocumentSource = R"RML( +