Eww: Modularized and improved CSS
This commit is contained in:
parent
5e569bbb48
commit
afaed60935
@ -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;
|
||||
|
||||
}
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
@ -1,20 +1,21 @@
|
||||
(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"
|
||||
(overlay
|
||||
(box
|
||||
:orientation "v"
|
||||
(button
|
||||
:class "hour" hour)
|
||||
(button
|
||||
:class "minute" minute))
|
||||
(revealer
|
||||
:reveal date_rev
|
||||
(box
|
||||
:class "datetime"
|
||||
(overlay
|
||||
(box
|
||||
:orientation "v"
|
||||
(button
|
||||
:class "hour" hour)
|
||||
(button
|
||||
:class "minute" minute))
|
||||
(revealer
|
||||
:reveal date_rev
|
||||
(box
|
||||
:class "date"
|
||||
: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'")
|
||||
|
@ -1,16 +1,17 @@
|
||||
(deflisten net :initial '{"name":"","icon":""}'"scripts/net/net")
|
||||
|
||||
(defwidget net []
|
||||
(box
|
||||
:class "module"
|
||||
:orientation "v"
|
||||
(button
|
||||
:class "net"
|
||||
:tooltip {net.name}
|
||||
{net.icon})
|
||||
(defwidget net-mod []
|
||||
(module
|
||||
(box
|
||||
:orientation "v"
|
||||
(button
|
||||
:class "net"
|
||||
:tooltip {net.name}
|
||||
{net.icon})
|
||||
|
||||
(button
|
||||
:class "blt"
|
||||
(label :class "icon-text" :text "B"))
|
||||
(button
|
||||
:class "blt"
|
||||
(label :class "icon-text" :text "B"))
|
||||
)
|
||||
)
|
||||
)
|
@ -4,38 +4,40 @@
|
||||
|
||||
(deflisten battery :initial '{"visible":false,"percentage":0.0,"color":"#FFFFFF"}' "scripts/sys/battery")
|
||||
|
||||
(defwidget sys []
|
||||
(button
|
||||
:onclick "${EWW_CMD} open --toggle sys"
|
||||
(box
|
||||
(defwidget sys-mod []
|
||||
(module
|
||||
(button
|
||||
:class "module"
|
||||
:onclick "${EWW_CMD} open --toggle sys"
|
||||
(box
|
||||
:orientation "v"
|
||||
(circular-progress
|
||||
:value {EWW_CPU.avg}
|
||||
:class "cpubar"
|
||||
:thickness 6
|
||||
(label :class "icon-text" :text "C"))
|
||||
(circular-progress
|
||||
:value {EWW_CPU.avg}
|
||||
:class "cpubar"
|
||||
:thickness 6
|
||||
(label :class "icon-text" :text "C"))
|
||||
|
||||
(circular-progress
|
||||
:value {gpu.devices[0].GRBM2?.CommandProcessor-Graphics?.value?:0}
|
||||
:class "gpubar"
|
||||
:thickness 6
|
||||
(label :class "icon-text" :text "G"))
|
||||
(circular-progress
|
||||
:value {gpu.devices[0].GRBM2?.CommandProcessor-Graphics?.value?:0}
|
||||
:class "gpubar"
|
||||
:thickness 6
|
||||
(label :class "icon-text" :text "G"))
|
||||
|
||||
(circular-progress
|
||||
:value {100*memory.used/memory.total}
|
||||
:class "membar"
|
||||
:thickness 6
|
||||
:tooltip "${memory.human.used} / ${memory.human.total}"
|
||||
(label :class "icon-text" :text "M"))
|
||||
(circular-progress
|
||||
:value {100*memory.used/memory.total}
|
||||
:class "membar"
|
||||
:thickness 6
|
||||
:tooltip "${memory.human.used} / ${memory.human.total}"
|
||||
(label :class "icon-text" :text "M"))
|
||||
|
||||
(circular-progress
|
||||
:value {battery.percentage}
|
||||
:class "batbar"
|
||||
:visible {battery.visible}
|
||||
:style "color: ${battery.color};"
|
||||
:thickness 6
|
||||
(label :class "icon-text" :text "B"))
|
||||
(circular-progress
|
||||
:value {battery.percentage}
|
||||
:class "batbar"
|
||||
:visible {battery.visible}
|
||||
:style "color: ${battery.color};"
|
||||
:thickness 6
|
||||
(label :class "icon-text" :text "B"))
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
@ -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)))))))
|
||||
|
@ -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)))
|
@ -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 []
|
||||
(button
|
||||
:onclick "${EWW_CMD} open --toggle --no-daemonize radio"
|
||||
(box
|
||||
:class "module"
|
||||
(defwidget radio-mod []
|
||||
(module
|
||||
(box
|
||||
:orientation "v"
|
||||
"")))
|
||||
(button
|
||||
:onclick "${EWW_CMD} open --toggle --no-daemonize radio"
|
||||
""
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
@ -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)))
|
Loading…
x
Reference in New Issue
Block a user