mirror of
https://github.com/rywng/dotfiles.git
synced 2024-11-22 02:41:50 +08:00
feat(swaync): new theme
This commit is contained in:
Ryan
parent
93edaee6a1
commit
4f00ca0bd5
@ -1,19 +1,13 @@
|
||||
{
|
||||
"$schema": "/etc/xdg/swaync/configSchema.json",
|
||||
"positionX": "right",
|
||||
"positionY": "top",
|
||||
"control-center-margin-top": 12,
|
||||
"control-center-margin-bottom": 128,
|
||||
"control-center-margin-right": 8,
|
||||
"control-center-margin-left": 8,
|
||||
"timeout": 10,
|
||||
"timeout-low": 5,
|
||||
"timeout-critical": 0,
|
||||
"notification-window-width": 512,
|
||||
"keyboard-shortcuts": true,
|
||||
"image-visibility": "when-available",
|
||||
"hide-on-clear": true,
|
||||
"hide-on-action": true,
|
||||
"script-fail-notify": true,
|
||||
"widgets": ["title", "dnd", "mpris"]
|
||||
"widgets": ["title", "dnd", "notifications"]
|
||||
}
|
||||
|
||||
@ -1,9 +1,15 @@
|
||||
@define-color border-color #a89984;
|
||||
@define-color bg #282828;
|
||||
@define-color bg-trans rgba(40, 40, 40, 0.9);
|
||||
@define-color bg-hover #3c3836;
|
||||
@define-color bg-focus #3c3836;
|
||||
@define-color bg-selected #3c3836;
|
||||
@define-color bg-a #3c3836;
|
||||
@define-color bg-b #504945;
|
||||
@define-color bg-c #665c54;
|
||||
@define-color bg-d #7c6f64;
|
||||
@define-color bg-e #928374;
|
||||
@define-color bg-h #1d2021;
|
||||
@define-color fg #ebdbb2;
|
||||
@define-color warning #d65d0e;
|
||||
@define-color warning-light #fe8019;
|
||||
@define-color primary #689d6a;
|
||||
@define-color primary-light #8ec07c;
|
||||
@define-color secondary #458588;
|
||||
@define-color secondary-light #83a598;
|
||||
@define-color gray #a89984;
|
||||
|
||||
@ -1,9 +1,15 @@
|
||||
@define-color border-color #928374;
|
||||
@define-color bg #fbf1c7;
|
||||
@define-color bg-trans rgba(251, 241, 199, 0.9);
|
||||
@define-color bg-hover #f2e5bc;
|
||||
@define-color bg-focus #f2e5bc;
|
||||
@define-color bg-selected #f2e5bc;
|
||||
@define-color bg-a #ebdbb2;
|
||||
@define-color bg-b #d5c4a1;
|
||||
@define-color bg-c #bdae93;
|
||||
@define-color bg-d #a89984;
|
||||
@define-color bg-e #928374;
|
||||
@define-color bg-h #f9f5d7;
|
||||
@define-color fg #3c3836;
|
||||
@define-color warning #d65d0e;
|
||||
@define-color primary #689d6a;
|
||||
@define-color warning #af3a03;
|
||||
@define-color warning-light #d65d0e;
|
||||
@define-color primary #427b58;
|
||||
@define-color primary-light #689d6a;
|
||||
@define-color secondary #076678;
|
||||
@define-color secondary-light #458588;
|
||||
@define-color gray #7c6f64;
|
||||
|
||||
@ -5,145 +5,380 @@
|
||||
@import "dark.less";
|
||||
|
||||
* {
|
||||
all: unset;
|
||||
font-size: 14px;
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
.floating-notifications.background .notification-row .notification-background {
|
||||
box-shadow:
|
||||
0 0 8px 0 rgba(0, 0, 0, 0.8),
|
||||
inset 0 0 0 1px @bg-a;
|
||||
border-radius: 12.6px;
|
||||
margin: 18px;
|
||||
background-color: @bg;
|
||||
color: @fg;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.notification-row {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.notification-row:focus,
|
||||
.notification-row:hover {
|
||||
background: @bg-hover;
|
||||
}
|
||||
|
||||
.notification {
|
||||
border-radius: 2px;
|
||||
margin: 6px 12px;
|
||||
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.3);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
background: transparent;
|
||||
padding: 6px;
|
||||
border-radius: 3px;
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification {
|
||||
padding: 7px;
|
||||
border-radius: 12.6px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: black;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
padding: 0 2px;
|
||||
box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.close-button:hover {
|
||||
background: rgb(30, 30, 30);
|
||||
transition: all 0.15s ease-in-out;
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification.critical {
|
||||
box-shadow: inset 0 0 7px 0 @warning;
|
||||
}
|
||||
|
||||
.notification-default-action,
|
||||
.notification-action {
|
||||
padding: 4px;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
background: @bg;
|
||||
border: 1px solid @border-color;
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content {
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
.notification-default-action:hover,
|
||||
.notification-action:hover {
|
||||
background: @bg-hover;
|
||||
}
|
||||
|
||||
.notification-default-action {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 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: 10px;
|
||||
}
|
||||
.notification-action:last-child {
|
||||
border-bottom-right-radius: 10px;
|
||||
border-right: 1px solid @border-color;
|
||||
}
|
||||
|
||||
.body-image {
|
||||
margin-top: 6px;
|
||||
background-color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content
|
||||
.summary {
|
||||
color: @fg;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.time {
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content
|
||||
.time {
|
||||
color: @gray;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content
|
||||
.body {
|
||||
color: @fg;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.body {
|
||||
background: transparent;
|
||||
.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: @fg;
|
||||
text-shadow: none;
|
||||
background-color: @bg-a;
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
.control-center-clear-all {
|
||||
color: @warning;
|
||||
text-shadow: none;
|
||||
background: @bg;
|
||||
border: 1px solid @border-color;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action:hover {
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
background-color: @bg-a;
|
||||
color: @fg;
|
||||
}
|
||||
.control-center-clear-all:hover {
|
||||
background: @bg-hover;
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action:active {
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
background-color: @primary-dark;
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.close-button {
|
||||
margin: 7px;
|
||||
padding: 2px;
|
||||
border-radius: 6.3px;
|
||||
color: @bg;
|
||||
background-color: @warning;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.close-button:hover {
|
||||
background-color: #eba0ac;
|
||||
color: @bg;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.close-button:active {
|
||||
background-color: @warning;
|
||||
color: @bg;
|
||||
}
|
||||
|
||||
.control-center {
|
||||
box-shadow:
|
||||
0 0 8px 0 rgba(0, 0, 0, 0.8),
|
||||
inset 0 0 0 1px @bg-a;
|
||||
border-radius: 12.6px;
|
||||
margin: 18px;
|
||||
background-color: @bg;
|
||||
color: @fg;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.control-center .widget-title {
|
||||
color: @fg;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.control-center .widget-title button {
|
||||
border-radius: 7px;
|
||||
color: @fg;
|
||||
background-color: @bg-a;
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.control-center .widget-title button:hover {
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
background-color: @bg-c;
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
.control-center .widget-title button:active {
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
background-color: @primary-dark;
|
||||
color: @bg;
|
||||
}
|
||||
|
||||
.control-center .notification-row .notification-background {
|
||||
border-radius: 7px;
|
||||
color: @fg;
|
||||
background-color: @bg-a;
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
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 @warning;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content {
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content
|
||||
.summary {
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content
|
||||
.time {
|
||||
color: @gray;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content
|
||||
.body {
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
.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: @fg;
|
||||
background-color: #11111b;
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action:hover {
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
background-color: @bg-a;
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action:active {
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
background-color: @primary-dark;
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
.control-center .notification-row .notification-background .close-button {
|
||||
margin: 7px;
|
||||
padding: 2px;
|
||||
border-radius: 6.3px;
|
||||
color: @bg;
|
||||
background-color: @fg;
|
||||
}
|
||||
|
||||
.control-center .notification-row .notification-background .close-button:hover {
|
||||
background-color: @warning;
|
||||
color: @bg;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.close-button:active {
|
||||
background-color: @warning;
|
||||
color: @bg;
|
||||
}
|
||||
|
||||
.control-center .notification-row .notification-background:hover {
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
background-color: @bg-e;
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
.control-center .notification-row .notification-background:active {
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
background-color: @primary-dark;
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
progressbar,
|
||||
progress,
|
||||
through {
|
||||
border-radius: 12.6px;
|
||||
}
|
||||
|
||||
progressbar {
|
||||
box-shadow: inset 0 0 0 1px @bg-b;
|
||||
}
|
||||
|
||||
.notification.critical progress {
|
||||
background-color: @warning;
|
||||
}
|
||||
|
||||
.notification.low progress,
|
||||
.notification.normal progress {
|
||||
background-color: @secondary-dark;
|
||||
}
|
||||
|
||||
through {
|
||||
background-color: @bg-a;
|
||||
}
|
||||
|
||||
.control-center through {
|
||||
background-color: @bg-b;
|
||||
}
|
||||
|
||||
.control-center-dnd {
|
||||
border-radius: 3px;
|
||||
background: @bg;
|
||||
border: 1px solid @border-color;
|
||||
margin-top: 5px;
|
||||
border-radius: 8px;
|
||||
background: @bg-a;
|
||||
border: 1px solid @bg-b;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.control-center-dnd:checked {
|
||||
background: @primary;
|
||||
background: @bg-a;
|
||||
}
|
||||
|
||||
.control-center-dnd slider {
|
||||
border-radius: 3px;
|
||||
background: @bg-hover;
|
||||
border: 1px solid @border-color;
|
||||
background: @bg-b;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.control-center {
|
||||
background: @bg-trans;
|
||||
border-radius: 5px;
|
||||
border: 1px solid @border-color;
|
||||
}
|
||||
.control-center-list {
|
||||
background: @bg-trans;
|
||||
border: 1px @border-color;
|
||||
border-style: dashed solid hidden solid;
|
||||
.widget-dnd {
|
||||
margin: 0px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.floating-notifications {
|
||||
background: transparent;
|
||||
.widget-dnd > switch {
|
||||
font-size: initial;
|
||||
border-radius: 8px;
|
||||
background: @bg-a;
|
||||
border: 1px solid @bg-b;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.widget-dnd > switch:checked {
|
||||
background: @bg-a;
|
||||
}
|
||||
|
||||
.widget-dnd > switch slider {
|
||||
background: @bg-b;
|
||||
border-radius: 8px;
|
||||
border: 1px solid @bg-d;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user