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

Tweak default button look

Browse source
This commit is contained in:
Matthias Metelka 2022-10-24 00:13:19 +02:00
parent 63c9d1c310
commit 6ba476b8e1
5 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
qt/aqt/data/web/css/toolbar.scss
View file

@ -36,7 +36,7 @@ body {
text-decoration: none; text-decoration: none;
color: color(fg); color: color(fg);
display: inline-block; display: inline-block;
@include button.base; @include button.base($elevation: 0);
border: none; border: none;
} }

12
sass/_button-mixins.scss
View file

@ -2,6 +2,7 @@
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "vars"; @use "vars";
@use "sass:color"; @use "sass:color";
@use "sass/elevation" as *;
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
@ -19,7 +20,11 @@
border-bottom-right-radius: var(--border-right-radius); border-bottom-right-radius: var(--border-right-radius);
} }
@mixin background($primary: false, $hover: true) { @mixin background($primary: false, $elevation: 1, $hover: true) {
@if $elevation != 0 {
@include elevation($elevation);
}
@if $primary { @if $primary {
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
@ -61,7 +66,8 @@
$with-hover: true, $with-hover: true,
$with-active: true, $with-active: true,
$active-class: "", $active-class: "",
$with-disabled: true $with-disabled: true,
$elevation: 1
) { ) {
-webkit-appearance: none; -webkit-appearance: none;
cursor: pointer; cursor: pointer;
@ -70,7 +76,7 @@
} @else { } @else {
border: none; border: none;
} }
@include background($primary, $hover: $with-hover); @include background($primary, $elevation, $hover: $with-hover);
@if ($primary) { @if ($primary) {
color: white; color: white;

12
sass/_vars.scss
View file

@ -70,7 +70,7 @@ $vars: (
default: ( default: (
"Window background", "Window background",
( (
light: palette(lightgray, 3), light: palette(lightgray, 2),
dark: palette(darkgray, 5), dark: palette(darkgray, 5),
), ),
), ),
@ -84,7 +84,7 @@ $vars: (
inset: ( inset: (
"Slightly darker than window background", "Slightly darker than window background",
( (
light: palette(lightgray, 4), light: palette(lightgray, 3),
dark: palette(darkgray, 6), dark: palette(darkgray, 6),
), ),
), ),
@ -162,14 +162,14 @@ $vars: (
start: ( start: (
"Start value of default button gradient in hover state", "Start value of default button gradient in hover state",
( (
light: palette(lightgray, 1), light: palette(lightgray, 0),
dark: palette(darkgray, 3), dark: palette(darkgray, 3),
), ),
), ),
end: ( end: (
"End value of default button gradient in hover state", "End value of default button gradient in hover state",
( (
light: palette(lightgray, 4), light: palette(lightgray, 2),
dark: palette(darkgray, 4), dark: palette(darkgray, 4),
), ),
), ),
@ -402,8 +402,8 @@ $vars: (
bg: ( bg: (
"Background color of highlighted items", "Background color of highlighted items",
( (
light: color.scale(palette(blue, 3), $alpha: -50%), light: color.scale(palette(blue, 6), $alpha: -40%),
dark: color.scale(palette(blue, 4), $alpha: -50%), dark: color.scale(palette(blue, 3), $alpha: -50%),
), ),
), ),
fg: ( fg: (

4
sass/buttons.scss
View file

@ -1,6 +1,6 @@
@use "vars"; @use "vars";
@use "button-mixins" as button; @use "button-mixins" as button;
@use "elevation"; @use "elevation" as *;
:root { :root {
--focus-color: #{vars.palette-of(shadow-focus)}; --focus-color: #{vars.palette-of(shadow-focus)};
@ -25,7 +25,7 @@
button { button {
outline: none; outline: none;
@include button.base; @include button.base;
@include elevation.elevation(2); @include elevation(2);
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
padding: 6px 12px; padding: 6px 12px;
font-weight: 500; font-weight: 500;

4
ts/components/SpinBox.svelte
View file

@ -102,6 +102,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
input { input {
width: 100%; width: 100%;
padding: 0.2rem 1.5rem 0.2rem 0.75rem; padding: 0.2rem 1.5rem 0.2rem 0.75rem;
background: var(--canvas-elevated);
color: var(--fg);
border: none; border: none;
outline: none; outline: none;
text-align: center; text-align: center;
@ -120,7 +122,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
button { button {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
@include button.base($border: false); @include button.base($border: false, $elevation: 0);
&.left { &.left {
inset: 0 auto 0 0; inset: 0 auto 0 0;