mirror of
https://github.com/tulir/gomuks.git
synced 2025-04-19 18:13:41 -05:00
b7cc6aff86
* Prevents rendering an empty url-previews div * Sets overflow-x to "auto" instead of "scroll" Signed-off-by: Sumner Evans <me@sumnerevans.com>
65 lines
1.3 KiB
CSS
65 lines
1.3 KiB
CSS
div.url-previews {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
overflow-x: auto;
|
|
|
|
> div.url-preview {
|
|
margin: 0.5rem 0;
|
|
border-radius: 0.5rem;
|
|
background-color: var(--url-preview-background-color);
|
|
border: 1px solid var(--url-preview-background-color);
|
|
display: grid;
|
|
flex-shrink: 0;
|
|
|
|
grid-template:
|
|
"title" auto
|
|
"description" auto
|
|
"media" auto
|
|
/ 1fr;
|
|
|
|
div.title {
|
|
grid-area: title;
|
|
margin: 0.5rem 0.5rem 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.description {
|
|
grid-area: description;
|
|
margin: 0 0.5rem 0.5rem;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
color: var(--semisecondary-text-color);
|
|
}
|
|
|
|
> div.media-container {
|
|
grid-area: media;
|
|
border-radius: 0 0 .5rem .5rem;
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
&.inline {
|
|
grid-template:
|
|
"media title" auto
|
|
"media description" auto
|
|
/ auto auto;
|
|
width: 100%;
|
|
max-width: 20rem;
|
|
|
|
> div.inline-media-wrapper {
|
|
grid-area: media;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--background-color);
|
|
border-radius: .5rem 0 0 .5rem;
|
|
padding: .5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|