pax/booru-viewer
1
0
Fork 0
Code Issues Releases 18 Activity

updated README.md and fixed redundant entries

Browse Source
This commit is contained in:
pax 2026-04-10 16:06:44 -05:00
parent aac7b08787
commit ba49a59385
1 changed files with 68 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
themes/README.md
View File

@ -66,14 +66,6 @@ slots that the body actually uses need to be defined.
## Included Themes ## Included Themes
Each theme ships in two corner-radius variants. Screenshots use the rounded variant:
<picture><img src="../screenshots/themes/nord.png" alt="Nord" width="400"></picture> <picture><img src="../screenshots/themes/catppuccin-mocha.png" alt="Catppuccin Mocha" width="400"></picture>
<picture><img src="../screenshots/themes/gruvbox.png" alt="Gruvbox" width="400"></picture> <picture><img src="../screenshots/themes/solarized-dark.png" alt="Solarized Dark" width="400"></picture>
<picture><img src="../screenshots/themes/tokyo-night.png" alt="Tokyo Night" width="400"></picture> <picture><img src="../screenshots/themes/everforest.png" alt="Everforest" width="400"></picture>
Each theme ships in two corner-radius variants: Each theme ships in two corner-radius variants:
- **`*-rounded.qss`** — 4px radius on buttons, inputs, dropdowns, scrollbar handles, group boxes, tabs etc. The "default" Fusion-style look. - **`*-rounded.qss`** — 4px radius on buttons, inputs, dropdowns, scrollbar handles, group boxes, tabs etc. The "default" Fusion-style look.
@ -90,18 +82,24 @@ Pick whichever matches your overall desktop aesthetic. Both variants share the s
| Tokyo Night | [tokyo-night-rounded.qss](tokyo-night-rounded.qss) | [tokyo-night-square.qss](tokyo-night-square.qss) | | Tokyo Night | [tokyo-night-rounded.qss](tokyo-night-rounded.qss) | [tokyo-night-square.qss](tokyo-night-square.qss) |
| Everforest | [everforest-rounded.qss](everforest-rounded.qss) | [everforest-square.qss](everforest-square.qss) | | Everforest | [everforest-rounded.qss](everforest-rounded.qss) | [everforest-square.qss](everforest-square.qss) |
<picture><img src="../screenshots/themes/nord.png" alt="Nord" width="400"></picture> <picture><img src="../screenshots/themes/catppuccin-mocha.png" alt="Catppuccin Mocha" width="400"></picture>
<picture><img src="../screenshots/themes/gruvbox.png" alt="Gruvbox" width="400"></picture> <picture><img src="../screenshots/themes/solarized-dark.png" alt="Solarized Dark" width="400"></picture>
<picture><img src="../screenshots/themes/tokyo-night.png" alt="Tokyo Night" width="400"></picture> <picture><img src="../screenshots/themes/everforest.png" alt="Everforest" width="400"></picture>
## Widget Targets ## Widget Targets
### Global ### Global
```css ```css
QWidget { QWidget {
background-color: #282828; background-color: ${bg};
color: #ebdbb2; color: ${text};
font-size: 13px; font-size: 13px;
font-family: monospace; font-family: monospace;
selection-background-color: #fe8019; /* grid selection border + hover highlight */ selection-background-color: ${accent}; /* grid selection border + hover highlight */
selection-color: #282828; selection-color: ${accent_text};
} }
``` ```
@ -109,15 +107,15 @@ QWidget {
```css ```css
QPushButton { QPushButton {
background-color: #333; background-color: ${bg_subtle};
color: #fff; color: ${text};
border: 1px solid #555; border: 1px solid ${border};
border-radius: 4px; border-radius: 4px;
padding: 5px 14px; padding: 5px 14px;
} }
QPushButton:hover { background-color: #444; } QPushButton:hover { background-color: ${bg_hover}; }
QPushButton:pressed { background-color: #555; } QPushButton:pressed { background-color: ${bg_active}; }
QPushButton:checked { background-color: #0078d7; } /* Active tab (Browse/Bookmarks/Library), Autoplay, Loop toggles */ QPushButton:checked { background-color: ${accent}; } /* Active tab (Browse/Bookmarks/Library), Autoplay, Loop toggles */
``` ```
**Note:** Qt's QSS does not support the CSS `content` property, so you cannot replace button text (e.g. "Play" → "") via stylesheet alone. However, you can use a Nerd Font to change how unicode characters render: **Note:** Qt's QSS does not support the CSS `content` property, so you cannot replace button text (e.g. "Play" → "") via stylesheet alone. However, you can use a Nerd Font to change how unicode characters render:
@ -134,14 +132,14 @@ To use icon buttons, you would need to modify the Python source code directly
```css ```css
QLineEdit, QTextEdit { QLineEdit, QTextEdit {
background-color: #1a1a1a; background-color: ${bg};
color: #fff; color: ${text};
border: 1px solid #555; border: 1px solid ${border};
border-radius: 4px; border-radius: 4px;
padding: 4px 8px; padding: 4px 8px;
} }
QLineEdit:focus, QTextEdit:focus { QLineEdit:focus, QTextEdit:focus {
border-color: #0078d7; border-color: ${accent};
} }
``` ```
@ -149,9 +147,9 @@ QLineEdit:focus, QTextEdit:focus {
```css ```css
QComboBox { QComboBox {
background-color: #333; background-color: ${bg_subtle};
color: #fff; color: ${text};
border: 1px solid #555; border: 1px solid ${border};
border-radius: 4px; border-radius: 4px;
padding: 3px 6px; padding: 3px 6px;
} }
@ -160,10 +158,10 @@ QComboBox::drop-down {
width: 20px; width: 20px;
} }
QComboBox QAbstractItemView { QComboBox QAbstractItemView {
background-color: #333; background-color: ${bg_subtle};
color: #fff; color: ${text};
border: 1px solid #555; border: 1px solid ${border};
selection-background-color: #444; selection-background-color: ${bg_hover};
} }
``` ```
@ -171,9 +169,9 @@ QComboBox QAbstractItemView {
```css ```css
QSpinBox { QSpinBox {
background-color: #333; background-color: ${bg_subtle};
color: #fff; color: ${text};
border: 1px solid #555; border: 1px solid ${border};
border-radius: 2px; border-radius: 2px;
} }
``` ```
@ -182,24 +180,24 @@ QSpinBox {
```css ```css
QScrollBar:vertical { QScrollBar:vertical {
background: #1a1a1a; background: ${bg};
width: 10px; width: 10px;
border: none; border: none;
} }
QScrollBar::handle:vertical { QScrollBar::handle:vertical {
background: #555; background: ${bg_hover};
border-radius: 4px; border-radius: 4px;
min-height: 20px; min-height: 20px;
} }
QScrollBar::handle:vertical:hover { background: #0078d7; } QScrollBar::handle:vertical:hover { background: ${bg_active}; }
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { height: 0; } QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { height: 0; }
QScrollBar:horizontal { QScrollBar:horizontal {
background: #1a1a1a; background: ${bg};
height: 10px; height: 10px;
} }
QScrollBar::handle:horizontal { QScrollBar::handle:horizontal {
background: #555; background: ${bg_hover};
border-radius: 4px; border-radius: 4px;
} }
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal { width: 0; } QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal { width: 0; }
@ -209,25 +207,25 @@ QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal { width: 0; }
```css ```css
QMenuBar { QMenuBar {
background-color: #1a1a1a; background-color: ${bg};
color: #fff; color: ${text};
} }
QMenuBar::item:selected { background-color: #333; } QMenuBar::item:selected { background-color: ${bg_subtle}; }
QMenu { QMenu {
background-color: #1a1a1a; background-color: ${bg};
color: #fff; color: ${text};
border: 1px solid #333; border: 1px solid ${border};
} }
QMenu::item:selected { background-color: #333; } QMenu::item:selected { background-color: ${bg_subtle}; }
``` ```
### Status Bar ### Status Bar
```css ```css
QStatusBar { QStatusBar {
background-color: #1a1a1a; background-color: ${bg};
color: #888; color: ${text_dim};
} }
``` ```
@ -235,7 +233,7 @@ QStatusBar {
```css ```css
QSplitter::handle { QSplitter::handle {
background: #555; background: ${border};
width: 2px; width: 2px;
} }
``` ```
@ -244,14 +242,14 @@ QSplitter::handle {
```css ```css
QTabBar::tab { QTabBar::tab {
background: #333; background: ${bg_subtle};
color: #fff; color: ${text};
border: 1px solid #555; border: 1px solid ${border};
padding: 6px 16px; padding: 6px 16px;
} }
QTabBar::tab:selected { QTabBar::tab:selected {
background: #444; background: ${bg_hover};
color: #0078d7; color: ${accent};
} }
``` ```
@ -263,7 +261,7 @@ To override the preview controls bar background in QSS:
```css ```css
QWidget#_preview_controls { QWidget#_preview_controls {
background: rgba(40, 40, 40, 200); /* your custom translucent bg */ background: ${overlay_bg};
} }
``` ```
@ -271,12 +269,12 @@ Standard slider styling still applies outside the controls bar:
```css ```css
QSlider::groove:horizontal { QSlider::groove:horizontal {
background: #333; background: ${bg_subtle};
height: 4px; height: 4px;
border-radius: 2px; border-radius: 2px;
} }
QSlider::handle:horizontal { QSlider::handle:horizontal {
background: #0078d7; background: ${accent};
width: 12px; width: 12px;
margin: -4px 0; margin: -4px 0;
border-radius: 6px; border-radius: 6px;
@ -292,12 +290,12 @@ These overlays use internal styling that overrides QSS. To customize:
```css ```css
/* Popout top toolbar */ /* Popout top toolbar */
QWidget#_slideshow_toolbar { QWidget#_slideshow_toolbar {
background: rgba(40, 40, 40, 200); background: ${overlay_bg};
} }
/* Popout bottom video controls */ /* Popout bottom video controls */
QWidget#_slideshow_controls { QWidget#_slideshow_controls {
background: rgba(40, 40, 40, 200); background: ${overlay_bg};
} }
``` ```
@ -305,12 +303,12 @@ Buttons and labels inside both overlays inherit a white-on-transparent style. To
```css ```css
QWidget#_slideshow_toolbar QPushButton { QWidget#_slideshow_toolbar QPushButton {
border: 1px solid rgba(255, 255, 255, 120); border: 1px solid ${border};
color: #ccc; color: ${text_dim};
} }
QWidget#_slideshow_controls QPushButton { QWidget#_slideshow_controls QPushButton {
border: 1px solid rgba(255, 255, 255, 120); border: 1px solid ${border};
color: #ccc; color: ${text_dim};
} }
``` ```
@ -324,11 +322,11 @@ The toolbar does not have a named object ID — it inherits the app's `QPushButt
```css ```css
QProgressBar { QProgressBar {
background-color: #333; background-color: ${bg_subtle};
border: none; border: none;
} }
QProgressBar::chunk { QProgressBar::chunk {
background-color: #0078d7; background-color: ${accent};
} }
``` ```
@ -336,9 +334,9 @@ QProgressBar::chunk {
```css ```css
QToolTip { QToolTip {
background-color: #333; background-color: ${bg_subtle};
color: #fff; color: ${text};
border: 1px solid #555; border: 1px solid ${border};
padding: 4px; padding: 4px;
} }
``` ```
@ -357,8 +355,8 @@ Click and drag on empty grid space to select multiple thumbnails. The rubber ban
```css ```css
QRubberBand { QRubberBand {
background: rgba(0, 120, 215, 40); background: ${accent}; /* use rgba(...) variant for translucency */
border: 1px solid #0078d7; border: 1px solid ${accent};
} }
``` ```
@ -368,10 +366,10 @@ The library tab's count label switches between three visual states depending on
```css ```css
QLabel[libraryCountState="empty"] { QLabel[libraryCountState="empty"] {
color: #a6adc8; /* dim text — search miss or empty folder */ color: ${text_dim}; /* dim text — search miss or empty folder */
} }
QLabel[libraryCountState="error"] { QLabel[libraryCountState="error"] {
color: #f38ba8; /* danger color — directory unreachable */ color: ${danger}; /* danger color — directory unreachable */
font-weight: bold; font-weight: bold;
} }
``` ```