feat: revealer widget style

This commit is contained in:
hesam-init 2024-06-29 22:36:02 +03:30
parent a281b79996
commit 11008eacc3
8 changed files with 148 additions and 150 deletions

View file

@ -1,5 +1,4 @@
@mixin widget() {
color: $white0;
padding: 6px;
margin: 4px 2px;
border-radius: 8px;
@ -12,5 +11,48 @@
.controlpanel-widget {
@include widget;
margin: 6px;
}
.border {
border: 2px white solid;
}
button {
transition-duration: 0.4s;
border-radius: 6px;
}
button:hover {
background-color: $surface2;
}
.popup {
background-color: $base;
padding: 5px;
border-radius: 5px;
border-style: solid;
border-color: $surface2;
border-width: 2px;
margin: 10px;
}
.mainentry {
background-color: $surface1;
padding: 5px;
border-radius: 5px;
margin: 5px;
}
.mainentry label {
font-size: 18px;
color: $white0;
}
.smallentry {
@extend .mainentry;
label {
font-size: 15px;
}
}

View file

@ -0,0 +1,84 @@
tooltip {
background-color: $surface0;
color: $white0;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: $surface2;
}
scale {
all: unset;
trough {
background-color: $surface2;
border-radius: 24px;
min-height: 80px;
min-width: 10px;
margin: 5px;
slider {
background-color: $white2;
border-radius: 25px;
min-height: 15px;
min-width: 15px;
margin: -10px;
}
highlight {
background-color: $white0;
border-radius: 24px;
}
}
}
entry {
// image: url('./assets/image/screenshot.png');
padding: 5px;
margin: 5px;
border-radius: 5px;
border-style: solid;
border-color: $surface2;
background-color: $surface1;
color: $white0;
}
calendar {
all: unset;
background-color: $surface0;
font-size: 20;
color: $white0;
}
calendar:selected {
color: $base;
background-color: $accent;
border-radius: 25px;
}
calendar.header {
color: $accent;
font-weight: bold;
}
calendar:indeterminate {
color: $surface2;
}
checkbutton {
border-radius: 24px;
background-color: $surface1;
padding: 4px;
check {
min-height: 15px;
min-width: 15px;
color: $white0;
}
}
checkbutton:checked {
check {
border-radius: 24px;
background-color: $white0;
}
}

View file

@ -0,0 +1,3 @@
.reveal-on-hover {
padding: 6px 0px;
}

View file

@ -1,151 +1,18 @@
@import "./assets/scss/themes/feverblush.scss";
@import "./assets/scss/themes/fullerene.scss";
@import "./assets/scss/global.scss";
@import "./assets/scss/native.scss";
@import "./assets/scss/widgets/revealer.scss";
@import "./assets/scss/windows/vbar.scss";
@import "./assets/scss/windows/panel.scss";
@import "./src/dashboard/styles.scss";
@import "./src/dock/styles.scss";
@import "./src/desktop/styles.scss";
@import "./src/notification/styles.scss";
* {
all: unset;
color: $white0;
font-size: 15px;
color: $white;
font-family: "Iosevka Nerd Font";
// font-weight: bold;
// font-smooth: never;
}
.border {
border: 2px white solid;
}
tooltip {
background-color: $surface0;
color: $white0;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: $surface2;
}
scale {
all: unset;
trough {
background-color: $surface2;
border-radius: 24px;
min-height: 80px;
min-width: 10px;
margin: 5px;
slider {
background-color: $white2;
border-radius: 25px;
min-height: 15px;
min-width: 15px;
margin: -10px;
}
highlight {
background-color: $white0;
border-radius: 24px;
}
}
}
button {
transition-duration: 0.5s;
border-radius: 5px;
}
button:hover {
background-color: $surface2;
}
calendar {
all: unset;
background-color: $surface0;
font-size: 20;
color: $white0;
}
calendar:selected {
color: $base;
background-color: $accent;
border-radius: 25px;
}
calendar.header {
color: $accent;
font-weight: bold;
}
calendar:indeterminate {
color: $surface2;
}
checkbutton {
border-radius: 24px;
background-color: $surface1;
padding: 4px;
check {
min-height: 15px;
min-width: 15px;
color: $white0;
}
}
checkbutton:checked {
check {
border-radius: 24px;
background-color: $white0;
}
}
.popup {
background-color: $base;
padding: 5px;
border-radius: 5px;
border-style: solid;
border-color: $surface2;
border-width: 2px;
margin: 10px;
}
entry {
// image: url('./assets/image/screenshot.png');
padding: 5px;
margin: 5px;
border-radius: 5px;
border-style: solid;
border-color: $surface2;
background-color: $surface1;
color: $white0;
}
.mainentry {
background-color: $surface1;
padding: 5px;
border-radius: 5px;
margin: 5px;
}
.mainentry label {
font-size: 18px;
color: $white0;
}
.smallentry {
@extend .mainentry;
label {
font-size: 15px;
}
}

View file

@ -1,4 +1,4 @@
(include "./src/utils/_revealer.yuck")
(include "./src/widgets/_revealer.yuck")
(include "./src/_definitions.yuck")
(include "./setups/sidebar.yuck")

View file

@ -3,7 +3,7 @@
spaces() {
WORKSPACE_WINDOWS=$(hyprctl workspaces -j | jq 'map({key: .id | tostring, value: .windows}) | from_entries')
seq 1 6 | jq --argjson windows "${WORKSPACE_WINDOWS}" --slurp -Mc 'map(tostring) | map({id: ., windows: ($windows[.]//0)})'
seq 1 5 | jq --argjson windows "${WORKSPACE_WINDOWS}" --slurp -Mc 'map(tostring) | map({id: ., windows: ($windows[.]//0)})'
}
spaces

View file

@ -11,37 +11,39 @@
(defwidget reveal_on_hover [var varname ?class ?duration ?transition]
(box
:class "reveal_on_hover ${class}"
:class "${class}"
:orientation "v"
:space-evenly false
:valign "end"
(eventbox
:onhover `${EWW_CMD} update ${varname}=true`
:onhoverlost `${EWW_CMD} update ${varname}=false`
(box
:space-evenly false
:orientation "v"
(children :nth 0)
(revealer
:reveal var
:transition {transition ?:"slidedown"}
:duration "500ms"
(children :nth 1))))))
(box :class "reveal-on-hover" (children :nth 1))))))
)
(defwidget clickbox [var varname ?class ?duration ?transition]
(box :class "${class} clickbox" :orientation "h" :space-evenly false
(button :onclick "eww update ${varname}=${ var ? false : true }"
(children :nth 0)
)
(children :nth 0))
(revealer :reveal var
:transition {transition ?: "slideleft"}
:duration {duration ?: "500ms"}
(box :class "${class}"
:space-evenly false
(children :nth 1)
(button :onclick "eww update ${varname}=false" :class "close" (label :text "Close"))
)
)
)
)
(button :onclick "eww update ${varname}=false" :class "close" (label :text "Close")))))
)