Skip to content

X
ximper-shell-notification-center
Verified Commit eddf1b6a authored by Kirill Unitsaev's avatar Kirill Unitsaev
Browse files
Options

style: migrate to Adwaita CSS variables for theme integration

parent ba5bcaf5
Hide whitespace changes
Inline Side-by-side
Showing with 232 additions and 187 deletions
data/style/style.scss
View file @ eddf1b6a
:root { :root {
--cc-bg: rgba(46, 46, 46, 0.7);
--noti-border-color: rgba(255, 255, 255, 0.15);
--noti-bg: 48, 48, 48;
--noti-bg-alpha: 0.8;
--noti-bg-darker: rgb(38, 38, 38);
--noti-bg-hover: rgb(56, 56, 56);
--noti-bg-focus: rgba(68, 68, 68, 0.6);
--noti-close-bg: rgb(78, 78, 78);
--noti-close-bg-hover: rgb(94, 94, 94);
--text-color: rgb(255, 255, 255);
--text-color-disabled: rgb(150, 150, 150);
--bg-selected: rgb(0, 128, 255);
--notification-icon-size: 64px; --notification-icon-size: 64px;
--notification-app-icon-size: calc(var(--notification-icon-size) / 3); --notification-app-icon-size: calc(var(--notification-icon-size) / 3);
--notification-group-icon-size: 32px; --notification-group-icon-size: 32px;
--border: 1px solid var(--noti-border-color);
--border-radius: 12px; --border-radius: 12px;
--notification-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);
--font-size-body: 15px;
--font-size-summary: 16px;
/* Deprecated variables (because of their typos). Keeeping them around for backwards compatibility. */
--hover-tranistion: background 0.15s ease-in-out; --hover-tranistion: background 0.15s ease-in-out;
--group-collapse-tranistion: opacity 400ms ease-in-out; --group-collapse-tranistion: opacity 400ms ease-in-out;
--hover-transition: var(--hover-tranistion); --hover-transition: var(--hover-tranistion);
--group-collapse-transition: var(--group-collapse-tranistion); --group-collapse-transition: var(--group-collapse-tranistion);
} }
...@@ -44,10 +20,21 @@ notificationwindow, blankwindow { ...@@ -44,10 +20,21 @@ notificationwindow, blankwindow {
background: transparent; background: transparent;
} }
.blank-window {
background: transparent;
}
.floating-notifications {
background: transparent;
.notification {
box-shadow: none;
}
}
.close-button { .close-button {
/* The notification Close Button */ background: unquote("alpha(var(--window-bg-color), 0.6)");
background: var(--noti-close-bg); color: var(--window-fg-color);
color: var(--text-color);
text-shadow: none; text-shadow: none;
padding: 0; padding: 0;
border-radius: 100%; border-radius: 100%;
...@@ -60,7 +47,7 @@ notificationwindow, blankwindow { ...@@ -60,7 +47,7 @@ notificationwindow, blankwindow {
&:hover { &:hover {
box-shadow: none; box-shadow: none;
background: var(--noti-close-bg-hover); background: unquote("alpha(var(--window-bg-color), 0.4)");
transition: var(--hover-tranistion); transition: var(--hover-tranistion);
border: none; border: none;
} }
...@@ -71,52 +58,50 @@ notificationwindow, blankwindow { ...@@ -71,52 +58,50 @@ notificationwindow, blankwindow {
outline: none; outline: none;
&:focus { &:focus {
background: var(--noti-bg-focus); background: none;
} }
.notification-background { .notification-background {
padding: 6px 12px; padding: 5px 0;
.close-button {} .close-button {}
.notification { .notification {
/* The actual notification */ border-radius: var(--window-radius);
border-radius: var(--border-radius); border: 1px solid var(--border-color);
border: var(--border);
padding: 0; padding: 0;
transition: var(--hover-tranistion); transition: var(--hover-tranistion);
background: rgba(var(--noti-bg), var(--noti-bg-alpha)); background: var(--dialog-bg-color);
box-shadow: 0 0 5px 0 var(--headerbar-shade-color);
&.low { &.low {
/* Low Priority Notification */ border-left: 4px solid var(--success-bg-color);
} }
&.normal { &.normal {
/* Normal Priority Notification */ border-left: 4px solid var(--blue-3);
} }
&.critical { &.critical {
/* Critical Priority Notification */ border-left: 4px solid var(--error-bg-color);
} }
.notification-default-action { .notification-default-action {
/* The large action that also displays the notification summary and body */ padding: 10px;
padding: $margin / 2;
margin: 0; margin: 0;
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
border: none; border: none;
color: var(--text-color); color: var(--window-fg-color);
transition: var(--hover-tranistion); transition: var(--hover-tranistion);
border-radius: var(--border-radius); border-radius: var(--window-radius);
&:hover { &:hover {
-gtk-icon-filter: none; -gtk-icon-filter: none;
background: var(--noti-bg-hover); background: unquote("alpha(var(--window-fg-color), 0.05)");
} }
&:not(:only-child) { &:not(:only-child) {
/* When alternative actions are visible */
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
} }
...@@ -128,16 +113,13 @@ notificationwindow, blankwindow { ...@@ -128,16 +113,13 @@ notificationwindow, blankwindow {
padding: 0; padding: 0;
.image { .image {
/* Notification Primary Image */
-gtk-icon-filter: none; -gtk-icon-filter: none;
-gtk-icon-size: var(--notification-icon-size); -gtk-icon-size: var(--notification-icon-size);
border-radius: 100px; border-radius: var(--window-radius);
/* Size in px */ margin: 0px 10px 0px 0px;
margin: $margin;
} }
.app-icon { .app-icon {
/* Notification app icon (only visible when the primary image is set) */
-gtk-icon-filter: none; -gtk-icon-filter: none;
-gtk-icon-size: var(--notification-app-icon-size); -gtk-icon-size: var(--notification-app-icon-size);
-gtk-icon-shadow: 0 1px 4px black; -gtk-icon-shadow: 0 1px 4px black;
...@@ -146,79 +128,68 @@ notificationwindow, blankwindow { ...@@ -146,79 +128,68 @@ notificationwindow, blankwindow {
.text-box { .text-box {
label { label {
/* Fixes base GTK 4 CSS setting a filter of opacity 50% for some odd reason */
filter: none; filter: none;
} }
.summary { .summary {
/* Notification summary/title */
font-size: var(--font-size-summary);
font-weight: bold; font-weight: bold;
background: transparent; background: transparent;
color: var(--text-color); color: var(--window-fg-color);
text-shadow: none; text-shadow: none;
} }
.time { .time {
/* Notification time-ago */
font-size: var(--font-size-summary);
font-weight: bold; font-weight: bold;
background: transparent; background: transparent;
color: var(--text-color); color: var(--window-fg-color);
text-shadow: none; text-shadow: none;
margin-right: 30px; margin-right: 20px;
} }
.body { .body {
/* Notification body */
font-size: var(--font-size-body);
font-weight: normal; font-weight: normal;
background: transparent; background: transparent;
color: var(--text-color); color: var(--window-fg-color);
text-shadow: none; text-shadow: none;
} }
} }
progressbar { progressbar {
/* The optional notification progress bar */
margin-top: $margin; margin-top: $margin;
} }
.body-image { .body-image {
/* The "extra" optional bottom notification image */
margin-top: $margin; margin-top: $margin;
background-color: white; background-color: white;
-gtk-icon-filter: none; -gtk-icon-filter: none;
} }
.inline-reply { .inline-reply {
/* The inline reply section */
margin-top: $margin; margin-top: $margin;
.inline-reply-entry { .inline-reply-entry {
background: var(--noti-bg-darker); background: var(--view-bg-color);
color: var(--text-color); color: var(--window-fg-color);
caret-color: var(--text-color); caret-color: var(--window-fg-color);
border: var(--border); border: 1px solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.inline-reply-button { .inline-reply-button {
margin-left: 4px; margin-left: 4px;
background: rgba(var(--noti-bg), var(--noti-bg-alpha)); background: var(--dialog-bg-color);
border: var(--border); border: 1px solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--text-color); color: var(--window-fg-color);
&:disabled { &:disabled {
background: initial; background: initial;
color: var(--text-color-disabled); color: unquote("alpha(var(--window-fg-color), 0.5)");
border: var(--border);
border-color: transparent; border-color: transparent;
} }
&:hover { &:hover {
background: var(--noti-bg-hover); background: unquote("alpha(var(--window-fg-color), 0.05)");
} }
} }
} }
...@@ -233,13 +204,19 @@ notificationwindow, blankwindow { ...@@ -233,13 +204,19 @@ notificationwindow, blankwindow {
} }
.notification-action { .notification-action {
/* The alternative actions below the default action */
margin: $margin / 2; margin: $margin / 2;
padding: 0; padding: 0;
&>button { &>button {
border-radius: var(--border-radius); border-radius: var(--window-radius);
color: var(--text-color); color: var(--window-fg-color);
background: unquote("alpha(var(--window-bg-color), 0.4)");
border: 1px solid var(--border-color);
&:hover {
background: unquote("alpha(var(--window-bg-color), 0.2)");
border: 2px solid var(--accent-bg-color);
}
} }
} }
} }
...@@ -247,81 +224,79 @@ notificationwindow, blankwindow { ...@@ -247,81 +224,79 @@ notificationwindow, blankwindow {
} }
.notification-group { .notification-group {
/* Styling only for Grouped Notifications */
transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out;
&:focus { &:focus {
background: var(--noti-bg-focus); background: none;
}
&.low {
/* Low Priority Group */
}
&.normal {
/* Low Priority Group */
} }
&.critical {
/* Low Priority Group */
}
/* The groups close button */
.notification-group-close-button .close-button { .notification-group-close-button .close-button {
background: unquote("alpha(var(--window-bg-color), 0.4)");
box-shadow: 0 0 5px 0 var(--headerbar-shade-color);
margin: $margin * 1.5 $margin * 2.5; margin: $margin * 1.5 $margin * 2.5;
&:hover {
background: unquote("alpha(var(--window-bg-color), 0.8)");
}
} }
%header { %header {
margin: 0 $margin * 2; margin: 0 $margin * 2;
color: var(--text-color); color: var(--window-fg-color);
} }
.notification-group-headers { .notification-group-headers {
/* Notification Group Headers */
@extend %header; @extend %header;
.notification-group-icon { .notification-group-icon {
color: var(--text-color); color: var(--window-fg-color);
-gtk-icon-size: var(--notification-group-icon-size); -gtk-icon-size: var(--notification-group-icon-size);
} }
.notification-group-header { .notification-group-header {
color: var(--text-color); color: var(--window-fg-color);
} }
} }
.notification-group-buttons { .notification-group-buttons {
/* Notification Group Buttons */
@extend %header; @extend %header;
padding: 5px;
} }
&.collapsed { &.collapsed {
/* When another group is expanded, lower the opacity of the collapsed ones */
&.not-expanded { &.not-expanded {
opacity: 0.4; opacity: 0.4;
} }
.notification-row { .notification-row:not(:last-child) {
.notification { .notification {
background-color: rgba(var(--noti-bg), 1); background-color: var(--window-bg-color);
} }
}
&:not(:last-child) { .notification-row:not(:last-child) {
/* Top notification in stack */
/* Set lower stacked notifications opacity to 0 */
.notification-action, .notification-action,
.notification-default-action { .notification-default-action {
opacity: 0; opacity: 0;
} }
}
.notification.low {
border-left: 3px solid unquote("alpha(var(--success-bg-color), 0.5)");
}
.notification.normal {
border-left: 3px solid unquote("alpha(var(--blue-3), 0.5)");
}
.notification.critical {
border-left: 3px solid unquote("alpha(var(--error-bg-color), 0.5)");
}
} }
&:hover { &:hover {
.notification-row:not(:only-child) { .notification-row:not(:only-child) {
.notification { .notification {
background-color: var(--noti-bg-hover); background-color: var(--dialog-bg-color);
} }
} }
} }
...@@ -329,53 +304,31 @@ notificationwindow, blankwindow { ...@@ -329,53 +304,31 @@ notificationwindow, blankwindow {
} }
.control-center { .control-center {
/* The Control Center which contains the old notifications + widgets */ background: var(--window-bg-color);
background: var(--cc-bg); color: var(--window-fg-color);
color: var(--text-color); border-radius: var(--window-radius);
border-radius: var(--border-radius); box-shadow: 0 0 10px 0 var(--headerbar-shade-color);
.control-center-list-placeholder { .control-center-list-placeholder {
/* The placeholder when there are no notifications */
opacity: 0.5; opacity: 0.5;
} }
.control-center-list { .control-center-list {
/* List of notifications */
background: transparent; background: transparent;
margin: 0px 15px;
.notification { .notification {
box-shadow: var(--notification-shadow);
.notification-default-action, .notification-default-action,
.notification-action { .notification-action {
transition: var(--group-collapse-tranistion), var(--hover-tranistion); transition: var(--group-collapse-tranistion), var(--hover-tranistion);
&:hover {
background-color: var(--noti-bg-hover);
}
} }
} }
} }
} }
.blank-window {
/* Window behind control center and on all other monitors */
background: transparent;
}
.floating-notifications {
background: transparent;
.notification {
box-shadow: none;
}
}
/*** Widgets ***/ /*** Widgets ***/
.widget { .widget {
margin: $margin; padding: 0;
padding: $margin;
border-radius: var(--border-radius);
} }
/* Title widget */ /* Title widget */
......
data/style/widgets/backlight.scss
View file @ eddf1b6a
.widget-backlight { .widget-backlight {
padding: 0px 10px;
margin: 5px 15px;
border-radius: var(--window-radius);
&.expanded {
background: var(--dialog-bg-color);
box-shadow: 0px 0px 10px var(--headerbar-shade-color);
border: 1px solid var(--border-color);
}
}
.widget-backlight .image-button {
background: transparent;
} }
data/style/widgets/inhibitors.scss
View file @ eddf1b6a
.widget-inhibitors { .widget-inhibitors {
& > label { background: transparent;
margin-right: $margin; padding: 0px;
margin: 10px 15px;
&>label {
font-size: 1.5rem; font-size: 1.5rem;
margin-right: $margin;
} }
& > button { &>button {
background: var(--dialog-bg-color);
border-radius: 999px;
border: 1px solid var(--border-color);
margin-left: $margin; margin-left: $margin;
border-radius: var(--border-radius);
&:hover {
background: unquote("alpha(var(--dialog-bg-color), 0.5)");
border: 1px solid var(--accent-bg-color);
}
} }
} }
data/style/widgets/label.scss
View file @ eddf1b6a
.widget-label { .widget-label {
& > label { margin: 5px 15px;
&>label {
font-size: 1.1rem; font-size: 1.1rem;
} }
} }
data/style/widgets/mpris.scss
View file @ eddf1b6a
:root { :root {
--mpris-album-art-overlay: rgba(0, 0, 0, 0.55); --mpris-album-art-icon-size: 64px;
--mpris-button-hover: rgba(0, 0, 0, 0.5);
--mpris-album-art-icon-size: 96px;
--mpris-album-art-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
} }
.widget-mpris { .widget-mpris {
padding: 0; padding: 0;
margin: 5px 10px;
/* The parent to all players */ carouselindicatordots {
.widget-mpris-player { margin: 0px;
margin: 16px 20px; padding: 0px;
border-radius: var(--border-radius); }
box-shadow: var(--mpris-album-art-shadow);
.mpris-background { .flat.image-button {
filter: blur(10px); margin: 0px;
} padding: 0px;
}
.mpris-overlay { .mpris-background {
padding: 16px; background: transparent;
background-color: var(--mpris-album-art-overlay); }
button:hover { .widget-mpris-player {
/* The media player buttons (play, pause, next, etc...) */ margin: 0 5px;
background: var(--noti-bg-hover); border-radius: var(--window-radius);
} box-shadow: 0px 0px 10px var(--headerbar-shade-color);
border: 1px solid var(--border-color);
.mpris-overlay {
background: var(--dialog-bg-color);
padding: 5px;
.widget-mpris-album-art { .widget-mpris-album-art {
border-radius: var(--border-radius); border-radius: var(--window-radius);
box-shadow: var(--mpris-album-art-shadow); margin: 3px;
box-shadow: none;
-gtk-icon-size: var(--mpris-album-art-icon-size); -gtk-icon-size: var(--mpris-album-art-icon-size);
} }
.widget-mpris-title { .widget-mpris-title {
font-weight: bold; font-weight: bold;
font-size: 1.25rem; font-size: 1.1rem;
} }
.widget-mpris-subtitle { .widget-mpris-subtitle {
font-size: 1.1rem; font-size: 0.9rem;
} }
&>box>button { .image-button {
padding: 0px 5px;
/* Change player control buttons */
&:hover { &:hover {
background-color: var(--mpris-button-hover); background: unquote("alpha(var(--window-bg-color), 0.3)");
border: 0.5px solid var(--border-color);
} }
} }
} }
} }
&>box>button {
/* Change player side buttons */
}
&>box>button:disabled {
/* Change player side buttons insensitive */
}
} }
data/style/widgets/quick-settings.scss
View file @ eddf1b6a
.widget-quick-settings { .widget-quick-settings {
padding: 0; padding: 0;
margin: 5px 15px;
} }
.quick-settings-row { .quick-settings-row {
...@@ -8,7 +9,30 @@ ...@@ -8,7 +9,30 @@
.quick-settings-tile { .quick-settings-tile {
border-radius: 999px; border-radius: 999px;
overflow: hidden; background: var(--dialog-bg-color);
box-shadow: 0px 0px 5px var(--headerbar-shade-color);
border: 1px solid var(--border-color);
&:hover {
background: unquote("alpha(var(--dialog-bg-color), 0.7)");
}
&.active {
background: var(--accent-bg-color);
color: var(--accent-fg-color);
&:hover {
background: unquote("alpha(var(--accent-bg-color), 0.85)");
}
.tile-arrow {
background: unquote("alpha(currentColor, 0.15)");
}
.tile-separator {
background: unquote("alpha(currentColor, 0.3)");
}
}
.tile-toggle { .tile-toggle {
padding: 4px 12px; padding: 4px 12px;
...@@ -17,17 +41,29 @@ ...@@ -17,17 +41,29 @@
background: transparent; background: transparent;
} }
.tile-separator {
background: unquote("alpha(currentColor, 0.3)");
}
.tile-arrow { .tile-arrow {
padding: 4px; padding: 4px;
min-width: 24px; min-width: 24px;
border: none; border: none;
box-shadow: none; box-shadow: none;
background: transparent; background: unquote("alpha(currentColor, 0.07)");
border-radius: 0 999px 999px 0;
&:hover {
background: unquote("alpha(currentColor, 0.2)");
}
} }
} }
.quick-settings-submenu { .quick-settings-submenu {
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin: 4px 0; margin: 5px 0;
padding: 4px; padding: 4px;
background: var(--dialog-bg-color);
border: 1px solid var(--border-color);
box-shadow: 0px 0px 10px var(--headerbar-shade-color);
} }
data/style/widgets/slider.scss
View file @ eddf1b6a
.widget-slider { .widget-slider {
label {
font-size: inherit;
}
} }
data/style/widgets/title.scss
View file @ eddf1b6a
.widget-title { .widget-title {
& > label { background: transparent;
margin-right: $margin; padding: 0px;
margin: 10px 15px;
&>label {
font-size: 1.5rem; font-size: 1.5rem;
margin-right: $margin;
} }
& > button { &>button {
background: var(--dialog-bg-color);
border-radius: 999px;
border: 1px solid var(--border-color);
margin-left: $margin; margin-left: $margin;
border-radius: var(--border-radius);
&:hover {
background: unquote("alpha(var(--dialog-bg-color), 0.5)");
border: 1px solid var(--accent-bg-color);
}
} }
} }
data/style/widgets/volume.scss
View file @ eddf1b6a
.widget-volume { .widget-volume {
padding: 0px 10px;
margin: 5px 15px;
border-radius: var(--window-radius);
&.expanded {
background: var(--dialog-bg-color);
box-shadow: 0px 0px 10px var(--headerbar-shade-color);
border: 1px solid var(--border-color);
}
}
.widget-volume .image-button {
background: transparent;
}
.widget-volume>box {
margin: 0 0 0 3px;
} }
.widget-volume>box>button {} .widget-volume>box>button {}
.widget-volume revealer {
padding: 0;
margin: 0;
}
.per-app-volume { .per-app-volume {
background-color: var(--noti-bg-alt); background: transparent;
margin: $margin; padding: 0;
margin-bottom: 0; margin: 0;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.per-app-volume row {
background: transparent;
}
src/controlCenter/widgets/backlight/backlight.vala
View file @ eddf1b6a
...@@ -236,6 +236,7 @@ namespace XimperShellNotificationCenter.Widgets { ...@@ -236,6 +236,7 @@ namespace XimperShellNotificationCenter.Widgets {
// Multiple sources — collapsible layout // Multiple sources — collapsible layout
if (need_collapse) { if (need_collapse) {
add_css_class ("has-collapse");
var topbar = new Gtk.Box ( var topbar = new Gtk.Box (
Gtk.Orientation.HORIZONTAL, 6); Gtk.Orientation.HORIZONTAL, 6);
var topbar_icon = new Gtk.Image.from_icon_name ( var topbar_icon = new Gtk.Image.from_icon_name (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment