.dotfiles/swaync/style.css

/* Gruvbox Theme */

/* Greyscale */
@define-color highlight #ebdbb2;
@define-color foreground #928374;
@define-color background #282828;
@define-color black #010101;

/* Colours */
@define-color red #cc241d;
@define-color green #98971a;
@define-color yellow #d79921;
@define-color blue #458588;
@define-color magenta #b16286;
@define-color cyan #68986a;

/* Highlight colours */
@define-color hred #fb4934;
@define-color hgreen #b8bb26;
@define-color hyellow #fabd2f;
@define-color hblue #83a598;
@define-color hmagenta #d3869b;
@define-color hcyan #8ec07c;

.notification-row {
    transition: all 200ms ease;
    outline: none;
    margin-bottom: 4px;
    margin-right: 13px;
    margin-top: 8px;
    border-radius: 80px;
}

.control-center .notification-row:focus,
.control-center .notification-row:hover {
    opacity: 1;
}

.notification-row:focus .notification,
.notification-row:hover .notification {
    border: 0px solid @highlight;
    background: @red;
}

.control-center .notification {
    box-shadow: none;
}

.control-center .notification-row {
    opacity: 1;
    margin: -5px;
}

.notification {
    transition: all 200ms ease;
    border-radius: 8px;
    margin: 12px 7px 0px 7px;
    padding: 0;
}

.low {
    background: @yellow;
    padding: 6px;
    border-radius: 12px;
}

.normal {
    background: @blue;
    padding: 6px;
    border-radius: 12px;
}

.critical {
    background: @red;
    padding: 6px;
    border-radius: 12px;
}

.notification-content {
    background: transparent;
    padding: 6px;
    border-radius: 8px;
}

.close-button {
    background: @red;
    color: @highlight;
    text-shadow: none;
    padding: 0;
    border-radius: 100%;
    margin-top: 17px;
    margin-right: 10px;
    box-shadow: none;
    border: none;
    min-width: 24px;
    min-height: 24px;
}

.close-button:hover {
    box-shadow: none;
    background: @hred;
    transition: all 0.15s ease-in-out;
    border: none;
}

.notification-default-action,
.notification-action {
    padding: 4px;
    margin: 0;
    box-shadow: none;
    background: @blue;
    border: 1px solid @highlight;
    color: @highlight;
}

.notification-default-action.normal,
.notification-action.normal {
    color: @red;
}

.notification-default-action:hover,
.notification-action:hover {
    -gtk-icon-effect: none;
    background: @hblue;
}

.notification-default-action {
    border-radius: 8px;
}

/* 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: 8px;
}

.notification-action:last-child {
    border-bottom-right-radius: 8px;
    border-right: 1px solid @highlight;
}

.image {
}

.body-image {
    margin-top: 6px;
    background-color: @highlight;
    border-radius: 8px;
}

.summary {
    font-size: 16px;
    font-weight: bold;
    background: transparent;
    color: @highlight;
    text-shadow: none;
}

.time {
    font-size: 16px;
    font-weight: bold;
    background: transparent;
    color: @highlight;
    text-shadow: none;
    margin-right: 18px;
}

.body {
    font-size: 15px;
    font-weight: normal;
    background: transparent;
    color: @highlight;
    text-shadow: none;
}

/* The "Notifications" and "Do Not Disturb" text widget */
.top-action-title {
    color: @highlight;
    text-shadow: none;
}

.control-center-clear-all {
    color: @highlight;
    text-shadow: none;
    background: @red;
    border: 2px solid @highlight;
    box-shadow: none;
    border-radius: 8px;
}

.control-center-clear-all:hover {
    background: @red;
}

.control-center-dnd {
    border-radius: 8px;
    background: @red;
    border: 1px solid @highlight;
    box-shadow: none;
}

.control-center-dnd:checked {
    background: @green;
}

.control-center-dnd slider {
    background: @red;
    border-radius: 8px;
}

.control-center {
    background: @background;
    background-clip: border-box;
    border-left: solid 1px @highlight;
    border-radius: 0px;
    padding: 4px;
    color: @highlight;
}

.control-center-list {
    background: transparent;
}

.floating-notifications {
}

/* Window behind control center and on all other monitors */
.blank-window {
    background: transparent;
}

/*** Widgets ***/

/* Title widget */
.widget-title {
    margin: 8px;
    font-size: 1.5rem;
}
.widget-title > button {
    font-size: initial;
    color: @highlight;
    text-shadow: none;
    background: @background;
    border: 2px solid @highlight;
    box-shadow: none;
    border-radius: 8px;
}
.widget-title > button:hover {
    background: @background;
}

/* DND widget */
.widget-dnd {
    margin: 8px;
    font-size: 1.1rem;
}
.widget-dnd > switch {
    font-size: initial;
    border-radius: 8px;
    background: @foreground;
    border: 1px solid @highlight;
    box-shadow: none;
}
.widget-dnd > switch:checked {
    background: @red;
}
.widget-dnd > switch slider {
    background: @highlight;
    border-radius: 8px;
    border: 1px solid @highlight;
}

/* Label widget */
.widget-label {
    margin: 8px;
}
.widget-label > label {
    font-size: 1.1rem;
}

/* Mpris widget */
.widget-mpris {
    /* The parent to all players */
}
.widget-mpris-player {
    padding: 8px;
    margin: 8px;
    background-color: @background;
    border-radius: 8px;
    border: 2px solid @highlight;
    color: @highlight;
}
.widget-mpris-title {
    font-weight: bold;
    font-size: 1.25rem;
}
.widget-mpris-subtitle {
    font-size: 1.1rem;
}