chore: control panel widget styles

This commit is contained in:
hesam-init 2024-07-01 19:08:50 +03:30
parent 49bd527e28
commit bf192aa43f
5 changed files with 32 additions and 42 deletions

View file

@ -1,25 +1,30 @@
@import "mixin"; @import "tokens";
.widget { .widget {
@include widget; padding: get-token(padding, small);
margin: get-token(margin, small);
border-radius: get-token(border-radius);
background-color: $surface0;
} }
.panel-widget { .panel-widget {
@include widget; @extend .widget;
margin: 6px; padding: get-token(padding);
margin: get-token(margin, large);
border-radius: get-token(border-radius);
} }
.icon { .icon {
@include icon; font-size: get-token(font-sizes);
font-family: "Symbols Nerd Font";
} }
.popup { .popup {
@include popup; padding: get-token(padding, small);
} border-radius: get-token(border-radius);
margin: get-token(margin);
.border { background-color: $surface1;
border: 2px white solid;
} }
button { button {

View file

@ -1,20 +0,0 @@
@import "tokens";
@mixin widget() {
padding: get-token(padding, small);
margin: get-token(margin);
border-radius: get-token(border-radius);
background-color: $surface0;
}
@mixin icon() {
font-size: get-token(font-sizes);
font-family: "Symbols Nerd Font";
}
@mixin popup() {
padding: get-token(padding, small);
border-radius: get-token(border-radius);
margin: get-token(margin);
background-color: $surface1;
}

View file

@ -1,30 +1,34 @@
.clock { .clock {
@include widget; @extend .widget;
font-size: get-token(font-sizes);
} }
.language { .language {
@include widget; @extend .widget;
} }
.logo { .logo {
@include widget; @extend .widget;
label { label {
@include icon; @extend .icon;
color: $accent; color: $accent;
} }
} }
.workspaces { .workspaces {
@include widget; @extend .widget;
padding: 12px 6px;
* { * {
transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 500ms; transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 600ms;
} }
.workspace { .workspace {
border-radius: 4px; border-radius: 6px;
margin: 0px 6px; margin: 0px 6px;
} }

View file

@ -32,12 +32,11 @@
(defwidget toolbox [] (defwidget toolbox []
(eventbox (eventbox
:cursor "pointer" :cursor "pointer"
(box (box
:class "tricontrol unbarwidget" :class "tricontrol panel-widget"
:orientation "h" :orientation "h"
:space-evenly true
:height 60
:halign "fill"
(button :onclick "./scripts/pop colourpick" (label :text "󰈊")) (button :onclick "./scripts/pop colourpick" (label :text "󰈊"))
(button :onclick "./scripts/pop scrop" (label :text "󰆞")) (button :onclick "./scripts/pop scrop" (label :text "󰆞"))
(button :onclick "~/.config/eww/themeswitch/scripts/pop" (label :text ""))))) (button :onclick "~/.config/eww/themeswitch/scripts/pop" (label :text "")))))

View file

@ -25,6 +25,8 @@
:orientation "v" :orientation "v"
:space-evenly false :space-evenly false
:valign "start" :valign "start"
:height 250
:vexpand false
(Logo) (Logo)
(Workspaces) (Workspaces)
@ -38,7 +40,7 @@
:valign "center" :valign "center"
:height 200 :height 200
(PlayerCtl) ;; (PlayerCtl)
)) ))
(defwidget Bottom [] (defwidget Bottom []