mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-25 02:35:39 +03: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;
color: var(--text-insignificant-color);
}
.notification-type.notification-mention {
color: var(--reply-to-color);
}
.notification-type.notification-favourite {
color: var(--favourite-color);
}
.notification-type.notification-reblog {
color: var(--reblog-color);
}
.notification-type.notification-poll,
.notification-type.notification-mention {
.notification-type.notification-poll {
color: var(--link-color);
}
.notification .status-link {
border-radius: 8px 8px 0 0;
border-radius: 8px;
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;
overflow: hidden;
/* fade out mask gradient bottom */
mask-image: linear-gradient(
rgba(0, 0, 0, 1),
rgba(0, 0, 0, 1) 50%,
transparent
rgba(0, 0, 0, 1) 130px,
rgba(0, 0, 0, 0.5) 145px,
transparent 159px
);
filter: saturate(0.25);
}
.notification .status-link.status-type-mention {
max-height: 320px;
filter: none;
background-color: var(--bg-color);
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) {
background-color: var(--bg-blur-color);
filter: saturate(1);
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 > * {
pointer-events: none;
}