From 517b4499e1a14b2ecebc8208e8f68f0acb6d8b42 Mon Sep 17 00:00:00 2001 From: Joakim Hulthe Date: Sun, 12 May 2024 23:05:31 +0200 Subject: [PATCH] More eww styling --- tree/.config/eww/eww.scss | 81 +++++++++++++++++------------ tree/.config/eww/eww.yuck | 43 +++++++++++---- tree/.config/hypr/hyprland.conf.tpl | 6 --- 3 files changed, 82 insertions(+), 48 deletions(-) diff --git a/tree/.config/eww/eww.scss b/tree/.config/eww/eww.scss index 244aa3e..949cce4 100644 --- a/tree/.config/eww/eww.scss +++ b/tree/.config/eww/eww.scss @@ -1,9 +1,9 @@ -$text: #f6daa8; -$highlight1: #4e8172; -$highlight2: #679a8b; -$background: #23231b; +$text: #e0c1c1; +$highlight1: #fdab70; +$highlight2: white; +$background: #0f0f0f; +$lowlight2: #272727; $lowlight1: black; -$lowlight2: #1d1f21; $transparent: rgba(#000000, 0.0); *{ @@ -13,19 +13,24 @@ $transparent: rgba(#000000, 0.0); } window { - background: rgba($background, 0.85); - border-radius: 15px; +} + +.sidebar { + margin-top: 10px; + margin-left: 5px; + background: rgba($background, 1.0); + border-radius: 30px; + margin-bottom: 10px; } .workspace { font-size: 18px; - font-weight: 300; - border: solid $highlight1 1px; + font-weight: 400; + border: dashed $highlight1 1px; background: $lowlight1; border-radius: 30px; padding-top: 3px; padding-bottom: 5px; - margin: 8px; margin-top: 3px; margin-bottom: 3px; box-shadow: 0 0px 5px 1px #06060b; @@ -42,22 +47,22 @@ window { } .bottom { - background-image: linear-gradient(to right, $transparent 40%, $highlight1 40%, $highlight1 60%, $transparent 60% ); + //background-image: linear-gradient(to right, $transparent 40%, $highlight1 40%, $highlight1 60%, $transparent 60% ); margin-bottom: 2px; } .thingy { - border: solid $highlight1 2px; - border-top: solid $highlight1 1px; - border-bottom: solid $highlight2 3px; + //border: solid $highlight1 2px; + //border-top: solid $highlight1 1px; + //border-bottom: solid $highlight2 3px; //border-bottom: dotted $highlight1 6px; - color: $highlight1; - background: $lowlight1; - border-radius: 30px; + //color: $highlight1; + //background: $lowlight1; + //border-radius: 30px; padding-top: 0.5em; - padding-bottom: 0.4em; - margin-top: 10px; + padding-bottom: 0.5em; min-height: 20px; + border-top: solid $highlight1 2px; } scale trough { @@ -89,16 +94,15 @@ scale trough { .vpn { font-size: 40px; - color: $highlight1; - border-color: green; margin: 2px; margin-top: -10px; - transition: all 0.2s; } .vpn label { margin-top: -5px; margin-bottom: -5px; + transition: color 0.5s; + color: green; } .vpn:hover { @@ -109,35 +113,48 @@ scale trough { background-color: $highlight1; } -.vpn.connecting { - border-color: orange; +.vpn.connecting label { + color: orange; } -.vpn.disconnected { - border-color: red; +.vpn.disconnected label { + color: red; } .calendar { background: $lowlight2; } -.date { - transition: all 0.2s; +.clickable { + transition: background-color 0.2s; } -.date:hover { +.clickable:hover { background-color: $lowlight2; } -.date:active { +.clickable:active { background-color: $highlight1; } +.date { + transition: all 0.2s; +} + .clock { - font-size: 30px; + font-size: 25px; font-weight: 400; color: $highlight1; margin-bottom: -1px; + padding-top: 18px; } .clock label { padding: 0; - margin-top: -11px; + margin-top: -8px; +} + +.pwrbtn { + font-size: 35px; + font-weight: 400; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + margin-bottom: -2px; } diff --git a/tree/.config/eww/eww.yuck b/tree/.config/eww/eww.yuck index ae716e8..c14ddd9 100644 --- a/tree/.config/eww/eww.yuck +++ b/tree/.config/eww/eww.yuck @@ -1,13 +1,11 @@ (defwindow bar0 :monitor 0 - :geometry (geometry :y "0%" - :x "3px" - :height "90%" - :width "50px" + :geometry (geometry :height "100%" + :width "40px" :anchor "center left") :stacking "fg" :exclusive true - (centerbox :orientation "v" + (centerbox :orientation "v" :active true :class "sidebar" (workspaces) (middle) (bottom) @@ -15,15 +13,14 @@ (defwindow bar1 :monitor 1 - :geometry (geometry :y "0%" - :x "3px" - :height "90%" + :geometry (geometry :height "100%" :width "50px" :anchor "center left") :stacking "fg" :exclusive true - (box :orientation "v" :space-evenly: false + (centerbox :orientation "v" :active true :class "sidebar" (workspaces) + (middle) (bottom) )) @@ -45,6 +42,7 @@ (box :class "thingy" (systray :orientation "v")) (date) (clock) + (pwr) )) (defwidget workspaces [] @@ -111,7 +109,7 @@ (calendar :class "calendar") (button :onclick "ba gnome-calendar" :hexpand true - :class "thingy date" + :class "thingy date clickable" (box :orientation "v" (label :text current_month) (label :text current_day) @@ -125,7 +123,32 @@ (label :text current_minute) )) +(defwidget pwr [] + (button :orientation "v" + :valign "end" + :class "thingy pwrbtn clickable" + :onclick "${EWW_CMD} open --toggle pwrctl" + (label :text "⏻") +)) + +(defwindow pwrctl + :monitor 0 + :geometry (geometry :y "5%" + :x "20px" + :height "200px" + :width "300px" + :anchor "bottom left") + :stacking "fg" + ;:exclusive true + (box :orientation "v" + :valign "end" + :class "thingy" + (label :text "SLEEP") + (label :text "OFF") +)) + (defvar show_volume false) + (defpoll workspaces_json :interval "1s" "eww-workspaces") (defpoll volume_out :interval "1s" "pamixer --get-volume") (defpoll vpn_status :interval "1s" "mullvad-status") diff --git a/tree/.config/hypr/hyprland.conf.tpl b/tree/.config/hypr/hyprland.conf.tpl index c73036f..adcb1e4 100644 --- a/tree/.config/hypr/hyprland.conf.tpl +++ b/tree/.config/hypr/hyprland.conf.tpl @@ -59,13 +59,7 @@ general { # See https://wiki.hyprland.org/Configuring/Variables/ for more gaps_in = 5 -{% if hostname == "sputnik" %} - gaps_out = 10 -{% elif hostname == "buran" %} gaps_out = 5 -{% else %} - gaps_out = 20 -{% end %} border_size = 2 col.active_border = rgba(f5deb3ff) rgba(f5deb3ee) 45deg col.inactive_border = rgba(595959aa)