wt/dotfiles
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated swaync styles

Browse Source
This commit is contained in:
wt committed 2025-03-24 11:08:12 +07:00
1 parent f7407547a9
commit c5f8fb741a
1 file changed
+371 -254
Download Patch File Download Diff File Expand all files Collapse all files
swaync/style.css
+371 -254
View File
@@ -10,470 +10,587 @@
@define-color noti-close-bg-hover rgba(255, 255, 255, 0.15); @define-color noti-close-bg-hover rgba(255, 255, 255, 0.15);
@define-color text-color rgb(255, 255, 255); @define-color text-color rgb(255, 255, 255);
@define-color text-color-disabled rgb(150, 150, 150); @define-color text-color-disabled rgb(150, 150, 150);
@define-color bg-selected rgb(0, 128, 255); @define-color bg-selected rgb(128, 128, 128);
@import url("/home/tola/.cache/wal/colors-waybar.css")
@define-color foreground rgb(100, 100, 100);
@define-color background #0F161E;
@define-color cursor rgb(100, 100, 100);
@define-color color0 #0F161E;
@define-color color1 rgb(100, 100, 100);
@define-color color2 #595A59;
@define-color color3 rgb(100, 100, 100);
@define-color color4 rgb(100, 100, 100);
@define-color color5 rgb(200, 200, 200);
@define-color color6 rgb(100, 100, 100);
@define-color color7 rgb(200, 200, 200);
@define-color color8 rgb(250, 250, 250);
@define-color color9 #32514E;
@define-color color10 #595A59;
@define-color color11 #B85154;
@define-color color12 #30A95B;
@define-color color13 #B6A743;
@define-color color14 #94439B;
@define-color color15 #8ae1c1;
.testing { .testing {
background-color: red; background-color: red;
} }
.control-center { .control-center {
background: alpha(@background, 0.6); background: black;
border-radius: 24px; border-radius: 24px;
border: 0px solid @foreground; border: 0px solid @foreground;
margin: 2px; margin: 2px;
padding: 4px; padding: 4px;
} }
.control-center-list { .control-center-list {
background: transparent; background: transparent;
} }
.control-center-list-placeholder { .control-center-list-placeholder {
opacity: 0.8; opacity: 0.8;
} }
/* Window behind control center and on all other monitors */ /* Window behind control center and on all other monitors */
.blank-window { .blank-window {
background: transparent; background: transparent;
} }
/*** Widgets ***/ /*** Widgets ***/
/* Title widget */ /* Title widget */
.widget-title { .widget-title {
margin: 8px; margin: 8px;
font-size: 1.5rem; font-size: 1.5rem;
background: alpha(@color0,0.0); background: alpha(@color0, 0);
} }
.widget-title > button { .widget-title > button {
font-size: initial; font-size: initial;
color:@color7; color: @color7;
text-shadow: none; text-shadow: none;
background: alpha(@background,0.0); background: alpha(@background, 0);
border: 1px solid alpha(@color7,0.5); border: 1px solid alpha(@color7, 0.5);
box-shadow: none; box-shadow: none;
border-radius: 12px; border-radius: 12px;
} }
.widget-title > button:hover { .widget-title > button:hover {
background: @color1; background: @color1;
} }
.widget-label { .widget-label {
background: @color0; background: @color0;
padding: 20px; padding: 20px;
padding-bottom: 50px; padding-bottom: 50px;
border-radius: 20px; border-radius: 20px;
} }
/* DND widget */ /* DND widget */
.widget-dnd { .widget-dnd {
background-color: @color; background-color: @color;
} }
.widget-dnd > switch { .widget-dnd > switch {
font-size: initial; font-size: initial;
border-radius: 14px; border-radius: 14px;
background: @noti-bg; background: @noti-bg;
border: 2px solid @noti-border-color; border: 2px solid @noti-border-color;
box-shadow: none; box-shadow: none;
} }
.widget-dnd > switch:checked { .widget-dnd > switch:checked {
background: @color5; background: @color5;
} }
.widget-dnd > switch slider { .widget-dnd > switch slider {
background: @noti-bg-hover; background: @noti-bg-hover;
border-radius: 12px; border-radius: 12px;
} }
/* Label widget */ /* Label widget */
.widget-label { .widget-label {
margin: 8px; margin: 8px;
} }
.widget-label > label { .widget-label > label {
font-size: 1.1rem; font-size: 1.1rem;
} }
/* Mpris widget */ /* Mpris widget */
.widget-mpris { .widget-mpris {
font-family: "JetBrains Mono Nerd Font"; font-family: "JetBrains Mono Nerd Font";
/* The parent to all players */ /* The parent to all players */
border: 0px; border: 0px;
} }
.widget-mpris-player { .widget-mpris-player {
padding: 14px; padding: 14px;
margin: 14px; margin: 14px;
background-color: @mpris-album-art-overlay; background-color: @mpris-album-art-overlay;
border-radius: 20px; border-radius: 20px;
} }
.widget-mpris-album-art { .widget-mpris-album-art {
border-radius: 12px; border-radius: 12px;
} }
.widget-mpris-player button:hover { .widget-mpris-player button:hover {
/* The media player buttons (play, pause, next, etc...) */ /* The media player buttons (play, pause, next, etc...) */
background: @noti-bg-hover; background: @noti-bg-hover;
} }
.widget-mpris > box > button { .widget-mpris > box > button {
/* Change player side buttons */ /* Change player side buttons */
} }
.widget-mpris > box > button:disabled { .widget-mpris > box > button:disabled {
/* Change player side buttons insensitive */ /* Change player side buttons insensitive */
} }
.widget-mpris-title { .widget-mpris-title {
font-family: "JetBrains Mono Nerd Font"; font-family: "JetBrains Mono Nerd Font";
font-weight: bold; font-weight: bold;
font-size: 1.25rem; font-size: 1.25rem;
} }
.widget-mpris-subtitle { .widget-mpris-subtitle {
font-family: "JetBrains Mono Nerd Font"; font-family: "JetBrains Mono Nerd Font";
font-size: 1.1rem; font-size: 1.1rem;
} }
/* Buttons widget */ /* Buttons widget */
.widget-buttons-grid { .widget-buttons-grid {
font-size: 15px; font-size: 15px;
background: alpha(@background, 0.9); background: alpha(@background, 0.9);
font-family: "JetBrains Mono Nerd Font"; font-family: "JetBrains Mono Nerd Font";
padding-left: 5px; padding-left: 5px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 20px; border-radius: 20px;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
background-color: alpha(@background, 0.9); background-color: alpha(@background, 0.9);
} }
.widget-buttons-grid > flowbox > flowboxchild > button { .widget-buttons-grid > flowbox > flowboxchild > button {
padding: 10px; padding: 10px;
background: @color1; background: @color1;
color:@color7; color: @color7;
border-radius: 20px; border-radius: 20px;
margin: 2px; margin: 2px;
border: 0px solid #04030a; border: 0px solid #04030a;
} }
.widget-buttons-grid > flowbox > flowboxchild > button:hover { .widget-buttons-grid > flowbox > flowboxchild > button:hover {
background: @color4; background: @color4;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
/* Menubar widget */ /* Menubar widget */
.widget-menubar > box > .menu-button-bar > button { .widget-menubar > box > .menu-button-bar > button {
border: none; border: none;
background: transparent; background: transparent;
background: red; background: red;
} }
.topbar-buttons > button { .topbar-buttons > button {
/* Name defined in config after # */ /* Name defined in config after # */
border: none; border: none;
background: transparent; background: transparent;
background: rgba(69, 133, 136, 1); background: rgba(133, 133, 133, 1);
} }
/* Volume widget */ /* Volume widget */
trough { trough {
border-radius: 20px; border-radius: 20px;
background: @background; background: @background;
border: 1px solid @background; border: 1px solid @background;
} }
trough highlight { trough highlight {
/* ´trough´ is the background of the slider, ´highlight´ is the actual slider */ /* ´trough´ is the background of the slider, ´highlight´ is the actual slider */
padding-top: 1px; padding-top: 1px;
background: @color4; background: @color4;
border: 1px solid @color4; border: 1px solid @color4;
border-radius: 20px; border-radius: 20px;
} }
trough slider { trough slider {
padding: 1px; padding: 1px;
background: @color4; background: @color4;
border: 1px solid @color4; border: 1px solid gray;
} }
trough slider:hover { trough slider:hover {
padding: 1px; padding: 1px;
background: @color4; background: @color4;
} }
.widget-volume { .widget-volume {
background-color: alpha(@background, 0.0); background-color: alpha(@background, 0);
border-radius: 20px 20px 0px 0px; border-radius: 20px 20px 0px 0px;
font-size: 15px; font-size: 15px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
padding-bottom: 5px; padding-bottom: 5px;
border: 0px solid transparent; border: 0px solid transparent;
} }
.widget-backlight { .widget-backlight {
padding-left: 5px; padding-left: 5px;
background-color: alpha(@background, 0.0); background-color: alpha(@background, 0);
font-size: 15px; font-size: 15px;
margin-top: -8px; margin-top: -8px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 0px 0px 20px 20px; border-radius: 0px 0px 20px 20px;
border: 0px solid transparent; border: 0px solid transparent;
} }
/* Title widget */ /* Title widget */
.widget-inhibitors { .widget-inhibitors {
margin: 8px; margin: 8px;
font-size: 1.5rem; font-size: 1.5rem;
} }
.widget-inhibitors > button { .widget-inhibitors > button {
font-size: initial; font-size: initial;
color: white; color: white;
text-shadow: none; text-shadow: none;
background: @noti-bg; background: @noti-bg;
border: 1px solid @noti-border-color; border: 1px solid @noti-border-color;
box-shadow: none; box-shadow: none;
border-radius: 12px; border-radius: 12px;
} }
.widget-inhibitors > button:hover { .widget-inhibitors > button:hover {
background: @noti-bg-hover; background: @noti-bg-hover;
} }
.notification-row { .notification-row {
outline: none; outline: none;
} }
.notification-row:focus, .notification-row:focus,
.notification-row:hover { .notification-row:hover {
background: alpha(@color14, 0.5); /* @noti-bg-focus */ background: alpha(@color14, 0.5); /* @noti-bg-focus */
} }
.notification-row .notification-background { .notification-row .notification-background {
padding: 6px 12px; padding: 6px 12px;
} }
.notification-row .notification-background .close-button { .notification-row .notification-background .close-button {
/* The notification Close Button */ /* The notification Close Button */
background: alpha(@color4, 0.5); /* @noti-close-bg */ background: alpha(@color4, 0.5); /* @noti-close-bg */
color: alpha(@color15, 1.0); /* @text-color */ color: alpha(@color15, 1); /* @text-color */
text-shadow: none; text-shadow: none;
padding: 0; padding: 0;
border-radius: 100%; border-radius: 100%;
margin-top: 5px; margin-top: 5px;
margin-right: 5px; margin-right: 5px;
box-shadow: none; box-shadow: none;
border: none; border: none;
min-width: 24px; min-width: 24px;
min-height: 24px; min-height: 24px;
} }
.notification-row .notification-background .close-button:hover { .notification-row .notification-background .close-button:hover {
background: alpha(@color12, 0.5); /* @noti-close-bg-hover */ background: alpha(@color12, 0.5); /* @noti-close-bg-hover */
transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out;
} }
.notification-row .notification-background .notification { .notification-row .notification-background .notification {
/* The actual notification */ /* The actual notification */
border-radius: 12px; border-radius: 12px;
border: 2px solid alpha(@color8, 0.5); /* @border */ border: 2px solid alpha(@color8, 0.5); /* @border */
padding: 0; padding: 0;
transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out;
background: alpha(@color0, 0.5); /* @noti-bg */ background: alpha(@color0, 0.5); /* @noti-bg */
} }
.notification-row .notification-background .notification.low { .notification-row .notification-background .notification.low {
/* Low Priority Notification */ /* Low Priority Notification */
} }
.notification-row .notification-background .notification.normal { .notification-row .notification-background .notification.normal {
/* Normal Priority Notification */ /* Normal Priority Notification */
} }
.notification-row .notification-background .notification.critical { .notification-row .notification-background .notification.critical {
/* Critical Priority Notification */ /* Critical Priority Notification */
} }
.notification-row .notification-background .notification .notification-action, .notification-row .notification-background .notification .notification-action,
.notification-row .notification-background .notification .notification-default-action { .notification-row
padding: 4px; .notification-background
margin: 0; .notification
box-shadow: none; .notification-default-action {
background: transparent; padding: 4px;
border: none; margin: 0;
color: alpha(@color15, 1.0); /* @text-color */ box-shadow: none;
transition: background 0.15s ease-in-out; background: transparent;
border: none;
color: alpha(@color15, 1); /* @text-color */
transition: background 0.15s ease-in-out;
} }
.notification-row .notification-background .notification .notification-action:hover, .notification-row
.notification-row .notification-background .notification .notification-default-action:hover { .notification-background
background: alpha(@color13, 0.5); /* @noti-bg-hover */ .notification
.notification-action:hover,
.notification-row
.notification-background
.notification
.notification-default-action:hover {
background: alpha(@color13, 0.5); /* @noti-bg-hover */
} }
.notification-row .notification-background .notification .notification-default-action { .notification-row
/* The large action that also displays the notification summary and body */ .notification-background
border-radius: 12px; .notification
.notification-default-action {
/* The large action that also displays the notification summary and body */
border-radius: 12px;
} }
.notification-row .notification-background .notification .notification-default-action:not(:only-child) { .notification-row
/* When alternative actions are visible */ .notification-background
border-bottom-left-radius: 0px; .notification
border-bottom-right-radius: 0px; .notification-default-action:not(:only-child) {
/* When alternative actions are visible */
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content { .notification-row
background: transparent; .notification-background
border-radius: 12px; .notification
padding: 4px; .notification-default-action
.notification-content {
background: transparent;
border-radius: 12px;
padding: 4px;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .image { .notification-row
/* Notification Primary Image */ .notification-background
border-radius: 100px; .notification
/* Size in px */ .notification-default-action
margin: 4px; .notification-content
.image {
/* Notification Primary Image */
border-radius: 100px;
/* Size in px */
margin: 4px;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .app-icon { .notification-row
/* Notification app icon (only visible when the primary image is set) */ .notification-background
-gtk-icon-shadow: 0 1px 4px black; .notification
margin: 6px; .notification-default-action
.notification-content
.app-icon {
/* Notification app icon (only visible when the primary image is set) */
-gtk-icon-shadow: 0 1px 4px black;
margin: 6px;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .summary { .notification-row
/* Notification summary/title */ .notification-background
font-size: 16px; .notification
font-weight: bold; .notification-default-action
background: transparent; .notification-content
color: alpha(@color15, 1.0); /* @text-color */ .text-box
text-shadow: none; .summary {
/* Notification summary/title */
font-size: 16px;
font-weight: bold;
background: transparent;
color: alpha(@color15, 1); /* @text-color */
text-shadow: none;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time { .notification-row
/* Notification time-ago */ .notification-background
font-size: 16px; .notification
font-weight: bold; .notification-default-action
background: transparent; .notification-content
color: alpha(@color15, 1.0); /* @text-color */ .text-box
text-shadow: none; .time {
margin-right: 30px; /* Notification time-ago */
font-size: 16px;
font-weight: bold;
background: transparent;
color: alpha(@color15, 1); /* @text-color */
text-shadow: none;
margin-right: 30px;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body { .notification-row
/* Notification body */ .notification-background
font-size: 15px; .notification
font-weight: normal; .notification-default-action
background: transparent; .notification-content
color: alpha(@color15, 1.0); /* @text-color */ .text-box
text-shadow: none; .body {
/* Notification body */
font-size: 15px;
font-weight: normal;
background: transparent;
color: alpha(@color15, 1); /* @text-color */
text-shadow: none;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content progressbar { .notification-row
/* The optional notification progress bar */ .notification-background
margin-top: 4px; .notification
.notification-default-action
.notification-content
progressbar {
/* The optional notification progress bar */
margin-top: 4px;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .body-image { .notification-row
/* The "extra" optional bottom notification image */ .notification-background
margin-top: 4px; .notification
background-color: alpha(@color15, 0.5); .notification-default-action
border-radius: 12px; .notification-content
.body-image {
/* The "extra" optional bottom notification image */
margin-top: 4px;
background-color: alpha(@color15, 0.5);
border-radius: 12px;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply { .notification-row
/* The inline reply section */ .notification-background
margin-top: 4px; .notification
.notification-default-action
.notification-content
.inline-reply {
/* The inline reply section */
margin-top: 4px;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-entry { .notification-row
background: alpha(@color1, 0.5); /* @noti-bg-darker */ .notification-background
color: alpha(@color15, 1.0); /* @text-color */ .notification
caret-color: alpha(@color15, 1.0); /* @text-color */ .notification-default-action
border: 1px solid alpha(@color8, 0.5); /* @border */ .notification-content
border-radius: 12px; .inline-reply
.inline-reply-entry {
background: alpha(@color1, 0.5); /* @noti-bg-darker */
color: alpha(@color15, 1); /* @text-color */
caret-color: alpha(@color15, 1); /* @text-color */
border: 1px solid alpha(@color8, 0.5); /* @border */
border-radius: 12px;
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button { .notification-row
margin-left: 4px; .notification-background
background: alpha(@color0, 0.5); /* @noti-bg */ .notification
border: 1px solid alpha(@color8, 0.5); /* @border */ .notification-default-action
border-radius: 12px; .notification-content
color: alpha(@color15, 1.0); /* @text-color */ .inline-reply
.inline-reply-button {
margin-left: 4px;
background: alpha(@color0, 0.5); /* @noti-bg */
border: 1px solid alpha(@color8, 0.5); /* @border */
border-radius: 12px;
color: alpha(@color15, 1); /* @text-color */
} }
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled { .notification-row
background: initial; .notification-background
color: alpha(@color7, 0.5); /* @text-color-disabled */ .notification
border: 1px solid alpha(@color8, 0.5); /* @border */ .notification-default-action
border-color: transparent; .notification-content
.inline-reply
.inline-reply-button:disabled {
background: initial;
color: alpha(@color7, 0.5); /* @text-color-disabled */
border: 1px solid alpha(@color8, 0.5); /* @border */
border-color: transparent;
} }
.notification-row .notification-background .notification .notification-default-action .inline-reply .inline-reply-button:hover { .notification-row
background: alpha(@color13, 0.5); /* @noti-bg-hover */ .notification-background
.notification
.notification-default-action
.inline-reply
.inline-reply-button:hover {
background: alpha(@color13, 0.5); /* @noti-bg-hover */
} }
.notification-row .notification-background .notification .notification-action { .notification-row .notification-background .notification .notification-action {
/* The alternative actions below the default action */ /* The alternative actions below the default action */
border-top: 1px solid alpha(@color8, 0.5); /* @border */ border-top: 1px solid alpha(@color8, 0.5); /* @border */
border-radius: 0px; border-radius: 0px;
border-right: 1px solid alpha(@color8, 0.5); /* @border */ border-right: 1px solid alpha(@color8, 0.5); /* @border */
} }
.notification-row .notification-background .notification .notification-action:first-child { .notification-row
/* Add bottom border radius to eliminate clipping */ .notification-background
border-bottom-left-radius: 12px; .notification
.notification-action:first-child {
/* Add bottom border radius to eliminate clipping */
border-bottom-left-radius: 12px;
} }
.notification-row .notification-background .notification .notification-action:last-child { .notification-row
border-bottom-right-radius: 12px; .notification-background
border-right: none; .notification
.notification-action:last-child {
border-bottom-right-radius: 12px;
border-right: none;
} }
.notification-group { .notification-group {
/* Styling only for Grouped Notifications */ /* Styling only for Grouped Notifications */
} }
.notification-group.low { .notification-group.low {
/* Low Priority Group */ /* Low Priority Group */
} }
.notification-group.normal { .notification-group.normal {
/* Normal Priority Group */ /* Normal Priority Group */
} }
.notification-group.critical { .notification-group.critical {
/* Critical Priority Group */ /* Critical Priority Group */
} }
.notification-group .notification-group-buttons, .notification-group .notification-group-buttons,
.notification-group .notification-group-headers { .notification-group .notification-group-headers {
margin: 0 16px; margin: 0 16px;
color: alpha(@color15, 1.0); /* @text-color */ color: alpha(@color15, 1); /* @text-color */
} }
.notification-group .notification-group-headers { .notification-group .notification-group-headers {
/* Notification Group Headers */ /* Notification Group Headers */
} }
.notification-group .notification-group-headers .notification-group-icon { .notification-group .notification-group-headers .notification-group-icon {
color: alpha(@color15, 1.0); /* @text-color */ color: alpha(@color15, 1); /* @text-color */
} }
.notification-group .notification-group-headers .notification-group-header { .notification-group .notification-group-headers .notification-group-header {
color: alpha(@color15, 1.0); /* @text-color */ color: alpha(@color15, 1); /* @text-color */
} }
.notification-group .notification-group-buttons { .notification-group .notification-group-buttons {
/* Notification Group Buttons */ /* Notification Group Buttons */
} }
.notification-group.collapsed .notification-row .notification { .notification-group.collapsed .notification-row .notification {
background-color: alpha(@color0, 0.5); /* @noti-bg-opaque */ background-color: alpha(@color0, 0.5); /* @noti-bg-opaque */
} }
.notification-group.collapsed .notification-row:not(:last-child) { .notification-group.collapsed .notification-row:not(:last-child) {
/* Top notification in stack */ /* Top notification in stack */
/* Set lower stacked notifications opacity to 0 */ /* Set lower stacked notifications opacity to 0 */
} }
.notification-group.collapsed .notification-row:not(:last-child) .notification-action, .notification-group.collapsed
.notification-group.collapsed .notification-row:not(:last-child) .notification-default-action { .notification-row:not(:last-child)
opacity: 0; .notification-action,
.notification-group.collapsed
.notification-row:not(:last-child)
.notification-default-action {
opacity: 0;
} }
.notification-group.collapsed:hover .notification-row:not(:only-child) .notification { .notification-group.collapsed:hover
background-color: alpha(@color13, 0.5); /* @noti-bg-hover-opaque */ .notification-row:not(:only-child)
.notification {
background-color: alpha(@color13, 0.5); /* @noti-bg-hover-opaque */
} }