96 lines
2.7 KiB
CSS
96 lines
2.7 KiB
CSS
/* SwayNC “midnight-ocean” theme */
|
|
|
|
@define-color cc-bg rgba(11, 27, 43, 0.85); /* bg_main */
|
|
@define-color noti-border-color rgba(79, 132, 204, 0.5); /* border_main */
|
|
@define-color noti-bg rgba(11, 27, 43, 0.85); /* bg_main */
|
|
@define-color noti-bg-opaque #0B1B2B; /* background solid */
|
|
@define-color noti-bg-darker rgba(11, 27, 43, 0.95); /* darker bg */
|
|
@define-color noti-bg-hover rgba(79, 132, 204, 0.3); /* bg_hover */
|
|
@define-color noti-bg-hover-opaque rgba(79, 132, 204, 0.5); /* hover opaque */
|
|
@define-color noti-bg-focus rgba(53, 107, 171, 0.7); /* bg_active */
|
|
@define-color noti-close-bg rgba(79, 132, 204, 0.3); /* lighter border_main */
|
|
@define-color noti-close-bg-hover rgba(79, 132, 204, 0.5); /* border_main */
|
|
@define-color text-color #CAD3E8; /* content_main */
|
|
@define-color text-color-disabled rgba(202, 211, 232, 0.4); /* content_inactive */
|
|
@define-color bg-selected #4F84CC; /* accent blue */
|
|
|
|
/* ⬇️ BELOW THIS LINE, none of your existing selectors need renaming ⬇️ */
|
|
|
|
.notification-row {
|
|
outline: none;
|
|
}
|
|
|
|
.notification-row:focus,
|
|
.notification-row:hover {
|
|
background: @noti-bg-focus;
|
|
}
|
|
|
|
.notification-row .notification-background {
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.notification-row .notification-background .close-button {
|
|
background: @noti-close-bg;
|
|
color: @text-color;
|
|
text-shadow: none;
|
|
padding: 0;
|
|
border-radius: 100%;
|
|
margin-top: 5px;
|
|
margin-right: 5px;
|
|
box-shadow: none;
|
|
border: none;
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.notification-row .notification-background .close-button:hover {
|
|
background: @noti-close-bg-hover;
|
|
transition: background 0.15s ease-in-out;
|
|
}
|
|
|
|
.notification-row .notification-background .notification {
|
|
border-radius: 12px;
|
|
border: 1px solid @noti-border-color;
|
|
padding: 0;
|
|
transition: background 0.15s ease-in-out;
|
|
background: @noti-bg;
|
|
}
|
|
|
|
.notification-row .notification-background .notification .notification-action,
|
|
.notification-row
|
|
.notification-background
|
|
.notification
|
|
.notification-default-action {
|
|
padding: 4px;
|
|
margin: 0;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
border: none;
|
|
color: @text-color;
|
|
transition: background 0.15s ease-in-out;
|
|
}
|
|
|
|
.notification-row
|
|
.notification-background
|
|
.notification
|
|
.notification-action:hover,
|
|
.notification-row
|
|
.notification-background
|
|
.notification
|
|
.notification-default-action:hover {
|
|
background: @noti-bg-hover;
|
|
}
|
|
|
|
/* …etc. keep the rest of your CSS exactly as it was… */
|
|
|
|
.control-center {
|
|
background: @cc-bg;
|
|
color: @text-color;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* And for any toggles or selected states: */
|
|
.widget-dnd > switch:checked {
|
|
background: @bg-selected;
|
|
}
|