sankalp/Modus
1
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

💅 style(notification): improve notification widget appearance with ellipsization and padding

Browse Source
This commit is contained in:
sankalp committed 2025-08-01 01:19:24 +05:45
1 parent 8c9b9fc5b5
commit 29369053e6
2 files changed
+41 -35
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

modules/notification.py
+5 -2
View File
@@ -119,7 +119,8 @@ class NotificationWidget(Box):
children=[
Label(
markup=self._notification.summary, # type: ignore
ellipsization="middle",
ellipsization="end",
max_chars_width=20,
style_classes="summary",
)
],
@@ -128,9 +129,11 @@ class NotificationWidget(Box):
),
Label(
label=self._notification.body, # type: ignore
line_wrap="word-char",
# line_wrap="word-char",
v_align="start",
h_align="start",
ellipsization="end",
max_chars_width=34,
style_classes="body",
),
],
styles/notification.css
+36 -33
View File
@@ -1,60 +1,63 @@
#notification {
padding: 0.8rem;
background-color: alpha(#000, 0.3);
border: .5px solid alpha(#111, 0.4);
box-shadow: inset 0 0 200px 0 alpha(#111, 0.5), inset 0 0 0 .5px alpha(#aaa, 0.4);
border-radius: 1.2rem;
padding: 16px;
background-color: alpha(#000, 0.3);
border: 0.5px solid alpha(#111, 0.4);
box-shadow:
inset 0 0 200px 0 alpha(#111, 0.5),
inset 0 0 0 0.5px alpha(#aaa, 0.4);
border-radius: 20px;
margin: 4px;
}
#notification .summary {
font-size: 20px;
font-weight: bold;
font-size: 20px;
font-weight: bold;
}
#notification .body {
color: #ddd;
margin-top: 0.5rem;
font-weight: normal;
color: #ddd;
margin-top: 0.5rem;
font-weight: normal;
}
#noti-image {
border-radius: 7px;
border-radius: 7px;
}
#env-noti-center {
border-radius: 1.25rem;
border-radius: 1.25rem;
}
#notification-action{
background-color: #e0e0e0;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-weight: 500;
font-size: 0.9rem;
transition: background-color 0.2s ease, color 0.2s ease;
#notification-action {
background-color: #e0e0e0;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-weight: 500;
font-size: 0.9rem;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
#notification-action label {
color: #000000;
color: #000000;
}
#notification-action:hover label {
color: #ffffff;
color: #ffffff;
}
#noti-image image{
border-radius: 25px;
#noti-image image {
border-radius: 25px;
}
#notification-action:hover {
background-color: #007aff; /* macOS-style blue */
color: #ffffff;
background-color: #007aff; /* macOS-style blue */
color: #ffffff;
}
#notification-center {
background-color: alpha(#000, 0.3);
box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
border: 1px solid alpha(#111, 0.4);
border-radius: 1.25rem;
padding: 1rem;
background-color: alpha(#000, 0.3);
box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
border: 1px solid alpha(#111, 0.4);
border-radius: 1.25rem;
padding: 1rem;
}