Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-15 16:59:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Change how content warnings and filters are displayed in web UI

Browse Source 
Partially apply 500f4925a5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2024-08-22 19:12:35 +02:00
committed by Claire
parent 5aebdc9bcb
commit 7d97e3d82f
5 changed files with 190 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
app/javascript/flavours/glitch/styles/components.scss
View File

@@ -620,7 +620,7 @@ body > [data-popper-placement] {
.spoiler-input__input {
padding: 12px 12px - 5px;
background: mix($ui-base-color, $ui-highlight-color, 85%);
background: rgba($ui-highlight-color, 0.05);
color: $highlight-text-color;
}
@@ -1447,6 +1447,14 @@ body > [data-popper-placement] {
}
}
.content-warning {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.media-gallery,
.video-player,
.audio-player,
@@ -1771,6 +1779,14 @@ body > [data-popper-placement] {
.media-gallery__item-thumbnail {
cursor: default;
}
.content-warning {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
}
}
.status__prepend {
@@ -11185,39 +11201,53 @@ noscript {
}
&__embedded-status {
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
&__account {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 8px;
color: $dark-text-color;
font-size: 15px;
line-height: 22px;
bdi {
color: inherit;
color: $darker-text-color;
}
}
.account__avatar {
opacity: 0.5;
}
&__content {
display: -webkit-box;
font-size: 15px;
line-height: 22px;
color: $dark-text-color;
color: $darker-text-color;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
max-height: 4 * 22px;
overflow: hidden;
p {
display: none;
&:first-child {
display: initial;
}
}
p,
a {
color: inherit;
}
}
.reply-indicator__attachments {
font-size: 15px;
line-height: 22px;
color: $dark-text-color;
}
}
}
@@ -11492,3 +11522,53 @@ noscript {
}
}
}
.content-warning {
background: rgba($ui-highlight-color, 0.05);
color: $secondary-text-color;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: rgba($ui-highlight-color, 0.15);
padding: 8px (5px + 8px);
position: relative;
font-size: 15px;
line-height: 22px;
p {
margin-bottom: 8px;
}
.link-button {
font-size: inherit;
line-height: inherit;
font-weight: 500;
}
&::before,
&::after {
content: '';
display: block;
position: absolute;
height: 100%;
background: url('~images/warning-stripes.svg') repeat-y;
width: 5px;
top: 0;
}
&::before {
border-start-start-radius: 4px;
border-end-start-radius: 4px;
inset-inline-start: 0;
}
&::after {
border-start-end-radius: 4px;
border-end-end-radius: 4px;
inset-inline-end: 0;
}
&--filter::before,
&--filter::after {
background-image: url('~images/filter-stripes.svg');
}
}