The-Homebrew-Cloud/Zelda64Recomp
2
0
Fork 0
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git synced 2024-09-05 20:07:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixed various ui positioning issues + scrollbar

Browse Source
This commit is contained in:
thecozies 2024-01-19 13:06:06 -06:00
parent 340b838001
commit 4de0693328
11 changed files with 74 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

2
assets/scss/styles/components/Button.scss
View File

@ -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;

5
assets/scss/styles/components/CenteredPage.scss
View File

@ -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(math.div($base-height*4, 3))dp;
max-width: space($base-modal-max-width);
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 {

2
assets/scss/styles/components/ControlOption.scss
View File

@ -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 {

4
assets/scss/styles/components/IconButton.scss
View File

@ -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);

7
assets/scss/styles/components/InputConfig.scss
View File

@ -1,9 +1,8 @@
@use 'sass:math';
// Probably will need to adjust for other langs...
$mapping-min-width: 720;
// Need to figure out where the -16 comes from...
$visual-max-width: math.div($base-height*16, 9) - $page-margin - $page-margin - $mapping-min-width - 16;
$mapping-min-width: 80*8;
$visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width;
.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%;
}

1
assets/scss/styles/global.scss
View File

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

196
assets/scss/styles/globals/_old.scss
View File

@ -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)
}

52
assets/scss/styles/globals/_scrollbars.scss Normal file
View File

@ -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);
}

7
assets/scss/styles/vars/_borders.scss
View File

@ -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;
}

6
assets/scss/styles/vars/_spacing.scss
View File

@ -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);