Moved theming to a central location
This commit is contained in:
parent
1c6fec2a1f
commit
54ecbaea3c
13 changed files with 20 additions and 6 deletions
95
.config/theming/applications/swaync/controlpanel.scss
Normal file
95
.config/theming/applications/swaync/controlpanel.scss
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
@import "./mpris.scss";
|
||||
|
||||
.control-center {
|
||||
/* The Control Center which contains the old notifications + widgets */
|
||||
background: $background-semitransparent;
|
||||
color: $foreground;
|
||||
border-radius: $border-radius;
|
||||
border-left: 1px solid $foreground;
|
||||
box-shadow: $box-shadow-inner;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin: .3rem;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.control-center .control-center-list-placeholder {
|
||||
/* The placeholder when there are no notifications */
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.control-center .control-center-list {
|
||||
/* List of notifications */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control-center .control-center-list .notification {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.7), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.control-center .control-center-list .notification .notification-default-action,
|
||||
.control-center .control-center-list .notification .notification-action {
|
||||
transition: opacity 400ms ease-in-out, background 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.control-center .control-center-list .notification .notification-default-action:hover,
|
||||
.control-center .control-center-list .notification .notification-action:hover {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.blank-window {
|
||||
/* Window behind control center and on all other monitors */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.floating-notifications {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.floating-notifications .notification {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
$btn-color: $foreground;
|
||||
$btn-border-color: $foreground;
|
||||
$btn-bg: rgba($foreground, 0.2);
|
||||
$btn-bg-hover: transparent;
|
||||
|
||||
.control-center button {
|
||||
color: $btn-border-color;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $border-radius;
|
||||
background: $btn-bg;
|
||||
}
|
||||
|
||||
.control-center button:hover {
|
||||
background: $btn-bg-hover;
|
||||
border: 1px solid $btn-color;
|
||||
}
|
||||
|
||||
$switch-bg: transparent;
|
||||
$switch-handle-bg: $foreground;
|
||||
$switch-border-color: $foreground;
|
||||
$switch-selected-bg: $color2;
|
||||
|
||||
.control-center switch {
|
||||
font-size: initial;
|
||||
border-radius: $border-radius;
|
||||
background: $switch-bg;
|
||||
border: 1px solid $switch-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.control-center switch:checked {
|
||||
background: $switch-selected-bg;
|
||||
}
|
||||
|
||||
.control-center switch slider {
|
||||
background: $switch-handle-bg;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
|
||||
.widget-title, .widget-dnd {
|
||||
color: $foreground;
|
||||
}
|
||||
4
.config/theming/applications/swaync/mpris.scss
Normal file
4
.config/theming/applications/swaync/mpris.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
|
||||
.widget-mpris .widget-mpris-player {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
204
.config/theming/applications/swaync/notification.scss
Normal file
204
.config/theming/applications/swaync/notification.scss
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
@use 'sass:color';
|
||||
|
||||
$notify-border-color: $color6;
|
||||
|
||||
$notify-bg: $background;
|
||||
$notify-bg-hover: $background;
|
||||
$notify-bg-darker: color.adjust($background, $lightness: -2%);
|
||||
$notify-bg-focus: color.adjust($background, $lightness: 4%);
|
||||
|
||||
$close-bg: rgba($foreground, 0.4);
|
||||
$close-bg-hover: transparent;
|
||||
|
||||
.notification-row {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.notification-row:focus, .notification-row:hover {
|
||||
background: $notify-bg-focus;
|
||||
}
|
||||
|
||||
.notification-row .notification-background {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .close-button {
|
||||
/* The notification Close Button */
|
||||
background: $close-bg;
|
||||
color: $foreground;
|
||||
text-shadow: none;
|
||||
padding: 0;
|
||||
border-radius: $border-radius;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
box-shadow: none;
|
||||
border: 1px solid transparent;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .close-button:hover {
|
||||
box-shadow: $box-shadow;
|
||||
background: $close-bg-hover;
|
||||
transition: background 0.15s ease-in-out;
|
||||
border: 1px solid $notify-border-color;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification {
|
||||
/* The actual notification */
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid $notify-border-color;
|
||||
padding: 0;
|
||||
transition: background 0.15s ease-in-out;
|
||||
background: $notify-bg;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification.low {
|
||||
/* Low Priority Notification */
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification.normal {
|
||||
/* Normal Priority Notification */
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification.critical {
|
||||
/* Critical Priority Notification */
|
||||
}
|
||||
|
||||
.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: $foreground;
|
||||
transition: background 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-action:hover, .notification-row .notification-background .notification .notification-default-action:hover {
|
||||
-gtk-icon-effect: none;
|
||||
background: $notify-bg-hover;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .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) {
|
||||
/* 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 {
|
||||
background: transparent;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-default-action .notification-content .image {
|
||||
/* Notification Primary Image */
|
||||
-gtk-icon-effect: none;
|
||||
border-radius: 100px;
|
||||
/* Size in px */
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-default-action .notification-content .app-icon {
|
||||
/* Notification app icon (only visible when the primary image is set) */
|
||||
-gtk-icon-effect: none;
|
||||
-gtk-icon-shadow: 0 1px 4px black;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .summary {
|
||||
/* Notification summary/title */
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
color: $foreground;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time {
|
||||
/* Notification time-ago */
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
color: $foreground;
|
||||
text-shadow: none;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body {
|
||||
/* Notification body */
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
background: transparent;
|
||||
color: $foreground;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .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 {
|
||||
/* The "extra" optional bottom notification image */
|
||||
margin-top: 4px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
-gtk-icon-effect: none;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .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 {
|
||||
background: $notify-bg-darker;
|
||||
color: $foreground;
|
||||
caret-color: $foreground;
|
||||
border: 1px solid $notify-border-color;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button {
|
||||
margin-left: 4px;
|
||||
background: $notify-bg;
|
||||
border: 1px solid $notify-border-color;
|
||||
border-radius: 12px;
|
||||
color: $foreground;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled {
|
||||
background: initial;
|
||||
color: $foreground-disabled;
|
||||
border: 1px solid $notify-border-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover {
|
||||
background: $notify-bg-hover;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .notification .notification-action {
|
||||
/* The alternative actions below the default action */
|
||||
border-top: 1px solid $notify-border-color;
|
||||
border-radius: 0px;
|
||||
border-right: 1px solid $notify-border-color;
|
||||
}
|
||||
|
||||
.notification-row .notification-background .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 {
|
||||
border-bottom-right-radius: 12px;
|
||||
border-right: none;
|
||||
}
|
||||
5
.config/theming/applications/swaync/style.scss
Normal file
5
.config/theming/applications/swaync/style.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@use "sass:color";
|
||||
@import "../../theming/library/entry.scss";
|
||||
|
||||
@import "./notification.scss";
|
||||
@import "./controlpanel.scss";
|
||||
4
.config/theming/applications/swaync/variables.scss
Normal file
4
.config/theming/applications/swaync/variables.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
$foreground-disabled: color.adjust($foreground, $lightness: -0.4);
|
||||
|
||||
$border-radius: 0.3rem;
|
||||
$box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
|
||||
Loading…
Add table
Add a link
Reference in a new issue