Siklos/dotfiles
1
0
Fork 0
mirror of https://github.com/hydroxycarbamide/dotfiles.git synced 2025-05-05 04:19:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

Update swaync style

Browse source
This commit is contained in:
Hydroxycarbamide 2024-05-20 22:11:11 +02:00
parent 85feac328a
commit a149b8c0b5
1 changed files with 269 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

523
dot_config/swaync/style.css
View file

@ -1,333 +1,342 @@
/* * {
* vim: ft=less all: unset;
*/ font-size: 14px;
font-family: "Ubuntu Nerd Font";
@define-color cc-bg rgb(24, 25, 38); transition: 200ms;
@define-color noti-border-color rgba(255, 255, 255, 0.15);
@define-color noti-bg rgb(36, 39, 58);
@define-color noti-bg-hover #363a4f;
@define-color noti-bg-focus rgba(36, 39, 58, 0.5);
@define-color noti-close-bg rgba(255, 255, 255, 0.1);
@define-color noti-close-bg-hover rgba(255, 255, 255, 0.20);
@define-color bg-selected rgb(244, 219, 214);
.notification-row {
outline: none;
border-radius: 4px;
margin: 0px;
} }
.notification-row:focus, trough highlight {
.notification-row:hover { background: #cad3f5;
background: @noti-bg-focus;
} }
.notification { scale trough {
border-radius: 20px; margin: 0rem 1rem;
margin: 18px 10px; background-color: #363a4f;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); min-height: 8px;
padding: 0px; min-width: 70px;
font-family: Ubuntu;
} }
.critical { slider {
background: #ed8796; background-color: #8aadf4;
}
.floating-notifications.background .notification-row .notification-background {
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #363a4f;
border-radius: 12.6px;
margin: 18px;
background-color: #24273a;
color: #cad3f5;
padding: 0;
}
.floating-notifications.background .notification-row .notification-background .notification {
padding: 7px;
border-radius: 12.6px;
}
.floating-notifications.background .notification-row .notification-background .notification.critical {
box-shadow: inset 0 0 7px 0 #ed8796;
}
.floating-notifications.background .notification-row .notification-background .notification .notification-content {
margin: 7px;
}
.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary {
color: #cad3f5;
}
.floating-notifications.background .notification-row .notification-background .notification .notification-content .time {
color: #a5adcb;
}
.floating-notifications.background .notification-row .notification-background .notification .notification-content .body {
color: #cad3f5;
}
.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * {
min-height: 3.4em;
}
.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action {
border-radius: 7px;
color: #cad3f5;
background-color: #363a4f;
box-shadow: inset 0 0 0 1px #494d64;
margin: 7px;
}
.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
box-shadow: inset 0 0 0 1px #494d64;
background-color: #363a4f;
color: #cad3f5;
}
.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
box-shadow: inset 0 0 0 1px #494d64;
background-color: #7dc4e4;
color: #cad3f5;
}
.floating-notifications.background .notification-row .notification-background .close-button {
margin: 7px;
padding: 2px; padding: 2px;
border-radius: 20px; border-radius: 6.3px;
color: #24273a;
background-color: #ed8796;
} }
.notification-content { .floating-notifications.background .notification-row .notification-background .close-button:hover {
background: transparent; background-color: #ee99a0;
padding: 16px; color: #24273a;
border-radius: 20px; }
.floating-notifications.background .notification-row .notification-background .close-button:active {
background-color: #ed8796;
color: #24273a;
}
.control-center {
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #363a4f;
border-radius: 12.6px;
margin: 18px;
background-color: #24273a;
color: #cad3f5;
padding: 14px;
}
.control-center .widget-title > label {
color: #cad3f5;
font-size: 1.3em;
}
.control-center .widget-title button {
border-radius: 7px;
color: #cad3f5;
background-color: #363a4f;
box-shadow: inset 0 0 0 1px #494d64;
padding: 8px;
}
.control-center .widget-title button:hover {
box-shadow: inset 0 0 0 1px #494d64;
background-color: #5b6078;
color: #cad3f5;
}
.control-center .widget-title button:active {
box-shadow: inset 0 0 0 1px #494d64;
background-color: #7dc4e4;
color: #24273a;
}
.control-center .notification-row .notification-background {
border-radius: 7px;
color: #cad3f5;
background-color: #363a4f;
box-shadow: inset 0 0 0 1px #494d64;
margin-top: 14px;
}
.control-center .notification-row .notification-background .notification {
padding: 7px;
border-radius: 7px;
}
.control-center .notification-row .notification-background .notification.critical {
box-shadow: inset 0 0 7px 0 #ed8796;
}
.control-center .notification-row .notification-background .notification .notification-content {
margin: 7px;
}
.control-center .notification-row .notification-background .notification .notification-content .summary {
color: #cad3f5;
}
.control-center .notification-row .notification-background .notification .notification-content .time {
color: #a5adcb;
}
.control-center .notification-row .notification-background .notification .notification-content .body {
color: #cad3f5;
}
.control-center .notification-row .notification-background .notification > *:last-child > * {
min-height: 3.4em;
}
.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action {
border-radius: 7px;
color: #cad3f5;
background-color: #181926;
box-shadow: inset 0 0 0 1px #494d64;
margin: 7px;
}
.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
box-shadow: inset 0 0 0 1px #494d64;
background-color: #363a4f;
color: #cad3f5;
}
.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
box-shadow: inset 0 0 0 1px #494d64;
background-color: #7dc4e4;
color: #cad3f5;
}
.control-center .notification-row .notification-background .close-button {
margin: 7px;
padding: 2px;
border-radius: 6.3px;
color: #24273a;
background-color: #ee99a0;
} }
.close-button { .close-button {
background: @noti-close-bg; border-radius: 6.3px;
color: #cad3f5;
text-shadow: none;
padding: 0;
border-radius: 100%;
margin-top: 24px;
margin-right: 16px;
box-shadow: none;
border: none;
min-width: 24px;
min-height: 24px;
} }
.close-button:hover { .control-center .notification-row .notification-background .close-button:hover {
box-shadow: none; background-color: #ed8796;
background: @noti-close-bg-hover; color: #24273a;
transition: all 0.15s ease-in-out;
border: none;
} }
.notification-default-action, .control-center .notification-row .notification-background .close-button:active {
.notification-action { background-color: #ed8796;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), color: #24273a;
0 1px 3px 1px rgba(0, 0, 0, 0.1), }
0 2px 6px 2px rgba(0, 0, 0, 0.1);
padding: 4px; .control-center .notification-row .notification-background:hover {
margin: 0; box-shadow: inset 0 0 0 1px #494d64;
box-shadow: none; background-color: #8087a2;
background: @noti-bg;
border: none;
color: #cad3f5; color: #cad3f5;
} }
.notification-default-action:hover, .control-center .notification-row .notification-background:active {
.notification-action:hover { box-shadow: inset 0 0 0 1px #494d64;
-gtk-icon-effect: none; background-color: #7dc4e4;
background: @noti-bg-hover;
}
.notification-default-action {
border-radius: 20px;
}
/* When alternative actions are visible */
.notification-default-action:not(:only-child) {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.notification-action {
border-radius: 0px;
border-top: none;
border-right: none;
}
/* add bottom border radius to eliminate clipping */
.notification-action:first-child {
border-bottom-left-radius: 20px;
}
.notification-action:last-child {
border-bottom-right-radius: 20px;
border-right: 1px solid @noti-border-color;
}
.image {
border-radius: 12px;
}
.body-image {
margin-top: 6px;
background-color: #cad3f5;
border-radius: 12px;
}
.summary {
color: #cad3f5; color: #cad3f5;
text-shadow: none;
} }
.time { .notification.critical progress {
color: #cad3f5; background-color: #ed8796;
text-shadow: none;
margin-right: 18px;
} }
.body { .notification.low progress,
background: transparent; .notification.normal progress {
color: #cad3f5; background-color: #8aadf4;
text-shadow: none;
padding: 4px;
}
/* The "Notifications" and "Do Not Disturb" text widget */
.top-action-title {
color: #cad3f5;
text-shadow: none;
}
.control-center-clear-all {
color: #cad3f5;
text-shadow: none;
background: @noti-bg;
border: none;
box-shadow: none;
border-radius: 9999px;
}
.control-center-clear-all:hover {
background: @noti-bg-hover;
} }
.control-center-dnd { .control-center-dnd {
border-radius: 9999px; margin-top: 5px;
background: @noti-bg; border-radius: 8px;
background: #363a4f;
border: 1px solid #494d64;
box-shadow: none; box-shadow: none;
border: none;
} }
.control-center-dnd:checked { .control-center-dnd:checked {
background: @bg-selected; background: #363a4f;
} }
.control-center-dnd slider { .control-center-dnd slider {
background: @noti-bg-hover; background: #494d64;
border-radius: 12px; border-radius: 8px;
} }
/* The .control-center Window.
* Can't apply padding and margin so may be easier to use "> box" instead
*/
.control-center {
background: @cc-bg;
border-radius: 20px;
font-family: Ubuntu;
}
/* The first control-center child. May be easier to style this than .control-center */
.control-center>box {
margin: 15px;
}
.control-center-list {
background: transparent;
}
.floating-notifications {
background: transparent;
}
/* Window behind control center and on all other monitors */
.blank-window {
background: alpha(black, 0);
}
/* Title widget */
.widget-title {
margin: 8px;
font-size: 1.5rem;
}
.widget-title>button {
font-size: initial;
color: #cad3f5;
text-shadow: none;
background: @noti-bg;
border: none;
box-shadow: none;
border-radius: 9999px;
}
.widget-title>button:hover {
background: @noti-bg-hover;
}
/* DND widget */
.widget-dnd { .widget-dnd {
margin: 8px; margin: 0px;
font-size: 1.1rem; font-size: 1.1rem;
} }
.widget-dnd > switch { .widget-dnd > switch {
font-size: initial; font-size: initial;
border-radius: 9999px; border-radius: 8px;
background: @noti-bg; background: #363a4f;
border: 1px solid #494d64;
box-shadow: none; box-shadow: none;
border: none;
} }
.widget-dnd > switch:checked { .widget-dnd > switch:checked {
background: @bg-selected; background: #363a4f;
} }
.widget-dnd > switch slider { .widget-dnd > switch slider {
background: @noti-bg-hover; background: #494d64;
border-radius: 12px; border-radius: 8px;
border: 1px solid #6e738d;
} }
/* Label widget */ .widget-mpris .widget-mpris-player {
.widget-label { background: #363a4f;
margin: 8px; padding: 7px;
} }
.widget-label>label { .widget-mpris .widget-mpris-title {
font-size: 1.1rem; font-size: 1.2rem;
} }
/* Mpris widget */ .widget-mpris .widget-mpris-subtitle {
.widget-mpris { font-size: 0.8rem;
/* The parent to all players */
/* background-color: @noti-bg; */
border-radius: 20px;
} }
.widget-mpris-player { .widget-menubar > box > .menu-button-bar > button > label {
padding: 8px; font-size: 3rem;
margin: 8px; padding: 0.5rem 2rem;
} }
.widget-mpris-title { .widget-menubar > box > .menu-button-bar > :last-child {
font-weight: bold; color: #ed8796;
font-size: 1.25rem;
} }
.widget-mpris-subtitle { .power-buttons button:hover,
font-size: 1.1rem; .powermode-buttons button:hover,
.screenshot-buttons button:hover {
background: #363a4f;
}
.control-center .widget-label > label {
color: #cad3f5;
font-size: 2rem;
} }
/* Buttons widget */
.widget-buttons-grid { .widget-buttons-grid {
padding: 8px; padding-top: 1rem;
margin: 8px;
border-radius: 12px;
background-color: @noti-bg;
} }
.widget-buttons-grid>flowbox>flowboxchild>button { .widget-buttons-grid > flowbox > flowboxchild > button label {
background: @noti-bg; font-size: 2.5rem;
border-radius: 12px;
} }
.widget-buttons-grid>flowbox>flowboxchild>button:hover {
background: @noti-bg-hover;
}
/* Menubar widget */
.widget-menubar>box>.menu-button-bar>button {
border: none;
background: transparent;
}
.topbar-buttons>button {
/* Name defined in config after # */
border: none;
background: transparent;
}
/* Volume widget */
.widget-volume { .widget-volume {
/* background-color: @noti-bg; */ padding-top: 1rem;
background: transparent;
padding: 8px;
margin: 8px;
border-radius: 12px;
} }
.widget-volume>box>button { .widget-volume label {
background: transparent; font-size: 1.5rem;
border: none; color: #7dc4e4;
} }
.per-app-volume { .widget-volume trough highlight {
background-color: @noti-bg-alt; background: #7dc4e4;
padding: 4px 8px 8px 8px;
margin: 0px 8px 8px 8px;
border-radius: 12px;
} }
/* Backlight widget */ .widget-backlight trough highlight {
.widget-backlight { background: #eed49f;
background-color: @noti-bg; }
padding: 8px;
margin: 8px; .widget-backlight label {
border-radius: 12px; font-size: 1.5rem;
color: #eed49f;
}
.widget-backlight .KB {
padding-bottom: 1rem;
}
.image {
padding-right: 0.5rem;
} }