pax
b10c00d6bf
Supports Danbooru, Gelbooru, Moebooru, and e621. Features include tag search with autocomplete, favorites with folders, save-to-library, video playback, drag-and-drop, multi-select, custom CSS theming, and cross-platform support.
139 lines
3.1 KiB
Plaintext
139 lines
3.1 KiB
Plaintext
booru-viewer Custom Stylesheet Guide
|
|
=====================================
|
|
|
|
Place a file named "custom.qss" in your data directory to override styles:
|
|
Linux: ~/.local/share/booru-viewer/custom.qss
|
|
Windows: %APPDATA%\booru-viewer\custom.qss
|
|
|
|
The custom stylesheet is appended AFTER the default theme, so your rules
|
|
override the defaults. You can use any Qt stylesheet (QSS) syntax.
|
|
|
|
WIDGET REFERENCE
|
|
----------------
|
|
|
|
Main window: QMainWindow
|
|
Buttons: QPushButton
|
|
Text inputs: QLineEdit
|
|
Dropdowns: QComboBox
|
|
Scroll bars: QScrollBar
|
|
Labels: QLabel
|
|
Status bar: QStatusBar
|
|
Tabs: QTabWidget, QTabBar
|
|
Lists: QListWidget
|
|
Menus: QMenu, QMenuBar
|
|
Tooltips: QToolTip
|
|
Dialogs: QDialog
|
|
Splitters: QSplitter
|
|
Progress bars: QProgressBar
|
|
Spin boxes: QSpinBox
|
|
Check boxes: QCheckBox
|
|
Sliders: QSlider
|
|
|
|
EXAMPLES
|
|
--------
|
|
|
|
Change accent color from green to cyan:
|
|
|
|
QWidget {
|
|
color: #00ffff;
|
|
}
|
|
QPushButton:pressed {
|
|
background-color: #009999;
|
|
color: #000000;
|
|
}
|
|
QLineEdit:focus {
|
|
border-color: #00ffff;
|
|
}
|
|
|
|
Bigger font:
|
|
|
|
QWidget {
|
|
font-size: 15px;
|
|
}
|
|
|
|
Different background:
|
|
|
|
QWidget {
|
|
background-color: #1a1a2e;
|
|
}
|
|
|
|
Custom button style:
|
|
|
|
QPushButton {
|
|
background-color: #222222;
|
|
color: #00ff00;
|
|
border: 1px solid #444444;
|
|
border-radius: 6px;
|
|
padding: 8px 20px;
|
|
}
|
|
QPushButton:hover {
|
|
background-color: #333333;
|
|
border-color: #00ff00;
|
|
}
|
|
|
|
Wider scrollbar:
|
|
|
|
QScrollBar:vertical {
|
|
width: 14px;
|
|
}
|
|
QScrollBar::handle:vertical {
|
|
min-height: 40px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
Hide the info overlay on images:
|
|
|
|
/* Target the info label in the preview */
|
|
QLabel[objectName="info-label"] {
|
|
color: transparent;
|
|
}
|
|
|
|
VIDEO PLAYER CONTROLS
|
|
---------------------
|
|
|
|
The video player controls are standard Qt widgets:
|
|
QPushButton - Play/Pause, Mute buttons
|
|
QSlider - Seek bar, Volume slider
|
|
QLabel - Time display
|
|
|
|
Example - style the seek bar:
|
|
|
|
QSlider::groove:horizontal {
|
|
background: #333333;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
}
|
|
QSlider::handle:horizontal {
|
|
background: #00ff00;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin: -4px 0;
|
|
border-radius: 7px;
|
|
}
|
|
QSlider::sub-page:horizontal {
|
|
background: #009900;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
DEFAULT COLOR PALETTE
|
|
---------------------
|
|
|
|
These are the defaults you can override:
|
|
|
|
Green (accent): #00ff00
|
|
Dark green: #00cc00
|
|
Dim green: #009900
|
|
Background: #000000
|
|
Background light: #111111
|
|
Background lighter: #1a1a1a
|
|
Border: #333333
|
|
|
|
TIPS
|
|
----
|
|
|
|
- Restart the app after editing custom.qss
|
|
- Use a text editor to edit QSS - it's similar to CSS
|
|
- If something breaks, just delete custom.qss to reset
|
|
- Your custom styles override defaults, so you only need to include what you change
|
|
- The file is read at startup, not live-reloaded
|