diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index 5d149ae..2e1954e 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -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; diff --git a/TangerineUI-lagoon.css b/TangerineUI-lagoon.css index 32d3592..fe7d1a3 100644 --- a/TangerineUI-lagoon.css +++ b/TangerineUI-lagoon.css @@ -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; diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index e6b4272..f308e67 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -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; diff --git a/TangerineUI.css b/TangerineUI.css index af133c0..2784b52 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -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;