mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-07 14:12:43 +08:00
refactored css to use one button class instead of copy and pasting the same style
This commit is contained in:
Jack
parent
0ee3e2cba4
commit
141c3207c4
15 changed files with 158 additions and 214 deletions
|
|
@ -159,30 +159,6 @@ a:hover {
|
|||
display: grid;
|
||||
gap: 1rem;
|
||||
overflow-y: scroll;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -212,31 +188,6 @@ a:hover {
|
|||
gap: 1rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.button{
|
||||
display: block;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -569,13 +520,7 @@ a:hover {
|
|||
width: fit-content;
|
||||
width: -moz-fit-content;
|
||||
/* transition: 0.25s; */
|
||||
.button{
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-content: center;
|
||||
transition: 0.25s;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--roundness);
|
||||
.button.discord{
|
||||
&.discord{
|
||||
position: relative;
|
||||
&::after{
|
||||
|
|
@ -595,20 +540,14 @@ a:hover {
|
|||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&:focus{
|
||||
background: var(--sub-color);
|
||||
color: var(--main-color);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#top.focus #menu .button.discord::after{
|
||||
#top.focus #menu .icon-button.discord::after{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#menu .button .icon {
|
||||
#menu .icon-button .icon {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
|
@ -617,19 +556,19 @@ a:hover {
|
|||
height: 1.25rem;
|
||||
}
|
||||
|
||||
#menu .button:hover {
|
||||
#menu .icon-button:hover {
|
||||
cursor: pointer;
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#menu .button .text {
|
||||
#menu .icon-button .text {
|
||||
font-size: .65rem;
|
||||
line-height: .65rem;
|
||||
align-self: center;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
/* #menu .button:hover .text{
|
||||
/* #menu .icon-button:hover .text{
|
||||
width: auto;
|
||||
} */
|
||||
|
||||
|
|
@ -637,7 +576,7 @@ a:hover {
|
|||
color: transparent !important;
|
||||
}
|
||||
|
||||
#top.focus #menu .button {
|
||||
#top.focus #menu .icon-button {
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
|
|
@ -713,33 +652,6 @@ a:hover {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button {
|
||||
transition: 0.25s;
|
||||
color: var(--sub-color);
|
||||
cursor: pointer;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button.active:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .toggleButton.active:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button.active {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#top .config .group .title {
|
||||
color: var(--sub-color);
|
||||
font-size: 0.5rem;
|
||||
|
|
@ -1160,12 +1072,12 @@ key {
|
|||
-1px 1px 0px var(--bg-color);
|
||||
}
|
||||
|
||||
.word letter {
|
||||
// .word letter {
|
||||
// transition: .1s;
|
||||
// height: 1rem;
|
||||
// line-height: 1rem;
|
||||
/* margin: 0 1px; */
|
||||
}
|
||||
// }
|
||||
|
||||
.word letter.correct {
|
||||
color: var(--text-color);
|
||||
|
|
@ -1256,33 +1168,6 @@ key {
|
|||
display: grid;
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
.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;
|
||||
i{
|
||||
margin-right: .5rem;
|
||||
}
|
||||
&.active{
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
&:hover,&:focus{
|
||||
color: var(--bg-color);
|
||||
background: var(--main-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.preloader{
|
||||
position: fixed;
|
||||
|
|
@ -1735,3 +1620,60 @@ key {
|
|||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
.fas,.far{
|
||||
margin-right: .5rem;
|
||||
}
|
||||
&.active{
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
&:hover,&:focus{
|
||||
color: var(--bg-color);
|
||||
background: var(--main-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text-button{
|
||||
transition: 0.25s;
|
||||
color: var(--sub-color);
|
||||
cursor: pointer;
|
||||
margin-right: 0.25rem;
|
||||
cursor: pointer;
|
||||
&:hover,&:focus{
|
||||
color: var(--main-color);
|
||||
}
|
||||
&.active{
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button{
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-content: center;
|
||||
transition: 0.25s;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--roundness);
|
||||
&:focus{
|
||||
background: var(--sub-color);
|
||||
color: var(--main-color);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,33 +89,33 @@
|
|||
<div class="bottom">monkey-type</sup></div>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<div class="button" tabindex="2" href="/" onclick="this.blur();">
|
||||
<div class="icon-button" tabindex="2" href="/" onclick="this.blur();">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-keyboard"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button" tabindex="2" href="/about" onclick="this.blur();">
|
||||
<div class="icon-button" tabindex="2" href="/about" onclick="this.blur();">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-info"></i>
|
||||
</div>
|
||||
</div>
|
||||
<a class="button discord" tabindex="2" href="https://discord.gg/yENzqcB" onclick="this.blur();" target="_blank" style="text-decoration: none;">
|
||||
<a class="icon-button discord" tabindex="2" href="https://discord.gg/yENzqcB" onclick="this.blur();" target="_blank" style="text-decoration: none;">
|
||||
<div class="icon">
|
||||
<i class="fab fa-discord"></i>
|
||||
</div>
|
||||
</a>
|
||||
<div class="button" tabindex="2" href="/settings" onclick="this.blur();">
|
||||
<div class="icon-button" tabindex="2" href="/settings" onclick="this.blur();">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-cog"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button hidden account" tabindex="2" href="/account" onclick="this.blur();">
|
||||
<div class="icon-button hidden account" tabindex="2" href="/account" onclick="this.blur();">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-user"></i>
|
||||
</div>
|
||||
<div class="text"></div>
|
||||
</div>
|
||||
<div class="button login" tabindex="2" href="/login" onclick="this.blur();">
|
||||
<div class="icon-button login" tabindex="2" href="/login" onclick="this.blur();">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-sign-in-alt"></i>
|
||||
</div>
|
||||
|
|
@ -127,42 +127,42 @@
|
|||
<div class="group punctuationMode">
|
||||
<!-- <div class="title">time</div> -->
|
||||
<div class="buttons">
|
||||
<div class="button toggleButton" tabindex="2">punctuation</div>
|
||||
<div class="text-button toggleButton" tabindex="2">punctuation</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group mode">
|
||||
<!-- <div class="title">mode</div> -->
|
||||
<div class="buttons">
|
||||
<div class="button active" mode="time" tabindex="2">time</div>
|
||||
<div class="button" mode="words" tabindex="2">words</div>
|
||||
<div class="button" mode="custom" tabindex="2">custom</div>
|
||||
<div class="text-button active" mode="time" tabindex="2">time</div>
|
||||
<div class="text-button" mode="words" tabindex="2">words</div>
|
||||
<div class="text-button" mode="custom" tabindex="2">custom</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group wordCount hidden">
|
||||
<!-- <div class="title">words</div> -->
|
||||
<div class="buttons">
|
||||
<div class="button" wordCount="10" tabindex="2">10</div>
|
||||
<div class="button" wordCount="25" tabindex="2">25</div>
|
||||
<div class="button active" wordCount="50" tabindex="2">50</div>
|
||||
<div class="button" wordCount="100" tabindex="2">100</div>
|
||||
<div class="button" wordCount="200" tabindex="2">200</div>
|
||||
<div class="button" wordCount="custom" tabindex="2"><i class="fas fa-tools"></i></div>
|
||||
<div class="text-button" wordCount="10" tabindex="2">10</div>
|
||||
<div class="text-button" wordCount="25" tabindex="2">25</div>
|
||||
<div class="text-button active" wordCount="50" tabindex="2">50</div>
|
||||
<div class="text-button" wordCount="100" tabindex="2">100</div>
|
||||
<div class="text-button" wordCount="200" tabindex="2">200</div>
|
||||
<div class="text-button" wordCount="custom" tabindex="2"><i class="fas fa-tools"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group time">
|
||||
<!-- <div class="title">time</div> -->
|
||||
<div class="buttons">
|
||||
<div class="button" timeConfig="15" tabindex="2">15</div>
|
||||
<div class="button" timeConfig="30" tabindex="2">30</div>
|
||||
<div class="button active" timeConfig="60" tabindex="2">60</div>
|
||||
<div class="button" timeConfig="120" tabindex="2">120</div>
|
||||
<div class="button" timeConfig="custom" tabindex="2"><i class="fas fa-tools"></i></div>
|
||||
<div class="text-button" timeConfig="15" tabindex="2">15</div>
|
||||
<div class="text-button" timeConfig="30" tabindex="2">30</div>
|
||||
<div class="text-button active" timeConfig="60" tabindex="2">60</div>
|
||||
<div class="text-button" timeConfig="120" tabindex="2">120</div>
|
||||
<div class="text-button" timeConfig="custom" tabindex="2"><i class="fas fa-tools"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group customText hidden">
|
||||
<!-- <div class="title">time</div> -->
|
||||
<div class="buttons">
|
||||
<div class="button">change</div>
|
||||
<div class="text-button">change</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ function signUp() {
|
|||
}).then(function() {
|
||||
// Update successful.
|
||||
showNotification("Account created", 2000);
|
||||
$("#menu .button.account .text").text(nname);
|
||||
$("#menu .icon-button.account .text").text(nname);
|
||||
try{
|
||||
firebase.analytics().logEvent("accountCreated", usr.uid);
|
||||
}catch(e){
|
||||
|
|
@ -212,7 +212,7 @@ firebase.auth().onAuthStateChanged(function(user) {
|
|||
// showNotification('Signed in', 1000);
|
||||
$(".pageLogin .preloader").addClass('hidden');
|
||||
if(!dontCheckUserName) verifyUsername();
|
||||
$("#menu .button.account .text").text(displayName);
|
||||
$("#menu .icon-button.account .text").text(displayName);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1217,8 +1217,8 @@ function changePage(page) {
|
|||
|
||||
function changeMode(mode,nosave) {
|
||||
config.mode = mode;
|
||||
$("#top .config .mode .button").removeClass("active");
|
||||
$("#top .config .mode .button[mode='" + mode + "']").addClass("active");
|
||||
$("#top .config .mode .text-button").removeClass("active");
|
||||
$("#top .config .mode .text-button[mode='" + mode + "']").addClass("active");
|
||||
if (config.mode == "time") {
|
||||
$("#top .config .wordCount").addClass("hidden");
|
||||
$("#top .config .time").removeClass("hidden");
|
||||
|
|
@ -1323,13 +1323,13 @@ function clearIntervals() {
|
|||
|
||||
function updateAccountLoginButton() {
|
||||
if (firebase.auth().currentUser != null) {
|
||||
swapElements($("#menu .button.login"), $("#menu .button.account"), 250);
|
||||
// $("#menu .button.account").removeClass('hidden');
|
||||
// $("#menu .button.login").addClass('hidden');
|
||||
swapElements($("#menu .icon-button.login"), $("#menu .icon-button.account"), 250);
|
||||
// $("#menu .icon-button.account").removeClass('hidden');
|
||||
// $("#menu .icon-button.login").addClass('hidden');
|
||||
} else {
|
||||
swapElements($("#menu .button.account"), $("#menu .button.login"), 250);
|
||||
// $("#menu .button.login").removeClass('hidden');
|
||||
// $("#menu .button.account").addClass('hidden');
|
||||
swapElements($("#menu .icon-button.account"), $("#menu .icon-button.login"), 250);
|
||||
// $("#menu .icon-button.login").removeClass('hidden');
|
||||
// $("#menu .icon-button.account").addClass('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1590,7 +1590,7 @@ $(document).on("click", "#top .logo", (e) => {
|
|||
changePage('test');
|
||||
});
|
||||
|
||||
$(document).on("click", "#top .config .wordCount .button", (e) => {
|
||||
$(document).on("click", "#top .config .wordCount .text-button", (e) => {
|
||||
wrd = $(e.currentTarget).attr('wordCount');
|
||||
if(wrd == "custom"){
|
||||
let newWrd = prompt('Custom word amount');
|
||||
|
|
@ -1603,7 +1603,7 @@ $(document).on("click", "#top .config .wordCount .button", (e) => {
|
|||
restartTest();
|
||||
});
|
||||
|
||||
$(document).on("click", "#top .config .time .button", (e) => {
|
||||
$(document).on("click", "#top .config .time .text-button", (e) => {
|
||||
time = $(e.currentTarget).attr('timeConfig');
|
||||
if(time == "custom"){
|
||||
let newTime = prompt('Custom time in seconds');
|
||||
|
|
@ -1616,13 +1616,13 @@ $(document).on("click", "#top .config .time .button", (e) => {
|
|||
restartTest();
|
||||
});
|
||||
|
||||
$(document).on("click", "#top .config .customText .button", (e) => {
|
||||
$(document).on("click", "#top .config .customText .text-button", (e) => {
|
||||
changeCustomText();
|
||||
restartTest();
|
||||
|
||||
});
|
||||
|
||||
$(document).on("click", "#top .config .punctuationMode .button", (e) => {
|
||||
$(document).on("click", "#top .config .punctuationMode .text-button", (e) => {
|
||||
togglePunctuation();
|
||||
restartTest();
|
||||
});
|
||||
|
|
@ -1631,14 +1631,14 @@ $("#words").click((e) => {
|
|||
focusWords();
|
||||
});
|
||||
|
||||
$(document).on("click", "#top .config .mode .button", (e) => {
|
||||
$(document).on("click", "#top .config .mode .text-button", (e) => {
|
||||
if ($(e.currentTarget).hasClass("active")) return;
|
||||
mode = e.currentTarget.innerHTML;
|
||||
changeMode(mode);
|
||||
restartTest();
|
||||
});
|
||||
|
||||
$(document).on("click", "#top #menu .button", (e) => {
|
||||
$(document).on("click", "#top #menu .icon-button", (e) => {
|
||||
if($(e.currentTarget).hasClass('discord')) return;
|
||||
href = $(e.currentTarget).attr('href');
|
||||
changePage(href.replace('/', ''));
|
||||
|
|
|
|||
|
|
@ -475,15 +475,17 @@ $(".tab").click(e => {
|
|||
if($target.attr("tab") == "preset") {
|
||||
setCustomTheme(false)
|
||||
$('[tabContent="custom"]').removeClass("reveal")
|
||||
setTimeout(() => {
|
||||
$('[tabContent="preset"]').addClass("reveal")
|
||||
}, 150);
|
||||
$('[tabContent="preset"]').addClass("reveal")
|
||||
|
||||
// setTimeout(() => {
|
||||
// }, 0);
|
||||
} else {
|
||||
setCustomTheme(true)
|
||||
$('[tabContent="preset"]').removeClass("reveal")
|
||||
setTimeout(() => {
|
||||
$('[tabContent="custom"]').addClass("reveal")
|
||||
}, 150);
|
||||
$('[tabContent="custom"]').addClass("reveal")
|
||||
|
||||
// setTimeout(() => {
|
||||
// }, 0);
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -314,11 +314,11 @@ function changeTimeConfig(time, nosave) {
|
|||
time = parseInt(time);
|
||||
changeMode("time",nosave);
|
||||
config.time = time;
|
||||
$("#top .config .time .button").removeClass("active");
|
||||
$("#top .config .time .text-button").removeClass("active");
|
||||
if(![15,30,60,120].includes(time)){
|
||||
time = "custom";
|
||||
}
|
||||
$("#top .config .time .button[timeConfig='" + time + "']").addClass("active");
|
||||
$("#top .config .time .text-button[timeConfig='" + time + "']").addClass("active");
|
||||
if(!nosave) saveConfigToCookie();
|
||||
}
|
||||
|
||||
|
|
@ -326,11 +326,11 @@ function changeWordCount(wordCount, nosave) {
|
|||
wordCount = parseInt(wordCount);
|
||||
changeMode("words", nosave);
|
||||
config.words = wordCount;
|
||||
$("#top .config .wordCount .button").removeClass("active");
|
||||
$("#top .config .wordCount .text-button").removeClass("active");
|
||||
if(![10,25,50,100,200].includes(wordCount)){
|
||||
wordCount = "custom";
|
||||
}
|
||||
$("#top .config .wordCount .button[wordCount='" + wordCount + "']").addClass(
|
||||
$("#top .config .wordCount .text-button[wordCount='" + wordCount + "']").addClass(
|
||||
"active"
|
||||
);
|
||||
if(!nosave) saveConfigToCookie();
|
||||
|
|
@ -388,18 +388,18 @@ function toggleQuickTabMode() {
|
|||
function setPunctuation(punc, nosave) {
|
||||
config.punctuation = punc;
|
||||
if (!config.punctuation) {
|
||||
$("#top .config .punctuationMode .button").removeClass("active");
|
||||
$("#top .config .punctuationMode .text-button").removeClass("active");
|
||||
} else {
|
||||
$("#top .config .punctuationMode .button").addClass("active");
|
||||
$("#top .config .punctuationMode .text-button").addClass("active");
|
||||
}
|
||||
if(!nosave) saveConfigToCookie();
|
||||
}
|
||||
|
||||
function togglePunctuation() {
|
||||
if (config.punctuation) {
|
||||
$("#top .config .punctuationMode .button").removeClass("active");
|
||||
$("#top .config .punctuationMode .text-button").removeClass("active");
|
||||
} else {
|
||||
$("#top .config .punctuationMode .button").addClass("active");
|
||||
$("#top .config .punctuationMode .text-button").addClass("active");
|
||||
}
|
||||
config.punctuation = !config.punctuation;
|
||||
saveConfigToCookie();
|
||||
|
|
|
|||
|
|
@ -27,14 +27,14 @@ key{
|
|||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#menu .button{
|
||||
#menu .icon-button{
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#menu .button:nth-child(1){
|
||||
#menu .icon-button:nth-child(1){
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
#menu .button:nth-child(4){
|
||||
#menu .icon-button:nth-child(4){
|
||||
color: var(--caret-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@
|
|||
border-bottom: double 4px var(--error-color);
|
||||
} */
|
||||
|
||||
#menu .button:nth-child(1){
|
||||
#menu .icon-button:nth-child(1){
|
||||
color: var(--caret-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@
|
|||
gap: .5rem;
|
||||
}
|
||||
|
||||
#top.focus #menu .button,
|
||||
#top.focus #menu .icon-button,
|
||||
#top.focus #menu:before,
|
||||
#top.focus #menu:after
|
||||
{
|
||||
background: var(--sub-color);
|
||||
}
|
||||
|
||||
#menu .button{
|
||||
#menu .icon-button{
|
||||
border-radius: 10rem !important;
|
||||
color: #121520;
|
||||
}
|
||||
|
|
@ -35,23 +35,23 @@
|
|||
border-radius: 10rem;
|
||||
} */
|
||||
|
||||
#menu .button:nth-child(1){
|
||||
#menu .icon-button:nth-child(1){
|
||||
background: #f94348;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(2){
|
||||
#menu .icon-button:nth-child(2){
|
||||
background: #9261ff;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(3){
|
||||
#menu .icon-button:nth-child(3){
|
||||
background: #3cc5f8;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(4){
|
||||
#menu .icon-button:nth-child(4){
|
||||
background: #4acb8a;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(5), #menu .button:nth-child(6){
|
||||
#menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){
|
||||
background: #ffd543;
|
||||
}
|
||||
|
||||
|
|
@ -64,6 +64,6 @@
|
|||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
#top.focus #menu .button.discord::after{
|
||||
#top.focus #menu .icon-button.discord::after{
|
||||
border-color: transparent;
|
||||
}
|
||||
|
|
@ -11,26 +11,26 @@
|
|||
}
|
||||
|
||||
|
||||
#menu .button:nth-child(1){
|
||||
#menu .icon-button:nth-child(1){
|
||||
color: #ec75c4;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(2){
|
||||
#menu .icon-button:nth-child(2){
|
||||
color: #8be9fd;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(3){
|
||||
#menu .icon-button:nth-child(3){
|
||||
color: #50fa7b;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(4){
|
||||
#menu .icon-button:nth-child(4){
|
||||
color: #f1fa8c;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(5){
|
||||
#menu .icon-button:nth-child(5){
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(6){
|
||||
#menu .icon-button:nth-child(6){
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
|
@ -14,24 +14,24 @@
|
|||
color: #8fadc9;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button.active{
|
||||
#top .config .group .buttons .text-button.active{
|
||||
color: #daa99b;
|
||||
}
|
||||
|
||||
|
||||
/* #menu .button:nth-child(1){
|
||||
/* #menu .icon-button:nth-child(1){
|
||||
color: #daa99b;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(2){
|
||||
#menu .icon-button:nth-child(2){
|
||||
color: #daa99b;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(3){
|
||||
#menu .icon-button:nth-child(3){
|
||||
color: #8fadc9;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(4),
|
||||
#menu .button:nth-child(5){
|
||||
#menu .icon-button:nth-child(4),
|
||||
#menu .icon-button:nth-child(5){
|
||||
color: #8fadc9;
|
||||
} */
|
||||
|
|
@ -10,23 +10,23 @@
|
|||
--colorful-error-extra-color: #9e3423;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(1){
|
||||
#menu .icon-button:nth-child(1){
|
||||
color: #9a90b4;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(2){
|
||||
#menu .icon-button:nth-child(2){
|
||||
color: #8db14b;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(3){
|
||||
#menu .icon-button:nth-child(3){
|
||||
color: #fca321;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(4){
|
||||
#menu .icon-button:nth-child(4){
|
||||
color: #2984a5;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(5),
|
||||
#menu .button:nth-child(6){
|
||||
#menu .icon-button:nth-child(5),
|
||||
#menu .icon-button:nth-child(6){
|
||||
color: #dd452e;
|
||||
}
|
||||
|
|
@ -65,10 +65,10 @@
|
|||
}
|
||||
|
||||
.logo .bottom,
|
||||
#top .config .group .buttons .button.active,
|
||||
#top .config .group .buttons .text-button.active,
|
||||
#result .stats .group .bottom,
|
||||
#menu .button:hover,
|
||||
#top .config .group .buttons .button:hover,
|
||||
#menu .icon-button:hover,
|
||||
#top .config .group .buttons .text-button:hover,
|
||||
a:hover,
|
||||
#words.flipped .word{
|
||||
animation-name: rgb;
|
||||
|
|
|
|||
|
|
@ -29,10 +29,10 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button.active,
|
||||
#top .config .group .buttons .text-button.active,
|
||||
#result .stats .group,
|
||||
#menu .button:hover,
|
||||
#top .config .group .buttons .button:hover,
|
||||
#menu .icon-button:hover,
|
||||
#top .config .group .buttons .text-button:hover,
|
||||
a:hover {
|
||||
animation-name: shadow-repeat;
|
||||
animation-duration: 3s;
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
border-bottom: dotted 2px var(--text-color);
|
||||
}
|
||||
|
||||
#menu .button:nth-child(1){
|
||||
#menu .icon-button:nth-child(1){
|
||||
background: var(--caret-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#menu .button:nth-child(2){
|
||||
#menu .icon-button:nth-child(2){
|
||||
background: var(--error-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue