f169ee0933
* 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
89 lines
2.2 KiB
Svelte
89 lines
2.2 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script lang="ts">
|
|
import { pageTheme } from "../sveltelib/theme";
|
|
|
|
const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
|
|
|
|
export let id: string | undefined = undefined;
|
|
let className: string = "";
|
|
export { className as class };
|
|
|
|
export let title: string;
|
|
</script>
|
|
|
|
<div
|
|
{id}
|
|
class="container {className}"
|
|
class:light={!$pageTheme.isDark}
|
|
class:dark={$pageTheme.isDark}
|
|
class:rtl
|
|
style:--gutter-block="2px"
|
|
style:--container-margin="0"
|
|
>
|
|
<div class="position-relative">
|
|
<h1>{title}</h1>
|
|
<div class="help-badge position-absolute" class:rtl>
|
|
<slot name="tooltip" />
|
|
</div>
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use "sass/elevation" as *;
|
|
.container {
|
|
width: 100%;
|
|
background: var(--canvas-elevated);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--border-radius-medium, 10px);
|
|
|
|
&.light {
|
|
@include elevation(2, $opacity-boost: -0.08);
|
|
&:hover,
|
|
&:focus-within {
|
|
@include elevation(3);
|
|
}
|
|
}
|
|
&.dark {
|
|
@include elevation(3, $opacity-boost: -0.08);
|
|
&:hover,
|
|
&:focus-within {
|
|
@include elevation(4);
|
|
}
|
|
}
|
|
|
|
padding: 1rem 1.75rem 0.75rem 1.25rem;
|
|
&.rtl {
|
|
padding: 1rem 1.25rem 0.75rem 1.75rem;
|
|
}
|
|
&:hover,
|
|
&:focus-within {
|
|
.help-badge {
|
|
color: var(--fg-subtle);
|
|
}
|
|
}
|
|
transition: box-shadow var(--transition) ease-in-out;
|
|
page-break-inside: avoid;
|
|
}
|
|
h1 {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.help-badge {
|
|
right: 0;
|
|
bottom: 4px;
|
|
color: var(--fg-faint);
|
|
transition: color var(--transition) linear;
|
|
&:hover {
|
|
transition: none;
|
|
color: var(--fg);
|
|
}
|
|
&.rtl {
|
|
right: unset;
|
|
left: 0;
|
|
}
|
|
}
|
|
</style>
|