vikingowl
00cfad6469
- Use system GTK theme by default instead of custom owl theme - Add base.css with structural styles and GTK theme fallbacks - Rename style.css to owl-theme.css (now opt-in via config) - Add ThemeColors struct for user color customization - Create theme module for CSS variable generation - Apply font_size and border_radius from config CSS loading priority: 1. base.css - structure + GTK fallbacks 2. theme CSS - optional (owl or custom) 3. user style.css - custom overrides 4. config variables - highest priority Config example: [appearance] theme = "owl" # or omit for GTK default [appearance.colors] accent = "#f38ba8" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
209 lines
4.7 KiB
CSS
209 lines
4.7 KiB
CSS
/*
|
|
* Owlry - Owl Theme
|
|
* An owl-inspired dark theme with amber accents
|
|
*
|
|
* Color Palette:
|
|
* - Deep night sky: #1a1b26 (background)
|
|
* - Twilight: #24283b (secondary bg)
|
|
* - Owl feathers: #414868 (borders/muted)
|
|
* - Moon glow: #c0caf5 (primary text)
|
|
* - Owl eyes (amber): #e0af68 (accent/highlight)
|
|
* - Forest shadows: #565f89 (secondary text)
|
|
* - Barn owl cream: #f5e0dc (bright accent)
|
|
*/
|
|
|
|
/* Define CSS variables with owl theme defaults */
|
|
:root {
|
|
--owlry-bg: #1a1b26;
|
|
--owlry-bg-secondary: #24283b;
|
|
--owlry-border: #414868;
|
|
--owlry-text: #c0caf5;
|
|
--owlry-text-secondary: #565f89;
|
|
--owlry-accent: #e0af68;
|
|
--owlry-accent-bright: #f5e0dc;
|
|
--owlry-badge-app: #7aa2f7;
|
|
--owlry-badge-cmd: #bb9af7;
|
|
--owlry-badge-dmenu: #9ece6a;
|
|
--owlry-badge-uuctl: #e0af68;
|
|
}
|
|
|
|
/* Main container */
|
|
.owlry-main {
|
|
background-color: rgba(26, 27, 38, 0.95);
|
|
border: 1px solid rgba(65, 72, 104, 0.6);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
|
|
0 0 0 1px rgba(224, 175, 104, 0.1);
|
|
}
|
|
|
|
/* Search entry */
|
|
.owlry-search {
|
|
background-color: rgba(36, 40, 59, 0.8);
|
|
border: 2px solid rgba(65, 72, 104, 0.5);
|
|
color: var(--owlry-text);
|
|
caret-color: var(--owlry-accent);
|
|
}
|
|
|
|
.owlry-search:focus {
|
|
border-color: var(--owlry-accent);
|
|
box-shadow: 0 0 0 2px rgba(224, 175, 104, 0.2);
|
|
}
|
|
|
|
.owlry-search placeholder {
|
|
color: var(--owlry-text-secondary);
|
|
}
|
|
|
|
/* Results list */
|
|
.owlry-results {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Individual result row */
|
|
.owlry-result-row {
|
|
background-color: transparent;
|
|
transition: background-color 150ms ease;
|
|
}
|
|
|
|
.owlry-result-row:hover {
|
|
background-color: rgba(36, 40, 59, 0.6);
|
|
}
|
|
|
|
.owlry-result-row:selected {
|
|
background-color: rgba(224, 175, 104, 0.15);
|
|
border-left: 3px solid var(--owlry-accent);
|
|
}
|
|
|
|
.owlry-result-row:selected:hover {
|
|
background-color: rgba(224, 175, 104, 0.2);
|
|
}
|
|
|
|
/* Result icon */
|
|
.owlry-result-icon {
|
|
color: var(--owlry-text);
|
|
}
|
|
|
|
.owlry-result-row:selected .owlry-result-icon {
|
|
color: var(--owlry-accent);
|
|
}
|
|
|
|
/* Result name */
|
|
.owlry-result-name {
|
|
color: var(--owlry-text);
|
|
}
|
|
|
|
.owlry-result-row:selected .owlry-result-name {
|
|
color: var(--owlry-accent-bright);
|
|
}
|
|
|
|
/* Result description */
|
|
.owlry-result-description {
|
|
color: var(--owlry-text-secondary);
|
|
}
|
|
|
|
.owlry-result-row:selected .owlry-result-description {
|
|
color: var(--owlry-badge-app);
|
|
}
|
|
|
|
/* Provider badges */
|
|
.owlry-result-badge {
|
|
background-color: rgba(65, 72, 104, 0.4);
|
|
color: var(--owlry-text-secondary);
|
|
}
|
|
|
|
.owlry-badge-app {
|
|
background-color: rgba(122, 162, 247, 0.2);
|
|
color: var(--owlry-badge-app);
|
|
}
|
|
|
|
.owlry-badge-cmd {
|
|
background-color: rgba(187, 154, 247, 0.2);
|
|
color: var(--owlry-badge-cmd);
|
|
}
|
|
|
|
.owlry-badge-dmenu {
|
|
background-color: rgba(158, 206, 106, 0.2);
|
|
color: var(--owlry-badge-dmenu);
|
|
}
|
|
|
|
.owlry-badge-uuctl {
|
|
background-color: rgba(224, 175, 104, 0.2);
|
|
color: var(--owlry-badge-uuctl);
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
scrollbar slider {
|
|
background-color: rgba(65, 72, 104, 0.5);
|
|
}
|
|
|
|
scrollbar slider:hover {
|
|
background-color: rgba(86, 95, 137, 0.7);
|
|
}
|
|
|
|
scrollbar slider:active {
|
|
background-color: var(--owlry-accent);
|
|
}
|
|
|
|
/* Selection highlighting */
|
|
selection {
|
|
background-color: rgba(224, 175, 104, 0.3);
|
|
color: var(--owlry-accent-bright);
|
|
}
|
|
|
|
/* Mode indicator */
|
|
.owlry-mode-indicator {
|
|
color: var(--owlry-accent);
|
|
background-color: rgba(224, 175, 104, 0.15);
|
|
}
|
|
|
|
/* Filter toggle buttons */
|
|
.owlry-filter-button {
|
|
background-color: rgba(65, 72, 104, 0.3);
|
|
color: var(--owlry-text-secondary);
|
|
border: 1px solid transparent;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.owlry-filter-button:hover {
|
|
background-color: rgba(65, 72, 104, 0.5);
|
|
color: var(--owlry-text);
|
|
}
|
|
|
|
.owlry-filter-button:checked {
|
|
background-color: rgba(224, 175, 104, 0.2);
|
|
color: var(--owlry-accent);
|
|
border-color: rgba(224, 175, 104, 0.4);
|
|
}
|
|
|
|
/* Provider-specific filter button colors when active */
|
|
.owlry-filter-app:checked {
|
|
background-color: rgba(122, 162, 247, 0.2);
|
|
color: var(--owlry-badge-app);
|
|
border-color: rgba(122, 162, 247, 0.4);
|
|
}
|
|
|
|
.owlry-filter-cmd:checked {
|
|
background-color: rgba(187, 154, 247, 0.2);
|
|
color: var(--owlry-badge-cmd);
|
|
border-color: rgba(187, 154, 247, 0.4);
|
|
}
|
|
|
|
.owlry-filter-uuctl:checked {
|
|
background-color: rgba(224, 175, 104, 0.2);
|
|
color: var(--owlry-badge-uuctl);
|
|
border-color: rgba(224, 175, 104, 0.4);
|
|
}
|
|
|
|
.owlry-filter-dmenu:checked {
|
|
background-color: rgba(158, 206, 106, 0.2);
|
|
color: var(--owlry-badge-dmenu);
|
|
border-color: rgba(158, 206, 106, 0.4);
|
|
}
|
|
|
|
/* Hints bar at bottom */
|
|
.owlry-hints {
|
|
border-top: 1px solid rgba(65, 72, 104, 0.3);
|
|
}
|
|
|
|
.owlry-hints-label {
|
|
color: var(--owlry-text-secondary);
|
|
}
|