Big changes concerning color scheme (switching to seventy nine), reorganized monitors config files, new notification daemon and quick settings panel, new scripts and other minor changes

This commit is contained in:
Gu://em_ 2025-06-04 19:28:09 +02:00
parent 746fa5a835
commit 602e3f2f97
28 changed files with 1034 additions and 60 deletions

20
.config/swaync/colors.css Normal file
View file

@ -0,0 +1,20 @@
@define-color foreground #f5dbb0;
@define-color background #0C0D0F;
@define-color cursor #f5dbb0;
@define-color color0 #0C0D0F;
@define-color color1 #9A6130;
@define-color color2 #95725E;
@define-color color3 #D68A38;
@define-color color4 #B48666;
@define-color color5 #D69B64;
@define-color color6 #F1B268;
@define-color color7 #f5dbb0;
@define-color color8 #ab997b;
@define-color color9 #FF0000;
@define-color color10 #95725E;
@define-color color11 #D68A38;
@define-color color12 #B48666;
@define-color color13 #D69B64;
@define-color color14 #F1B268;
@define-color color15 #f5dbb0;

113
.config/swaync/config.json Normal file
View file

@ -0,0 +1,113 @@
{
"$schema": "/etc/xdg/swaync/configSchema.json",
"positionX": "right",
"positionY": "top",
"layer": "overlay",
"control-center-layer": "top",
"layer-shell": true,
"cssPriority": "application",
"control-center-width": 350,
"control-center-margin-top": 2,
"control-center-margin-bottom": 2,
"control-center-margin-right": 2,
"control-center-margin-left": 2,
"notification-2fa-action": true,
"notification-inline-replies": true,
"notification-window-width": 350,
"notification-icon-size": 60,
"notification-body-image-height": 180,
"notification-body-image-width": 180,
"timeout": 4,
"timeout-low": 2,
"timeout-critical": 0,
"fit-to-screen": true,
"keyboard-shortcuts": true,
"image-visibility": "when available",
"transition-time": 200,
"hide-on-clear": false,
"hide-on-action": true,
"script-fail-notify": true,
"widgets": [
"title",
"notifications",
"mpris",
"volume",
"backlight",
"buttons-grid"
],
"widget-config": {
"title": {
"text": "Notification Center",
"clear-all-button": true,
"button-text": "󰆴"
},
"label": {
"max-lines":1,
"text": "Notification Center!"
},
"mpris": {
"image-size": 80,
"image-radius": 0
},
"volume": {
"label": "󰕾 "
},
"backlight": {
"label": "󰃟 "
},
"buttons-grid": {
"actions": [
{
"label": "󰝟",
"command": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
"type": "toggle"
},
{
"label": "󰍭",
"command": "pactl set-source-mute @DEFAULT_SOURCE@ toggle",
"type": "toggle"
},
{
"label": "",
"command": "kitty nmtui"
},
{
"label": "",
"command": "blueman-manager"
},
{
"label":"󰤄",
"command": "swaync-client -d",
"type":"toggle"
},
{
"label": "",
"command": "kitty vim ~/.config/hypr"
},
{
"label": "",
"command": "kitty btop"
},
{
"label": "",
"command": "hyprlock"
},
{
"label":"",
"command": "reboot"
},
{
"label":"",
"command": "shutdown now"
}
]
}
}
}

View file

@ -0,0 +1,7 @@
@define-color active #ec775c;
@define-color background_dark #1c2128;
@define-color background_light #22272e;
@define-color background_transparent alpha(#18191c, 0.7);
@define-color foreground #e4e8ed;
@define-color border #444C56;
@define-color alert #ea4545;

486
.config/swaync/style.css Normal file
View file

@ -0,0 +1,486 @@
@import url('seventy-nine.css');
@define-color control-background alpha(@background_dark, 0.7);
* {
all: unset;
font-family: JetBrainsMono Nerd Font;
transition: 0.1s;
font-size: 1.3rem;
}
/*--------------- Notifications ---------------*/
.floating-notifications.background .notification-row {
padding: 0.5rem;
}
.floating-notifications.background .notification-row .notification-background {
border-radius: 0.3rem;
background-color: @background_light;
color: @foreground;
border: 1px solid @border;
}
.floating-notifications.background
.notification-row
.notification-background
.notification {
padding: 0.6rem;
border-radius: 0.2rem;
}
.floating-notifications.background
.notification-row
.notification-background
.notification.critical {
border: 1px solid @alert;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
.notification-content
.summary {
margin: 0.2rem;
color: @foreground;
font-weight: bold;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
.notification-content
.body {
margin: 0.2rem;
color: @foreground;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
> *:last-child
> * {
min-height: 3rem;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action {
border-radius: 0.2rem;
color: @foreground;
background-color: @background_dark;
border: 1px solid @border;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action:hover {
background-color: #26233a;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action:active {
background-color: @border;
}
.floating-notifications.background
.notification-row
.notification-background
.close-button {
margin: 0.2rem;
padding: 0.25rem;
border-radius: 0.2rem;
color: @foreground;
background-color: alpha(@alert, 0);
}
.floating-notifications.background
.notification-row
.notification-background
.close-button:hover {
/* color: #191724; */
background-color: @alert;
}
.floating-notifications.background
.notification-row
.notification-background
.close-button:active {
background-color: @foreground;
}
/*--------------- Control center ---------------*/
.control-center {
border-radius: .4rem;
background-color: @background_transparent;
color: @foreground;
padding: 1.2rem;
border: 1px solid @border;
}
.control-center .widget-title {
color: @foreground;
font-weight: bold;
}
.control-center .widget-title button {
border-radius: 2rem;
color: @foreground;
background-color: @border;
border: 1px solid @border;
padding: .2rem 1.5rem;
}
.control-center .widget-title button:hover {
background-color: @alert;
}
.control-center .widget-title button:active {
background-color: @border;
}
.control-center .notification-row .notification-background {
border-radius: 0.5rem;
margin: 0.5rem;
background-color: @background_light;
color: @foreground;
border: 1px solid @border;
}
.control-center .notification-row .notification-background .notification {
padding: 0.7rem;
border-radius: 0.2rem;
}
.control-center
.notification-row
.notification-background
.notification.critical {
border: 1px solid @alert;
}
.control-center
.notification-row
.notification-background
.notification
.notification-content {
color: @foreground;
}
.control-center
.notification-row
.notification-background
.notification
.notification-content
.summary {
margin: 0.2rem;
color: @foreground;
font-weight: bold;
}
.control-center
.notification-row
.notification-background
.notification
.notification-content
.body {
margin: 0.2rem;
color: @foreground;
}
.control-center
.notification-row
.notification-background
.notification
> *:last-child
> * {
min-height: 3rem;
}
.control-center
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action {
border-radius: 0.2rem;
color: @foreground;
background-color: #1f1d2e;
border: 1px solid @border;
}
.control-center
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action:hover {
background-color: @background_light;
}
.control-center
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action:active {
background-color: @border;
}
.control-center .notification-row .notification-background .close-button {
margin: 0.5rem;
padding: 0.25rem;
border-radius: 0.2rem;
color: @foreground;
background-color: alpha(@alert, 0);
}
.control-center .notification-row .notification-background .close-button:hover {
background-color: @alert;
}
.control-center
.notification-row
.notification-background
.close-button:active {
background-color: @foreground;
}
progressbar,
progress,
trough {
border-radius: 0.2rem;
}
.notification.critical progress {
background-color: @alert;
}
.notification.low progress,
.notification.normal progress {
background-color: #9ccfd8;
}
trough {
background-color: #1f1d2e;
}
.control-center trough {
background-color: @border;
}
.control-center-dnd {
margin: 1rem 0;
border-radius: 0.2rem;
}
.control-center-dnd slider {
background: #26233a;
border-radius: 0.2rem;
}
.widget-dnd {
color: #908caa;
}
.widget-dnd > switch {
border-radius: 0.2rem;
background: #26233a;
border: 1px solid @border;
}
.widget-dnd > switch:checked slider {
background: #31748f;
}
.widget-dnd > switch slider {
background: @border;
border-radius: 0.2rem;
margin: 0.25rem;
}
/*--------------- Media player ---------------*/
.widget-mpris {
}
.widget-mpris .widget-mpris-player {
padding: 16px;
margin: 0.5rem;
background-color: @mpris-album-art-overlay;
border-radius: 0.7rem;
}
.widget-mpris .widget-mpris-player button:hover {
all: unset;
background: @bg-hover;
text-shadow: none;
border-radius: 0.5rem;
border: none;
padding: 5px;
margin: 5px;
transition: all 0.2s ease;
}
.widget-mpris .widget-mpris-player button {
color:@text;
text-shadow: none;
border-radius: 2rem;
border: none;
padding: 5px;
margin: 5px;
transition: all 0.2s ease;
}
.widget-mpris .widget-mpris-player button:not(.selected) {
background: transparent;
border: 2px solid transparent;
}
.widget-mpris .widget-mpris-player button:hover {
border: 2px solid transparent;
}
.widget-mpris .widget-mpris-player .widget-mpris-album-art {
border-radius: 0.5rem;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.widget-mpris .widget-mpris-player .widget-mpris-title {
font-weight: bold;
font-size: 1.25rem;
}
.widget-mpris .widget-mpris-player .widget-mpris-subtitle {
font-size: 1.1rem;
}
.widget-mpris .widget-mpris-player > box > button:hover {
background-color: @mpris-button-hover;
}
/*--------------- Sliders ---------------*/
.widget-volume {
background-color: transparent;
padding: 8px;
/* margin: 8px; */
margin-bottom: 0.5rem;
border-radius: 12px;
}
.widget-backlight {
background-color: transparent;
padding: 8px;
/* margin: 8px; */
margin-bottom: 1.5rem;
border-radius: 12px;
}
trough {
border-radius: 20px;
background: transparent;
}
trough highlight {
padding: 5px;
background: @active;
border-radius: 20px;
transition: all .2s ease;
}
trough highlight:hover {
padding: 5px;
background: @active;
border-radius: 20px;
transition: all .2s ease;
}
trough slider {
background: transparent;
}
trough slider:hover {
background: transparent;
}
/*--------------- Buttons grid ---------------*/
.widget-buttons-grid {
padding-left: 0.2rem;
padding-right: 0.2rem;
padding-bottom: 0.2rem;
/* margin: 1rem; */
border-radius: 0.2rem;
background:transparent;
}
.widget-buttons-grid>flowbox>flowboxchild>button label {
font-size: 20px;
color: @foreground;
transition: all .2s ease;
}
.widget-buttons-grid>flowbox>flowboxchild>button:hover label {
font-size: 20px;
color: @text;
transition: all .2s ease;
}
.widget-buttons-grid > flowbox > flowboxchild > button {
background: alpha(@border, 0.5);
border-radius: 0.2rem;
padding: 0.7rem 2rem;
margin: 0.2rem;
text-shadow:none;
transition: all .2s ease;
}
.widget-buttons-grid > flowbox > flowboxchild > button:hover {
background: @border;
box-shadow: 0px 0px 2px rgba(0, 0, 0, .2);
transition: all .2s ease;
}
.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked {
background: @active;
}
.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked label {
color: @background;
}

View file

@ -0,0 +1,360 @@
@import url('colors.css');
/*@import url('../../.cache/wal/colors-waybar.css');*/
@define-color mpris-album-art-overlay alpha(@background, 0.55);
@define-color mpris-button-hover alpha(@background, 0.50);
@define-color text @color15;
@define-color bg alpha(@background,.5);
@define-color bg-hover alpha(@background,.8);
@define-color mycolor @color9;
@define-color border-color alpha(@mycolor, 0.15);
@keyframes notif_anim{
0% {
padding-left:20;
/*margin-left:50;
margin-right:50;*/
}
100% {
padding:0;
margin:0;
}
}
* {
outline:none;
}
.control-center .notification-row {
background-color: unset;
}
.control-center .notification-row .notification-background .notification,
.control-center .notification-row .notification-background .notification .notification-content,
.floating-notifications .notification-row .notification-background .notification,
.floating-notifications.background .notification-background .notification .notification-content {
}
.notification{
background: alpha(@mycolor,.5);
}
.control-center .notification-row .notification-background .notification {
margin-top: 0.150rem;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
background: alpha(@mycolor,.3);
}
.floating-notifications .notification{
animation: notif_anim .2s ease-out;
}
.control-center .notification-row .notification-background .notification box,
.control-center .notification-row .notification-background .notification widget,
.control-center .notification-row .notification-background .notification .notification-content,
.floating-notifications .notification-row .notification-background .notification box,
.floating-notifications .notification-row .notification-background .notification widget,
.floating-notifications.background .notification-background .notification .notification-content {
border-radius: 0.818rem;
}
.notification widget:hover{
background:alpha(@mycolor,.2);
}
.floating-notifications.background .notification-background .notification .notification-content,
.control-center .notification-background .notification .notification-content {
padding-top: 0.818rem;
padding-right: unset;
margin-right: unset;
}
.control-center .notification-row .notification-background .notification.low .notification-content label,
.control-center .notification-row .notification-background .notification.normal .notification-content label,
.floating-notifications.background .notification-background .notification.low .notification-content label,
.floating-notifications.background .notification-background .notification.normal .notification-content label {
padding-top:10px;
padding-left:10px;
padding-right:10px;
}
.control-center .notification-row .notification-background .notification..notification-content image,
.control-center .notification-row .notification-background .notification.normal .notification-content image,
.floating-notifications.background .notification-background .notification.low .notification-content image,
.floating-notifications.background .notification-background .notification.normal .notification-content image {
background-color: unset;
}
.control-center .notification-row .notification-background .notification.low .notification-content .body,
.control-center .notification-row .notification-background .notification.normal .notification-content .body,
.floating-notifications.background .notification-background .notification.low .notification-content .body,
.floating-notifications.background .notification-background .notification.normal .notification-content .body {
color: @text;
}
.control-center .notification-row .notification-background .notification.critical .notification-content,
.floating-notifications.background .notification-background .notification.critical .notification-content {
background-color: #ffb4a9;
}
.control-center .notification-row .notification-background .notification.critical .notification-content image,
.floating-notifications.background .notification-background .notification.critical .notification-content image{
background-color: unset;
color: #ffb4a9;
}
.control-center .notification-row .notification-background .notification.critical .notification-content label,
.floating-notifications.background .notification-background .notification.critical .notification-content label {
color: #680003;
}
.notification-content{
padding:5;
}
.control-center .notification-row .notification-background .notification .notification-content .summary,
.floating-notifications.background .notification-background .notification .notification-content .summary {
font-family: 'CodeNewRoman Nerd Font Propo';
font-size: 0.9909rem;
font-weight: 500;
}
.control-center .notification-row .notification-background .notification .notification-content .time,
.floating-notifications.background .notification-background .notification .notification-content .time {
font-size: 0.8291rem;
font-weight: 500;
margin-right: 1rem;
padding-right: unset;
}
.control-center .notification-row .notification-background .notification .notification-content .body,
.floating-notifications.background .notification-background .notification .notification-content .body {
font-family: 'CodeNewRoman Nerd Font Propo';
font-size: 0.8891rem;
font-weight: 400;
margin-top: 0.310rem;
padding-right: unset;
margin-right: unset;
}
.control-center .notification-row .close-button,
.floating-notifications.background .close-button {
all:unset;
background-color: unset;
border-radius: 0%;
border: none;
box-shadow: none;
margin-right: 0px;
margin-top: 3px;
margin-bottom: unset;
padding-bottom: unset;
min-height: 20px;
min-width: 20px;
text-shadow: none;
color:@text;
}
.control-center .notification-row .close-button:hover,
.floating-notifications.background .close-button:hover {
all:unset;
background-color: @bg;
border-radius: 100%;
border: none;
box-shadow: none;
margin-right: 0px;
margin-top: 3px;
margin-bottom: unset;
padding-bottom: unset;
min-height: 20px;
min-width: 20px;
text-shadow: none;
color:@text;
}
.control-center {
background: @bg;
color: @text;
border-radius: 10px;
border:none;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .65);
}
.widget-title {
padding:unset;
margin:unset;
color: @text;
padding-left:20px;
padding-top:20px;
}
.widget-title > button {
padding:unset;
margin:unset;
font-size: initial;
color: @text;
text-shadow: none;
background: rgba(255,85,85,.3);
border: none;
box-shadow: none;
border-radius: 12px;
padding:0px 10px;
margin-right:20px;
margin-top:3px;
transition: all .7s ease;
}
.widget-title > button:hover {
border: none;
background: @bg-hover;
transition: all .7s ease;
box-shadow: 0px 0px 5px rgba(0, 0, 0, .65);
}
.widget-label {
margin: 8px;
}
.widget-label > label {
font-size: 1.1rem;
}
.widget-mpris {
}
.widget-mpris .widget-mpris-player {
padding: 16px;
margin: 16px 20px;
background-color: @mpris-album-art-overlay;
border-radius: 12px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .65);
}
.widget-mpris .widget-mpris-player button:hover {
all: unset;
background: @bg-hover;
text-shadow: none;
border-radius: 15px;
border: none;
padding: 5px;
margin: 5px;
transition: all 0.5s ease;
}
.widget-mpris .widget-mpris-player button {
color:@text;
text-shadow: none;
border-radius: 15px;
border: none;
padding: 5px;
margin: 5px;
transition: all 0.5s ease;
}
.widget-mpris .widget-mpris-player button:not(.selected) {
background: transparent;
border: 2px solid transparent;
}
.widget-mpris .widget-mpris-player button:hover {
border: 2px solid transparent;
}
.widget-mpris .widget-mpris-player .widget-mpris-album-art {
border-radius: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
}
.widget-mpris .widget-mpris-player .widget-mpris-title {
font-weight: bold;
font-size: 1.25rem;
}
.widget-mpris .widget-mpris-player .widget-mpris-subtitle {
font-size: 1.1rem;
}
.widget-mpris .widget-mpris-player > box > button:hover {
background-color: @mpris-button-hover;
}
.widget-buttons-grid {
font-family:"CodeNewRoman Nerd Font Propo";
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
margin: 10px;
border-radius: 12px;
background:transparent;
}
.widget-buttons-grid>flowbox>flowboxchild>button label {
font-size: 20px;
color: @color7;
transition: all .7s ease;
}
.widget-buttons-grid>flowbox>flowboxchild>button:hover label {
font-size: 20px;
color: @text;
transition: all .7s ease;
}
.widget-buttons-grid > flowbox > flowboxchild > button {
background: transparent;
border-radius: 12px;
text-shadow:none;
box-shadow: 0px 0px 8px rgba(255,255,255, .02);
transition: all .5s ease;
}
.widget-buttons-grid > flowbox > flowboxchild > button:hover {
background: @color4;
box-shadow: 0px 0px 2px rgba(0, 0, 0, .2);
transition: all .5s ease;
}
.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked {
background: @mycolor;
}
.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked label {
color: @background;
}
.widget-menubar > box > .menu-button-bar > button {
border: none;
background: transparent;
}
.topbar-buttons > button {
border: none;
background: transparent;
}
trough {
border-radius: 20px;
background: transparent;
}
trough highlight {
padding: 5px;
background: @mycolor;
border-radius: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
transition: all .7s ease;
}
trough highlight:hover {
padding: 5px;
background: @mycolor;
border-radius: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
transition: all .7s ease;
}
trough slider {
background: transparent;
}
trough slider:hover {
background: transparent;
}
.widget-volume {
background-color: transparent;
padding: 8px;
margin: 8px;
border-radius: 12px;
}
.widget-backlight {
background-color: transparent;
padding: 8px;
margin: 8px;
border-radius: 12px;
}