mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-27 17:27:32 +08:00
using css setup that is esier to modify in media queries
This commit is contained in:
Miodec
parent
4400ebe538
commit
2249932331
3 changed files with 223 additions and 202 deletions
|
|
@ -130,11 +130,28 @@
|
|||
}
|
||||
|
||||
& .customThemeEdit {
|
||||
grid-row: 3;
|
||||
// grid-row: 3;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
justify-items: stretch;
|
||||
gap: 0.5rem 1rem;
|
||||
gap: 1rem;
|
||||
// grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
// justify-items: stretch;
|
||||
// gap: 0.5rem 1rem;
|
||||
|
||||
.customThemeInputs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.customThemeButtons {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.inputAndButton {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
|
|
@ -147,11 +164,18 @@
|
|||
|
||||
& p {
|
||||
grid-area: unset;
|
||||
grid-column: 1 / span 4;
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
& .spacer {
|
||||
grid-column: 3 / 5;
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
& .buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-column: 1/5;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,10 +11,12 @@ import * as ConfigEvent from "../observables/config-event";
|
|||
|
||||
export function show(): void {
|
||||
$("#testConfig").removeClass("invisible");
|
||||
$("#mobileTestConfig").removeClass("invisible");
|
||||
}
|
||||
|
||||
export function hide(): void {
|
||||
$("#testConfig").addClass("invisible");
|
||||
$("#mobileTestConfig").addClass("invisible");
|
||||
}
|
||||
|
||||
export async function update(
|
||||
|
|
|
|||
|
|
@ -2125,208 +2125,203 @@
|
|||
<div tabContent="custom" class="tabContent customTheme hidden">
|
||||
<div class="allCustomThemes buttons"></div>
|
||||
<div class="customThemeEdit">
|
||||
<label class="colorText">background</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--bg-color-txt"
|
||||
/>
|
||||
<label
|
||||
for="--bg-color"
|
||||
class="button"
|
||||
style="
|
||||
color: var(--text-color);
|
||||
background: var(--sub-alt-color);
|
||||
"
|
||||
>
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--bg-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">main</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--main-color-txt"
|
||||
/>
|
||||
<label for="--main-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--main-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">caret</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--caret-color-txt"
|
||||
/>
|
||||
<label for="--caret-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--caret-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">sub</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--sub-color-txt"
|
||||
/>
|
||||
<label for="--sub-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--sub-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">sub alt</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--sub-alt-color-txt"
|
||||
/>
|
||||
<label for="--sub-alt-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--sub-alt-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">text</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--text-color-txt"
|
||||
/>
|
||||
<label for="--text-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--text-color"
|
||||
/>
|
||||
</div>
|
||||
<div class="customThemeInputs">
|
||||
<label class="colorText">background</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--bg-color-txt"
|
||||
/>
|
||||
<label
|
||||
for="--bg-color"
|
||||
class="button"
|
||||
style="
|
||||
color: var(--text-color);
|
||||
background: var(--sub-alt-color);
|
||||
"
|
||||
>
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--bg-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">main</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--main-color-txt"
|
||||
/>
|
||||
<label for="--main-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--main-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">caret</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--caret-color-txt"
|
||||
/>
|
||||
<label for="--caret-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--caret-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">sub</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--sub-color-txt"
|
||||
/>
|
||||
<label for="--sub-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--sub-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">sub alt</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--sub-alt-color-txt"
|
||||
/>
|
||||
<label for="--sub-alt-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--sub-alt-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">text</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--text-color-txt"
|
||||
/>
|
||||
<label for="--text-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--text-color"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="spacer"></span>
|
||||
<span class="spacer"></span>
|
||||
|
||||
<label class="colorText">error</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--error-color-txt"
|
||||
/>
|
||||
<label for="--error-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--error-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">extra error</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--error-extra-color-txt"
|
||||
/>
|
||||
<label for="--error-extra-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--error-extra-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">error</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--error-color-txt"
|
||||
/>
|
||||
<label for="--error-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--error-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">extra error</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--error-extra-color-txt"
|
||||
/>
|
||||
<label for="--error-extra-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--error-extra-color"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p>colorful mode</p>
|
||||
<p>colorful mode</p>
|
||||
|
||||
<label class="colorText">error</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--colorful-error-color-txt"
|
||||
/>
|
||||
<label for="--colorful-error-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--colorful-error-color"
|
||||
/>
|
||||
</div>
|
||||
<label class="colorText">error</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--colorful-error-color-txt"
|
||||
/>
|
||||
<label for="--colorful-error-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--colorful-error-color"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="colorText">extra error</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--colorful-error-extra-color-txt"
|
||||
/>
|
||||
<label for="--colorful-error-extra-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--colorful-error-extra-color"
|
||||
/>
|
||||
<label class="colorText">extra error</label>
|
||||
<div class="colorPicker inputAndButton">
|
||||
<input
|
||||
type="text"
|
||||
value="#000000"
|
||||
class="input"
|
||||
id="--colorful-error-extra-color-txt"
|
||||
/>
|
||||
<label for="--colorful-error-extra-color" class="button">
|
||||
<i class="fas fa-fw fa-palette"></i>
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
class="color"
|
||||
value="#000000"
|
||||
id="--colorful-error-extra-color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-column: 1/5;
|
||||
gap: 0.5rem;
|
||||
"
|
||||
>
|
||||
<div class="customThemeButtons">
|
||||
<div class="button" id="loadCustomColorsFromPreset">
|
||||
load from preset
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue