monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-18 11:36:13 +08:00
Code Issues Projects Releases Packages Wiki Activity

fixed settings button styling

Browse source
This commit is contained in:
Jack 2021-07-05 23:49:50 +01:00
parent e404d818c1
commit b32e612fa5
2 changed files with 27 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/js/settings.js
View file

@ -428,13 +428,13 @@ function refreshTagsSettingsSection() {
<div class="title">${tag.name}</div>
</div>
<div class="clearPbButton button">
<i class="fas fa-crown"></i>
<i class="fas fa-crown fa-fw"></i>
</div>
<div class="editButton button">
<i class="fas fa-pen"></i>
<i class="fas fa-pen fa-fw"></i>
</div>
<div class="removeButton button">
<i class="fas fa-trash"></i>
<i class="fas fa-trash fa-fw"></i>
</div>
</div>
@ -456,10 +456,10 @@ function refreshPresetsSettingsSection() {
<div class="title">${preset.name}</div>
</div>
<div class="editButton button">
<i class="fas fa-pen"></i>
<i class="fas fa-pen fa-fw"></i>
</div>
<div class="removeButton button">
<i class="fas fa-trash"></i>
<i class="fas fa-trash fa-fw"></i>
</div>
</div>

43
src/sass/style.scss
View file

@ -1879,41 +1879,41 @@ key {
// grid-area: wordsHistory;
color: var(--sub-color);
grid-column: 1/3;
.heatmapLegend{
.heatmapLegend {
display: inline-grid;
grid-template-columns: auto auto auto;
gap: 1rem;
font-size: .75rem;
font-size: 0.75rem;
color: var(--sub-color);
width: min-content;
.boxes{
.boxes {
display: flex;
.box{
.box {
width: 1rem;
height: 1rem;
}
.box:nth-child(1){
.box:nth-child(1) {
background: var(--colorful-error-color);
border-radius: var(--roundness) 0 0 var(--roundness);
}
.box:nth-child(2){
.box:nth-child(2) {
background: var(--colorful-error-color);
filter: opacity(0.6);
}
.box:nth-child(3){
.box:nth-child(3) {
background: var(--sub-color);
}
.box:nth-child(4){
.box:nth-child(4) {
background: var(--main-color);
filter: opacity(0.6);
}
.box:nth-child(5){
.box:nth-child(5) {
background: var(--main-color);
border-radius: 0 var(--roundness) var(--roundness) 0;
}
}
}
.title{
.title {
user-select: none;
}
.words {
@ -1934,21 +1934,21 @@ key {
letter.incorrect.extra {
color: var(--error-extra-color);
}
&.heatmap-0 letter{
&.heatmap-0 letter {
color: var(--colorful-error-color);
}
&.heatmap-1 letter{
&.heatmap-1 letter {
color: var(--colorful-error-color);
filter: opacity(0.6);
}
&.heatmap-2 letter{
&.heatmap-2 letter {
color: var(--sub-color);
}
&.heatmap-3 letter{
&.heatmap-3 letter {
color: var(--main-color);
filter: opacity(0.6);
}
&.heatmap-4 letter{
&.heatmap-4 letter {
color: var(--main-color);
}
}
@ -2050,7 +2050,8 @@ key {
}
&.time {
.afk, .timeToday {
.afk,
.timeToday {
color: var(--sub-color);
font-size: 0.75rem;
line-height: 0.75rem;
@ -2899,15 +2900,15 @@ key {
.inputAndSave {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-columns: 8fr 1fr;
gap: 0.5rem;
margin-bottom: 0.5rem;
input {
grid-column: 1/3;
// grid-column: 1/3;
}
.save {
grid-column: 3/4;
// grid-column: 3/4;
height: auto;
.fas {
@ -3017,7 +3018,7 @@ key {
}
.tag {
grid-template-columns: 5fr 1fr 1fr;
grid-template-columns: 6fr 1fr 1fr 1fr;
margin-bottom: 0.5rem;
}
@ -3057,7 +3058,7 @@ key {
}
.preset {
grid-template-columns: 5fr 1fr 1fr;
grid-template-columns: 7fr 1fr 1fr;
margin-bottom: 0.5rem;
}