phanpy/src/pages/notifications.css

155 lines
3.4 KiB
CSS
Raw Normal View History

2022-12-10 12:14:48 +03:00
.notification {
display: flex;
padding: 16px !important;
gap: 12px;
animation: appear 0.2s ease-out;
2022-12-10 12:14:48 +03:00
}
.notification.notification-mention {
margin-top: 16px;
}
.only-mentions .notification:not(.mention),
.only-mentions .timeline-empty {
display: none;
}
2022-12-10 12:14:48 +03:00
.notification.skeleton {
color: var(--outline-color);
}
.notification-type {
width: 24px;
flex-shrink: 0;
opacity: 0.75;
color: var(--text-insignificant-color);
2023-03-03 06:38:10 +03:00
line-height: 0;
2022-12-10 12:14:48 +03:00
}
2023-01-02 09:42:28 +03:00
.notification-type.notification-mention {
color: var(--reply-to-color);
}
.notification-type.notification-favourite {
2022-12-10 12:14:48 +03:00
color: var(--favourite-color);
}
.notification-type.notification-reblog {
2022-12-10 12:14:48 +03:00
color: var(--reblog-color);
}
2023-01-02 09:42:28 +03:00
.notification-type.notification-poll {
2022-12-10 12:14:48 +03:00
color: var(--link-color);
}
2023-03-03 06:38:10 +03:00
.notification .reblog-icon {
color: var(--reblog-color);
}
.notification .favourite-icon {
color: var(--favourite-color);
}
.notification .account-avatar-stack {
position: relative;
text-align: center;
}
.notification .account-avatar-stack .account-sub-icons {
display: block;
width: fit-content;
margin: -0.25em auto 0;
line-height: 1;
background-color: var(--bg-blur-color);
/* background-image: linear-gradient(
to bottom,
var(--bg-color),
var(--bg-blur-color)
); */
backdrop-filter: blur(16px) saturate(3);
padding: 2px 4px;
border-radius: 999px;
overflow: hidden;
border: var(--hairline-width) solid var(--bg-color);
box-shadow: 0 1px var(--drop-shadow-color);
}
.notification .avatars-stack .account-avatar-stack .account-sub-icons .icon {
transition: transform 0.2s ease-out;
}
.notification
.avatars-stack:hover
.account-avatar-stack
.account-sub-icons
.icon {
transform: rotate(-15deg);
}
.notification
.avatars-stack:hover
.account-avatar-stack
.account-sub-icons
.icon
+ .icon {
transform: rotate(15deg);
}
2022-12-10 12:14:48 +03:00
.notification .status-link {
2023-01-02 09:42:28 +03:00
border-radius: 8px;
2022-12-21 03:48:11 +03:00
border: 1px solid var(--outline-color);
2023-01-02 09:42:28 +03:00
max-height: 160px;
overflow: hidden;
filter: saturate(0.25);
}
.notification .status-link:not(.status-type-mention) > .status {
2022-12-10 12:14:48 +03:00
max-height: 160px;
overflow: hidden;
/* fade out mask gradient bottom */
mask-image: linear-gradient(
2023-01-02 09:42:28 +03:00
rgba(0, 0, 0, 1) 130px,
rgba(0, 0, 0, 0.5) 145px,
transparent 159px
);
2022-12-10 12:14:48 +03:00
}
2022-12-21 03:48:11 +03:00
.notification .status-link.status-type-mention {
max-height: 320px;
filter: none;
background-color: var(--bg-color);
margin-top: calc(-16px - 1px);
2023-01-02 09:42:28 +03:00
border-color: var(--reply-to-color);
box-shadow: 0 0 0 3px var(--reply-to-faded-color);
2022-12-21 03:48:11 +03:00
}
2022-12-29 11:11:58 +03:00
.notification .status-link:is(:hover, :focus) {
2022-12-10 12:14:48 +03:00
background-color: var(--bg-blur-color);
filter: saturate(1);
2022-12-21 03:48:11 +03:00
border-color: var(--outline-hover-color);
2022-12-10 12:14:48 +03:00
}
2023-01-02 09:42:28 +03:00
.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);
}
2022-12-10 12:14:48 +03:00
.notification .status-link > * {
pointer-events: none;
}
.notification-content {
flex-grow: 1;
min-width: 0;
2022-12-10 12:14:48 +03:00
}
.notification-content p:first-child {
margin-top: 0;
margin-bottom: 8px;
}
#mentions-option {
float: right;
margin-top: 0.5em;
}
#mentions-option label {
color: var(--text-insignificant-color);
display: inline-block;
padding: 1em 16px;
position: relative;
cursor: pointer;
z-index: 1;
font-size: 90%;
background-color: var(--bg-blur-color);
border-radius: 2em;
}
#mentions-option label:has(:checked) {
color: var(--text-color);
background-color: var(--bg-color);
}