From 7a27d6555c38daeda60567bf30cd4771832e9b0e Mon Sep 17 00:00:00 2001 From: thecozies <79979276+thecozies@users.noreply.github.com> Date: Sat, 6 Jan 2024 18:04:28 -0600 Subject: [PATCH] updated conf menu styling --- assets/config_menu.rml | 94 +++---- assets/recomp.rcss | 2 +- assets/scss/package.json | 1 + assets/scss/styles/base.scss | 2 + assets/scss/styles/components/Button.scss | 30 +++ .../scss/styles/components/CenteredPage.scss | 18 ++ assets/scss/styles/components/Config.scss | 122 +++++++++ assets/scss/styles/components/Tabs.scss | 34 +++ .../scss/styles/components/_components.scss | 4 + assets/scss/styles/global.scss | 1 + assets/scss/styles/globals/_old.scss | 254 +----------------- assets/scss/styles/mixins/_helpers.scss | 17 ++ assets/scss/styles/vars/_transitions.scss | 2 + 13 files changed, 284 insertions(+), 297 deletions(-) create mode 100644 assets/scss/styles/components/Button.scss create mode 100644 assets/scss/styles/components/CenteredPage.scss create mode 100644 assets/scss/styles/components/Config.scss create mode 100644 assets/scss/styles/components/Tabs.scss create mode 100644 assets/scss/styles/components/_components.scss create mode 100644 assets/scss/styles/mixins/_helpers.scss create mode 100644 assets/scss/styles/vars/_transitions.scss diff --git a/assets/config_menu.rml b/assets/config_menu.rml index e1a775e..1a4c863 100644 --- a/assets/config_menu.rml +++ b/assets/config_menu.rml @@ -30,90 +30,92 @@
-
- - Graphics - -
-
+
+ + Graphics + + +
-
-
-
-
+
+ +
- + - + - +
-
-
-
-
+
+ +
- + - +
-
-
-
-
+
+ +
- + - +
-
-
-
-
+
+ +
- + - + - + - +
-
-
-
-
+
+ +
- + - + - +
-
- - +
+ +
- +
- Controls + Controls - Sound + Sound diff --git a/assets/recomp.rcss b/assets/recomp.rcss index 9279ef1..79752ab 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,label.option_title{font-size:20dp;font-style:normal;font-weight:700;letter-spacing:2.2dp;line-height:20dp}h6{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}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,label.option_title{font-size:20dp;font-style:normal;font-weight:700;letter-spacing:2.2dp;line-height:20dp}h6{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}*{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}form{width:100%;height:100%}div.option_container{display:flex;flex-direction:column;border-radius:0dp;width:100%;height:auto;padding:16dp;text-align:left;background:rgba(0,0,0,.35)}div.option_row{display:flex;flex-direction:row}div.option{flex:1;padding:4dp;text-align:center}div.option_list{padding:2dp;text-align:center;display:flex;justify-content:center}label.option_title{padding:16dp 0dp}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;padding:10dp 15dp;background-color:#004164;border-color:red}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}button,input.submit{display:inline-block;text-align:center;background-color:#787878;height:auto;width:100%;focus:auto;tab-index:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}button:focus,input.submit:focus{color:#329696}button:active,input.submit:active{background-color:#646464}input.submit:disabled{image-color:#329696;cursor:unavailable}button[disabled]{color:#646464;background-color:#323232}button:focus[disabled]{color:#329696;background-color:#323232}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}input.radio+label{color:gray;text-align:center;tab-index:none;focus:auto;margin-left:10dp;margin-right:10dp}input.radio:checked+label{color:#fff;border-bottom:1dp}input.radio:focus+label{color:#329696}tabset{display:block;position:relative;margin:0 auto;max-width:1280dp;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}tabset tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}tabset panel{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:flex-start}tab{display:block;padding:24dp 16dp;background-color:rgba(0,0,0,0);margin:0;tab-index:auto;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}tab:selected{background-color:rgba(255,255,255,.1);border-bottom:2dp;border-color:rgba(255,255,255,.6)}tab:selected:hover{cursor:default}tab:focus{color:#329696}tab:hover{cursor:pointer}input.range slidertrack{margin-top:7dp;height:6dp;image-color:#ecc;background-color:#fff;border-width:1dp;border-color:#000}input.range sliderbar{margin-left:-8dp;margin-right:-8dp;width:20dp;height:20dp;background-color:#fff;border-color:#000;border-width:3dp;border-radius:10dp}input.range sliderbar:hover,input.range slidertrack:hover+sliderbar{image-color:#cc0}input.range sliderbar:active,input.range sliderbar:focus{background-color:#329696}input.range sliderarrowdec,input.range sliderarrowinc{display:none}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)}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}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} diff --git a/assets/scss/package.json b/assets/scss/package.json index fee858c..34d9409 100644 --- a/assets/scss/package.json +++ b/assets/scss/package.json @@ -6,6 +6,7 @@ "scripts": { "start": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss", "watch": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss --watch", + "watch-debug": "sass --no-source-map main.scss ..\\recomp.rcss --watch", "lint": "stylelint '.\\**\\*.scss'" }, "author": "", diff --git a/assets/scss/styles/base.scss b/assets/scss/styles/base.scss index f2aa8bf..35bff5a 100644 --- a/assets/scss/styles/base.scss +++ b/assets/scss/styles/base.scss @@ -1,2 +1,4 @@ @import "./vars/colors"; +@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 new file mode 100644 index 0000000..7e8fbbe --- /dev/null +++ b/assets/scss/styles/components/Button.scss @@ -0,0 +1,30 @@ + +.button { + @extend %label-md; + margin: auto; + display: block; + align-items: center; + justify-content: center; + padding: 12dp; + background-color: $color-primary-d; + color: $color-text; + border-radius: 8dp; + + &:not([disabled]) { + @extend %nav-all; + } + + &:focus { + color: $color-primary-l; + } + + &:disabled,&[disabled] { + opacity: 0.5; + background-color: $color-primary-d; + color: $color-text-inactive; + } + + &:active { + color: $color-error-l; + } +} diff --git a/assets/scss/styles/components/CenteredPage.scss b/assets/scss/styles/components/CenteredPage.scss new file mode 100644 index 0000000..4d6439a --- /dev/null +++ b/assets/scss/styles/components/CenteredPage.scss @@ -0,0 +1,18 @@ + +$page-margin: 16; + +.centered-page { + @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; + width: 100%; + height: #{720 - ($page-margin * 2)}dp; + background: $color-bg-shadow-2; + border-radius: 16dp; +} diff --git a/assets/scss/styles/components/Config.scss b/assets/scss/styles/components/Config.scss new file mode 100644 index 0000000..2134844 --- /dev/null +++ b/assets/scss/styles/components/Config.scss @@ -0,0 +1,122 @@ + +.config__form { + display: flex; + flex: 1 1 100%; + width: 100%; + height: 100%; + background: $color-bg-shadow; +} + +.config__wrapper { + display: flex; + flex-direction: column; + border-radius: 0dp; + flex: 1 1 100%; + height: 100%; + padding: 16dp; + text-align: left; + background: $color-bg-shadow; +} + +.config-option { + display: flex; + flex-direction: column; + flex: 1; + align-items: flex-start; + justify-content: space-between; +} + +.config-option__title { + @extend %label-md; + padding: 16dp 12dp 0; +} + +.config-option__list { + display: flex; + padding: 0; + flex-direction: row; + // flex: 1 1 100%; + // height: auto; + width: 100%; + align-items: flex-start; + justify-content: flex-start; + // background-color: $color-error-d; + + .config-option__tab-label { + @extend %label-sm; + display: block; + padding: 8dp 0; + margin: 0 12dp; + margin-right: 16dp; + color: $color-text-inactive; + tab-index: none; + transition: color $transition-quick; + + &:hover { + cursor: pointer; + } + } + + input.radio { + @extend %nav-all; + visibility: hidden; + width: 0; + height: 0; + + &:checked + .config-option__tab-label { + border-bottom: 1dp; + border-color: $color-border-hard; + + &:hover { + cursor: default; + } + } + + &:focus + .config-option__tab-label { + color: $color-text; + } + } + + input.range slidertrack { + margin-top: 7dp; + height: 2dp; + background-color: $color-border; + } + + input.range sliderbar { + margin-left: -8dp; + margin-right: -6dp; + width: 16dp; + height: 16dp; + background-color: $color-text-dim; + border-radius: 8dp; + transition: background-color $transition-quick; + + &:hover { + cursor: pointer; + background-color: $color-text; + } + } + + input.range sliderbar:active, + input.range slidertrack:active + sliderbar { + background-color: $color-secondary; + } + + input.range sliderarrowdec, + input.range sliderarrowinc { + display: none; + } +} + +.config-option__range-label { + @extend %label-sm; + flex: 0 0 16dp; + + display: block; + padding: 0; + margin: 0 12dp; + margin-right: 16dp; + color: $color-text; + tab-index: none; +} diff --git a/assets/scss/styles/components/Tabs.scss b/assets/scss/styles/components/Tabs.scss new file mode 100644 index 0000000..4352c0b --- /dev/null +++ b/assets/scss/styles/components/Tabs.scss @@ -0,0 +1,34 @@ +.tabs tabs { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; +} + +.tab { + @extend %nav-all; + display: block; + padding: 24dp 24dp; + 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; + + &:hover { + cursor: default; + } + } + + &:hover { + cursor: pointer; + } + + &:focus { + color: $color-text; + } +} diff --git a/assets/scss/styles/components/_components.scss b/assets/scss/styles/components/_components.scss new file mode 100644 index 0000000..df16627 --- /dev/null +++ b/assets/scss/styles/components/_components.scss @@ -0,0 +1,4 @@ +@import "./CenteredPage"; +@import "./Tabs"; +@import "./Config"; +@import "./Button"; diff --git a/assets/scss/styles/global.scss b/assets/scss/styles/global.scss index 3a82c81..4e3100c 100644 --- a/assets/scss/styles/global.scss +++ b/assets/scss/styles/global.scss @@ -1,5 +1,6 @@ @import "./base"; @import "./globals/old"; +@import "./components/components"; $font-stack: chiaro; diff --git a/assets/scss/styles/globals/_old.scss b/assets/scss/styles/globals/_old.scss index 8b32f8e..04b2143 100644 --- a/assets/scss/styles/globals/_old.scss +++ b/assets/scss/styles/globals/_old.scss @@ -21,45 +21,13 @@ body { focus:none; tab-index:none; } */ -form { - width: 100%; - height: 100%; -} - -div.option_container { - display:flex; - flex-direction: column; - border-radius:0dp; - width: 100%; - height:auto; - padding:16dp; - text-align:left; - background: $color-bg-shadow; -} div.option_row { - display:flex; + display: flex; + gap: 2dp; flex-direction: row; } -div.option { - flex:1; - padding:4dp; - text-align:center; -} - -div.option_list { - padding:2dp; - text-align:center; - display:flex; - justify-content:center; -} - -label.option_title { - @extend %label-md; - padding: 16dp 0dp; -} - div#title_bar { z-index: 1; position: absolute; @@ -94,9 +62,8 @@ div#window { width: 100%; height: 100%; box-sizing: border-box; - padding: 10dp 15dp; - background-color: #004164; - border-color: red + background-color: $color-background-2; + border-color: $color-border; } div#content { @@ -130,70 +97,6 @@ input.submit { margin-left: 0 } -button, -input.submit { - display: inline-block; - /* width: 100dp; - padding: 4dp; */ - text-align: center; - /* tab-index: auto; */ - /* border-radius: 5dp; */ - background-color: rgb(120, 120, 120); - /* vertical-align: center; */ - height: auto; - width: 100%; - focus:auto; - tab-index:auto; - nav-up:auto; - nav-down:auto; - nav-right:auto; - nav-left:auto; -} - -button:focus, -input.submit:focus { - /* font-effect: blur(3dp #fff); */ - color: #329696; -} - -button:active, -input.submit:active { - background-color: rgb(100, 100, 100); -} - -input.submit:disabled { - /* decorator: image(button); */ - image-color: #329696; - cursor: unavailable -} - -button[disabled] { - /* decorator: image(button); */ - /* image-color: #329696; */ - /* color:black; */ - color:rgb(100,100,100); - background-color: rgb(50, 50, 50); - /* focus:none; - tab-index:none; - nav-up:none; - nav-down:none; - nav-right:none; - nav-left:none; */ -} - -button:focus[disabled] { - /* decorator: image(button); */ - /* image-color: #329696; */ - /* color:black; */ - color:#329696; - background-color: rgb(50, 50, 50); - /* focus:none; - tab-index:none; - nav-up:none; - nav-down:none; - nav-right:none; - nav-left:none; */ -} input.text, input.password { @@ -336,90 +239,6 @@ input.checkbox { width:0dp; } -input.radio + label { - /* background: rgb(120,120,120); */ - /* font-effect: outline(2dp black); */ - color: gray; - /* flex: 1; */ - text-align:center; - tab-index:none; - focus:auto; - margin-left:10dp; - margin-right:10dp; - /* display:none; */ - /* decorator: image(radio) */ -} - -input.radio:checked + label { - /* background: rgb(72, 102, 255); */ - color: white; - border-bottom:1dp; - /* decorator: image(radio-checked) */ -} - -input.radio:focus + label { - color:#329696; - /* background: rgb(150,150,150); */ -} - -tabset { - display: block; - position: relative; - margin: 0 auto; - max-width: 1280dp; - focus:auto; - nav-up:auto; - nav-down:auto; - nav-right:auto; - nav-left:auto; -} - -tabset tabs { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; -} - -tabset panel { - display: flex; - flex-direction: column; - width: 100%; - align-items: center; - justify-content: flex-start; -} - -tab { - display: block; - padding: 24dp 16dp; - background-color: rgba(0,0,0,0); - margin: 0; - tab-index:auto; - focus:auto; - nav-up:auto; - nav-down:auto; - nav-right:auto; - nav-left:auto; -} - -tab:selected { - background-color: $color-border-soft; - border-bottom: 2dp; - border-color: $color-border-solid; - - &:hover { - cursor: default; - } -} - -tab:focus { - color:#329696; -} - -tab:hover { - cursor: pointer; -} - /* input.radio:checked:hover + label { background: rgb(150,150,150); } */ @@ -452,71 +271,6 @@ input.checkbox:checked:active { decorator: image(checkbox-checked-active) } */ -input.range slidertrack { - margin-top: 7dp; - height: 6dp; - image-color: #ecc; - /* decorator: ninepatch(range-track, range-track-inner, 1) */ - background-color:white; - border-width:1dp; - border-color:black; -} - -input.range sliderbar { - margin-left: -8dp; - margin-right: -8dp; - /* margin-top: -3dp; */ - width: 20dp; - height: 20dp; - background-color:white; - border-color:black; - border-width:3dp; - border-radius:10dp; - /* decorator: image(range-bar) */ -} - -input.range sliderbar:hover, -input.range slidertrack:hover+sliderbar { - image-color: #cc0 -} - -input.range sliderbar:active, -input.range sliderbar:focus { - background-color:#329696; -} - -input.range sliderarrowdec, -input.range sliderarrowinc { - /* width: 17dp; - height: 17dp; - margin-top: 6dp; */ - display:none; -} - -/* input.range sliderarrowdec { - decorator: image(range-dec) -} - -input.range sliderarrowinc { - decorator: image(range-inc) -} - -input.range sliderarrowdec:hover { - decorator: image(range-dec-hover) -} - -input.range sliderarrowinc:hover { - decorator: image(range-inc-hover) -} - -input.range sliderarrowdec:active { - decorator: image(range-dec-active) -} - -input.range sliderarrowinc:active { - decorator: image(range-inc-active) -} */ - thead tr { height: 35dp; /* decorator: tiled-horizontal(tableheader-l, tableheader-c, tableheader-r) */ diff --git a/assets/scss/styles/mixins/_helpers.scss b/assets/scss/styles/mixins/_helpers.scss new file mode 100644 index 0000000..7c3cf61 --- /dev/null +++ b/assets/scss/styles/mixins/_helpers.scss @@ -0,0 +1,17 @@ + +%nav-dir { + nav-up: auto; + nav-down: auto; + nav-right: auto; + nav-left: auto; +} + +%nav-foc { + focus: auto; + tab-index: auto; +} + +%nav-all { + @extend %nav-dir; + @extend %nav-foc; +} diff --git a/assets/scss/styles/vars/_transitions.scss b/assets/scss/styles/vars/_transitions.scss new file mode 100644 index 0000000..79fe780 --- /dev/null +++ b/assets/scss/styles/vars/_transitions.scss @@ -0,0 +1,2 @@ +// see: lib/RmlUi/Source/Core/PropertyParserAnimation.cpp +$transition-quick: 0.033s linear-in-out;