Update 1
This commit is contained in:
@@ -0,0 +1,291 @@
|
||||
@define-color text @fg;
|
||||
@define-color background-alt @bg1
|
||||
@define-color background @bg0;
|
||||
@define-color selected @green;
|
||||
@define-color hover alpha(@green, .4);
|
||||
@define-color urgent @red;
|
||||
|
||||
* {
|
||||
color: @text;
|
||||
|
||||
all: unset;
|
||||
font-size: 14px;
|
||||
font-family: "Rubik", "JetBrains Mono Nerd Font Propo";
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
/* Avoid 'annoying' backgroud */
|
||||
.blank-window {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* CONTROL CENTER ------------------------------------------------------------------------ */
|
||||
|
||||
.control-center {
|
||||
background: alpha(@background, 0.55);
|
||||
border-radius: 24px;
|
||||
border: 1px solid @selected;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
|
||||
margin: 18px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* Notifications */
|
||||
.control-center .notification-row .notification-background,
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification.critical {
|
||||
background-color: @background-alt;
|
||||
border-radius: 16px;
|
||||
margin: 4px 0px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification.critical {
|
||||
color: @urgent;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content {
|
||||
margin: 6px;
|
||||
padding: 8px 6px 2px 2px;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> * {
|
||||
min-height: 3.4em;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action {
|
||||
background: alpha(@selected, 0.6);
|
||||
color: @text;
|
||||
border-radius: 12px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action:hover {
|
||||
background: @selected;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action:active {
|
||||
background-color: @selected;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.control-center .notification-row .notification-background .close-button {
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
color: @text;
|
||||
margin: 0px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.control-center .notification-row .notification-background .close-button:hover {
|
||||
background-color: @selected;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.close-button:active {
|
||||
background-color: @selected;
|
||||
}
|
||||
|
||||
progressbar,
|
||||
progress,
|
||||
trough {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
progressbar {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Notifications expanded-group */
|
||||
|
||||
.notification-group {
|
||||
margin: 2px 8px 2px 8px;
|
||||
}
|
||||
.notification-group-headers {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
color: @text;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.notification-group-icon {
|
||||
color: @text;
|
||||
}
|
||||
|
||||
.notification-group-collapse-button,
|
||||
.notification-group-close-all-button {
|
||||
background: transparent;
|
||||
color: @text;
|
||||
margin: 4px;
|
||||
border-radius: 6px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.notification-group-collapse-button:hover,
|
||||
.notification-group-close-all-button:hover {
|
||||
background: @hover;
|
||||
}
|
||||
|
||||
/* WIDGETS --------------------------------------------------------------------------- */
|
||||
|
||||
/* Notification clear button */
|
||||
.widget-title {
|
||||
font-size: 1.2em;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.widget-title button {
|
||||
background: @background-alt;
|
||||
border-radius: 6px;
|
||||
padding: 4px 16px;
|
||||
}
|
||||
|
||||
.widget-title button:hover {
|
||||
background-color: @hover;
|
||||
}
|
||||
|
||||
.widget-title button:active {
|
||||
background-color: @selected;
|
||||
}
|
||||
|
||||
/* Do not disturb */
|
||||
.widget-dnd {
|
||||
margin: 6px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.widget-dnd > switch {
|
||||
background: @background-alt;
|
||||
font-size: initial;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.widget-dnd > switch:hover {
|
||||
background: @hover;
|
||||
}
|
||||
|
||||
.widget-dnd > switch:checked {
|
||||
background: @selected;
|
||||
}
|
||||
|
||||
.widget-dnd > switch:checked:hover {
|
||||
background: @hover;
|
||||
}
|
||||
|
||||
.widget-dnd > switch slider {
|
||||
background: @text;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Buttons menu */
|
||||
.widget-buttons-grid {
|
||||
font-size: x-large;
|
||||
padding: 6px 2px;
|
||||
margin: 6px;
|
||||
border-radius: 12px;
|
||||
background: @background-alt;
|
||||
}
|
||||
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button {
|
||||
margin: 4px 10px;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.widget-buttons-grid > flowbox > flowboxchild > button:hover {
|
||||
background: @hover;
|
||||
}
|
||||
|
||||
/* Music player */
|
||||
.widget-mpris {
|
||||
background: @background-alt;
|
||||
border-radius: 16px;
|
||||
color: @text;
|
||||
margin: 20px 6px;
|
||||
}
|
||||
|
||||
/* NOTE: Background need *opacity 1* otherwise will turn into the album art blurred */
|
||||
.widget-mpris-player {
|
||||
background-color: @background;
|
||||
border-radius: 22px;
|
||||
padding: 6px 14px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.widget-mpris > box > button {
|
||||
color: @text;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.widget-mpris button {
|
||||
color: alpha(@text, 0.6);
|
||||
}
|
||||
|
||||
.widget-mpris button:hover {
|
||||
color: @text;
|
||||
}
|
||||
|
||||
.widget-mpris-album-art {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.widget-mpris-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.widget-mpris-subtitle {
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
picture.mpris-background {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Volume */
|
||||
.widget-volume {
|
||||
background: @background;
|
||||
color: @background;
|
||||
padding: 4px;
|
||||
margin: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
Reference in New Issue
Block a user