Adds new style
This commit is contained in:
parent
54ecbaea3c
commit
271bbff95e
13 changed files with 74 additions and 43 deletions
|
|
@ -25,7 +25,7 @@ Config(
|
||||||
layer: Overlay,
|
layer: Overlay,
|
||||||
|
|
||||||
// Hide the plugin info panel
|
// Hide the plugin info panel
|
||||||
hide_plugin_info: false,
|
hide_plugin_info: true,
|
||||||
|
|
||||||
// Close window when a click outside the main box is received
|
// Close window when a click outside the main box is received
|
||||||
close_on_click: false,
|
close_on_click: false,
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
layerrule = blur, gtk-layer-shell
|
layerrule = blur, gtk-layer-shell
|
||||||
layerrule = blur, logout_dialog
|
layerrule = blur, logout_dialog
|
||||||
|
|
||||||
layerrule = blur, waybar
|
layerrule = blur, waybar
|
||||||
layerrule = ignorezero, waybar
|
layerrule = ignorezero, waybar
|
||||||
|
|
||||||
|
|
@ -7,3 +8,10 @@ layerrule = blur, anyrun
|
||||||
layerrule = ignorezero, anyrun
|
layerrule = ignorezero, anyrun
|
||||||
|
|
||||||
layerrule = blur, swaync-notification-window
|
layerrule = blur, swaync-notification-window
|
||||||
|
layerrule = ignorezero, swaync-notification-window
|
||||||
|
|
||||||
|
layerrule = blur, swaync-control-center
|
||||||
|
layerrule = ignorezero, swaync-control-center
|
||||||
|
|
||||||
|
layerrule = blur, hyprswitch
|
||||||
|
layerrule = ignorezero, hyprswitch
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,9 @@
|
||||||
"title",
|
"title",
|
||||||
"mpris",
|
"mpris",
|
||||||
"dnd",
|
"dnd",
|
||||||
"notifications"
|
"notifications",
|
||||||
|
"volume",
|
||||||
|
"buttons-grid"
|
||||||
],
|
],
|
||||||
"widget-config": {
|
"widget-config": {
|
||||||
"inhibitors": {
|
"inhibitors": {
|
||||||
|
|
@ -24,6 +26,27 @@
|
||||||
"mpris": {
|
"mpris": {
|
||||||
"image-size": 96,
|
"image-size": 96,
|
||||||
"image-radius": 12
|
"image-radius": 12
|
||||||
|
},
|
||||||
|
"buttons-grid": {
|
||||||
|
"actions": [
|
||||||
|
{
|
||||||
|
"label": "Logout",
|
||||||
|
"command": "loginctl terminate-user $USER"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Shutdown",
|
||||||
|
"command": "systemctl poweroff"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Reboot",
|
||||||
|
"command": "systemctl reboot"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"volume": {
|
||||||
|
"label": "Volume",
|
||||||
|
"show-per-app": true,
|
||||||
|
"show-per-app-icon": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,36 @@
|
||||||
@import "../../library/entry.scss";
|
@import "../../library/entry.scss";
|
||||||
|
|
||||||
* {
|
$background: rgba(30, 30, 30, 0.8);
|
||||||
color: $foreground;
|
$foreground: #ffffff;
|
||||||
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
#window {
|
#window {
|
||||||
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
box#main {
|
box#main {
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
box-shadow: $box-shadow;
|
border: 1px solid $color2;
|
||||||
border: none;
|
border-radius: $border-radius;
|
||||||
|
color: $foreground;
|
||||||
|
box-shadow: $box-shadow-inner-less;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
entry {
|
||||||
list {
|
padding: $input-padding;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
color: $foreground
|
||||||
}
|
}
|
||||||
|
|
||||||
list#main {
|
list#main {
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
padding: 0.5rem;
|
//padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
list#plugin {
|
list#plugin {
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
label#match-desc {
|
label#match-desc {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "../../theming/library/entry.scss";
|
@import "../../library/entry.scss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #{$background};
|
--bg-color: #{$background};
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
@import "../../theming/library/entry.scss";
|
@import "../../library/entry.scss";
|
||||||
|
|
||||||
* {
|
* {
|
||||||
color: $foreground;
|
color: $foreground;
|
||||||
}
|
}
|
||||||
|
|
||||||
window {
|
window {
|
||||||
background-color: $background-semitransparent;
|
background-color: $background;
|
||||||
color: $foreground
|
color: $foreground
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,10 @@
|
||||||
|
|
||||||
.control-center {
|
.control-center {
|
||||||
/* The Control Center which contains the old notifications + widgets */
|
/* The Control Center which contains the old notifications + widgets */
|
||||||
background: $background-semitransparent;
|
background: $background;
|
||||||
color: $foreground;
|
color: $foreground;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
border-left: 1px solid $foreground;
|
border-left: 1px solid $color5;
|
||||||
box-shadow: $box-shadow-inner;
|
box-shadow: $box-shadow-inner;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ $notify-bg-hover: $background;
|
||||||
$notify-bg-darker: color.adjust($background, $lightness: -2%);
|
$notify-bg-darker: color.adjust($background, $lightness: -2%);
|
||||||
$notify-bg-focus: color.adjust($background, $lightness: 4%);
|
$notify-bg-focus: color.adjust($background, $lightness: 4%);
|
||||||
|
|
||||||
$close-bg: rgba($foreground, 0.4);
|
$close-bg: rgba($foreground, 0.6);
|
||||||
$close-bg-hover: transparent;
|
$close-bg-hover: transparent;
|
||||||
|
|
||||||
.notification-row {
|
.notification-row {
|
||||||
|
|
@ -51,7 +51,6 @@ $close-bg-hover: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: background 0.15s ease-in-out;
|
transition: background 0.15s ease-in-out;
|
||||||
background: $notify-bg;
|
background: $notify-bg;
|
||||||
box-shadow: $box-shadow;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-row .notification-background .notification.low {
|
.notification-row .notification-background .notification.low {
|
||||||
|
|
@ -83,7 +82,7 @@ $close-bg-hover: transparent;
|
||||||
|
|
||||||
.notification-row .notification-background .notification .notification-default-action {
|
.notification-row .notification-background .notification .notification-default-action {
|
||||||
/* The large action that also displays the notification summary and body */
|
/* The large action that also displays the notification summary and body */
|
||||||
border-radius: 12px;
|
border-radius: $border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-row .notification-background .notification .notification-default-action:not(:only-child) {
|
.notification-row .notification-background .notification .notification-default-action:not(:only-child) {
|
||||||
|
|
@ -94,8 +93,8 @@ $close-bg-hover: transparent;
|
||||||
|
|
||||||
.notification-row .notification-background .notification .notification-default-action .notification-content {
|
.notification-row .notification-background .notification .notification-default-action .notification-content {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-radius: 12px;
|
border-radius: $border-radius;
|
||||||
padding: 4px;
|
padding: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-row .notification-background .notification .notification-default-action .notification-content .image {
|
.notification-row .notification-background .notification .notification-default-action .notification-content .image {
|
||||||
|
|
@ -103,7 +102,7 @@ $close-bg-hover: transparent;
|
||||||
-gtk-icon-effect: none;
|
-gtk-icon-effect: none;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
/* Size in px */
|
/* Size in px */
|
||||||
margin: 4px;
|
margin: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-row .notification-background .notification .notification-default-action .notification-content .app-icon {
|
.notification-row .notification-background .notification .notification-default-action .notification-content .app-icon {
|
||||||
|
|
@ -150,7 +149,7 @@ $close-bg-hover: transparent;
|
||||||
/* The "extra" optional bottom notification image */
|
/* The "extra" optional bottom notification image */
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 12px;
|
border-radius: $border-radius;
|
||||||
-gtk-icon-effect: none;
|
-gtk-icon-effect: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -164,20 +163,20 @@ $close-bg-hover: transparent;
|
||||||
color: $foreground;
|
color: $foreground;
|
||||||
caret-color: $foreground;
|
caret-color: $foreground;
|
||||||
border: 1px solid $notify-border-color;
|
border: 1px solid $notify-border-color;
|
||||||
border-radius: 12px;
|
border-radius: $border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button {
|
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
background: $notify-bg;
|
background: $notify-bg;
|
||||||
border: 1px solid $notify-border-color;
|
border: 1px solid $notify-border-color;
|
||||||
border-radius: 12px;
|
border-radius: $border-radius;
|
||||||
color: $foreground;
|
color: $foreground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled {
|
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled {
|
||||||
background: initial;
|
background: initial;
|
||||||
color: $foreground-disabled;
|
color: $foreground;
|
||||||
border: 1px solid $notify-border-color;
|
border: 1px solid $notify-border-color;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@use "sass:color";
|
@use "sass:color";
|
||||||
@import "../../theming/library/entry.scss";
|
@import "../../library/entry.scss";
|
||||||
|
|
||||||
@import "./notification.scss";
|
|
||||||
@import "./controlpanel.scss";
|
@import "./controlpanel.scss";
|
||||||
|
@import "./notification.scss";
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
$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;
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "../../theming/library/entry.scss";
|
@import "../../library/entry.scss";
|
||||||
|
|
||||||
$red: $color1;
|
$red: $color1;
|
||||||
$green: $color2;
|
$green: $color2;
|
||||||
|
|
@ -20,7 +20,7 @@ $dim: rgba($background, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
window {
|
window {
|
||||||
background: $background-semitransparent;
|
background: $background;
|
||||||
color: $foreground;
|
color: $foreground;
|
||||||
transition-property: background-color;
|
transition-property: background-color;
|
||||||
transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
@import "../../../.cache/wal/colors.scss";
|
@import "../../../.cache/wal/colors.scss";
|
||||||
|
|
||||||
$background-semitransparent: rgba($background, 0.95);
|
$background: rgba(30, 30, 30, 0.5);
|
||||||
$foreground-disabled: rgba($foreground, 0.75);
|
$foreground: #ffffff;
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,9 @@
|
||||||
$border-radius: 0.3rem;
|
$border-radius: 15px;
|
||||||
|
$border-color: $foreground;
|
||||||
|
|
||||||
$box-shadow: rgba($color10, 0.25) 0px 50px 100px -20px, rgba($foreground, 0.3) 0px 30px 60px -30px, rgba($color11, 0.35) 0px -2px 6px 0px inset;
|
$input-padding: 8px 15px;
|
||||||
$box-shadow-inner: rgba($foreground, 0.17) 0px -23px 25px 0px inset, rgba($foreground, 0.15) 0px -36px 30px 0px inset, rgba($foreground, 0.1) 0px -79px 40px 0px inset, rgba($foreground, 0.06) 0px 2px 1px, rgba($foreground, 0.09) 0px 4px 2px, rgba($foreground, 0.09) 0px 8px 4px, rgba($foreground, 0.09) 0px 16px 8px, rgba($foreground, 0.09) 0px 32px 16px;
|
|
||||||
$box-shadow-outer: rgba($foreground, 0.35) 0px 5px 15px;
|
$box-shadow: rgba($color11, 0.35) 0px -2px 6px 0px inset;
|
||||||
|
$box-shadow-inner: rgba($border-color, 0.17) 0px -23px 25px 0px inset, rgba($border-color, 0.15) 0px -36px 30px 0px inset, rgba($border-color, 0.1) 0px -79px 40px 0px inset;
|
||||||
|
$box-shadow-inner-less: rgba($border-color, 0.06) 0px -23px 25px 0px inset, rgba($border-color, 0.03) 0px -36px 30px 0px inset, rgba($border-color, 0.01) 0px -79px 40px 0px inset;
|
||||||
|
$box-shadow-outer: rgba($border-color, 0.35) 0px 5px 15px;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue