mirror of
https://github.com/Mr-Wiseguy/Zelda64Recomp.git
synced 2024-11-09 15:55:06 +01:00
new launcher and overall ui updates
This commit is contained in:
parent
c26151cd6b
commit
ccc240d255
@ -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>
|
||||||
|
<div class="config__footer">
|
||||||
|
<div>
|
||||||
<button
|
<button
|
||||||
class="button"
|
class="button"
|
||||||
nav-return="rr_manual"
|
nav-return="rr_manual"
|
||||||
data-attrif-disabled="!options_changed"
|
data-attrif-disabled="!options_changed"
|
||||||
onclick="apply_options"
|
onclick="apply_options"
|
||||||
>
|
>
|
||||||
<div>Apply</div>
|
<div class="button__label">Apply</div>
|
||||||
</button>
|
</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>
|
||||||
|
@ -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>
|
||||||
|
File diff suppressed because one or more lines are too long
@ -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";
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
@ -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
53
assets/scss/styles/components/Launcher.scss
Normal 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
70
assets/scss/styles/components/MenuListItem.scss
Normal 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
71
assets/scss/styles/components/SubtitleTitle.scss
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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
4
assets/scss/styles/functions/_spacing.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
@function space($amt) {
|
||||||
|
@return #{$amt}dp;
|
||||||
|
}
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
17
assets/scss/styles/vars/_borders.scss
Normal 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,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
7
assets/scss/styles/vars/_gradients.scss
Normal 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);
|
Loading…
Reference in New Issue
Block a user