From 3e9f4e4f1f7b41e7c831b25448d6154f70b964c5 Mon Sep 17 00:00:00 2001 From: Yingjie Wang Date: Wed, 28 Aug 2024 10:41:58 -0400 Subject: [PATCH] new: meow-blur-laptop theme --- .../themes/meow-blur-laptop/colored/config.sh | 2 + .../themes/meow-blur-laptop/colored/style.css | 16 + waybar/themes/meow-blur-laptop/config | 127 +++++ .../themes/meow-blur-laptop/mixed/config.sh | 2 + .../themes/meow-blur-laptop/mixed/style.css | 16 + waybar/themes/meow-blur-laptop/style.css | 507 ++++++++++++++++++ 6 files changed, 670 insertions(+) create mode 100644 waybar/themes/meow-blur-laptop/colored/config.sh create mode 100644 waybar/themes/meow-blur-laptop/colored/style.css create mode 100644 waybar/themes/meow-blur-laptop/config create mode 100644 waybar/themes/meow-blur-laptop/mixed/config.sh create mode 100644 waybar/themes/meow-blur-laptop/mixed/style.css create mode 100644 waybar/themes/meow-blur-laptop/style.css diff --git a/waybar/themes/meow-blur-laptop/colored/config.sh b/waybar/themes/meow-blur-laptop/colored/config.sh new file mode 100644 index 0000000..0da6448 --- /dev/null +++ b/waybar/themes/meow-blur-laptop/colored/config.sh @@ -0,0 +1,2 @@ +#!/bin/bash +theme_name="MEOW Blur Colored Laptop" diff --git a/waybar/themes/meow-blur-laptop/colored/style.css b/waybar/themes/meow-blur-laptop/colored/style.css new file mode 100644 index 0000000..414f780 --- /dev/null +++ b/waybar/themes/meow-blur-laptop/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 @foreground; +@define-color textcolor2 @foreground; +@define-color textcolor3 @foreground; +@define-color iconcolor @foreground; + +@import '../style.css'; diff --git a/waybar/themes/meow-blur-laptop/config b/waybar/themes/meow-blur-laptop/config new file mode 100644 index 0000000..4c4f19f --- /dev/null +++ b/waybar/themes/meow-blur-laptop/config @@ -0,0 +1,127 @@ +// __ __ _ +// \ \ / /_ _ _ _| |__ __ _ _ __ +// \ \ /\ / / _` | | | | '_ \ / _` | '__| +// \ V V / (_| | |_| | |_) | (_| | | +// \_/\_/ \__,_|\__, |_.__/ \__,_|_| +// |___/ +// +// by Stephan Raabe (2023) +// ----------------------------------------------------- +// +[{ + // General Settings + "layer": "top", + "output": ["eDP-1", "DP-1"], + "margin-top": 0, + "margin-bottom": 0, + "layer": "top", + "margin-left": 0, + "margin-right": 0, + "spacing": 0, + + // Load Modules + "include": ["~/dotfiles/waybar/themes/meow-blur/modules.json"], + + // Modules Left + "modules-left": [ + "custom/appmenuicon", + "hyprland/workspaces", + //"custom/appmenu", + //"group/settings", + "wlr/taskbar", + //"group/quicklinks", + "hyprland/window", + "custom/empty" + ], + + // Modules Center + "modules-center": [ + "group/time" + ], + + // Modules Right + "modules-right": [ + "custom/updates", + "group/hardware", + "group/hardware2", + "battery", + "battery#charging", + "tray", + "group/power" + ] +}, { + // General Settings + "layer": "top", + "output": ["HDMI-A-1"], + "margin-top": 0, + "margin-bottom": 0, + "layer": "top", + "margin-left": 0, + "margin-right": 0, + "spacing": 0, + + // Load Modules + "include": ["~/dotfiles/waybar/themes/meow-blur/modules.json"], + + // Modules Left + "modules-left": [ + "custom/appmenuicon", + "hyprland/workspaces", + "wlr/taskbar", + "hyprland/window", + "custom/empty" + ], + + // Modules Center + // "modules-center": [ + // "clock" + // ], + + // Modules Right + "modules-right": [ + "tray", + "custom/events" + ] +},{ + // General Settings + "layer": "top", + "output": ["DP-2"], + "margin-top": 0, + "margin-bottom": 0, + "layer": "top", + "margin-left": 0, + "margin-right": 0, + "spacing": 0, + + // Load Modules + "include": ["~/dotfiles/waybar/themes/meow-blur/modules.json"], + + // Modules Left + "modules-left": [ + "custom/appmenuicon", + "hyprland/workspaces", + //"custom/appmenu", + //"group/settings", + "wlr/taskbar", + //"group/quicklinks", + "hyprland/window", + "custom/empty" + ], + + // Modules Center + "modules-center": [ + "custom/events" + ], + + // Modules Right + "modules-right": [ + "custom/updates", + "group/hardware", + "group/hardware2", + "battery", + "battery#charging", + "tray", + "group/power" + ] +},] + diff --git a/waybar/themes/meow-blur-laptop/mixed/config.sh b/waybar/themes/meow-blur-laptop/mixed/config.sh new file mode 100644 index 0000000..07851d6 --- /dev/null +++ b/waybar/themes/meow-blur-laptop/mixed/config.sh @@ -0,0 +1,2 @@ +#!/bin/bash +theme_name="MEOW Blur Mixed Laptop" diff --git a/waybar/themes/meow-blur-laptop/mixed/style.css b/waybar/themes/meow-blur-laptop/mixed/style.css new file mode 100644 index 0000000..09032ae --- /dev/null +++ b/waybar/themes/meow-blur-laptop/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/meow-blur-laptop/style.css b/waybar/themes/meow-blur-laptop/style.css new file mode 100644 index 0000000..63db309 --- /dev/null +++ b/waybar/themes/meow-blur-laptop/style.css @@ -0,0 +1,507 @@ +/* + * __ __ _ ____ _ _ + * \ \ / /_ _ _ _| |__ __ _ _ __ / ___|| |_ _ _| | ___ + * \ \ /\ / / _` | | | | '_ \ / _` | '__| \___ \| __| | | | |/ _ \ + * \ V V / (_| | |_| | |_) | (_| | | ___) | |_| |_| | | __/ + * \_/\_/ \__,_|\__, |_.__/ \__,_|_| |____/ \__|\__, |_|\___| + * |___/ |___/ + * + * by Stephan Raabe (2023) + * ----------------------------------------------------- +*/ + +/* ----------------------------------------------------- + * Import Pywal colors + * ----------------------------------------------------- */ +/* @import 'style-light.css'; */ + +/* ----------------------------------------------------- + * General + * ----------------------------------------------------- */ + +* { + font-family: "Fira Code Nerd Font", "Noto Sans CJK SC"; + font-weight: 700; + border: none; + border-radius: 0px; +} + +window#waybar { + background-color: rgba(0,0,0,0.1); + border-bottom: 0px solid #ffffff; + /* color: #FFFFFF; */ + transition-property: background-color; + transition-duration: .5s; +} + +/* ----------------------------------------------------- + * Workspaces + * ----------------------------------------------------- */ + +#workspaces { + background: @workspacesbackground1; + margin: 8px 10px 8px 0px; + padding: 0px 1px; + border-radius: 10px; + border: 0px; + font-weight: bold; + font-style: normal; + opacity: 0.8; + font-size: 14px; + color: @textcolor1; +} + +#workspaces button { + padding: 0px 5px; + margin: 3px; + border-radius: 15px; + border: 0px; + color: @textcolor1; + background: @workspacesbackground2; + transition: all 0.3s ease-in-out; + opacity: 0.4; +} + +#workspaces button.empty { + border-radius: 15px; + border: 0px; + color: @textcolor1; + background: transparent; + transition: all 0.3s ease-in-out; + opacity: 0.5; +} + +#workspaces button:hover { + color: @textcolor1; + background: @workspacesbackground2; + border-radius: 10px; + opacity:0.7; +} + +#workspaces button.active { + color: @textcolor1; + background: @workspacesbackground2; + border-radius: 15px; + min-width: 30px; + transition: all 0.3s ease-in-out; + opacity:1.0; +} + +/* ----------------------------------------------------- + * Tooltips + * ----------------------------------------------------- */ + +tooltip { + border-radius: 10px; + background-color: @backgroundlight; + opacity:0.8; + padding:20px; + margin:0px; +} + +tooltip label { + color: @textcolor2; +} + +/* ----------------------------------------------------- + * Window + * ----------------------------------------------------- */ + +#window { + font-family: "Fira Code Semibold"; + background: @backgroundlight; + margin: 8px 10px 8px 0px; + padding: 0px 8px 0px 8px; + border-radius: 10px; + color:@textcolor2; + font-size: 14px; + font-weight:normal; + opacity:0.8; +} + +window#waybar.empty #window { + background-color:transparent; +} + +/* ----------------------------------------------------- + * Taskbar + * ----------------------------------------------------- */ + +#taskbar { + background: @backgroundlight; + margin: 8px 10px 8px 0px; + padding:0px; + border-radius: 10px; + font-weight: normal; + font-style: normal; + opacity:0.8; + border: 3px solid @backgroundlight; +} + +#taskbar button { + margin:0; + border-radius: 10px; + padding: 0px 5px 0px 5px; + opacity: 0.7; +} + +#taskbar button.active { + background: @workspacesbackground2; + border-radius: 10px; + opacity:1.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: 16px; + font-weight: bold; + opacity: 0.8; + color: @iconcolor; +} + +#idle_inhibitor.activated { + margin-right: 10px; + font-size: 20px; + font-weight: bold; + opacity: 0.8; + color: #dc2f2f; +} + +/* ----------------------------------------------------- + * Custom Modules + * ----------------------------------------------------- */ + +#custom-appmenu, #custom-appmenuicon { + background-color: @backgrounddark; + font-size: 14px; + color: @textcolor1; + border-radius: 10px; + padding: 0px 10px 0px 10px; + margin: 8px 10px 8px 10px; + opacity:0.8; + /* border:3px solid @bordercolor; */ +} + +#custom-appmenuicon { + padding-right: 12px; + padding-left: 8px; +} + +/* ----------------------------------------------------- + * Custom Exit + * ----------------------------------------------------- */ + +#custom-exit { + margin: 8px 10px 8px 0px; + padding:0px 14px 0px 10px; + font-size: 14px; + color: @iconcolor; + background: @backgrounddark; + border-radius: 10px; + opacity: 0.8; +} + +/* ----------------------------------------------------- + * Custom Updates + * ----------------------------------------------------- */ + +#custom-updates { + background-color: @backgroundlight; + font-size: 14px; + color: @textcolor2; + border-radius: 10px; + padding: 2px 10px 0px 10px; + margin: 8px 10px 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: 14px; + color: @textcolor2; + border-radius: 10px; + padding: 2px 10px 0px 10px; + margin: 8px 15px 8px 0px; + opacity:0.8; +} + +/* ----------------------------------------------------- + * Hardware Group + * ----------------------------------------------------- */ + + /* #disk,#memory,#cpu,#language { + background-color: @backgroundlight; + font-size: 14px; + color: @textcolor2; + border-radius: 10px; + padding: 2px 10px 0px 10px; + margin: 8px 10px 8px 0px; + opacity:0.8; +} */ + +/* #cpu { + color: @color2; +} */ + +#cpu.warning,#memory.warning{ + color: #ff9800; +} + +#cpu.critical,#memory.warning{ + color: #f44336; +} + +#hardware,#hardware2 { + background-color: @backgroundlight; + font-size: 14px; + color: @textcolor2; + border-radius: 10px; + padding: 0px 10px 0px 10px; + margin: 8px 10px 8px 0px; + opacity:0.8; +} + +#custom-div { + font-weight: 900; + padding: 0px 2px; + color: @color2; + font-size: 18px; +} + +#language { + margin-right:10px; +} + +/* ----------------------------------------------------- + * Clock + * ----------------------------------------------------- */ + +#clock { + background-color: @backgroundlight; + font-size: 14px; + color: @textcolor1; + border-radius: 10px; + padding: 0px 8px 0px 8px; + margin: 8px 10px 8px 0px; + opacity:0.8; + /* border:3px solid @bordercolor; */ +} + +#custom-events { + background-color: @backgroundlight; + font-size: 14px; + color: @textcolor1; + border-radius: 10px; + padding: 0px 8px 0px 8px; + margin: 8px 10px 8px 0px; + opacity:0.8; + /* border:3px solid @bordercolor; */ +} + +/* ----------------------------------------------------- + * Pulseaudio + * ----------------------------------------------------- */ + +#pulseaudio { + /* background-color: @backgroundlight; */ + font-size: 14px; + color: @textcolor2; + /* border-radius: 10px; */ + /* padding: 0px 10px 0px 10px; */ + /* margin: 8px 10px 8px 0px; */ + /* opacity:0.8; */ +} + +#pulseaudio.muted { + /* background-color: @backgrounddark; */ + color: @textcolor1; +} + +#systems { + background-color: @backgroundlight; + font-size: 14px; + color: @textcolor2; + border-radius: 10px; + padding: 0px 10px 0px 10px; + margin: 8px 10px 8px 0px; + opacity:0.8; +} + +/* ----------------------------------------------------- + * Network + * ----------------------------------------------------- */ + +#network { + /* background-color: @backgroundlight; */ + font-size: 14px; + color: @textcolor2; + /* border-radius: 10px; */ + /* padding: 2px 2px 0px 10px; */ + /* margin: 8px 10px 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: 14px; + color: @textcolor2; + border-radius: 10px; + padding: 2px 10px 0px 10px; + margin: 8px 10px 8px 0px; + /* opacity:0.8; */ +} + +#bluetooth.off { + background-color: transparent; + padding: 0px; + margin: 0px; +} + +/* ----------------------------------------------------- + * Battery + * ----------------------------------------------------- */ + +#battery { + background-color: @backgroundlight; + font-size: 14px; + color: @textcolor2; + border-radius: 10px; + padding: 0px 10px 0px 10px; + margin: 8px 10px 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 10px 0px 10px; + color: @textcolor3; + background-color: @backgroundlight; + font-size: 14px; + border-radius: 10px; + margin: 8px 10px 8px 0px; + opacity:0.8; +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; +}