- Modularize Hyprland config into hyprland.d/ - Implement infinitely scalable monitor/workspace logic using templates and loop-based data structures - Consolidate host-specific configs (hyprlock, hyprpaper, waybar) into single templates - Resolve waybar symlink conflict and fix template execution errors - Integrate chezmoi data variables for scale, resolution, and peripherals
216 lines
4.2 KiB
CSS
216 lines
4.2 KiB
CSS
/* Rosé Pine v3 for Sherlock
|
|
* Colors from Rosé Pine (main) with compact tiles and improved weather legibility.
|
|
*/
|
|
|
|
/* Palette */
|
|
@define-color rp_base #191724;
|
|
@define-color rp_surface #1f1d2e;
|
|
@define-color rp_overlay #26233a;
|
|
@define-color rp_muted #6e6a86;
|
|
@define-color rp_subtle #908caa;
|
|
@define-color rp_text #e0def4;
|
|
@define-color rp_love #eb6f92;
|
|
@define-color rp_gold #f6c177;
|
|
@define-color rp_rose #ebbcba;
|
|
@define-color rp_pine #31748f;
|
|
@define-color rp_foam #9ccfd8;
|
|
@define-color rp_iris #c4a7e7;
|
|
@define-color rp_hl_low #21202e;
|
|
@define-color rp_hl_med #403d52;
|
|
@define-color rp_hl_high #524f67;
|
|
|
|
/* Global semantics */
|
|
@define-color theme_bg_color @rp_base;
|
|
@define-color theme_fg_color @rp_text;
|
|
@define-color theme_selected_bg_color @rp_hl_med;
|
|
@define-color theme_selected_fg_color @rp_text;
|
|
@define-color warning_color @rp_gold;
|
|
@define-color error_color @rp_love;
|
|
@define-color success_color @rp_foam;
|
|
|
|
/* Window */
|
|
window {
|
|
background-color: @rp_base;
|
|
color: @rp_text;
|
|
border: 1px solid @rp_overlay;
|
|
border-radius: 10px;
|
|
padding: 6px;
|
|
}
|
|
|
|
/* Inputs */
|
|
entry {
|
|
background-color: @rp_surface;
|
|
color: @rp_text;
|
|
caret-color: @rp_rose;
|
|
border: 1px solid @rp_overlay;
|
|
border-radius: 7px;
|
|
padding: 6px 9px;
|
|
margin-bottom: 6px;
|
|
font-size: 13px;
|
|
transition: border-color 0.18s ease;
|
|
}
|
|
|
|
entry:focus {
|
|
border-color: @rp_iris;
|
|
box-shadow: 0 0 0 1px rgba(196, 167, 231, 0.25);
|
|
}
|
|
|
|
entry selection {
|
|
background-color: @rp_hl_high;
|
|
color: @rp_text;
|
|
}
|
|
|
|
/* List view */
|
|
listview {
|
|
background-color: transparent;
|
|
}
|
|
|
|
listview > row {
|
|
padding: 4px 8px;
|
|
margin: 1px 0;
|
|
border-radius: 6px;
|
|
border: 1px solid transparent;
|
|
font-size: 13px;
|
|
}
|
|
|
|
listview > row:hover {
|
|
background-color: @rp_overlay;
|
|
}
|
|
|
|
listview > row:selected {
|
|
background-color: @rp_hl_med;
|
|
color: @rp_text;
|
|
border: 1px solid @rp_muted;
|
|
border-left: 3px solid @rp_rose;
|
|
}
|
|
|
|
/* Tiles (compact) */
|
|
.tile,
|
|
.launcher-tile,
|
|
.launcher-item,
|
|
.item {
|
|
background-color: @rp_hl_low;
|
|
color: @rp_text;
|
|
border-radius: 7px;
|
|
border: 1px solid transparent;
|
|
min-height: 32px;
|
|
padding: 4px 10px;
|
|
margin-bottom: 4px;
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 6px;
|
|
}
|
|
|
|
.tile:hover,
|
|
.launcher-tile:hover,
|
|
.launcher-item:hover,
|
|
.item:hover {
|
|
background-color: @rp_hl_med;
|
|
}
|
|
|
|
.tile:selected,
|
|
.launcher-tile:selected,
|
|
.launcher-item:selected,
|
|
.item:selected,
|
|
.tile:focus {
|
|
background-color: @rp_overlay;
|
|
border-color: @rp_iris;
|
|
}
|
|
|
|
.tile-icon,
|
|
.item-icon,
|
|
.icon {
|
|
color: @rp_foam;
|
|
min-width: 18px;
|
|
min-height: 18px;
|
|
}
|
|
|
|
.tile-label,
|
|
.tile-title,
|
|
.item-title,
|
|
.title {
|
|
color: @rp_text;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tile-description,
|
|
.item-subtitle,
|
|
.subtitle,
|
|
.description {
|
|
color: @rp_subtle;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.shortcut,
|
|
.tile-shortcut,
|
|
.item-shortcut {
|
|
margin-left: auto;
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 999px;
|
|
background-color: @rp_hl_med;
|
|
color: @rp_gold;
|
|
}
|
|
|
|
/* Widgets */
|
|
.widget,
|
|
.weather-widget,
|
|
.music-widget,
|
|
.async-widget {
|
|
background-color: rgba(38, 35, 58, 0.92); /* slightly lighter for legibility */
|
|
border-radius: 7px;
|
|
border: 1px solid @rp_hl_high;
|
|
padding: 6px 9px;
|
|
margin-bottom: 6px;
|
|
color: @rp_text;
|
|
}
|
|
|
|
.weather-widget .temperature {
|
|
color: @rp_rose;
|
|
font-weight: 650;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.weather-widget .condition {
|
|
color: @rp_subtle;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
/* Scrollbars */
|
|
scrollbar slider {
|
|
background-color: @rp_muted;
|
|
min-width: 6px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
scrollbar slider:hover {
|
|
background-color: @rp_subtle;
|
|
}
|
|
|
|
/* Progress Bars */
|
|
progressbar trough {
|
|
background-color: @rp_surface;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
progressbar progress {
|
|
background-color: @rp_pine;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Buttons */
|
|
button {
|
|
background-color: @rp_surface;
|
|
color: @rp_text;
|
|
border: 1px solid @rp_overlay;
|
|
border-radius: 6px;
|
|
padding: 4px 8px;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: @rp_overlay;
|
|
border-color: @rp_iris;
|
|
}
|