langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make legacy buttons look like Svelte buttons

Browse Source 
with extra night mode handling.
This commit is contained in:
Matthias M 2021-05-23 00:50:02 +02:00
parent 9a9f5f8dd8
commit aee1a836d1
1 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
ts/editor/legacy.scss
View File

@ -2,13 +2,30 @@
.linkb { .linkb {
display: inline-block; display: inline-block;
@include button.btn-border-radius;
background-color: white; background-color: white;
border: 1px solid var(--medium-border); border: 1px solid var(--medium-border);
@include button.btn-border-radius;
min-width: 28px;
margin-left: -1px;
padding: 3.5px;
transition: all 0.2s;
} }
.night-mode .linkb { .linkb:hover {
background-color: #666; background-color: #ebebeb;
}
.linkb:active,
.linkb:active:hover {
background-color: #ebebeb;
box-shadow: inset 0
calc(var(--toolbar-size) / 15)
calc(var(--toolbar-size) / 5)
rgba(0, 0, 0, 0.25);
}
.linkb:active:hover .topbut {
filter: invert(1) grayscale(1) brightness(100);
} }
.topbut { .topbut {
@ -17,6 +34,28 @@
width: calc(var(--toolbar-size) - 12px); width: calc(var(--toolbar-size) - 12px);
height: calc(var(--toolbar-size) - 12px); height: calc(var(--toolbar-size) - 12px);
} }
.night-mode .topbut {
filter: invert(1); .nightMode {
.linkb {
background-color: #666;
margin-left: 1px;
}
.linkb:hover {
background-color: #7a7a7a;
border-color: #7a7a7a;
}
.linkb:active:hover {
box-shadow: inset 0
calc(var(--toolbar-size) / 15)
calc(var(--toolbar-size) / 5)
rgba(0, 0, 0, 0.35);
border-color: #525252;
}
.topbut,
.linkb:active:hover .topbut {
filter: invert(1);
}
} }