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

54
assets/config_menu.rml
View File

@ -29,14 +29,17 @@
</head> </head>
<body class="window"> <body class="window">
<!-- <handle move_target="#document"> --> <!-- <handle move_target="#document"> -->
<div id="window" style="display:flex; flex-flow: column; text-align:center; background-color:rgba(0,0,0,0)"> <div id="window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)">
<div style="flex: 1 1 100%"> <div class="centered-page">
<tabset class="centered-page tabs"> <tabset class="centered-page__modal tabs">
<tab class="tab" id="tab_graphics" autofocus>Graphics</tab> <tab class="tab" id="tab_graphics" autofocus>
<div>Graphics</div>
<div class="tab__indicator"></div>
</tab>
<panel class="config" data-model="graphics_model"> <panel class="config" data-model="graphics_model">
<form class="config__form"> <form class="config__form">
<div class="config__wrapper"> <div class="config__wrapper">
<div class="option_row"> <div class="config__row">
<div class="config-option"> <div class="config-option">
<label class="config-option__title">Resolution</label> <label class="config-option__title">Resolution</label>
<div class="config-option__list config-option__list"> <div class="config-option__list config-option__list">
@ -58,7 +61,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="option_row"> <div class="config__row">
<div class="config-option"> <div class="config-option">
<label class="config-option__title">Aspect Ratio</label> <label class="config-option__title">Aspect Ratio</label>
<div class="config-option__list config-option__list"> <div class="config-option__list config-option__list">
@ -83,7 +86,7 @@
</div> </div>
</div> </div>
<div class="option_row"> <div class="config__row">
<div class="config-option"> <div class="config-option">
<label class="config-option__title">Framerate</label> <label class="config-option__title">Framerate</label>
<div class="config-option__list config-option__list"> <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"/> <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> <label class="config-option__tab-label" for="rr_manual">Manual</label>
</div> </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> <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"/> <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> </div>
</div>
<button <div class="config__footer">
class="button" <div>
nav-return="rr_manual" <button
data-attrif-disabled="!options_changed" class="button"
onclick="apply_options" nav-return="rr_manual"
> data-attrif-disabled="!options_changed"
<div>Apply</div> onclick="apply_options"
</button> >
<div class="button__label">Apply</div>
</button>
</div>
</div> </div>
</form> </form>
</panel> </panel>
<tab class="tab">Controls</tab> <tab class="tab">
<panel> <div>Controls</div>
<div class="tab__indicator"></div>
</tab>
<panel class="config" >
</panel> </panel>
<tab class="tab">Sound</tab> <tab class="tab">
<panel> <div>Sound</div>
<div class="tab__indicator"></div>
</tab>
<panel class="config" >
</panel> </panel>
</tabset> </tabset>
</div> </div>

46
assets/launcher.rml
View File

@ -13,14 +13,44 @@
</head> </head>
<body> <body>
<div id="window"> <div id="window">
<h1>Header-1</h1><br /> <div class="launcher">
<h2>Header-2</h2><br /> <div class="launcher__vertical-split">
<h3>Header-3</h3><br /> <div class="launcher__title-quadrant">
<h4>Label-LG</h4><br /> <button class="subtitle-title" disabled>
<h5>Label-MD</h5><br /> <div><h3>Zelda 64: Recompiled</h3></div>
<h6>Label-SM</h6><br /> <div><h1>Ocarina of Time</h1></div>
<div>Body</div><br /> <div class="subtitle-title__disclaimer">Coming Soon™</div>
<button onclick="start_game" style="align-self: center;">Start Game</button> </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> </div>
</body> </body>
</rml> </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/colors";
@import "./vars/borders";
@import "./vars/gradients";
@import "./vars/transitions"; @import "./vars/transitions";
@import "./mixins/typography"; @import "./mixins/typography";
@import "./mixins/helpers"; @import "./mixins/helpers";

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

@ -1,30 +1,36 @@
@use 'sass:color';
.button { .button {
@extend %label-md; @extend %label-md;
margin: auto;
display: block; display: block;
align-items: center; padding: 16dp 20dp;
justify-content: center; background-color: rgba($color-primary-d, 0.8);
padding: 12dp;
background-color: $color-primary-d;
color: $color-text; color: $color-text;
border-radius: 8dp; border-radius: $border-radius-md;
width: auto;
height: auto;
&:not([disabled]) { &:not([disabled]) {
@extend %nav-all; @extend %nav-all;
} }
&:focus { &:focus {
color: $color-primary-l; // color: $color-primary-l;
background-color: $color-primary-d;
} }
&:disabled,&[disabled] { &:disabled,&[disabled] {
opacity: 0.5; opacity: 0.5;
background-color: $color-primary-d;
color: $color-text-inactive; color: $color-text-inactive;
} }
&:active { &: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 { .centered-page {
display: flex;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: space($page-margin);
}
.centered-page__modal {
@extend %nav-all; @extend %nav-all;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin: #{$page-margin}dp auto; margin: auto;
// 16:9 flex: 1 1 100%;
// max-width: 1280dp; max-width: space(math.div($base-height*4, 3))dp;
// 4:3
max-width: #{960 - ($page-margin * 2)}dp;
width: 100%; width: 100%;
height: #{720 - ($page-margin * 2)}dp; height: 100%;
background: $color-bg-shadow-2; 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 { .config__form {
@include border-top($color-border-soft);
display: flex; display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1 1 100%; flex: 1 1 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: $color-bg-shadow; border-bottom-left-radius: $border-radius-modal;
border-bottom-right-radius: $border-radius-modal;
} }
.config__wrapper { .config__wrapper {
@ -15,7 +19,24 @@
height: 100%; height: 100%;
padding: 16dp; padding: 16dp;
text-align: left; 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 { .config-option {
@ -28,7 +49,7 @@
.config-option__title { .config-option__title {
@extend %label-md; @extend %label-md;
padding: 16dp 12dp 0; padding: 12dp 12dp 0;
} }
.config-option__list { .config-option__list {
@ -40,7 +61,6 @@
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
// background-color: $color-error-d;
.config-option__tab-label { .config-option__tab-label {
@extend %label-sm; @extend %label-sm;
@ -109,6 +129,11 @@
} }
} }
.config-option__range-wrapper {
margin-top: space(4);
max-width: space(360);
}
.config-option__range-label { .config-option__range-label {
@extend %label-sm; @extend %label-sm;
flex: 0 0 16dp; 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);
}
}

28
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 { .tabs tabs {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -8,17 +16,20 @@
.tab { .tab {
@extend %nav-all; @extend %nav-all;
display: block; display: block;
padding: 24dp 24dp; position: relative;
padding: space(20) space(24);
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
margin: 0; margin: 0;
color: $color-text-inactive; color: $color-text-inactive;
transition: color $transition-quick; transition: color $transition-quick;
&:selected { &:selected {
border-bottom: 2dp;
border-color: $color-border-solid;
color: $color-text; color: $color-text;
.tab__indicator {
background-color: $color-border-solid;
}
&:hover { &:hover {
cursor: default; cursor: default;
} }
@ -32,3 +43,12 @@
color: $color-text; 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 "./Tabs";
@import "./Config"; @import "./Config";
@import "./Button"; @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; @extend %header-3;
} }
h4 { .label-lg {
@extend %label-lg; @extend %label-lg;
} }
h5 { .label-md {
@extend %label-md; @extend %label-md;
} }
h6 { .label-sm {
@extend %label-sm; @extend %label-sm;
} }

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

@ -22,43 +22,8 @@ body {
tab-index:none; 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 { div#window {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -76,21 +41,6 @@ div#content {
p { p {
text-align: left; 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 { input.submit {
@ -103,14 +53,12 @@ input.password {
box-sizing: border-box; box-sizing: border-box;
height: 31dp; height: 31dp;
padding: 11dp 10dp 0; padding: 11dp 10dp 0;
/* decorator: tiled-horizontal(text-l, text-c, auto); */
cursor: text; cursor: text;
text-align: left text-align: left
} }
textarea { textarea {
padding: 14dp 12dp 10dp; padding: 14dp 12dp 10dp;
/* decorator: ninepatch(textarea, textarea-inner, 1); */
cursor: text; cursor: text;
text-align: left 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-text-inactive: rgba(255, 255, 255, 0.6000);
$color-primary: #B97DF2; $color-primary: #B97DF2;
$color-primary-l: #DABAF7; $color-primary-l: #DABAF7;
$color-primary-d: #4E1B7E; $color-primary-d: #7A2AC6;
$color-secondary: #17D6E8; $color-secondary: #17D6E8;
$color-secondary-l: #A2EFF6; $color-secondary-l: #A2EFF6;
$color-secondary-d: #124E54; $color-secondary-d: #25A1AD;
$color-warning: #E9CD35; $color-warning: #E9CD35;
$color-warning-l: #F9E57C; $color-warning-l: #F9E57C;
$color-warning-d: #8A770F; $color-warning-d: #C5AA16;
$color-error: #F86039; $color-error: #F86039;
$color-error-l: #FE8667; $color-error-l: #FE8667;
$color-error-d: #591C0D; $color-error-d: #B23919;
$color-success: #45D043; $color-success: #45D043;
$color-success-l: #AAEAA9; $color-success-l: #AAEAA9;
$color-success-d: #207A1F; $color-success-d: #2CA72A;
$color-border: rgba(255, 255, 255, 0.2000); $color-border: rgba(255, 255, 255, 0.2000);
$color-border-soft: rgba(255, 255, 255, 0.1000); $color-border-soft: rgba(255, 255, 255, 0.1000);
$color-border-hard: rgba(255, 255, 255, 0.3000); $color-border-hard: rgba(255, 255, 255, 0.3000);
$color-border-solid: rgba(255, 255, 255, 0.6000); $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);