The-Homebrew-Cloud/Zelda64Recomp
2
0
Fork 0
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git synced 2024-12-23 03:21:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

updated conf menu styling

Browse Source
This commit is contained in:
thecozies 2024-01-06 18:04:28 -06:00
parent 8510bb9109
commit 7a27d6555c
13 changed files with 284 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
assets/config_menu.rml
View File

@ -30,90 +30,92 @@
<body class="window">
<!-- <handle move_target="#document"> -->
<div id="window" style="display:flex; flex-flow: column; text-align:center; background-color:rgba(0,0,0,0)">
<div style="flex:1 1 auto">
<tabset>
<tab id="tab_graphics" autofocus>Graphics</tab>
<panel data-model="graphics_model">
<form>
<div class="option_container">
<div style="flex: 1 1 100%">
<tabset class="centered-page tabs">
<tab class="tab" id="tab_graphics" autofocus>Graphics</tab>
<panel class="config" data-model="graphics_model">
<form class="config__form">
<div class="config__wrapper">
<div class="option_row">
<div class="option">
<label class="option_title">Resolution</label><br/>
<hr/>
<div class="option_list">
<div class="config-option">
<label class="config-option__title">Resolution</label>
<div class="config-option__list config-option__list">
<input type="radio" name="resolution" data-checked="res_option" value="Original" id="res_original"/>
<label for="res_original">Original</label>
<label class="config-option__tab-label" for="res_original">Original</label>
<input type="radio" name="resolution" data-checked="res_option" value="Original2x" id="res_2x" style="nav-down:#ar_expand"/>
<label for="res_2x">Original 2x</label>
<label class="config-option__tab-label" for="res_2x">Original 2x</label>
<input type="radio" name="resolution" data-checked="res_option" value="Auto" id="res_auto" style="nav-down:#ar_expand"/>
<label for="res_auto">Auto</label>
<label class="config-option__tab-label" for="res_auto">Auto</label>
</div>
</div>
<div class="option">
<label class="option_title">Window Mode</label><br/>
<hr/>
<div class="option_list">
<div class="config-option">
<label class="config-option__title">Window Mode</label>
<div class="config-option__list config-option__list">
<input type="radio" name="windowmode" data-checked="wm_option" value="Windowed" id="wm_windowed" style="nav-down:#msaa_none"/>
<label for="wm_windowed">Windowed</label>
<label class="config-option__tab-label" for="wm_windowed">Windowed</label>
<input type="radio" name="windowmode" data-checked="wm_option" value="Fullscreen" id="wm_fullscreen" style="nav-right:none"/>
<label for="wm_fullscreen">Fullscreen</label>
<label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
</div>
</div>
</div>
<div class="option_row">
<div class="option">
<label class="option_title">Aspect Ratio</label><br/>
<hr/>
<div class="option_list">
<div class="config-option">
<label class="config-option__title">Aspect Ratio</label>
<div class="config-option__list config-option__list">
<input type="radio" name="aspectratio" data-checked="ar_option" value="Original" id="ar_original" style="nav-left:none"/>
<label for="ar_original">Original</label>
<label class="config-option__tab-label" for="ar_original">Original</label>
<input type="radio" name="aspectratio" data-checked="ar_option" value="Expand" id="ar_expand" style="nav-up:#res_2x"/>
<label for="ar_expand">Expand</label>
<label class="config-option__tab-label" for="ar_expand">Expand</label>
</div>
</div>
<div class="option">
<label class="option_title">MS Anti-Aliasing</label><br/>
<hr/>
<div class="option_list">
<div class="config-option">
<label class="config-option__title">MS Anti-Aliasing</label>
<div class="config-option__list config-option__list">
<input type="radio" name="antialiasing" data-checked="msaa_option" value="None" id="msaa_none" style="nav-up:#wm_windowed;nav-down:#rr_manual"/>
<label for="msaa_none">None</label>
<label class="config-option__tab-label" for="msaa_none">None</label>
<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA2X" id="msaa_2x" style="nav-down:#rr_manual"/>
<label for="msaa_2x">2x</label>
<label class="config-option__tab-label" for="msaa_2x">2x</label>
<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA4X" id="msaa_4x" style="nav-down:#rr_manual"/>
<label for="msaa_4x">4x</label>
<label class="config-option__tab-label" for="msaa_4x">4x</label>
<input type="radio" name="antialiasing" data-checked="msaa_option" value="MSAA8X" id="msaa_8x" style="nav-right:none;nav-down:#rr_manual"/>
<label for="msaa_8x">8x</label>
<label class="config-option__tab-label" for="msaa_8x">8x</label>
</div>
</div>
</div>
<div class="option_row">
<div class="option">
<label class="option_title">Framerate</label><br/>
<hr/>
<div class="option_list">
<div class="config-option">
<label class="config-option__title">Framerate</label>
<div class="config-option__list config-option__list">
<input type="radio" name="refreshrate" data-checked="rr_option" value="Original" id="rr_original" style="nav-up:#ar_expand"/>
<label for="rr_original">Original</label>
<label class="config-option__tab-label" for="rr_original">Original</label>
<input type="radio" name="refreshrate" data-checked="rr_option" value="Display" id="rr_display" style="nav-up:#ar_expand"/>
<label for="rr_display">Display</label>
<label class="config-option__tab-label" for="rr_display">Display</label>
<input type="radio" name="refreshrate" data-checked="rr_option" value="Manual" id="rr_manual" style="nav-up:#msaa_none;nav-right:none"/>
<label for="rr_manual">Manual</label>
<label class="config-option__tab-label" for="rr_manual">Manual</label>
</div>
<div data-if="rr_option=='Manual'" class="option_list" style="padding:10dp">
<input id="rr_manual_input" type="range" min="20" max="1000" style="flex:1;margin-left:30dp;margin-right:30dp;nav-up:auto;nav-down:auto;" data-value="rr_manual_value"/>
<label style="flex:0 0 50dp">{{rr_manual_value}}</label>
<div data-if="rr_option=='Manual'" class="config-option__list">
<label class="config-option__range-label">{{rr_manual_value}}</label>
<input id="rr_manual_input" type="range" min="20" max="360" style="flex:1;margin: 0dp;nav-up:auto;nav-down:auto;" data-value="rr_manual_value"/>
</div>
</div>
</div>
<button nav-return="rr_manual" style="margin-top:10dp;margin-left:auto;margin-right:auto;width:100dp" data-attrif-disabled="!options_changed" onclick="apply_options">Apply</button>
<button
class="button"
nav-return="rr_manual"
data-attrif-disabled="!options_changed"
onclick="apply_options"
>
<div>Apply</div>
</button>
</div>
</form>
</panel>
<tab>Controls</tab>
<tab class="tab">Controls</tab>
<panel>
</panel>
<tab>Sound</tab>
<tab class="tab">Sound</tab>
<panel>
</panel>
</tabset>

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

1
assets/scss/package.json
View File

@ -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": "",

2
assets/scss/styles/base.scss
View File

@ -1,2 +1,4 @@
@import "./vars/colors";
@import "./vars/transitions";
@import "./mixins/typography";
@import "./mixins/helpers";

30
assets/scss/styles/components/Button.scss Normal file
View File

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

18
assets/scss/styles/components/CenteredPage.scss Normal file
View File

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

122
assets/scss/styles/components/Config.scss Normal file
View File

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

34
assets/scss/styles/components/Tabs.scss Normal file
View File

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

4
assets/scss/styles/components/_components.scss Normal file
View File

@ -0,0 +1,4 @@
@import "./CenteredPage";
@import "./Tabs";
@import "./Config";
@import "./Button";

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

@ -1,5 +1,6 @@
@import "./base";
@import "./globals/old";
@import "./components/components";
$font-stack: chiaro;

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

@ -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) */

17
assets/scss/styles/mixins/_helpers.scss Normal file
View File

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

2
assets/scss/styles/vars/_transitions.scss Normal file
View File

@ -0,0 +1,2 @@
// see: lib/RmlUi/Source/Core/PropertyParserAnimation.cpp
$transition-quick: 0.033s linear-in-out;