Skip to content

X
ximper-shell-notification-center
Commit a00a16ae authored by Erik Reider's avatar Erik Reider
Browse files
Options

Replaced most SCSS variables with CSS variables

Makes it easier to override variables like border radius without recompiling the original SCSS
parent 56a81d15
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 80 deletions
data/style/style.scss
View file @ a00a16ae
...@@ -18,20 +18,20 @@ ...@@ -18,20 +18,20 @@
--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: 1px solid var(--noti-border-color);
$border-radius: 12px; --border-radius: 12px;
$margin: 8px;
$font-size-body: 15px; --notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
$font-size-summary: 16px; 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;
$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;
}
$notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), $margin: 8px;
0 1px 3px 1px rgba(0, 0, 0, 0.7), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
.close-button { .close-button {
/* The notification Close Button */ /* The notification Close Button */
...@@ -50,7 +50,7 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -50,7 +50,7 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
&:hover { &:hover {
box-shadow: none; box-shadow: none;
background: var(--noti-close-bg-hover); background: var(--noti-close-bg-hover);
transition: $hover-tranistion; transition: var(--hover-tranistion);
border: none; border: none;
} }
} }
...@@ -62,26 +62,28 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -62,26 +62,28 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
&:focus { &:focus {
background: var(--noti-bg-focus); background: var(--noti-bg-focus);
} }
.notification-background { .notification-background {
padding: 6px 12px; padding: 6px 12px;
.close-button { .close-button {}
}
.notification { .notification {
/* The actual notification */ /* The actual notification */
border-radius: $border-radius; border-radius: var(--border-radius);
border: $border; border: var(--border);
padding: 0; padding: 0;
transition: $hover-tranistion; transition: var(--hover-tranistion);
background: rgba(var(--noti-bg), var(--noti-bg-alpha)); background: rgba(var(--noti-bg), var(--noti-bg-alpha));
&.low { &.low {
/* Low Priority Notification */ /* Low Priority Notification */
} }
&.normal { &.normal {
/* Normal Priority Notification */ /* Normal Priority Notification */
} }
&.critical { &.critical {
/* Critical Priority Notification */ /* Critical Priority Notification */
} }
...@@ -94,8 +96,8 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -94,8 +96,8 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
background: transparent; background: transparent;
border: none; border: none;
color: var(--text-color); color: var(--text-color);
transition: $hover-tranistion; transition: var(--hover-tranistion);
border-radius: $border-radius; border-radius: var(--border-radius);
&:hover { &:hover {
-gtk-icon-filter: none; -gtk-icon-filter: none;
...@@ -110,7 +112,7 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -110,7 +112,7 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
.notification-content { .notification-content {
background: transparent; background: transparent;
border-radius: $border-radius; border-radius: var(--border-radius);
$margin: 4px; $margin: 4px;
padding: 0; padding: 0;
...@@ -118,9 +120,11 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -118,9 +120,11 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
/* Notification Primary 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; /* Size in px */ border-radius: 100px;
/* Size in px */
margin: $margin; margin: $margin;
} }
.app-icon { .app-icon {
/* Notification app icon (only visible when the primary image is set) */ /* Notification app icon (only visible when the primary image is set) */
-gtk-icon-filter: none; -gtk-icon-filter: none;
...@@ -137,24 +141,26 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -137,24 +141,26 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
.summary { .summary {
/* Notification summary/title */ /* Notification summary/title */
font-size: $font-size-summary; font-size: var(--font-size-summary);
font-weight: bold; font-weight: bold;
background: transparent; background: transparent;
color: var(--text-color); color: var(--text-color);
text-shadow: none; text-shadow: none;
} }
.time { .time {
/* Notification time-ago */ /* Notification time-ago */
font-size: $font-size-summary; font-size: var(--font-size-summary);
font-weight: bold; font-weight: bold;
background: transparent; background: transparent;
color: var(--text-color); color: var(--text-color);
text-shadow: none; text-shadow: none;
margin-right: 30px; margin-right: 30px;
} }
.body { .body {
/* Notification body */ /* Notification body */
font-size: $font-size-body; font-size: var(--font-size-body);
font-weight: normal; font-weight: normal;
background: transparent; background: transparent;
color: var(--text-color); color: var(--text-color);
...@@ -182,22 +188,24 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -182,22 +188,24 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
background: var(--noti-bg-darker); background: var(--noti-bg-darker);
color: var(--text-color); color: var(--text-color);
caret-color: var(--text-color); caret-color: var(--text-color);
border: $border; border: var(--border);
border-radius: $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: rgba(var(--noti-bg), var(--noti-bg-alpha));
border: $border; border: var(--border);
border-radius: $border-radius; border-radius: var(--border-radius);
color: var(--text-color); color: var(--text-color);
&:disabled { &:disabled {
background: initial; background: initial;
color: var(--text-color-disabled); color: var(--text-color-disabled);
border: $border; border: var(--border);
border-color: transparent; border-color: transparent;
} }
&:hover { &:hover {
background: var(--noti-bg-hover); background: var(--noti-bg-hover);
} }
...@@ -208,8 +216,8 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -208,8 +216,8 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
.notification-alt-actions { .notification-alt-actions {
background: none; background: none;
border-bottom-left-radius: $border-radius; border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: $border-radius; border-bottom-right-radius: var(--border-radius);
padding: $margin / 2; padding: $margin / 2;
} }
...@@ -218,8 +226,8 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -218,8 +226,8 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
margin: $margin / 2; margin: $margin / 2;
padding: 0; padding: 0;
& > button { &>button {
border-radius: $border-radius; border-radius: var(--border-radius);
color: var(--text-color); color: var(--text-color);
} }
} }
...@@ -238,9 +246,11 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -238,9 +246,11 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
&.low { &.low {
/* Low Priority Group */ /* Low Priority Group */
} }
&.normal { &.normal {
/* Low Priority Group */ /* Low Priority Group */
} }
&.critical { &.critical {
/* Low Priority Group */ /* Low Priority Group */
} }
...@@ -263,16 +273,19 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -263,16 +273,19 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
color: var(--text-color); color: var(--text-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(--text-color);
} }
} }
.notification-group-buttons { .notification-group-buttons {
/* Notification Group Buttons */ /* Notification Group Buttons */
@extend %header; @extend %header;
} }
&.collapsed { &.collapsed {
/* When another group is expanded, lower the opacity of the collapsed ones */ /* When another group is expanded, lower the opacity of the collapsed ones */
&.not-expanded { &.not-expanded {
opacity: 0.4; opacity: 0.4;
...@@ -284,6 +297,7 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -284,6 +297,7 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
} }
&:not(:last-child) { &:not(:last-child) {
/* Top notification in stack */ /* Top notification in stack */
/* Set lower stacked notifications opacity to 0 */ /* Set lower stacked notifications opacity to 0 */
.notification-action, .notification-action,
...@@ -307,7 +321,7 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -307,7 +321,7 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
/* The Control Center which contains the old notifications + widgets */ /* The Control Center which contains the old notifications + widgets */
background: var(--cc-bg); background: var(--cc-bg);
color: var(--text-color); color: var(--text-color);
border-radius: $border-radius; border-radius: var(--border-radius);
.control-center-list-placeholder { .control-center-list-placeholder {
/* The placeholder when there are no notifications */ /* The placeholder when there are no notifications */
...@@ -319,11 +333,11 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), ...@@ -319,11 +333,11 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
background: transparent; background: transparent;
.notification { .notification {
box-shadow: $notification-shadow; box-shadow: var(--notification-shadow);
.notification-default-action, .notification-default-action,
.notification-action { .notification-action {
transition: $group-collapse-tranistion, $hover-tranistion; transition: var(--group-collapse-tranistion), var(--hover-tranistion);
&:hover { &:hover {
background-color: var(--noti-bg-hover); background-color: var(--noti-bg-hover);
......
data/style/widgets/backlight.scss
View file @ a00a16ae
.widget-backlight { .widget-backlight {
padding: $margin; padding: $margin;
margin: $margin; margin: $margin;
border-radius: $border-radius; border-radius: var(--border-radius);
} }
\ No newline at end of file
data/style/widgets/buttons.scss
View file @ a00a16ae
.widget-buttons-grid { .widget-buttons-grid {
padding: $margin; padding: $margin;
margin: $margin; margin: $margin;
border-radius: $border-radius; border-radius: var(--border-radius);
& flowboxchild>button {
border-radius: var(--border-radius);
& flowboxchild > button {
border-radius: $border-radius;
&.toggle:checked { &.toggle:checked {
/* style given to the active toggle button */ /* style given to the active toggle button */
} }
&:hover { &:hover {}
}
} }
} }
\ No newline at end of file
data/style/widgets/dnd.scss
View file @ a00a16ae
...@@ -6,14 +6,13 @@ ...@@ -6,14 +6,13 @@
} }
switch { switch {
border-radius: $border-radius; border-radius: var(--border-radius);
margin: $margin; margin: $margin;
&:checked { &:checked {}
}
slider { slider {
border-radius: $border-radius; border-radius: var(--border-radius);
} }
} }
} }
\ No newline at end of file
data/style/widgets/inhibitors.scss
View file @ a00a16ae
.widget-inhibitors { .widget-inhibitors {
& > label { &>label {
margin: $margin; margin: $margin;
font-size: 1.5rem; font-size: 1.5rem;
} }
& > button { &>button {
margin: $margin; margin: $margin;
border-radius: $border-radius; border-radius: var(--border-radius);
} }
} }
\ No newline at end of file
data/style/widgets/menubar.scss
View file @ a00a16ae
.widget-menubar { .widget-menubar {
& > .menu-button-bar { &>.menu-button-bar {
/* The left button container */ /* The left button container */
& > .start { &>.start {
margin-left: $margin; margin-left: $margin;
} }
/* The right button container */ /* The right button container */
& > .end { &>.end {
margin-right: $margin; margin-right: $margin;
} }
/* The left and right button container */ /* The left and right button container */
& > .widget-menubar-container { &>.widget-menubar-container {
button { button {
border-radius: $border-radius; border-radius: var(--border-radius);
margin: 0 $margin / 2; margin: 0 $margin / 2;
} }
} }
} }
/* The revealer buttons */ /* The revealer buttons */
& > revealer { &>revealer {
margin-top: $margin; margin-top: $margin;
button { button {
border-radius: $border-radius; border-radius: var(--border-radius);
margin: $margin; margin: $margin;
margin-top: 0; margin-top: 0;
} }
...@@ -45,4 +46,4 @@ ...@@ -45,4 +46,4 @@
.AnyName>button:hover { .AnyName>button:hover {
background-color: var(--noti-bg-hover); background-color: var(--noti-bg-hover);
} */ } */
} }
\ No newline at end of file
data/style/widgets/mpris.scss
View file @ a00a16ae
...@@ -2,18 +2,17 @@ ...@@ -2,18 +2,17 @@
--mpris-album-art-overlay: rgba(0, 0, 0, 0.55); --mpris-album-art-overlay: rgba(0, 0, 0, 0.55);
--mpris-button-hover: rgba(0, 0, 0, 0.5); --mpris-button-hover: rgba(0, 0, 0, 0.5);
--mpris-album-art-icon-size: 96px; --mpris-album-art-icon-size: 96px;
--mpris-album-art-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
} }
$mpris-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
.widget-mpris { .widget-mpris {
margin: $margin; margin: $margin;
/* The parent to all players */ /* The parent to all players */
.widget-mpris-player { .widget-mpris-player {
margin: 16px 20px; margin: 16px 20px;
border-radius: $border-radius; border-radius: var(--border-radius);
box-shadow: $mpris-shadow; box-shadow: var(--mpris-album-art-shadow);
.mpris-background { .mpris-background {
filter: blur(10px); filter: blur(10px);
...@@ -29,19 +28,22 @@ $mpris-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75); ...@@ -29,19 +28,22 @@ $mpris-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
} }
.widget-mpris-album-art { .widget-mpris-album-art {
border-radius: $border-radius; border-radius: var(--border-radius);
box-shadow: $mpris-shadow; box-shadow: var(--mpris-album-art-shadow);
-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.25rem;
} }
.widget-mpris-subtitle { .widget-mpris-subtitle {
font-size: 1.1rem; font-size: 1.1rem;
} }
& > box > button { &>box>button {
/* Change player control buttons */ /* Change player control buttons */
&:hover { &:hover {
background-color: var(--mpris-button-hover); background-color: var(--mpris-button-hover);
...@@ -50,10 +52,11 @@ $mpris-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75); ...@@ -50,10 +52,11 @@ $mpris-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
} }
} }
& > box > button { &>box>button {
/* Change player side buttons */ /* Change player side buttons */
} }
& > box > button:disabled {
&>box>button:disabled {
/* Change player side buttons insensitive */ /* Change player side buttons insensitive */
} }
} }
data/style/widgets/slider.scss
View file @ a00a16ae
.widget-slider { .widget-slider {
padding: $margin; padding: $margin;
margin: $margin; margin: $margin;
border-radius: $border-radius; border-radius: var(--border-radius);
label { label {
font-size: inherit; font-size: inherit;
} }
} }
\ No newline at end of file
data/style/widgets/title.scss
View file @ a00a16ae
.widget-title { .widget-title {
& > label { &>label {
margin: $margin; margin: $margin;
font-size: 1.5rem; font-size: 1.5rem;
} }
& > button { &>button {
margin: $margin; margin: $margin;
border-radius: $border-radius; border-radius: var(--border-radius);
} }
} }
\ No newline at end of file
data/style/widgets/volume.scss
View file @ a00a16ae
...@@ -5,11 +5,10 @@ ...@@ -5,11 +5,10 @@
.widget-volume { .widget-volume {
padding: $margin; padding: $margin;
margin: $margin; margin: $margin;
border-radius: $border-radius; border-radius: var(--border-radius);
} }
.widget-volume > box > button { .widget-volume>box>button {}
}
/* Each row app icon */ /* Each row app icon */
.widget-volume row image { .widget-volume row image {
...@@ -20,5 +19,5 @@ ...@@ -20,5 +19,5 @@
background-color: var(--noti-bg-alt); background-color: var(--noti-bg-alt);
padding: $margin/2 $margin $margin $margin; padding: $margin/2 $margin $margin $margin;
margin: 0px $margin $margin $margin; margin: 0px $margin $margin $margin;
border-radius: $border-radius; border-radius: var(--border-radius);
} }
\ No newline at end of file
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