mirror of
https://github.com/ErikReider/SwayNotificationCenter.git
synced 2024-10-26 17:42:12 +03:00
[New Dependency: sassc] Move to SCSS from regular CSS (#352)
* Moved to SCSS from regular CSS * Fixed Ubuntu build
This commit is contained in:
Erik Reider
GitHub
parent
a6cf977e90
commit
8882b225fd
2
.github/workflows/ubuntu-build.yml
vendored
2
.github/workflows/ubuntu-build.yml
vendored
@ -19,7 +19,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
DEBIAN_FRONTEND: noninteractive
|
||||
PACKAGES: meson libwayland-dev libgtk-3-dev gobject-introspection libgirepository1.0-dev valac libjson-glib-dev libhandy-1-dev libgtk-layer-shell-dev scdoc libgee-0.8-dev libpulse-dev
|
||||
PACKAGES: meson libwayland-dev libgtk-3-dev gobject-introspection libgirepository1.0-dev valac libjson-glib-dev libhandy-1-dev libgtk-layer-shell-dev scdoc libgee-0.8-dev libpulse-dev sassc
|
||||
steps:
|
||||
- name: Install packages
|
||||
run: |
|
||||
|
||||
@ -238,10 +238,12 @@ See `swaync(5)` man page for more information
|
||||
|
||||
To reload the config, you'll need to run `swaync-client --reload-config`
|
||||
|
||||
The main CSS style file is located in `/etc/xdg/swaync/style.css`. Copy it over
|
||||
to your `~/.config/swaync/` folder to customize without needing root access.
|
||||
The main CSS style file is located in `/etc/xdg/swaync/style.css`. Copy it over
|
||||
to your `~/.config/swaync/` folder to customize without needing root access. For
|
||||
more advanced/larger themes, I recommend that you use the SCSS files from source
|
||||
and customize them instead. To use the SCSS files, compile with `sassc`.
|
||||
|
||||
**Tip**: running swaync with `GTK_DEBUG=interactive swaync` will open a inspector
|
||||
**Tip**: running swaync with `GTK_DEBUG=interactive swaync` will open a inspector
|
||||
window that'll allow you to see all of the CSS classes + other information.
|
||||
|
||||
## Toggle Buttons
|
||||
|
||||
@ -15,7 +15,7 @@ license=(GPL3)
|
||||
depends=("gtk3" "gtk-layer-shell" "dbus" "glib2" "gobject-introspection" "libgee" "json-glib" "libhandy" "libpulse")
|
||||
conflicts=("swaync" "swaync-client")
|
||||
provides=("swaync" "swaync-client" "notification-daemon")
|
||||
makedepends=(vala meson git scdoc)
|
||||
makedepends=(vala meson git scdoc sassc)
|
||||
source=("${_pkgfoldername}-${pkgver}.tar.gz::${url}/archive/v${pkgver}.tar.gz")
|
||||
sha256sums=('3f00bc858b7b3610e88ef0f6ee64d727892dd82f280f1dfc01dde863c2ea3376')
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ license=('GPL3')
|
||||
depends=("gtk3" "gtk-layer-shell" "dbus" "glib2" "gobject-introspection" "libgee" "json-glib" "libhandy" "libpulse" )
|
||||
conflicts=("swaync" "swaync-client")
|
||||
provides=("swaync" "swaync-client" "notification-daemon")
|
||||
makedepends=(vala meson git scdoc)
|
||||
makedepends=(vala meson git scdoc sassc)
|
||||
source=("$_pkgname::git+$url")
|
||||
sha256sums=('SKIP')
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@ BuildRequires: pkgconfig(fish)
|
||||
BuildRequires: pkgconfig(libpulse)
|
||||
BuildRequires: systemd-devel
|
||||
BuildRequires: systemd
|
||||
BuildRequires: sassc
|
||||
|
||||
Requires: dbus
|
||||
%{?systemd_requires}
|
||||
|
||||
@ -10,3 +10,26 @@ if compile_schemas.found()
|
||||
args: ['--strict', '--dry-run', meson.current_source_dir()]
|
||||
)
|
||||
endif
|
||||
|
||||
# SCSS Dependency
|
||||
sassc = find_program('sassc')
|
||||
assert(sassc.found())
|
||||
|
||||
# SCSS Compilation
|
||||
style_css = custom_target(
|
||||
'SCSS Compilation',
|
||||
build_by_default: true,
|
||||
input : 'style/style.scss',
|
||||
output : 'style.css',
|
||||
install: true,
|
||||
install_dir: config_path,
|
||||
command : [
|
||||
sassc,
|
||||
'-t',
|
||||
'expanded',
|
||||
'@INPUT@',
|
||||
'@OUTPUT@'
|
||||
],
|
||||
)
|
||||
|
||||
message(style_css.full_path())
|
||||
|
||||
290
data/style/style.scss
Normal file
290
data/style/style.scss
Normal file
@ -0,0 +1,290 @@
|
||||
@define-color cc-bg rgba(0, 0, 0, 0.7);
|
||||
|
||||
@define-color noti-border-color rgba(255, 255, 255, 0.15);
|
||||
@define-color noti-bg rgb(48, 48, 48);
|
||||
@define-color noti-bg-darker rgb(38, 38, 38);
|
||||
@define-color noti-bg-hover rgb(56, 56, 56);
|
||||
@define-color noti-bg-focus rgba(68, 68, 68, 0.6);
|
||||
@define-color noti-close-bg rgba(255, 255, 255, 0.1);
|
||||
@define-color noti-close-bg-hover rgba(255, 255, 255, 0.15);
|
||||
|
||||
@define-color text-color rgb(255, 255, 255);
|
||||
@define-color text-color-disabled rgb(150, 150, 150);
|
||||
|
||||
@define-color bg-selected rgb(0, 128, 255);
|
||||
|
||||
.notification-row {
|
||||
outline: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: #{"@noti-bg-focus"};
|
||||
}
|
||||
.notification-background {
|
||||
.close-button {
|
||||
/* The notification Close Button */
|
||||
background: #{"@noti-close-bg"};
|
||||
color: #{"@text-color"};
|
||||
text-shadow: none;
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
margin-top: 10px;
|
||||
margin-right: 16px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background: #{"@noti-close-bg-hover"};
|
||||
transition: all 0.15s ease-in-out;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
/* The actual notification */
|
||||
border-radius: 12px;
|
||||
margin: 6px 12px;
|
||||
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);
|
||||
padding: 0;
|
||||
|
||||
&.low {
|
||||
/* Low Priority Notification */
|
||||
}
|
||||
&.normal {
|
||||
/* Normal Priority Notification */
|
||||
}
|
||||
&.critical {
|
||||
/* Critical Priority Notification */
|
||||
}
|
||||
|
||||
%action {
|
||||
padding: 4px;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
background: #{"@noti-bg"};
|
||||
border: 1px solid #{"@noti-border-color"};
|
||||
color: #{"@text-color"};
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
%action-hover {
|
||||
-gtk-icon-effect: none;
|
||||
background: #{"@noti-bg-hover"};
|
||||
}
|
||||
|
||||
.notification-default-action {
|
||||
/* The large action that also displays the notification summary and body */
|
||||
@extend %action;
|
||||
border-radius: 12px;
|
||||
|
||||
&:hover {
|
||||
@extend %action-hover;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
background: transparent;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
|
||||
.image {
|
||||
/* Notification Primary Image */
|
||||
-gtk-icon-effect: none;
|
||||
}
|
||||
.summary {
|
||||
/* Notification summary/title */
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
color: #{"@text-color"};
|
||||
text-shadow: none;
|
||||
}
|
||||
.time {
|
||||
/* Notification time-ago */
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
color: #{"@text-color"};
|
||||
text-shadow: none;
|
||||
margin-right: 18px;
|
||||
}
|
||||
.body {
|
||||
/* Notification body */
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
background: transparent;
|
||||
color: #{"@text-color"};
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
progressbar {
|
||||
/* The optional notification progress bar */
|
||||
}
|
||||
|
||||
.body-image {
|
||||
/* The "extra" optional bottom notification image */
|
||||
margin-top: 6px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.inline-reply {
|
||||
/* The inline reply section */
|
||||
margin-top: 8px;
|
||||
|
||||
.inline-reply-entry {
|
||||
background: #{"@noti-bg-darker"};
|
||||
color: #{"@text-color"};
|
||||
caret-color: #{"@text-color"};
|
||||
border: 1px solid #{"@noti-border-color"};
|
||||
border-radius: 12px;
|
||||
}
|
||||
.inline-reply-button {
|
||||
margin-left: 4px;
|
||||
background: #{"@noti-bg"};
|
||||
border: 1px solid #{"@noti-border-color"};
|
||||
border-radius: 12px;
|
||||
color: #{"@text-color"};
|
||||
|
||||
&:disabled {
|
||||
background: initial;
|
||||
color: #{"@text-color-disabled"};
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
&:hover {
|
||||
background: #{"@noti-bg-hover"};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-action {
|
||||
/* The sub actions below the default action */
|
||||
@extend %action;
|
||||
border-radius: 0px;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
|
||||
&:not(:only-child) {
|
||||
/* When alternative actions are visible */
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
/* add bottom border radius to eliminate clipping */
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-right-radius: 10px;
|
||||
border-right: 1px solid #{"@noti-border-color"};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend %action-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-group {
|
||||
/* Styling only for Grouped Notifications */
|
||||
|
||||
&.low {
|
||||
/* Low Priority Group */
|
||||
}
|
||||
&.normal {
|
||||
/* Low Priority Group */
|
||||
}
|
||||
&.critical {
|
||||
/* Low Priority Group */
|
||||
}
|
||||
|
||||
%header {
|
||||
margin: 0 16px;
|
||||
color: #{"@text-color"};
|
||||
}
|
||||
|
||||
.notification-group-headers {
|
||||
/* Notification Group Headers */
|
||||
@extend %header;
|
||||
|
||||
.notification-group-icon {
|
||||
color: #{"@text-color"};
|
||||
}
|
||||
.notification-group-header {
|
||||
color: #{"@text-color"};
|
||||
}
|
||||
}
|
||||
.notification-group-buttons {
|
||||
/* Notification Group Buttons */
|
||||
@extend %header;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
/* Set lower stacked notifications opacity to 0 */
|
||||
.notification-row:not(:last-child) {
|
||||
/* Top notification in stack */
|
||||
.notification-action *,
|
||||
.notification-default-action * {
|
||||
transition: opacity 400ms ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.notification-default-action,
|
||||
.notification-action {
|
||||
background-color: #{"@noti-bg-hover"};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-center {
|
||||
/* The Control Center which contains the old notifications + widgets */
|
||||
background: #{"@cc-bg"};
|
||||
|
||||
.control-center-list-placeholder {
|
||||
/* The placeholder when there are no notifications */
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.control-center-list {
|
||||
/* List of notifications */
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.blank-window {
|
||||
/* Window behind control center and on all other monitors */
|
||||
background: #{"alpha(black, 0.25)"};
|
||||
}
|
||||
|
||||
.floating-notifications {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*** Widgets ***/
|
||||
/* Title widget */
|
||||
@import "widgets/title";
|
||||
/* DND widget */
|
||||
@import "widgets/dnd";
|
||||
/* Label widget */
|
||||
@import "widgets/label";
|
||||
/* Mpris widget */
|
||||
@import "widgets/mpris";
|
||||
/* Buttons widget */
|
||||
@import "widgets/buttons";
|
||||
/* Menubar widget */
|
||||
@import "widgets/menubar";
|
||||
/* Volume widget */
|
||||
@import "widgets/volume";
|
||||
/* Backlight widget */
|
||||
@import "widgets/backlight";
|
||||
/* Inhibitors widget */
|
||||
@import "widgets/inhibitors";
|
||||
6
data/style/widgets/backlight.scss
Normal file
6
data/style/widgets/backlight.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.widget-backlight {
|
||||
background-color: #{"@noti-bg"};
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
18
data/style/widgets/buttons.scss
Normal file
18
data/style/widgets/buttons.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.widget-buttons-grid {
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
border-radius: 12px;
|
||||
background-color: #{"@noti-bg"};
|
||||
}
|
||||
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button {
|
||||
background: #{"@noti-bg"};
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked {
|
||||
/* style given to the active toggle button */
|
||||
}
|
||||
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button:hover {
|
||||
}
|
||||
18
data/style/widgets/dnd.scss
Normal file
18
data/style/widgets/dnd.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.widget-dnd {
|
||||
margin: 8px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.widget-dnd > switch {
|
||||
font-size: initial;
|
||||
border-radius: 12px;
|
||||
background: #{"@noti-bg"};
|
||||
border: 1px solid #{"@noti-border-color"};
|
||||
box-shadow: none;
|
||||
}
|
||||
.widget-dnd > switch:checked {
|
||||
background: #{"@bg-selected"};
|
||||
}
|
||||
.widget-dnd > switch slider {
|
||||
background: #{"@noti-bg-hover"};
|
||||
border-radius: 12px;
|
||||
}
|
||||
16
data/style/widgets/inhibitors.scss
Normal file
16
data/style/widgets/inhibitors.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.widget-inhibitors {
|
||||
margin: 8px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.widget-inhibitors > button {
|
||||
font-size: initial;
|
||||
color: #{"@text-color"};
|
||||
text-shadow: none;
|
||||
background: #{"@noti-bg"};
|
||||
border: 1px solid #{"@noti-border-color"};
|
||||
box-shadow: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.widget-inhibitors > button:hover {
|
||||
background: #{"@noti-bg-hover"};
|
||||
}
|
||||
6
data/style/widgets/label.scss
Normal file
6
data/style/widgets/label.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.widget-label {
|
||||
margin: 8px;
|
||||
}
|
||||
.widget-label > label {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
26
data/style/widgets/menubar.scss
Normal file
26
data/style/widgets/menubar.scss
Normal file
@ -0,0 +1,26 @@
|
||||
.widget-menubar > box > .menu-button-bar > button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* .AnyName { Name defined in config after #
|
||||
background-color: @noti-bg;
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.AnyName>button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.AnyName>button:hover {
|
||||
background-color: @noti-bg-hover;
|
||||
} */
|
||||
|
||||
.topbar-buttons > button {
|
||||
/* Name defined in config after # */
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
14
data/style/widgets/mpris.scss
Normal file
14
data/style/widgets/mpris.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.widget-mpris {
|
||||
/* The parent to all players */
|
||||
}
|
||||
.widget-mpris-player {
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
.widget-mpris-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.widget-mpris-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
16
data/style/widgets/title.scss
Normal file
16
data/style/widgets/title.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.widget-title {
|
||||
margin: 8px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.widget-title > button {
|
||||
font-size: initial;
|
||||
color: #{"@text-color"};
|
||||
text-shadow: none;
|
||||
background: #{"@noti-bg"};
|
||||
border: 1px solid #{"@noti-border-color"};
|
||||
box-shadow: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.widget-title > button:hover {
|
||||
background: #{"@noti-bg-hover"};
|
||||
}
|
||||
18
data/style/widgets/volume.scss
Normal file
18
data/style/widgets/volume.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.widget-volume {
|
||||
background-color: #{"@noti-bg"};
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.widget-volume > box > button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.per-app-volume {
|
||||
background-color: #{"@noti-bg-alt"};
|
||||
padding: 4px 8px 8px 8px;
|
||||
margin: 0px 8px 8px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@ -13,6 +13,8 @@ gnome = import('gnome')
|
||||
|
||||
app_resources = []
|
||||
|
||||
config_path = join_paths(get_option('sysconfdir'), 'xdg', 'swaync')
|
||||
|
||||
subdir('data')
|
||||
subdir('src')
|
||||
|
||||
|
||||
@ -121,8 +121,6 @@ args = [
|
||||
'--pkg=GtkLayerShell-0.1',
|
||||
]
|
||||
|
||||
sysconfdir = get_option('sysconfdir')
|
||||
|
||||
app_resources += gnome.compile_resources('sway_notification_center-resources',
|
||||
'sway_notification_center.gresource.xml',
|
||||
c_name: 'sway_notification_center'
|
||||
@ -142,8 +140,6 @@ executable('swaync-client',
|
||||
install: true,
|
||||
)
|
||||
|
||||
config_path = join_paths(sysconfdir, 'xdg/swaync')
|
||||
|
||||
config_data = configuration_data()
|
||||
config_data.set_quoted('JSONPATH', join_paths('/', config_path, 'configSchema.json'))
|
||||
config_json = configure_file(
|
||||
@ -152,6 +148,5 @@ config_json = configure_file(
|
||||
configuration : config_data
|
||||
)
|
||||
|
||||
install_data('style.css', install_dir : config_path)
|
||||
install_data(config_json, install_dir : config_path)
|
||||
install_data('configSchema.json', install_dir : config_path)
|
||||
|
||||
415
src/style.css
415
src/style.css
@ -1,415 +0,0 @@
|
||||
/*
|
||||
* vim: ft=less
|
||||
*/
|
||||
|
||||
@define-color cc-bg rgba(0, 0, 0, 0.7);
|
||||
|
||||
@define-color noti-border-color rgba(255, 255, 255, 0.15);
|
||||
@define-color noti-bg rgb(48, 48, 48);
|
||||
@define-color noti-bg-darker rgb(38, 38, 38);
|
||||
@define-color noti-bg-hover rgb(56, 56, 56);
|
||||
@define-color noti-bg-focus rgba(68, 68, 68, 0.6);
|
||||
@define-color noti-close-bg rgba(255, 255, 255, 0.1);
|
||||
@define-color noti-close-bg-hover rgba(255, 255, 255, 0.15);
|
||||
|
||||
@define-color text-color rgb(255, 255, 255);
|
||||
@define-color text-color-disabled rgb(150, 150, 150);
|
||||
|
||||
@define-color bg-selected rgb(0, 128, 255);
|
||||
|
||||
.notification-group {
|
||||
}
|
||||
|
||||
/* Set lower stacked notifications opacity to 0 */
|
||||
.notification-group.collapsed
|
||||
.notification-row:not(:last-child)
|
||||
.notification-action
|
||||
*,
|
||||
.notification-group.collapsed
|
||||
.notification-row:not(:last-child)
|
||||
.notification-default-action
|
||||
* {
|
||||
transition: opacity 400ms ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.notification-group-buttons,
|
||||
.notification-group-headers {
|
||||
margin: 0 16px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.notification-group-icon {
|
||||
}
|
||||
|
||||
.notification-group > widget {
|
||||
}
|
||||
.notification-group.collapsed:hover .notification-default-action,
|
||||
.notification-group.collapsed:hover .notification-action {
|
||||
background-color: @noti-bg-hover;
|
||||
}
|
||||
|
||||
.notification-row {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.notification-row:focus,
|
||||
.notification-row:hover {
|
||||
background: @noti-bg-focus;
|
||||
}
|
||||
|
||||
.notification {
|
||||
border-radius: 12px;
|
||||
margin: 6px 12px;
|
||||
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);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Uncomment to enable specific urgency colors
|
||||
.notification.low {
|
||||
background: yellow;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.notification.normal {
|
||||
background: green;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.notification.critical {
|
||||
background: red;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.notification-group.low {
|
||||
background: yellow;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.notification-group.normal {
|
||||
background: green;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.notification-group.critical {
|
||||
background: red;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
*/
|
||||
|
||||
.notification-content {
|
||||
background: transparent;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: @noti-close-bg;
|
||||
color: @text-color;
|
||||
text-shadow: none;
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
margin-top: 10px;
|
||||
margin-right: 16px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
box-shadow: none;
|
||||
background: @noti-close-bg-hover;
|
||||
transition: all 0.15s ease-in-out;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.notification-default-action,
|
||||
.notification-action {
|
||||
padding: 4px;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
background: @noti-bg;
|
||||
border: 1px solid @noti-border-color;
|
||||
color: @text-color;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.notification-default-action:hover,
|
||||
.notification-action:hover {
|
||||
-gtk-icon-effect: none;
|
||||
background: @noti-bg-hover;
|
||||
}
|
||||
|
||||
.notification-default-action {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* 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 @noti-border-color;
|
||||
}
|
||||
|
||||
.inline-reply {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.inline-reply-entry {
|
||||
background: @noti-bg-darker;
|
||||
color: @text-color;
|
||||
caret-color: @text-color;
|
||||
border: 1px solid @noti-border-color;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.inline-reply-button {
|
||||
margin-left: 4px;
|
||||
background: @noti-bg;
|
||||
border: 1px solid @noti-border-color;
|
||||
border-radius: 12px;
|
||||
color: @text-color;
|
||||
}
|
||||
.inline-reply-button:disabled {
|
||||
background: initial;
|
||||
color: @text-color-disabled;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.inline-reply-button:hover {
|
||||
background: @noti-bg-hover;
|
||||
}
|
||||
|
||||
.image {
|
||||
-gtk-icon-effect: none;
|
||||
}
|
||||
|
||||
.body-image {
|
||||
margin-top: 6px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
text-shadow: none;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.body {
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.control-center {
|
||||
background: @cc-bg;
|
||||
}
|
||||
|
||||
.control-center-list {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.control-center-list-placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.floating-notifications {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Window behind control center and on all other monitors */
|
||||
.blank-window {
|
||||
background: alpha(black, 0.25);
|
||||
}
|
||||
|
||||
/*** Widgets ***/
|
||||
|
||||
/* Title widget */
|
||||
.widget-title {
|
||||
margin: 8px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.widget-title > button {
|
||||
font-size: initial;
|
||||
color: @text-color;
|
||||
text-shadow: none;
|
||||
background: @noti-bg;
|
||||
border: 1px solid @noti-border-color;
|
||||
box-shadow: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.widget-title > button:hover {
|
||||
background: @noti-bg-hover;
|
||||
}
|
||||
|
||||
/* DND widget */
|
||||
.widget-dnd {
|
||||
margin: 8px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.widget-dnd > switch {
|
||||
font-size: initial;
|
||||
border-radius: 12px;
|
||||
background: @noti-bg;
|
||||
border: 1px solid @noti-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
.widget-dnd > switch:checked {
|
||||
background: @bg-selected;
|
||||
}
|
||||
.widget-dnd > switch slider {
|
||||
background: @noti-bg-hover;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.widget-mpris-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.widget-mpris-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Buttons widget */
|
||||
.widget-buttons-grid {
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
border-radius: 12px;
|
||||
background-color: @noti-bg;
|
||||
}
|
||||
|
||||
.widget-buttons-grid>flowbox>flowboxchild>button{
|
||||
background: @noti-bg;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* style given to the active toggle button */
|
||||
.widget-buttons-grid>flowbox>flowboxchild>button.toggle:checked {
|
||||
}
|
||||
|
||||
.widget-buttons-grid>flowbox>flowboxchild>button:hover {
|
||||
}
|
||||
|
||||
/* Menubar widget */
|
||||
.widget-menubar>box>.menu-button-bar>button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* .AnyName { Name defined in config after #
|
||||
background-color: @noti-bg;
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.AnyName>button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.AnyName>button:hover {
|
||||
background-color: @noti-bg-hover;
|
||||
} */
|
||||
|
||||
.topbar-buttons>button { /* Name defined in config after # */
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Volume widget */
|
||||
|
||||
.widget-volume {
|
||||
background-color: @noti-bg;
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.widget-volume>box>button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.per-app-volume {
|
||||
background-color: @noti-bg-alt;
|
||||
padding: 4px 8px 8px 8px;
|
||||
margin: 0px 8px 8px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Backlight widget */
|
||||
.widget-backlight {
|
||||
background-color: @noti-bg;
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Title widget */
|
||||
.widget-inhibitors {
|
||||
margin: 8px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.widget-inhibitors > button {
|
||||
font-size: initial;
|
||||
color: @text-color;
|
||||
text-shadow: none;
|
||||
background: @noti-bg;
|
||||
border: 1px solid @noti-border-color;
|
||||
box-shadow: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.widget-inhibitors > button:hover {
|
||||
background: @noti-bg-hover;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user