79 lines
1.7 KiB
CSS
79 lines
1.7 KiB
CSS
 
|
/* The feed: post HTML as PrivaPub's Mastodon API sends it (already sanitized; Mastodon's link markup hides the
|
||
|
|
scheme in .invisible and shortens long links with .ellipsis), and the globe's point labels, which replace the
|
||
|
|
look of globe.gl's own tooltip box. */
|
||
|
|
@layer components {
|
||
|
|
.post-content p {
|
||
|
|
margin-block: 0 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content p:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content a {
|
||
|
|
color: var(--color-primary);
|
||
|
|
overflow-wrap: anywhere;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content a.mention,
|
||
|
|
.post-content a.hashtag {
|
||
|
|
text-decoration-line: none;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content .invisible {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content .ellipsis::after {
|
||
|
|
content: "…";
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content blockquote {
|
||
|
|
border-inline-start: 3px solid var(--neo-strong);
|
||
|
|
padding-inline-start: 0.75rem;
|
||
|
|
opacity: 0.85;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content pre,
|
||
|
|
.post-content code {
|
||
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
|
|
font-size: 0.85em;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content ul {
|
||
|
|
list-style: disc;
|
||
|
|
padding-inline-start: 1.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content ol {
|
||
|
|
list-style: decimal;
|
||
|
|
padding-inline-start: 1.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* daisyUI's tooltip is a pill; a block of nerd stats needs the corners of a box. */
|
||
|
|
.tooltip-content:has(> .nerd-stats) {
|
||
|
|
border-radius: var(--radius-box);
|
||
|
|
padding: 0.5rem 0.65rem;
|
||
|
|
max-width: min(22rem, 90vw);
|
||
|
|
}
|
||
|
|
|
||
|
|
.float-tooltip-kap {
|
||
|
|
padding: 0 !important;
|
||
|
|
background: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.globe-label {
|
||
|
|
font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
|
|
padding: 0.4rem 0.55rem;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
color: var(--color-base-content);
|
||
|
|
background: var(--color-base-100);
|
||
|
|
box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.globe-label span {
|
||
|
|
opacity: 0.65;
|
||
|
|
}
|
||
|
|
}
|