henrov/nixos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Diverse CSS changes

Browse Source
This commit is contained in:
Henro Veijer
2026-02-27 15:05:47 +01:00
parent 51a5c4cd0b
commit 70db619283
3 changed files with 93 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
henrovnix_ok/assets/conf/desktop/hypr/hyprland.conf
+2
View File
@@ -58,6 +58,8 @@ general {
layout = scrolling layout = scrolling
resize_on_border = true resize_on_border = true
extend_border_grab_area = 20 # Makes it easier to "grab" the edge extend_border_grab_area = 20 # Makes it easier to "grab" the edge
layerrule = blur, swaync-control-center
layerrule = blur, swaync-notification-window
} }
decoration { decoration {
rounding = 5 rounding = 5
henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css
+83 -78
View File
@@ -24,179 +24,184 @@
@define-color red #f38ba8; @define-color red #f38ba8;
/* If you want even more blur-through effect, increase transparency a bit */ /* If you want even more blur-through effect, increase transparency a bit */
@define-color panel_rgba rgba(30, 30, 46, 0.78); @define-color panel_rgba rgba(30, 30, 46, 0.15);
@define-color card_rgba rgba(49, 50, 68, 0.78); @define-color card_rgba rgba(49, 50, 68, 0.15);
/* ---- Kill GTK list row selection glow (common tweak) ---- */ /* ---- Kill GTK list row selection glow (common tweak) ---- */
list, listview, row, list,
listview row, listview row:selected, listview row:hover, listview,
listview row:focus, listview row:active { row,
background-color: transparent; listview row,
background-image: none; listview row:selected,
box-shadow: none; listview row:hover,
outline: none; listview row:focus,
listview row:active {
background-color: transparent;
background-image: none;
box-shadow: none;
outline: none;
} }
/* ---- Global defaults ---- */ /* ---- Global defaults ---- */
* { * {
color: @text; color: @text;
font-family: "Aporetic Sans Mono", "Iosevka Nerd Font", "Sans"; font-family: "Aporetic Sans Mono", "Iosevka Nerd Font", "Sans";
font-size: 13px; font-size: 13px;
} }
.notification-row { .notification-row {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* Notification popup window */ /* Notification popup window */
window#notification-window { window#notification-window {
background: transparent; background: transparent;
} }
/* Control center window */ /* Control center window */
.control-center { .control-center {
background-color: @panel_rgba; background-color: @panel_rgba;
border-radius: 18px; border-radius: 18px;
padding: 14px; padding: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.45); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(186, 194, 222, 0.10); border: 1px solid rgba(186, 194, 222, 0.1);
} }
/* Widgets */ /* Widgets */
.widget-title { .widget-title {
margin: 0 0 10px 0; margin: 0 0 10px 0;
padding: 6px 10px; padding: 6px 10px;
border-radius: 14px; border-radius: 14px;
background-color: rgba(24, 24, 37, 0.70); background-color: rgba(24, 24, 37, 0.7);
border: 1px solid rgba(186, 194, 222, 0.08); border: 1px solid rgba(186, 194, 222, 0.08);
} }
.widget-title > label { .widget-title > label {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
} }
.widget-title button { .widget-title button {
border-radius: 12px; border-radius: 12px;
padding: 6px 10px; padding: 6px 10px;
background-color: rgba(69, 71, 90, 0.55); background-color: rgba(69, 71, 90, 0.55);
border: 1px solid rgba(186, 194, 222, 0.10); border: 1px solid rgba(186, 194, 222, 0.1);
box-shadow: none; box-shadow: none;
} }
.widget-title button:hover { .widget-title button:hover {
background-color: rgba(88, 91, 112, 0.55); background-color: rgba(88, 91, 112, 0.55);
} }
.widget-dnd { .widget-dnd {
margin: 0 0 12px 0; margin: 0 0 12px 0;
padding: 10px 12px; padding: 10px 12px;
border-radius: 16px; border-radius: 16px;
background-color: rgba(24, 24, 37, 0.65); background-color: rgba(24, 24, 37, 0.65);
border: 1px solid rgba(186, 194, 222, 0.08); border: 1px solid rgba(186, 194, 222, 0.08);
} }
.widget-dnd .switch { .widget-dnd .switch {
border-radius: 999px; border-radius: 999px;
} }
.widget-notifications { .widget-notifications {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* ---- Notification cards (both popup + center list) ---- */ /* ---- Notification cards (both popup + center list) ---- */
.notification-background { .notification-background {
margin: 10px 0; margin: 10px 0;
padding: 0; padding: 0;
background: transparent; background: transparent;
} }
.notification-background .notification { .notification-background .notification {
background-color: @card_rgba; background-color: @card_rgba;
border-radius: 16px; border-radius: 16px;
padding: 12px 12px; padding: 12px 12px;
border: 1px solid rgba(186, 194, 222, 0.10); border: 1px solid rgba(186, 194, 222, 0.1);
box-shadow: 0 8px 22px rgba(0,0,0,0.35); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
} }
/* Left colored accent bar using urgency */ /* Left colored accent bar using urgency */
.notification.critical { .notification.critical {
border-left: 4px solid @red; border-left: 4px solid @red;
} }
.notification.low { .notification.low {
border-left: 4px solid @blue; border-left: 4px solid @blue;
} }
.notification.normal { .notification.normal {
border-left: 4px solid @green; border-left: 4px solid @green;
} }
/* Header/meta */ /* Header/meta */
.notification .app-name { .notification .app-name {
color: @subtext1; color: @subtext1;
font-weight: 700; font-weight: 700;
} }
.notification .time { .notification .time {
color: @subtext0; color: @subtext0;
font-size: 12px; font-size: 12px;
} }
/* Text */ /* Text */
.notification .summary { .notification .summary {
color: @text; color: @text;
font-weight: 800; font-weight: 800;
font-size: 14px; font-size: 14px;
margin-top: 2px; margin-top: 2px;
} }
.notification .body { .notification .body {
color: @subtext1; color: @subtext1;
margin-top: 6px; margin-top: 6px;
line-height: 1.25; line-height: 1.25;
} }
/* Icons */ /* Icons */
.notification .image { .notification .image {
border-radius: 12px; border-radius: 12px;
} }
.notification .app-icon { .notification .app-icon {
border-radius: 10px; border-radius: 10px;
} }
/* Buttons */ /* Buttons */
.notification button { .notification button {
border-radius: 12px; border-radius: 12px;
background-color: rgba(69, 71, 90, 0.55); background-color: rgba(69, 71, 90, 0.55);
border: 1px solid rgba(186, 194, 222, 0.10); border: 1px solid rgba(186, 194, 222, 0.1);
box-shadow: none; box-shadow: none;
padding: 6px 10px; padding: 6px 10px;
} }
.notification button:hover { .notification button:hover {
background-color: rgba(88, 91, 112, 0.55); background-color: rgba(88, 91, 112, 0.55);
} }
.notification .close-button { .notification .close-button {
border-radius: 12px; border-radius: 12px;
background-color: rgba(243, 139, 168, 0.12); background-color: rgba(243, 139, 168, 0.12);
border: 1px solid rgba(243, 139, 168, 0.18); border: 1px solid rgba(243, 139, 168, 0.18);
} }
.notification .close-button:hover { .notification .close-button:hover {
background-color: rgba(243, 139, 168, 0.20); background-color: rgba(243, 139, 168, 0.2);
} }
/* Empty state */ /* Empty state */
.control-center .placeholder { .control-center .placeholder {
color: @subtext0; color: @subtext0;
} }
/* Optional: nicer separators if you use them in your build */ /* Optional: nicer separators if you use them in your build */
separator { separator {
background: rgba(186, 194, 222, 0.08); background: rgba(186, 194, 222, 0.08);
} }
henrovnix_ok/assets/conf/desktop/waybar/style.css
+8 -18
View File
@@ -38,28 +38,18 @@ window#waybar {
border-radius: 10px; border-radius: 10px;
} }
/* Main notification window */ #custom-notifications {
.notification-row, margin: 0 4px;
.notification, padding: 0 4px;
.notification-group { min-width: 0;
background-color: rgba(30, 30, 46, 0.15);
border: 1px solid rgba(255, 255, 255, 0.08);
} }
/* Control center */ #custom-notifications.empty {
.control-center { color: @overlay1;
background-color: rgba(30, 30, 46, 0.15);
} }
/* Notification body */ #custom-notifications.unread {
.notification-content { color: @yellow;
background-color: rgba(30, 30, 46, 0.15);
}
/* Optional: blur look */
.notification,
.control-center {
backdrop-filter: blur(8px);
} }
#workspaces button:hover { #workspaces button:hover {