Merge remote-tracking branch 'origin/ui' into ui-scaling

assets/scss/styles/components/Button.scss

@@ -30,7 +30,7 @@
     padding: space(24 - 1);
 
     border-radius: $border-radius-md;
-    border-width: space(1);
+    border-width: $border-width-thickness;
     width: auto;
     height: auto;
 

assets/scss/styles/components/CenteredPage.scss

@@ -19,14 +19,13 @@
     position: relative;
     margin: auto;
     flex: 1 1 100%;
-    max-width: space(math.div($base-height*16, 9))dp;
+    max-width: space($base-modal-max-width);
-    // max-width: space(math.div($base-height*4, 3))dp;
     width: 100%;
     height: 100%;
     background: $color-modal-overlay;
     border-radius: $border-radius-modal;
     border-color: $color-bg-shadow;
-    border-width: space(1);
+    border-width: $border-width-thickness;
 }
 
 .centered-page__modal panels {

assets/scss/styles/components/ControlOption.scss

@@ -60,7 +60,7 @@
     padding: space(8);
     background-color: $color-bg-overlay;
     border-color: $color-bg-overlay;
-    border-width: space(1);
+    border-width: $border-width-thickness;
     border-radius: $border-radius-sm;
 
     &:focus, &:hover {

assets/scss/styles/components/IconButton.scss

@@ -14,7 +14,7 @@
     }
 }
 
-$icon-button-size: 56;
+$icon-button-size: 56 - ($border-width-thickness-num * 2);
 
 .icon-button {
     @include set-color($color-text-dim);
@@ -26,7 +26,7 @@ $icon-button-size: 56;
     overflow: hidden;
 
     border-radius: space($icon-button-size * 0.5);
-    border-width: space(1.5);
+    border-width: $border-width-thickness;
     width: space($icon-button-size);
     height: space($icon-button-size);
     min-width: space($icon-button-size);

assets/scss/styles/components/InputConfig.scss

@@ -1,9 +1,8 @@
 @use 'sass:math';
 
 // Probably will need to adjust for other langs...
-$mapping-min-width: 720;
+$mapping-min-width: 80*8;
-// Need to figure out where the -16 comes from...
+$visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width;
-$visual-max-width: math.div($base-height*16, 9) - $page-margin - $page-margin - $mapping-min-width - 16;
 
 .input-config {
     padding: 0;
@@ -39,7 +38,7 @@ $visual-max-width: math.div($base-height*16, 9) - $page-margin - $page-margin -
     width: auto;
     height: auto;
     max-width: space($visual-max-width);
-    max-height: 100%;
+    max-height: space(math.div($visual-max-width, 4) * 3);
     margin: auto 0;
     flex: 1 1 100%;
 }

assets/scss/styles/global.scss

@@ -1,5 +1,6 @@
 @import "./base";
 @import "./globals/old";
+@import "./globals/scrollbars";
 @import "./components/components";
 
 $font-size: 20dp;

assets/scss/styles/globals/_old.scss

@@ -79,7 +79,7 @@ table input.text {
     margin: 0;
     /* padding: 0 5dp; */
     line-height: 1;
-    border-width: 1dp;
+    border-width: $border-width-thickness;
     border-color: #000;
     background-color: #fff;
     font-size: 15dp;
@@ -172,11 +172,6 @@ select selectbox option:hover {
 
 input.radio,
 input.checkbox {
-    /* width: 30dp; */
-    /* height: 30dp; */
-    /* vertical-align: -11dp; */
-    /* margin-top: 4dp; */
-    /* margin-bottom: 4dp; */
     flex: 0;
     tab-index:auto;
     focus:auto;
@@ -186,192 +181,3 @@ input.checkbox {
     nav-left:auto;
     width:0dp;
 }
-
-/* input.radio:checked:hover + label {
-    background: rgb(150,150,150);
-} */
-
-/* input.radio:checked:active {
-    decorator: image(radio-checked-active)
-} */
-
-/* input.checkbox {
-    decorator: image(checkbox)
-}
-
-input.checkbox:hover {
-    decorator: image(checkbox-hover)
-}
-
-input.checkbox:active {
-    decorator: image(checkbox-active)
-}
-
-input.checkbox:checked {
-    decorator: image(checkbox-checked)
-}
-
-input.checkbox:checked:hover {
-    decorator: image(checkbox-checked-hover)
-}
-
-input.checkbox:checked:active {
-    decorator: image(checkbox-checked-active)
-} */
-
-thead tr {
-    height: 35dp;
-    /* decorator: tiled-horizontal(tableheader-l, tableheader-c, tableheader-r) */
-}
-
-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;
-    /* decorator: image(expand) */
-}
-
-/* expand:hover {
-    decorator: image(expand-hover)
-}
-
-expand:active {
-    decorator: image(expand-active)
-}
-
-expand.collapsed {
-    decorator: image(expand-collapsed)
-}
-
-expand.collapsed:hover {
-    decorator: image(expand-collapsed-hover)
-}
-
-expand.collapsed:active {
-    decorator: image(expand-collapsed-active)
-} */
-
-scrollbarvertical {
-    margin-top: -6dp;
-    margin-bottom: -6dp;
-    margin-right: -11dp;
-    width: 27dp
-}
-
-scrollbarvertical slidertrack {
-    /* decorator: tiled-vertical(slidertrack-t, slidertrack-c, slidertrack-b) */
-}
-
-scrollbarvertical slidertrack:active {
-    image-color: #aaa
-}
-
-scrollbarvertical sliderbar {
-    margin-left: 4dp;
-    width: 23dp;
-    min-height: 46dp;
-    /* decorator: tiled-vertical(sliderbar-t, sliderbar-c, sliderbar-b) */
-}
-
-/* scrollbarvertical sliderbar:hover {
-    decorator: tiled-vertical(sliderbar-hover-t, sliderbar-hover-c, sliderbar-hover-b)
-} */
-
-/* scrollbarvertical sliderbar:active {
-    decorator: tiled-vertical(sliderbar-active-t, sliderbar-active-c, sliderbar-active-b)
-} */
-
-scrollbarvertical sliderarrowdec,
-scrollbarvertical sliderarrowinc {
-    width: 27dp;
-    height: 24dp
-}
-
-/* scrollbarvertical sliderarrowdec {
-    decorator: image(sliderarrowdec)
-}
-
-scrollbarvertical sliderarrowdec:hover {
-    decorator: image(sliderarrowdec-hover)
-}
-
-scrollbarvertical sliderarrowdec:active {
-    decorator: image(sliderarrowdec-active)
-}
-
-scrollbarvertical sliderarrowinc {
-    decorator: image(sliderarrowinc)
-}
-
-scrollbarvertical sliderarrowinc:hover {
-    decorator: image(sliderarrowinc-hover)
-}
-
-scrollbarvertical sliderarrowinc:active {
-    decorator: image(sliderarrowinc-active)
-} */
-
-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)
-}

assets/scss/styles/globals/_scrollbars.scss

@@ -0,0 +1,52 @@
+@use 'sass:math';
+
+$scrollbar-width: 12;
+
+@mixin _set-scroll-size($size-key) {
+    #{$size-key}: space($scrollbar-width);
+    
+    slidertrack {
+        #{$size-key}: space($scrollbar-width);
+    }
+    
+    sliderbar {
+        #{$size-key}: space($scrollbar-width);
+    }
+}
+
+scrollbarvertical,scrollbarhorizontal {
+    margin: 0;
+    border: 0;
+    
+    slidertrack {
+        background: $color-primary-l;
+        opacity: 0.05;
+    }
+    
+    sliderbar {
+        border-radius: space(math.div($scrollbar-width, 2) - 1);
+        background: $color-primary-l;
+        opacity: 0.1;
+
+        &:hover:not(:active) {
+            opacity: 0.2;
+        }
+
+        &:active {
+            opacity: 0.3;
+        }
+    }
+    
+    sliderarrowdec, sliderarrowinc {
+        width: 0;
+        height: 0;
+    }
+}
+
+scrollbarvertical {
+    @include _set-scroll-size(width);
+}
+
+scrollbarhorizontal {
+    @include _set-scroll-size(height);
+}

assets/scss/styles/vars/_borders.scss

@@ -6,12 +6,15 @@ $border-radius-lg: 16dp;
 
 $border-radius-modal: $border-radius-lg;
 
+$border-width-thickness-num: 1.5;
+$border-width-thickness: space($border-width-thickness-num);
+
 @mixin border($col: $color-border) {
     border-color: $col;
-    border-width: space(1);
+    border-width: $border-width-thickness;
 }
 
 @mixin border-top($col: $color-border) {
     border-top-color: $col;
-    border-top-width: space(1);
+    border-top-width: $border-width-thickness;
 }

assets/scss/styles/vars/_spacing.scss

@@ -1,3 +1,7 @@
+@use 'sass:math';
 
-$page-margin: 32;
+// $page-margin: 32;
+$page-margin: 64;
 $base-height: 1080;
+$base-modal-height: $base-height - ($page-margin * 2);
+$base-modal-max-width: math.div($base-modal-height * 16, 9);