Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-23 09:06:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Beautify notifications slightly

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-02 14:42:28 +08:00
parent a09f1ea1a3
commit 44f179a69f
1 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/pages/notifications.css
View file

@ -20,41 +20,56 @@
opacity: 0.75; opacity: 0.75;
color: var(--text-insignificant-color); color: var(--text-insignificant-color);
} }
.notification-type.notification-mention {
color: var(--reply-to-color);
}
.notification-type.notification-favourite { .notification-type.notification-favourite {
color: var(--favourite-color); color: var(--favourite-color);
} }
.notification-type.notification-reblog { .notification-type.notification-reblog {
color: var(--reblog-color); color: var(--reblog-color);
} }
.notification-type.notification-poll, .notification-type.notification-poll {
.notification-type.notification-mention {
color: var(--link-color); color: var(--link-color);
} }
.notification .status-link { .notification .status-link {
border-radius: 8px 8px 0 0; border-radius: 8px;
border: 1px solid var(--outline-color); border: 1px solid var(--outline-color);
max-height: 160px;
overflow: hidden;
filter: saturate(0.25);
}
.notification .status-link:not(.status-type-mention) > .status {
max-height: 160px; max-height: 160px;
overflow: hidden; overflow: hidden;
/* fade out mask gradient bottom */ /* fade out mask gradient bottom */
mask-image: linear-gradient( mask-image: linear-gradient(
rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 130px,
rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.5) 145px,
transparent transparent 159px
); );
filter: saturate(0.25);
} }
.notification .status-link.status-type-mention { .notification .status-link.status-type-mention {
max-height: 320px; max-height: 320px;
filter: none; filter: none;
background-color: var(--bg-color); background-color: var(--bg-color);
margin-top: calc(-16px - 1px); margin-top: calc(-16px - 1px);
border-color: var(--reply-to-color);
box-shadow: 0 0 0 3px var(--reply-to-faded-color);
} }
.notification .status-link:is(:hover, :focus) { .notification .status-link:is(:hover, :focus) {
background-color: var(--bg-blur-color); background-color: var(--bg-blur-color);
filter: saturate(1); filter: saturate(1);
border-color: var(--outline-hover-color); border-color: var(--outline-hover-color);
} }
.notification .status-link.status-type-mention:is(:hover, :focus) {
border-color: var(--reply-to-color);
box-shadow: 0 0 5px var(--reply-to-color);
}
.notification .status-link:active {
filter: brightness(0.95);
}
.notification .status-link > * { .notification .status-link > * {
pointer-events: none; pointer-events: none;
} }