theme stuff
This commit is contained in:
mjallen18
@@ -2,324 +2,233 @@
|
||||
with lib;
|
||||
let
|
||||
cfg = config.mjallen.programs.waybar;
|
||||
palette = import cfg.theme.file;
|
||||
|
||||
defaultOpacity = palette.tokens.opacity or "opacity: 0.85;";
|
||||
defaultBorderRadius = palette.tokens.borderRadius or "border-radius: 1rem;";
|
||||
defaultCenterOptions =
|
||||
palette.tokens.centerOptions or ''
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.2rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
margin: 3px 0;
|
||||
'';
|
||||
borderRight =
|
||||
palette.tokens.borderRight or ''
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.2rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
margin: 3px 0;
|
||||
border-radius: 0rem 1rem 1rem 0rem;
|
||||
margin-right: 0.5rem;
|
||||
'';
|
||||
borderLeft = ''
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.2rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
margin: 3px 0;
|
||||
border-radius: 1rem 0rem 0rem 1rem;
|
||||
margin-left: 0.5rem;
|
||||
'';
|
||||
|
||||
baseStyle =
|
||||
if cfg.style.file != null then
|
||||
builtins.readFile cfg.style.file
|
||||
else
|
||||
''
|
||||
.blink_me {
|
||||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
ANIMATIONS & GLOBAL OVERRIDES
|
||||
============================================================================= */
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
color: @base08;
|
||||
}
|
||||
50% { color: @base08; }
|
||||
}
|
||||
|
||||
/* Override Stylix font settings */
|
||||
* {
|
||||
font-family:
|
||||
Jetbrains Mono Nerd Font,
|
||||
monospace;
|
||||
font-family: "Jetbrains Mono Nerd Font", monospace;
|
||||
font-size: 14px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
MAIN BAR & TOOLTIPS
|
||||
============================================================================= */
|
||||
window#waybar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#waybar {
|
||||
background: transparent;
|
||||
color: ${palette.colors.text};
|
||||
color: @base06;
|
||||
margin: 5px 5px;
|
||||
}
|
||||
|
||||
#workspaces {
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultBorderRadius}
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
margin-left: 0.6rem;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
color: ${palette.colors.primary};
|
||||
${defaultBorderRadius}
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
#workspaces button.active {
|
||||
color: ${palette.colors.info};
|
||||
${defaultBorderRadius}
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
color: ${palette.colors.info};
|
||||
${defaultBorderRadius}
|
||||
}
|
||||
|
||||
#workspaces button.focused {
|
||||
color: ${palette.colors.text};
|
||||
background: ${palette.colors.warning};
|
||||
${defaultBorderRadius}
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
color: ${palette.colors.bg};
|
||||
background: ${palette.colors.text};
|
||||
${defaultBorderRadius}
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
background: ${palette.colors.bg};
|
||||
border-color: ${palette.colors.bg};
|
||||
${defaultBorderRadius}
|
||||
border-width: 1rem;
|
||||
background: @base00;
|
||||
border-color: @base00;
|
||||
border-radius: 1rem;
|
||||
border-width: 2px; /* Reduced from 1rem which is usually too thick */
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
#window {
|
||||
color: ${palette.colors.accent};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultBorderRadius}
|
||||
${defaultCenterOptions}
|
||||
margin-left: 4rem;
|
||||
margin-right: ${toString cfg.windowOffset}rem;
|
||||
}
|
||||
|
||||
/* make window module transparent when no windows present */
|
||||
#window.empty {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#custom-power {
|
||||
color: ${palette.colors.primary};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Right-click menu styling */
|
||||
menu {
|
||||
border-radius: 15px;
|
||||
background: ${palette.colors.bg};
|
||||
color: ${palette.colors.text};
|
||||
background: @base00;
|
||||
color: @base06;
|
||||
}
|
||||
menuitem {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#custom-weather {
|
||||
color: ${palette.colors.primary};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
/* =============================================================================
|
||||
WORKSPACES
|
||||
============================================================================= */
|
||||
#workspaces {
|
||||
background-color: @base00;
|
||||
border-radius: 1rem;
|
||||
opacity: 0.85;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin: 3px 0 3px 0.6rem;
|
||||
}
|
||||
|
||||
#custom-notifications {
|
||||
color: ${palette.colors.primary};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
#workspaces button {
|
||||
color: @base0F;
|
||||
border-radius: 1rem;
|
||||
padding: 0.4rem;
|
||||
/* Border handled by stylix, but we add specific colors below */
|
||||
}
|
||||
|
||||
#custom-notifications.notify {
|
||||
color: ${palette.colors.danger};
|
||||
#workspaces button.active,
|
||||
#workspaces button:hover {
|
||||
color: @base0C;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
#workspaces button.focused {
|
||||
color: @base06;
|
||||
background: @base0A;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
color: @base00;
|
||||
background: @base06;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
WINDOW TITLE
|
||||
============================================================================= */
|
||||
#window {
|
||||
color: @base0E;
|
||||
background-color: @base00;
|
||||
opacity: 0.85;
|
||||
border-radius: 1rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin: 3px 0;
|
||||
|
||||
margin-left: 4rem;
|
||||
margin-right: 75rem; /* This is very large, likely a centering hack */
|
||||
}
|
||||
|
||||
#window.empty {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
SHARED MODULE STYLES
|
||||
============================================================================= */
|
||||
/* This block applies the standard "Nord Background" style to all modules
|
||||
to avoid repeating code for every single ID. */
|
||||
#custom-power,
|
||||
#custom-weather,
|
||||
#custom-notifications,
|
||||
#battery,
|
||||
#clock,
|
||||
#idle_inhibitor,
|
||||
#network,
|
||||
#bluetooth,
|
||||
#wireplumber,
|
||||
#keyboard-state,
|
||||
#temperature,
|
||||
#custom-left-end,
|
||||
#custom-right-end,
|
||||
#custom-lights,
|
||||
#tray {
|
||||
background-color: @base00;
|
||||
opacity: 0.85;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin: 3px 0;
|
||||
border-radius: 0; /* Default to square, rounded manually below */
|
||||
}
|
||||
|
||||
/* Common Hover Effect */
|
||||
#idle_inhibitor:hover,
|
||||
#network:hover,
|
||||
#bluetooth:hover,
|
||||
#wireplumber:hover,
|
||||
#temperature:hover,
|
||||
#custom-lights:hover {
|
||||
background: @base02;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
MODULE SPECIFIC COLORS
|
||||
============================================================================= */
|
||||
|
||||
#custom-power,
|
||||
#custom-weather,
|
||||
#custom-notifications {
|
||||
color: @base0F;
|
||||
}
|
||||
|
||||
#custom-notifications.notify { color: @base08; }
|
||||
#custom-notifications.alert {
|
||||
animation-name: blinker;
|
||||
animation-duration: 3s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation: blinker 3s linear infinite;
|
||||
}
|
||||
|
||||
#battery {
|
||||
color: ${palette.colors.accent};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
color: @base0E;
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
#clock {
|
||||
color: ${palette.colors.primary};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ------------- */
|
||||
#clock { color: @base0F; }
|
||||
|
||||
#idle_inhibitor {
|
||||
color: ${palette.colors.primary};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
color: @base0F;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
#idle_inhibitor:hover {
|
||||
background: ${palette.colors.surfaceAlt};
|
||||
}
|
||||
|
||||
#network {
|
||||
color: ${palette.colors.accent};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
color: @base0E;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#network:hover {
|
||||
background: ${palette.colors.surfaceAlt};
|
||||
}
|
||||
#bluetooth { color: @base0F; }
|
||||
|
||||
#bluetooth {
|
||||
color: ${palette.colors.primary};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#bluetooth:hover {
|
||||
background: ${palette.colors.surfaceAlt};
|
||||
}
|
||||
|
||||
#wireplumber.source {
|
||||
color: ${palette.colors.info};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
/* --- Audio source/sink --- */
|
||||
#wireplumber.source,
|
||||
#wireplumber.sink {
|
||||
color: @base0C;
|
||||
}
|
||||
|
||||
#wireplumber.source.muted {
|
||||
animation-name: blinker;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation: blinker 2s linear infinite;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
#wireplumber.source:hover {
|
||||
background: ${palette.colors.surfaceAlt};
|
||||
}
|
||||
|
||||
#wireplumber.sink {
|
||||
color: ${palette.colors.info};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#wireplumber.sink.muted {
|
||||
animation-name: blinker;
|
||||
animation-duration: 5s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation: blinker 5s linear infinite;
|
||||
}
|
||||
|
||||
#wireplumber.sink:hover {
|
||||
background: ${palette.colors.surfaceAlt};
|
||||
}
|
||||
|
||||
#keyboard-state.numlock {
|
||||
color: ${palette.colors.info};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#keyboard-state.capslock {
|
||||
color: ${palette.colors.primary};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
}
|
||||
/* --- Keyboard --- */
|
||||
#keyboard-state.numlock { color: @base0C; }
|
||||
#keyboard-state.capslock { color: @base0F; }
|
||||
|
||||
/* --- Temperature --- */
|
||||
#temperature,
|
||||
#temperature.gpu {
|
||||
color: ${palette.colors.primary};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0;
|
||||
color: @base0F;
|
||||
}
|
||||
|
||||
#temperature.gpu:hover {
|
||||
background: ${palette.colors.surfaceAlt};
|
||||
}
|
||||
|
||||
#temperature {
|
||||
color: ${palette.colors.primary};
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
/* ------------- */
|
||||
|
||||
/* --- Tray --- */
|
||||
#tray {
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${defaultCenterOptions}
|
||||
${defaultBorderRadius}
|
||||
border-radius: 1rem;
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
|
||||
/* ------------- */
|
||||
|
||||
/* =============================================================================
|
||||
DECORATIVE END CAPS & EXTRAS
|
||||
============================================================================= */
|
||||
#custom-left-end {
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${borderLeft}
|
||||
border-radius: 1rem 0 0 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
#custom-right-end {
|
||||
background-color: ${palette.colors.bg};
|
||||
${defaultOpacity}
|
||||
${borderRight}
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
#custom-lights {
|
||||
color: @base0C;
|
||||
/* Re-declaring background here to ensure specific override logic if needed */
|
||||
background-color: @base00;
|
||||
border-radius: 1rem 0 0 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
'';
|
||||
in
|
||||
@@ -596,10 +505,10 @@ in
|
||||
calendar = {
|
||||
mode = "month";
|
||||
format = {
|
||||
months = "<span color='${palette.colors.primary}'><b>{}</b></span>";
|
||||
days = "<span color='${palette.colors.primary}'><b>{}</b></span>";
|
||||
weekdays = "<span color='${palette.colors.info}'><b>{}</b></span>";
|
||||
today = "<span color='${palette.colors.success}'><b><u>{}</u></b></span>";
|
||||
months = "<span color='@base0F'><b>{}</b></span>";
|
||||
days = "<span color='@base0F'><b>{}</b></span>";
|
||||
weekdays = "<span color='@base0C'><b>{}</b></span>";
|
||||
today = "<span color='${config.lib.stylix.colors.base0B}'><b><u>{}</u></b></span>";
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user