Anki/qt/aqt/data/web/css/deckbrowser.scss
Matthias Metelka 0c340c4f74
Add comments to Sass variables and tweak main window (#2137)
* Prevent multiple inclusion of variables in CSS files

* Use dict instead of tuple for variables

* Add comments to variables

* Improve appearance of main window

* Tweak main window styles

* Use json.dumps over pprint.format

* Make study button primary

* Improve header margin

* Make bottom toolbar slimmer

* Make congrats page more balanced

* Fix type issue

* Replace day/night with light/dark

* Exclude top-level-drag-row from hover effect

* Create dataclass for variables

* Run formatter

* Apply CSS variables from Python side

Why go full-circle with the Sass variables? This way we only need one interface for add-on authors to interact with. It also makes it easier for us to apply additional themes in the future.

* Fix typing

* Fix rgba values in Qt

* Darken button background

* Fix palette not being applied in light theme

For some odd reason this problem arose much later than #2016.

* Tweak default button look

* Reformat

* Apply CSS vars to ts pages

* Include elevation in button_mixins_lib

* Cast opacity to int

* Add some margin to studiedToday info

* Tweak light theme button gradient

* Tweak highlight-bg for light theme

* Add back default button color

as it made the browser sidebar tool icons dark in light theme.

* Reformat

* Tweak light theme buttons once more

Sorry for the back-and-forth. Sass only compiles when there are changes in user files, not when I only change the vars.

* Fix bottom toolbar button indicators

* Make buttons more clicky

* Fix button padding

* Handle macOS separately again

* Decrease elevation effect for main window buttons to 1

* Imitate box-shadow for Qt elements

* Adjust shadow vars

* Adjust primary border color

because the save button in the deck options had a lighter color than its background gradient.

* Boost box-shadow color of primary buttons

* Format

* Adjust Qt box-shadow imitation and shadow colors

* Use more subtle default shadow color

* Add some more padding to top toolbar

* Revert "Apply CSS vars to ts pages"

This reverts commit 5d8e7f6b7f.

* Revert "Apply CSS variables from Python side"

This reverts commit 87db774412.

* Better match the standard macOS buttons

In the dark theme the standard color is a lighter grey, but at least
the size/shape is similar again.

This doesn't work for the editor buttons.

* Reduce the top margin of the congrats screen

* Fix illegible buttons when changing theme on macOS; match dark button style
2022-10-29 10:48:53 +10:00

115 lines
1.9 KiB
SCSS

/* Copyright: Ankitects Pty Ltd and contributors
* 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";
a.deck {
color: color(fg);
text-decoration: none;
min-width: 5em;
display: inline-block;
}
a.deck:hover {
text-decoration: underline;
}
th {
border-bottom: 1px solid color(border-subtle);
padding-bottom: 5px;
}
tr.deck td {
padding: 5px 12px;
}
tr.top-level-drag-row td {
border-bottom: 1px solid transparent;
}
td {
white-space: nowrap;
}
tr.drag-hover td {
border-bottom: 1px solid color(border);
}
body {
margin: 2em 1em 1em 1em;
-webkit-user-select: none;
}
.current,
tr:hover:not(.top-level-drag-row) {
td {
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;
}
}
}
.decktd {
min-width: 15em;
max-width: calc(100vw - 300px);
overflow: hidden;
}
.count {
min-width: 4em;
text-align: right;
}
.optscol {
width: 2em;
}
.collapse {
color: color(fg);
text-decoration: none;
display: inline-block;
width: 1em;
}
.filtered {
color: color(fg-link) !important;
}
.gears {
width: 1em;
height: 1em;
opacity: 0.5;
padding-top: 0.2em;
cursor: pointer;
visibility: hidden;
}
.nightMode {
.gears {
filter: invert(180);
}
}
.callout {
background: color(border);
padding: 1em;
margin: 1em;
div {
margin: 1em;
}
}
#studiedToday {
margin: 2em 0;
}