updated conf menu styling
This commit is contained in:
thecozies
parent
8510bb9109
commit
7a27d6555c
|
|
@ -30,90 +30,92 @@
|
||||||
<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; text-align:center; background-color:rgba(0,0,0,0)">
|
||||||
<div style="flex:1 1 auto">
|
<div style="flex: 1 1 100%">
|
||||||
<tabset>
|
<tabset class="centered-page tabs">
|
||||||
<tab id="tab_graphics" autofocus>Graphics</tab>
|
<tab class="tab" id="tab_graphics" autofocus>Graphics</tab>
|
||||||
<panel data-model="graphics_model">
|
<panel class="config" data-model="graphics_model">
|
||||||
<form>
|
<form class="config__form">
|
||||||
<div class="option_container">
|
<div class="config__wrapper">
|
||||||
<div class="option_row">
|
<div class="option_row">
|
||||||
<div class="option">
|
<div class="config-option">
|
||||||
<label class="option_title">Resolution</label><br/>
|
<label class="config-option__title">Resolution</label>
|
||||||
<hr/>
|
<div class="config-option__list config-option__list">
|
||||||
<div class="option_list">
|
|
||||||
<input type="radio" name="resolution" data-checked="res_option" value="Original" id="res_original"/>
|
<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"/>
|
<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"/>
|
<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>
|
</div>
|
||||||
<div class="option">
|
<div class="config-option">
|
||||||
<label class="option_title">Window Mode</label><br/>
|
<label class="config-option__title">Window Mode</label>
|
||||||
<hr/>
|
<div class="config-option__list config-option__list">
|
||||||
<div class="option_list">
|
|
||||||
<input type="radio" name="windowmode" data-checked="wm_option" value="Windowed" id="wm_windowed" style="nav-down:#msaa_none"/>
|
<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"/>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="option_row">
|
<div class="option_row">
|
||||||
<div class="option">
|
<div class="config-option">
|
||||||
<label class="option_title">Aspect Ratio</label><br/>
|
<label class="config-option__title">Aspect Ratio</label>
|
||||||
<hr/>
|
<div class="config-option__list config-option__list">
|
||||||
<div class="option_list">
|
|
||||||
<input type="radio" name="aspectratio" data-checked="ar_option" value="Original" id="ar_original" style="nav-left:none"/>
|
<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"/>
|
<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>
|
</div>
|
||||||
<div class="option">
|
<div class="config-option">
|
||||||
<label class="option_title">MS Anti-Aliasing</label><br/>
|
<label class="config-option__title">MS Anti-Aliasing</label>
|
||||||
<hr/>
|
<div class="config-option__list config-option__list">
|
||||||
<div class="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"/>
|
<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"/>
|
<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"/>
|
<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"/>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="option_row">
|
<div class="option_row">
|
||||||
<div class="option">
|
<div class="config-option">
|
||||||
<label class="option_title">Framerate</label><br/>
|
<label class="config-option__title">Framerate</label>
|
||||||
<hr/>
|
<div class="config-option__list config-option__list">
|
||||||
<div class="option_list">
|
|
||||||
<input type="radio" name="refreshrate" data-checked="rr_option" value="Original" id="rr_original" style="nav-up:#ar_expand"/>
|
<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"/>
|
<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"/>
|
<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>
|
||||||
<div data-if="rr_option=='Manual'" class="option_list" style="padding:10dp">
|
<div data-if="rr_option=='Manual'" class="config-option__list">
|
||||||
<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 class="config-option__range-label">{{rr_manual_value}}</label>
|
||||||
<label style="flex:0 0 50dp">{{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>
|
</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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</panel>
|
</panel>
|
||||||
<tab>Controls</tab>
|
<tab class="tab">Controls</tab>
|
||||||
<panel>
|
<panel>
|
||||||
</panel>
|
</panel>
|
||||||
<tab>Sound</tab>
|
<tab class="tab">Sound</tab>
|
||||||
<panel>
|
<panel>
|
||||||
</panel>
|
</panel>
|
||||||
</tabset>
|
</tabset>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -6,6 +6,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss",
|
"start": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss",
|
||||||
"watch": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss --watch",
|
"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'"
|
"lint": "stylelint '.\\**\\*.scss'"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "",
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,4 @@
|
||||||
@import "./vars/colors";
|
@import "./vars/colors";
|
||||||
|
@import "./vars/transitions";
|
||||||
@import "./mixins/typography";
|
@import "./mixins/typography";
|
||||||
|
@import "./mixins/helpers";
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
@import "./CenteredPage";
|
||||||
|
@import "./Tabs";
|
||||||
|
@import "./Config";
|
||||||
|
@import "./Button";
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
@import "./base";
|
@import "./base";
|
||||||
@import "./globals/old";
|
@import "./globals/old";
|
||||||
|
@import "./components/components";
|
||||||
|
|
||||||
|
|
||||||
$font-stack: chiaro;
|
$font-stack: chiaro;
|
||||||
|
|
|
||||||
|
|
@ -21,45 +21,13 @@ body {
|
||||||
focus:none;
|
focus:none;
|
||||||
tab-index: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 {
|
div.option_row {
|
||||||
display:flex;
|
display: flex;
|
||||||
|
gap: 2dp;
|
||||||
flex-direction: row;
|
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 {
|
div#title_bar {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -94,9 +62,8 @@ div#window {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10dp 15dp;
|
background-color: $color-background-2;
|
||||||
background-color: #004164;
|
border-color: $color-border;
|
||||||
border-color: red
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div#content {
|
div#content {
|
||||||
|
|
@ -130,70 +97,6 @@ input.submit {
|
||||||
margin-left: 0
|
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.text,
|
||||||
input.password {
|
input.password {
|
||||||
|
|
@ -336,90 +239,6 @@ input.checkbox {
|
||||||
width:0dp;
|
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 {
|
/* input.radio:checked:hover + label {
|
||||||
background: rgb(150,150,150);
|
background: rgb(150,150,150);
|
||||||
} */
|
} */
|
||||||
|
|
@ -452,71 +271,6 @@ input.checkbox:checked:active {
|
||||||
decorator: image(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 {
|
thead tr {
|
||||||
height: 35dp;
|
height: 35dp;
|
||||||
/* decorator: tiled-horizontal(tableheader-l, tableheader-c, tableheader-r) */
|
/* decorator: tiled-horizontal(tableheader-l, tableheader-c, tableheader-r) */
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
// see: lib/RmlUi/Source/Core/PropertyParserAnimation.cpp
|
||||||
|
$transition-quick: 0.033s linear-in-out;
|
||||||
Loading…
Reference in New Issue