config related style/layout updates
This commit is contained in:
thecozies
Mr-Wiseguy
parent
7b194955c5
commit
2718bfc87c
|
|
@ -30,179 +30,265 @@
|
|||
<body class="window">
|
||||
<!-- <handle move_target="#document"> -->
|
||||
<div id="window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)" onkeydown="config_keydown">
|
||||
<div class="centered-page">
|
||||
<tabset class="centered-page__modal tabs" id="config_tabset">
|
||||
<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="config__row">
|
||||
<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" style="nav-left:none;nav-up:#tab_graphics"/>
|
||||
<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-up:#tab_graphics"/>
|
||||
<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;nav-up:#tab_graphics"/>
|
||||
<label class="config-option__tab-label" for="res_auto">Auto</label>
|
||||
<div class="centered-page" onclick="close_config_menu_backdrop">
|
||||
<div class="centered-page__modal">
|
||||
<tabset class="tabs" id="config_tabset">
|
||||
<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="config__row">
|
||||
<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" style="nav-left:none;nav-up:#tab_graphics"/>
|
||||
<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-up:#tab_graphics"/>
|
||||
<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;nav-up:#tab_graphics"/>
|
||||
<label class="config-option__tab-label" for="res_auto">Auto</label>
|
||||
</div>
|
||||
</div>
|
||||
<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-up:#tab_graphics"/>
|
||||
<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;nav-up:#tab_graphics"/>
|
||||
<label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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-up:#tab_graphics"/>
|
||||
<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;nav-up:#tab_graphics"/>
|
||||
<label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
|
||||
<div class="config__row">
|
||||
<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 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 class="config-option__tab-label" for="ar_expand">Expand</label>
|
||||
</div>
|
||||
</div>
|
||||
<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-down:#apply_button"/>
|
||||
<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:#apply_button"/>
|
||||
<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:#apply_button"/>
|
||||
<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:#apply_button"/>
|
||||
<label class="config-option__tab-label" for="msaa_8x">8x</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config__row">
|
||||
<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-left:none;nav-down:#apply_button"/>
|
||||
<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-down:#apply_button"/>
|
||||
<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:#ar_expand;nav-down:#apply_button"/>
|
||||
<label class="config-option__tab-label" for="rr_manual">Manual</label>
|
||||
</div>
|
||||
<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__row">
|
||||
<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 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 class="config-option__tab-label" for="ar_expand">Expand</label>
|
||||
</div>
|
||||
</div>
|
||||
<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-down:#apply_button"/>
|
||||
<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:#apply_button"/>
|
||||
<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:#apply_button"/>
|
||||
<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:#apply_button"/>
|
||||
<label class="config-option__tab-label" for="msaa_8x">8x</label>
|
||||
</div>
|
||||
<div class="config__footer">
|
||||
<!-- this empty div makes sure Apply button gets right aligned -->
|
||||
<div/>
|
||||
<div>
|
||||
<button
|
||||
class="button button--secondary"
|
||||
nav-return="rr_manual"
|
||||
data-attrif-disabled="!options_changed"
|
||||
onclick="apply_options"
|
||||
id="apply_button"
|
||||
>
|
||||
<div class="button__label">Apply</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config__row">
|
||||
<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-left:none;nav-down:#apply_button"/>
|
||||
<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-down:#apply_button"/>
|
||||
<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:#ar_expand;nav-down:#apply_button"/>
|
||||
<label class="config-option__tab-label" for="rr_manual">Manual</label>
|
||||
</div>
|
||||
<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 button--secondary"
|
||||
nav-return="rr_manual"
|
||||
data-attrif-disabled="!options_changed"
|
||||
onclick="apply_options"
|
||||
id="apply_button"
|
||||
>
|
||||
<div class="button__label">Apply</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</panel>
|
||||
<tab class="tab">
|
||||
<div>Controls</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config" data-model="controls_model">
|
||||
<form class="config__form" data-attr-cur-input="cur_input_row">
|
||||
<div class="config__wrapper input-config">
|
||||
<div class="input-config__horizontal-split">
|
||||
<div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
|
||||
<div class="input-config__mappings-scroll">
|
||||
<div class="input-config__mappings-wrapper">
|
||||
<div
|
||||
class="control-option"
|
||||
id="input_row"
|
||||
data-for="input_bindings, i : inputs.array"
|
||||
data-event-mouseover="set_input_row_focus(i)"
|
||||
>
|
||||
<label
|
||||
class="control-option__label"
|
||||
</form>
|
||||
</panel>
|
||||
<tab class="tab">
|
||||
<div>Controls</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config" data-model="controls_model">
|
||||
<form class="config__form" data-attr-cur-input="cur_input_row">
|
||||
<div class="config__wrapper input-config">
|
||||
<div class="input-config__horizontal-split">
|
||||
<div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
|
||||
<div class="input-config__mappings-scroll">
|
||||
<div class="input-config__mappings-wrapper">
|
||||
<div
|
||||
class="control-option"
|
||||
id="input_row"
|
||||
data-for="input_bindings, i : inputs.array"
|
||||
data-event-mouseover="set_input_row_focus(i)"
|
||||
>
|
||||
<label
|
||||
class="control-option__label"
|
||||
>{{get_input_name(i)}}</label>
|
||||
<div class="control-option__bindings">
|
||||
<div class="control-option__bindings">
|
||||
<button
|
||||
data-event-blur="set_input_row_focus(-1)"
|
||||
data-event-focus="set_input_row_focus(i)"
|
||||
data-for="cur_binding, j : input_bindings"
|
||||
data-event-click="set_input_binding(i,j)"
|
||||
class="prompt-font control-option__binding"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
data-event-blur="set_input_row_focus(-1)"
|
||||
data-event-focus="set_input_row_focus(i)"
|
||||
data-for="cur_binding, j : input_bindings"
|
||||
data-event-click="set_input_binding(i,j)"
|
||||
class="prompt-font control-option__binding"
|
||||
data-event-click="clear_input_bindings(i)"
|
||||
class="icon-button icon-button--danger"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
<svg src="icons/Trash.svg" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
data-event-blur="set_input_row_focus(-1)"
|
||||
data-event-focus="set_input_row_focus(i)"
|
||||
data-event-click="clear_input_bindings(i)"
|
||||
class="icon-button icon-button--danger"
|
||||
>
|
||||
<svg src="icons/Trash.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-config__visual-wrapper">
|
||||
<div class="input-config__visual-aspect">
|
||||
<div class="input-config__visual">
|
||||
<h3>Insert visual here:{{active_binding_input}}:{{active_binding_slot}}</h3>
|
||||
<h3>Current focused row: {{cur_input_row}}</h3>
|
||||
<div
|
||||
class="input-viz"
|
||||
data-for="input_bindings, i : inputs.array"
|
||||
data-attr-visual-input="get_input_enum_name(i)"
|
||||
>
|
||||
{{get_input_name(i)}}
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
|
||||
visual-input="C_DOWN"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||||
<div class="input-config__visual-mappings">
|
||||
{{C_DOWN}}
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, j : inputs[C_DOWN]"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
<div>{{get_input_from_enum_name('C_DOWN')}}</div>
|
||||
<div class="input-config__visual-wrapper">
|
||||
<div class="input-config__visual-aspect">
|
||||
<div class="input-config__visual">
|
||||
<!-- stick only -->
|
||||
<div class="input-config__visual-stick-wrapper">
|
||||
<div class="input-config__visual-stick">
|
||||
<div>stick!!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__Z"
|
||||
visual-input="Z"
|
||||
>
|
||||
<svg src="icons/VizMap/Target.svg" />
|
||||
<div class="input-config__visual-mappings">
|
||||
{{Z}}
|
||||
<!-- top half -->
|
||||
<div class="input-config__visual-half">
|
||||
<div class="input-config__visual-quarter-left">
|
||||
<div>
|
||||
dpad lmao
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-config__visual-quarter-right">
|
||||
<div class="input-config__c-buttons">
|
||||
<div class="input-config__c-buttons-lr">
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
|
||||
visual-input="C_LEFT"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.C_LEFT"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
|
||||
visual-input="C_RIGHT"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.C_RIGHT"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-config__c-buttons-du">
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
|
||||
visual-input="C_DOWN"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.C_DOWN"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--sm input-viz__button--C"
|
||||
visual-input="C_UP"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.C_UP"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- bottom half -->
|
||||
<div class="input-config__visual-half input-config__visual-half--bottom">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, j : inputs[Z]"
|
||||
class="input-viz input-viz__Z"
|
||||
visual-input="Z"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
<div>{{get_input_from_enum_name('Z')}}</div>
|
||||
<svg src="icons/VizMap/Target.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.Z"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__R"
|
||||
visual-input="R"
|
||||
>
|
||||
<svg src="icons/VizMap/Shield.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.R"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__L"
|
||||
visual-input="L"
|
||||
>
|
||||
<svg src="icons/VizMap/Map.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.L"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -210,18 +296,45 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config__footer">
|
||||
</div>
|
||||
</form>
|
||||
</panel>
|
||||
<tab class="tab">
|
||||
<div>Sound</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config" >
|
||||
</panel>
|
||||
</tabset>
|
||||
<div class="config__footer">
|
||||
<div class="config__footer-left">
|
||||
<button
|
||||
class="button button--primary"
|
||||
>
|
||||
<div class="button__label">Controller</div>
|
||||
</button>
|
||||
<button
|
||||
class="button button--secondary"
|
||||
>
|
||||
<div class="button__label">Keyboard</div>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="button button--warning"
|
||||
>
|
||||
<div class="button__label">Reset to defaults</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</panel>
|
||||
<tab class="tab">
|
||||
<div>Sound</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config" >
|
||||
</panel>
|
||||
</tabset>
|
||||
<!-- Close button absolutely positioned on top right of modal -->
|
||||
<button
|
||||
class="icon-button config__exit-button"
|
||||
onclick="close_config_menu"
|
||||
style="z-index: 10000;"
|
||||
>
|
||||
<svg src="icons/X.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:0 1 80dp;display:flex; justify-content: space-between; width:100%; max-width:800dp; align-self:center;">
|
||||
<label style="text-align:center; font-size:24dp;"><span style="font-family:promptfont; font-size:40dp">␤␫</span><span style="font-size:24dp;">Navigate</span></label>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_101_783)">
|
||||
<path d="M16 4V28" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" />
|
||||
<path d="M4 16H28" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_101_783">
|
||||
<rect width="32" height="32" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 469 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="136" height="136" viewBox="0 0 136 136" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="136" height="136" rx="8" fill="#ffffff" fill-opacity="0.2"/>
|
||||
<rect x="1.5" y="1.5" width="133" height="133" rx="6.5" stroke="#ffffff" stroke-opacity="0.8" stroke-width="3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 302 B |
|
|
@ -0,0 +1,19 @@
|
|||
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_162_1238)">
|
||||
<mask id="path-1-inside-1_162_1238" fill="white">
|
||||
<path
|
||||
d="M48.011 0.0243377C43.618 3.24908 38.8843 6.57117 33.2015 9.78375C24.3182 14.7973 15.9217 18.3628 8.59609 20.9304C7.91464 27.8058 9.89816 53.4821 19.256 69.3137C28.6138 85.1454 41.671 92.5684 48.011 96V95.9757C54.3388 92.544 67.3229 85.2306 76.7416 69.2894C86.1603 53.3482 88.083 27.7815 87.4015 20.9061C80.0759 18.3384 71.6794 14.773 62.7961 9.75941C57.1133 6.54684 52.3796 3.22474 47.9866 0" />
|
||||
</mask>
|
||||
<path
|
||||
d="M48.011 0.0243377C43.618 3.24908 38.8843 6.57117 33.2015 9.78375C24.3182 14.7973 15.9217 18.3628 8.59609 20.9304C7.91464 27.8058 9.89816 53.4821 19.256 69.3137C28.6138 85.1454 41.671 92.5684 48.011 96V95.9757C54.3388 92.544 67.3229 85.2306 76.7416 69.2894C86.1603 53.3482 88.083 27.7815 87.4015 20.9061C80.0759 18.3384 71.6794 14.773 62.7961 9.75941C57.1133 6.54684 52.3796 3.22474 47.9866 0"
|
||||
fill="#3333FF" fill-opacity="0.2" />
|
||||
<path
|
||||
d="M33.2015 9.78375L34.676 12.3964L34.6778 12.3953L33.2015 9.78375ZM8.59609 20.9304L7.60378 18.0993L5.79931 18.7317L5.61072 20.6345L8.59609 20.9304ZM48.011 96L46.5829 98.6383L51.011 101.035V96H48.011ZM48.011 95.9757L46.5808 93.3385L45.011 94.1898V95.9757H48.011ZM87.4015 20.9061L90.3869 20.6102L90.1983 18.7074L88.3938 18.0749L87.4015 20.9061ZM62.7961 9.75941L61.3198 12.371L61.3216 12.372L62.7961 9.75941ZM46.2357 -2.39402C41.8799 0.803476 37.2563 4.04532 31.7251 7.17217L34.6778 12.3953C40.5123 9.09703 45.3562 5.69469 49.7862 2.4427L46.2357 -2.39402ZM31.727 7.17113C23.0183 12.0861 14.7865 15.5817 7.60378 18.0993L9.5884 23.7615C17.0569 21.1438 25.6181 17.5085 34.676 12.3964L31.727 7.17113ZM5.61072 20.6345C5.23291 24.4463 5.60118 32.8792 7.20409 42.2683C8.81006 51.6754 11.724 62.4668 16.6734 70.8402L21.8386 67.7872C17.4302 60.329 14.6734 50.3664 13.1185 41.2586C11.5606 32.1329 11.2778 24.2899 11.5815 21.2263L5.61072 20.6345ZM16.6734 70.8402C26.4559 87.3904 40.1088 95.1341 46.5829 98.6383L49.439 93.3617C43.2332 90.0027 30.7718 82.9004 21.8386 67.7872L16.6734 70.8402ZM51.011 96V95.9757H45.011V96H51.011ZM49.4411 98.6128C55.898 95.1112 69.4802 87.4768 79.3245 70.8154L74.1587 67.7633C65.1656 82.9843 52.7795 89.9769 46.5808 93.3385L49.4411 98.6128ZM79.3245 70.8154C84.3035 62.3884 87.2177 51.5981 88.8166 42.2013C90.4125 32.8221 90.7644 24.4186 90.3869 20.6102L84.4161 21.202C84.7201 24.2689 84.4514 32.0865 82.9016 41.1948C81.3548 50.2856 78.5984 60.2492 74.1587 67.7633L79.3245 70.8154ZM88.3938 18.0749C81.2111 15.5574 72.9792 12.0618 64.2706 7.14679L61.3216 12.372C70.3795 17.4842 78.9407 21.1195 86.4092 23.7372L88.3938 18.0749ZM64.2725 7.14783C58.7413 4.02098 54.1177 0.779138 49.7619 -2.41836L46.2114 2.41836C50.6414 5.67035 55.4853 9.07269 61.3198 12.371L64.2725 7.14783Z"
|
||||
fill="white" fill-opacity="0.8" mask="url(#path-1-inside-1_162_1238)" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_162_1238">
|
||||
<rect width="79.052" height="96" fill="white" transform="translate(8.47388)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.51465 7.51472L24.4852 24.4853" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
|
||||
<path d="M7.51465 24.4853L24.4852 7.51471" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 319 B |
File diff suppressed because one or more lines are too long
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
@extend %label-lg;
|
||||
@extend %label-md;
|
||||
@include create-button-variation($color-primary);
|
||||
|
||||
display: block;
|
||||
|
|
@ -39,6 +39,10 @@
|
|||
// @include create-button-variation($color-primary);
|
||||
// }
|
||||
|
||||
&--large {
|
||||
@extend %label-lg;
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
@include create-button-variation($color-secondary);
|
||||
}
|
||||
|
|
@ -61,6 +65,7 @@
|
|||
|
||||
&:not([disabled]) {
|
||||
@extend %nav-all;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:disabled,&[disabled] {
|
||||
|
|
|
|||
|
|
@ -26,8 +26,19 @@
|
|||
border-radius: $border-radius-modal;
|
||||
border-color: $color-bg-shadow;
|
||||
border-width: $border-width-thickness;
|
||||
}
|
||||
|
||||
.centered-page__modal panels {
|
||||
flex: 1 1 100%;
|
||||
> .tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
flex: 1 1 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
panels {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
|
||||
.config__exit-button {
|
||||
position: absolute;
|
||||
top: space(8);
|
||||
right: space(8);
|
||||
}
|
||||
|
||||
.config__form {
|
||||
@include border-top($color-border-soft);
|
||||
display: flex;
|
||||
|
|
@ -25,7 +31,7 @@
|
|||
.config__footer {
|
||||
@include border-top($color-border-soft);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: space(20) space(20);
|
||||
|
|
@ -34,6 +40,16 @@
|
|||
border-bottom-right-radius: $border-radius-modal;
|
||||
}
|
||||
|
||||
.config__footer-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 1 auto;
|
||||
|
||||
> :not(:first-child) {
|
||||
margin-left: space(8);
|
||||
}
|
||||
}
|
||||
|
||||
.config__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: space(8) space(16) space(8) space(20);
|
||||
padding: space(4) space(16) space(4) space(20);
|
||||
border-radius: $border-radius-sm;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
justify-content: space-between;
|
||||
flex: 2 1 space(400);
|
||||
width: 100%;
|
||||
height: space(72);
|
||||
height: space(56);
|
||||
padding: 0 space(12) 0 space(4);
|
||||
}
|
||||
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
height: space(72);
|
||||
height: space(56);
|
||||
padding: space(8);
|
||||
background-color: $color-bg-overlay;
|
||||
border-color: $color-bg-overlay;
|
||||
|
|
@ -80,5 +80,6 @@
|
|||
|
||||
&:not([disabled]) {
|
||||
@extend %nav-all;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
@use 'sass:color';
|
||||
|
||||
/*
|
||||
<button
|
||||
class="icon-button icon-button--danger"
|
||||
>
|
||||
<svg src="icons/Trash.svg" />
|
||||
</button>
|
||||
*/
|
||||
@mixin create-icon-button-variation($base-col) {
|
||||
background-color: rgba($base-col, 0.05);
|
||||
border-color: rgba($base-col, 0.8);
|
||||
|
|
@ -18,7 +24,6 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
|
|||
|
||||
.icon-button {
|
||||
@include set-color($color-text-dim);
|
||||
@include create-icon-button-variation($color-primary);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -27,6 +32,8 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
|
|||
|
||||
border-radius: space($icon-button-size * 0.5);
|
||||
border-width: $border-width-thickness;
|
||||
border-color: $color-transparent;
|
||||
background-color: $color-transparent;
|
||||
width: space($icon-button-size);
|
||||
height: space($icon-button-size);
|
||||
min-width: space($icon-button-size);
|
||||
|
|
@ -36,10 +43,12 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
|
|||
|
||||
&:focus, &:hover {
|
||||
@include set-color($color-text);
|
||||
background-color: $color-border;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include set-color(color.scale($color-text, $lightness: 20%));
|
||||
background-color: $color-border-soft;
|
||||
}
|
||||
|
||||
&:disabled,&[disabled] {
|
||||
|
|
@ -49,6 +58,7 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
|
|||
|
||||
&:not([disabled]) {
|
||||
@extend %nav-all;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -56,10 +66,9 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
|
|||
height: space(32);
|
||||
}
|
||||
|
||||
// Setting it by default for convenience
|
||||
// &--primary {
|
||||
// @include create-icon-button-variation($color-primary);
|
||||
// }
|
||||
&--primary {
|
||||
@include create-icon-button-variation($color-primary);
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
@include create-icon-button-variation($color-secondary);
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
|||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 75%;
|
||||
background-color: $color-secondary-a5;
|
||||
background-color: $color-bg-shadow;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
|
|
@ -61,8 +61,74 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
|||
left: 0;
|
||||
}
|
||||
|
||||
.input-config__visual-half {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
flex: 1 1 100%;
|
||||
padding: 6%;
|
||||
|
||||
&--bottom {
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.input-config__visual-quarter-left {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
width: auto;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.input-config__visual-quarter-right {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.input-config__visual-stick-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.input-config__visual-stick {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: space(200);
|
||||
height: space(200);
|
||||
border-radius: space(100);
|
||||
background-color: $color-white-a5;
|
||||
}
|
||||
|
||||
.input-viz {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&__mappings div {
|
||||
@extend %prompt-font-sm;
|
||||
}
|
||||
}
|
||||
|
||||
$all-inputs:
|
||||
|
|
@ -142,3 +208,46 @@ $all-inputs:
|
|||
@include set-svgs-color($color-warning);
|
||||
@include set-sizes(136);
|
||||
}
|
||||
|
||||
.input-viz__R {
|
||||
@include set-svgs-color($color-white);
|
||||
@include set-sizes(96);
|
||||
}
|
||||
|
||||
.input-viz__L {
|
||||
@include set-svgs-color($color-secondary);
|
||||
@include set-sizes(136);
|
||||
}
|
||||
|
||||
.input-config__c-buttons {
|
||||
position: relative;
|
||||
width: space(76+76+56);
|
||||
height: space(76+56);
|
||||
|
||||
&-lr, &-du {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&-lr {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-du {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.input-viz {
|
||||
&[visual-input="C_UP"] {
|
||||
margin-top: space(-32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
.tab {
|
||||
@extend %nav-all;
|
||||
@extend %label-md;
|
||||
@extend %header-3;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: space(20) space(24);
|
||||
|
|
|
|||
|
|
@ -58,3 +58,11 @@ $font-stack: chiaro;
|
|||
font-size: space(40);
|
||||
line-height: space(40);
|
||||
}
|
||||
|
||||
%prompt-font-sm {
|
||||
font-family: promptfont;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: space(32);
|
||||
line-height: space(32);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue