Mirrors
/
Zelda64Recomp
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new launcher and overall ui updates

This commit is contained in:
thecozies 2024-01-07 15:33:22 -06:00
parent c26151cd6b
commit ccc240d255
18 changed files with 403 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
assets/config_menu.rml
View File

@ -29,14 +29,17 @@
</head>
<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 100%">
<tabset class="centered-page tabs">
<tab class="tab" id="tab_graphics" autofocus>Graphics</tab>
<div id="window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)">
<div class="centered-page">
<tabset class="centered-page__modal tabs">
<tab class="tab" id="tab_graphics" autofocus>
<div>Graphics</div>
<div class="tab__indicator"></div>
</tab>
<panel class="config" data-model="graphics_model">
<form class="config__form">
<div class="config__wrapper">
<div class="option_row">
<div class="config__row">
<div class="config-option">
<label class="config-option__title">Resolution</label>
<div class="config-option__list config-option__list">
@ -58,7 +61,7 @@
</div>
</div>
</div>
<div class="option_row">
<div class="config__row">
<div class="config-option">
<label class="config-option__title">Aspect Ratio</label>
<div class="config-option__list config-option__list">
@ -83,7 +86,7 @@
</div>
</div>
<div class="option_row">
<div class="config__row">
<div class="config-option">
<label class="config-option__title">Framerate</label>
<div class="config-option__list config-option__list">
@ -94,29 +97,38 @@
<input type="radio" name="refreshrate" data-checked="rr_option" value="Manual" id="rr_manual" style="nav-up:#msaa_none;nav-right:none"/>
<label class="config-option__tab-label" for="rr_manual">Manual</label>
</div>
<div data-if="rr_option=='Manual'" class="config-option__list">
<div data-if="rr_option=='Manual'" class="config-option__range-wrapper 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>
</div>
<div class="config__footer">
<div>
<button
class="button"
nav-return="rr_manual"
data-attrif-disabled="!options_changed"
onclick="apply_options"
>
<div>Apply</div>
<div class="button__label">Apply</div>
</button>
</div>
</div>
</form>
</panel>
<tab class="tab">Controls</tab>
<panel>
<tab class="tab">
<div>Controls</div>
<div class="tab__indicator"></div>
</tab>
<panel class="config" >
</panel>
<tab class="tab">Sound</tab>
<panel>
<tab class="tab">
<div>Sound</div>
<div class="tab__indicator"></div>
</tab>
<panel class="config" >
</panel>
</tabset>
</div>

46
assets/launcher.rml
View File

@ -13,14 +13,44 @@
</head>
<body>
<div id="window">
<h1>Header-1</h1><br />
<h2>Header-2</h2><br />
<h3>Header-3</h3><br />
<h4>Label-LG</h4><br />
<h5>Label-MD</h5><br />
<h6>Label-SM</h6><br />
<div>Body</div><br />
<button onclick="start_game" style="align-self: center;">Start Game</button>
<div class="launcher">
<div class="launcher__vertical-split">
<div class="launcher__title-quadrant">
<button class="subtitle-title" disabled>
<div><h3>Zelda 64: Recompiled</h3></div>
<div><h1>Ocarina of Time</h1></div>
<div class="subtitle-title__disclaimer">Coming Soon™</div>
</button>
</div>
<div class="launcher__content-quadrant"></div>
</div>
<div class="launcher__vertical-split launcher__vertical-split--right">
<div class="launcher__title-quadrant launcher__title-quadrant--right">
<button class="subtitle-title subtitle-title--right" selected>
<div><h3>Zelda 64: Recompiled</h3></div>
<div><h1>Majora's Mask</h1></div>
</button>
</div>
<div class="launcher__content-quadrant">
<button onclick="start_game" class="menu-list-item menu-list-item--right" autofocus>
<div class="menu-list-item__bullet">•</div>
<div class="menu-list-item__label">Start game</div>
</button>
<button class="menu-list-item menu-list-item--right">
<div class="menu-list-item__bullet">•</div>
<div class="menu-list-item__label">Setup controls</div>
</button>
<button class="menu-list-item menu-list-item--right">
<div class="menu-list-item__bullet">•</div>
<div class="menu-list-item__label">Settings</div>
</button>
<button class="menu-list-item menu-list-item--right">
<div class="menu-list-item__bullet">•</div>
<div class="menu-list-item__label">Exit</div>
</button>
</div>
</div>
</div>
</div>
</body>
</rml>

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

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

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

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

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

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

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

33
assets/scss/styles/components/Config.scss
View File

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

53
assets/scss/styles/components/Launcher.scss Normal file
View File

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

70
assets/scss/styles/components/MenuListItem.scss Normal file
View File

@ -0,0 +1,70 @@
/*
Example layout:
<button class="menu-list-item menu-list-item--right">
<div class="menu-list-item__bullet">•</div>
<div class="menu-list-item__label">Setup controls</div>
</button>
- Variants:
.menu-list-item--right (align to right side)
- Optional:
- <div class="subtitle-title__disclaimer">Coming Soon™</div>
*/
.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);
}

71
assets/scss/styles/components/SubtitleTitle.scss Normal file
View File

@ -0,0 +1,71 @@
/*
Example layout:
<button class="subtitle-title" disabled>
<h3>Zelda 64: Recompiled</h3>
<h1>Ocarina of Time</h1>
<div class="subtitle-title__disclaimer">Coming Soon™</div>
</button>
- Variants:
.subtitle-title--right (align to right side)
- Optional:
- <div class="subtitle-title__disclaimer">Coming Soon™</div>
*/
.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);
}
}

26
assets/scss/styles/components/Tabs.scss
View File

@ -1,3 +1,11 @@
/*
Example:
<tab class="tab">
<div>Graphics</div>
<div class="tab__indicator"></div>
</tab>
*/
.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;
}

3
assets/scss/styles/components/_components.scss
View File

@ -2,3 +2,6 @@
@import "./Tabs";
@import "./Config";
@import "./Button";
@import "./Launcher";
@import "./MenuListItem";
@import "./SubtitleTitle";

4
assets/scss/styles/functions/_spacing.scss Normal file
View File

@ -0,0 +1,4 @@
@function space($amt) {
@return #{$amt}dp;
}

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

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

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

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

17
assets/scss/styles/vars/_borders.scss Normal file
View File

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

11
assets/scss/styles/vars/_colors.scss
View File

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

7
assets/scss/styles/vars/_gradients.scss Normal file
View File

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