s0wlz (Matthias Puchstein)
cbfa26afb7
- Created Jinja2 template for SwayNC CSS. - Mapped system DNA to notification states (Critical, Normal, MPRIS). - Updated documentation and repository map.
147 lines
2.5 KiB
Django/Jinja
147 lines
2.5 KiB
Django/Jinja
/* {{ scheme }} — SwayNC Theme */
|
|
/* DNA: State over Decoration */
|
|
|
|
@define-color void {{ palette.background }};
|
|
@define-color stark {{ palette.foreground }};
|
|
@define-color razor {{ palette.cursor }};
|
|
@define-color tech {{ palette.info }};
|
|
@define-color toxic {{ palette.success }};
|
|
@define-color amber {{ palette.warning }};
|
|
@define-color alert {{ ansi.bright.red }};
|
|
|
|
@define-color panel {{ ui.panel }};
|
|
@define-color border {{ ui.border }};
|
|
@define-color stealth {{ ui.stealth }};
|
|
@define-color dim {{ ui.dim }};
|
|
|
|
/* SwayNC Specific Variables */
|
|
@define-color noti-bg @panel;
|
|
@define-color noti-fg @stark;
|
|
@define-color noti-border-color @border;
|
|
@define-color noti-bg-hover @border;
|
|
@define-color noti-bg-focus @border;
|
|
@define-color noti-bg-critical @razor;
|
|
@define-color noti-fg-critical @void;
|
|
|
|
@define-color mpris-bg @panel;
|
|
@define-color mpris-fg @stark;
|
|
|
|
@define-color bg-selected @razor;
|
|
@define-color fg-selected @void;
|
|
|
|
/* Base Structure */
|
|
* {
|
|
font-family: "JetBrainsMono Nerd Font";
|
|
font-weight: 500;
|
|
}
|
|
|
|
.control-center {
|
|
background: @void;
|
|
border: 2px solid @razor;
|
|
border-radius: 0;
|
|
margin: 10px;
|
|
}
|
|
|
|
.control-center-list {
|
|
background: transparent;
|
|
}
|
|
|
|
.notification {
|
|
background: @noti-bg;
|
|
border: 1px solid @noti-border-color;
|
|
border-radius: 0;
|
|
margin: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.notification-content {
|
|
background: transparent;
|
|
}
|
|
|
|
.notification-default-action:hover {
|
|
background: @noti-bg-hover;
|
|
}
|
|
|
|
.notification-critical {
|
|
background: @noti-bg-critical;
|
|
color: @noti-fg-critical;
|
|
}
|
|
|
|
.notification-critical .notification-content {
|
|
color: @noti-fg-critical;
|
|
}
|
|
|
|
.notification-group {
|
|
background: transparent;
|
|
}
|
|
|
|
.notification-group-headers {
|
|
color: @dim;
|
|
}
|
|
|
|
.notification-group-icon {
|
|
color: @razor;
|
|
}
|
|
|
|
.mpris {
|
|
background: @mpris-bg;
|
|
border: 1px solid @border;
|
|
border-radius: 0;
|
|
margin: 5px;
|
|
}
|
|
|
|
.mpris-title {
|
|
color: @stark;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mpris-subtitle {
|
|
color: @dim;
|
|
}
|
|
|
|
.widget-title {
|
|
color: @razor;
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.widget-label {
|
|
color: @stark;
|
|
}
|
|
|
|
.widget-dnd {
|
|
color: @tech;
|
|
}
|
|
|
|
.widget-mpris {
|
|
background: transparent;
|
|
}
|
|
|
|
.widget-buttons-grid {
|
|
background: @panel;
|
|
padding: 10px;
|
|
margin: 5px;
|
|
}
|
|
|
|
.widget-buttons-grid > button {
|
|
background: @void;
|
|
border: 1px solid @border;
|
|
border-radius: 0;
|
|
color: @stark;
|
|
}
|
|
|
|
.widget-buttons-grid > button:hover {
|
|
background: @razor;
|
|
color: @void;
|
|
}
|
|
|
|
.widget-menubar > button {
|
|
background: transparent;
|
|
color: @stark;
|
|
}
|
|
|
|
.widget-menubar > button:hover {
|
|
background: @razor;
|
|
color: @void;
|
|
}
|