try to fix styling

Signed-off-by: unexplrd <unexplrd@linerds.us>
This commit is contained in:
2025-07-12 15:29:28 +03:00
parent d48559e6d8
commit bba55dc973
5 changed files with 79 additions and 90 deletions

View File

@ -160,20 +160,20 @@ in {
} }
struts { struts {
left 43 left 36
right 43 right 36
} }
tab-indicator { tab-indicator {
active-color "#${colors.base04}" active-color "#${colors.base04}"
inactive-color "#${colors.base03}" inactive-color "#${colors.base03}"
corner-radius 3 corner-radius 6
gap 3 gap 3
gaps-between-tabs 3 gaps-between-tabs 3
// length total-proportion=0.3 // length total-proportion=0.3
place-within-column place-within-column
position "left" position "left"
width 3 width 6
} }
focus-ring { focus-ring {
width 1 width 1
@ -191,7 +191,7 @@ in {
} }
window-rule { window-rule {
geometry-corner-radius 9 geometry-corner-radius 12
clip-to-geometry true clip-to-geometry true
} }
window-rule { window-rule {

View File

@ -230,7 +230,7 @@
#window { #window {
background: @base00; background: @base00;
color: @base05; color: @base05;
border-radius: 9px; border-radius: 12px;
border: 1px solid @base0D; border: 1px solid @base0D;
} }
@ -240,7 +240,7 @@
#search { #search {
background: @base01; background: @base01;
border-radius: 6px; border-radius: 9px;
padding: 8px; padding: 8px;
} }
@ -249,7 +249,7 @@
#typeahead { #typeahead {
background: none; background: none;
box-shadow: none; box-shadow: none;
border-radius: 3px; border-radius: 6px;
} }
#input > *:first-child, #input > *:first-child,
@ -268,7 +268,7 @@
#list { #list {
padding: 3px; padding: 3px;
border-radius: 6px; border-radius: 9px;
background: @base01; background: @base01;
} }
@ -279,7 +279,7 @@
child:selected, child:selected,
child:hover { child:hover {
box-shadow: none; box-shadow: none;
border-radius: 3px; border-radius: 6px;
background: @base02; background: @base02;
} }

View File

@ -20,14 +20,13 @@ in {
settings.bar-0 = { settings.bar-0 = {
# layer = "top"; # layer = "top";
position = "bottom"; position = "bottom";
height = 40; height = 33;
spacing = 0; spacing = 0;
# margin-left = 3; # margin-left = 3;
# margin-right = 3; # margin-right = 3;
margin-left = 43 + 3; margin-left = 36 + 3;
margin-right = 43 + 3; margin-right = 36 + 3;
margin-bottom = 3; margin-bottom = 3;
reload_style_on_change = true;
modules-left = [ modules-left = [
"custom/launcher" "custom/launcher"
"clock" "clock"
@ -82,7 +81,7 @@ in {
}; };
}; };
"tray" = { "tray" = {
icon-size = 20; icon-size = 16;
spacing = 6; spacing = 6;
}; };
"clock" = { "clock" = {
@ -164,7 +163,7 @@ in {
}; };
"privacy" = { "privacy" = {
icon-spacing = 0; icon-spacing = 0;
icon-size = 18; icon-size = 16;
transition-duration = 250; transition-duration = 250;
screenshare = { screenshare = {
type = "screenshare"; type = "screenshare";
@ -179,54 +178,43 @@ in {
}; };
"wlr/taskbar" = { "wlr/taskbar" = {
format = "{icon}"; format = "{icon}";
icon-size = 20; icon-size = 18;
icon-theme = "${config.dconf.settings."org/gnome/desktop/interface".icon-theme}"; icon-theme = "${config.dconf.settings."org/gnome/desktop/interface".icon-theme}";
tooltip-format = "{title}"; tooltip-format = "{title}";
on-click = "activate"; on-click = "activate";
}; };
}; };
# TODO: broken padding on taskbar button
style = '' style = ''
@define-color base00 #${colors.base00}; @define-color base00 #${colors.base00}; @define-color base08 #${colors.base08};
@define-color base01 #${colors.base01}; @define-color base01 #${colors.base01}; @define-color base09 #${colors.base09};
@define-color base02 #${colors.base02}; @define-color base02 #${colors.base02}; @define-color base0A #${colors.base0A};
@define-color base03 #${colors.base03}; @define-color base03 #${colors.base03}; @define-color base0B #${colors.base0B};
@define-color base04 #${colors.base04}; @define-color base04 #${colors.base04}; @define-color base0C #${colors.base0C};
@define-color base05 #${colors.base05}; @define-color base05 #${colors.base05}; @define-color base0D #${colors.base0D};
@define-color base06 #${colors.base06}; @define-color base06 #${colors.base06}; @define-color base0E #${colors.base0E};
@define-color base07 #${colors.base07}; @define-color base07 #${colors.base07}; @define-color base0F #${colors.base0F};
@define-color base08 #${colors.base08};
@define-color base09 #${colors.base09};
@define-color base0A #${colors.base0A};
@define-color base0B #${colors.base0B};
@define-color base0C #${colors.base0C};
@define-color base0D #${colors.base0D};
@define-color base0E #${colors.base0E};
@define-color base0F #${colors.base0F};
* { * {
font-family: ${config.stylix.fonts.sansSerif.name}, FontAwesome; all: unset;
font-family: ${config.stylix.fonts.sansSerif.name}, Symbols Nerd Font, FontAwesome;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 16px;
min-width: 1em;
} }
window#waybar { .modules-left, .modules-center, .modules-right, window#waybar {
background: @base00;
border-radius: 9px;
}
.modules-left,
.modules-center,
.modules-right {
background-color: @base00; background-color: @base00;
border-radius: 9px;
color: @base05; color: @base05;
border-radius: 12px;
} }
tooltip { tooltip {
background: @base01; background: @base01;
border: 1px solid @base0D; border: 1px solid @base0D;
border-radius: 12px; border-radius: 16px;
padding: 2em;
} }
tooltip label { tooltip label {
@ -235,7 +223,7 @@ in {
button { button {
box-shadow: inset 0 -3px transparent; box-shadow: inset 0 -3px transparent;
border-radius: 3px; border-radius: 6px;
} }
button:hover { button:hover {
@ -258,10 +246,10 @@ in {
#wireplumber, #wireplumber,
#workspaces button, #workspaces button,
#workspaces { #workspaces {
border-radius: 6px; border-radius: 9px;
background-color: @base01; background-color: @base01;
margin: 3px 3px 3px 0; margin: 3px 3px 3px 0;
padding: 0 6px; padding: 0 0.42em;
} }
/* #clock, */ /* #clock, */
@ -273,15 +261,12 @@ in {
#backlight, #backlight,
#battery, #battery,
#custom-launcher,
#custom-notification, #custom-notification,
#idle_inhibitor, #idle_inhibitor,
#power-profiles-daemon,
#wireplumber { #wireplumber {
padding: 0 15px 0 10px; padding: 0 0.5em;
}
#custom-launcher,
#power-profiles-daemon {
padding: 0 17px 0 8px;
} }
#privacy, #privacy,
@ -290,39 +275,22 @@ in {
padding: 0; padding: 0;
} }
#privacy-item { #workspaces {
padding: 0 5px; padding-left: 3px;
} }
#taskbar button, #privacy-item {
#tray button { padding: 0 0.3em;
padding: 0 3px;
margin: 3px;
} }
#workspaces button { #workspaces button {
border-radius: 3px; border-radius: 6px;
padding: 0 5px; min-width: 0.4em;
margin: 3px;
} }
#battery.critical:not(.charging) { #battery.critical:not(.charging) {
background-color: @base09; background-color: @base09;
color: @base00; color: @base00;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: steps(12);
animation-iteration-count: infinite;
animation-direction: alternate;
}
#mode {
background-color: rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -3px @base05;
}
#power-profiles-daemon.balanced {
color: @base05;
} }
#power-profiles-daemon.performance { #power-profiles-daemon.performance {
@ -347,8 +315,27 @@ in {
margin: 3px 0 3px 3px; margin: 3px 0 3px 3px;
} }
#workspaces button.active,
#taskbar button.active {
background-color: @base02;
}
#workspaces button:hover,
#workspaces button.active:hover,
#taskbar button.active:hover,
#taskbar button:hover { #taskbar button:hover {
background-color: @base0D; background-color: @base0D;
color: @base00;
}
#taskbar.empty {
background-color: transparent;
}
#taskbar button,
#tray button {
min-width: 0.4em;
margin: 3px;
} }
#tray > .needs-attention { #tray > .needs-attention {
@ -360,10 +347,10 @@ in {
-gtk-icon-effect: dim; -gtk-icon-effect: dim;
} }
#workspaces button.active { /* #workspaces button.active {
color: @base00; color: @base00;
background-color: @base0D; background-color: @base0D;
} } */
label:focus { label:focus {
background-color: #000000; background-color: #000000;

View File

@ -74,16 +74,17 @@
.app-icon, .app-icon,
.image { .image {
-gtk-icon-effect: none; -gtk-icon-effect: none;
padding-right: 0.5rem;
} }
.notification-action { .notification-action {
border-radius: 6px; border-radius: 9px;
margin: 3px; margin: 3px;
} }
.close-button { .close-button {
margin: 12px; margin: 12px;
border-radius: 3px; border-radius: 6px;
} }
.notification-group.collapsed .notification-group.collapsed
@ -105,15 +106,15 @@
.notification.normal, .notification.normal,
.notification.critical, .notification.critical,
.control-center { .control-center {
border-radius: 9px; border-radius: 12px;
margin: 6px; margin: 6px;
} }
.floating-notifications, .floating-notifications,
.notification-content { .notification-content {
padding: 0.5rem;
margin: 3px; margin: 3px;
border-radius: 6px; border-radius: 9px;
border: none;
} }
.control-center-list { .control-center-list {
@ -129,7 +130,7 @@
} }
.widget-title > button { .widget-title > button {
border-radius: 6px; border-radius: 9px;
padding: 0.5rem; padding: 0.5rem;
} }
@ -142,23 +143,23 @@
} }
.widget-dnd > switch { .widget-dnd > switch {
border-radius: 6px; border-radius: 9px;
} }
.widget-dnd > switch slider { .widget-dnd > switch slider {
margin: 3px; margin: 3px;
border-radius: 3px; border-radius: 6px;
padding: 0px; padding: 0px;
} }
.widget-mpris .widget-mpris-player { .widget-mpris .widget-mpris-player {
border-radius: 9px; border-radius: 12px;
margin: 0.5rem; margin: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
} }
.widget-mpris .widget-mpris-player .widget-mpris-album-art { .widget-mpris .widget-mpris-player .widget-mpris-album-art {
border-radius: 6px; border-radius: 9px;
} }
.widget-mpris .widget-mpris-player .widget-mpris-title { .widget-mpris .widget-mpris-player .widget-mpris-title {
@ -170,7 +171,7 @@
} }
.widget-mpris .widget-mpris-player > box > button { .widget-mpris .widget-mpris-player > box > button {
border-radius: 3px; border-radius: 6px;
padding: 3px; padding: 3px;
} }
''; '';

View File

@ -351,6 +351,7 @@ in {
}; };
config = mkIf cfg.enable { config = mkIf cfg.enable {
fonts.packages = [pkgs.nerd-fonts.symbols-only];
stylix = stylix =
{ {
enable = true; enable = true;