feat: use derivation to transpile scss to css
This commit is contained in:
parent
65965e5859
commit
0f1f2f70ad
5 changed files with 188 additions and 174 deletions
|
|
@ -1,7 +1,14 @@
|
|||
{ pkgs, ... }:
|
||||
let
|
||||
toCSS = import ./tocss.nix;
|
||||
in
|
||||
{
|
||||
programs.waybar = {
|
||||
enable = true;
|
||||
style = toCSS {
|
||||
inherit pkgs;
|
||||
file = ./style.scss;
|
||||
};
|
||||
settings = {
|
||||
main = import ./config.nix;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,172 +0,0 @@
|
|||
''
|
||||
* {
|
||||
font-family: "DejaVuSansMNerdFont-Regular";
|
||||
border: none;
|
||||
opacity: 50;
|
||||
border-radius: 10px;
|
||||
font-size: 13px; }
|
||||
|
||||
window#waybar {
|
||||
background: transparent; }
|
||||
|
||||
window#waybar.hidden {
|
||||
opacity: 0.2; }
|
||||
|
||||
#window {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 10px;
|
||||
transition: none;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
|
||||
.modules-center {
|
||||
margin: 3px 0 0 0; }
|
||||
|
||||
.modules-right {
|
||||
margin: 3px 8px 0 0; }
|
||||
|
||||
.modules-left {
|
||||
margin: 3px 0 0 8px; }
|
||||
|
||||
#workspaces {
|
||||
background-color: rgba(13, 214, 250, 0.4); }
|
||||
#workspaces button {
|
||||
padding: 1px 5px; }
|
||||
#workspaces button:hover {
|
||||
background-color: rgba(159, 255, 255, 0.9); }
|
||||
#workspaces button.focused {
|
||||
background-color: rgba(50, 194, 219, 0.7); }
|
||||
|
||||
#network {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #161320;
|
||||
background: #bd93f9; }
|
||||
|
||||
#pulseaudio {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
min-width: 23px;
|
||||
color: #1a1826;
|
||||
background: #fae3b0; }
|
||||
|
||||
#backlight {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #161320;
|
||||
background: #f8bd96; }
|
||||
|
||||
#clock {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #161320;
|
||||
background: #abe9b3; }
|
||||
|
||||
#memory {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #161320;
|
||||
background: #ddb6f2; }
|
||||
|
||||
#privacy {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #161320;
|
||||
background: #ddb6f2; }
|
||||
|
||||
#cpu {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #161320;
|
||||
background: #96cdfb; }
|
||||
|
||||
#tray {
|
||||
padding-left: 10px;
|
||||
margin-right: 4px;
|
||||
padding-right: 10px;
|
||||
border-radius: 10px;
|
||||
color: #b5e8e0;
|
||||
background: #161320; }
|
||||
|
||||
#idle_inhibitor {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
font-size: 20px;
|
||||
color: #161320;
|
||||
background: #f28fad; }
|
||||
|
||||
#group-power {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
font-size: 20px;
|
||||
transition: none;
|
||||
color: #161320;
|
||||
background: #f28fad; }
|
||||
|
||||
#custom-notification {
|
||||
margin-left: 4px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 10px;
|
||||
color: #161320;
|
||||
background: #f2cdcd;
|
||||
font-family: "NotoSansMono Nerd Font"; }
|
||||
|
||||
#mode {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #161320;
|
||||
background: #ddb6f2; }
|
||||
|
||||
@keyframes blink {
|
||||
to {
|
||||
background-color: #bf616a;
|
||||
color: #b5e8e0; } }
|
||||
|
||||
#battery {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #161320;
|
||||
background: #b5e8e0; }
|
||||
#battery .critical:not(.charging) {
|
||||
animation-name: blink;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate; }
|
||||
|
||||
''
|
||||
173
home/sway/waybar/style.scss
Normal file
173
home/sway/waybar/style.scss
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
@mixin border {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-radius: 10px;
|
||||
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@mixin border-left {
|
||||
padding-left: 10px;
|
||||
margin-right: 4px;
|
||||
padding-right: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@mixin border-right {
|
||||
margin-left: 4px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "DejaVuSansMNerdFont-Regular";
|
||||
border: none;
|
||||
opacity: 50;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
window#waybar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
window#waybar.hidden {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
#window {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 10px;
|
||||
transition: none;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.modules-center {
|
||||
margin: 3px 0 0 0;
|
||||
}
|
||||
|
||||
.modules-right {
|
||||
margin: 3px 8px 0 0;
|
||||
}
|
||||
|
||||
.modules-left {
|
||||
margin: 3px 0 0 8px;
|
||||
}
|
||||
|
||||
#workspaces {
|
||||
background-color: rgba(13, 214, 250, 0.4);
|
||||
|
||||
button {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: rgba(159, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
button.focused {
|
||||
background-color: rgba(50, 194, 219, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
#network {
|
||||
@include border();
|
||||
color: #161320;
|
||||
background: #bd93f9;
|
||||
}
|
||||
|
||||
#pulseaudio {
|
||||
@include border();
|
||||
min-width: 23px;
|
||||
color: #1a1826;
|
||||
background: #fae3b0;
|
||||
}
|
||||
|
||||
#backlight {
|
||||
@include border();
|
||||
color: #161320;
|
||||
background: #f8bd96;
|
||||
}
|
||||
|
||||
#clock {
|
||||
@include border();
|
||||
color: #161320;
|
||||
background: #abe9b3;
|
||||
}
|
||||
|
||||
#memory {
|
||||
@include border();
|
||||
color: #161320;
|
||||
background: #ddb6f2;
|
||||
}
|
||||
|
||||
#privacy {
|
||||
@include border();
|
||||
color: #161320;
|
||||
background: #ddb6f2;
|
||||
}
|
||||
|
||||
#cpu {
|
||||
@include border();
|
||||
color: #161320;
|
||||
background: #96cdfb;
|
||||
}
|
||||
|
||||
#tray {
|
||||
@include border-left();
|
||||
color: #b5e8e0;
|
||||
background: #161320;
|
||||
}
|
||||
|
||||
#idle_inhibitor {
|
||||
@include border();
|
||||
font-size: 20px;
|
||||
color: #161320;
|
||||
background: #f28fad;
|
||||
}
|
||||
|
||||
#group-power {
|
||||
@include border();
|
||||
font-size: 20px;
|
||||
transition: none;
|
||||
color: #161320;
|
||||
background: #f28fad;
|
||||
}
|
||||
|
||||
#custom-notification {
|
||||
@include border-right();
|
||||
color: #161320;
|
||||
background: #f2cdcd;
|
||||
font-family: "NotoSansMono Nerd Font";
|
||||
}
|
||||
|
||||
#mode {
|
||||
@include border();
|
||||
color: #161320;
|
||||
background: #ddb6f2;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
to {
|
||||
background-color: #bf616a;
|
||||
color: #b5e8e0;
|
||||
}
|
||||
}
|
||||
|
||||
#battery {
|
||||
@include border();
|
||||
color: #161320;
|
||||
background: #b5e8e0;
|
||||
|
||||
.critical:not(.charging) {
|
||||
animation-name: blink;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
}
|
||||
7
home/sway/waybar/tocss.nix
Normal file
7
home/sway/waybar/tocss.nix
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{ pkgs, file, ... }:
|
||||
pkgs.stdenv.mkDerivation {
|
||||
name = "toCSS";
|
||||
buildCommand = ''
|
||||
${pkgs.sass}/bin/scss ${file} $out
|
||||
'';
|
||||
}
|
||||
|
|
@ -218,7 +218,6 @@ in
|
|||
bat
|
||||
kdeconnect
|
||||
dotter
|
||||
sassc
|
||||
glib
|
||||
pamixer
|
||||
wireguard-tools
|
||||
|
|
@ -231,8 +230,8 @@ in
|
|||
fonts = with pkgs; {
|
||||
packages = [
|
||||
(nerdfonts.override { fonts = [ "Noto" ]; })
|
||||
jigmo
|
||||
d2coding
|
||||
jigmo
|
||||
last-resort
|
||||
];
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue