GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 08:46:37 -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;
color: color(fg);
display: inline-block;
@include button.base;
@include button.base($elevation: 0);
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 */
@use "vars";
@use "sass:color";
@use "sass/elevation" as *;
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@ -19,7 +20,11 @@
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 {
background: linear-gradient(
180deg,
@ -61,7 +66,8 @@
$with-hover: true,
$with-active: true,
$active-class: "",
$with-disabled: true
$with-disabled: true,
$elevation: 1
) {
-webkit-appearance: none;
cursor: pointer;
@ -70,7 +76,7 @@
} @else {
border: none;
}
@include background($primary, $hover: $with-hover);
@include background($primary, $elevation, $hover: $with-hover);
@if ($primary) {
color: white;

12
sass/_vars.scss
View file

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

4
sass/buttons.scss
View file

@ -1,6 +1,6 @@
@use "vars";
@use "button-mixins" as button;
@use "elevation";
@use "elevation" as *;
:root {
--focus-color: #{vars.palette-of(shadow-focus)};
@ -25,7 +25,7 @@
button {
outline: none;
@include button.base;
@include elevation.elevation(2);
@include elevation(2);
border-radius: var(--border-radius-large);
padding: 6px 12px;
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 {
width: 100%;
padding: 0.2rem 1.5rem 0.2rem 0.75rem;
background: var(--canvas-elevated);
color: var(--fg);
border: none;
outline: none;
text-align: center;
@ -120,7 +122,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
button {
opacity: 0;
position: absolute;
@include button.base($border: false);
@include button.base($border: false, $elevation: 0);
&.left {
inset: 0 auto 0 0;