stacker.news/components/text.module.css

435 lines
7.4 KiB
CSS
Raw Normal View History

2021-04-14 23:56:29 +00:00
.text {
font-size: 94%;
2021-06-27 22:28:30 +00:00
font-family: inherit;
2021-10-29 17:56:31 +00:00
word-break: break-word;
line-height: 140%;
2023-12-04 22:07:10 +00:00
overflow-y: hidden;
position: relative;
max-height: 200vh;
2024-09-14 01:40:40 +00:00
--grid-gap: 0.5rem;
2023-12-04 22:07:10 +00:00
}
.text.topLevel {
--grid-gap: 0.75rem;
}
.text :global(.footnotes) {
font-size: smaller;
color: #8b949e;
border-top: 1px solid #30363d;
margin-top: calc(var(--grid-gap)* 0.5);
padding-top: 0 !important;
}
/* Hide the section label for visual users. */
.text :global(.sr-only) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
word-wrap: normal;
border: 0;
}
/* Place `[` and `]` around footnote references. */
.text :global([data-footnote-ref])::before {
content: '[';
}
.text :global([data-footnote-ref])::after {
content: ']';
}
.text :global(sup:has([data-footnote-ref])) {
top: 0;
font-size: 100%;
vertical-align: baseline;
}
.textUncontained {
max-height: none;
2023-12-04 22:07:10 +00:00
}
.textContained::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50vh;
pointer-events: none;
z-index: 1;
background: linear-gradient(rgba(255, 255, 255, 0), var(--bs-body-bg) 200%);
}
.textShowFull {
position: absolute;
bottom: 0;
left: 0;
border-radius: 0;
z-index: 2;
2021-06-27 22:28:30 +00:00
}
@media screen and (min-width: 767px) {
.text {
line-height: 130%;
}
2023-11-21 20:58:15 +00:00
.text img {
min-width: 30% !important;
}
}
2022-07-17 15:33:55 +00:00
.heading {
position: relative;
margin-left: -22px;
padding-left: 22px;
display: block;
2022-07-17 15:33:55 +00:00
}
.headingLink {
display: none;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 44px;
2022-07-17 15:33:55 +00:00
}
2022-10-04 17:43:18 +00:00
.headingLink.copied {
display: flex;
}
2022-07-17 15:33:55 +00:00
.headingLink svg {
align-self: center;
}
.heading:hover>.headingLink {
display: flex;
}
.text hr {
2024-09-14 01:40:40 +00:00
border-top: 3px solid var(--theme-quoteBar);
}
.text.topLevel {
--grid-gap: 0.75rem;
}
.text .p {
2023-12-04 22:07:10 +00:00
display: block;
2021-04-14 23:56:29 +00:00
white-space: pre-wrap;
word-break: break-word;
padding-top: calc(var(--grid-gap) * 0.5);
padding-bottom: calc(var(--grid-gap) * 0.5);
2024-09-14 01:40:40 +00:00
}
.text>*:not(.heading) {
padding-top: calc(var(--grid-gap) * 0.5);
padding-bottom: calc(var(--grid-gap) * 0.5);
2021-06-27 22:28:30 +00:00
}
2024-09-14 01:40:40 +00:00
.text pre, .text blockquote {
margin-top: calc(var(--grid-gap) * 0.5);
margin-bottom: calc(var(--grid-gap) * 0.5);
2021-06-27 22:28:30 +00:00
}
.text pre>div {
margin: 0 !important;
}
2024-09-16 16:54:22 +00:00
.text>*:last-child:not(.textShowFull) {
2024-09-14 01:40:40 +00:00
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
2024-09-14 01:40:40 +00:00
.text>*:first-child {
padding-top: 0 !important;
margin-top: 0 !important;
}
.text blockquote, .text.topLevel blockquote {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.text blockquote *:first-child, .text.topLevel blockquote *:first-child {
padding-top: 0;
2021-06-27 22:28:30 +00:00
}
2024-09-14 01:40:40 +00:00
.text blockquote *:last-child, .text.topLevel blockquote *:last-child {
padding-bottom: 0;
2023-01-05 19:24:09 +00:00
}
2024-09-11 16:10:21 +00:00
.mediaContainer {
display: block;
width: 100%;
max-width: 100%;
height: auto;
overflow: hidden;
2024-09-02 23:15:04 +00:00
max-height: 25vh;
aspect-ratio: var(--aspect-ratio);
margin: 0;
}
.mediaContainer.hasTextSiblingsBefore {
margin-top: var(--grid-gap);
}
.mediaContainer.hasTextSiblingsAfter {
margin-bottom: var(--grid-gap);
}
.p:has(> .mediaContainer) .mediaContainer
{
display: flex;
width: min-content;
max-width: 100%;
}
.p:has(> .mediaContainer) .mediaContainer img,
.p:has(> .mediaContainer) .mediaContainer video
{
2024-09-14 23:22:11 +00:00
block-size: revert-layer;
2024-09-15 00:25:25 +00:00
max-width: stretch;
2024-09-14 23:22:11 +00:00
}
.p.onlyImages {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--grid-gap);
}
.p.onlyImages:not(.somethingBefore) {
padding-top: 0;
}
.p.onlyImages:not(.somethingAfter) {
padding-bottom: 0;
}
.mediaContainer img, .mediaContainer video {
display: block;
2024-09-03 23:35:14 +00:00
object-fit: contain;
width: auto;
max-height: inherit;
height: 100%;
aspect-ratio: var(--aspect-ratio);
}
.mediaContainer img {
cursor: zoom-in;
min-width: 30%;
max-width: 100%;
2024-09-03 23:35:14 +00:00
object-position: left top;
}
2024-09-16 16:54:22 +00:00
.topLevel .mediaContainer, :global(.topLevel) .mediaContainer {
2024-09-02 23:15:04 +00:00
max-height: 35vh;
}
2021-06-27 22:28:30 +00:00
.text table {
width: auto;
}
.text blockquote {
2024-09-14 01:40:40 +00:00
border-left: 3px solid var(--theme-quoteBar);
2024-01-27 20:12:05 +00:00
padding-left: .75rem;
2023-01-05 19:24:09 +00:00
}
.text li {
margin-top: .25rem;
}
.text ul,
.text ol {
margin-top: 0;
2024-09-14 01:40:40 +00:00
margin-bottom: 0rem;
padding-left: 2rem;
}
.text ol ol,
.text ul ol {
list-style-type: lower-roman;
}
.text ul ul ol,
.text ul ol ol,
.text ol ul ol,
.text ol ol ol {
list-style-type: lower-alpha;
}
2024-09-14 01:40:40 +00:00
.text h1, .text h2, .text h3, .text h4, .text h5, .text h6 {
margin-top: 0.75rem;
margin-bottom: 0.5rem;
font-size: 1rem;
2024-09-14 01:40:40 +00:00
}
.text h1 a, .text h2 a, .text h3 a, .text h4 a, .text h5 a, .text h6 a {
text-decoration: none;
--bs-text-opacity: 1;
color: inherit !important;
}
.topLevel.text h1 {
font-size: 1.6rem;
}
.topLevel.text h2 {
font-size: 1.45rem;
}
.topLevel.text h3 {
font-size: 1.3rem;
}
.topLevel.text h4 {
font-size: 1.15rem;
}
/* Utility classes used in rehype plugins in md.js */
.subscript {
vertical-align: sub;
font-size: smaller;
}
.superscript {
vertical-align: super;
font-size: smaller;
}
.twitterContainer, .nostrContainer, .videoWrapper, .wavlakeWrapper, .spotifyWrapper {
margin-top: calc(var(--grid-gap) * 0.5);
margin-bottom: calc(var(--grid-gap) * 0.5);
2024-09-29 01:02:33 +00:00
background-color: var(--theme-bg);
2024-09-14 01:40:40 +00:00
}
.videoWrapper {
max-width: 320px;
}
2024-09-16 16:54:22 +00:00
.topLevel .videoWrapper, :global(.topLevel) .videoWrapper {
max-width: 640px;
2024-09-11 16:10:21 +00:00
margin: 0.75rem 0;
}
.videoContainer {
2023-10-22 18:28:18 +00:00
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
.videoContainer iframe {
2023-10-22 18:28:18 +00:00
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.twitterContainer, .nostrContainer {
position: relative;
overflow: hidden;
}
.twitterContainer iframe, .nostrContainer iframe {
border-radius: 13px;
}
.nostrContainer {
margin-right: 15px;
}
.videoWrapper:not(:first-child) {
margin-top: .75rem;
}
.twitterContained {
height: 150px;
overflow: hidden;
}
2024-09-16 16:54:22 +00:00
.topLevel .twitterContained, :global(.topLevel) .twitterContained {
height: 200px;
}
.twitterShowFull {
position: absolute;
bottom: 0;
left: 0;
border-radius: 0;
line-height: 1.2;
padding: .75rem 1rem;
}
.tweetsSkeleton {
display: flex;
flex-flow: row wrap;
max-width: 350px;
width: 100%;
padding-right: 12px;
}
2024-09-16 16:54:22 +00:00
.topLevel .tweetsSkeleton, :global(.topLevel) .tweetsSkeleton {
max-width: 550px;
}
.tweetSkeleton {
width: 100%;
}
.tweetSkeleton {
border: 0.05rem solid var(--theme-borderColor);
border-radius: 12px;
height: 150px;
padding: 1.5rem;
}
2024-09-16 16:54:22 +00:00
.topLevel .tweetSkeleton, :global(.topLevel) .tweetSkeleton {
height: 200px;
}
.tweetSkeleton .img {
height: 48px;
width: 48px;
border-radius: 50%;
}
.tweetSkeleton .content1,
.tweetSkeleton .content2 {
height: 50%;
margin-top: 1rem;
}
.tweetSkeleton .line {
height: 25%;
margin: 0.5rem 0;
width: 100%;
border-radius: .4rem;
}
.tweetSkeleton .line:last-child {
width: 75%;
}
.wavlakeWrapper {
width: 100%;
height: 380px;
max-width: 480px;
border-radius: 1.65rem;
overflow: hidden;
}
.spotifyWrapper {
width: 100%;
height: 152px;
max-width: 480px;
border-radius: 13px;
overflow: hidden;
2021-04-14 23:56:29 +00:00
}