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

Tweak main window styles

Browse source
This commit is contained in:
Matthias Metelka 2022-10-21 00:55:30 +02:00
parent 876f1670cc
commit 0645aef8c6
8 changed files with 57 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
qt/aqt/data/web/css/deckbrowser.scss
View file

@ -15,8 +15,13 @@ a.deck:hover {
text-decoration: underline; text-decoration: underline;
} }
tr.deck td { th {
border-bottom: 1px solid color(border-subtle); border-bottom: 1px solid color(border-subtle);
padding-bottom: 5px;
}
tr.deck td {
padding: 5px 12px;
} }
tr.top-level-drag-row td { tr.top-level-drag-row td {
@ -36,10 +41,21 @@ body {
-webkit-user-select: none; -webkit-user-select: none;
} }
.current { .current,
background-color: color(shadow-subtle); tr:hover {
.gears { td {
visibility: visible; background: color(canvas-inset);
&:first-child {
border-top-left-radius: prop(border-radius-large);
border-bottom-left-radius: prop(border-radius-large);
}
&:last-child {
border-top-right-radius: prop(border-radius-large);
border-bottom-right-radius: prop(border-radius-large);
}
.gears {
visibility: visible;
}
} }
} }
@ -78,10 +94,6 @@ body {
visibility: hidden; visibility: hidden;
} }
tr:hover .gears {
visibility: visible;
}
.nightMode { .nightMode {
.gears { .gears {
filter: invert(180); filter: invert(180);

4
qt/aqt/data/web/css/overview.scss
View file

@ -1,6 +1,8 @@
/* Copyright: Ankitects Pty Ltd and contributors /* Copyright: Ankitects Pty Ltd and contributors
* 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 "root-vars";
@use "sass/vars" as *;
@use "sass/card-counts"; @use "sass/card-counts";
.smallLink { .smallLink {
@ -13,7 +15,7 @@ h3 {
.descfont { .descfont {
padding: 1em; padding: 1em;
color: var(--fg-subtle); color: color(fg-subtle);
} }
.description { .description {

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

@ -17,6 +17,7 @@
border-bottom-right-radius: prop(border-radius-large); border-bottom-right-radius: prop(border-radius-large);
@include button.base($with-hover: false); @include button.base($with-hover: false);
@include elevation.elevation(2); @include elevation.elevation(2);
overflow: hidden;
} }
body { body {
@ -32,10 +33,12 @@ body {
.hitem { .hitem {
font-weight: bold; font-weight: bold;
margin: 6px 12px; padding: 6px 12px;
text-decoration: none; text-decoration: none;
color: color(fg); color: color(fg);
display: inline-block; display: inline-block;
@include button.base;
border: none;
} }
.hitem:focus { .hitem:focus {

2
qt/aqt/stylesheets.py
View file

@ -62,7 +62,7 @@ QSpinBox {{
def menu_styles(tm: ThemeManager) -> str: def menu_styles(tm: ThemeManager) -> str:
return f""" return f"""
QMenuBar {{ QMenuBar {{
border-bottom: 1px solid {tm.var(colors.BORDER_FAINT)}; border-bottom: 1px solid {tm.var(colors.BORDER_SUBTLE)};
}} }}
QMenuBar::item {{ QMenuBar::item {{
background-color: transparent; background-color: transparent;

36
sass/_button-mixins.scss
View file

@ -19,20 +19,22 @@
border-bottom-right-radius: var(--border-right-radius); border-bottom-right-radius: var(--border-right-radius);
} }
@mixin background($primary: false) { @mixin background($primary: false, $hover: true) {
@if $primary { @if $primary {
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
var(--button-primary-gradient-start) 0%, var(--button-primary-gradient-start) 0%,
var(--button-primary-gradient-end) 100% var(--button-primary-gradient-end) 100%
); );
&:hover { @if $hover {
background: linear-gradient( &:hover {
180deg, background: linear-gradient(
var(--button-primary-hover-gradient-start) 0%, 180deg,
var(--button-primary-hover-gradient-end) 100% var(--button-primary-hover-gradient-start) 0%,
); var(--button-primary-hover-gradient-end) 100%
border-color: var(--button-hover-border); );
border-color: var(--button-hover-border);
}
} }
} @else { } @else {
background: linear-gradient( background: linear-gradient(
@ -40,13 +42,15 @@
var(--button-gradient-start) 0%, var(--button-gradient-start) 0%,
var(--button-gradient-end) 100% var(--button-gradient-end) 100%
); );
&:hover { @if $hover {
background: linear-gradient( &:hover {
180deg, background: linear-gradient(
var(--button-hover-gradient-start) 0%, 180deg,
var(--button-hover-gradient-end) 100% var(--button-hover-gradient-start) 0%,
); var(--button-hover-gradient-end) 100%
border-color: var(--button-hover-border); );
border-color: var(--button-hover-border);
}
} }
} }
} }
@ -66,7 +70,7 @@
} @else { } @else {
border: none; border: none;
} }
@include background($primary); @include background($primary, $hover: $with-hover);
@if ($primary) { @if ($primary) {
color: white; color: white;

25
sass/_vars.scss
View file

@ -89,14 +89,11 @@ $vars: (
), ),
), ),
overlay: ( overlay: (
<<<<<<< HEAD "Background of floating elements (menus, tooltips)", "Background of floating elements (menus, tooltips)",
( (
light: white, light: palette(lightgray, 0),
dark: black, dark: palette(darkgray, 5),
), ),
======= light: palette(lightgray, 0),
dark: palette(darkgray, 5),
>>>>>>> main,
), ),
code: ( code: (
"Background of code editors", "Background of code editors",
@ -108,8 +105,7 @@ $vars: (
), ),
border: ( border: (
default: ( default: (
<<<<<<< HEAD "Border color with medium contrast against window background",
"Border color with medium contrast against window background",
( (
light: palette(lightgray, 6), light: palette(lightgray, 6),
dark: palette(darkgray, 7), dark: palette(darkgray, 7),
@ -118,12 +114,9 @@ $vars: (
subtle: ( subtle: (
"Border color with low contrast against window background", "Border color with low contrast against window background",
( (
light: palette(lightgray, 5), light: palette(lightgray, 4),
dark: palette(darkgray, 6), dark: palette(darkgray, 6),
), ),
======= light: palette(lightgray, 6),
dark: palette(darkgray, 4),
>>>>>>> main,
), ),
strong: ( strong: (
"Border color with high contrast against window background", "Border color with high contrast against window background",
@ -132,14 +125,6 @@ $vars: (
dark: palette(darkgray, 1), dark: palette(darkgray, 1),
), ),
), ),
subtle: (
light: palette(lightgray, 5),
dark: palette(darkgray, 7),
),
faint: (
light: palette(lightgray, 4),
dark: palette(darkgray, 6),
),
focus: ( focus: (
"Border color of focused input elements", "Border color of focused input elements",
( (

2
sass/buttons.scss
View file

@ -23,9 +23,11 @@
} }
button { button {
outline: none;
@include button.base; @include button.base;
@include elevation.elevation(2); @include elevation.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;
margin: 0 4px;
} }

1
ts/congrats/congrats-base.scss
View file

@ -1,3 +1,4 @@
@use "sass/root-vars";
@import "sass/base"; @import "sass/base";
@import "sass/bootstrap/scss/containers"; @import "sass/bootstrap/scss/containers";