Anki/qt/aqt/data/web/css/deckbrowser.scss
Matthias Metelka f169ee0933
Revamp Preferences, implement Minimalist Mode and Qt widget gallery to test GUI changes (#2289)
* Create widget gallery dialog

* Add WidgetGallery to debug dialog

* Use enum for its intended purpose

* Rename "reduced-motion" to "reduce-motion"

* Add another border-radius value

and make former large radius a bit smaller.

* Revamp preferences, add minimalist mode

Also:
- create additional and missing widget styles and tweak existing ones
- use single profile entry to set widget styles and reduce choices to Anki and Native

* Indent QTabBar style definitions

* Add missing styles for QPushButton states

* Fix QTableView background

* Remove unused layout from Preferences

* Fix QTabView focused tab style

* Highlight QCheckBox and QRadioButton when focused

* Fix toolbar styles

* Reorder preferences

* Add setting to hide bottom toolbar

* Move toolbar settings above minimalist modes

* Remove unused lines

* Implement proper full-screen mode

* Sort imports

* Tweak deck overview appearance in minimalist mode

* Undo TitledContainer changes

since nobody asked for that

* Remove dynamic toolbar background from minimalist mode

* Tweak buttons in minimalist mode

* Fix some issues

* Reduce theme check interval to 5s on Linux

* Increase hide timer interval to 2s

* Collapse toolbars with slight delay when moving to review state

This should ensure the bottom toolbar collapses too.

* Allow users to make hiding exclusive to full screen

* Rename full screen option

* Fix hide mode dropdown ignoring checkbox state on startup

* Fix typing issue

* Refine background image handling

Giving the toolbar body the main webview height ensures background-size: cover behaves exactly the same.

To prevent an override of other background properties, users are advised to only set background-images via the background-image property, not the background shorthand.

* Fix top toolbar getting huge when switching modes

The issue was caused by the min-height hack to align the background images. A call to web.adjustHeightToFit would set the toolbar to the same height as the main webview, as the function makes use of document.offsetHeight.

* Prevent scrollbar from appearing on bottom toolbar resize

* Cleanup

* Put review tab before editing; fix some tab orders

* Rename 'network' to 'syncing'

* Fix bottom toolbar disappearing on UI > 100

* Improve Preferences layout by adding vertical spacers to the bottom

also make the hiding of video_driver and its label more obvious in preferences.py.

* Fix bottom toolbar animating on startup

Also fix bottom toolbar not appearing when unchecking hide mode in reviewer.

* Hide/Show menubar in fullscreen mode along with toolbar

* Attempt to fix broken native theme on macOS

* Format

* Improve native theme on other systems by not forcing palette

with the caveat that theme switching can get weird.

* Fix theme switching in native style

* Remove redundant condition

* Add back check for Qt5 to prevent theme issues

* Add check for macOS before setting fusion theme

* Do not force scrollbar styles on macOS

* Remove all of that crazy theme logic

* Use canvas instead of button-bg for ColorRole.Button

* Make sure Anki style is always based on Fusion

otherwise we can't guarantee the same look on all systems.

* Explicitly apply default style when Anki style is not selected

This should fix the style not switching back after it was selected.

* Remove reduncant default_palette

* Revert 8af4c1cc2

On Mac with native theme, both Qt5 and Qt6 look correct already. On
the Anki theme, without this change, we get the fusion-style scrollbars
instead of the rounded ones.

* Rename AnkiStyles enum to WidgetStyle

* Fix theme switching shades on same theme

* Format

* Remove unused placeholderText

that caused an error when opening the widget gallery on Qt5.

* Check for full screen windowState using bitwise operator

to prevent error in Qt5.

Credit: https://stackoverflow.com/a/65425151

* Hide style option on Windows

also exclude native option from dropdown just in case.

* Format

* Minor naming tweak
2023-01-18 21:24:16 +10:00

159 lines
3.1 KiB
SCSS

/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "sass/root-vars";
@use "sass/vars" as *;
@use "sass/card-counts";
@use "sass/elevation" as *;
table {
padding: 1rem;
.fancy & {
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-medium);
@include elevation(1, $opacity-boost: -0.08);
&:hover {
@include elevation(2);
}
transition: box-shadow var(--transition) ease-in-out;
background: var(--canvas-glass);
backdrop-filter: blur(var(--blur));
}
}
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: 1px 12px;
border-bottom: 1px solid var(--border-subtle);
.fancy & {
border: unset;
padding: 4px 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(border-subtle);
&:first-child {
border-top-left-radius: prop(border-radius-medium);
border-bottom-left-radius: prop(border-radius-medium);
}
&:last-child {
border-top-right-radius: prop(border-radius-medium);
border-bottom-right-radius: prop(border-radius-medium);
}
.gears {
visibility: visible;
}
}
}
[dir="rtl"] {
.current,
tr:hover:not(.top-level-drag-row) {
td {
background: color(canvas-inset);
&:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: prop(border-radius-medium);
border-bottom-right-radius: prop(border-radius-medium);
}
&:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: prop(border-radius-medium);
border-bottom-left-radius: prop(border-radius-medium);
}
}
}
}
.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;
}