LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish notifications menu

Browse Source
This commit is contained in:
Jas Singh
2024-06-25 01:05:31 -07:00
parent ee461f2ee0
commit c1d7fc4f95
15 changed files with 545 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
modules/bar/notifications/index.js
View File

@@ -1,9 +1,6 @@
const notifs = await Service.import("notifications"); const notifs = await Service.import("notifications");
export const Notifications = () => { export const Notifications = () => {
notifs.connect("changed", () => {
console.log(JSON.stringify(notifs, null, 2));
});
return { return {
component: Widget.Box({ component: Widget.Box({
hpack: "start", hpack: "start",

2
modules/bar/window_title/index.js
View File

@@ -9,9 +9,9 @@ const filterTitle = (windowtitle) => {
["org.kde.dolphin", " Dolphin"], ["org.kde.dolphin", " Dolphin"],
["plex", "󰚺 Plex"], ["plex", "󰚺 Plex"],
["steam", " Steam"], ["steam", " Steam"],
["", "󰇄 Desktop"],
["spotify", "󰓇 Spotify"], ["spotify", "󰓇 Spotify"],
["obsidian", "󱓧 Obsidian"], ["obsidian", "󱓧 Obsidian"],
["^$", "󰇄 Desktop"],
["(.+)", `󰣆 ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`], ["(.+)", `󰣆 ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
]; ];

218
modules/menus/PopupWindow.js
View File

@@ -1,132 +1,152 @@
export const Padding = (name) => Widget.EventBox({ export const Padding = (name, opts = {}) =>
Widget.EventBox({
class_name: opts?.className || "",
hexpand: true, hexpand: true,
vexpand: true, vexpand: typeof opts?.vexpand === "boolean" ? opts.vexpand : true,
can_focus: false, can_focus: false,
child: Widget.Box(), child: Widget.Box(),
setup: w => w.on("button-press-event", () => App.toggleWindow(name)), setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
}) });
const PopupRevealer = ( const PopupRevealer = (name, child, transition = "slide_down") =>
name, Widget.Box(
child,
transition = "slide_down",
) => Widget.Box(
{ css: "padding: 1px;" }, { css: "padding: 1px;" },
Widget.Revealer({ Widget.Revealer({
transition, transition,
child: Widget.Box({ child: Widget.Box({
class_name: `window-content ${name}`, class_name: `window-content ${name}-window`,
child, child,
}), }),
transitionDuration: 200, transitionDuration: 200,
setup: self => self.hook(App, (_, wname, visible) => { setup: (self) =>
if (wname === name) self.hook(App, (_, wname, visible) => {
self.reveal_child = visible if (wname === name) self.reveal_child = visible;
}), }),
}), }),
) );
const Layout = (name, child, transition) => ({ const Layout = (name, child, transition) => ({
"center": () => Widget.CenterBox({}, center: () =>
Widget.CenterBox(
{},
Padding(name),
Widget.CenterBox(
{ vertical: true },
Padding(name), Padding(name),
Widget.CenterBox( PopupRevealer(name, child, transition),
{ vertical: true },
Padding(name),
PopupRevealer(name, child, transition),
Padding(name),
),
Padding(name), Padding(name),
),
Padding(name),
), ),
"top": () => Widget.CenterBox({}, top: () =>
Padding(name), Widget.CenterBox(
Widget.Box( {},
{ vertical: true }, Padding(name),
PopupRevealer(name, child, transition), Widget.Box(
Padding(name), { vertical: true },
), PopupRevealer(name, child, transition),
Padding(name), Padding(name),
),
Padding(name),
), ),
"top-right": () => Widget.Box({}, "top-right": () =>
Widget.Box(
{},
Padding(name),
Widget.Box(
{
hexpand: false,
vertical: true,
},
Padding(name, {
vexpand: false,
className: "top-right-event-box_top",
}),
PopupRevealer(name, child, transition),
Padding(name), Padding(name),
Widget.Box( ),
{
hexpand: false,
vertical: true,
},
PopupRevealer(name, child, transition),
Padding(name),
),
), ),
"top-center": () => Widget.Box({}, "top-center": () =>
Padding(name), Widget.Box(
Widget.Box( {},
{ Padding(name),
hexpand: false, Widget.Box(
vertical: true, {
}, hexpand: false,
PopupRevealer(name, child, transition), vertical: true,
Padding(name), },
), PopupRevealer(name, child, transition),
Padding(name), Padding(name),
),
Padding(name),
), ),
"top-left": () => Widget.Box({}, "top-left": () =>
Widget.Box( Widget.Box(
{ {},
hexpand: false, Widget.Box(
vertical: true, {
}, hexpand: false,
PopupRevealer(name, child, transition), vertical: true,
Padding(name), },
), PopupRevealer(name, child, transition),
Padding(name), Padding(name),
),
Padding(name),
), ),
"bottom-left": () => Widget.Box({}, "bottom-left": () =>
Widget.Box( Widget.Box(
{ {},
hexpand: false, Widget.Box(
vertical: true, {
}, hexpand: false,
Padding(name), vertical: true,
PopupRevealer(name, child, transition), },
),
Padding(name), Padding(name),
PopupRevealer(name, child, transition),
),
Padding(name),
), ),
"bottom-center": () => Widget.Box({}, "bottom-center": () =>
Padding(name), Widget.Box(
Widget.Box( {},
{ Padding(name),
hexpand: false, Widget.Box(
vertical: true, {
}, hexpand: false,
Padding(name), vertical: true,
PopupRevealer(name, child, transition), },
),
Padding(name), Padding(name),
PopupRevealer(name, child, transition),
),
Padding(name),
), ),
"bottom-right": () => Widget.Box({}, "bottom-right": () =>
Widget.Box(
{},
Padding(name),
Widget.Box(
{
hexpand: false,
vertical: true,
},
Padding(name), Padding(name),
Widget.Box( PopupRevealer(name, child, transition),
{ ),
hexpand: false,
vertical: true,
},
Padding(name),
PopupRevealer(name, child, transition),
),
), ),
}) });
export default ({ export default ({
name, name,
child, child,
layout = "center", layout = "center",
transition, transition,
exclusivity = "ignore", exclusivity = "ignore",
...props ...props
}) => Widget.Window({ }) =>
Widget.Window({
name, name,
class_names: [name, "popup-window"], class_names: [name, "popup-window"],
setup: w => w.keybind("Escape", () => App.closeWindow(name)), setup: (w) => w.keybind("Escape", () => App.closeWindow(name)),
visible: false, visible: false,
keymode: "on-demand", keymode: "on-demand",
exclusivity, exclusivity,
@@ -134,4 +154,4 @@ export default ({
anchor: ["top", "bottom", "right", "left"], anchor: ["top", "bottom", "right", "left"],
child: Layout(name, child, transition)[layout](), child: Layout(name, child, transition)[layout](),
...props, ...props,
}) });

2
modules/menus/bluetooth/index.js
View File

@@ -131,8 +131,6 @@ export default () => {
}); });
}; };
console.log(JSON.stringify(btDevices, null, 2));
return btDevices.length === 0 ? noDevices() : deviceList(); return btDevices.length === 0 ? noDevices() : deviceList();
}; };

1
modules/menus/network/index.js
View File

@@ -40,7 +40,6 @@ export default () => {
vertical: true, vertical: true,
setup: (self) => { setup: (self) => {
self.hook(network, () => { self.hook(network, () => {
// console.log(JSON.stringify(network, null, 2));
self.hook(pendingAuth, () => { self.hook(pendingAuth, () => {
let sortedNetworks = []; let sortedNetworks = [];

413
modules/menus/notifications/index.js
View File

@@ -19,192 +19,267 @@ export default () => {
class_name: "notification-card-container menu", class_name: "notification-card-container menu",
spacing: 0, spacing: 0,
vertical: true, vertical: true,
hexpand: true, hexpand: false,
vexpand: false, vexpand: false,
child: Widget.Box({ children: [
vexpand: false, Widget.Box({
spacing: 0, class_name: "notification-menu-controls",
vertical: true, vertical: false,
setup: (self) => { children: [
self.hook(notifs, () => { Widget.Box({
const imageContainer = (notif) => { class_name: "menu-label-container notifications",
if (notif.image !== undefined) { hpack: "start",
return [ vpack: "center",
Widget.Box({ expand: true,
class_name: "notification-card-image-container menu", children: [
hpack: "center", Widget.Label({
vpack: "center", class_name: "menu-label notifications",
vexpand: false, label: "Notifications",
child: Widget.Box({
hpack: "center",
vexpand: false,
class_name: "notification-card-image menu",
css: `background-image: url("${notif.image}")`,
}),
}),
];
}
return [];
};
const actionsContainer = (notif) => {
if (notif.actions !== undefined && notif.actions.length > 0) {
return [
Widget.Box({
class_name: "notification-card-actions menu",
hexpand: true,
vpack: "end",
children: notif.actions.map((action) => {
return Widget.Button({
hexpand: true,
class_name: "notification-action-buttons menu",
on_primary_click: () => {
notif.invoke(action.id);
},
child: Widget.Box({
hpack: "center",
hexpand: true,
children: [
Widget.Label({
class_name:
"notification-action-buttons-label menu",
hexpand: true,
label: action.label,
}),
],
}),
});
}),
}),
];
}
return [];
};
const NotificationIcon = ({
app_entry,
app_icon,
app_name,
}) => {
let icon = icons.fallback.notification;
if (
Utils.lookUpIcon(app_name) ||
Utils.lookUpIcon(app_name.toLowerCase() || "")
)
icon = Utils.lookUpIcon(app_name)
? app_name
: Utils.lookUpIcon(app_name.toLowerCase())
? app_name.toLowerCase()
: "";
if (Utils.lookUpIcon(app_icon) && icon === "")
icon = app_icon;
if (Utils.lookUpIcon(app_entry || "") && icon === "")
icon = app_entry || "";
return Widget.Box({
css: `
min-width: 2rem;
min-height: 2rem;
`,
child: Widget.Icon({
class_name: "notification-icon menu",
icon,
}), }),
}); ],
}; }),
Widget.Box({
hpack: "end",
vpack: "center",
expand: false,
children: [
Widget.Switch({
class_name: "menu-switch notifications",
active: notifs.bind("dnd").as((dnd) => !dnd),
on_activate: ({ active }) => {
notifs.dnd = !active;
},
}),
],
}),
],
}),
Widget.Separator({
class_name: "menu-separator notifications",
}),
Widget.Box({
hpack: "end",
children: notifs.bind("notifications").as((n) => {
if (n.length > 0) {
return [
Widget.Button({
class_name: "clear-notifications-button",
on_primary_click: () => notifs.clear(),
child: Widget.Label({
class_name: "clear-notifications-label",
label: "clear",
}),
}),
];
}
return [];
}),
}),
Widget.Box({
class_name: "menu-content-container notifications",
hpack: "center",
expand: false,
spacing: 0,
vertical: true,
setup: (self) => {
self.hook(notifs, () => {
const imageContainer = (notif) => {
if (notif.image !== undefined) {
return [
Widget.Box({
class_name: "notification-card-image-container menu",
hpack: "center",
vpack: "center",
vexpand: false,
child: Widget.Box({
hpack: "center",
vexpand: false,
class_name: "notification-card-image menu",
css: `background-image: url("${notif.image}")`,
}),
}),
];
}
const sortedNotifications = notifs.notifications.sort( return [];
(a, b) => b.time - a.time, };
);
return (self.children = sortedNotifications.map((notif) => { const actionsContainer = (notif) => {
return Widget.Box({ if (
class_name: "notification-card menu", notif.actions !== undefined &&
vpack: "start", notif.actions.length > 0
hexpand: true, ) {
children: [ return [
...imageContainer(notif), Widget.Box({
Widget.Box({ class_name: "notification-card-actions menu",
vpack: "start", hexpand: true,
vertical: true, vpack: "end",
hexpand: true, children: notif.actions.map((action) => {
class_name: `notification-card-content ${notif.image === undefined ? "noimg" : " menu"}`, return Widget.Button({
children: [ hexpand: true,
Widget.Box({ class_name: "notification-action-buttons menu",
vertical: false, on_primary_click: () => {
hexpand: true, notif.invoke(action.id);
children: [ },
Widget.Box({ child: Widget.Box({
class_name: "notification-card-header menu", hpack: "center",
hexpand: true, hexpand: true,
vpack: "start",
children: [ children: [
Widget.Label({ Widget.Label({
class_name: class_name:
"notification-card-header-label menu", "notification-action-buttons-label menu",
hpack: "start",
hexpand: true, hexpand: true,
vexpand: true, label: action.label,
max_width_chars:
notif.image === undefined ? 27 : 20,
truncate: "end",
wrap: true,
label: notif["summary"],
}), }),
], ],
}), }),
Widget.Box({ });
class_name: "notification-card-header menu",
hexpand: true,
hpack: "end",
children: [NotificationIcon(notif)],
}),
],
}), }),
Widget.Box({ }),
vpack: "start", ];
hexpand: true, }
class_name: "notification-card-body menu",
children: [ return [];
Widget.Label({ };
hexpand: true,
use_markup: true, const NotificationIcon = ({
xalign: 0, app_entry,
justification: "left", app_icon,
truncate: "end", app_name,
lines: 2, }) => {
max_width_chars: let icon = icons.fallback.notification;
notif.image === undefined ? 35 : 28,
wrap: true, if (
class_name: "notification-card-body-label menu", Utils.lookUpIcon(app_name) ||
label: notif["body"], Utils.lookUpIcon(app_name.toLowerCase() || "")
}), )
], icon = Utils.lookUpIcon(app_name)
}), ? app_name
...actionsContainer(notif), : Utils.lookUpIcon(app_name.toLowerCase())
], ? app_name.toLowerCase()
: "";
if (Utils.lookUpIcon(app_icon) && icon === "")
icon = app_icon;
if (Utils.lookUpIcon(app_entry || "") && icon === "")
icon = app_entry || "";
return Widget.Box({
css: `
min-width: 2rem;
min-height: 2rem;
`,
child: Widget.Icon({
class_name: "notification-icon menu",
icon,
}), }),
Widget.Button({ });
class_name: "close-notification-button menu", };
on_primary_click: () => {
notifs.CloseNotification(notif.id); const sortedNotifications = notifs.notifications.sort(
}, (a, b) => b.time - a.time,
);
if (notifs.notifications.length <= 0) {
return (self.children = [
Widget.Box({
vpack: "center",
hpack: "center",
expand: true,
child: Widget.Label({ child: Widget.Label({
label: "󰅜", class_name: "placehold-label dim",
hpack: "center", label: "You're all caught up :)",
}), }),
}), }),
], ]);
}); }
}));
}); return (self.children = sortedNotifications.map((notif) => {
}, return Widget.Box({
}), class_name: "notification-card menu",
vpack: "center",
hexpand: false,
children: [
...imageContainer(notif),
Widget.Box({
vpack: "center",
vertical: true,
hexpand: true,
class_name: `notification-card-content ${notif.image === undefined ? "noimg" : " menu"}`,
children: [
Widget.Box({
vertical: false,
hexpand: true,
children: [
Widget.Box({
class_name: "notification-card-header menu",
hexpand: true,
vpack: "start",
children: [
Widget.Label({
class_name:
"notification-card-header-label menu",
hpack: "start",
hexpand: true,
vexpand: true,
max_width_chars:
notif.image === undefined ? 27 : 20,
truncate: "end",
wrap: true,
label: notif["summary"],
}),
],
}),
Widget.Box({
class_name: "notification-card-header menu",
hexpand: true,
hpack: "end",
children: [NotificationIcon(notif)],
}),
],
}),
Widget.Box({
vpack: "start",
hexpand: true,
class_name: "notification-card-body menu",
children: [
Widget.Label({
hexpand: true,
use_markup: true,
xalign: 0,
justification: "left",
truncate: "end",
lines: 2,
max_width_chars:
notif.image === undefined ? 35 : 28,
wrap: true,
class_name:
"notification-card-body-label menu",
label: notif["body"],
}),
],
}),
...actionsContainer(notif),
],
}),
Widget.Button({
class_name: "close-notification-button menu",
on_primary_click: () => {
notifs.CloseNotification(notif.id);
},
child: Widget.Label({
label: "󰅜",
hpack: "center",
}),
}),
],
});
}));
});
},
}),
],
}), }),
], ],
}), }),

4
modules/notifications/index.js
View File

@@ -17,10 +17,6 @@ export default () => {
hexpand: true, hexpand: true,
setup: (self) => { setup: (self) => {
self.hook(notifs, () => { self.hook(notifs, () => {
if (notifs.dnd) {
return [];
}
const imageContainer = (notif) => { const imageContainer = (notif) => {
if (notif.image !== undefined) { if (notif.image !== undefined) {
return [ return [

10
scss/bar/workspace.scss
View File

@@ -3,8 +3,8 @@
.workspaces { .workspaces {
label { label {
font-size: 0.2em; font-size: 0.2em;
min-width: 5em; min-width: 4.5em;
min-height: 5em; min-height: 4.5em;
border-radius: 1.9rem * .6; border-radius: 1.9rem * .6;
margin: 0rem 0.5rem * .5; margin: 0rem 0.5rem * .5;
transition: 300ms * .5; transition: 300ms * .5;
@@ -14,15 +14,15 @@
&.occupied { &.occupied {
background-color: $yellow; background-color: $yellow;
color: $yellow; color: $yellow;
min-width: 5em; min-width: 4.5em;
min-height: 5em; min-height: 4.5em;
} }
&.active { &.active {
color: $sky; color: $sky;
background-color: $sky; background-color: $sky;
min-width: 11em; min-width: 11em;
min-height: 5em; min-height: 4.5em;
} }
} }
} }

2
scss/main.scss
View File

@@ -1,6 +1,6 @@
* { * {
all: unset; all: unset;
font-family: "Ubuntu"; font-family: "Ubuntu Nerd Font";
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
} }

10
scss/menus/menu.scss
View File

@@ -70,22 +70,12 @@
&:active { &:active {
background-color: $sky; background-color: $sky;
highlight,
progress {
}
} }
&:disabled { &:disabled {
highlight,
progress {
}
} }
trough:focus { trough:focus {
slider {
}
} }
} }

77
scss/menus/notifications.scss
View File

@@ -1,36 +1,67 @@
@import "../colors"; @import "../colors";
.notification-card-container.menu { .notification-card-container.menu {
min-width: 28em; margin-top: 0em;
min-height: 15em; min-width: 26em;
background: $base; min-height: 6em;
border: 0.2em solid $surface0; background: $mantle;
border-radius: 0.4em; border: 0.2em solid $surface0; border-radius: 0.4em;
}
.notification-card-container-scroll.menu {
// background-color: $pink;
} }
.window-content.notificationsmenu { .window-content.notificationsmenu-window {
margin-top: -0.4em; margin-right: 0.50em;
margin-right: 0.6em; }
.menu-content-container.notifications {
margin: 1em;
min-height: 4em;
}
.notification-menu-controls {
margin: 0em 1em;
} }
.notification-card.menu { .notification-card.menu {
border: 0em; background: $crust;
border-bottom: 0.25em solid $surface0; border: 0.1em solid $surface0;
border-radius: 0em; margin: 0em;
margin: 0rem; }
&:first-child { .menu-label-container.notifications {
border-top: 0rem; margin: 0em 0em;
} }
&:last-child { .menu-label.notifications {
border-bottom: 0rem; color: $lavender;
} margin: 0.9em 0.5em;
margin-bottom: 0.7em;
}
&:not(:first-child) { .menu-separator.notifications {
margin: 0rem; background-color: $surface0;
margin: 0em 1em;
}
.menu-switch.notifications:checked {
&:checked {
background: $lavender;
}
}
.clear-notifications-button {
margin-right: 1em;
margin-top: 0.4em;
&:hover label {
color: $maroon;
} }
} }
.clear-notifications-label {
color: $lavender;
font-size: 0.9em;
}
.top-right-event-box_top *{
min-height: 0em;
margin-top: 2.5em;
}

4
scss/menus/power.scss
View File

@@ -19,14 +19,14 @@ window#verification .verification {
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
.title { .title {
font-size: 1.6em; font-size: 1.5em;
color: $maroon; color: $maroon;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.desc { .desc {
color: $lavender; color: $lavender;
font-size: 1.1em; font-size: 1em;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
padding: 1.15rem 2.25rem; padding: 1.15rem 2.25rem;
} }

63
scss/notifications/popups.scss
View File

@@ -6,14 +6,14 @@
.notification-card { .notification-card {
color: $text; color: $text;
background: $mantle; background: $mantle;
margin-right: 0.4rem; margin-right: 0.45em;
border: 0.15rem solid $surface0; border: 0.15em solid $surface0;
min-width: 28rem; min-width: 23.5em;
min-height: 6rem; min-height: 6rem;
border-radius: 0.4rem; border-radius: 0.3em;
&:not(:first-child) { &:not(:first-child) {
margin-top: 1rem; margin-top: 0.85em;
} }
} }
@@ -23,58 +23,53 @@
.notification-card-image-container { .notification-card-image-container {
margin: 0.75rem 0.75rem; margin: 0.65em 0.65em;
border-radius: 0.4rem; border-radius: 0.4em;
} }
.notification-card-image { .notification-card-image {
border-radius: 0.4rem; border-radius: 0.4em;
min-width: 3rem; min-width: 2.5em;
min-height: 3rem; min-height: 2.5em;
padding: 1rem 1rem; padding: 0.85em 0.85em;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.notification-card-content { .notification-card-content {
min-width: 3.5rem; min-width: 2.9em;
min-height: 3.5rem; min-height: 2.9em;
padding: 0.6rem 0.6rem; padding: 0.5em 0.5em;
margin-right: 1rem; margin-right: 1rem;
} }
.notification-card-content.noimg { .notification-card-content.noimg {
margin-left: 1.5rem; margin-left: 1.3em;
margin-top: .2rem; margin-top: .15em;
}
.notification-card-appname-label {
font-size: 0.9rem;
color: $pink;
} }
.notification-card-header-label { .notification-card-header-label {
font-size: 1.15rem; font-size: 0.95em;
margin-bottom: 0.5rem; margin-bottom: 0.5em;
color: $lavender; color: $lavender;
} }
.notification-card-body-label { .notification-card-body-label {
font-size: 1rem; font-size: 0.84em;
font-weight: 600; font-weight: 600;
} }
.notification-card-actions { .notification-card-actions {
margin-top: 1rem; margin-top: 0.95em;
margin-bottom: 0.5rem; margin-bottom: 0.4em;
} }
.notification-action-buttons { .notification-action-buttons {
color: $lavender; color: $lavender;
background: $surface0; background: $surface0;
min-width: 6rem; min-width: 4em;
min-height: 2rem; min-height: 1.65em;
border-radius: 0.2rem; border-radius: 0.2em;
&:not(:last-child) { &:not(:last-child) {
margin-right: 2rem; margin-right: 2rem;
@@ -86,18 +81,18 @@
} }
.notification-icon { .notification-icon {
margin-bottom: 0.6rem; margin-bottom: 0.4em;
font-size: 1.5rem; font-size: 1.3em;
} }
.close-notification-button { .close-notification-button {
background: $red; background: $red;
color: $crust; color: $crust;
min-width: 2.5rem; min-width: 2.1em;
border-radius: 0rem 0.35rem 0.35rem 0rem; border-radius: 0rem 0.35em 0.35em 0em;
label { label {
font-size: 1.7rem; font-size: 1.5em;
} }
&:hover { &:hover {

147
style.css
View File

@@ -1,6 +1,6 @@
* { * {
all: unset; all: unset;
font-family: "Ubuntu"; font-family: "Ubuntu Nerd Font";
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
} }
@@ -329,8 +329,8 @@ spinner:checked {
.workspaces label { .workspaces label {
font-size: 0.2em; font-size: 0.2em;
min-width: 5em; min-width: 4.5em;
min-height: 5em; min-height: 4.5em;
border-radius: 1.14rem; border-radius: 1.14rem;
margin: 0rem 0.25rem; margin: 0rem 0.25rem;
transition: 150ms; transition: 150ms;
@@ -340,14 +340,14 @@ spinner:checked {
.workspaces label.occupied { .workspaces label.occupied {
background-color: #f9e2af; background-color: #f9e2af;
color: #f9e2af; color: #f9e2af;
min-width: 5em; min-width: 4.5em;
min-height: 5em; min-height: 4.5em;
} }
.workspaces label.active { .workspaces label.active {
color: #89dceb; color: #89dceb;
background-color: #89dceb; background-color: #89dceb;
min-width: 11em; min-width: 11em;
min-height: 5em; min-height: 4.5em;
} }
.workspaces label:not(:first-child) { .workspaces label:not(:first-child) {
@@ -612,13 +612,13 @@ window#verification .verification .text-box {
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
} }
window#verification .verification .text-box .title { window#verification .verification .text-box .title {
font-size: 1.6em; font-size: 1.5em;
color: #eba0ac; color: #eba0ac;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
window#verification .verification .text-box .desc { window#verification .verification .text-box .desc {
color: #b4befe; color: #b4befe;
font-size: 1.1em; font-size: 1em;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
padding: 1.15rem 2.25rem; padding: 1.15rem 2.25rem;
} }
@@ -1038,32 +1038,68 @@ image {
box-shadow: none; box-shadow: none;
} }
.notification-card-container.menu { .notification-card-container.menu {
min-width: 28em; margin-top: 0em;
min-height: 15em; min-width: 26em;
background: #1e1e2e; min-height: 6em;
background: #181825;
border: 0.2em solid #313244; border: 0.2em solid #313244;
border-radius: 0.4em; border-radius: 0.4em;
} }
.window-content.notificationsmenu { .window-content.notificationsmenu-window {
margin-top: -0.4em; margin-right: 0.5em;
margin-right: 0.6em; }
.menu-content-container.notifications {
margin: 1em;
min-height: 4em;
}
.notification-menu-controls {
margin: 0em 1em;
} }
.notification-card.menu { .notification-card.menu {
border: 0em; background: #11111b;
border-bottom: 0.25em solid #313244; border: 0.1em solid #313244;
border-radius: 0em; margin: 0em;
margin: 0rem;
} }
.notification-card.menu:first-child {
border-top: 0rem; .menu-label-container.notifications {
margin: 0em 0em;
} }
.notification-card.menu:last-child {
border-bottom: 0rem; .menu-label.notifications {
color: #b4befe;
margin: 0.9em 0.5em;
margin-bottom: 0.7em;
} }
.notification-card.menu:not(:first-child) {
margin: 0rem; .menu-separator.notifications {
background-color: #313244;
margin: 0em 1em;
}
.menu-switch.notifications:checked:checked {
background: #b4befe;
}
.clear-notifications-button {
margin-right: 1em;
margin-top: 0.4em;
}
.clear-notifications-button:hover label {
color: #eba0ac;
}
.clear-notifications-label {
color: #b4befe;
font-size: 0.9em;
}
.top-right-event-box_top * {
min-height: 0em;
margin-top: 2.5em;
} }
.notification-card-container { .notification-card-container {
@@ -1073,14 +1109,14 @@ image {
.notification-card { .notification-card {
color: #cdd6f4; color: #cdd6f4;
background: #181825; background: #181825;
margin-right: 0.4rem; margin-right: 0.45em;
border: 0.15rem solid #313244; border: 0.15em solid #313244;
min-width: 28rem; min-width: 23.5em;
min-height: 6rem; min-height: 6rem;
border-radius: 0.4rem; border-radius: 0.3em;
} }
.notification-card:not(:first-child) { .notification-card:not(:first-child) {
margin-top: 1rem; margin-top: 0.85em;
} }
.notification-card-container { .notification-card-container {
@@ -1088,59 +1124,54 @@ image {
} }
.notification-card-image-container { .notification-card-image-container {
margin: 0.75rem 0.75rem; margin: 0.65em 0.65em;
border-radius: 0.4rem; border-radius: 0.4em;
} }
.notification-card-image { .notification-card-image {
border-radius: 0.4rem; border-radius: 0.4em;
min-width: 3rem; min-width: 2.5em;
min-height: 3rem; min-height: 2.5em;
padding: 1rem 1rem; padding: 0.85em 0.85em;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.notification-card-content { .notification-card-content {
min-width: 3.5rem; min-width: 2.9em;
min-height: 3.5rem; min-height: 2.9em;
padding: 0.6rem 0.6rem; padding: 0.5em 0.5em;
margin-right: 1rem; margin-right: 1rem;
} }
.notification-card-content.noimg { .notification-card-content.noimg {
margin-left: 1.5rem; margin-left: 1.3em;
margin-top: 0.2rem; margin-top: 0.15em;
}
.notification-card-appname-label {
font-size: 0.9rem;
color: #f5c2e7;
} }
.notification-card-header-label { .notification-card-header-label {
font-size: 1.15rem; font-size: 0.95em;
margin-bottom: 0.5rem; margin-bottom: 0.5em;
color: #b4befe; color: #b4befe;
} }
.notification-card-body-label { .notification-card-body-label {
font-size: 1rem; font-size: 0.84em;
font-weight: 600; font-weight: 600;
} }
.notification-card-actions { .notification-card-actions {
margin-top: 1rem; margin-top: 0.95em;
margin-bottom: 0.5rem; margin-bottom: 0.4em;
} }
.notification-action-buttons { .notification-action-buttons {
color: #b4befe; color: #b4befe;
background: #313244; background: #313244;
min-width: 6rem; min-width: 4em;
min-height: 2rem; min-height: 1.65em;
border-radius: 0.2rem; border-radius: 0.2em;
} }
.notification-action-buttons:not(:last-child) { .notification-action-buttons:not(:last-child) {
margin-right: 2rem; margin-right: 2rem;
@@ -1150,18 +1181,18 @@ image {
} }
.notification-icon { .notification-icon {
margin-bottom: 0.6rem; margin-bottom: 0.4em;
font-size: 1.5rem; font-size: 1.3em;
} }
.close-notification-button { .close-notification-button {
background: #f38ba8; background: #f38ba8;
color: #11111b; color: #11111b;
min-width: 2.5rem; min-width: 2.1em;
border-radius: 0rem 0.35rem 0.35rem 0rem; border-radius: 0rem 0.35em 0.35em 0em;
} }
.close-notification-button label { .close-notification-button label {
font-size: 1.7rem; font-size: 1.5em;
} }
.close-notification-button:hover { .close-notification-button:hover {
background: #eba0ac; background: #eba0ac;

2
style.css.map
View File

File diff suppressed because one or more lines are too long