From ccc240d25509f68cd58edf3955afdf6c301f3102 Mon Sep 17 00:00:00 2001 From: thecozies <79979276+thecozies@users.noreply.github.com> Date: Sun, 7 Jan 2024 15:33:22 -0600 Subject: [PATCH] new launcher and overall ui updates --- assets/config_menu.rml | 54 ++++++++------ assets/launcher.rml | 46 +++++++++--- assets/recomp.rcss | 2 +- assets/scss/styles/base.scss | 4 ++ assets/scss/styles/components/Button.scss | 24 ++++--- .../scss/styles/components/CenteredPage.scss | 32 ++++++--- assets/scss/styles/components/Config.scss | 33 +++++++-- assets/scss/styles/components/Launcher.scss | 53 ++++++++++++++ .../scss/styles/components/MenuListItem.scss | 70 ++++++++++++++++++ .../scss/styles/components/SubtitleTitle.scss | 71 +++++++++++++++++++ assets/scss/styles/components/Tabs.scss | 28 ++++++-- .../scss/styles/components/_components.scss | 3 + assets/scss/styles/functions/_spacing.scss | 4 ++ assets/scss/styles/global.scss | 6 +- assets/scss/styles/globals/_old.scss | 54 +------------- assets/scss/styles/vars/_borders.scss | 17 +++++ assets/scss/styles/vars/_colors.scss | 11 +-- assets/scss/styles/vars/_gradients.scss | 7 ++ 18 files changed, 403 insertions(+), 116 deletions(-) create mode 100644 assets/scss/styles/components/Launcher.scss create mode 100644 assets/scss/styles/components/MenuListItem.scss create mode 100644 assets/scss/styles/components/SubtitleTitle.scss create mode 100644 assets/scss/styles/functions/_spacing.scss create mode 100644 assets/scss/styles/vars/_borders.scss create mode 100644 assets/scss/styles/vars/_gradients.scss diff --git a/assets/config_menu.rml b/assets/config_menu.rml index 1a4c863..100226f 100644 --- a/assets/config_menu.rml +++ b/assets/config_menu.rml @@ -29,14 +29,17 @@ -
-
- - Graphics +
+
+ + +
Graphics
+
+
-
+
@@ -58,7 +61,7 @@
-
+
@@ -83,7 +86,7 @@
-
+
@@ -94,29 +97,38 @@
-
+
- - +
+
+
+ +
- Controls - + +
Controls
+
+ + - Sound - + +
Sound
+
+ +
diff --git a/assets/launcher.rml b/assets/launcher.rml index df660d6..70b3f09 100644 --- a/assets/launcher.rml +++ b/assets/launcher.rml @@ -13,14 +13,44 @@
-

Header-1


-

Header-2


-

Header-3


-

Label-LG


-
Label-MD

-
Label-SM

-
Body

- +
+
+
+ +
+
+
+
+
+ +
+
+ + + + +
+
+
diff --git a/assets/recomp.rcss b/assets/recomp.rcss index 79752ab..87d2b08 100644 --- a/assets/recomp.rcss +++ b/assets/recomp.rcss @@ -1 +1 @@ -h1{font-size:64dp;font-style:normal;font-weight:700;letter-spacing:4.48dp;line-height:64dp}h2{font-size:48dp;font-style:normal;font-weight:700;letter-spacing:3.36dp;line-height:48dp}h3{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:2.24dp;line-height:32dp}h4{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:3.52dp;line-height:32dp}h5,.button,.config-option__title{font-size:20dp;font-style:normal;font-weight:700;letter-spacing:2.2dp;line-height:20dp}h6,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:12dp;font-style:normal;font-weight:700;letter-spacing:1.32dp;line-height:12dp;text-transform:uppercase}body{font-size:16dp;font-style:normal;font-weight:400;letter-spacing:1.32dp;line-height:16dp}.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page{focus:auto;tab-index:auto}h1{font-size:64dp;font-style:normal;font-weight:700;letter-spacing:4.48dp;line-height:64dp}h2{font-size:48dp;font-style:normal;font-weight:700;letter-spacing:3.36dp;line-height:48dp}h3{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:2.24dp;line-height:32dp}h4{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:3.52dp;line-height:32dp}h5,.button,.config-option__title{font-size:20dp;font-style:normal;font-weight:700;letter-spacing:2.2dp;line-height:20dp}h6,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:12dp;font-style:normal;font-weight:700;letter-spacing:1.32dp;line-height:12dp;text-transform:uppercase}body{font-size:16dp;font-style:normal;font-weight:400;letter-spacing:1.32dp;line-height:16dp}.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page{focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;background:#000;padding:1.5dp}body{font-family:chiaro;font-weight:normal;font-style:normal;font-size:20dp;color:#fff}div.option_row{display:flex;gap:2dp;flex-direction:row}div#title_bar{z-index:1;position:absolute;top:7dp;left:0;text-align:left;vertical-align:bottom}div#title_bar div#icon{position:absolute;left:15dp;top:-4dp;width:51dp;height:39dp}div#title_bar span{padding-left:85dp;padding-right:25dp;padding-top:18dp;padding-bottom:43dp;vertical-align:top;line-height:24dp;font-size:20dp;font-weight:bold;font-effect:glow(1dp black)}div#window{width:100%;height:100%;box-sizing:border-box;background-color:#121018;border-color:rgba(255,255,255,.2)}div#content{z-index:2;width:auto;height:100%;overflow:hidden auto;text-align:center}p{text-align:left}h1{margin-left:.4em;margin-bottom:.4em;text-align:left;font-size:16dp;font-weight:bold;font-effect:glow(1dp 1dp 1dp 1dp rgba(17, 17, 17, 0.4666666667))}input.submit{margin-left:0}input.text,input.password{box-sizing:border-box;height:31dp;padding:11dp 10dp 0;cursor:text;text-align:left}textarea{padding:14dp 12dp 10dp;cursor:text;text-align:left}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;margin:0;line-height:1;border-width:1dp;border-color:#000;background-color:#fff;font-size:15dp;decorator:none;height:auto}select{display:inline-block;text-align:left;box-sizing:border-box;vertical-align:center;padding:4dp;border-radius:5dp;background-color:#787878;width:100%}select selectvalue{height:auto}select:hover selectvalue{background-color:#969696}select selectbox,tbody{background-color:#787878}select selectbox option{width:auto;background-color:#787878}select selectbox option:nth-child(even),tr:nth-child(even){background-color:#646464}select selectbox option:checked{font-weight:bold;color:#fff}select selectbox option:hover{background:#969696}input.radio,input.checkbox{flex:0;tab-index:auto;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto;width:0dp}thead tr{height:35dp}thead td{padding-top:11dp}tbody{margin-left:5dp;margin-right:4dp;padding-top:4dp;padding-bottom:4dp}tbody tr{margin-left:9dp;margin-right:8dp;color:#000}expand{display:block;margin:1dp 0 1dp 5dp;height:17dp;width:17dp}scrollbarvertical{margin-top:-6dp;margin-bottom:-6dp;margin-right:-11dp;width:27dp}scrollbarvertical slidertrack:active{image-color:#aaa}scrollbarvertical sliderbar{margin-left:4dp;width:23dp;min-height:46dp}scrollbarvertical sliderarrowdec,scrollbarvertical sliderarrowinc{width:27dp;height:24dp}scrollbarhorizontal{width:0;height:0}textarea scrollbarvertical{cursor:arrow;margin:10dp 0 4dp 0;width:12dp}textarea scrollbarvertical slidertrack{decorator:none}textarea scrollbarvertical sliderbar{margin-left:2dp;width:10dp;min-height:16dp}textarea scrollbarvertical sliderarrowdec,textarea scrollbarvertical sliderarrowinc{width:0;height:0}textarea scrollbarhorizontal{cursor:arrow;margin-left:7dp;height:12dp}textarea scrollbarhorizontal sliderbar{background-color:rgba(188,0,0,.8);height:8dp;min-width:10dp}textarea scrollbarhorizontal sliderbar:hover{background-color:rgba(184,37,0,.8)}textarea scrollbarhorizontal sliderbar:active{background-color:rgba(119,0,0,.8)}.centered-page{display:flex;flex-direction:column;position:relative;margin:16dp auto;max-width:928dp;width:100%;height:688dp;background:rgba(8,7,13,.72);border-radius:16dp}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;padding:24dp 24dp;background-color:rgba(0,0,0,0);margin:0;color:rgba(255,255,255,.6);transition:color .033s linear-in-out}.tab:selected{border-bottom:2dp;border-color:rgba(255,255,255,.6);color:#f2f2f2}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer}.tab:focus{color:#f2f2f2}.config__form{display:flex;flex:1 1 100%;width:100%;height:100%;background:rgba(0,0,0,.35)}.config__wrapper{display:flex;flex-direction:column;border-radius:0dp;flex:1 1 100%;height:100%;padding:16dp;text-align:left;background:rgba(0,0,0,.35)}.config-option{display:flex;flex-direction:column;flex:1;align-items:flex-start;justify-content:space-between}.config-option__title{padding:16dp 12dp 0}.config-option__list{display:flex;padding:0;flex-direction:row;width:100%;align-items:flex-start;justify-content:flex-start}.config-option__list .config-option__tab-label{display:block;padding:8dp 0;margin:0 12dp;margin-right:16dp;color:rgba(255,255,255,.6);tab-index:none;transition:color .033s linear-in-out}.config-option__list .config-option__tab-label:hover{cursor:pointer}.config-option__list input.radio{visibility:hidden;width:0;height:0}.config-option__list input.radio:checked+.config-option__tab-label{border-bottom:1dp;border-color:rgba(255,255,255,.3)}.config-option__list input.radio:checked+.config-option__tab-label:hover{cursor:default}.config-option__list input.radio:focus+.config-option__tab-label{color:#f2f2f2}.config-option__list input.range slidertrack{margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .033s linear-in-out}.config-option__list input.range sliderbar:hover{cursor:pointer;background-color:#f2f2f2}.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__range-label{flex:0 0 16dp;display:block;padding:0;margin:0 12dp;margin-right:16dp;color:#f2f2f2;tab-index:none}.button{margin:auto;display:block;align-items:center;justify-content:center;padding:12dp;background-color:#4e1b7e;color:#f2f2f2;border-radius:8dp}.button:focus{color:#dabaf7}.button:disabled,.button[disabled]{opacity:.5;background-color:#4e1b7e;color:rgba(255,255,255,.6)}.button:active{color:#fe8667}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}*,*:before,*:after{box-sizing:border-box}button{background-color:#4e1b7e} +h1{font-size:64dp;font-style:normal;font-weight:700;letter-spacing:4.48dp;line-height:64dp}h2{font-size:48dp;font-style:normal;font-weight:700;letter-spacing:3.36dp;line-height:48dp}h3{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:2.24dp;line-height:32dp}.label-lg,.menu-list-item__label{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:3.52dp;line-height:32dp}.label-md,.button,.config-option__title{font-size:20dp;font-style:normal;font-weight:700;letter-spacing:2.2dp;line-height:20dp}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:12dp;font-style:normal;font-weight:700;letter-spacing:1.32dp;line-height:12dp;text-transform:uppercase}body{font-size:16dp;font-style:normal;font-weight:400;letter-spacing:1.32dp;line-height:16dp}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{focus:auto;tab-index:auto}h1{font-size:64dp;font-style:normal;font-weight:700;letter-spacing:4.48dp;line-height:64dp}h2{font-size:48dp;font-style:normal;font-weight:700;letter-spacing:3.36dp;line-height:48dp}h3{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:2.24dp;line-height:32dp}.label-lg,.menu-list-item__label{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:3.52dp;line-height:32dp}.label-md,.button,.config-option__title{font-size:20dp;font-style:normal;font-weight:700;letter-spacing:2.2dp;line-height:20dp}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:12dp;font-style:normal;font-weight:700;letter-spacing:1.32dp;line-height:12dp;text-transform:uppercase}body{font-size:16dp;font-style:normal;font-weight:400;letter-spacing:1.32dp;line-height:16dp}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;background:#000;padding:1.5dp}body{font-family:chiaro;font-weight:normal;font-style:normal;font-size:20dp;color:#fff}div#window{position:relative;width:100%;height:100%;box-sizing:border-box;background-color:#121018;border-color:rgba(255,255,255,.2)}div#content{z-index:2;width:auto;height:100%;overflow:hidden auto;text-align:center}p{text-align:left}input.submit{margin-left:0}input.text,input.password{box-sizing:border-box;height:31dp;padding:11dp 10dp 0;cursor:text;text-align:left}textarea{padding:14dp 12dp 10dp;cursor:text;text-align:left}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;margin:0;line-height:1;border-width:1dp;border-color:#000;background-color:#fff;font-size:15dp;decorator:none;height:auto}select{display:inline-block;text-align:left;box-sizing:border-box;vertical-align:center;padding:4dp;border-radius:5dp;background-color:#787878;width:100%}select selectvalue{height:auto}select:hover selectvalue{background-color:#969696}select selectbox,tbody{background-color:#787878}select selectbox option{width:auto;background-color:#787878}select selectbox option:nth-child(even),tr:nth-child(even){background-color:#646464}select selectbox option:checked{font-weight:bold;color:#fff}select selectbox option:hover{background:#969696}input.radio,input.checkbox{flex:0;tab-index:auto;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto;width:0dp}thead tr{height:35dp}thead td{padding-top:11dp}tbody{margin-left:5dp;margin-right:4dp;padding-top:4dp;padding-bottom:4dp}tbody tr{margin-left:9dp;margin-right:8dp;color:#000}expand{display:block;margin:1dp 0 1dp 5dp;height:17dp;width:17dp}scrollbarvertical{margin-top:-6dp;margin-bottom:-6dp;margin-right:-11dp;width:27dp}scrollbarvertical slidertrack:active{image-color:#aaa}scrollbarvertical sliderbar{margin-left:4dp;width:23dp;min-height:46dp}scrollbarvertical sliderarrowdec,scrollbarvertical sliderarrowinc{width:27dp;height:24dp}scrollbarhorizontal{width:0;height:0}textarea scrollbarvertical{cursor:arrow;margin:10dp 0 4dp 0;width:12dp}textarea scrollbarvertical slidertrack{decorator:none}textarea scrollbarvertical sliderbar{margin-left:2dp;width:10dp;min-height:16dp}textarea scrollbarvertical sliderarrowdec,textarea scrollbarvertical sliderarrowinc{width:0;height:0}textarea scrollbarhorizontal{cursor:arrow;margin-left:7dp;height:12dp}textarea scrollbarhorizontal sliderbar{background-color:rgba(188,0,0,.8);height:8dp;min-width:10dp}textarea scrollbarhorizontal sliderbar:hover{background-color:rgba(184,37,0,.8)}textarea scrollbarhorizontal sliderbar:active{background-color:rgba(119,0,0,.8)}.centered-page{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;padding:32dp}.centered-page__modal{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1440dp dp;width:100%;height:100%;background:rgba(8,7,13,.72);border-radius:16dp;border-color:rgba(255,255,255,.1);border-width:1dp}.centered-page__modal panels{flex:1 1 100%}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;padding:20dp 24dp;background-color:rgba(0,0,0,0);margin:0;color:rgba(255,255,255,.6);transition:color .033s linear-in-out}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer}.tab:focus{color:#f2f2f2}.tab__indicator{position:absolute;background-color:rgba(0,0,0,0);right:0;bottom:2dp;left:0;height:2dp}.config__form{border-top-color:rgba(255,255,255,.1);border-top-width:1dp;display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;width:100%;height:100%;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__wrapper{display:flex;flex-direction:column;border-radius:0dp;flex:1 1 100%;height:100%;padding:16dp;text-align:left;background-color:rgba(0,0,0,.35)}.config__footer{border-top-color:rgba(255,255,255,.1);border-top-width:1dp;display:flex;justify-content:flex-end;align-items:center;width:100%;padding:20dp 20dp;background-color:rgba(8,7,13,.72);border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__row{display:flex;flex-direction:row}.config-option{display:flex;flex-direction:column;flex:1;align-items:flex-start;justify-content:space-between}.config-option__title{padding:12dp 12dp 0}.config-option__list{display:flex;padding:0;flex-direction:row;width:100%;align-items:flex-start;justify-content:flex-start}.config-option__list .config-option__tab-label{display:block;padding:8dp 0;margin:0 12dp;margin-right:16dp;color:rgba(255,255,255,.6);tab-index:none;transition:color .033s linear-in-out}.config-option__list .config-option__tab-label:hover{cursor:pointer}.config-option__list input.radio{visibility:hidden;width:0;height:0}.config-option__list input.radio:checked+.config-option__tab-label{border-bottom:1dp;border-color:rgba(255,255,255,.3)}.config-option__list input.radio:checked+.config-option__tab-label:hover{cursor:default}.config-option__list input.radio:focus+.config-option__tab-label{color:#f2f2f2}.config-option__list input.range slidertrack{margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .033s linear-in-out}.config-option__list input.range sliderbar:hover{cursor:pointer;background-color:#f2f2f2}.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__range-wrapper{margin-top:4dp;max-width:360dp}.config-option__range-label{flex:0 0 16dp;display:block;padding:0;margin:0 12dp;margin-right:16dp;color:#f2f2f2;tab-index:none}.button{display:block;padding:16dp 20dp;background-color:rgba(122,42,198,.8);color:#f2f2f2;border-radius:12dp;width:auto;height:auto}.button:focus{background-color:#7a2ac6}.button:disabled,.button[disabled]{opacity:.5;color:rgba(255,255,255,.6)}.button:active{background-color:#6e26b2;color:#b23919}.button__label{width:auto;height:auto}.launcher{display:block;flex-direction:row;justify-content:space-between;position:relative;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;flex-direction:column;align-items:flex-start;justify-content:space-between;top:0;right:50%;bottom:0;left:0}.launcher__vertical-split--right{align-items:flex-end;right:0;left:50%}.launcher__title-quadrant{flex:1 1 auto;padding-top:96dp;padding-left:96dp;width:auto;height:auto}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:32dp;width:100%;height:auto;flex:1 1 100%}.menu-list-item{display:flex;flex-direction:row;align-items:center;width:100%;height:auto;padding:16dp;border-radius:8dp;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer}.menu-list-item--right{align-content:flex-end;flex-direction:row-reverse}.menu-list-item--right .menu-list-item__bullet{opacity:1;margin-left:12dp}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:gradient(horizontal #7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:gradient(horizontal #7A2AC614 #DABAF700)}.menu-list-item:focus:not(:disabled,[disabled]) .menu-list-item__bullet,.menu-list-item:hover:not(:disabled,[disabled]) .menu-list-item__bullet{opacity:1}.menu-list-item:disabled,.menu-list-item[disabled]{opacity:.5;tab-index:none;cursor:default}.menu-list-item__bullet{opacity:0;margin-right:12dp}.subtitle-title{display:block;position:relative;width:auto;height:auto;flex-direction:column;align-items:flex-start;align-content:flex-start;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer;text-align:left;padding:0}.subtitle-title--right{align-content:flex-end}.subtitle-title--right,.subtitle-title--right>*{text-align:right}.subtitle-title[selected]{color:#f2f2f2;cursor:default}.subtitle-title:focus:not(:disabled,[disabled]),.subtitle-title:hover:not(:disabled,[disabled],[selected]){color:#b97df2}.subtitle-title:disabled,.subtitle-title[disabled]{opacity:.5;cursor:default;tab-index:none}.subtitle-title h3{margin-bottom:6dp}.subtitle-title h1{margin-top:6dp}.subtitle-title__disclaimer{margin-top:16dp}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6} diff --git a/assets/scss/styles/base.scss b/assets/scss/styles/base.scss index 35bff5a..30a6e4d 100644 --- a/assets/scss/styles/base.scss +++ b/assets/scss/styles/base.scss @@ -1,4 +1,8 @@ +@use 'sass:math'; +@import "./functions/spacing"; @import "./vars/colors"; +@import "./vars/borders"; +@import "./vars/gradients"; @import "./vars/transitions"; @import "./mixins/typography"; @import "./mixins/helpers"; diff --git a/assets/scss/styles/components/Button.scss b/assets/scss/styles/components/Button.scss index 7e8fbbe..a584efa 100644 --- a/assets/scss/styles/components/Button.scss +++ b/assets/scss/styles/components/Button.scss @@ -1,30 +1,36 @@ +@use 'sass:color'; .button { @extend %label-md; - margin: auto; display: block; - align-items: center; - justify-content: center; - padding: 12dp; - background-color: $color-primary-d; + padding: 16dp 20dp; + background-color: rgba($color-primary-d, 0.8); color: $color-text; - border-radius: 8dp; + border-radius: $border-radius-md; + width: auto; + height: auto; &:not([disabled]) { @extend %nav-all; } &:focus { - color: $color-primary-l; + // color: $color-primary-l; + background-color: $color-primary-d; } &:disabled,&[disabled] { opacity: 0.5; - background-color: $color-primary-d; color: $color-text-inactive; } &:active { - color: $color-error-l; + background-color: color.scale($color-primary-d, $lightness: -10%); + color: $color-error-d; + } + + &__label { + width: auto; + height: auto; } } diff --git a/assets/scss/styles/components/CenteredPage.scss b/assets/scss/styles/components/CenteredPage.scss index 4d6439a..5bc06c3 100644 --- a/assets/scss/styles/components/CenteredPage.scss +++ b/assets/scss/styles/components/CenteredPage.scss @@ -1,18 +1,34 @@ +@use 'sass:math'; -$page-margin: 16; +$page-margin: 32; +$base-height: 1080; .centered-page { + display: flex; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: space($page-margin); +} + +.centered-page__modal { @extend %nav-all; display: flex; flex-direction: column; position: relative; - margin: #{$page-margin}dp auto; - // 16:9 - // max-width: 1280dp; - // 4:3 - max-width: #{960 - ($page-margin * 2)}dp; + margin: auto; + flex: 1 1 100%; + max-width: space(math.div($base-height*4, 3))dp; width: 100%; - height: #{720 - ($page-margin * 2)}dp; + height: 100%; background: $color-bg-shadow-2; - border-radius: 16dp; + border-radius: $border-radius-modal; + border-color: $color-border-soft; + border-width: space(1); +} + +.centered-page__modal panels { + flex: 1 1 100%; } diff --git a/assets/scss/styles/components/Config.scss b/assets/scss/styles/components/Config.scss index 2134844..3a4fd2d 100644 --- a/assets/scss/styles/components/Config.scss +++ b/assets/scss/styles/components/Config.scss @@ -1,10 +1,14 @@ .config__form { + @include border-top($color-border-soft); display: flex; + flex-direction: column; + justify-content: space-between; flex: 1 1 100%; width: 100%; height: 100%; - background: $color-bg-shadow; + border-bottom-left-radius: $border-radius-modal; + border-bottom-right-radius: $border-radius-modal; } .config__wrapper { @@ -15,7 +19,24 @@ height: 100%; padding: 16dp; text-align: left; - background: $color-bg-shadow; + background-color: $color-bg-shadow; +} + +.config__footer { + @include border-top($color-border-soft); + display: flex; + justify-content: flex-end; + align-items: center; + width: 100%; + padding: space(20) space(20); + background-color: $color-bg-shadow-2; + border-bottom-left-radius: $border-radius-modal; + border-bottom-right-radius: $border-radius-modal; +} + +.config__row { + display: flex; + flex-direction: row; } .config-option { @@ -28,7 +49,7 @@ .config-option__title { @extend %label-md; - padding: 16dp 12dp 0; + padding: 12dp 12dp 0; } .config-option__list { @@ -40,7 +61,6 @@ width: 100%; align-items: flex-start; justify-content: flex-start; - // background-color: $color-error-d; .config-option__tab-label { @extend %label-sm; @@ -109,6 +129,11 @@ } } +.config-option__range-wrapper { + margin-top: space(4); + max-width: space(360); +} + .config-option__range-label { @extend %label-sm; flex: 0 0 16dp; diff --git a/assets/scss/styles/components/Launcher.scss b/assets/scss/styles/components/Launcher.scss new file mode 100644 index 0000000..3a3d6bf --- /dev/null +++ b/assets/scss/styles/components/Launcher.scss @@ -0,0 +1,53 @@ + +.launcher { + display: block; + flex-direction: row; + justify-content: space-between; + position: relative; + width: 100%; + height: 100%; + background-color: $color-background-1; +} + +.launcher__vertical-split { + display: flex; + position: absolute; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + top: 0; + right: 50%; + bottom: 0; + left: 0; + + &--right { + align-items: flex-end; + right: 0; + left: 50%; + } +} + +.launcher__title-quadrant { + flex: 1 1 auto; + padding-top: space(96); + padding-left: space(96); + width: auto; + height: auto; + + &--right { + padding-right: space(96); + padding-left: 0; + } +} + +.launcher__content-quadrant { + display: flex; + position: relative; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + padding: space(32); + width: 100%; + height: auto; + flex: 1 1 100%; +} diff --git a/assets/scss/styles/components/MenuListItem.scss b/assets/scss/styles/components/MenuListItem.scss new file mode 100644 index 0000000..ab39933 --- /dev/null +++ b/assets/scss/styles/components/MenuListItem.scss @@ -0,0 +1,70 @@ + +/* + Example layout: + + - Variants: + .menu-list-item--right (align to right side) + - Optional: + -
Coming Soon™
+ +*/ + +.menu-list-item { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: auto; + padding: space(16); + border-radius: $border-radius-sm; + background-color: rgba(0, 0, 0, 0); + color: $color-text-dim; + cursor: pointer; + + &--right { + align-content: flex-end; + flex-direction: row-reverse; + + .menu-list-item__bullet { + opacity: 1; + margin-left: space(12); + } + + &.menu-list-item:focus:not(:disabled, [disabled]), + &.menu-list-item:hover:not(:disabled, [disabled]) { + decorator: $primary-rl-fade; + } + } + + &:focus:not(:disabled, [disabled]), + &:hover:not(:disabled, [disabled]) { + color: $color-primary; + decorator: $primary-lr-fade; + + .menu-list-item__bullet { + opacity: 1; + } + } + + &:not(:disabled, [disabled]) { + @extend %nav-all; + } + + &:disabled, &[disabled] { + opacity: 0.5; + tab-index: none; + cursor: default; + } + +} +.menu-list-item__label { + @extend .label-lg; +} + +.menu-list-item__bullet { + opacity: 0; + margin-right: space(12); +} diff --git a/assets/scss/styles/components/SubtitleTitle.scss b/assets/scss/styles/components/SubtitleTitle.scss new file mode 100644 index 0000000..88f806c --- /dev/null +++ b/assets/scss/styles/components/SubtitleTitle.scss @@ -0,0 +1,71 @@ +/* + Example layout: + + + - Variants: + .subtitle-title--right (align to right side) + - Optional: + -
Coming Soon™
+ +*/ + +.subtitle-title { + display: block; + position: relative; + width: auto; + height: auto; + flex-direction: column; + align-items: flex-start; + align-content: flex-start; + background-color: rgba(0, 0, 0, 0); + color: $color-text-dim; + cursor: pointer; + text-align: left; + padding: 0; + + &--right { + align-content: flex-end; + } + + &--right, &--right > * { + text-align: right; + } + + &[selected] { + color: $color-text; + cursor: default; + } + + &:focus:not(:disabled, [disabled]), + &:hover:not(:disabled, [disabled], [selected]) { + color: $color-primary; + } + + &:not(:disabled, [disabled]) { + @extend %nav-all; + } + + &:disabled, &[disabled] { + opacity: 0.5; + cursor: default; + tab-index: none; + } + + h3 { + margin-bottom: space(6); + } + + h1 { + margin-top: space(6); + } + + &__disclaimer { + @extend .label-sm; + + margin-top: space(16); + } +} diff --git a/assets/scss/styles/components/Tabs.scss b/assets/scss/styles/components/Tabs.scss index 4352c0b..2c23bb8 100644 --- a/assets/scss/styles/components/Tabs.scss +++ b/assets/scss/styles/components/Tabs.scss @@ -1,3 +1,11 @@ +/* + Example: + +
Graphics
+
+ +*/ + .tabs tabs { display: flex; flex-direction: row; @@ -8,17 +16,20 @@ .tab { @extend %nav-all; display: block; - padding: 24dp 24dp; + position: relative; + padding: space(20) space(24); background-color: rgba(0,0,0,0); margin: 0; color: $color-text-inactive; transition: color $transition-quick; &:selected { - border-bottom: 2dp; - border-color: $color-border-solid; color: $color-text; - + + .tab__indicator { + background-color: $color-border-solid; + } + &:hover { cursor: default; } @@ -32,3 +43,12 @@ color: $color-text; } } + +.tab__indicator { + position: absolute; + background-color: rgba(0, 0, 0, 0); + right: 0; + bottom: 2dp; + left: 0; + height: 2dp; +} diff --git a/assets/scss/styles/components/_components.scss b/assets/scss/styles/components/_components.scss index df16627..5344888 100644 --- a/assets/scss/styles/components/_components.scss +++ b/assets/scss/styles/components/_components.scss @@ -2,3 +2,6 @@ @import "./Tabs"; @import "./Config"; @import "./Button"; +@import "./Launcher"; +@import "./MenuListItem"; +@import "./SubtitleTitle"; diff --git a/assets/scss/styles/functions/_spacing.scss b/assets/scss/styles/functions/_spacing.scss new file mode 100644 index 0000000..437a7ac --- /dev/null +++ b/assets/scss/styles/functions/_spacing.scss @@ -0,0 +1,4 @@ + +@function space($amt) { + @return #{$amt}dp; +} diff --git a/assets/scss/styles/global.scss b/assets/scss/styles/global.scss index 4e3100c..be5afe4 100644 --- a/assets/scss/styles/global.scss +++ b/assets/scss/styles/global.scss @@ -30,15 +30,15 @@ h3 { @extend %header-3; } -h4 { +.label-lg { @extend %label-lg; } -h5 { +.label-md { @extend %label-md; } -h6 { +.label-sm { @extend %label-sm; } diff --git a/assets/scss/styles/globals/_old.scss b/assets/scss/styles/globals/_old.scss index 04b2143..99345d3 100644 --- a/assets/scss/styles/globals/_old.scss +++ b/assets/scss/styles/globals/_old.scss @@ -22,43 +22,8 @@ body { tab-index:none; } */ -div.option_row { - display: flex; - gap: 2dp; - flex-direction: row; -} - -div#title_bar { - z-index: 1; - position: absolute; - top: 7dp; - left: 0; - text-align: left; - vertical-align: bottom -} - -div#title_bar div#icon { - position: absolute; - left: 15dp; - top: -4dp; - width: 51dp; - height: 39dp -} - -div#title_bar span { - padding-left: 85dp; - padding-right: 25dp; - padding-top: 18dp; - padding-bottom: 43dp; - vertical-align: top; - line-height: 24dp; - font-size: 20dp; - font-weight: bold; - font-effect: glow(1dp black); - /* decorator: tiled-horizontal(title-bar-l, title-bar-c, title-bar-r) */ -} - div#window { + position: relative; width: 100%; height: 100%; box-sizing: border-box; @@ -76,21 +41,6 @@ div#content { p { text-align: left; - /* margin-bottom: 4dp; */ -} - -h1 { - margin-left: .4em; - margin-bottom: .4em; - text-align: left; - font-size: 16dp; - font-weight: bold; - font-effect: glow(1dp 1dp 1dp 1dp rgba(17, 17, 17, 0.4666666667)) -} - -input, -select { - /* margin-left: 20dp */ } input.submit { @@ -103,14 +53,12 @@ input.password { box-sizing: border-box; height: 31dp; padding: 11dp 10dp 0; - /* decorator: tiled-horizontal(text-l, text-c, auto); */ cursor: text; text-align: left } textarea { padding: 14dp 12dp 10dp; - /* decorator: ninepatch(textarea, textarea-inner, 1); */ cursor: text; text-align: left } diff --git a/assets/scss/styles/vars/_borders.scss b/assets/scss/styles/vars/_borders.scss new file mode 100644 index 0000000..557c080 --- /dev/null +++ b/assets/scss/styles/vars/_borders.scss @@ -0,0 +1,17 @@ + +$border-radius-sm: 8dp; +$border-radius-md: 12dp; +// modals/pages +$border-radius-lg: 16dp; + +$border-radius-modal: $border-radius-lg; + +@mixin border($col: $color-border) { + border-color: $col; + border-width: space(1); +} + +@mixin border-top($col: $color-border) { + border-top-color: $col; + border-top-width: space(1); +} diff --git a/assets/scss/styles/vars/_colors.scss b/assets/scss/styles/vars/_colors.scss index ab071a8..00ab971 100644 --- a/assets/scss/styles/vars/_colors.scss +++ b/assets/scss/styles/vars/_colors.scss @@ -11,20 +11,21 @@ $color-text-dim: #CCCCCC; $color-text-inactive: rgba(255, 255, 255, 0.6000); $color-primary: #B97DF2; $color-primary-l: #DABAF7; -$color-primary-d: #4E1B7E; +$color-primary-d: #7A2AC6; $color-secondary: #17D6E8; $color-secondary-l: #A2EFF6; -$color-secondary-d: #124E54; +$color-secondary-d: #25A1AD; $color-warning: #E9CD35; $color-warning-l: #F9E57C; -$color-warning-d: #8A770F; +$color-warning-d: #C5AA16; $color-error: #F86039; $color-error-l: #FE8667; -$color-error-d: #591C0D; +$color-error-d: #B23919; $color-success: #45D043; $color-success-l: #AAEAA9; -$color-success-d: #207A1F; +$color-success-d: #2CA72A; $color-border: rgba(255, 255, 255, 0.2000); $color-border-soft: rgba(255, 255, 255, 0.1000); $color-border-hard: rgba(255, 255, 255, 0.3000); $color-border-solid: rgba(255, 255, 255, 0.6000); +$color-transparent: rgba(0, 0, 0, 0.0000); diff --git a/assets/scss/styles/vars/_gradients.scss b/assets/scss/styles/vars/_gradients.scss new file mode 100644 index 0000000..ee18e36 --- /dev/null +++ b/assets/scss/styles/vars/_gradients.scss @@ -0,0 +1,7 @@ + +// Not supported yet, need to use decorator: gradient atm +// $primary-lr-fade: linear-gradient(90deg, rgba($color-primary-l, 0.08) 0%, rgba($color-primary-l, 0.00) 100%); +// $primary-rl-fade: linear-gradient(90deg, rgba($color-primary-l, 0.00) 0%, rgba($color-primary-l, 0.08) 100%); + +$primary-lr-fade: gradient(horizontal #{$color-primary-d}14 #{$color-primary-l}00); +$primary-rl-fade: gradient(horizontal #{$color-primary-d}00 #{$color-primary-l}14);