GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Decrease button and tag size for Linux and Windows (#1532)

Browse source 
* Decrease button size for platforms other than Mac

* Refactor legacy button styles

* Restrict size of add-on icons
This commit is contained in:
Matthias Metelka 2021-12-06 10:01:15 +01:00 committed by GitHub
parent fa6a531bd5
commit 1fc060620c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/editor/OldEditorAdapter.svelte
View file

@ -77,7 +77,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
return fontFamily; return fontFamily;
} }
let size = isApplePlatform() ? 1.6 : 2.0; let size = isApplePlatform() ? 1.6 : 1.8;
let wrap = true; let wrap = true;
let fieldStores: Writable<string>[] = []; let fieldStores: Writable<string>[] = [];

74
ts/editor/legacy.scss
View file

@ -1,56 +1,66 @@
.linkb { /* Copyright: Ankitects Pty Ltd and contributors
display: inline-block; * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
min-width: calc(var(--buttons-size) - 2px); @use "fusion-vars";
min-height: calc(var(--buttons-size) - 2px); @use "sass/button-mixins" as button;
background-color: white; $btn-base-color-day: white;
$btn-base-color-night: fusion-vars.$button-border;
$size: var(--buttons-size);
$padding: 2px;
.linkb {
width: $size;
height: $size;
padding: $padding;
color: var(--text-fg);
font-size: calc($size * 0.6);
background-color: $btn-base-color-day;
border: 1px solid var(--medium-border); border: 1px solid var(--medium-border);
padding: 0 !important; @include button.btn-border-radius;
margin-left: -1px; margin-left: -1px;
/* !important cannot be used with @include */
border-top-left-radius: var(--border-left-radius) !important;
border-bottom-left-radius: var(--border-left-radius) !important;
border-top-right-radius: var(--border-right-radius) !important;
border-bottom-right-radius: var(--border-right-radius) !important;
&:hover { &:hover {
background-color: #ebebeb; background-color: darken($btn-base-color-day, 8%);
} }
&:active, &:active,
&:active:hover { &:active:hover {
background-color: white; @include button.impressed-shadow(0.25);
box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)
rgba(0, 0, 0, 0.25);
} }
.nightMode & { .nightMode & {
background: linear-gradient(0deg, #555555 0%, #656565 100%); box-shadow: 0 0 3px fusion-vars.$button-outline;
border-width: 0px; border: 1px solid fusion-vars.$button-border;
-webkit-appearance: none;
background: linear-gradient(
0deg,
fusion-vars.$button-gradient-start 0%,
fusion-vars.$button-gradient-end 100%
);
border: 1px solid fusion-vars.$button-border;
margin-left: 1px; margin-left: 1px;
&:hover { &:hover {
background: #7a7a7a; background: linear-gradient(
border-color: #7a7a7a; 0deg,
lighten(fusion-vars.$button-gradient-start, 8%) 0%,
lighten(fusion-vars.$button-gradient-end, 8%) 100%
);
border-color: lighten(fusion-vars.$button-border, 8%);
} }
&:active, &:active {
&:active:hover { @include button.impressed-shadow(0.35);
box-shadow: inset 0 calc(var(--buttons-size) / 15) border-color: darken($btn-base-color-night, 8%);
calc(var(--buttons-size) / 5) rgba(0, 0, 0, 0.35);
border-color: #525252;
} }
} }
} }
.topbut { img.topbut {
display: inline-block; max-width: calc($size - 2 * $padding);
max-height: calc($size - 2 * $padding);
vertical-align: baseline; vertical-align: baseline;
width: calc(var(--buttons-size) - 12px); .nightMode & {
height: calc(var(--buttons-size) - 12px);
}
.nightMode img.topbut {
filter: invert(1); filter: invert(1);
}
} }