mirror of
https://github.imc.re/void-land/hyprland-void-dots
synced 2025-04-25 05:16:55 +02:00
feat: revealer widget style
This commit is contained in:
parent
a281b79996
commit
11008eacc3
8 changed files with 148 additions and 150 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
84
hypr-configs/hyprland/eww/assets/scss/native.scss
Normal file
84
hypr-configs/hyprland/eww/assets/scss/native.scss
Normal 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;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
.reveal-on-hover {
|
||||
padding: 6px 0px;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
(include "./src/utils/_revealer.yuck")
|
||||
(include "./src/widgets/_revealer.yuck")
|
||||
(include "./src/_definitions.yuck")
|
||||
|
||||
(include "./setups/sidebar.yuck")
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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")))))
|
||||
)
|
Loading…
Add table
Reference in a new issue