mirror of
https://github.com/BanjoRecomp/BanjoRecomp
synced 2026-05-24 23:01:28 -04:00
remove sass and rml
This commit is contained in:
thecozies
@@ -1,142 +0,0 @@
|
||||
<rml>
|
||||
<head>
|
||||
<link type="text/rcss" href="rml.rcss"/>
|
||||
<link type="text/rcss" href="recomp.rcss"/>
|
||||
<title>Inventory</title>
|
||||
<style>
|
||||
body
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Hide the window icon. */
|
||||
div#title_bar div#icon
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.flex-grid {
|
||||
display: flex;
|
||||
}
|
||||
.col {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<link type="text/template" href="config_menu/general.rml" />
|
||||
<link type="text/template" href="config_menu/graphics.rml" />
|
||||
<link type="text/template" href="config_menu/sound.rml" />
|
||||
<link type="text/template" href="config_menu/mods.rml" />
|
||||
<link type="text/template" href="config_menu/debug.rml" />
|
||||
</head>
|
||||
<body class="window">
|
||||
<!-- <handle move_target="#document"> -->
|
||||
<div id="window" class="rmlui-window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)" onkeydown="config_keydown">
|
||||
<div class="centered-page" onclick="close_config_menu_backdrop">
|
||||
<div class="centered-page__modal">
|
||||
<tabset class="tabs" id="config_tabset">
|
||||
<tab class="tab" autofocus id="tab_general">
|
||||
<div>General</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config" data-model="general_model">
|
||||
<template src="config-menu__general" />
|
||||
</panel>
|
||||
<tab class="tab" id="tab_controls">
|
||||
<div>Controls</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config">
|
||||
<recomp-config-page-controls />
|
||||
</panel>
|
||||
<tab class="tab" id="tab_graphics">
|
||||
<div>Graphics</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config" data-model="graphics_model">
|
||||
<template src="config-menu__graphics" />
|
||||
</panel>
|
||||
<tab class="tab" id="tab_sound">
|
||||
<div>Sound</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config" data-model="sound_options_model">
|
||||
<template src="config-menu__sound" />
|
||||
</panel>
|
||||
<tab class="tab" id="tab_mods">
|
||||
<div>Mods</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config">
|
||||
<template src="config-menu__mods" />
|
||||
</panel>
|
||||
<tab class="tab" data-model="debug_model" data-if="debug_enabled" id="tab_debug">
|
||||
<div>Debug</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config" data-model="debug_model">
|
||||
<template src="config-menu__debug" />
|
||||
</panel>
|
||||
<tab class="tab" id="tab_example">
|
||||
<div>Example</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
<panel class="config">
|
||||
<recomp-config-page-example />
|
||||
</panel>
|
||||
</tabset>
|
||||
<div class="config__icon-buttons">
|
||||
<button
|
||||
class="icon-button"
|
||||
onclick="open_quit_game_prompt"
|
||||
id="config__quit-game-button"
|
||||
>
|
||||
<svg src="icons/Quit.svg" />
|
||||
</button>
|
||||
<button
|
||||
class="icon-button"
|
||||
onclick="close_config_menu"
|
||||
id="config__close-menu-button"
|
||||
>
|
||||
<svg src="icons/X.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="centered-page__controls"
|
||||
data-model="nav_help_model"
|
||||
>
|
||||
<label>
|
||||
<span>Navigate</span>
|
||||
<span class="prompt-font-sm">{{nav_help__navigate}}</span>
|
||||
</label>
|
||||
<label>
|
||||
<span>Accept</span>
|
||||
<span class="prompt-font-sm">{{nav_help__accept}}</span>
|
||||
</label>
|
||||
<label>
|
||||
<span>Exit</span>
|
||||
<span class="prompt-font-sm">{{nav_help__exit}}</span>
|
||||
</label>
|
||||
<!-- <label><span style="font-family:promptfont;">⇳</span> Navigate</label>
|
||||
<label><span style="font-family:promptfont;">↧</span> Accept</label> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
id="prompt-root"
|
||||
data-model="prompt_model"
|
||||
data-if="prompt__open"
|
||||
data-alias-promptOpen="prompt__open"
|
||||
data-alias-promptHeader="prompt__header"
|
||||
data-alias-promptContent="prompt__content"
|
||||
data-alias-promptConfirmLabel="prompt__confirmLabel"
|
||||
data-alias-promptCancelLabel="prompt__cancelLabel"
|
||||
data-event-click="prompt__on_click"
|
||||
>
|
||||
<template src="prompt"/>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- </handle> -->
|
||||
<!-- <handle size_target="#document" style="position: absolute; width: 16dp; height: 16dp; bottom: 0px; right: 0px; cursor: resize;"></handle> -->
|
||||
</body>
|
||||
</rml>
|
||||
@@ -1,13 +0,0 @@
|
||||
<template name="config-menu__debug">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<form class="config__form">
|
||||
<div class="config__wrapper">
|
||||
<div class="config-debug">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</template>
|
||||
|
||||
@@ -1,297 +0,0 @@
|
||||
<template name="config-menu__general">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<form class="config__form" id="conf-general__form">
|
||||
<div class="config__hz-wrapper" id="conf-general__hz-wrapper">
|
||||
<!-- Options -->
|
||||
<div class="config__wrapper" data-event-mouseout="set_cur_config_index(-1)" id="conf-general__wrapper">
|
||||
<!-- rumble strength -->
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(1)">
|
||||
<label class="config-option__title">Rumble Strength</label>
|
||||
<div class="config-option__range-wrapper config-option__list">
|
||||
<label class="config-option__range-label">{{rumble_strength}}%</label>
|
||||
<input
|
||||
class="nav-vert"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(1)"
|
||||
id="rumble_strength_input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
style="flex: 1; margin: 0dp;"
|
||||
data-value="rumble_strength"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- gyro sensitivity -->
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(2)">
|
||||
<label class="config-option__title">Gyro Sensitivity</label>
|
||||
<div class="config-option__range-wrapper config-option__list">
|
||||
<label class="config-option__range-label">{{gyro_sensitivity}}%</label>
|
||||
<input
|
||||
class="nav-vert"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(2)"
|
||||
id="gyro_sensitivity_input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
style="flex: 1; margin: 0dp;"
|
||||
data-value="gyro_sensitivity"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mouse sensitivity -->
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(3)">
|
||||
<label class="config-option__title">Mouse Sensitivity</label>
|
||||
<div class="config-option__range-wrapper config-option__list">
|
||||
<label class="config-option__range-label">{{mouse_sensitivity}}%</label>
|
||||
<input
|
||||
class="nav-vert"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(3)"
|
||||
id="mouse_sensitivity_input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
style="flex: 1; margin: 0dp;"
|
||||
data-value="mouse_sensitivity"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- joystick deadzone -->
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(4)">
|
||||
<label class="config-option__title">Joystick Deadzone</label>
|
||||
<div class="config-option__range-wrapper config-option__list">
|
||||
<label class="config-option__range-label">{{joystick_deadzone}}%</label>
|
||||
<input
|
||||
class="nav-vert"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(4)"
|
||||
id="joystick_deadzone_input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
style="flex: 1; margin: 0dp; nav-down: #bg_input_enabled"
|
||||
data-value="joystick_deadzone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- background input -->
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(5)" id="conf-general__Background-Input">
|
||||
<label class="config-option__title">Background Input</label>
|
||||
<div class="config-option__list">
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(5)"
|
||||
name="background_input_mode"
|
||||
data-checked="background_input_mode"
|
||||
value="On"
|
||||
id="bg_input_enabled"
|
||||
style="nav-up: #joystick_deadzone_input; nav-down: #camera_inversion_none"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="bg_input_enabled">On</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(5)"
|
||||
name="background_input_mode"
|
||||
data-checked="background_input_mode"
|
||||
value="Off"
|
||||
id="bg_input_disabled"
|
||||
style="nav-up: #joystick_deadzone_input; nav-down: #camera_inversion_x"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="bg_input_disabled">Off</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- camera inversion -->
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(7)">
|
||||
<label class="config-option__title">Aiming Camera Mode</label>
|
||||
<div class="config-option__list">
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(7)"
|
||||
name="camera_invert_mode"
|
||||
data-checked="camera_invert_mode"
|
||||
value="InvertNone"
|
||||
id="camera_inversion_none"
|
||||
style="nav-up: #bg_input_enabled; nav-down: #analog_cam_enabled"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="camera_inversion_none">None</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(7)"
|
||||
name="camera_invert_mode"
|
||||
data-checked="camera_invert_mode"
|
||||
value="InvertX"
|
||||
id="camera_inversion_x"
|
||||
style="nav-up: #bg_input_disabled; nav-down: #analog_cam_disabled"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="camera_inversion_x">Invert X</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(7)"
|
||||
name="camera_invert_mode"
|
||||
data-checked="camera_invert_mode"
|
||||
value="InvertY"
|
||||
id="camera_inversion_y"
|
||||
style="nav-up: #bg_input_disabled; nav-down: #analog_cam_disabled"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="camera_inversion_y">Invert Y</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(7)"
|
||||
name="camera_invert_mode"
|
||||
data-checked="camera_invert_mode"
|
||||
value="InvertBoth"
|
||||
id="camera_inversion_both"
|
||||
style="nav-up: #bg_input_disabled; nav-down: #analog_cam_disabled"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="camera_inversion_both">Invert Both</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- analog camera -->
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(8)">
|
||||
<label class="config-option__title">Analog Camera</label>
|
||||
<div class="config-option__list">
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(8)"
|
||||
name="analog_cam_mode"
|
||||
data-checked="analog_cam_mode"
|
||||
value="On"
|
||||
id="analog_cam_enabled"
|
||||
style="nav-up: #camera_inversion_none; nav-down: #analog_camera_inversion_none"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="analog_cam_enabled">On</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(8)"
|
||||
name="analog_cam_mode"
|
||||
data-checked="analog_cam_mode"
|
||||
value="Off"
|
||||
id="analog_cam_disabled"
|
||||
style="nav-up: #camera_inversion_x; nav-down: #analog_camera_inversion_x"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="analog_cam_disabled">Off</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- analog camera inversion -->
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(9)">
|
||||
<label class="config-option__title">Analog Camera Mode</label>
|
||||
<div class="config-option__list">
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(9)"
|
||||
name="analog_camera_invert_mode"
|
||||
data-checked="analog_camera_invert_mode"
|
||||
value="InvertNone"
|
||||
id="analog_camera_inversion_none"
|
||||
style="nav-up: #analog_cam_enabled;"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="analog_camera_inversion_none">None</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(9)"
|
||||
name="analog_camera_invert_mode"
|
||||
data-checked="analog_camera_invert_mode"
|
||||
value="InvertX"
|
||||
id="analog_camera_inversion_x"
|
||||
style="nav-up: #analog_cam_disabled;"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="analog_camera_inversion_x">Invert X</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(9)"
|
||||
name="analog_camera_invert_mode"
|
||||
data-checked="analog_camera_invert_mode"
|
||||
value="InvertY"
|
||||
id="analog_camera_inversion_y"
|
||||
style="nav-up: #analog_cam_disabled;"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="analog_camera_inversion_y">Invert Y</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(9)"
|
||||
name="analog_camera_invert_mode"
|
||||
data-checked="analog_camera_invert_mode"
|
||||
value="InvertBoth"
|
||||
id="analog_camera_inversion_both"
|
||||
style="nav-up: #analog_cam_disabled;"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="analog_camera_inversion_both">Invert Both</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Descriptions -->
|
||||
<div class="config__wrapper">
|
||||
<p data-if="cur_config_index == 1">
|
||||
Controls the strength of rumble when using a controller that supports it. <b>Setting this to zero will disable rumble.</b>
|
||||
</p>
|
||||
<p data-if="cur_config_index == 2">
|
||||
Controls the sensitivity of gyro aiming when using items in first person for controllers that support it. <b>Setting this to zero will disable gyro.</b>
|
||||
<br />
|
||||
<br />
|
||||
<b>Note: To recalibrate controller gyro, set the controller down on a still, flat surface for 5 seconds.</b>
|
||||
</p>
|
||||
<p data-if="cur_config_index == 3">
|
||||
Controls the sensitivity of mouse aiming when using items in first person. <b>Setting this to zero will disable mouse aiming.</b>
|
||||
<br />
|
||||
<br />
|
||||
<b>Note: This option does not allow mouse buttons to activate items. Mouse aiming is intended to be used with inputs that are mapped to mouse movement, such as gyro on Steam Deck.</b>
|
||||
</p>
|
||||
<p data-if="cur_config_index == 4">
|
||||
Applies a deadzone to joystick inputs.
|
||||
</p>
|
||||
<p data-if="cur_config_index == 5">
|
||||
Allows the game to read controller input when out of focus.
|
||||
<br/>
|
||||
<b>This setting does not affect keyboard input.</b>
|
||||
</p>
|
||||
<p data-if="cur_config_index == 7">
|
||||
Inverts the camera controls for first-person aiming. <b>Invert Y</b> is the default and matches the original game.
|
||||
</p>
|
||||
<p data-if="cur_config_index == 8">
|
||||
Enables an analog "free" camera similar to later entries in the series that's mapped to the right analog stick on the controller.
|
||||
<br/>
|
||||
<br/>
|
||||
When you move the right stick, the camera will enter free mode and stop centering behind Link. Press the <b>Target</b> button at any time to go back into the normal camera mode. The camera will also return to normal mode after a cutscene plays or when you move between areas.
|
||||
<br/>
|
||||
<br/>
|
||||
This option also enables right stick control while looking and aiming.
|
||||
</p>
|
||||
<p data-if="cur_config_index == 9">
|
||||
Inverts the camera controls for the analog camera if it's enabled. <b>None</b> is the default.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</template>
|
||||
@@ -1,325 +0,0 @@
|
||||
<template name="config-menu__graphics">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<form class="config__form">
|
||||
<div class="config__hz-wrapper">
|
||||
<div class="config__wrapper" data-event-mouseout="set_cur_config_index(-1)">
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(0)">
|
||||
<label class="config-option__title">Resolution</label>
|
||||
<div class="config-option__list">
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(0)"
|
||||
name="resolution"
|
||||
data-checked="res_option"
|
||||
value="Original"
|
||||
id="res_original"
|
||||
style="nav-up:#tab_graphics; nav-down: #ds_windowed"
|
||||
data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_original' : 'nav-up:#tab_graphics; nav-down: #ds_windowed'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="res_original">Original</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(0)"
|
||||
name="resolution"
|
||||
data-checked="res_option"
|
||||
value="Original2x"
|
||||
id="res_2x"
|
||||
style="nav-up:#tab_graphics; nav-down: #ds_2x"
|
||||
data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_expand' : 'nav-up:#tab_graphics; nav-down: #ds_2x'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="res_2x">Original 2x</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(0)"
|
||||
name="resolution"
|
||||
data-checked="res_option"
|
||||
value="Auto"
|
||||
id="res_auto"
|
||||
style="nav-up:#tab_graphics; nav-down: #ds_4x"
|
||||
data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_expand' : 'nav-up:#tab_graphics; nav-down: #ds_4x'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="res_auto">Auto</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(1)">
|
||||
<label class="config-option__title">Downsampling Quality</label>
|
||||
<div class="config-option__list">
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(1)"
|
||||
name="downsampling"
|
||||
data-attrif-disabled="res_option == 'Auto'"
|
||||
data-checked="ds_option"
|
||||
value="1"
|
||||
id="ds_windowed"
|
||||
style="nav-up: #res_original; nav-down: #ar_original"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="ds_windowed">Off</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(1)"
|
||||
name="downsampling"
|
||||
data-attrif-disabled="res_option == 'Auto'"
|
||||
data-checked="ds_option"
|
||||
value="2"
|
||||
id="ds_2x"
|
||||
style="nav-up: #res_2x; nav-down: #ar_expand"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="ds_2x">2x</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(1)"
|
||||
name="downsampling"
|
||||
data-attrif-disabled="res_option == 'Auto'"
|
||||
data-checked="ds_option"
|
||||
value="4"
|
||||
id="ds_4x"
|
||||
style="nav-up: #res_auto; nav-down: #ar_expand"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="ds_4x">4x</label>
|
||||
<div class="config-option__details">{{ds_info}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(2)">
|
||||
<label class="config-option__title">Aspect Ratio</label>
|
||||
<div class="config-option__list">
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(2)"
|
||||
name="aspectratio"
|
||||
data-checked="ar_option"
|
||||
value="Original"
|
||||
id="ar_original"
|
||||
style="nav-up: #ds_windowed; nav-down: #wm_windowed"
|
||||
data-attr-style="res_option == 'Auto' ? 'nav-up:#res_original; nav-down: #wm_windowed' : 'nav-up:#ds_windowed; nav-down: #wm_windowed'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="ar_original">Original</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(2)"
|
||||
name="aspectratio"
|
||||
data-checked="ar_option"
|
||||
value="Expand"
|
||||
id="ar_expand"
|
||||
style="nav-up: #ds_2x; nav-down: #wm_fullscreen"
|
||||
data-attr-style="res_option == 'Auto' ? 'nav-up:#res_2x; nav-down: #wm_fullscreen' : 'nav-up:#ds_2x; nav-down: #wm_fullscreen'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="ar_expand">Expand</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(3)">
|
||||
<label class="config-option__title">Window Mode</label>
|
||||
<div class="config-option__list">
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(3)"
|
||||
name="windowmode"
|
||||
data-checked="wm_option"
|
||||
value="Windowed"
|
||||
id="wm_windowed"
|
||||
style="nav-up: #ar_original; nav-down: #rr_original"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="wm_windowed">Windowed</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(3)"
|
||||
name="windowmode"
|
||||
data-checked="wm_option"
|
||||
value="Fullscreen"
|
||||
id="wm_fullscreen"
|
||||
style="nav-up: #ar_expand; nav-down: #rr_display"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(4)">
|
||||
<label class="config-option__title">Framerate</label>
|
||||
<div class="config-option__list">
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(4)"
|
||||
name="refreshrate"
|
||||
data-checked="rr_option"
|
||||
value="Original"
|
||||
id="rr_original"
|
||||
data-attr-style="rr_option=='Manual' ? 'nav-up: #wm_windowed; nav-down: #rr_manual_input' : 'nav-up: #wm_windowed; nav-down: #msaa_none'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="rr_original">Original</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(4)"
|
||||
name="refreshrate"
|
||||
data-checked="rr_option"
|
||||
value="Display"
|
||||
id="rr_display"
|
||||
style="nav-up: #wm_fullscreen"
|
||||
data-style-nav-down="rr_option=='Manual' ? '#rr_manual_input' : (msaa2x_supported ? '#msaa_2x' : '#msaa_none')"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="rr_display">Display</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(4)"
|
||||
name="refreshrate"
|
||||
data-checked="rr_option"
|
||||
value="Manual"
|
||||
id="rr_manual"
|
||||
style="nav-up: #wm_fullscreen"
|
||||
data-style-nav-down="rr_option=='Manual' ? '#rr_manual_input' : (msaa4x_supported ? '#msaa_4x' : (msaa2x_supported ? '#msaa_2x' : '#msaa_none'))"
|
||||
/>
|
||||
<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
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(4)"
|
||||
id="rr_manual_input"
|
||||
type="range"
|
||||
min="20"
|
||||
max="360"
|
||||
style="flex:1;margin: 0dp;nav-up:#rr_manual;nav-down:#msaa_none;"
|
||||
data-value="rr_manual_value"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(5)">
|
||||
<label class="config-option__title">MS Anti-Aliasing</label>
|
||||
<div class="config-option__list">
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(5)"
|
||||
name="antialiasing"
|
||||
data-checked="msaa_option"
|
||||
value="None"
|
||||
id="msaa_none"
|
||||
data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_original' : 'nav-up: #rr_original; nav-down: #hr_original'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="msaa_none">None</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(5)"
|
||||
name="antialiasing"
|
||||
data-attrif-disabled="!msaa2x_supported"
|
||||
data-checked="msaa_option"
|
||||
value="MSAA2X"
|
||||
id="msaa_2x"
|
||||
data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_16_9' : 'nav-up: #rr_display; nav-down: #hr_16_9'"
|
||||
data-style-nav-right="msaa4x_supported ? '#msaa_4x' : 'none'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="msaa_2x">2x</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(5)"
|
||||
name="antialiasing"
|
||||
data-attrif-disabled="!msaa4x_supported"
|
||||
data-checked="msaa_option"
|
||||
value="MSAA4X"
|
||||
id="msaa_4x"
|
||||
data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_full' : 'nav-up: #rr_manual; nav-down: #hr_full'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="msaa_4x">4x</label>
|
||||
<div class="config-option__details" data-if="!sample_positions_supported">Not available (missing sample positions support)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(6)">
|
||||
<label class="config-option__title">HUD Placement</label>
|
||||
<div class="config-option__list">
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(6)"
|
||||
name="hr-option"
|
||||
data-checked="hr_option"
|
||||
value="Original"
|
||||
id="hr_original"
|
||||
style="nav-up: #msaa_none; nav-down: #apply_button"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="hr_original">Original</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(6)"
|
||||
name="hr-option"
|
||||
data-checked="hr_option"
|
||||
value="Clamp16x9"
|
||||
id="hr_16_9"
|
||||
style="nav-up: #msaa_2x; nav-down: #apply_button"
|
||||
data-style-nav-up="msaa2x_supported ? '#msaa_2x' : '#msaa_none'"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="hr_16_9">16:9</label>
|
||||
<input type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(6)"
|
||||
name="hr-option"
|
||||
data-checked="hr_option"
|
||||
value="Full"
|
||||
id="hr_full"
|
||||
style="nav-up: #msaa_4x; nav-down: #apply_button"
|
||||
data-style-nav-up="msaa4x_supported ? '#msaa_4x' : (msaa2x_supported ? '#msaa_2x' : '#msaa_none')"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="hr_full">Expand</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="config__wrapper">
|
||||
<p data-if="cur_config_index == 0">
|
||||
Sets the output resolution of the game. <b>Original</b> matches the game's original 240p resolution. <b>Original 2x</b> will render at 480p. <b>Auto</b> will scale based on the game window's resolution.
|
||||
</p>
|
||||
<p data-if="cur_config_index == 1">
|
||||
Renders at a higher resolution and scales it down to the output resolution for increased quality. Only available in <b>Original</b> and <b>Original 2x</b> resolution.
|
||||
<br />
|
||||
<br />
|
||||
Note: <b>4x</b> downsampling quality at <b>Original 2x</b> resolution may cause performance issues on low end devices, as it will cause the game to render <i>at almost 4k internal resolution</i>.
|
||||
</p>
|
||||
<p data-if="cur_config_index == 2">
|
||||
Sets the horizontal aspect ratio. <b>Original</b> uses the game's original 4:3 aspect ratio. <b>Expand</b> will adjust to match the game window's aspect ratio.
|
||||
</p>
|
||||
<p data-if="cur_config_index == 3">
|
||||
Sets whether the game should display <b>Windowed</b> or <b>Fullscreen</b>. You can also use <b>F11</b> or <b>Alt + Enter</b> to toggle this option.
|
||||
</p>
|
||||
<p data-if="cur_config_index == 4">
|
||||
Sets the game's output framerate. This option does not affect gameplay.
|
||||
<br />
|
||||
<br />
|
||||
Note: If you have issues with <b>Display</b> mode while using an external frame limiter, use <b>Manual</b> mode instead and configure it to that same frame limit.
|
||||
<br />
|
||||
<br />
|
||||
<b>Detected display refresh rate: {{display_refresh_rate}}hz</b>
|
||||
</p>
|
||||
<p data-if="cur_config_index == 5">
|
||||
Sets the multisample anti-aliasing (MSAA) quality level. This reduces jagged edges in the final image at the expense of rendering performance.
|
||||
<br />
|
||||
<br />
|
||||
<b>Note: This option won't be available if your GPU does not support programmable MSAA sample positions, as it is currently required to avoid rendering glitches.</b>
|
||||
</p>
|
||||
<p data-if="cur_config_index == 6">
|
||||
Adjusts the placement of HUD elements to fit the selected aspect ratio. <b>Expand</b> will use the aspect ratio of the game's output window.
|
||||
</p>
|
||||
</div>
|
||||
</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"
|
||||
style="nav-up:#hr_original"
|
||||
>
|
||||
<div class="button__label">Apply<span class="prompt-font-sm">{{gfx_help__apply}}</span></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</template>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template name="config-menu__mods">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<form class="config__form">
|
||||
<recomp-mod-menu id="menu_mods" />
|
||||
</form>
|
||||
</body>
|
||||
</template>
|
||||
@@ -1,89 +0,0 @@
|
||||
<template name="config-menu__sound">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<form class="config__form">
|
||||
<div class="config__hz-wrapper">
|
||||
<!-- Options -->
|
||||
<div class="config__wrapper" data-event-mouseout="set_cur_config_index(-1)">
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(0)">
|
||||
<label class="config-option__title">Main Volume</label>
|
||||
<div class="config-option__range-wrapper config-option__list">
|
||||
<label class="config-option__range-label">{{main_volume}}%</label>
|
||||
<input
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(0)"
|
||||
class="nav-vert"
|
||||
id="main_volume_input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
style="flex: 1; margin: 0dp; nav-up: #tab_sound; nav-down: #bgm_volume_input;"
|
||||
data-value="main_volume"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(1)">
|
||||
<label class="config-option__title">Background Music Volume</label>
|
||||
<div class="config-option__range-wrapper config-option__list">
|
||||
<label class="config-option__range-label">{{bgm_volume}}%</label>
|
||||
<input
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(1)"
|
||||
class="nav-vert"
|
||||
id="bgm_volume_input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
style="flex: 1; margin: 0dp; nav-up: #main_volume_input; nav-down: #lhb_on;"
|
||||
data-value="bgm_volume"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-option" data-event-mouseover="set_cur_config_index(2)">
|
||||
<label class="config-option__title">Low Health Beeps</label>
|
||||
<div class="config-option__list">
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(2)"
|
||||
name="lhb"
|
||||
data-checked="low_health_beeps_enabled"
|
||||
value="1"
|
||||
id="lhb_on"
|
||||
style="nav-up: #bgm_volume_input"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="lhb_on">On</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
data-event-blur="set_cur_config_index(-1)"
|
||||
data-event-focus="set_cur_config_index(2)"
|
||||
name="lhb"
|
||||
data-checked="low_health_beeps_enabled"
|
||||
value="0"
|
||||
id="lhb_off"
|
||||
style="nav-up: #bgm_volume_input"
|
||||
/>
|
||||
<label class="config-option__tab-label" for="lhb_off">Off</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Descriptions -->
|
||||
<div class="config__wrapper">
|
||||
<p data-if="cur_config_index == 0">
|
||||
Controls the main volume of the game.
|
||||
</p>
|
||||
<p data-if="cur_config_index == 1">
|
||||
Controls the overall volume of background music.
|
||||
</p>
|
||||
<p data-if="cur_config_index == 2">
|
||||
Toggles whether or not the low-health beeping sound plays.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</template>
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<rml>
|
||||
<head>
|
||||
<link type="text/rcss" href="rml.rcss"/>
|
||||
<link type="text/rcss" href="recomp.rcss"/>
|
||||
<title>Inventory</title>
|
||||
<style>
|
||||
body
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Hide the window icon. */
|
||||
div#title_bar div#icon
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.flex-grid {
|
||||
display: flex;
|
||||
}
|
||||
.col {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="window">
|
||||
<!-- <handle move_target="#document"> -->
|
||||
<div id="window" class="rmlui-window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)" onkeydown="config_keydown">
|
||||
<div class="centered-page" onclick="close_config_menu_backdrop">
|
||||
<div class="centered-page__modal">
|
||||
<div class="config__icon-buttons">
|
||||
<button
|
||||
class="icon-button"
|
||||
onclick="open_quit_game_prompt"
|
||||
id="config__quit-game-button"
|
||||
>
|
||||
<svg src="icons/Quit.svg" />
|
||||
</button>
|
||||
<button
|
||||
class="icon-button"
|
||||
onclick="close_config_menu"
|
||||
id="config__close-menu-button"
|
||||
>
|
||||
<svg src="icons/X.svg" />
|
||||
</button>
|
||||
</div>
|
||||
<recomp-config-sub-menu id="config_sub_menu" />
|
||||
</div>
|
||||
<div
|
||||
class="centered-page__controls"
|
||||
data-model="nav_help_model"
|
||||
>
|
||||
<label>
|
||||
<span>Navigate</span>
|
||||
<span class="prompt-font-sm">{{nav_help__navigate}}</span>
|
||||
</label>
|
||||
<label>
|
||||
<span>Accept</span>
|
||||
<span class="prompt-font-sm">{{nav_help__accept}}</span>
|
||||
</label>
|
||||
<label>
|
||||
<span>Exit</span>
|
||||
<span class="prompt-font-sm">{{nav_help__exit}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -1,62 +0,0 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Launcher</title>
|
||||
<link type="text/rcss" href="recomp.rcss"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="window" data-model="launcher_model">
|
||||
<div class="launcher">
|
||||
<!--<div class="launcher__vertical-split">
|
||||
<div class="launcher__title-quadrant">
|
||||
<button class="subtitle-title" disabled>
|
||||
<div><h3>Banjo: Recompiled</h3></div>
|
||||
<div><h1>Banjo-Tooie</h1></div>
|
||||
<div class="subtitle-title__disclaimer">Coming Soon™</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="launcher__content-quadrant"></div>
|
||||
</div>-->
|
||||
<div class="launcher__vertical-split launcher__vertical-split--right">
|
||||
<div class="launcher__background-wrapper">
|
||||
<!-- <svg src="[changeme].svg" class="launcher__background-bk" /> -->
|
||||
</div>
|
||||
<div class="launcher__title-quadrant launcher__title-quadrant--right">
|
||||
<button class="subtitle-title subtitle-title--right" selected>
|
||||
<div><h3>Banjo: Recompiled</h3></div>
|
||||
<div><h1>Banjo-Kazooie</h1></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="launcher__content-quadrant">
|
||||
<button data-if="!bk_rom_valid" onclick="select_rom" class="menu-list-item menu-list-item--right" autofocus>
|
||||
<div class="menu-list-item__bullet">•</div>
|
||||
<div class="menu-list-item__label">Select ROM</div>
|
||||
</button>
|
||||
<button data-if="bk_rom_valid" 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 onclick="open_controls" 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 onclick="open_settings" 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 onclick="open_mods" class="menu-list-item menu-list-item--right">
|
||||
<div class="menu-list-item__bullet">•</div>
|
||||
<div class="menu-list-item__label">Mods</div>
|
||||
</button>
|
||||
<button onclick="exit_game" 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 class="bottom-left">
|
||||
<label>v{{version_number}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -1,335 +0,0 @@
|
||||
@font-face{font-family:'promptfont'; src:url('promptfont.ttf');}
|
||||
.pf{font-family:promptfont;}
|
||||
.pf-exchange::after{content:'\u2194';}
|
||||
.pf-reverse::after{content:'\u2195';}
|
||||
.pf-left-trigger-lt::after{content:'\u2196';}
|
||||
.pf-right-trigger-rt::after{content:'\u2197';}
|
||||
.pf-left-shoulder-lb::after{content:'\u2198';}
|
||||
.pf-right-shoulder-rb::after{content:'\u2199';}
|
||||
.pf-left-trigger-zl::after{content:'\u219A';}
|
||||
.pf-right-trigger-zr::after{content:'\u219B';}
|
||||
.pf-left-shoulder-l::after{content:'\u219C';}
|
||||
.pf-right-shoulder-r::after{content:'\u219D';}
|
||||
.pf-dpad-left::after{content:'\u219E';}
|
||||
.pf-dpad-up::after{content:'\u219F';}
|
||||
.pf-dpad-right::after{content:'\u21A0';}
|
||||
.pf-dpad-down::after{content:'\u21A1';}
|
||||
.pf-dpad-left-right::after{content:'\u21A2';}
|
||||
.pf-dpad-up-down::after{content:'\u21A3';}
|
||||
.pf-button-left-x::after{content:'\u21A4';}
|
||||
.pf-button-up-y::after{content:'\u21A5';}
|
||||
.pf-button-right-b::after{content:'\u21A6';}
|
||||
.pf-button-down-a::after{content:'\u21A7';}
|
||||
.pf-left-analog-clockwise::after{content:'\u21A9';}
|
||||
.pf-left-analog-counter::after{content:'\u21AA';}
|
||||
.pf-right-analog-clockwise::after{content:'\u21AB';}
|
||||
.pf-right-analog-counter::after{content:'\u21AC';}
|
||||
.pf-both-analog-clockwise::after{content:'\u21AD';}
|
||||
.pf-both-analog-counter::after{content:'\u21AE';}
|
||||
.pf-left-shoulder-l1::after{content:'\u21B0';}
|
||||
.pf-right-shoulder-r1::after{content:'\u21B1';}
|
||||
.pf-left-trigger-l2::after{content:'\u21B2';}
|
||||
.pf-right-trigger-r2::after{content:'\u21B3';}
|
||||
.pf-dpad-left-down::after{content:'\u21B4';}
|
||||
.pf-dpad-up-right::after{content:'\u21B5';}
|
||||
.pf-analog-clockwise::after{content:'\u21B6';}
|
||||
.pf-analog-counter::after{content:'\u21B7';}
|
||||
.pf-both-analog-click::after{content:'\u21B9';}
|
||||
.pf-left-analog-click::after{content:'\u21BA';}
|
||||
.pf-right-analog-click::after{content:'\u21BB';}
|
||||
.pf-left-analog-left::after{content:'\u21BC';}
|
||||
.pf-right-analog-left::after{content:'\u21BD';}
|
||||
.pf-left-analog-up::after{content:'\u21BE';}
|
||||
.pf-right-analog-up::after{content:'\u21BF';}
|
||||
.pf-left-analog-right::after{content:'\u21C0';}
|
||||
.pf-right-analog-right::after{content:'\u21C1';}
|
||||
.pf-left-analog-down::after{content:'\u21C2';}
|
||||
.pf-right-analog-down::after{content:'\u21C3';}
|
||||
.pf-left-analog-left-right::after{content:'\u21C4';}
|
||||
.pf-left-analog-up-down::after{content:'\u21C5';}
|
||||
.pf-right-analog-left-right::after{content:'\u21C6';}
|
||||
.pf-analog-left::after{content:'\u21C7';}
|
||||
.pf-analog-up::after{content:'\u21C8';}
|
||||
.pf-analog-right::after{content:'\u21C9';}
|
||||
.pf-analog-down::after{content:'\u21CA';}
|
||||
.pf-left-analog::after{content:'\u21CB';}
|
||||
.pf-right-analog::after{content:'\u21CC';}
|
||||
.pf-dpad::after{content:'\u21CE';}
|
||||
.pf-button-x::after{content:'\u21D0';}
|
||||
.pf-button-y::after{content:'\u21D1';}
|
||||
.pf-button-b::after{content:'\u21D2';}
|
||||
.pf-button-a::after{content:'\u21D3';}
|
||||
.pf-analog-left-right::after{content:'\u21D4';}
|
||||
.pf-analog-up-down::after{content:'\u21D5';}
|
||||
.pf-analog-up-left::after{content:'\u21D6';}
|
||||
.pf-analog-up-right::after{content:'\u21D7';}
|
||||
.pf-analog-down-right::after{content:'\u21D8';}
|
||||
.pf-analog-down-left::after{content:'\u21D9';}
|
||||
.pf-left-analog-touch::after{content:'\u21DA';}
|
||||
.pf-right-analog-touch::after{content:'\u21DB';}
|
||||
.pf-left-trigger-pull::after{content:'\u21DC';}
|
||||
.pf-right-trigger-pull::after{content:'\u21DD';}
|
||||
.pf-dpad-right-down::after{content:'\u21DE';}
|
||||
.pf-dpad-left-up::after{content:'\u21DF';}
|
||||
.pf-button-square::after{content:'\u21E0';}
|
||||
.pf-button-triangle::after{content:'\u21E1';}
|
||||
.pf-button-circle::after{content:'\u21E2';}
|
||||
.pf-button-cross::after{content:'\u21E3';}
|
||||
.pf-steam-menu::after{content:'\u21E4';}
|
||||
.pf-options-menu::after{content:'\u21E5';}
|
||||
.pf-dualshock-share::after{content:'\u21E6';}
|
||||
.pf-dualshock-touchpad::after{content:'\u21E7';}
|
||||
.pf-dualshock-options::after{content:'\u21E8';}
|
||||
.pf-gamecube-z::after{content:'\u21E9';}
|
||||
.pf-back-trigger-z::after{content:'\u21EA';}
|
||||
.pf-button-c::after{content:'\u21EB';}
|
||||
.pf-button-z::after{content:'\u21EC';}
|
||||
.pf-button-alt-1::after{content:'\u21ED';}
|
||||
.pf-button-alt-2::after{content:'\u21EE';}
|
||||
.pf-left-analog-any::after{content:'\u21F1';}
|
||||
.pf-right-analog-any::after{content:'\u21F2';}
|
||||
.pf-analog-any::after{content:'\u21F3';}
|
||||
.pf-right-analog-up-down::after{content:'\u21F5';}
|
||||
.pf-select-share::after{content:'\u21F7';}
|
||||
.pf-start::after{content:'\u21F8';}
|
||||
.pf-home-menu::after{content:'\u21F9';}
|
||||
.pf-share-capture::after{content:'\u21FA';}
|
||||
.pf-burger-menu::after{content:'\u21FB';}
|
||||
.pf-minus::after{content:'\u21FD';}
|
||||
.pf-plus::after{content:'\u21FE';}
|
||||
.pf-joycon-dpad-left::after{content:'\u21FF';}
|
||||
.pf-joycon-dpad-up::after{content:'\u2200';}
|
||||
.pf-joycon-dpad-right::after{content:'\u2201';}
|
||||
.pf-joycon-dpad-down::after{content:'\u2202';}
|
||||
.pf-joycon-sl::after{content:'\u2203';}
|
||||
.pf-joycon-sr::after{content:'\u2204';}
|
||||
.pf-lenovo-legion-quick-settings::after{content:'\u2205';}
|
||||
.pf-dualsense-share::after{content:'\u2206';}
|
||||
.pf-dualsense-touchpad::after{content:'\u2207';}
|
||||
.pf-dualsense-options::after{content:'\u2208';}
|
||||
.pf-ayaneo-lc::after{content:'\u2209';}
|
||||
.pf-ayaneo-rc::after{content:'\u220A';}
|
||||
.pf-ayaneo-wave::after{content:'\u220B';}
|
||||
.pf-ayn-home::after{content:'\u220C';}
|
||||
.pf-ayn-lcc::after{content:'\u220D';}
|
||||
.pf-gpd-c1::after{content:'\u220E';}
|
||||
.pf-gpd-c2::after{content:'\u220F';}
|
||||
.pf-onexplayer-keyboard::after{content:'\u2210';}
|
||||
.pf-onexplayer-turbo::after{content:'\u2211';}
|
||||
.pf-m1::after{content:'\u2212';}
|
||||
.pf-m2::after{content:'\u2213';}
|
||||
.pf-m3::after{content:'\u2214';}
|
||||
.pf-y1::after{content:'\u2215';}
|
||||
.pf-y2::after{content:'\u2216';}
|
||||
.pf-y3::after{content:'\u2217';}
|
||||
.pf-onexplayer-function::after{content:'\u2218';}
|
||||
.pf-onexplayer-home::after{content:'\u2219';}
|
||||
.pf-left-trackpad-any::after{content:'\u2264';}
|
||||
.pf-right-trackpad-any::after{content:'\u2265';}
|
||||
.pf-left-trackpad-click::after{content:'\u2266';}
|
||||
.pf-right-trackpad-click::after{content:'\u2267';}
|
||||
.pf-left-trackpad-touch::after{content:'\u2268';}
|
||||
.pf-right-trackpad-touch::after{content:'\u2269';}
|
||||
.pf-left-trackpad-left::after{content:'\u226E';}
|
||||
.pf-right-trackpad-left::after{content:'\u226F';}
|
||||
.pf-left-trackpad-up::after{content:'\u2270';}
|
||||
.pf-right-trackpad-up::after{content:'\u2271';}
|
||||
.pf-left-trackpad-right::after{content:'\u2272';}
|
||||
.pf-right-trackpad-right::after{content:'\u2273';}
|
||||
.pf-left-trackpad-down::after{content:'\u2274';}
|
||||
.pf-right-trackpad-down::after{content:'\u2275';}
|
||||
.pf-steamdeck-l4::after{content:'\u2276';}
|
||||
.pf-steamdeck-r4::after{content:'\u2277';}
|
||||
.pf-steamdeck-l5::after{content:'\u2278';}
|
||||
.pf-steamdeck-r5::after{content:'\u2279';}
|
||||
.pf-xbox-dpad-left::after{content:'\u227A';}
|
||||
.pf-xbox-dpad-up::after{content:'\u227B';}
|
||||
.pf-xbox-dpad-right::after{content:'\u227C';}
|
||||
.pf-xbox-dpad-down::after{content:'\u227D';}
|
||||
.pf-xbox-dpad-left-right::after{content:'\u227E';}
|
||||
.pf-xbox-dpad-up-down::after{content:'\u227F';}
|
||||
.pf-xbox-dpad-left-up::after{content:'\u2280';}
|
||||
.pf-xbox-dpad-right-up::after{content:'\u2281';}
|
||||
.pf-xbox-dpad-left-down::after{content:'\u2282';}
|
||||
.pf-xbox-dpad-right-down::after{content:'\u2283';}
|
||||
.pf-xbox-dpad::after{content:'\u2284';}
|
||||
.pf-pin::after{content:'\u2316';}
|
||||
.pf-tabs::after{content:'\u23CD';}
|
||||
.pf-back::after{content:'\u23CE';}
|
||||
.pf-home-screen::after{content:'\u23CF';}
|
||||
.pf-horizontal-dots::after{content:'\u23D0';}
|
||||
.pf-vertical-dots::after{content:'\u23D1';}
|
||||
.pf-hamburger-menu::after{content:'\u23D2';}
|
||||
.pf-arrow-left::after{content:'\u23F4';}
|
||||
.pf-arrow-up::after{content:'\u23F5';}
|
||||
.pf-arrow-right::after{content:'\u23F6';}
|
||||
.pf-arrow-down::after{content:'\u23F7';}
|
||||
.pf-wasd::after{content:'\u2423';}
|
||||
.pf-arrow-keys::after{content:'\u2424';}
|
||||
.pf-ijkl::after{content:'\u2425';}
|
||||
.pf-fn::after{content:'\u2426';}
|
||||
.pf-ctrl::after{content:'\u2427';}
|
||||
.pf-alt::after{content:'\u2428';}
|
||||
.pf-shift::after{content:'\u2429';}
|
||||
.pf-super::after{content:'\u242A';}
|
||||
.pf-tab::after{content:'\u242B';}
|
||||
.pf-caps::after{content:'\u242C';}
|
||||
.pf-backspace::after{content:'\u242D';}
|
||||
.pf-enter::after{content:'\u242E';}
|
||||
.pf-esc::after{content:'\u242F';}
|
||||
.pf-prtsc::after{content:'\u2430';}
|
||||
.pf-scrlk::after{content:'\u2431';}
|
||||
.pf-pause::after{content:'\u2432';}
|
||||
.pf-numlock::after{content:'\u2433';}
|
||||
.pf-insert::after{content:'\u2434';}
|
||||
.pf-home::after{content:'\u2435';}
|
||||
.pf-page-up::after{content:'\u2436';}
|
||||
.pf-delete::after{content:'\u2437';}
|
||||
.pf-end::after{content:'\u2438';}
|
||||
.pf-page-down::after{content:'\u2439';}
|
||||
.pf-space::after{content:'\u243A';}
|
||||
.pf-gamepad::after{content:'\u243C';}
|
||||
.pf-keyboard::after{content:'\u243D';}
|
||||
.pf-mouse::after{content:'\u243E';}
|
||||
.pf-mouse-and-keyboard::after{content:'\u243F';}
|
||||
.pf-f1::after{content:'\u2460';}
|
||||
.pf-f2::after{content:'\u2461';}
|
||||
.pf-f3::after{content:'\u2462';}
|
||||
.pf-f4::after{content:'\u2463';}
|
||||
.pf-f5::after{content:'\u2464';}
|
||||
.pf-f6::after{content:'\u2465';}
|
||||
.pf-f7::after{content:'\u2466';}
|
||||
.pf-f8::after{content:'\u2467';}
|
||||
.pf-f9::after{content:'\u2468';}
|
||||
.pf-f10::after{content:'\u2469';}
|
||||
.pf-f11::after{content:'\u246A';}
|
||||
.pf-f12::after{content:'\u246B';}
|
||||
.pf-empty-keycap::after{content:'\u248F';}
|
||||
.pf-1::after{content:'\u24F5';}
|
||||
.pf-2::after{content:'\u24F6';}
|
||||
.pf-3::after{content:'\u24F7';}
|
||||
.pf-4::after{content:'\u24F8';}
|
||||
.pf-5::after{content:'\u24F9';}
|
||||
.pf-6::after{content:'\u24FA';}
|
||||
.pf-7::after{content:'\u24FB';}
|
||||
.pf-8::after{content:'\u24FC';}
|
||||
.pf-9::after{content:'\u24FD';}
|
||||
.pf-0::after{content:'\u24FF';}
|
||||
.pf-star::after{content:'\u2605';}
|
||||
.pf-skull::after{content:'\u2620';}
|
||||
.pf-frown::after{content:'\u2639';}
|
||||
.pf-smile::after{content:'\u263A';}
|
||||
.pf-empty-heart::after{content:'\u2661';}
|
||||
.pf-heart::after{content:'\u2665';}
|
||||
.pf-d4::after{content:'\u2673';}
|
||||
.pf-d6::after{content:'\u2674';}
|
||||
.pf-d8::after{content:'\u2675';}
|
||||
.pf-d10::after{content:'\u2676';}
|
||||
.pf-d12::after{content:'\u2677';}
|
||||
.pf-d20::after{content:'\u2678';}
|
||||
.pf-d6-1::after{content:'\u2680';}
|
||||
.pf-d6-2::after{content:'\u2681';}
|
||||
.pf-d6-3::after{content:'\u2682';}
|
||||
.pf-d6-4::after{content:'\u2683';}
|
||||
.pf-d6-5::after{content:'\u2684';}
|
||||
.pf-d6-6::after{content:'\u2685';}
|
||||
.pf-flag::after{content:'\u2691';}
|
||||
.pf-gears-options-settings::after{content:'\u2699';}
|
||||
.pf-cross::after{content:'\u2717';}
|
||||
.pf-question::after{content:'\u2753';}
|
||||
.pf-exclamation::after{content:'\u2757';}
|
||||
.pf-mouse-button-1::after{content:'\u278A';}
|
||||
.pf-mouse-button-2::after{content:'\u278B';}
|
||||
.pf-mouse-button-3::after{content:'\u278C';}
|
||||
.pf-mouse-button-4::after{content:'\u278D';}
|
||||
.pf-mouse-button-5::after{content:'\u278E';}
|
||||
.pf-mouse-button-6::after{content:'\u278F';}
|
||||
.pf-mouse-button-7::after{content:'\u2790';}
|
||||
.pf-mouse-button-8::after{content:'\u2791';}
|
||||
.pf-scroll-up::after{content:'\u27F0';}
|
||||
.pf-scroll-down::after{content:'\u27F1';}
|
||||
.pf-left-click::after{content:'\u27F5';}
|
||||
.pf-right-click::after{content:'\u27F6';}
|
||||
.pf-middle-click::after{content:'\u27F7';}
|
||||
.pf-mouse-left-right::after{content:'\u27FA';}
|
||||
.pf-mouse-up-down::after{content:'\u27FB';}
|
||||
.pf-mouse-any::after{content:'\u27FC';}
|
||||
.pf-box-crate::after{content:'\u2B1B';}
|
||||
.pf-playstation::after{content:'\uE000';}
|
||||
.pf-xbox::after{content:'\uE001';}
|
||||
.pf-nintendo-switch::after{content:'\uE002';}
|
||||
.pf-ayaneo::after{content:'\uE003';}
|
||||
.pf-lenovo-legion::after{content:'\uE004';}
|
||||
.pf-rog-ally-armoury::after{content:'\uE005';}
|
||||
.pf-rog-alloy-command::after{content:'\uE006';}
|
||||
.pf-apple-mac::after{content:'\uE007';}
|
||||
.pf-windows::after{content:'\uE008';}
|
||||
.pf-linux::after{content:'\uE009';}
|
||||
.pf-bsd::after{content:'\uE00A';}
|
||||
.pf-key-0::after{content:'\uFF10';}
|
||||
.pf-key-1::after{content:'\uFF11';}
|
||||
.pf-key-2::after{content:'\uFF12';}
|
||||
.pf-key-3::after{content:'\uFF13';}
|
||||
.pf-key-4::after{content:'\uFF14';}
|
||||
.pf-key-5::after{content:'\uFF15';}
|
||||
.pf-key-6::after{content:'\uFF16';}
|
||||
.pf-key-7::after{content:'\uFF17';}
|
||||
.pf-key-8::after{content:'\uFF18';}
|
||||
.pf-key-9::after{content:'\uFF19';}
|
||||
.pf-key-a::after{content:'\uFF21';}
|
||||
.pf-key-b::after{content:'\uFF22';}
|
||||
.pf-key-c::after{content:'\uFF23';}
|
||||
.pf-key-d::after{content:'\uFF24';}
|
||||
.pf-key-e::after{content:'\uFF25';}
|
||||
.pf-key-f::after{content:'\uFF26';}
|
||||
.pf-key-g::after{content:'\uFF27';}
|
||||
.pf-key-h::after{content:'\uFF28';}
|
||||
.pf-key-i::after{content:'\uFF29';}
|
||||
.pf-key-j::after{content:'\uFF2A';}
|
||||
.pf-key-k::after{content:'\uFF2B';}
|
||||
.pf-key-l::after{content:'\uFF2C';}
|
||||
.pf-key-m::after{content:'\uFF2D';}
|
||||
.pf-key-n::after{content:'\uFF2E';}
|
||||
.pf-key-o::after{content:'\uFF2F';}
|
||||
.pf-key-p::after{content:'\uFF30';}
|
||||
.pf-key-q::after{content:'\uFF31';}
|
||||
.pf-key-r::after{content:'\uFF32';}
|
||||
.pf-key-s::after{content:'\uFF33';}
|
||||
.pf-key-t::after{content:'\uFF34';}
|
||||
.pf-key-u::after{content:'\uFF35';}
|
||||
.pf-key-v::after{content:'\uFF36';}
|
||||
.pf-key-w::after{content:'\uFF37';}
|
||||
.pf-key-x::after{content:'\uFF38';}
|
||||
.pf-key-y::after{content:'\uFF39';}
|
||||
.pf-key-z::after{content:'\uFF3A';}
|
||||
.pf-headphones::after{content:'\u1F3A7';}
|
||||
.pf-music::after{content:'\u1F3B6';}
|
||||
.pf-fish::after{content:'\u1F41F';}
|
||||
.pf-dance-pad::after{content:'\u1F483';}
|
||||
.pf-laptop::after{content:'\u1F4BB';}
|
||||
.pf-diskette::after{content:'\u1F4BE';}
|
||||
.pf-write::after{content:'\u1F4DD';}
|
||||
.pf-phone::after{content:'\u1F4F1';}
|
||||
.pf-camera::after{content:'\u1F4F7';}
|
||||
.pf-speaker::after{content:'\u1F508';}
|
||||
.pf-light-gun::after{content:'\u1F52B';}
|
||||
.pf-sfx-sound-effect-noise::after{content:'\u1F56C';}
|
||||
.pf-steering-wheel::after{content:'\u1F578';}
|
||||
.pf-fight-stick-joystick::after{content:'\u1F579';}
|
||||
.pf-vr-headset::after{content:'\u1F57B';}
|
||||
.pf-vr-controller::after{content:'\u1F57C';}
|
||||
.pf-flight-stick::after{content:'\u1F57D';}
|
||||
.pf-cpu-processor::after{content:'\u1F5A5';}
|
||||
.pf-web-internet-link::after{content:'\u1F5A7';}
|
||||
.pf-gpu-graphics-card::after{content:'\u1F5A8';}
|
||||
.pf-ram-memory::after{content:'\u1F5AA';}
|
||||
.pf-usb-stick::after{content:'\u1F5AB';}
|
||||
.pf-database::after{content:'\u1F5AC';}
|
||||
.pf-hard-disk-drive::after{content:'\u1F5B4';}
|
||||
.pf-screen-video::after{content:'\u1F5B5';}
|
||||
.pf-text-entry-edit::after{content:'\u1F5B9';}
|
||||
.pf-speaking-voice::after{content:'\u1F5E3';}
|
||||
.pf-language::after{content:'\u1F5E9';}
|
||||
.pf-exit-quit-leave::after{content:'\u1F6AA';}
|
||||
.pf-information::after{content:'\u1F6C8';}
|
||||
.pf-shopping-cart::after{content:'\u1F6D2';}
|
||||
+3
-1860
File diff suppressed because it is too large
Load Diff
@@ -1,61 +0,0 @@
|
||||
/*
|
||||
* Default styles for all the basic elements.
|
||||
*/
|
||||
|
||||
div
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
em
|
||||
{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
select
|
||||
{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tabset tabs
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
}
|
||||
tr {
|
||||
box-sizing: border-box;
|
||||
display: table-row;
|
||||
}
|
||||
td {
|
||||
box-sizing: border-box;
|
||||
display: table-cell;
|
||||
}
|
||||
col {
|
||||
box-sizing: border-box;
|
||||
display: table-column;
|
||||
}
|
||||
colgroup {
|
||||
display: table-column-group;
|
||||
}
|
||||
thead, tbody, tfoot {
|
||||
display: table-row-group;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
iron
|
||||
@@ -1,99 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-recommended",
|
||||
"stylelint-config-standard",
|
||||
"stylelint-config-sass-guidelines",
|
||||
"stylelint-config-property-sort-order-smacss",
|
||||
"stylelint-config-standard-scss"
|
||||
],
|
||||
"plugins": ["stylelint-scss"],
|
||||
"overrides": [{
|
||||
"files": ["**/*.scss"],
|
||||
"customSyntax": "postcss-scss"
|
||||
}],
|
||||
"rules": {
|
||||
"no-descending-specificity": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"declaration-colon-newline-after": null,
|
||||
"declaration-block-no-duplicate-properties": true,
|
||||
"declaration-block-trailing-semicolon": null,
|
||||
"declaration-no-important": true,
|
||||
"declaration-property-value-disallowed-list": {
|
||||
"/^transition/": ["/all/"]
|
||||
},
|
||||
"block-closing-brace-newline-after": null,
|
||||
"max-empty-lines": null,
|
||||
"selector-list-comma-newline-after": null,
|
||||
"at-rule-empty-line-before": null,
|
||||
"at-rule-semicolon-newline-after": null,
|
||||
"selector-pseudo-element-colon-notation": "single",
|
||||
"color-no-hex": true,
|
||||
"function-url-quotes": "always",
|
||||
"max-nesting-depth": [
|
||||
4,
|
||||
{
|
||||
"ignoreAtRules": ["each", "media", "supports", "include"],
|
||||
"severity": "warning"
|
||||
}
|
||||
],
|
||||
"number-leading-zero": null,
|
||||
"order/order": [
|
||||
[
|
||||
"custom-properties",
|
||||
"dollar-variables",
|
||||
{
|
||||
"type": "at-rule",
|
||||
"name": "extend"
|
||||
},
|
||||
{
|
||||
"type": "at-rule",
|
||||
"name": "include"
|
||||
},
|
||||
"declarations",
|
||||
"rules"
|
||||
]
|
||||
],
|
||||
"order/properties-alphabetical-order": null,
|
||||
"property-no-vendor-prefix": [
|
||||
true,
|
||||
{
|
||||
"severity": "warning"
|
||||
}
|
||||
],
|
||||
"value-no-vendor-prefix": [
|
||||
true,
|
||||
{
|
||||
"severity": "warning"
|
||||
}
|
||||
],
|
||||
"scss/selector-no-redundant-nesting-selector": null,
|
||||
"selector-class-pattern": null,
|
||||
"selector-max-compound-selectors": [
|
||||
4,
|
||||
{
|
||||
"severity": "warning"
|
||||
}
|
||||
],
|
||||
"selector-no-qualifying-type": null,
|
||||
"string-quotes": null,
|
||||
"max-line-length": null,
|
||||
"keyframes-name-pattern": null,
|
||||
"scss/double-slash-comment-empty-line-before": null,
|
||||
"scss/double-slash-comment-whitespace-inside": null,
|
||||
"scss/dollar-variable-empty-line-before": null,
|
||||
"scss/dollar-variable-pattern": "[a-z-]",
|
||||
"scss/at-import-partial-extension": null,
|
||||
"declaration-block-no-redundant-longhand-properties": null,
|
||||
"color-function-notation": null,
|
||||
"alpha-value-notation": null,
|
||||
"at-rule-no-unknown": null,
|
||||
"property-no-unknown": null,
|
||||
"scss/at-rule-no-unknown": true,
|
||||
"selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["selected"] }],
|
||||
"font-family-no-missing-generic-family-keyword": null,
|
||||
"scss/no-global-function-names": null,
|
||||
"unit-no-unknown": [true, { "ignoreUnits": ["dp"] }],
|
||||
"selector-type-no-unknown": [true, { "ignore": ["custom-elements", "default-namespace"] }],
|
||||
"value-keyword-case": null
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@import "styles/base";
|
||||
@import "styles/global";
|
||||
Generated
-2261
File diff suppressed because it is too large
Load Diff
@@ -1,29 +0,0 @@
|
||||
{
|
||||
"name": "mmrecomp-ui-scss",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "npm run watch",
|
||||
"watch": "sass --no-source-map --no-charset --style=compressed main.scss ..\\recomp.rcss --watch",
|
||||
"watch:debug": "sass --no-source-map --no-charset main.scss ..\\recomp.rcss --watch",
|
||||
"build": "sass --no-source-map --no-charset --style=compressed main.scss ..\\recomp.rcss",
|
||||
"build:debug": "sass --no-source-map --no-charset main.scss ..\\recomp.rcss",
|
||||
"lint": "stylelint '.\\**\\*.scss'"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"postcss-scss": "^4.0.9",
|
||||
"stylelint": "^15.11.0",
|
||||
"stylelint-config-property-sort-order-smacss": "^9.1.0",
|
||||
"stylelint-config-sass-guidelines": "^10.0.0",
|
||||
"stylelint-config-scss": "^1.0.0-security",
|
||||
"stylelint-config-standard": "^34.0.0",
|
||||
"stylelint-config-standard-scss": "^11.1.0",
|
||||
"stylelint-scss": "^5.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.75.0"
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
@use 'sass:math';
|
||||
@import "./functions/spacing";
|
||||
@import "./vars/spacing";
|
||||
@import "./vars/colors";
|
||||
@import "./vars/borders";
|
||||
@import "./vars/gradients";
|
||||
@import "./vars/transitions";
|
||||
@import "./vars/animations";
|
||||
@import "./mixins/typography";
|
||||
@import "./mixins/transitions";
|
||||
@import "./mixins/helpers";
|
||||
@@ -1,14 +0,0 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.bottom-left {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: space(4);
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
height: auto;
|
||||
margin: 0 space(4);
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@mixin create-button-variation($base-col, $base-col-05, $base-col-20, $base-col-30, $base-col-80) {
|
||||
border-color: $base-col-80;
|
||||
background-color: $base-col-05;
|
||||
color: $color-text-dim;
|
||||
|
||||
&:focus, &:hover {
|
||||
border-color: $base-col;
|
||||
background-color: $base-col-30;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
&:disabled,&[disabled] {
|
||||
color: $color-text-inactive;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $base-col-20;
|
||||
color: $color-text-active;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend %label-md;
|
||||
@extend %nav-all;
|
||||
@include create-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
|
||||
@include trans-colors;
|
||||
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
// leave 1dp room for border expansion
|
||||
padding: space(24 - 1);
|
||||
border-width: $border-width-thickness;
|
||||
|
||||
border-radius: $border-radius-md;
|
||||
|
||||
// Setting it by default for convenience
|
||||
&--primary {
|
||||
@include create-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
|
||||
}
|
||||
|
||||
&--large {
|
||||
@extend %label-lg;
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
@include create-button-variation($color-secondary, $color-secondary-a5, $color-secondary-a20, $color-secondary-a30, $color-secondary-a80);
|
||||
}
|
||||
|
||||
&--tertiary {
|
||||
@include create-button-variation($color-text, $color-text-a5, $color-text-a20, $color-text-a30, $color-text-a80);
|
||||
}
|
||||
|
||||
&--success {
|
||||
@include create-button-variation($color-success, $color-success-a5, $color-success-a20, $color-success-a30, $color-success-a80);
|
||||
}
|
||||
|
||||
&--danger {
|
||||
@include create-button-variation($color-danger, $color-danger-a5, $color-danger-a20, $color-danger-a30, $color-danger-a80);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@include create-button-variation($color-warning, $color-warning-a5, $color-warning-a20, $color-warning-a30, $color-warning-a80);
|
||||
}
|
||||
|
||||
&:not([disabled]) {
|
||||
@extend %nav-all;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:disabled,&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__label {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.centered-page {
|
||||
display: flex;
|
||||
// visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: space($page-margin);
|
||||
background-color: $color-border-soft;
|
||||
}
|
||||
|
||||
.centered-page__modal {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
border-width: $border-width-thickness;
|
||||
border-radius: $border-radius-modal;
|
||||
border-color: $color-border;
|
||||
background: $color-modal-overlay;
|
||||
|
||||
> .tabs {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
panels {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.centered-page__controls {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: space(24);
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
> label {
|
||||
@extend %label-sm;
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: auto;
|
||||
height: space(24);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: space(40);
|
||||
}
|
||||
|
||||
> span:first-child {
|
||||
margin-right: space(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
|
||||
.config__icon-buttons {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: space(8);
|
||||
right: space(0);
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: auto;
|
||||
|
||||
.icon-button {
|
||||
margin: 0 space(8);
|
||||
}
|
||||
}
|
||||
|
||||
.config__form {
|
||||
@include border-top($color-border-soft);
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom-right-radius: $border-radius-modal;
|
||||
border-bottom-left-radius: $border-radius-modal;
|
||||
}
|
||||
|
||||
.config__wrapper {
|
||||
flex: 1 1 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: space(16);
|
||||
border-radius: 0dp;
|
||||
border-bottom-right-radius: $border-radius-modal;
|
||||
border-bottom-left-radius: $border-radius-modal;
|
||||
background-color: $color-bg-shadow;
|
||||
text-align: left;
|
||||
|
||||
p {
|
||||
@extend %body;
|
||||
padding: space(16);
|
||||
line-height: space(28);
|
||||
white-space: pre-line;
|
||||
|
||||
b {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $color-warning;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config__hz-wrapper {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0dp;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.config__header, .config__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
background-color: $color-bg-shadow;
|
||||
}
|
||||
|
||||
.config__header {
|
||||
@include border-bottom($color-border-soft);
|
||||
padding: space(12) space(20);
|
||||
}
|
||||
|
||||
.config__footer {
|
||||
@include border-top($color-border-soft);
|
||||
padding: space(20) space(20);
|
||||
border-bottom-right-radius: $border-radius-modal;
|
||||
border-bottom-left-radius: $border-radius-modal;
|
||||
}
|
||||
|
||||
.config__header-left {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: row;
|
||||
|
||||
> :not(:first-child) {
|
||||
margin-left: space(8);
|
||||
}
|
||||
}
|
||||
|
||||
.config__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
.config-description {
|
||||
flex: 1 1 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: space(16);
|
||||
border-radius: 0dp;
|
||||
border-bottom-right-radius: $border-radius-modal;
|
||||
border-bottom-left-radius: $border-radius-modal;
|
||||
background-color: $color-bg-shadow;
|
||||
text-align: left;
|
||||
|
||||
&__contents {
|
||||
@extend %body;
|
||||
padding: space(16);
|
||||
line-height: space(28);
|
||||
white-space: pre-line;
|
||||
|
||||
b {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $color-warning;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
|
||||
.config-group {
|
||||
position: relative;
|
||||
|
||||
&--scrollable {
|
||||
flex: 1 1 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0 0 0 space(16);
|
||||
|
||||
.config-group__wrapper {
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@extend %label-md;
|
||||
color: $color-primary;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
padding: space(16) 0;
|
||||
}
|
||||
}
|
||||
@@ -1,413 +0,0 @@
|
||||
.config-option {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
margin: space(16) space(0) space(24);
|
||||
|
||||
&--hz {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
margin-top: space(4);
|
||||
margin-bottom: space(4);
|
||||
|
||||
.config-option__title {
|
||||
@extend %label-md;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.config-option__list {
|
||||
flex: 1 1 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-option__title {
|
||||
@extend %label-md;
|
||||
padding: 0 space(12);
|
||||
}
|
||||
|
||||
.config-option__radio-tabs,
|
||||
.config-option__list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
|
||||
input:first-of-type {
|
||||
nav-left: none;
|
||||
}
|
||||
|
||||
input:last-of-type {
|
||||
nav-right: none;
|
||||
}
|
||||
|
||||
.config-option__tab-label {
|
||||
@extend %label-sm;
|
||||
@include trans-colors-opa;
|
||||
display: block;
|
||||
position: relative;
|
||||
height: auto;
|
||||
margin: space(4) space(12) 0;
|
||||
padding: space(8) 0;
|
||||
color: $color-text-inactive;
|
||||
tab-index: none;
|
||||
|
||||
&:hover {
|
||||
color: $color-text;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.config-option__checkbox-wrapper {
|
||||
@include trans-colors-opa;
|
||||
width: space(32);
|
||||
height: space(32);
|
||||
margin: space(4) space(12) 0;
|
||||
border-radius: $border-radius-sm;
|
||||
opacity: 0.5;
|
||||
background-color: $color-bg-overlay;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[checked] {
|
||||
background-color: $color-a;
|
||||
}
|
||||
}
|
||||
|
||||
.config-option__checkbox {
|
||||
@extend %nav-all;
|
||||
@include trans-colors-opa;
|
||||
visibility: visible;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// TODO: Remove & Replace old stylings
|
||||
input.radio {
|
||||
@extend %nav-all;
|
||||
@include trans-colors-opa;
|
||||
visibility: visible;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&:not(:disabled) {
|
||||
&:checked + .config-option__tab-label {
|
||||
border-bottom: 1dp;
|
||||
border-color: $color-text;
|
||||
color: $color-text;
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label {
|
||||
transition: none;
|
||||
animation: $focus-anim-border;
|
||||
border-color: $color-secondary;
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
&:focus + .config-option__tab-label,
|
||||
&:hover + .config-option__tab-label {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled + .config-option__tab-label {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.range slidertrack {
|
||||
@include trans-colors;
|
||||
height: 2dp;
|
||||
margin-top: space(8);
|
||||
background-color: $color-border;
|
||||
}
|
||||
|
||||
input.range sliderbar {
|
||||
@include trans-colors;
|
||||
width: space(16);
|
||||
height: space(16);
|
||||
margin-top: space(1);
|
||||
margin-right: space(-8);
|
||||
margin-left: space(-8);
|
||||
transition: background-color $transition-quick;
|
||||
border-radius: 8dp;
|
||||
background-color: $color-text-dim;
|
||||
|
||||
.rmlui-window:not([mouse-active]) &:focus {
|
||||
@include border($color-a);
|
||||
animation: $focus-anim-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-text;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
input.range sliderbar:active,
|
||||
input.range slidertrack:active + sliderbar {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
|
||||
input.range sliderarrowdec,
|
||||
input.range sliderarrowinc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.config-option__details {
|
||||
@extend %label-xs;
|
||||
height: space(18);
|
||||
margin: space(14) space(12) 0;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.config-option-color {
|
||||
width: 100%;
|
||||
max-width: space(360);
|
||||
height: auto;
|
||||
margin-top: space(4);
|
||||
margin-left: space(12);
|
||||
padding: 0;
|
||||
|
||||
&__preview-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: space(8 * 9);
|
||||
}
|
||||
|
||||
&__preview-block {
|
||||
display: block;
|
||||
width: space(8 * 11);
|
||||
height: 100%;
|
||||
border-width: $border-width-thickness;
|
||||
border-radius: $border-radius-lg;
|
||||
border-color: $color-border;
|
||||
}
|
||||
|
||||
&__hsv-wrapper {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding-left: space(8);
|
||||
|
||||
.config-option-range {
|
||||
flex: 1 1 auto;
|
||||
|
||||
label {
|
||||
min-width: space(72);
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-option-range {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
max-width: space(360);
|
||||
height: auto;
|
||||
margin-top: space(4);
|
||||
padding: 0;
|
||||
|
||||
&__label {
|
||||
@extend %label-sm;
|
||||
|
||||
display: block;
|
||||
width: space(56);
|
||||
margin: 0 12dp;
|
||||
margin-right: space(16);
|
||||
padding: 0;
|
||||
color: $color-text;
|
||||
tab-index: none;
|
||||
}
|
||||
|
||||
&__range-input {
|
||||
flex: 1;
|
||||
|
||||
slidertrack {
|
||||
@include trans-colors;
|
||||
height: 2dp;
|
||||
margin-top: space(8);
|
||||
background-color: $color-border;
|
||||
}
|
||||
|
||||
sliderbar {
|
||||
@include trans-colors;
|
||||
width: space(16);
|
||||
height: space(16);
|
||||
margin-top: space(1);
|
||||
margin-right: space(-8);
|
||||
margin-left: space(-8);
|
||||
transition: background-color $transition-quick;
|
||||
border-radius: 8dp;
|
||||
background-color: $color-text-dim;
|
||||
|
||||
.rmlui-window:not([mouse-active]) &:focus {
|
||||
@include border($color-a);
|
||||
animation: $focus-anim-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-text;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
sliderbar:active,
|
||||
slidertrack:active + sliderbar {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
|
||||
sliderarrowdec,
|
||||
sliderarrowinc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.config-option__range-wrapper {
|
||||
max-width: space(360);
|
||||
margin-top: space(4);
|
||||
}
|
||||
|
||||
.config-option__range-label {
|
||||
@extend %label-sm;
|
||||
|
||||
display: block;
|
||||
// flex: 0 0 space(32);
|
||||
width: space(56);
|
||||
margin: 0 12dp;
|
||||
margin-right: space(16);
|
||||
padding: 0;
|
||||
color: $color-text;
|
||||
tab-index: none;
|
||||
}
|
||||
|
||||
.config-option-dropdown, .config-option-textfield {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: space(8) space(24) space(8) space(12);
|
||||
|
||||
&__select {
|
||||
display: block;
|
||||
height: space(48);
|
||||
padding: space(14);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
// Cursed guess & check so that this appears to be the same height as the select
|
||||
$extra-space: 2;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: space(0 + $extra-space) 0 space(10 + $extra-space);
|
||||
cursor: text;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&__select, &__wrapper {
|
||||
@extend %body;
|
||||
@extend %nav-all;
|
||||
@include trans-colors-border;
|
||||
@include border($color-white-a50);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 100%;
|
||||
|
||||
width: auto;
|
||||
border-radius: $border-radius-md;
|
||||
background-color: $color-white-a5;
|
||||
|
||||
&:hover, &:focus {
|
||||
@include border($color-white-a80);
|
||||
background-color: $color-white-a20;
|
||||
}
|
||||
|
||||
selectvalue {
|
||||
display: inline;
|
||||
height: auto;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
selectbox {
|
||||
@include border($color-border);
|
||||
margin-top: space(2);
|
||||
padding: space(4) 0;
|
||||
border-radius: $border-radius-md;
|
||||
background-color: $color-background-3;
|
||||
|
||||
option {
|
||||
@extend %nav-all;
|
||||
@include trans-colors;
|
||||
padding: space(8) space(12);
|
||||
background-color: $color-transparent;
|
||||
color: $color-text-dim;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $color-white-a20;
|
||||
}
|
||||
|
||||
&:hover:not(:checked) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $color-white-a5;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
@use 'sass:color';
|
||||
|
||||
/*
|
||||
<button
|
||||
class="icon-button icon-button--danger"
|
||||
>
|
||||
<svg src="icons/Trash.svg" />
|
||||
</button>
|
||||
*/
|
||||
@mixin create-icon-button-variation($base-col, $base-col-05, $base-col-20, $base-col-30, $base-col-80) {
|
||||
border-color: $base-col-80;
|
||||
background-color: $base-col-05;
|
||||
|
||||
&:focus, &:hover {
|
||||
border-color: $base-col;
|
||||
background-color: $base-col-30;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $base-col-20;
|
||||
}
|
||||
}
|
||||
|
||||
$icon-button-size: 56 - ($border-width-thickness-num * 2);
|
||||
|
||||
.icon-button {
|
||||
@include set-color($color-text-dim);
|
||||
@include trans-colors-border;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: space($icon-button-size);
|
||||
min-width: space($icon-button-size);
|
||||
max-width: space($icon-button-size);
|
||||
height: space($icon-button-size);
|
||||
min-height: space($icon-button-size);
|
||||
max-height: space($icon-button-size);
|
||||
border-width: $border-width-thickness;
|
||||
border-radius: space($icon-button-size * 0.5);
|
||||
border-color: $color-transparent;
|
||||
background-color: $color-transparent;
|
||||
|
||||
&:focus, &:hover {
|
||||
@include set-color($color-text);
|
||||
background-color: $color-border;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include set-color($color-text-active);
|
||||
background-color: $color-border-soft;
|
||||
}
|
||||
|
||||
&:disabled,&[disabled] {
|
||||
@include set-color($color-text-dim);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:not([disabled]) {
|
||||
@extend %nav-all;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: space(32);
|
||||
height: space(32);
|
||||
}
|
||||
|
||||
&--primary {
|
||||
@include create-icon-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
@include create-icon-button-variation($color-secondary, $color-secondary-a5, $color-secondary-a20, $color-secondary-a30, $color-secondary-a80);
|
||||
}
|
||||
|
||||
&--tertiary {
|
||||
@include create-icon-button-variation($color-text, $color-text-a5, $color-text-a20, $color-text-a30, $color-text-a80);
|
||||
}
|
||||
|
||||
&--success {
|
||||
@include create-icon-button-variation($color-success, $color-success-a5, $color-success-a20, $color-success-a30, $color-success-a80);
|
||||
}
|
||||
|
||||
&--danger {
|
||||
@include create-icon-button-variation($color-danger, $color-danger-a5, $color-danger-a20, $color-danger-a30, $color-danger-a80);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@include create-icon-button-variation($color-warning, $color-warning-a5, $color-warning-a20, $color-warning-a30, $color-warning-a80);
|
||||
}
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
|
||||
// TODO: Affect all elements with launcher fade-in
|
||||
// @keyframes fade-launcher-in {
|
||||
// 0% {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// to {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
.launcher {
|
||||
display: block;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $color-background-1;
|
||||
}
|
||||
|
||||
.launcher__vertical-split {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
&--right {
|
||||
right: 0;
|
||||
left: 50%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes slide-mm-bg-over {
|
||||
0% {
|
||||
transform: translateX(space(100));
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(space(0));
|
||||
}
|
||||
}
|
||||
|
||||
.launcher__background-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: -55vw;
|
||||
right: -100%;
|
||||
bottom: -50vw;
|
||||
left: -70vw;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
transform: translateX(space(0));
|
||||
animation: 25s cubic-out 1 slide-mm-bg-over;
|
||||
}
|
||||
|
||||
@keyframes fade-mm-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.launcher__background-bk {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
animation: 2.5s cubic-in-out 1 fade-mm-in;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.launcher__title-quadrant {
|
||||
flex: 1 1 auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding-top: space(96);
|
||||
padding-left: space(96);
|
||||
|
||||
&--right {
|
||||
padding-right: space(96);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.launcher__content-quadrant {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: space(32);
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
|
||||
/*
|
||||
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 {
|
||||
@include set-color($color-text-dim);
|
||||
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);
|
||||
cursor: pointer;
|
||||
|
||||
&--right {
|
||||
flex-direction: row-reverse;
|
||||
align-content: flex-end;
|
||||
|
||||
.menu-list-item__bullet {
|
||||
margin-left: space(12);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.menu-list-item:focus:not(:disabled, [disabled]),
|
||||
&.menu-list-item:hover:not(:disabled, [disabled]) {
|
||||
// decorator: $primary-rl-fade;
|
||||
background-color: $color-white-a5;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(:disabled, [disabled]),
|
||||
&:hover:not(:disabled, [disabled]) {
|
||||
@include set-color($color-primary);
|
||||
// decorator: $primary-lr-fade;
|
||||
background-color: $color-white-a5;
|
||||
|
||||
.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 {
|
||||
margin-right: space(12);
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
@use 'sass:math';
|
||||
|
||||
$prompt-space: 24;
|
||||
|
||||
.prompt {
|
||||
&__overlay {
|
||||
background-color: $color-bg-overlay;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&__overlay,
|
||||
&__content-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__content-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: space(700);
|
||||
height: auto;
|
||||
margin: auto;
|
||||
border-width: $border-width-thickness;
|
||||
border-radius: $border-radius-modal;
|
||||
border-color: $color-border;
|
||||
background: $color-modal-overlay;
|
||||
|
||||
h3, p {
|
||||
margin: space($prompt-space);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: space($prompt-space) space(math.div($prompt-space, 2));
|
||||
border-top-width: $border-width-thickness;
|
||||
border-top-color: $color-border-soft;
|
||||
|
||||
.button {
|
||||
min-width: space(math.div(700, 3));
|
||||
margin: 0 space(math.div($prompt-space, 2));
|
||||
text-align: center;
|
||||
nav-up: none;
|
||||
nav-down: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
/*
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: $color-text-dim;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
&--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,63 +0,0 @@
|
||||
/*
|
||||
Example:
|
||||
<tab class="tab">
|
||||
<div>Graphics</div>
|
||||
<div class="tab__indicator"></div>
|
||||
</tab>
|
||||
*/
|
||||
|
||||
.tabs tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tab {
|
||||
@extend %nav-all;
|
||||
@extend %header-3;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: space(20) space(24);
|
||||
transition: color $transition-quick;
|
||||
opacity: 0.9;
|
||||
background-color: rgba(0,0,0,0);
|
||||
color: $color-text-inactive;
|
||||
|
||||
&:selected {
|
||||
color: $color-text;
|
||||
|
||||
.tab__indicator {
|
||||
background-color: $color-border-solid;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.rmlui-window:not([mouse-active]) &:focus {
|
||||
transition: none;
|
||||
animation: $focus-anim-border;
|
||||
|
||||
&:selected .tab__indicator {
|
||||
animation: $focus-anim-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
opacity: 1;
|
||||
color: $color-text;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tab__indicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 2dp;
|
||||
left: 0;
|
||||
height: 2dp;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
@use "sass:math";
|
||||
|
||||
$toggle-width: 162;
|
||||
$toggle-height: 72;
|
||||
|
||||
$toggle-floater-width: 80;
|
||||
$toggle-floater-height: 64;
|
||||
$toggle-floater-margin: 4;
|
||||
$toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-floater-width;
|
||||
|
||||
.toggle {
|
||||
@extend %nav-all;
|
||||
@include trans-colors-opa;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: space($toggle-width);
|
||||
height: space($toggle-height);
|
||||
border-radius: space(math.div($toggle-height, 2));
|
||||
opacity: 0.9;
|
||||
background: $color-transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus-visible, &:focus {
|
||||
opacity: 1;
|
||||
background-color: $color-secondary-a30;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
background-color: $color-secondary-a5;
|
||||
}
|
||||
|
||||
.toggle__border {
|
||||
@include inner-border-block($color-secondary-l);
|
||||
border-radius: space(math.div($toggle-height, 2));
|
||||
}
|
||||
|
||||
.toggle__floater {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: space($toggle-floater-margin);
|
||||
width: space($toggle-floater-width);
|
||||
height: space($toggle-floater-height);
|
||||
transform: translateY(-50%);
|
||||
border-radius: space(math.div($toggle-floater-height, 2));
|
||||
background: $color-secondary-d;
|
||||
}
|
||||
|
||||
&--checked {
|
||||
.toggle__floater {
|
||||
left: space($toggle-checked-left-offset);
|
||||
}
|
||||
|
||||
.toggle__icon {
|
||||
&.toggle__icon--left {
|
||||
opacity: 0.9;
|
||||
color: $color-secondary-l;
|
||||
}
|
||||
|
||||
&.toggle__icon--right {
|
||||
opacity: 1.0;
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle__icons {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: space(16);
|
||||
left: space(16);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: space(56);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.toggle__icon {
|
||||
@extend %prompt-font-lg;
|
||||
@include trans-colors;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: space(56);
|
||||
height: space(56);
|
||||
color: $color-text;
|
||||
|
||||
&--right {
|
||||
opacity: 1;
|
||||
color: $color-secondary-l;
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
@import "./CenteredPage";
|
||||
@import "./Tabs";
|
||||
@import "./Config";
|
||||
@import "./ConfigGroup";
|
||||
@import "./ConfigOption";
|
||||
@import "./ConfigDescription";
|
||||
@import "./Button";
|
||||
@import "./IconButton";
|
||||
@import "./Launcher";
|
||||
@import "./MenuListItem";
|
||||
@import "./SubtitleTitle";
|
||||
@import "./Toggle";
|
||||
@import "./BottomLeft";
|
||||
@import "./Prompt";
|
||||
@@ -1,4 +0,0 @@
|
||||
|
||||
@function space($amt) {
|
||||
@return #{$amt}dp;
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
@import "./base";
|
||||
|
||||
body
|
||||
{
|
||||
@extend %body;
|
||||
box-sizing: border-box;
|
||||
color: $color-text;
|
||||
font-family: $font-stack;
|
||||
}
|
||||
|
||||
@import "./globals/old";
|
||||
@import "./globals/scrollbars";
|
||||
@import "./components/components";
|
||||
@import "./pages/pages";
|
||||
|
||||
$font-size: 20dp;
|
||||
|
||||
|
||||
.rmlui-window {
|
||||
opacity: 1;
|
||||
|
||||
&--hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:not([mouse-active]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-vert {
|
||||
@extend %nav-vert;
|
||||
}
|
||||
|
||||
.nav-horiz {
|
||||
@extend %nav-horiz;
|
||||
}
|
||||
|
||||
.nav-dir {
|
||||
@extend %nav-dir;
|
||||
}
|
||||
|
||||
.nav-foc {
|
||||
@extend %nav-foc;
|
||||
}
|
||||
|
||||
.nav-all {
|
||||
@extend %nav-all;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %header-1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %header-2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %header-3;
|
||||
}
|
||||
|
||||
.label-lg {
|
||||
@extend %label-lg;
|
||||
}
|
||||
|
||||
.label-md {
|
||||
@extend %label-md;
|
||||
}
|
||||
|
||||
.label-sm {
|
||||
@extend %label-sm;
|
||||
}
|
||||
|
||||
.prompt-font {
|
||||
@extend %prompt-font;
|
||||
}
|
||||
|
||||
.prompt-font-sm {
|
||||
@extend %prompt-font-sm;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-primary-d;
|
||||
}
|
||||
|
||||
@keyframes blue-pulse {
|
||||
0% {
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: $color-secondary-l;
|
||||
}
|
||||
|
||||
100% {
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blue-pulse-with-border {
|
||||
0% {
|
||||
border-color: $color-secondary;
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: $color-secondary-l;
|
||||
color: $color-secondary-l;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-color: $color-secondary;
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blue-pulse-background {
|
||||
0% {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: $color-secondary-l;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
@@ -1,211 +0,0 @@
|
||||
/* stylelint-disable color-no-hex */
|
||||
/* stylelint-disable selector-max-id */
|
||||
|
||||
* {
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
hr {
|
||||
display:block;
|
||||
padding:1.5dp;
|
||||
background: $color-background-1;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
font-size: 20dp;
|
||||
font-style: normal;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
/* div {
|
||||
focus:none;
|
||||
tab-index:none;
|
||||
} */
|
||||
|
||||
div#window {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-color: $color-border;
|
||||
background-color: $color-background-2;
|
||||
}
|
||||
|
||||
div#content {
|
||||
z-index: 2;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
overflow: hidden auto;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input.submit {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
|
||||
input.text,
|
||||
input.password {
|
||||
box-sizing: border-box;
|
||||
height: 31dp;
|
||||
padding: 11dp 10dp 0;
|
||||
text-align: left;
|
||||
cursor: text
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 14dp 12dp 10dp;
|
||||
text-align: left;
|
||||
cursor: text
|
||||
}
|
||||
|
||||
input.text,
|
||||
input.password,
|
||||
select,
|
||||
textarea {
|
||||
/* color: #333; */
|
||||
|
||||
/* font-size: 13dp */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
table input.text {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
/* height: 18dp; */
|
||||
margin: 0;
|
||||
border-width: $border-width-thickness;
|
||||
border-color: #000;
|
||||
background-color: #fff;
|
||||
font-size: 15dp;
|
||||
|
||||
/* padding: 0 5dp; */
|
||||
line-height: 1;
|
||||
decorator: none;
|
||||
|
||||
/* vertical-align: center; */
|
||||
}
|
||||
|
||||
select {
|
||||
// display: inline-block;
|
||||
// /* width: 175dp; */
|
||||
// /* height: 37dp; */
|
||||
// /* height: auto; */
|
||||
// text-align: left;
|
||||
// box-sizing:border-box;
|
||||
// /* padding: 4dp; */
|
||||
// vertical-align: center;
|
||||
// padding: 4dp;
|
||||
// border-radius: 5dp;
|
||||
// background-color: rgb(120, 120, 120);
|
||||
// width: 100%;
|
||||
}
|
||||
// select {
|
||||
// @extend %body;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: flex-start;
|
||||
// box-sizing: border-box;
|
||||
// padding: space(16);
|
||||
// flex: 1 1 100%;
|
||||
// // width: auto;
|
||||
// height: space(1000);
|
||||
// border-radius: $border-radius-lg;
|
||||
// background-color: $color-white-a20;
|
||||
// }
|
||||
|
||||
// select selectvalue {
|
||||
// height: auto;
|
||||
// /* padding: 4dp; */
|
||||
// /* margin-right: 30dp; */
|
||||
// /* height: 25dp; */
|
||||
// /* padding: 4dp; */
|
||||
// /* decorator: image(selectvalue) */
|
||||
// }
|
||||
|
||||
// select:hover selectvalue {
|
||||
// /* margin-right: 30dp; */
|
||||
// /* height: 25dp; */
|
||||
// /* padding: 4dp; */
|
||||
// background-color: rgb(150, 150, 150);
|
||||
// /* decorator: image(selectvalue) */
|
||||
// }
|
||||
|
||||
// select selectarrow {
|
||||
// /* width: 30dp; */
|
||||
// /* height: 37dp; */
|
||||
// /* decorator: image(selectarrow) */
|
||||
// /* background-color: black; */
|
||||
// /* appearance: none; */
|
||||
// }
|
||||
|
||||
// select:hover selectarrow {
|
||||
// /* decorator: image(selectarrow-hover) */
|
||||
// }
|
||||
|
||||
// select:active selectarrow,
|
||||
// select selectarrow:checked {
|
||||
// /* decorator: image(selectarrow-active) */
|
||||
// }
|
||||
|
||||
// select selectbox {
|
||||
// /* margin-left: 1dp; */
|
||||
// /* margin-top: -7dp; */
|
||||
// /* margin-bottom: -10dp; */
|
||||
// /* width: 162dp; */
|
||||
// /* padding: 1dp 4dp 4dp 4dp */
|
||||
// }
|
||||
|
||||
// select selectbox,
|
||||
// tbody {
|
||||
// background-color: rgb(120,120,120);
|
||||
// /* decorator: tiled-box(selectbox-tl, selectbox-t, selectbox-tr, selectbox-l, selectbox-c, auto, selectbox-bl, selectbox-b, selectbox-br) */
|
||||
// }
|
||||
|
||||
// select selectbox option {
|
||||
// width: auto;
|
||||
// background-color: rgb(120, 120, 120)
|
||||
// }
|
||||
|
||||
// select selectbox option:nth-child(even),
|
||||
// tr:nth-child(even) {
|
||||
// background-color: rgb(100, 100, 100)
|
||||
// }
|
||||
|
||||
// select selectbox option:checked {
|
||||
// font-weight:bold;
|
||||
// color:rgb(255,255,255);
|
||||
// }
|
||||
|
||||
// select selectbox option:hover {
|
||||
// background: rgb(150,150,150)
|
||||
// }
|
||||
|
||||
input.radio {
|
||||
flex: 0;
|
||||
width:0dp;
|
||||
nav-up:auto;
|
||||
nav-right:auto;
|
||||
nav-down:auto;
|
||||
nav-left:auto;
|
||||
tab-index:auto;
|
||||
focus:auto;
|
||||
}
|
||||
|
||||
input.checkbox {
|
||||
width: space(20);
|
||||
height: space(20);
|
||||
nav-up:auto;
|
||||
nav-right:auto;
|
||||
nav-down:auto;
|
||||
nav-left:auto;
|
||||
tab-index:auto;
|
||||
focus:auto;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
@use 'sass:math';
|
||||
|
||||
$scrollbar-width: 12;
|
||||
|
||||
@mixin _set-scroll-size($size-key) {
|
||||
#{$size-key}: space($scrollbar-width);
|
||||
|
||||
slidertrack {
|
||||
#{$size-key}: space($scrollbar-width);
|
||||
}
|
||||
|
||||
sliderbar {
|
||||
#{$size-key}: space($scrollbar-width);
|
||||
}
|
||||
}
|
||||
|
||||
scrollbarvertical,scrollbarhorizontal {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
slidertrack {
|
||||
background: $color-primary-l;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
sliderbar {
|
||||
border-radius: space(math.div($scrollbar-width, 2) - 1);
|
||||
background: $color-primary-l;
|
||||
opacity: 0.1;
|
||||
|
||||
&:hover:not(:active) {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
sliderarrowdec, sliderarrowinc {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
scrollbarvertical {
|
||||
@include _set-scroll-size(width);
|
||||
}
|
||||
|
||||
scrollbarhorizontal {
|
||||
@include _set-scroll-size(height);
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
|
||||
%nav-vert {
|
||||
nav-up: auto;
|
||||
nav-down: auto;
|
||||
}
|
||||
|
||||
%nav-horiz {
|
||||
nav-right: auto;
|
||||
nav-left: auto;
|
||||
}
|
||||
|
||||
%nav-dir {
|
||||
@extend %nav-vert;
|
||||
@extend %nav-horiz;
|
||||
}
|
||||
|
||||
%nav-foc {
|
||||
focus: auto;
|
||||
tab-index: auto;
|
||||
}
|
||||
|
||||
%nav-all {
|
||||
@extend %nav-dir;
|
||||
@extend %nav-foc;
|
||||
}
|
||||
|
||||
@mixin set-svgs-color($col) {
|
||||
svg {
|
||||
image-color: $col;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@include set-color(COLOR);
|
||||
*/
|
||||
@mixin set-color($col) {
|
||||
@include set-svgs-color($col);
|
||||
color: $col;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
|
||||
/*
|
||||
@include trans-colors;
|
||||
*/
|
||||
@mixin trans-colors {
|
||||
transition: color $transition-quick, background-color $transition-quick;
|
||||
}
|
||||
|
||||
/*
|
||||
@include trans-colors-opa;
|
||||
*/
|
||||
@mixin trans-colors-opa {
|
||||
transition: color $transition-quick, background-color $transition-quick, opacity $transition-quick;
|
||||
}
|
||||
|
||||
/*
|
||||
@include trans-colors-svg;
|
||||
*/
|
||||
@mixin trans-colors-svg {
|
||||
transition: color $transition-quick, background-color $transition-quick, opacity $transition-quick;
|
||||
|
||||
svg {
|
||||
transition: image-color $transition-quick, background-color $transition-quick;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@include trans-colors-border;
|
||||
*/
|
||||
@mixin trans-colors-border {
|
||||
transition: color $transition-quick, background-color $transition-quick, opacity $transition-quick, border-color $transition-quick;
|
||||
|
||||
svg {
|
||||
transition: image-color $transition-quick, background-color $transition-quick;
|
||||
}
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
|
||||
$font-stack: 'Suplexmentary Comic NC';
|
||||
|
||||
@mixin set-font-sizing($sz, $spacing) {
|
||||
// font-family: $font-stack;
|
||||
$sz-add: $sz + 4;
|
||||
font-size: space($sz-add);
|
||||
letter-spacing: space($sz-add * $spacing);
|
||||
line-height: space($sz-add);
|
||||
}
|
||||
|
||||
%header-1 {
|
||||
@include set-font-sizing(64, 0.07);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
%header-2 {
|
||||
@include set-font-sizing(48, 0.07);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
%header-3 {
|
||||
@include set-font-sizing(32, 0.07);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
%label-lg {
|
||||
@include set-font-sizing(32, 0.11);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
%label-md {
|
||||
@include set-font-sizing(24, 0.11);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
%label-sm {
|
||||
@include set-font-sizing(16, 0.14);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
%label-xs {
|
||||
@include set-font-sizing(14, 0.14);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
%body {
|
||||
@include set-font-sizing(16, 0.0);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
%prompt-font-lg {
|
||||
font-family: promptfont;
|
||||
font-size: space(56);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: space(56);
|
||||
}
|
||||
|
||||
%prompt-font {
|
||||
font-family: promptfont;
|
||||
font-size: space(40);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: space(40);
|
||||
}
|
||||
|
||||
%prompt-font-sm {
|
||||
font-family: promptfont;
|
||||
font-size: space(32);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: space(32);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@import "./config/config";
|
||||
@@ -1 +0,0 @@
|
||||
@import "./debug";
|
||||
@@ -1,178 +0,0 @@
|
||||
|
||||
.config-debug {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
padding: space(8);
|
||||
}
|
||||
|
||||
.config-debug__scroll {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.config-debug-option {
|
||||
@include set-color($color-text-dim);
|
||||
@include trans-colors-svg;
|
||||
@include border-bottom($color-border-soft);
|
||||
display: block;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: space(12) space(4);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
|
||||
&:focus:not(:disabled, [disabled]),
|
||||
&:focus-visible:not(:disabled, [disabled]),
|
||||
&:hover:not(:disabled, [disabled]) {
|
||||
@include set-color($color-text);
|
||||
background-color: $color-bg-overlay;
|
||||
}
|
||||
|
||||
&:disabled, &[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
margin-left: space(8);
|
||||
}
|
||||
}
|
||||
|
||||
.config-debug__option-split {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.config-debug-option__label {
|
||||
@extend %label-md;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: space(4) space(16) space(12);
|
||||
width: auto;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.config-debug__option-controls {
|
||||
display: block;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: space(800);
|
||||
padding: 0 space(12);
|
||||
}
|
||||
|
||||
.config-debug__option-trigger {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.config-debug__select-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex: 1 1 100%;
|
||||
width: auto;
|
||||
max-width: space(800);
|
||||
height: auto;
|
||||
padding: space(4);
|
||||
|
||||
.config-debug__select-label {
|
||||
@extend %label-sm;
|
||||
padding-right: space(16);
|
||||
flex: auto;
|
||||
width: space(196);
|
||||
|
||||
> div {
|
||||
display: inline;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@extend %body;
|
||||
@extend %nav-all;
|
||||
display: block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
flex: 1 1 100%;
|
||||
width: auto;
|
||||
height: space(20);
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
select {
|
||||
@extend %body;
|
||||
@extend %nav-all;
|
||||
@include trans-colors-border;
|
||||
@include border($color-white-a50);
|
||||
display: block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
flex: 1 1 100%;
|
||||
width: auto;
|
||||
height: space(48);
|
||||
border-radius: $border-radius-md;
|
||||
background-color: $color-white-a5;
|
||||
cursor: pointer;
|
||||
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: space(14);
|
||||
|
||||
&:hover, &:focus {
|
||||
@include border($color-white-a80);
|
||||
background-color: $color-white-a20;
|
||||
}
|
||||
|
||||
selectvalue {
|
||||
display: inline;
|
||||
margin: auto 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
selectbox {
|
||||
@include border($color-white-a80);
|
||||
background-color: $color-background-3;
|
||||
padding: space(4) 0;
|
||||
margin-top: space(2);
|
||||
border-radius: $border-radius-md;
|
||||
|
||||
option {
|
||||
@extend %nav-all;
|
||||
@include trans-colors;
|
||||
padding: space(8) space(12);
|
||||
background-color: $color-transparent;
|
||||
color: $color-text-dim;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $color-white-a20;
|
||||
}
|
||||
|
||||
&:hover:not(:checked) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
color: $color-white;
|
||||
background-color: $color-white-a5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
|
||||
$focus-anim: blue-pulse-with-border 0.75s infinite;
|
||||
$focus-anim-border: blue-pulse 0.75s infinite;
|
||||
$focus-anim-bg: blue-pulse-background 0.75s infinite;
|
||||
@@ -1,42 +0,0 @@
|
||||
|
||||
$border-radius-sm: 12dp;
|
||||
$border-radius-md: 18dp;
|
||||
// modals/pages
|
||||
$border-radius-lg: 24dp;
|
||||
|
||||
$border-radius-modal: $border-radius-lg;
|
||||
|
||||
$border-width-thickness-num: 1.1;
|
||||
// $border-width-thickness-num: 1.5;
|
||||
$border-width-thickness: space($border-width-thickness-num);
|
||||
|
||||
@mixin border($col: $color-border) {
|
||||
border-width: $border-width-thickness;
|
||||
border-color: $col;
|
||||
}
|
||||
|
||||
@mixin border-top($col: $color-border) {
|
||||
border-top-width: $border-width-thickness;
|
||||
border-top-color: $col;
|
||||
}
|
||||
|
||||
@mixin border-bottom($col: $color-border) {
|
||||
border-bottom-width: $border-width-thickness;
|
||||
border-bottom-color: $col;
|
||||
}
|
||||
|
||||
@mixin inset-block($inset-amt) {
|
||||
position: absolute;
|
||||
top: $inset-amt;
|
||||
right: $inset-amt;
|
||||
bottom: $inset-amt;
|
||||
left: $inset-amt;
|
||||
}
|
||||
|
||||
// add this to a child of the container that needs a border.
|
||||
// parent must have `position: relative`
|
||||
@mixin inner-border-block($col: $color-border) {
|
||||
@include inset-block($border-width-thickness);
|
||||
@include border($col);
|
||||
display: block;
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
/* stylelint-disable color-no-hex, color-hex-length */
|
||||
|
||||
$color-background-1: Background1;
|
||||
$color-background-2: Background2;
|
||||
$color-background-3: Background3;
|
||||
$color-bg-overlay: BGOverlay;
|
||||
$color-modal-overlay: ModalOverlay;
|
||||
$color-bg-shadow: BGShadow;
|
||||
$color-bg-shadow-2: BGShadow2;
|
||||
$color-text: Text;
|
||||
$color-text-active: TextActive;
|
||||
$color-text-dim: TextDim;
|
||||
$color-text-inactive: TextInactive;
|
||||
$color-text-a5: TextA5;
|
||||
$color-text-a20: TextA20;
|
||||
$color-text-a30: TextA30;
|
||||
$color-text-a50: TextA50;
|
||||
$color-text-a80: TextA80;
|
||||
$color-primary: Primary;
|
||||
$color-primary-l: PrimaryL;
|
||||
$color-primary-d: PrimaryD;
|
||||
$color-primary-a5: PrimaryA5;
|
||||
$color-primary-a20: PrimaryA20;
|
||||
$color-primary-a30: PrimaryA30;
|
||||
$color-primary-a50: PrimaryA50;
|
||||
$color-primary-a80: PrimaryA80;
|
||||
$color-secondary: Secondary;
|
||||
$color-secondary-l: SecondaryL;
|
||||
$color-secondary-d: SecondaryD;
|
||||
$color-secondary-a5: SecondaryA5;
|
||||
$color-secondary-a20: SecondaryA20;
|
||||
$color-secondary-a30: SecondaryA30;
|
||||
$color-secondary-a50: SecondaryA50;
|
||||
$color-secondary-a80: SecondaryA80;
|
||||
$color-warning: Warning;
|
||||
$color-warning-l: WarningL;
|
||||
$color-warning-d: WarningD;
|
||||
$color-warning-a5: WarningA5;
|
||||
$color-warning-a20: WarningA20;
|
||||
$color-warning-a30: WarningA30;
|
||||
$color-warning-a50: WarningA50;
|
||||
$color-warning-a80: WarningA80;
|
||||
$color-danger: Danger;
|
||||
$color-danger-l: DangerL;
|
||||
$color-danger-d: DangerD;
|
||||
$color-danger-a5: DangerA5;
|
||||
$color-danger-a20: DangerA20;
|
||||
$color-danger-a30: DangerA30;
|
||||
$color-danger-a50: DangerA50;
|
||||
$color-danger-a80: DangerA80;
|
||||
$color-success: Success;
|
||||
$color-success-l: SuccessL;
|
||||
$color-success-d: SuccessD;
|
||||
$color-success-a5: SuccessA5;
|
||||
$color-success-a20: SuccessA20;
|
||||
$color-success-a30: SuccessA30;
|
||||
$color-success-a50: SuccessA50;
|
||||
$color-success-a80: SuccessA80;
|
||||
$color-border: Border;
|
||||
$color-border-soft: BorderSoft;
|
||||
$color-border-hard: BorderHard;
|
||||
$color-border-solid: BorderSolid;
|
||||
$color-transparent: Transparent;
|
||||
$color-a: A;
|
||||
$color-a-l: AL;
|
||||
$color-a-d: AD;
|
||||
$color-a-a5: AA5;
|
||||
$color-a-a20: AA20;
|
||||
$color-a-a30: AA30;
|
||||
$color-a-a50: AA50;
|
||||
$color-a-a80: AA80;
|
||||
$color-white: White;
|
||||
$color-white-a5: WhiteA5;
|
||||
$color-white-a20: WhiteA20;
|
||||
$color-white-a30: WhiteA30;
|
||||
$color-white-a50: WhiteA50;
|
||||
$color-white-a80: WhiteA80;
|
||||
$color-bw-05: BW05;
|
||||
$color-bw-10: BW10;
|
||||
$color-bw-25: BW25;
|
||||
$color-bw-50: BW50;
|
||||
$color-bw-75: BW75;
|
||||
$color-bw-90: BW90;
|
||||
@@ -1,9 +0,0 @@
|
||||
|
||||
// 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: horizontal-gradient(#{$color-primary-d}14 #{$color-primary-l}00);
|
||||
// $primary-rl-fade: horizontal-gradient(#{$color-primary-d}00 #{$color-primary-l}14);
|
||||
$primary-lr-fade: horizontal-gradient(#ff000014 #ff000000);
|
||||
$primary-rl-fade: horizontal-gradient(#ff000000 #ff000014);
|
||||
@@ -1,7 +0,0 @@
|
||||
@use 'sass:math';
|
||||
|
||||
// $page-margin: 32;
|
||||
$page-margin: 64;
|
||||
$base-height: 1080;
|
||||
$base-modal-height: $base-height - ($page-margin * 2);
|
||||
$base-modal-max-width: math.div($base-modal-height * 16, 9);
|
||||
@@ -1,3 +0,0 @@
|
||||
// see: lib/RmlUi/Source/Core/PropertyParserAnimation.cpp
|
||||
$transition-quick: 0.05s linear-in-out;
|
||||
// $transition-quick: 0.033s linear-in-out;
|
||||
Reference in New Issue
Block a user