nat/ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

arbitrary css things

Browse Source
This commit is contained in:
gnat 2024-11-17 16:31:25 -08:00
parent d584d25194
commit fbb8e6f357
4 changed files with 156 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
style/mixins.scss Normal file
View File

@ -0,0 +1,27 @@
@mixin dial($_fg, $_bg, $margin, $padding, $font-size, $icon-font-size) {
color: $_fg;
background-color: $_bg;
margin: $margin;
padding: $padding;
font-size: $font-size;
label, icon {
font-family: 'Symbols Nerd Font Mono';
font-size: $icon-font-size;
color: $icon-color;
}
}
@mixin bar-dial($_fg, $_bg) {
@include dial($_fg, $_bg, 0px, 0px, 5px, 16px)
}
@mixin panel-dial($_fg, $_bg) {
@include dial($_fg, $_bg, 0px, 10px, 8px, 32px);
margin-left: 10px;
border-radius: 10px;
.resource-dial {
min-width: 96px;
min-height: 96px;
}
}

56
style/style.css
View File

@ -4,16 +4,62 @@
bar {
background: transparent; }
box.workspaces {
centerbox > box.left box.workspaces {
min-height: 50px;
background: #161616;
padding: 5px; }
box.workspaces box > button {
padding: 5px;
padding-top: 15px; }
centerbox > box.left box.workspaces box > button {
min-width: 10px;
min-height: 10px;
margin: 5px;
background-color: #262626; }
box.workspaces box > button.occupied {
centerbox > box.left box.workspaces box > button.occupied {
background-color: #393939; }
box.workspaces box > button.focused {
centerbox > box.left box.workspaces box > button.focused {
background-color: #FF7EB6; }
centerbox > box.right {
min-height: 50px;
background: #161616; }
centerbox > box.right box.sliders {
margin: 5px; }
centerbox > box.right box.sliders box.volume-slider > button {
font-size: 20px;
margin: 5px; }
centerbox > box.right box.sliders box.volume-slider > .volume-slider {
/* selecting this as `slider` doesn't work, for some reason.*/
min-width: 120px;
min-height: 10px; }
centerbox > box.right box.sliders box.volume-slider > .volume-slider trough {
min-height: 10px;
min-width: 120px;
background: #262626; }
centerbox > box.right box.sliders box.volume-slider > .volume-slider highlight {
background: #33B1FF; }
centerbox > box.right .battery-container {
padding-left: 10px;
padding-right: 10px; }
centerbox > box.right .battery-container .battery-dial {
min-width: 40px;
min-height: 40px;
color: #42be65;
background-color: #161616;
margin: 0px;
padding: 0px;
font-size: 5px; }
centerbox > box.right .battery-container .battery-dial label, centerbox > box.right .battery-container .battery-dial icon {
font-family: 'Symbols Nerd Font Mono';
font-size: 16px;
color: #f2f4f8; }
centerbox > box.right separator {
background: #262626;
padding: 1px;
margin-top: 10px;
margin-bottom: 10px; }
centerbox > box.right box.clock {
margin: 10px;
background: #161616; }
centerbox > box.right box.clock .datetime {
margin: 1px;
font-size: 10pt; }

1
style/style.scss
View File

@ -3,5 +3,6 @@
}
@import 'colors.scss';
@import 'mixins.scss';
@import './widgets/bar.scss'

91
style/widgets/bar.scss
View File

@ -1,26 +1,89 @@
$height: 50px;
bar {
background: transparent
background: transparent;
}
box.workspaces {
min-height: $height;
background: $bg;
padding: 5px;
centerbox {
> box.left {
box.workspaces {
min-height: $height;
background: $bg;
padding: 5px;
padding-top: 15px;
box > button {
min-width: 10px;
min-height: 10px;
margin: 5px;
background-color: $bg-alt-1;
box > button {
min-width: 10px;
min-height: 10px;
margin: 5px;
background-color: $bg-alt-1;
&.occupied {
background-color: $bg-alt-2;
&.occupied {
background-color: $bg-alt-2;
}
&.focused {
background-color: $hl;
}
}
}
}
> box.right {
min-height: $height;
background: $bg;
box.sliders {
margin: 5px;
box.volume-slider {
> button {
font-size: 20px;
margin: 5px;
}
> .volume-slider { /* selecting this as `slider` doesn't work, for some reason.*/
min-width: 120px;
min-height: 10px;
& trough {
min-height: 10px;
min-width: 120px;
background: $bg-alt-1;
}
& highlight {
background: $hl-alt-1;
}
}
}
}
&.focused {
background-color: $hl;
.battery-container {
padding-left: 10px;
padding-right: 10px;
.battery-dial {
min-width: 40px;
min-height: 40px;
@include bar-dial($battery-dial-bg, $battery-dial-fg);
}
}
separator {
background: $bg-alt-1;
padding: 1px;
margin-top: 10px;
margin-bottom: 10px;
}
box.clock {
margin: 10px;
background: $bg;
.datetime {
margin: 1px;
font-size: 10pt;
}
}
}
}