Switch to minimal ironbar implementation

Save reference for later
Enable upower daemon and add simple bar with the essentials for now,
TODO more later
This commit is contained in:
Evie Litherland-Smith 2023-10-11 08:28:27 +01:00
parent 1e9881fc59
commit be1d5fa798
37 changed files with 345 additions and 258 deletions

View file

@ -0,0 +1,44 @@
anchor_to_edges = true
icon_theme = "Delta"
position = "bottom"
[[start]]
all_monitors = false
type = "workspaces"
[start.name_map]
1 = "󰟀" # [t]erminal
2 = "󰳼" # [d]ev
3 = "󰖟" # [b]rowser
4 = "󰃭" # [a]genda (or c[a]lendar)
5 = "󰝰" # [f]iles
6 = "󰲸" # [s]potify (or mu[s]ic)
7 = "󰭹" # [c]hat
8 = "󰢹" # [r]emote
9 = "󰊗" # [g]aming
default = "󰛡"
special = "󰓎"
urgent = "󰣘"
[[center]]
favorites = [ "emacs", "firefox"]
show_icons = true
show_names = false
type = "launcher"
[[end]]
player_type = "mpris"
type = "music"
[end.truncate]
max_length = 100
mode = "end"
[[end]]
type = "upower"
[[end]]
type = "clock"
[[end]]
type = "tray"

View file

@ -1,266 +1,40 @@
.container {
font-family: cjkFonts;
font-weight: bold;
font-size: 23px;
}
@define-color base #24273a;
@define-color mantle #1e2030;
@define-color crust #181926;
#cava {
font-family: renogare;
}
@define-color text #cad3f5;
@define-color subtext0 #a5adcb;
@define-color subtext1 #b8c0e0;
.time {
font-size: 23px;
font-weight: normal;
padding: 0px 10px 0px 10px;
background: linear-gradient(45deg, rgb(254, 240, 224) 0%, rgb(244, 169, 158) 50%, rgb(238, 214, 215) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
border-radius: 16px;
margin: 10px 10px 10px 10px;
font-family: Renogare;
}
@define-color surface0 #363a4f;
@define-color surface1 #494d64;
@define-color surface2 #5b6078;
.clock_date {
font-family: Renogare;
font-weight: normal;
font-size: 18;
color: rgb(49, 50, 68);
}
@define-color overlay0 #6e738d;
@define-color overlay1 #8087a2;
@define-color overlay2 #939ab7;
@define-color blue #8aadf4;
@define-color lavender #b7bdf8;
@define-color sapphire #7dc4e4;
@define-color sky #91d7e3;
@define-color teal #8bd5ca;
@define-color green #a6da95;
@define-color yellow #eed49f;
@define-color peach #f5a97f;
@define-color maroon #ee99a0;
@define-color red #ed8796;
@define-color mauve #c6a0f6;
@define-color pink #f5bde6;
@define-color flamingo #f0c6c6;
@define-color rosewater #f4dbd6;
.background {
background-color: rgba(0, 0, 0, 0)
}
.popup-clock {
font-weight: bolder;
background: rgb(36, 39, 58);
}
.popup-pwr {
background: rgb(234, 153, 156);
color: rgb(48, 52, 70);
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
border: none;
}
#power-btn {
padding: 0px 20px 0px 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 0px;
border-radius: 15px;
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
border: none;
font-weight: bolder;
box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 5px 2px;
}
#shutdown {
background: rgb(238, 190, 190);
}
#reboot {
background: rgb(140, 170, 238);
}
#hibernation {
box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 5px 2px;
background: rgb(153, 209, 219);
}
/* base */
.sysinfo .item,
.script,
.tray {
padding: 0px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 15px;
background: #cdd6f4;
color: #516079;
box-shadow: rgba(0, 0, 0, 0.116) 2px 2px 5px 2px;
}
.scale,
.internet,
.script {
transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 3px;
box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
border-radius: 15px;
background: rgb(202, 158, 230);
background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
color: #fff;
}
scale trough {
border-radius: 16px;
background-color: #E7D4CB;
box-shadow: 0 2px 3px 2px rgba(00, 00, 00, 0.4);
min-height: 10px;
min-width: 70px;
margin: 0px 5px 10px 10px;
}
scale value {
color: #77a5bf;
font-size: 0px;
}
scale trough highlight {
background-image: linear-gradient(to right, #afcee0 30%, #92B6F4 50%, #77a5bf 100%);
border-radius: 10px;
background-color: #afcee0;
}
.focused {
color: rgb(84, 111, 175);
font-size: 20px;
padding: 0px 10px 0px 10px;
margin: 10px 10px 10px 0px;
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
border-radius: 16px;
}
/* cpu */
.sysinfo .item:nth-child(1) {
background: rgb(180, 190, 254);
background: linear-gradient(52deg, rgba(180, 190, 254, 1) 0%, rgba(137, 220, 235, 1) 32%, rgba(137, 180, 250, 1) 72%, rgba(166, 227, 161, 1) 100%);
background-size: 300% 300%;
animation: gradient 20s ease infinite;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
/* background-color: #b4befe; */
color: #fff;
}
.clock {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 3px;
box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
border: none;
border-radius: 15px;
font-size: 24px;
background: rgb(202, 158, 230);
background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
color: #fff;
}
.tray {
color: rgb(84, 111, 175);
font-size: 15px;
padding: 0px 10px 0px 10px;
margin: 10px 10px 10px 0px;
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
border-radius: 16px;
}
.tray>.passive {
-gtk-icon-effect: dim;
}
.tray>.needs-attention {
-gtk-icon-effect: highlight;
background-color: #eb4d4b;
* {
color: @text;
font-family: "Fira Sans";
/* border: 1px solid @surface2; */
}
.workspaces {
font-family: Renogare;
font-weight: normal;
font-size: 25px;
font-weight: normal;
margin: 10px 0px 0px 20px;
border-radius: 16px;
font-size: 24px;
}
.workspaces .item {
box-shadow: rgba(0, 0, 0, 0.116) 2 2 5 2px;
border: unset;
background: #fff;
border-radius: 15px;
margin: 10px 10px 15px 0px;
padding: 5px 20px 5px 20px;
color: #cba6f7;
}
.workspaces .item.focused {
border: unset;
font-size: 25px;
transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
box-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.377);
padding: 5px 10px 5px 10px;
border-radius: 16px;
margin: 10px 10px 15px 0px;
background: rgb(202, 158, 230);
background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
color: #fff;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
tooltip.background {
background-color: rgba(00, 00, 00, 0.5);
font-size: 18;
border-radius: 10px;
color: #FDFDFD;
}
tooltip * {
padding: 4px;
background-color: transparent;
color: white;
}
.host tooltip {
background-color: rgba(255, 00, 00, 0.5);
}

View file

@ -0,0 +1,266 @@
.container {
font-family: cjkFonts;
font-weight: bold;
font-size: 23px;
}
#cava {
font-family: renogare;
}
.time {
font-size: 23px;
font-weight: normal;
padding: 0px 10px 0px 10px;
background: linear-gradient(45deg, rgb(254, 240, 224) 0%, rgb(244, 169, 158) 50%, rgb(238, 214, 215) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
border-radius: 16px;
margin: 10px 10px 10px 10px;
font-family: Renogare;
}
.clock_date {
font-family: Renogare;
font-weight: normal;
font-size: 18;
color: rgb(49, 50, 68);
}
.background {
background-color: rgba(0, 0, 0, 0)
}
.popup-clock {
font-weight: bolder;
background: rgb(36, 39, 58);
}
.popup-pwr {
background: rgb(234, 153, 156);
color: rgb(48, 52, 70);
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
border: none;
}
#power-btn {
padding: 0px 20px 0px 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 0px;
border-radius: 15px;
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
border: none;
font-weight: bolder;
box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 5px 2px;
}
#shutdown {
background: rgb(238, 190, 190);
}
#reboot {
background: rgb(140, 170, 238);
}
#hibernation {
box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 5px 2px;
background: rgb(153, 209, 219);
}
/* base */
.sysinfo .item,
.script,
.tray {
padding: 0px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 15px;
background: #cdd6f4;
color: #516079;
box-shadow: rgba(0, 0, 0, 0.116) 2px 2px 5px 2px;
}
.scale,
.internet,
.script {
transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 3px;
box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
border-radius: 15px;
background: rgb(202, 158, 230);
background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
color: #fff;
}
scale trough {
border-radius: 16px;
background-color: #E7D4CB;
box-shadow: 0 2px 3px 2px rgba(00, 00, 00, 0.4);
min-height: 10px;
min-width: 70px;
margin: 0px 5px 10px 10px;
}
scale value {
color: #77a5bf;
font-size: 0px;
}
scale trough highlight {
background-image: linear-gradient(to right, #afcee0 30%, #92B6F4 50%, #77a5bf 100%);
border-radius: 10px;
background-color: #afcee0;
}
.focused {
color: rgb(84, 111, 175);
font-size: 20px;
padding: 0px 10px 0px 10px;
margin: 10px 10px 10px 0px;
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
border-radius: 16px;
}
/* cpu */
.sysinfo .item:nth-child(1) {
background: rgb(180, 190, 254);
background: linear-gradient(52deg, rgba(180, 190, 254, 1) 0%, rgba(137, 220, 235, 1) 32%, rgba(137, 180, 250, 1) 72%, rgba(166, 227, 161, 1) 100%);
background-size: 300% 300%;
animation: gradient 20s ease infinite;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
/* background-color: #b4befe; */
color: #fff;
}
.clock {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 3px;
box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
border: none;
border-radius: 15px;
font-size: 24px;
background: rgb(202, 158, 230);
background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
color: #fff;
}
.tray {
color: rgb(84, 111, 175);
font-size: 15px;
padding: 0px 10px 0px 10px;
margin: 10px 10px 10px 0px;
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
border-radius: 16px;
}
.tray>.passive {
-gtk-icon-effect: dim;
}
.tray>.needs-attention {
-gtk-icon-effect: highlight;
background-color: #eb4d4b;
}
.workspaces {
font-family: Renogare;
font-weight: normal;
font-size: 25px;
font-weight: normal;
margin: 10px 0px 0px 20px;
border-radius: 16px;
}
.workspaces .item {
box-shadow: rgba(0, 0, 0, 0.116) 2 2 5 2px;
border: unset;
background: #fff;
border-radius: 15px;
margin: 10px 10px 15px 0px;
padding: 5px 20px 5px 20px;
color: #cba6f7;
}
.workspaces .item.focused {
border: unset;
font-size: 25px;
transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
box-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.377);
padding: 5px 10px 5px 10px;
border-radius: 16px;
margin: 10px 10px 15px 0px;
background: rgb(202, 158, 230);
background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
color: #fff;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
tooltip.background {
background-color: rgba(00, 00, 00, 0.5);
font-size: 18;
border-radius: 10px;
color: #FDFDFD;
}
tooltip * {
padding: 4px;
background-color: transparent;
color: white;
}
.host tooltip {
background-color: rgba(255, 00, 00, 0.5);
}

View file

@ -49,7 +49,10 @@ in {
};
console.keyMap = "uk";
programs.ssh.startAgent = true;
services.power-profiles-daemon.enable = true;
services = {
upower.enable = true;
power-profiles-daemon.enable = true;
};
virtualisation.podman.enable = true;
time.timeZone = "Europe/London";
i18n = let locale = "en_GB.UTF-8";