diff --git a/res/rcss/window.rcss b/res/rcss/window.rcss new file mode 100644 index 0000000000..1596be869e --- /dev/null +++ b/res/rcss/window.rcss @@ -0,0 +1,142 @@ +*, *:before, *:after { + box-sizing: border-box; +} + +body { + width: 100%; + height: 100%; + padding: 64dp; + font-family: "Fira Sans"; + font-weight: normal; + font-style: normal; + font-size: 15dp; + color: #E0DBC8; +} + +.window { + max-width: 1088dp; + max-height: 768dp; + margin: auto; + border-radius: 14dp; + overflow: hidden; + border: 2dp #92875B; + backdrop-filter: blur(5dp); + box-shadow: 0 0 25dp 5dp; + background-color: rgba(21, 22, 16, 90%); +} + +.window .tab-bar { + display: flex; + height: 64dp; + background-color: rgba(217, 217, 217, 10%); + font-family: "Fira Sans Condensed"; + font-weight: bold; + font-size: 18dp; + text-transform: uppercase; + border-bottom: 2dp #92875B; +} + +.window .tab-bar .tab { + padding: 0 24dp; + line-height: 64dp; + opacity: 0.25; + tab-index: auto; + nav: horizontal; + focus: auto; +} + +.window .tab-bar .tab.active { + opacity: 1; + border-bottom: 4dp #C2A42D; + font-effect: glow(0dp 4dp 0dp 4dp black); + decorator: linear-gradient(to bottom, rgba(194, 164, 45, 0%) 0%, rgba(194, 164, 45, 15%) 100%); +} + +.window .tab-bar .tab:focus-visible { + opacity: 1; + font-effect: glow(0dp 4dp 0dp 4dp black); + decorator: linear-gradient(to bottom, rgba(194, 164, 45, 0%) 0%, rgba(194, 164, 45, 15%) 100%); +} + +.window .content { + display: flex; + height: 100%; +} + +.window .content .pane { + display: flex; + flex-flow: column; + flex: 1 1 0; + height: 100%; + padding: 24dp; + gap: 8dp; + overflow: auto; +} + +.window .content .pane:not(:last-of-type) { + border-right: 1dp #92875B; +} + +.section-heading { + font-weight: bold; + text-transform: uppercase; + font-size: 22dp; + opacity: 0.25; +} + +.button { + text-align: center; + background-color: rgba(17, 16, 10, 20%); + opacity: 0.9; + padding: 8dp 16dp; + border-radius: 14dp; + box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp; + font-size: 20dp; + transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out; +} + +.button.active, .button:hover { + background-color: rgba(204, 184, 119, 20%); + box-shadow: #C2A42D 0 0 0 2dp; +} + +.button.selected, .button:active { + opacity: 1; + background-color: rgba(204, 184, 119, 40%); + box-shadow: #C2A42D 0 0 0 2dp; +} + +.select-button { + display: flex; + align-items: center; + gap: 8dp; + background-color: rgba(17, 16, 10, 20%); + opacity: 0.9; + padding: 8dp 16dp; + border-radius: 14dp; + box-shadow: rgba(146, 135, 91, 25%) 0 0 0 1dp; + transition: background-color 0.1s linear-in-out, opacity 0.1s linear-in-out; +} + +.select-button.active, .select-button:hover { + background-color: rgba(204, 184, 119, 20%); + box-shadow: #C2A42D 0 0 0 2dp; +} + +.select-button.selected, .select-button:active { + opacity: 1; + background-color: rgba(204, 184, 119, 40%); + box-shadow: #C2A42D 0 0 0 2dp; +} + +.select-button .key { + font-family: "Fira Sans Condensed"; + font-weight: bold; + font-size: 18dp; + text-transform: uppercase; +} + +.select-button .value { + margin-left: auto; + font-size: 20dp; +} diff --git a/res/rml/window.rml b/res/rml/window.rml new file mode 100644 index 0000000000..93a4397ae1 --- /dev/null +++ b/res/rml/window.rml @@ -0,0 +1,19 @@ + + + Window + + + +
+
+ +
+
+
+ + diff --git a/src/dusk/ui/window.cpp b/src/dusk/ui/window.cpp index 749d737385..e7ac3eb3c6 100644 --- a/src/dusk/ui/window.cpp +++ b/src/dusk/ui/window.cpp @@ -7,171 +7,6 @@ namespace dusk::ui { namespace { -const Rml::String kWindowDocumentRml = R"RML( - - - Window - - - -
-
- -
-
-
- - -)RML"; - bool setup_window_model(Rml::Context* context, WindowModel& model, Rml::DataModelHandle& handle) { Rml::DataModelConstructor constructor = context->CreateDataModel("window"); if (!constructor) { @@ -239,7 +74,7 @@ Window::Window(WindowModel model) : mModel(std::move(model)) { return; } setup_window_model(context, mModel, mModelHandle); - mDocument = context->LoadDocumentFromMemory(kWindowDocumentRml); + mDocument = context->LoadDocument("res/rml/window.rml"); if (mDocument == nullptr) { return; }