files
This commit is contained in:
330
config/swaync/style.css
Normal file
330
config/swaync/style.css
Normal file
@@ -0,0 +1,330 @@
|
||||
/* === Catppuccin Mocha Hardcoded === */
|
||||
|
||||
* {
|
||||
all: unset;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #cdd6f4; /* Text */
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
.blank-window {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ===================== FLOATING NOTIFICATIONS ===================== */
|
||||
|
||||
.notification-row {
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.floating-notifications.background .notification-row .notification-background {
|
||||
background: rgba(30, 30, 46, 0.7); /* base alpha */
|
||||
border: 2px solid rgba(180, 190, 254, 0.2); /* lavender alpha */
|
||||
border-radius: 6px;
|
||||
margin: 16px;
|
||||
padding: 0;
|
||||
transition: background 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification.critical {
|
||||
border: 2px solid #f38ba8; /* red */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification.critical
|
||||
.summary {
|
||||
color: #f38ba8; /* red */
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
.notification-content {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action {
|
||||
border-radius: 8px;
|
||||
background-color: rgba(30, 30, 46, 0.7); /* base alpha */
|
||||
margin: 6px;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action:hover {
|
||||
background-color: rgba(137, 180, 250, 0.5); /* blue hover */
|
||||
border: 1px solid #89b4fa; /* blue */
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action:active {
|
||||
background-color: #89b4fa; /* blue */
|
||||
color: #1e1e2e; /* base */
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.close-button {
|
||||
margin: 6px;
|
||||
padding: 2px;
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.floating-notifications.background
|
||||
.notification-row
|
||||
.notification-background
|
||||
.close-button:hover {
|
||||
background-color: #89b4fa; /* blue */
|
||||
}
|
||||
|
||||
/* ===================== CONTROL CENTER ===================== */
|
||||
|
||||
.control-center {
|
||||
background: rgba(30, 30, 46, 0.8); /* base alpha */
|
||||
border-radius: 6px;
|
||||
border: 2px solid rgba(69, 71, 90, 0.3); /* surface1 alpha */
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* ------------------- Notifications ---------------------- */
|
||||
|
||||
.control-center .notification-row .notification-background {
|
||||
background-color: #313244;
|
||||
border: 2px solid rgba(137, 180, 250, 0.5);
|
||||
border-radius: 6px;
|
||||
margin: 4px 20px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.control-center
|
||||
.notification-row
|
||||
.notification-background
|
||||
.notification
|
||||
> *:last-child
|
||||
> *
|
||||
.notification-action {
|
||||
background: rgba(137, 180, 250, 0.6); /* blue alpha */
|
||||
color: #cdd6f4; /* text */
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.notification-content:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ------------ Notifications expanded-group -------------- */
|
||||
|
||||
.notification-group-headers {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
color: #b4befe; /* lavender */
|
||||
letter-spacing: 2px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.notification-group-icon {
|
||||
color: #b4befe; /* lavender */
|
||||
}
|
||||
|
||||
/* ===================== SHARED ELEMENTS ===================== */
|
||||
|
||||
.summary {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #b4befe; /* lavender */
|
||||
padding-bottom: 3px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.body {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #cdd6f4;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
trough {
|
||||
background-color: rgba(0, 60, 255, 0.1); /* text alpha */
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
progress {
|
||||
background-color: #89b4fa; /* blue */
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: x-small;
|
||||
}
|
||||
.message {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
/* ===================== WIDGETS ===================== */
|
||||
|
||||
.widget-title {
|
||||
font-weight: bold;
|
||||
|
||||
color: #b4befe; /* lavender */
|
||||
margin: 6px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.widget-title > label {
|
||||
color: #b4befe;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.widget-title > button > label {
|
||||
background: #313244;
|
||||
color: #b4befe;
|
||||
border-radius: 6px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.widget-title > button:hover > label {
|
||||
background: #b4befe;
|
||||
color: #1e1e2e;
|
||||
}
|
||||
|
||||
/* Do not disturb */
|
||||
.widget-dnd {
|
||||
margin: 6px 6px 20px;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
color: #b4befe;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.widget-dnd > switch {
|
||||
background: #b4befe6c;
|
||||
border-radius: 6px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.widget-dnd > switch:checked {
|
||||
background: #b4befe;
|
||||
}
|
||||
|
||||
.widget-dnd > switch slider {
|
||||
background: #cdd6f4; /* text */
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.widget-dnd > switch:checked slider {
|
||||
background: #313244;
|
||||
}
|
||||
|
||||
switch slider {
|
||||
min-width: 15px;
|
||||
min-height: 15px;
|
||||
}
|
||||
|
||||
/* -------------------- Music player ---------------------- */
|
||||
|
||||
:root {
|
||||
--mpris-album-art-overlay: rgba(0, 0, 0, 0.55);
|
||||
--mpris-button-hover: rgba(180, 190, 254, 0.5);
|
||||
--mpris-album-art-icon-size: 96px;
|
||||
--mpris-album-art-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.widget-mpris {
|
||||
color: #cdd6f4;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.widget-mpris button {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.widget-mpris button:hover {
|
||||
background: rgba(180, 190, 254, 0.5);
|
||||
color: #1e1e2e; /* base */
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.widget-mpris > box > button {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.widget-mpris .widget-mpris-player {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--mpris-album-art-shadow);
|
||||
}
|
||||
|
||||
.widget-mpris .widget-mpris-player .mpris-background {
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
.widget-mpris .widget-mpris-player .mpris-overlay {
|
||||
padding: 16px;
|
||||
background-color: var(--mpris-album-art-overlay);
|
||||
}
|
||||
|
||||
.widget-mpris .widget-mpris-player .mpris-overlay button:hover {
|
||||
background: var(--hover-button);
|
||||
}
|
||||
|
||||
.widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-album-art {
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--mpris-album-art-shadow);
|
||||
-gtk-icon-size: var(--mpris-album-art-icon-size);
|
||||
}
|
||||
|
||||
.widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.widget-mpris .widget-mpris-player .mpris-overlay > box > button:hover {
|
||||
background-color: var(--mpris-button-hover);
|
||||
}
|
||||
Reference in New Issue
Block a user