monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-21 07:46:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

more css refactoring

Browse source
This commit is contained in:
Jack 2020-07-02 19:35:41 +01:00
parent 4d2ff8700a
commit a98d763e56
3 changed files with 13 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
public/css/style.scss
View file

@ -24,7 +24,8 @@ input[type="color"] {
-webkit-appearance: none;
padding: 0;
width: 100%;
height: 32px;
// height: 32px;
height: 1.8rem;
overflow: hidden;
border-radius: var(--roundness);
}
@ -44,7 +45,8 @@ input[type="color"]::-webkit-color-swatch {
& label {
position: absolute;
width: 100%;
height: 32px;
// height: 32px;
line-height: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
@ -1172,30 +1174,6 @@ key {
grid-auto-columns: 1fr;
gap: .5rem;
grid-area: buttons;
.button{
color: var(--text-color);
cursor: pointer;
transition: .25s;
padding: .2rem .5rem;
border-radius: var(--roundness);
background: rgba(0,0,0,.1);
text-align: center;
-webkit-user-select: none;
display: grid;
align-content: center;
height: min-content;
height: -moz-min-content;
&.active{
background: var(--main-color);
color: var(--bg-color);
}
&:hover,&:focus{
color: var(--bg-color);
background: var(--main-color);
outline: none;
}
}
}
&.tags{
.tagsList{
@ -1296,27 +1274,6 @@ key {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: .5rem;
.theme, .language, .layout{
color: var(--text-color);
cursor: pointer;
transition: .25s;
padding: .2rem .5rem;
border-radius: var(--roundness);
background: rgba(0,0,0,.1);
text-align: center;
-webkit-user-select: none;
display: grid;
align-content: center;
&.active{
background: var(--main-color);
color: var(--bg-color);
}
&:hover,&:focus{
color: var(--bg-color);
background: var(--main-color);
}
}
}
}
}
@ -1331,6 +1288,9 @@ key {
&.reveal{
max-height: 100vh;
}
.text{
align-self: center;
}
}
}
@ -1538,7 +1498,7 @@ key {
color: var(--text-color);
cursor: pointer;
transition: .25s;
padding: .2rem .5rem;
padding: .4rem;
border-radius: var(--roundness);
background: rgba(0,0,0,.1);
@ -1548,6 +1508,7 @@ key {
align-content: center;
height: min-content;
height: -moz-min-content;
line-height: 1rem;
.fas,.far{
margin-right: .5rem;
}

1
public/index.html
View file

@ -481,6 +481,7 @@
<label for="--extra-error-extra-color">#e2b714</label>
<input type="color" value="" id="--extra-error-extra-color">
</span>
<div class="button saveCustomThemeButton" style="grid-column: 4;">Save</div>
</div>
<div tabContent="preset" class="tabContent buttons">
</div>

6
public/js/settings.js
View file

@ -2,15 +2,15 @@ function updateSettingsPage(){
let themesEl = $(".pageSettings .section.themes .buttons").empty();
themesList.forEach(theme => {
themesEl.append(`<div class="theme" theme='${theme.name}' style="color:${theme.textColor};background:${theme.bgColor}">${theme.name.replace('_', ' ')}</div>`);
themesEl.append(`<div class="theme button" theme='${theme.name}' style="color:${theme.textColor};background:${theme.bgColor}">${theme.name.replace('_', ' ')}</div>`);
})
let langEl = $(".pageSettings .section.languages .buttons").empty();
Object.keys(words).forEach(language => {
if(language === "english_10k") return;
langEl.append(`<div class="language" language='${language}'>${language.replace('_', ' ')}</div>`);
langEl.append(`<div class="language button" language='${language}'>${language.replace('_', ' ')}</div>`);
if(language === "english_expanded"){
langEl.append(`<div class="language" language='english_10k'>english 10k</div>`);
langEl.append(`<div class="language button" language='english_10k'>english 10k</div>`);
}
})