monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-03-11 06:05:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add values to custom color buttons

Browse source
This commit is contained in:
bhomie 2020-06-26 20:46:18 -07:00
parent 3df65dd164
commit 2e173ed958
3 changed files with 72 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
public/css/style.scss
View file

@ -11,10 +11,12 @@
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 32px;
padding: 0;
width: 100%;
height: 32px;
overflow: hidden;
border-radius: var(--roundness);
border: 1px solid black;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
@ -33,16 +35,25 @@ input{
font-size: 1rem;
line-height: 1rem;
font-family: "Roboto Mono";
&.colorPicker {
}
.colorPicker {
text-align: center;
will-change: transform;
transition: transform .2s ease-in-out;
overflow: hidden;
border-radius: var(--roundness);
& label {
position: absolute;
width: 100%;
text-align: center;
padding: auto;
cursor: pointer;
will-change: padding;
transition: .1s ease-in-out padding;
width: 2rem;
height: 2rem;
&:hover {
padding: .3rem;
}
}
& [for="--bg-color"],
& #--bg-color {
color: var(--main-color);
border-color: var(--main-color);
}
}
@ -1314,15 +1325,15 @@ key {
display: grid;
// gap: .5rem;
grid-template-areas: "title title"
"text buttons";
"text buttons";
grid-template-columns: 2fr 1fr;
column-gap: 2rem;
align-items: center;
&.customTheme {
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-items: stretch;
gap: .5rem;
& h1 {
gap: .5rem 2rem;
& h5 {
grid-column: 1 / span 4;
}
}

48
public/index.html
View file

@ -429,19 +429,53 @@
<div class="tabContainer">
<div tabContent="custom" class="tabContent section customTheme">
<label class="text">background</label>
<input class="input colorPicker" type="color" value="#ffffff" colorVar="--bg-color">
<span class="colorPicker">
<label for="--bg-color">#e2b714</label>
<input type="color" value="#ffffff" id="--bg-color">
</span>
<label class="text">main</label>
<input class="input colorPicker" type="color" value="#ffffff" colorVar="--main-color">
<span class="colorPicker">
<label for="--main-color">#e2b714</label>
<input type="color" value="#ffffff" id="--main-color">
</span>
<label class="text">caret</label>
<input class="input colorPicker" type="color" value="#ffffff" colorVar="--caret-color">
<span class="colorPicker">
<label for="--caret-color">#e2b714</label>
<input type="color" value="#ffffff" id="--caret-color">
</span>
<label class="text">sub</label>
<input class="input colorPicker" type="color" value="#ffffff" colorVar="--sub-color">
<span class="colorPicker">
<label for="--sub-color">#e2b714</label>
<input type="color" value="#ffffff" id="--sub-color">
</span>
<label class="text">text</label>
<input class="input colorPicker" type="color" value="#000000" colorVar="--text-color">
<span class="colorPicker">
<label for="--text-color">#e2b714</label>
<input type="color" value="#000000" id="--text-color">
</span>
<label class="text">error</label>
<input class="input colorPicker" type="color" value="#ffffff" colorVar="--error-color">
<span class="colorPicker">
<label for="--error-color">#e2b714</label>
<input type="color" value="#ffffff" id="--error-color">
</span>
<label class="text">extra error</label>
<input class="input colorPicker" type="color" value="#ffffff" colorVar="--error-extra-color">
<span class="colorPicker">
<label for="--error-extra-color">#e2b714</label>
<input type="color" value="#ffffff" id="--error-extra-color">
</span>
<h5>colorful mode:</h5>
<label class="text">error</label>
<span class="colorPicker">
<label for="--colorful-error-color">#e2b714</label>
<input type="color" value="#ffffff" id="--colorful-error-color">
</span>
<label class="text">extra error</label>
<span class="colorPicker">
<label for="--colorful-error-extra-color">#e2b714</label>
<input type="color" value="#fffff" id="--colorful-error-extra-color">
</span>
</div>
<div tabContent="preset" class="tabContent buttons">
</div>

13
public/js/settings.js
View file

@ -449,7 +449,7 @@ $(document).on("click",".pageSettings .section.tags .tagsList .tag .removeButton
})
//theme tabs & custom theme
const colorVars = ['--bg-color', '--main-color','--caret-color', '--sub-color', '--text-color', '--error-color', '--error-extra-color']
const colorVars = ['--bg-color', '--main-color','--caret-color', '--sub-color', '--text-color', '--error-color', '--error-extra-color', '--colorful-error-color', '--colorful-error-extra-color']
$(".tab").click(e => {
$('.tab').removeClass("active")
@ -461,22 +461,23 @@ $(".tab").click(e => {
$('[tabContent="custom"]').removeClass("reveal")
setTimeout(() => {
$('[tabContent="preset"]').addClass("reveal")
}, 250);
}, 150);
} else {
setCustomTheme(true)
$('[tabContent="preset"]').removeClass("reveal")
setTimeout(() => {
$('[tabContent="custom"]').addClass("reveal")
}, 250);
}, 150);
}
})
$('.colorPicker').on('input', e => {
let $colorVar = $(e.currentTarget).attr('colorVar')
$("[type='color']").on('input', e => {
let $colorVar = $(e.currentTarget).attr('id')
let $pickedColor = $(e.currentTarget).val();
document.documentElement.style.setProperty($colorVar, $pickedColor)
$("[for="+$colorVar+"]").text($pickedColor)
config.customThemeColors[colorVars.indexOf($colorVar)] = $pickedColor
})