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