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

style: rework button styling

Browse source
This commit is contained in:
Miodec 2023-09-19 17:38:41 +01:00
parent bcf9ad0895
commit 7a1f2ce5ed
3 changed files with 66 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
frontend/src/styles/buttons.scss
View file

@ -1,8 +1,30 @@
a.button {
a.button,
a.textButton {
text-decoration: none;
}
.button {
button,
.button,
.textButton {
.fas,
.far,
.fab {
line-height: 1.25;
}
&.fullWidth {
width: 100%;
}
&.circle {
border-radius: 100%;
}
}
button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
text-align: center;
color: var(--text-color);
cursor: pointer;
transition: background 0.125s, color 0.125s;
@ -15,11 +37,20 @@ a.button {
align-content: center;
height: -moz-min-content;
height: min-content;
line-height: 1.25em;
line-height: 1.25;
appearance: none;
border: none;
font-family: inherit;
font-size: 1em;
display: inline-flex;
gap: 0.5em;
align-items: baseline;
justify-content: center;
&.danger {
background: var(--error-color);
color: var(--bg-color);
}
&.active {
background: var(--main-color);
@ -33,9 +64,9 @@ a.button {
}
}
&[disabled],
&.disabled {
opacity: 0.33;
cursor: default;
pointer-events: none;
&:hover {
background: var(--text-color);
@ -53,7 +84,7 @@ a.button {
outline: none;
}
&:focus-visible {
box-shadow: 0 0 0 0.15em var(--text-color);
box-shadow: 0 0 0 0.1em var(--bg-color), 0 0 0 0.2em var(--text-color);
outline: none;
}
&:active {
@ -62,52 +93,53 @@ a.button {
}
}
button.text,
.button.text,
.textButton {
color: var(--sub-color);
cursor: pointer;
transition: background 0.125s, color 0.125s;
padding: 0.5em;
border-radius: var(--roundness);
background: none;
text-align: center;
-webkit-user-select: none;
user-select: none;
align-content: center;
height: -moz-min-content;
height: min-content;
line-height: 1.25em;
line-height: 1.25;
appearance: none;
border: none;
font-family: inherit;
font-size: 1em;
width: -moz-max-content;
width: max-content;
display: grid;
grid-auto-flow: column;
gap: 0.25em;
text-decoration: none;
display: inline-flex;
gap: 0.5em;
align-items: baseline;
justify-content: center;
.fas,
.far {
display: grid;
place-content: center center;
&.danger {
color: var(--error-color);
background: none;
}
&.active {
color: var(--main-color);
background: none;
&:hover {
color: var(--text-color);
background: none;
}
&:active {
color: var(--sub-color);
background: none;
}
}
&[disabled],
&.disabled {
opacity: 0.33;
cursor: default;
pointer-events: none;
&:hover {
background: var(--text-color);
color: var(--text-color);
outline: none;
}
&:active {
@ -118,12 +150,15 @@ a.button {
&:hover {
color: var(--text-color);
background: none;
outline: none;
}
&:focus {
color: var(--text-color);
&:focus-visible {
box-shadow: 0 0 0 0.1em var(--text-color);
outline: none;
}
&:active {
color: var(--sub-color);
background: none;
}
}

15
frontend/src/styles/settings.scss
View file

@ -54,18 +54,9 @@
row-gap: 0.5rem;
align-items: center;
.button.danger {
box-shadow: 0 0 0 0.15em var(--error-color);
color: var(--text-color);
&:hover {
background: var(--text-color);
color: var(--bg-color);
}
}
.inputAndButton {
display: grid;
grid-template-columns: 8fr 1fr;
grid-template-columns: auto min-content;
gap: 0.5rem;
margin-bottom: 0.5rem;
@ -263,7 +254,7 @@
}
.tag {
grid-template-columns: 6fr 1fr 1fr 1fr;
grid-template-columns: auto min-content min-content min-content;
margin-bottom: 0.5rem;
}
}
@ -274,7 +265,7 @@
}
.preset {
grid-template-columns: 7fr 1fr 1fr;
grid-template-columns: auto min-content min-content;
margin-bottom: 0.5rem;
}
}

8
frontend/static/html/pages/settings.html
View file

@ -101,7 +101,9 @@
</div>
</div>
</div>
<div class="button addTagButton"><i class="fas fa-plus"></i></div>
<div class="button addTagButton fullWidth">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
<div class="section presets">
@ -127,7 +129,9 @@
</div>
</div>
</div>
<div class="button addPresetButton"><i class="fas fa-plus"></i></div>
<div class="button addPresetButton fullWidth">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
<div class="section">