bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1025 from basecamp/fix-file-attachment-layout

Browse Source 
Correct file attachment layout and simplify icons
This commit is contained in:
Andy Smith
2025-09-04 14:55:17 -05:00
committed by GitHub
parent 3b715579bd d67596d362
commit b2aa75dcd5
1 changed files with 95 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/rich-text-content.css
+95 -135
View File
@@ -165,30 +165,11 @@
.attachment {
block-size: auto;
display: inline-block;
inline-size: 100%;
display: block;
inline-size: fit-content;
position: relative;
margin-inline: 0;
max-inline-size: 100%;
&:is(figure) {
inline-size: fit-content;
margin-inline: auto;
display: block;
img, video {
block-size: auto;
display: block;
margin-inline: auto;
max-inline-size: 100%;
user-select: none;
}
> a {
display: block;
}
}
:where(progress) {
inline-size: 100%;
margin: auto;
@@ -197,21 +178,14 @@
.attachment__caption {
color: var(--color-ink-dark);
display: flex;
font-size: var(--text-small);
flex-wrap: wrap;
line-height: 1.3;
column-gap: 0.5ch;
justify-content: center;
margin: var(--block-space-half) var(--inline-space);
text-align: center;
.input {
--input-border-radius: 0.3em;
--input-border-size: 0;
--input-padding: 0;
color: var(--color-ink-dark);
color: inherit;
inline-size: 100%;
max-inline-size: 100%;
text-align: center;
@@ -228,21 +202,61 @@
}
}
.attachment__icon {
aspect-ratio: 4/5;
background-color: color-mix(var(--attachment-icon-color), transparent 90%);
block-size: 2.5lh;
border: 2px solid var(--attachment-icon-color);
border-block-start-width: 1ch;
border-radius: 0.5ch;
box-sizing: border-box;
color: var(--attachment-icon-color);
display: grid;
font-size: var(--text-small);
font-weight: bold;
inline-size: auto;
place-content: center;
text-transform: uppercase;
}
.attachment--preview {
margin-inline: auto;
text-align: center;
img, video {
block-size: auto;
display: block;
margin-inline: auto;
max-inline-size: 100%;
user-select: none;
}
> a {
display: block;
}
.attachment__caption {
column-gap: 0.5ch;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-block-start: var(--block-space-half);
}
}
.attachment--file {
--attachment-icon-color: var(--lexxy-color-text-subtle);
align-items: center;
display: inline-flex;
display: flex;
flex-wrap: wrap;
gap: 1ch;
inline-size: auto;
.attachment__caption {
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
display: grid;
flex: 1;
text-align: start;
strong {
color: var(--color-ink);
}
}
.attachment__name {
@@ -251,95 +265,44 @@
}
}
.attachment__icon {
aspect-ratio: 4/5;
background-color: var(--color-canvas);
block-size: calc(2lh + (var(--block-space) - 2px));
border: 2px solid var(--color-ink-medium);
border-radius: 0.3em;
color: var(--color-ink-dark);
display: inline-grid;
font-size: var(--text-small);
font-weight: 800;
inline-size: auto;
overflow: clip;
padding-block-start: 0.4lh;
place-content: center;
position: relative;
text-transform: uppercase;
.attachment--psd,
.attachment--key,
.attachment--sketch,
.attachment--ai,
.attachment--eps,
.attachment--indd,
.attachment--svg,
.attachment--ppt,
.attachment--pptx {
--attachment-icon-color: oklch(var(--lch-red-medium));
}
&::before {
background-color: var(--color-ink-medium);
block-size: 0.5lh;
content: "";
display: block;
inset: 0 0 auto;
position: absolute;
}
.attachment--css,
.attachment--php,
.attachment--json,
.attachment--htm,
.attachment--html,
.attachment--rb,
.attachment--erb,
.attachment--ts,
.attachment--js {
--attachment-icon-color: oklch(var(--lch-purple-medium));
}
.attachment--psd &,
.attachment--key &,
.attachment--sketch &,
.attachment--ai &,
.attachment--eps &,
.attachment--indd &,
.attachment--svg &,
.attachment--ppt &,
.attachment--pptx & {
color: oklch(var(--lch-red-dark));
background-color: oklch(var(--lch-red-lightest));
border-color: oklch(var(--lch-red-medium));
.attachment--txt,
.attachment--pages,
.attachment--rtf,
.attachment--md,
.attachment--doc,
.attachment--docx {
--attachment-icon-color: oklch(var(--lch-blue-medium));
}
&::before {
background-color: oklch(var(--lch-red-medium));
}
}
.attachment--css &,
.attachment--php &,
.attachment--json &,
.attachment--htm &,
.attachment--html &,
.attachment--rb &,
.attachment--erb &,
.attachment--ts &,
.attachment--js & {
color: oklch(var(--lch-purple-dark));
background-color: oklch(var(--lch-purple-lightest));
border-color: oklch(var(--lch-purple-medium));
&::before {
background-color: oklch(var(--lch-purple-medium));
}
}
.attachment--txt &,
.attachment--pages &,
.attachment--rtf &,
.attachment--md &,
.attachment--doc &,
.attachment--docx & {
color: oklch(var(--lch-blue-dark));
background-color: oklch(var(--lch-blue-lightest));
border-color: oklch(var(--lch-blue-medium));
&::before {
background-color: oklch(var(--lch-blue-medium));
}
}
.attachment--csv &,
.attachment--numbers &,
.attachment--xls &,
.attachment--xlsx & {
color: oklch(var(--lch-green-dark));
background-color: oklch(var(--lch-green-lightest));
border-color: oklch(var(--lch-green-medium));
&::before {
background-color: oklch(var(--lch-green-medium));
}
}
.attachment--csv &,
.attachment--numbers &,
.attachment--xls &,
.attachment--xlsx & {
--attachment-icon-color: oklch(var(--lch-green-medium));
}
.attachment__link {
@@ -353,23 +316,20 @@
--attachment-image-size: 1em;
--attachment-text-color: currentColor;
display: inline;
padding: 0;
margin: 0;
white-space: normal;
align-items: center;
color: var(--attachment-text-color);
display: inline-flex;
gap: 0.25ch;
position: relative;
vertical-align: bottom;
background: var(--attachment-bg-color);
border-radius: 99rem;
box-shadow:
-0.25ch 0 0 var(--attachment-bg-color),
0.5ch 0 0 var(--attachment-bg-color);
border-radius: 99rem;
color: var(--attachment-text-color);
display: inline-flex;
gap: 0.25ch;
margin: 0;
padding: 0;
position: relative;
vertical-align: bottom;
white-space: normal;
lexxy-editor & {
cursor: pointer;