Eww: Modularized and improved CSS

This commit is contained in:
soraefir 2023-11-23 20:46:43 +01:00
parent 5e569bbb48
commit afaed60935
12 changed files with 207 additions and 139 deletions

View File

@ -1,8 +1,4 @@
.calendar-win {
@include window;
background-color: $bg1;
color: $fg;
padding: .2em;
}
calendar {
@ -50,5 +46,6 @@ calendar {
}
.datetime {
padding: $border-width;
padding: $gaps-window;
}

View File

@ -1,10 +1,7 @@
.radio-win {
@include window;
background-color: $bg1;
color: $fg;
margin: $gaps-screen;
padding: .5em;
//margin: $gaps-screen;
//padding: .5em;
}
.album_art {

View File

@ -65,11 +65,11 @@ color: $base0B;
}
.sys-win {
@include window;
background-color: $bg1;
color: $fg;
margin: $gaps-screen;
padding: .5em;
// @include window;
// background-color: $bg1;
// color: $fg;
// margin: $gaps-screen;
// padding: .5em;
}
.sys-label {

View File

@ -1,20 +1,26 @@
@import 'css/colors';
@mixin rounding {
/* MIXIN */
@mixin border-radius {
border-radius: $border-radius;
}
@mixin window {
border: $border-width solid $base04;
margin: $gaps-screen $gaps-screen $gaps-screen;
@include rounding;
@mixin border-inactive {
border-width: $border-width;
border-style: solid;
border-color: $base03;
}
@import 'css/sys';
@import 'css/net';
@import 'css/clock';
@import 'css/radio';
@import 'css/powermenu';
@mixin border-active {
border-color: $base04;
}
@mixin test {
}
/* GENERAL */
* {
all: unset;
@ -22,14 +28,6 @@
transition: 200ms ease;
}
.bar {
color: $fg;
label {
font-size: 1.2rem;
}
}
tooltip {
background: $base01;
border: $border-width solid $base04;
@ -43,33 +41,6 @@ tooltip {
.icon,
.icon label { font-family: Material Design Icons; }
.ws {
border-radius: $border-radius;
margin: $gaps-window;
}
.focused {
background-color: $bg1;
border-radius: 1rem;
margin: .3rem;
padding: .25rem;
}
.module {
background: $base01;
border-radius: $border-radius;
border-color: $base03;
border-style: solid;
border-width: $border-width;
border-right-style: none;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
padding: $gaps-screen $gaps-window;
margin: $gaps-screen 0;
}
.grey {
background-color: $base02;
}
@ -89,3 +60,73 @@ tooltip {
.blue {
background-color: $base0C;
}
/* WINDOW WRAPPER CSS */
.winevent {
background-color: $base01;
color: $base07;
@include border-radius;
@include border-inactive;
}
.winevent:hover {
@include border-active;
}
.wininner {
padding: $gaps-window;
}
.winouter {
margin: $gaps-screen;
}
/* MODULE WRAPPER CSS */
.modevent {
background-color: $base01;
color: $base07;
@include border-radius;
@include border-inactive;
border-right-style: none;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.modevent:hover {
@include border-active;
}
.modinner {
padding: $gaps-screen 0 $gaps-screen $gaps-window;
}
.modouter {
margin: $gaps-screen 0;
}
/* IMPORTS EXTERNAL */
@import 'css/sys';
@import 'css/net';
@import 'css/clock';
@import 'css/radio';
@import 'css/powermenu';
/* BAR */
.bar label {
font-size: 1.2rem;
}
/* WORKSPACE */
.ws {
border-radius: $border-radius;
margin: $gaps-window;
}
.focused {
background-color: $bg1;
border-radius: 1rem;
margin: .3rem;
padding: .25rem;
}

View File

@ -16,7 +16,7 @@
:orientation "v"
:halign "end"
:valign "start"
(workspaces)))
(workspace-mod)))
(defwidget right []
(box
@ -24,9 +24,9 @@
:orientation "v"
:halign "end"
:valign "end"
(sys)
(net)
(clock)))
(sys-mod)
(net-mod)
(clock-mod)))
(defwidget center []
(box
@ -34,7 +34,7 @@
:orientation "v"
:halign "end"
:valign "center"
(radio-button)))
(radio-mod)))
(defwidget bar-box []
(centerbox
@ -56,3 +56,30 @@
:stacking "fg"
:exclusive true
(bar-box))
(defwidget window []
(box
:class "winouter"
(eventbox
:class "winevent"
(box
:class "wininner"
(children)
)
)
)
)
(defwidget module []
(box
:class "modouter"
(eventbox
:class "modevent"
(box
:class "modinner"
(children)
)
)
)
)

View File

@ -1,11 +1,12 @@
(defvar date_rev false)
(defwidget clock []
(box
:class "module datetime"
(defwidget clock-mod []
(module
(eventbox
:onhover "${EWW_CMD} update date_rev=true"
:onhoverlost "${EWW_CMD} update date_rev=false"
(box
:class "datetime"
(overlay
(box
:orientation "v"
@ -25,7 +26,13 @@
(button
:onclick "${EWW_CMD} open --toggle calendar"
:onrightclick "${EWW_CMD} open --toggle powermenu"
:class "month" month)))))))
:class "month" month))
)
)
)
)
)
)
(defpoll hour :interval "15s" "date '+%H'")
(defpoll minute :interval "15s" "date '+%M'")

View File

@ -1,8 +1,8 @@
(deflisten net :initial '{"name":"","icon":""}'"scripts/net/net")
(defwidget net []
(defwidget net-mod []
(module
(box
:class "module"
:orientation "v"
(button
:class "net"
@ -14,3 +14,4 @@
(label :class "icon-text" :text "B"))
)
)
)

View File

@ -4,11 +4,12 @@
(deflisten battery :initial '{"visible":false,"percentage":0.0,"color":"#FFFFFF"}' "scripts/sys/battery")
(defwidget sys []
(defwidget sys-mod []
(module
(button
:class "module"
:onclick "${EWW_CMD} open --toggle sys"
(box
:class "module"
:orientation "v"
(circular-progress
:value {EWW_CPU.avg}
@ -39,3 +40,4 @@
)
)
)
)

View File

@ -1,6 +1,7 @@
(deflisten workspace :initial '[]' "scripts/workspaces")
(defwidget workspaces []
(defwidget workspace-mod []
(module
(eventbox
:onscroll "echo {} | sed -e \"s/up/-1/g\" -e \"s/down/+1/g\" | xargs hyprctl dispatch workspace"
(box
@ -13,4 +14,4 @@
; :tooltip {ws.tooltip}
(box
:class `${ws.focused ? "focused" : ""}`
:height 3))))))
:height 3)))))))

View File

@ -1,8 +1,3 @@
(defwidget calendar-win []
(box
:class "calendar-win"
(calendar)))
(defwindow calendar
:monitor 0
:geometry (geometry
@ -11,4 +6,4 @@
:anchor "bottom right"
:width "0px"
:height "0px")
(calendar-win))
(window (calendar)))

View File

@ -1,11 +1,6 @@
(deflisten radio :initial '{"is_paused":1,"song":{"artist":"","song":"","image600":"https://www.radiorecord.ru/upload/stations_images/record_image600_white_fill.png"},"stations":[]}' "scripts/radio")
(defvar radio_rev false)
(defwidget radio-win []
(box
:class "radio-win"
(radio)))
(defwindow radio
:monitor 0
:geometry (geometry
@ -14,10 +9,10 @@
:anchor "bottom right"
:width "0px"
:height "0px")
(radio-win))
(window (radio-win)))
(defwidget radio []
(defwidget radio-win []
(box
:space-evenly false
:orientation "h"
@ -100,10 +95,14 @@
)
)
(defwidget radio-button []
(defwidget radio-mod []
(module
(box
:orientation "v"
(button
:onclick "${EWW_CMD} open --toggle --no-daemonize radio"
(box
:class "module"
:orientation "v"
"󰎆")))
"󰎆"
)
)
)
)

View File

@ -114,10 +114,11 @@
(defwindow sys
:monitor 0
:stacking "overlay"
:geometry (geometry
:x "0%"
:y "0%"
:anchor "bottom right"
:width "0px"
:height "0px")
(sys-win))
(window (sys-win)))