dylan/birch-dots
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(style): update css to claude-style theme

Browse Source
This commit is contained in:
Dylan De Faoite
2026-08-27 22:22:29 +01:00
parent 561e478849
commit fa4f7a322d
5 changed files with 124 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.config/hypr/decoration.lua
View File

@@ -14,12 +14,11 @@ hl.config({
respect_gaps = true, respect_gaps = true,
}, },
col = { col = {
active_border = "rgba(0DB7D4FF)", active_border = "rgba(E29A6EFF)",
inactive_border = "rgba(31313633)", inactive_border = "rgba(2C252033)",
}, },
}, },
}) })
hl.config({ hl.config({
dwindle = { dwindle = {
preserve_split = true, preserve_split = true,
@@ -27,7 +26,6 @@ hl.config({
smart_resizing = false, smart_resizing = false,
}, },
}) })
hl.config({ hl.config({
decoration = { decoration = {
rounding = 10, rounding = 10,
@@ -35,7 +33,7 @@ hl.config({
enabled = true, enabled = true,
range = 16, range = 16,
render_power = 2, render_power = 2,
color = "rgba(00000040)", color = "rgba(1A161340)",
}, },
blur = { blur = {
enabled = true, enabled = true,
@@ -45,18 +43,14 @@ hl.config({
}, },
}, },
}) })
hl.config({ hl.config({
animations = { animations = {
enabled = true, enabled = true,
}, },
}) })
hl.curve("myBezier", { type = "bezier", points = { {0.05, 0.9}, {0.1, 1.05} } }) hl.curve("myBezier", { type = "bezier", points = { {0.05, 0.9}, {0.1, 1.05} } })
hl.animation({ leaf = "windows", enabled = true, speed = 2, bezier = "myBezier" }) hl.animation({ leaf = "windows", enabled = true, speed = 2, bezier = "myBezier" })
hl.animation({ leaf = "windowsOut", enabled = true, speed = 2, bezier = "myBezier", style = "popin 80%" }) hl.animation({ leaf = "windowsOut", enabled = true, speed = 2, bezier = "myBezier", style = "popin 80%" })
hl.animation({ leaf = "border", enabled = true, speed = 3, bezier = "myBezier" }) hl.animation({ leaf = "border", enabled = true, speed = 3, bezier = "myBezier" })
hl.animation({ leaf = "fade", enabled = true, speed = 2, bezier = "myBezier" }) hl.animation({ leaf = "fade", enabled = true, speed = 2, bezier = "myBezier" })
hl.animation({ leaf = "workspaces", enabled = true, speed = 2, bezier = "myBezier" }) hl.animation({ leaf = "workspaces", enabled = true, speed = 2, bezier = "myBezier" })

43
.config/waybar/scripts/mediaplayer.sh Executable file
View File

@@ -0,0 +1,43 @@
#!/usr/bin/env bash
#
# waybar custom module: shows currently playing media, mac-menu-bar style.
# Outputs a single JSON line: {"text":..., "tooltip":..., "class":..., "alt":...}
# waybar re-runs this on an interval (set in config.jsonc) and re-renders.
# --status-format lets us build one compact string per call instead of
# separate playerctl invocations for title/artist/status (fewer subprocess
# spawns = faster polling, matters since waybar calls this every ~1s).
STATUS=$(playerctl -a metadata --format '{{status}}|{{artist}}|{{title}}|{{playerName}}' 2>/dev/null | head -n1)
if [ -z "$STATUS" ]; then
# No MPRIS players running at all -> render nothing (empty text hides
# the module if `"class": "hidden"` is styled to display:none, but
# simplest is just an empty text with no tooltip).
echo '{"text": "", "tooltip": "No media playing", "class": "hidden"}'
exit 0
fi
# IFS='|' read splits our pipe-delimited format string into vars.
IFS='|' read -r PSTATUS ARTIST TITLE PLAYER <<< "$STATUS"
# Playing vs Paused get different CSS classes so you can dim the paused state.
case "$PSTATUS" in
Playing) ICON="" ;; # nerd-font play glyph
Paused) ICON="" ;; # nerd-font pause glyph
*) ICON="" ;;
esac
# Truncate long titles so the bar doesn't blow out — cut at 30 chars,
# append an ellipsis. This is bash parameter expansion, not a subprocess.
LABEL="${ARTIST} - ${TITLE}"
if [ "${#LABEL}" -gt 32 ]; then
LABEL="${LABEL:0:29}..."
fi
# Escape double quotes so we don't break the JSON if a title contains one.
LABEL_ESC=$(printf '%s' "$LABEL" | sed 's/"/\\"/g')
TOOLTIP_ESC=$(printf '%s — %s\n(%s)' "$ARTIST" "$TITLE" "$PLAYER" | sed 's/"/\\"/g' | sed ':a;N;$!ba;s/\n/\\n/g')
CLASS="media-${PSTATUS,,}" # bash ${var,,} lowercases -> "media-playing" / "media-paused"
echo "{\"text\": \"${ICON} ${LABEL_ESC}\", \"tooltip\": \"${TOOLTIP_ESC}\", \"class\": \"${CLASS}\", \"alt\": \"${PSTATUS}\"}"

115
.config/waybar/style.css
View File

@@ -1,32 +1,33 @@
/* ============================================================ /* ============================================================
WAYBAR STYLE — Dark Industrial / Refined Utility WAYBAR STYLE — Cream Claude / Warm Minimal
Palette: deep charcoal base, amber accents, cool greys Palette: warm cream base, clay/terracotta accent, soft browns
============================================================ */ ============================================================ */
/* ── Root Variables ───────────────────────────────────────── */ /* ── Root Variables ───────────────────────────────────────── */
* { * {
font-family: "JetBrainsMono Nerd Font Propo"; font-family: "Inter", "SF Pro Display", "Segoe UI", sans-serif;
font-size: 13px; font-size: 13px;
font-weight: 400;
border: none; border: none;
border-radius: 0; border-radius: 0;
} }
/* ── Bar ──────────────────────────────────────────────────── */ /* ── Bar ──────────────────────────────────────────────────── */
window#waybar { window#waybar {
background: rgba(10, 10, 14, 0); background: rgba(26, 22, 19, 0.55);
color: #dcdce8; color: #e8ddd0;
} }
/* ── Tooltip ──────────────────────────────────────────────── */ /* ── Tooltip ──────────────────────────────────────────────── */
tooltip { tooltip {
background: #0e0e12; background: rgba(30, 25, 21, 0.92);
border: 1px solid rgba(255, 180, 60, 0.35); border: 1px solid rgba(196, 108, 74, 0.4);
color: #dcdce8; color: #e8ddd0;
padding: 6px 10px; padding: 6px 10px;
} }
tooltip label { tooltip label {
color: #dcdce8; color: #e8ddd0;
} }
/* ── Shared Module Base ───────────────────────────────────── */ /* ── Shared Module Base ───────────────────────────────────── */
@@ -41,53 +42,42 @@ tooltip label {
#custom-power { #custom-power {
padding: 6px 12px; padding: 6px 12px;
margin: 5px 0; margin: 5px 0;
color: #dcdce8; color: #e8ddd0;
background: rgba(10, 10, 14, 0.3); background: rgba(44, 37, 32, 0.5);
transition: color 0.2s ease, background 0.2s ease; transition: color 0.2s ease, background 0.2s ease;
} }
/* ── Separator dots between modules ──────────────────────── */
#cpu,
#memory,
#pulseaudio,
#bluetooth,
#custom-micmute,
#battery {
border-left: 1px solid rgba(255, 255, 255, 0);
}
/* ═══════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════
LEFT — System Info: Clock · CPU · Memory LEFT — System Info: Clock · CPU · Memory
═══════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════ */
#clock { #clock {
font-family: "JetBrainsMono Nerd Font Propo"; font-weight: 500;
font-weight: 400;
font-size: 12.5px; font-size: 12.5px;
color: #f0de9c; color: #e29a6e;
letter-spacing: 0.04em; letter-spacing: 0.03em;
padding-left: 0.4em; padding-left: 0.4em;
border-left: 3px solid rgba(255, 180, 60, 0.3); border-left: 3px solid rgba(226, 154, 110, 0.5);
margin-left: 8px; margin-left: 8px;
} }
#cpu { #cpu {
color: #b8d8ee; color: #c9baa8;
} }
#cpu:hover { #cpu:hover {
color: #d8f0ff; color: #f0e6d8;
background: rgba(160, 196, 216, 0.14); background: rgba(226, 154, 110, 0.16);
} }
#memory { #memory {
color: #b0d4be; color: #c9baa8;
} }
#memory:hover { #memory:hover {
color: #ceeede; color: #f0e6d8;
background: rgba(157, 191, 173, 0.14); background: rgba(180, 156, 120, 0.2);
} }
@@ -102,12 +92,11 @@ tooltip label {
} }
#workspaces button { #workspaces button {
font-family: 'JetBrains Nerd Font Propo';
font-size: 12px; font-size: 12px;
padding: 2px 10px; padding: 2px 10px;
margin: 4px 2px; margin: 4px 2px;
color: #6e6e88; color: #8a7a68;
background: rgba(255, 255, 255, 0.05); background: rgba(232, 221, 208, 0.08);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 3px; border-radius: 3px;
transition: all 0.15s ease; transition: all 0.15s ease;
@@ -115,22 +104,22 @@ tooltip label {
} }
#workspaces button:hover { #workspaces button:hover {
color: #c0c0d8; color: #e8ddd0;
background: rgba(255, 255, 255, 0.1); background: rgba(232, 221, 208, 0.14);
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(232, 221, 208, 0.2);
} }
#workspaces button.active { #workspaces button.active {
color: #f0c060; color: #e29a6e;
background: rgba(255, 180, 60, 0.14); background: rgba(226, 154, 110, 0.18);
border-color: rgba(255, 180, 60, 0.5); border-color: rgba(226, 154, 110, 0.55);
font-weight: 600; font-weight: 600;
} }
#workspaces button.urgent { #workspaces button.urgent {
color: #f08080; color: #d9695a;
background: rgba(240, 80, 80, 0.15); background: rgba(217, 105, 90, 0.18);
border-color: rgba(240, 80, 80, 0.45); border-color: rgba(217, 105, 90, 0.5);
} }
@@ -149,61 +138,61 @@ tooltip label {
#tray > .needs-attention { #tray > .needs-attention {
-gtk-icon-effect: highlight; -gtk-icon-effect: highlight;
background-color: rgba(240, 120, 60, 0.25); background-color: rgba(196, 108, 74, 0.25);
} }
/* ── Audio ────────────────────────────────────────────────── */ /* ── Audio ────────────────────────────────────────────────── */
#pulseaudio { #pulseaudio {
color: #c4bce8; color: #c9a68c;
} }
#pulseaudio:hover { #pulseaudio:hover {
color: #e0d8ff; color: #f0e6d8;
background: rgba(176, 168, 216, 0.14); background: rgba(201, 166, 140, 0.16);
} }
/* ── Bluetooth ────────────────────────────────────────────── */ /* ── Bluetooth ────────────────────────────────────────────── */
#bluetooth { #bluetooth {
color: #90c8f0; color: #9ab4c4;
} }
#bluetooth.connected { #bluetooth.connected {
color: #70d8ff; color: #a8c8dc;
} }
#bluetooth:hover { #bluetooth:hover {
background: rgba(128, 184, 224, 0.14); background: rgba(154, 180, 196, 0.16);
} }
/* ── Microphone Mute ──────────────────────────────────────── */ /* ── Microphone Mute ──────────────────────────────────────── */
#custom-micmute { #custom-micmute {
color: #b0d4be; color: #c9baa8;
} }
#custom-micmute.muted { #custom-micmute.muted {
color: #585870; color: #6e6055;
} }
#custom-micmute:hover { #custom-micmute:hover {
background: rgba(157, 191, 173, 0.14); background: rgba(201, 186, 168, 0.16);
} }
/* ── Battery ──────────────────────────────────────────────── */ /* ── Battery ──────────────────────────────────────────────── */
#battery { #battery {
color: #b8dc98; color: #a8bc90;
} }
#battery.charging, #battery.charging,
#battery.plugged { #battery.plugged {
color: #d4f098; color: #c0d4a0;
} }
#battery.warning:not(.charging) { #battery.warning:not(.charging) {
color: #eecb68; color: #dcb06a;
} }
#battery.critical:not(.charging) { #battery.critical:not(.charging) {
color: #f07060; color: #e0796a;
animation: battery-pulse 1.5s ease-in-out infinite; animation: battery-pulse 1.5s ease-in-out infinite;
} }
@@ -220,19 +209,19 @@ tooltip label {
} }
#battery:hover { #battery:hover {
background: rgba(168, 204, 136, 0.14); background: rgba(168, 188, 144, 0.16);
} }
/* ── Power Button ─────────────────────────────────────────── */ /* ── Power Button ─────────────────────────────────────────── */
#custom-power { #custom-power {
color: #d07070; color: #e29a6e;
font-size: 14px; font-size: 14px;
padding: 2px 14px 2px 12px; padding: 2px 14px 2px 12px;
margin-right: 8px; margin-right: 8px;
border-right: 3px solid rgba(255, 0, 0, 0.3); border-right: 3px solid rgba(196, 108, 74, 0.4);
} }
#custom-power:hover { #custom-power:hover {
color: #f09090; color: #c0392b;
background: rgba(200, 60, 60, 0.2); background: rgba(196, 108, 74, 0.2);
} }

41
.config/wofi/style.css
View File

@@ -1,50 +1,43 @@
/* ~/.config/wofi/style.css */ /* ~/.config/wofi/style.css */
@define-color base rgba(26, 22, 19, 0.75);
@define-color base #1e1e2e; @define-color mantle rgba(20, 17, 14, 0.7);
@define-color mantle #181825; @define-color surface rgba(232, 221, 208, 0.1);
@define-color surface #313244; @define-color overlay #8a7a68;
@define-color overlay #6c7086; @define-color text #e8ddd0;
@define-color text #cdd6f4; @define-color subtext #c9baa8;
@define-color subtext #a6adc8; @define-color accent #e29a6e;
@define-color blue #89b4fa; @define-color accent2 #c46c4a;
@define-color lavndr #b4befe;
window { window {
background-color: transparent; background-color: transparent;
font-family: "JetBrainsMono Nerd Font", "Inter", sans-serif; font-family: "Inter", "SF Pro Display", "Segoe UI", sans-serif;
font-size: 14px; font-size: 14px;
} }
#outer-box { #outer-box {
background-color: @base; background-color: @base;
border: 2px solid @surface; border: 1px solid rgba(226, 154, 110, 0.35);
border-radius: 14px; border-radius: 14px;
padding: 12px; padding: 12px;
} }
#input { #input {
background-color: @mantle; background-color: @mantle;
color: @text; color: @text;
border: 1px solid @surface; border: 1px solid rgba(232, 221, 208, 0.12);
border-radius: 10px; border-radius: 10px;
padding: 10px 14px; padding: 10px 14px;
margin-bottom: 10px; margin-bottom: 10px;
caret-color: @blue; caret-color: @accent;
} }
#input:focus { #input:focus {
border-color: @blue; border-color: @accent;
} }
#scroll { #scroll {
margin: 0; margin: 0;
border: none; border: none;
} }
#inner-box { #inner-box {
background-color: transparent; background-color: transparent;
} }
#entry { #entry {
padding: 8px 10px; padding: 8px 10px;
border-radius: 8px; border-radius: 8px;
@@ -52,32 +45,26 @@ window {
color: @subtext; color: @subtext;
transition: background-color 120ms ease, color 120ms ease; transition: background-color 120ms ease, color 120ms ease;
} }
#entry:selected, #entry:selected,
#entry:hover { #entry:hover {
background-color: @surface; background-color: @surface;
color: @text; color: @text;
outline: none; outline: none;
} }
#entry:selected { #entry:selected {
box-shadow: inset 3px 0 0 0 @lavndr; box-shadow: inset 3px 0 0 0 @accent;
} }
/* node type `image`, not `img` — this is the one that actually moves the icon */ /* node type `image`, not `img` — this is the one that actually moves the icon */
#entry image { #entry image {
margin-right: 18px; margin-right: 18px;
-gtk-icon-transform: scale(0.9); -gtk-icon-transform: scale(0.9);
} }
#entry #text { #entry #text {
color: inherit; color: inherit;
} }
#entry:selected #text { #entry:selected #text {
font-weight: 600; font-weight: 600;
} }
#unselected { #unselected {
color: @subtext; color: @subtext;
} }

35
.config/wofi/wallpaper.css
View File

@@ -1,61 +1,50 @@
/* wallpaper.sh picker — dark glass, cyan accent */ /* wallpaper.sh picker — dark glass, terracotta accent */
window { window {
background-color: rgba(16, 18, 27, 0.88); background-color: rgba(26, 22, 19, 0.85);
border: 1px solid rgba(122, 162, 247, 0.35); border: 1px solid rgba(226, 154, 110, 0.35);
border-radius: 16px; border-radius: 16px;
font-family: "JetBrainsMono Nerd Font", monospace; font-family: "Inter", "SF Pro Display", "Segoe UI", sans-serif;
} }
#input { #input {
margin: 12px; margin: 12px;
padding: 10px 14px; padding: 10px 14px;
border: 1px solid rgba(122, 162, 247, 0.25); border: 1px solid rgba(226, 154, 110, 0.25);
border-radius: 10px; border-radius: 10px;
background-color: rgba(26, 29, 42, 0.9); background-color: rgba(20, 17, 14, 0.85);
color: #c0caf5; color: #e8ddd0;
font-size: 15px; font-size: 15px;
} }
#input:focus { #input:focus {
border-color: rgba(125, 207, 255, 0.8); border-color: rgba(226, 154, 110, 0.8);
} }
#inner-box { #inner-box {
margin: 6px 12px 12px 12px; margin: 6px 12px 12px 12px;
background-color: transparent; background-color: transparent;
} }
#outer-box { #outer-box {
background-color: transparent; background-color: transparent;
} }
#scroll { #scroll {
margin: 0px; margin: 0px;
} }
#entry { #entry {
margin: 6px; margin: 6px;
padding: 6px; padding: 6px;
border: 2px solid transparent; border: 2px solid transparent;
border-radius: 12px; border-radius: 12px;
background-color: rgba(36, 40, 59, 0.5); background-color: rgba(44, 37, 32, 0.5);
} }
#entry:selected { #entry:selected {
border-color: #7dcfff; border-color: #e29a6e;
background-color: rgba(125, 207, 255, 0.15); background-color: rgba(226, 154, 110, 0.15);
} }
#entry image { #entry image {
border-radius: 8px; border-radius: 8px;
} }
#text { #text {
color: #c0caf5; color: #c9baa8;
margin: 0px 4px; margin: 0px 4px;
} }
#entry:selected #text { #entry:selected #text {
color: #ffffff; color: #ffffff;
} }