monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-03-14 07:54:41 +08:00
Code Issues Projects Releases Packages Wiki Activity

Styling of language select

Browse source 
Fixed active theme button

Fixed some fonts not showing in settings
This commit is contained in:
BuildTools 2021-03-26 19:26:41 +00:00
parent 76b0ff53e8
commit 1ce93391f7
2 changed files with 74 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/js/settings.js
View file

@ -433,7 +433,7 @@ async function fillSettingsPage() {
let fontsEl = $(".pageSettings .section.fontFamily .buttons").empty();
Misc.getFontsList().then((fonts) => {
fonts.forEach((font) => {
if (Config.fontFamily === font.name) isCustomFont(false);
if (Config.fontFamily === font.name) isCustomFont = false;
fontsEl.append(
`<div class="button${
Config.fontFamily === font.name ? " active" : ""
@ -834,7 +834,7 @@ $(document).on("click", ".pageSettings .section.themes .theme.button", (e) => {
let theme = $(e.currentTarget).attr("theme");
if (!$(e.target).hasClass("favButton")) {
UpdateConfig.setTheme(theme);
UpdateConfig.setActiveThemeButton();
setActiveThemeButton();
refreshThemeButtons();
}
});

104
src/sass/style.scss
View file

@ -117,6 +117,76 @@ html {
overflow-y: scroll;
}
.select2-dropdown {
background-color: var(--bg-color);
color: var(--text-color);
outline: none;
}
.select2-selection {
background: rgba(0, 0, 0, 0.1);
height: fit-content;
padding: 5px;
border-radius: 5px;
color: var(--text-color);
font: var(--font);
border: none;
outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--text-color);
outline: none;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: var(--sub-color);
color: var(--bg-color);
}
.select2-container--default .select2-results__option--selected {
background-color: var(--main-color);
color: var(--bg-color);
}
.select2-container--open .select2-dropdown--below {
border-color: rgba(0, 0, 0, 0.1);
background: var(--bg-color);
color: var(--sub-color);
}
.select2-container--default .select2-selection--single
{
color: var(--text-color);
background: rgba(0, 0, 0, 0.1);
outline: none;
border: none;
height:auto;
}
.select2-selection:focus{
height: fit-content;
padding: 5px;
border-radius: 5px;
color: var(--text-color);
font: var(--font);
border: none;
outline: none;
}
.select2-selection:active{
height: fit-content;
padding: 5px;
border-radius: 5px;
color: var(--text-color);
font: var(--font);
border: none;
outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 35px;
}
/* width */
::-webkit-scrollbar {
width: 7px;
@ -540,6 +610,8 @@ a:hover {
gap: 1rem;
width: 400px;
.lengthgrid{
display:grid;
grid-template-columns: 1fr 1fr;
@ -551,38 +623,6 @@ a:hover {
width: 10rem;
}
#languageList{
background: rgba(0, 0, 0, 0.1);
height: fit-content;
padding: 5px;
border-radius: 5px;
color: var(--text-color);
font: var(--font);
border: none;
option{
background: var(--bg-color);
}
}
#languageList:focus{
height: fit-content;
padding: 5px;
border-radius: 5px;
color: var(--text-color);
font: var(--font);
border: none;
outline: none;
}
#languageList:active{
height: fit-content;
padding: 5px;
border-radius: 5px;
color: var(--text-color);
font: var(--font);
border: none;
outline: none;
}
.wftip{
color: var(--sub-color);
font-size: 0.8rem;