From 2e985927af736cface9cf7cf006ae75a8ec7e8e9 Mon Sep 17 00:00:00 2001 From: Yingjie Wang Date: Thu, 28 Mar 2024 19:30:14 -0400 Subject: [PATCH] update: add custom blur waybar themes --- .../themes/ml4w-blur-custom/colored/config.sh | 2 + .../themes/ml4w-blur-custom/colored/style.css | 16 + waybar/themes/ml4w-blur-custom/config | 54 +++ .../themes/ml4w-blur-custom/mixed/config.sh | 2 + .../themes/ml4w-blur-custom/mixed/style.css | 16 + waybar/themes/ml4w-blur-custom/style.css | 434 ++++++++++++++++++ 6 files changed, 524 insertions(+) create mode 100644 waybar/themes/ml4w-blur-custom/colored/config.sh create mode 100644 waybar/themes/ml4w-blur-custom/colored/style.css create mode 100644 waybar/themes/ml4w-blur-custom/config create mode 100644 waybar/themes/ml4w-blur-custom/mixed/config.sh create mode 100644 waybar/themes/ml4w-blur-custom/mixed/style.css create mode 100644 waybar/themes/ml4w-blur-custom/style.css diff --git a/waybar/themes/ml4w-blur-custom/colored/config.sh b/waybar/themes/ml4w-blur-custom/colored/config.sh new file mode 100644 index 0000000..3a49354 --- /dev/null +++ b/waybar/themes/ml4w-blur-custom/colored/config.sh @@ -0,0 +1,2 @@ +#!/bin/bash +theme_name="ML4W Blur Custom Colored" diff --git a/waybar/themes/ml4w-blur-custom/colored/style.css b/waybar/themes/ml4w-blur-custom/colored/style.css new file mode 100644 index 0000000..f9008da --- /dev/null +++ b/waybar/themes/ml4w-blur-custom/colored/style.css @@ -0,0 +1,16 @@ +/* ----------------------------------------------------- + * Import Pywal colors + * ----------------------------------------------------- */ +@import '../../../../../.cache/wal/colors-waybar.css'; + +@define-color backgroundlight @color5; +@define-color backgrounddark @color11; +@define-color workspacesbackground1 @color5; +@define-color workspacesbackground2 @color11; +@define-color bordercolor @color11; +@define-color textcolor1 #FFFFFF; +@define-color textcolor2 #FFFFFF; +@define-color textcolor3 #FFFFFF; +@define-color iconcolor #FFFFFF; + +@import '../style.css'; diff --git a/waybar/themes/ml4w-blur-custom/config b/waybar/themes/ml4w-blur-custom/config new file mode 100644 index 0000000..fdc9278 --- /dev/null +++ b/waybar/themes/ml4w-blur-custom/config @@ -0,0 +1,54 @@ +// __ __ _ +// \ \ / /_ _ _ _| |__ __ _ _ __ +// \ \ /\ / / _` | | | | '_ \ / _` | '__| +// \ V V / (_| | |_| | |_) | (_| | | +// \_/\_/ \__,_|\__, |_.__/ \__,_|_| +// |___/ +// +// by Stephan Raabe (2023) +// ----------------------------------------------------- +// +{ + // General Settings + "layer": "top", + "margin-top": 0, + "margin-bottom": 0, + "layer": "top", + "margin-left": 0, + "margin-right": 0, + "spacing": 0, + + // Load Modules + "include": ["~/dotfiles/waybar/modules.json"], + + // Modules Left + "modules-left": [ + "custom/appmenu", + //"group/settings", + "wlr/taskbar", + //"group/quicklinks", + "hyprland/window", + "custom/empty" + ], + + // Modules Center + "modules-center": [ + "hyprland/workspaces" + ], + + // Modules Right + "modules-right": [ + "custom/updates", + "pulseaudio", + //"bluetooth", + //"battery", + "network", + "group/hardware", + //"custom/cliphist", + "idle_inhibitor", + "tray", + "custom/exit", + //"custom/ml4w-welcome", + "clock" + ] +} diff --git a/waybar/themes/ml4w-blur-custom/mixed/config.sh b/waybar/themes/ml4w-blur-custom/mixed/config.sh new file mode 100644 index 0000000..eb698ad --- /dev/null +++ b/waybar/themes/ml4w-blur-custom/mixed/config.sh @@ -0,0 +1,2 @@ +#!/bin/bash +theme_name="ML4W Blur Mixed" \ No newline at end of file diff --git a/waybar/themes/ml4w-blur-custom/mixed/style.css b/waybar/themes/ml4w-blur-custom/mixed/style.css new file mode 100644 index 0000000..09032ae --- /dev/null +++ b/waybar/themes/ml4w-blur-custom/mixed/style.css @@ -0,0 +1,16 @@ +/* ----------------------------------------------------- + * Import Pywal colors + * ----------------------------------------------------- */ +@import '../../../../../.cache/wal/colors-waybar.css'; + +@define-color backgroundlight @color8; +@define-color backgrounddark #FFFFFF; +@define-color workspacesbackground1 @color8; +@define-color workspacesbackground2 #FFFFFF; +@define-color bordercolor @color8; +@define-color textcolor1 @color8; +@define-color textcolor2 #FFFFFF; +@define-color textcolor3 #FFFFFF; +@define-color iconcolor #FFFFFF; + +@import '../style.css'; diff --git a/waybar/themes/ml4w-blur-custom/style.css b/waybar/themes/ml4w-blur-custom/style.css new file mode 100644 index 0000000..8fa90c8 --- /dev/null +++ b/waybar/themes/ml4w-blur-custom/style.css @@ -0,0 +1,434 @@ +/* + * __ __ _ ____ _ _ + * \ \ / /_ _ _ _| |__ __ _ _ __ / ___|| |_ _ _| | ___ + * \ \ /\ / / _` | | | | '_ \ / _` | '__| \___ \| __| | | | |/ _ \ + * \ V V / (_| | |_| | |_) | (_| | | ___) | |_| |_| | | __/ + * \_/\_/ \__,_|\__, |_.__/ \__,_|_| |____/ \__|\__, |_|\___| + * |___/ |___/ + * + * by Stephan Raabe (2023) + * ----------------------------------------------------- +*/ + +/* ----------------------------------------------------- + * Import Pywal colors + * ----------------------------------------------------- */ +/* @import 'style-light.css'; */ + +/* ----------------------------------------------------- + * General + * ----------------------------------------------------- */ + +* { + font-family: "Fira Sans Semibold", FontAwesome, Roboto, Helvetica, Arial, sans-serif; + border: none; + border-radius: 0px; +} + +window#waybar { + background-color: rgba(0,0,0,0.2); + border-bottom: 0px solid #ffffff; + /* color: #FFFFFF; */ + transition-property: background-color; + transition-duration: .5s; +} + +/* ----------------------------------------------------- + * Workspaces + * ----------------------------------------------------- */ + +#workspaces { + background: @workspacesbackground1; + margin: 5px 1px 6px 1px; + padding: 0px 1px; + border-radius: 15px; + border: 0px; + font-weight: bold; + font-style: normal; + opacity: 0.8; + font-size: 16px; + color: @textcolor1; +} + +#workspaces button { + padding: 0px 5px; + margin: 4px 3px; + border-radius: 15px; + border: 0px; + color: @textcolor1; + background-color: @workspacesbackground2; + transition: all 0.3s ease-in-out; + opacity: 0.4; +} + +#workspaces button.active { + color: @textcolor1; + background: @workspacesbackground2; + border-radius: 15px; + min-width: 40px; + transition: all 0.3s ease-in-out; + opacity:1.0; +} + +#workspaces button:hover { + color: @textcolor1; + background: @workspacesbackground2; + border-radius: 15px; + opacity:0.7; +} + +/* ----------------------------------------------------- + * Tooltips + * ----------------------------------------------------- */ + +tooltip { + border-radius: 10px; + background-color: @backgroundlight; + opacity:0.8; + padding:20px; + margin:0px; +} + +tooltip label { + color: @textcolor2; +} + +/* ----------------------------------------------------- + * Window + * ----------------------------------------------------- */ + +#window { + background: @backgroundlight; + margin: 8px 15px 8px 0px; + padding: 2px 10px 0px 10px; + border-radius: 12px; + color:@textcolor2; + font-size:16px; + font-weight:normal; + opacity:0.8; +} + +window#waybar.empty #window { + background-color:transparent; +} + +/* ----------------------------------------------------- + * Taskbar + * ----------------------------------------------------- */ + +#taskbar { + background: @backgroundlight; + margin: 6px 15px 6px 0px; + padding:0px; + border-radius: 15px; + font-weight: normal; + font-style: normal; + opacity:0.8; + border: 3px solid @backgroundlight; +} + +#taskbar button { + margin:0; + border-radius: 15px; + padding: 0px 5px 0px 5px; +} + +/* ----------------------------------------------------- + * Modules + * ----------------------------------------------------- */ + +.modules-left > widget:first-child > #workspaces { + margin-left: 0; +} + +.modules-right > widget:last-child > #workspaces { + margin-right: 0; +} + +/* ----------------------------------------------------- + * Custom Quicklinks + * ----------------------------------------------------- */ + +#custom-brave, +#custom-browser, +#custom-keybindings, +#custom-outlook, +#custom-filemanager, +#custom-teams, +#custom-chatgpt, +#custom-calculator, +#custom-windowsvm, +#custom-cliphist, +#custom-wallpaper, +#custom-settings, +#custom-wallpaper, +#custom-system, +#custom-waybarthemes { + margin-right: 23px; + font-size: 20px; + font-weight: bold; + opacity: 0.8; + color: @iconcolor; +} + +#custom-system { + margin-right:15px; +} + +#custom-wallpaper { + margin-right:25px; +} + +#custom-waybarthemes, #custom-settings { + margin-right:20px; +} + +#custom-ml4w-welcome { + margin-right: 15px; + background-image: url("../assets/ml4w-icon.png"); + background-repeat: no-repeat; + background-position: center; + padding-right: 24px; +} + +#custom-chatgpt { + margin-right: 15px; + background-image: url("../assets/ai-icon-20.png"); + background-repeat: no-repeat; + background-position: center; + padding-right: 24px; +} + +/* ----------------------------------------------------- + * Idle Inhibator + * ----------------------------------------------------- */ + +#idle_inhibitor { + margin-right: 15px; + font-size: 22px; + font-weight: bold; + opacity: 0.8; + color: @iconcolor; +} + +#idle_inhibitor.activated { + margin-right: 15px; + font-size: 20px; + font-weight: bold; + opacity: 0.8; + color: #dc2f2f; +} + +/* ----------------------------------------------------- + * Custom Modules + * ----------------------------------------------------- */ + +#custom-appmenu { + background-color: @backgrounddark; + font-size: 16px; + color: @textcolor1; + border-radius: 15px; + padding: 0px 10px 0px 10px; + margin: 6px 15px 6px 14px; + opacity:0.8; + border:3px solid @bordercolor; +} + +/* ----------------------------------------------------- + * Custom Exit + * ----------------------------------------------------- */ + +#custom-exit { + margin: 0px 20px 0px 0px; + padding:0px; + font-size:20px; + color: @iconcolor; +} + +/* ----------------------------------------------------- + * Custom Updates + * ----------------------------------------------------- */ + +#custom-updates { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 8px 15px 8px 0px; + opacity:0.8; +} + +#custom-updates.green { + background-color: @backgroundlight; +} + +#custom-updates.yellow { + background-color: #ff9a3c; + color: #FFFFFF; +} + +#custom-updates.red { + background-color: #dc2f2f; + color: #FFFFFF; +} + +/* ----------------------------------------------------- + * Custom Youtube + * ----------------------------------------------------- */ + +#custom-youtube { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 8px 15px 8px 0px; + opacity:0.8; +} + +/* ----------------------------------------------------- + * Hardware Group + * ----------------------------------------------------- */ + + #disk,#memory,#cpu,#language { + margin:0px; + padding:0px; + font-size:16px; + color:@iconcolor; +} + +#language { + margin-right:10px; +} + +/* ----------------------------------------------------- + * Clock + * ----------------------------------------------------- */ + +#clock { + background-color: @backgrounddark; + font-size: 16px; + color: @textcolor1; + border-radius: 15px; + padding: 1px 10px 0px 10px; + margin: 6px 15px 6px 0px; + opacity:0.8; + border:3px solid @bordercolor; +} + +/* ----------------------------------------------------- + * Pulseaudio + * ----------------------------------------------------- */ + +#pulseaudio { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 8px 15px 8px 0px; + opacity:0.8; +} + +#pulseaudio.muted { + background-color: @backgrounddark; + color: @textcolor1; +} + +/* ----------------------------------------------------- + * Network + * ----------------------------------------------------- */ + +#network { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 8px 15px 8px 0px; + opacity:0.8; +} + +#network.ethernet { + background-color: @backgroundlight; + color: @textcolor2; +} + +#network.wifi { + background-color: @backgroundlight; + color: @textcolor2; +} + +/* ----------------------------------------------------- + * Bluetooth + * ----------------------------------------------------- */ + + #bluetooth, #bluetooth.on, #bluetooth.connected { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 8px 15px 8px 0px; + opacity:0.8; +} + +#bluetooth.off { + background-color: transparent; + padding: 0px; + margin: 0px; +} + +/* ----------------------------------------------------- + * Battery + * ----------------------------------------------------- */ + +#battery { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 15px 0px 10px; + margin: 8px 15px 8px 0px; + opacity:0.8; +} + +#battery.charging, #battery.plugged { + color: @textcolor2; + background-color: @backgroundlight; +} + +@keyframes blink { + to { + background-color: @backgroundlight; + color: @textcolor2; + } +} + +#battery.critical:not(.charging) { + background-color: #f53c3c; + color: @textcolor3; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +/* ----------------------------------------------------- + * Tray + * ----------------------------------------------------- */ + +#tray { + padding: 0px 15px 0px 0px; + color: @textcolor3; +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; +}