SirBlob
acc96492ee
- blob_theme: apply local or shared themes, --dynamic recolors from the current wallpaper without changing it, --print saves the active theme's colors.toml (e.g. for a dynamic palette worth keeping) - themes/: drop-in colors.toml files that install.sh syncs into Omarchy's theme dir, alongside any already-installed themes - ThemePicker widget, walker menu, and Quick Settings tile mirroring the existing wallpaper picker, with color-swatch previews - blob_wallpaper no longer forces dynamic mode on every wallpaper change; it only recolors if you're already in dynamic mode - install.sh: fix a new-directory mkdir bug in backup_and_copy, and stop backing up wallpapers/themes (.bak dirs were showing up as fake entries in the picker) since both are pure git mirrors Claude-Session: https://claude.ai/code/session_011kf23kB9NsaczSYazZsWs6
587 lines
8.3 KiB
CSS
587 lines
8.3 KiB
CSS
@import "./colors.css";
|
|
|
|
* {
|
|
all: unset;
|
|
}
|
|
|
|
.MediaWindow {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.media-container {
|
|
background-color: alpha(@background, 0.85);
|
|
border-radius: 8px;
|
|
border: 2px solid alpha(@color4, 0.5);
|
|
padding: 8px 15px;
|
|
min-width: 300px;
|
|
font-family: "JetBrainsMono Nerd Font", sans-serif;
|
|
}
|
|
|
|
.media-cover {
|
|
min-width: 64px;
|
|
min-height: 64px;
|
|
border-radius: 4px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.media-info-box {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.media-title {
|
|
color: @foreground;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.media-artist {
|
|
color: @foreground;
|
|
font-size: 13px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.media-controls {
|
|
/* Box spacing is handled by the component */
|
|
}
|
|
|
|
.media-btn {
|
|
color: @color5;
|
|
font-size: 16px;
|
|
padding: 0 5px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.media-btn:hover {
|
|
color: @color4;
|
|
}
|
|
|
|
.media-progress {
|
|
min-height: 4px;
|
|
padding: 0;
|
|
}
|
|
|
|
.media-progress trough {
|
|
min-height: 4px;
|
|
background-color: alpha(@foreground, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.media-progress highlight {
|
|
background-color: @accent;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.media-progress slider {
|
|
background-color: transparent;
|
|
min-width: 0px;
|
|
min-height: 0px;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.NotificationCenter,
|
|
.QuickSettings,
|
|
.SysMonitor,
|
|
.Calendar,
|
|
.WallPicker,
|
|
.ThemePicker {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.panel {
|
|
background-color: alpha(@background, 0.92);
|
|
border-radius: 12px;
|
|
border: 2px solid alpha(@color4, 0.5);
|
|
padding: 14px;
|
|
font-family: "JetBrainsMono Nerd Font", sans-serif;
|
|
color: @foreground;
|
|
}
|
|
|
|
.panel-title {
|
|
color: @foreground;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.panel-header {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.panel-icon-btn {
|
|
color: @color5;
|
|
font-size: 13px;
|
|
padding: 3px 6px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.panel-icon-btn:hover {
|
|
background-color: alpha(@color4, 0.25);
|
|
color: @color4;
|
|
}
|
|
|
|
.panel-icon-btn.active {
|
|
background-color: @accent;
|
|
color: @background;
|
|
}
|
|
|
|
.notification-center {
|
|
min-width: 360px;
|
|
min-height: 420px;
|
|
}
|
|
|
|
.notification-scroll {
|
|
min-height: 360px;
|
|
}
|
|
|
|
.notification-item {
|
|
background-color: alpha(@color0, 0.6);
|
|
border-radius: 10px;
|
|
border-left: 3px solid @accent;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.notification-item-app {
|
|
color: @accent;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.notification-item-close {
|
|
color: @color5;
|
|
font-size: 12px;
|
|
padding: 0 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.notification-item-close:hover {
|
|
color: @color1;
|
|
}
|
|
|
|
.notification-item-summary {
|
|
color: @foreground;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.notification-item-body {
|
|
color: @foreground;
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.notification-empty {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.notification-empty-icon {
|
|
font-size: 42px;
|
|
color: @color4;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.notification-empty-text {
|
|
font-size: 13px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.quick-settings {
|
|
min-width: 320px;
|
|
}
|
|
|
|
.qs-tile {
|
|
background-color: alpha(@color0, 0.6);
|
|
border-radius: 10px;
|
|
padding: 8px 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.qs-tile:hover {
|
|
background-color: alpha(@color4, 0.25);
|
|
}
|
|
|
|
.qs-tile.active {
|
|
background-color: @accent;
|
|
color: @background;
|
|
}
|
|
|
|
.qs-tile-icon {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.qs-tile-label {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.qs-slider-row {
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.qs-slider-icon {
|
|
color: @color5;
|
|
font-size: 14px;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.qs-slider trough {
|
|
min-height: 8px;
|
|
border-radius: 8px;
|
|
background-color: alpha(@foreground, 0.2);
|
|
}
|
|
|
|
.qs-slider highlight {
|
|
border-radius: 8px;
|
|
background-color: @accent;
|
|
}
|
|
|
|
.qs-slider slider {
|
|
background-color: @foreground;
|
|
border-radius: 50%;
|
|
min-width: 14px;
|
|
min-height: 14px;
|
|
margin: -4px;
|
|
}
|
|
|
|
.sys-monitor {
|
|
min-width: 320px;
|
|
}
|
|
|
|
.sys-metric-icon {
|
|
font-size: 16px;
|
|
color: @color5;
|
|
min-width: 22px;
|
|
}
|
|
|
|
.sys-metric-name {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sys-metric-detail {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.sys-metric-bar {
|
|
min-height: 8px;
|
|
}
|
|
|
|
.sys-metric-bar trough {
|
|
min-height: 8px;
|
|
border-radius: 8px;
|
|
background-color: alpha(@foreground, 0.2);
|
|
}
|
|
|
|
.sys-metric-bar block.filled {
|
|
border-radius: 8px;
|
|
background-color: @accent;
|
|
}
|
|
|
|
.calendar {
|
|
min-width: 280px;
|
|
}
|
|
|
|
.calendar-time {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: @foreground;
|
|
}
|
|
|
|
.calendar-date {
|
|
font-size: 14px;
|
|
color: @accent;
|
|
}
|
|
|
|
.calendar-month {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: @accent;
|
|
}
|
|
|
|
.calendar-days {
|
|
font-family: "JetBrainsMono Nerd Font", monospace;
|
|
font-size: 14px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.wall-picker {
|
|
min-width: 680px;
|
|
min-height: 460px;
|
|
}
|
|
|
|
.wall-scroll {
|
|
min-height: 400px;
|
|
}
|
|
|
|
.wall-thumb {
|
|
padding: 0;
|
|
border-radius: 10px;
|
|
border: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.wall-thumb:hover {
|
|
border: 2px solid @accent;
|
|
}
|
|
|
|
.wall-thumb-image {
|
|
min-width: 200px;
|
|
min-height: 112px;
|
|
border-radius: 8px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.wall-empty {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.wall-empty-icon {
|
|
font-size: 42px;
|
|
color: @color4;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.wall-empty-text {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.theme-picker {
|
|
min-width: 680px;
|
|
min-height: 460px;
|
|
}
|
|
|
|
.theme-scroll {
|
|
min-height: 360px;
|
|
}
|
|
|
|
.theme-chip {
|
|
padding: 8px;
|
|
border-radius: 10px;
|
|
border: 2px solid transparent;
|
|
background-color: alpha(@color0, 0.6);
|
|
transition: all 0.2s;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.theme-chip:hover {
|
|
border: 2px solid alpha(@accent, 0.6);
|
|
}
|
|
|
|
.theme-chip.active {
|
|
border: 2px solid @accent;
|
|
}
|
|
|
|
.theme-chip-dynamic {
|
|
background-color: alpha(@accent, 0.15);
|
|
}
|
|
|
|
.theme-chip-dynamic.active {
|
|
background-color: @accent;
|
|
}
|
|
|
|
.theme-chip-dynamic.active .theme-chip-label,
|
|
.theme-chip-dynamic.active .theme-chip-icon {
|
|
color: @background;
|
|
}
|
|
|
|
.theme-chip-icon {
|
|
font-size: 16px;
|
|
color: @accent;
|
|
}
|
|
|
|
.theme-swatches {
|
|
min-height: 36px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.theme-swatch {
|
|
min-width: 10px;
|
|
}
|
|
|
|
.theme-chip-label {
|
|
font-size: 12px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.qs-side-panel {
|
|
min-width: 240px;
|
|
}
|
|
|
|
.widget-card {
|
|
padding: 12px;
|
|
}
|
|
|
|
.widget-card-header {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.widget-icon-badge {
|
|
background-color: alpha(@accent, 0.18);
|
|
border-radius: 8px;
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
color: @accent;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.widget-icon-badge label {
|
|
padding: 0;
|
|
}
|
|
|
|
.widget-card-title {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
color: @foreground;
|
|
}
|
|
|
|
.widget-card-label {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.widget-card-value {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
color: @foreground;
|
|
}
|
|
|
|
.widget-card-empty {
|
|
font-size: 12px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.widget-stat-row {
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.widget-stat-icon {
|
|
color: @color5;
|
|
font-size: 13px;
|
|
min-width: 22px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.widget-level-bar {
|
|
min-height: 6px;
|
|
}
|
|
|
|
.widget-level-bar trough {
|
|
min-height: 6px;
|
|
border-radius: 6px;
|
|
background-color: alpha(@foreground, 0.15);
|
|
}
|
|
|
|
.widget-level-bar block.filled {
|
|
border-radius: 6px;
|
|
background-color: @accent;
|
|
}
|
|
|
|
.control-center {
|
|
min-width: 360px;
|
|
}
|
|
|
|
.cc-header {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.cc-clock {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: @foreground;
|
|
}
|
|
|
|
.cc-date {
|
|
font-size: 12px;
|
|
color: @accent;
|
|
}
|
|
|
|
.cc-media {
|
|
background-color: alpha(@color0, 0.6);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.cc-media-cover {
|
|
min-width: 84px;
|
|
min-height: 84px;
|
|
border-radius: 8px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.cc-media-info {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.cc-media-title {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
color: @foreground;
|
|
}
|
|
|
|
.cc-media-artist {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.cc-media-seek {
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.cc-media-seek trough {
|
|
min-height: 4px;
|
|
border-radius: 4px;
|
|
background-color: alpha(@foreground, 0.2);
|
|
}
|
|
|
|
.cc-media-seek highlight {
|
|
border-radius: 4px;
|
|
background-color: @accent;
|
|
}
|
|
|
|
.cc-media-seek slider {
|
|
background-color: transparent;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.cc-media-controls button {
|
|
color: @color5;
|
|
font-size: 14px;
|
|
padding: 0 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.cc-media-controls button:hover {
|
|
color: @accent;
|
|
}
|
|
|
|
.cc-calendar {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.cc-calendar-month {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
color: @accent;
|
|
}
|
|
|
|
.cc-calendar-time {
|
|
font-size: 13px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.cc-calendar-grid {
|
|
font-family: "JetBrainsMono Nerd Font", monospace;
|
|
font-size: 13px;
|
|
color: @foreground;
|
|
}
|