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

Add a little more pizzazz to file icons

Browse Source
This commit is contained in:
Jason Zimdars
2025-05-28 10:26:32 -05:00
parent d767e158bb
commit 5e2c1c3501
1 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/rich-text-content.css
+34 -8
View File
@@ -123,23 +123,41 @@
aspect-ratio: 4/5;
background-color: var(--color-canvas);
block-size: calc(2.5lh + 0.5ch);
border: 2px solid var(--color-ink-lighter);
border: 2px solid var(--color-ink-medium);
border-radius: 0.3em;
color: var(--color-ink);
color: var(--color-ink-dark);
display: inline-grid;
font-size: var(--text-small);
font-weight: 800;
inline-size: auto;
overflow: clip;
padding-block-start: 15%;
place-content: center;
position: relative;
text-transform: uppercase;
&::before {
background-color: var(--color-ink-medium);
block-size: 20%;
content: "";
display: block;
inline-size: 100%;
inset: 0 0 auto;
position: absolute;
}
.attachment--psd &,
.attachment--ai &,
.attachment--eps &,
.attachment--indd &,
.attachment--svg & {
color: oklch(var(--lch-red-medium));
color: oklch(var(--lch-red-dark));
background-color: oklch(var(--lch-red-lightest));
border-color: oklch(var(--lch-red-light));
border-color: oklch(var(--lch-red-medium));
&::before {
background-color: oklch(var(--lch-red-medium));
}
}
.attachment--css &
@@ -149,9 +167,13 @@
.attachment--erb &,
.attachment--ts &,
.attachment--js & {
color: oklch(var(--lch-purple-medium));
color: oklch(var(--lch-purple-dark));
background-color: oklch(var(--lch-purple-lightest));
border-color: oklch(var(--lch-purple-light));
border-color: oklch(var(--lch-purple-medium));
&::before {
background-color: oklch(var(--lch-purple-medium));
}
}
.attachment--txt &,
@@ -163,9 +185,13 @@
.attachment--xlsx &,
.attachment--ppt &,
.attachment--pptx & {
color: oklch(var(--lch-blue-medium));
color: oklch(var(--lch-blue-dark));
background-color: oklch(var(--lch-blue-lightest));
border-color: oklch(var(--lch-blue-light));
border-color: oklch(var(--lch-blue-medium));
&::before {
background-color: oklch(var(--lch-blue-medium));
}
}
}