chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adapted Content Warning styling to newest markup. (Fixes #104)

Browse source
This commit is contained in:
Niléane 2024-08-23 16:21:03 +02:00
parent 6c09165a6f
commit d23e24b350
No known key found for this signature in database
4 changed files with 156 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
TangerineUI-cherry.css
View file

@ -3024,27 +3024,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .status__content p:last-child {
margin-bottom: 0;
}
.app-body .status__content > p:first-child:has(.status__content__spoiler-link) {
margin-bottom: 1px;
}
.app-body .status__content > p:first-child:has(.status__content__spoiler-link) > span {
font-weight: bold;
}
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)) > p:first-child:has(.status__content__spoiler-link) + div {
display: none;
}
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
margin-top: 5px;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
background-color: transparent;
width: 100%;
margin: -22px 0 0;
padding: 27px 0 5px;
text-align: start;
.app-body .content-warning {
background: none;
color: var(--color-content-fg);
margin-inline-start: 0;
margin-top: 2px;
border: 0;
padding: 0 0 30px;
font-weight: 700;
font-size: 15px;
line-height: 19px;
position: relative;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
.app-body .detailed-status .content-warning {
font-size: 19px;
line-height: 24px;
}
.app-body .content-warning::before,
.app-body .content-warning::after {
display: none;
}
.app-body .content-warning .link-button {
background-color: transparent;
width: 100%;
text-align: start;
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: end;
text-decoration: none;
}
.app-body .content-warning .link-button span {
background-color: transparent;
background-image: var(--icon-eye-shut);
background-repeat: no-repeat;
@ -3070,23 +3081,26 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
position: relative;
z-index: 1;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span {
.app-body .content-warning .link-button:hover span {
border-color: rgba(68, 74, 90, .6);
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:active span {
@media (prefers-color-scheme: dark) {
.app-body .content-warning .link-button:hover span {
border-color: rgba(255, 255, 255, .3);
}
}
.app-body .content-warning .link-button:active span {
transform: scale(.95);
}
.app-body :is(.reply-indicator__content, .status__content):has(> .status__content__text--visible) .status__content__spoiler-link span {
.app-body .content-warning:has(+ .status__content > .status__content__text--visible) .link-button span {
background-image: var(--icon-eye-open);
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
color: var(--color-content-fg);
}
@media (prefers-color-scheme: dark) {
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span {
border-color: rgba(255, 255, 255, .3);
}
}
.app-body .icon-button.overlayed {
background-color: rgba(0, 0, 0, .1);
border-radius: 7px;

64
TangerineUI-lagoon.css
View file

@ -3024,27 +3024,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .status__content p:last-child {
margin-bottom: 0;
}
.app-body .status__content > p:first-child:has(.status__content__spoiler-link) {
margin-bottom: 1px;
}
.app-body .status__content > p:first-child:has(.status__content__spoiler-link) > span {
font-weight: bold;
}
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)) > p:first-child:has(.status__content__spoiler-link) + div {
display: none;
}
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
margin-top: 5px;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
background-color: transparent;
width: 100%;
margin: -22px 0 0;
padding: 27px 0 5px;
text-align: start;
.app-body .content-warning {
background: none;
color: var(--color-content-fg);
margin-inline-start: 0;
margin-top: 2px;
border: 0;
padding: 0 0 30px;
font-weight: 700;
font-size: 15px;
line-height: 19px;
position: relative;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
.app-body .detailed-status .content-warning {
font-size: 19px;
line-height: 24px;
}
.app-body .content-warning::before,
.app-body .content-warning::after {
display: none;
}
.app-body .content-warning .link-button {
background-color: transparent;
width: 100%;
text-align: start;
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: end;
text-decoration: none;
}
.app-body .content-warning .link-button span {
background-color: transparent;
background-image: var(--icon-eye-shut);
background-repeat: no-repeat;
@ -3070,23 +3081,26 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
position: relative;
z-index: 1;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span {
.app-body .content-warning .link-button:hover span {
border-color: rgba(68, 74, 90, .6);
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:active span {
@media (prefers-color-scheme: dark) {
.app-body .content-warning .link-button:hover span {
border-color: rgba(255, 255, 255, .3);
}
}
.app-body .content-warning .link-button:active span {
transform: scale(.95);
}
.app-body :is(.reply-indicator__content, .status__content):has(> .status__content__text--visible) .status__content__spoiler-link span {
.app-body .content-warning:has(+ .status__content > .status__content__text--visible) .link-button span {
background-image: var(--icon-eye-open);
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
color: var(--color-content-fg);
}
@media (prefers-color-scheme: dark) {
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span {
border-color: rgba(255, 255, 255, .3);
}
}
.app-body .icon-button.overlayed {
background-color: rgba(0, 0, 0, .1);
border-radius: 7px;

64
TangerineUI-purple.css
View file

@ -3024,27 +3024,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .status__content p:last-child {
margin-bottom: 0;
}
.app-body .status__content > p:first-child:has(.status__content__spoiler-link) {
margin-bottom: 1px;
}
.app-body .status__content > p:first-child:has(.status__content__spoiler-link) > span {
font-weight: bold;
}
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)) > p:first-child:has(.status__content__spoiler-link) + div {
display: none;
}
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
margin-top: 5px;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
background-color: transparent;
width: 100%;
margin: -22px 0 0;
padding: 27px 0 5px;
text-align: start;
.app-body .content-warning {
background: none;
color: var(--color-content-fg);
margin-inline-start: 0;
margin-top: 2px;
border: 0;
padding: 0 0 30px;
font-weight: 700;
font-size: 15px;
line-height: 19px;
position: relative;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
.app-body .detailed-status .content-warning {
font-size: 19px;
line-height: 24px;
}
.app-body .content-warning::before,
.app-body .content-warning::after {
display: none;
}
.app-body .content-warning .link-button {
background-color: transparent;
width: 100%;
text-align: start;
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: end;
text-decoration: none;
}
.app-body .content-warning .link-button span {
background-color: transparent;
background-image: var(--icon-eye-shut);
background-repeat: no-repeat;
@ -3070,23 +3081,26 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
position: relative;
z-index: 1;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span {
.app-body .content-warning .link-button:hover span {
border-color: rgba(68, 74, 90, .6);
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:active span {
@media (prefers-color-scheme: dark) {
.app-body .content-warning .link-button:hover span {
border-color: rgba(255, 255, 255, .3);
}
}
.app-body .content-warning .link-button:active span {
transform: scale(.95);
}
.app-body :is(.reply-indicator__content, .status__content):has(> .status__content__text--visible) .status__content__spoiler-link span {
.app-body .content-warning:has(+ .status__content > .status__content__text--visible) .link-button span {
background-image: var(--icon-eye-open);
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
color: var(--color-content-fg);
}
@media (prefers-color-scheme: dark) {
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span {
border-color: rgba(255, 255, 255, .3);
}
}
.app-body .icon-button.overlayed {
background-color: rgba(0, 0, 0, .1);
border-radius: 7px;

64
TangerineUI.css
View file

@ -3024,27 +3024,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .status__content p:last-child {
margin-bottom: 0;
}
.app-body .status__content > p:first-child:has(.status__content__spoiler-link) {
margin-bottom: 1px;
}
.app-body .status__content > p:first-child:has(.status__content__spoiler-link) > span {
font-weight: bold;
}
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)) > p:first-child:has(.status__content__spoiler-link) + div {
display: none;
}
.app-body :is(.reply-indicator__content, .status__content):not(:has(> .status__content__text--visible)):has(> p:first-child .status__content__spoiler-link) + .media-gallery {
margin-top: 5px;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link {
background-color: transparent;
width: 100%;
margin: -22px 0 0;
padding: 27px 0 5px;
text-align: start;
.app-body .content-warning {
background: none;
color: var(--color-content-fg);
margin-inline-start: 0;
margin-top: 2px;
border: 0;
padding: 0 0 30px;
font-weight: 700;
font-size: 15px;
line-height: 19px;
position: relative;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
.app-body .detailed-status .content-warning {
font-size: 19px;
line-height: 24px;
}
.app-body .content-warning::before,
.app-body .content-warning::after {
display: none;
}
.app-body .content-warning .link-button {
background-color: transparent;
width: 100%;
text-align: start;
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: end;
text-decoration: none;
}
.app-body .content-warning .link-button span {
background-color: transparent;
background-image: var(--icon-eye-shut);
background-repeat: no-repeat;
@ -3070,23 +3081,26 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
position: relative;
z-index: 1;
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span {
.app-body .content-warning .link-button:hover span {
border-color: rgba(68, 74, 90, .6);
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:active span {
@media (prefers-color-scheme: dark) {
.app-body .content-warning .link-button:hover span {
border-color: rgba(255, 255, 255, .3);
}
}
.app-body .content-warning .link-button:active span {
transform: scale(.95);
}
.app-body :is(.reply-indicator__content, .status__content):has(> .status__content__text--visible) .status__content__spoiler-link span {
.app-body .content-warning:has(+ .status__content > .status__content__text--visible) .link-button span {
background-image: var(--icon-eye-open);
}
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link span {
color: var(--color-content-fg);
}
@media (prefers-color-scheme: dark) {
.app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span {
border-color: rgba(255, 255, 255, .3);
}
}
.app-body .icon-button.overlayed {
background-color: rgba(0, 0, 0, .1);
border-radius: 7px;