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

Card shadow tweaks

Browse Source
This commit is contained in:
Andy Smith
2025-05-30 13:11:36 -05:00
parent abcbb3277e
commit 68906321e8
4 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+5 -7
View File
@@ -23,12 +23,10 @@
--border: 1px solid var(--color-ink-lighter);
/* Shadows */
--shadow: 0 0 0 1px oklch(var(--lch-black) / 0.02),
0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.2),
0 .4em 2.4em -1em oklch(var(--lch-black) / 0.3),
0 .4em .8em -1.2em oklch(var(--lch-black) / 0.4),
0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.5),
0 1.2em 1.6em -2em oklch(var(--lch-black) / 0.6);
--shadow: 0 0 0 1px oklch(var(--lch-black) / 5%),
0 0.2em 0.2em oklch(var(--lch-black) / 5%),
0 0.4em 0.4em oklch(var(--lch-black) / 5%),
0 0.8em 0.8em oklch(var(--lch-black) / 5%);
/* Components */
--btn-size: 2.65em;
@@ -186,7 +184,7 @@
--color-code-token__punctuation: oklch(var(--lch-ink-dark));
--color-code-token__selector: oklch(var(--lch-green-dark));
--color-code-token__variable: oklch(var(--lch-red-dark));
@media (prefers-color-scheme: dark) {
--lch-canvas: 20% 0.0195 232.58;
app/assets/stylesheets/card-columns.css
+16 -1
View File
@@ -101,7 +101,6 @@
--text-small: 1.1em;
background-color: var(--color-canvas);
box-shadow: 0 0 0 1px var(--color-ink-lighter);
line-height: 1.2;
.avatar {
@@ -122,6 +121,22 @@
display: none;
}
.card__collection {
background-color: var(--color-canvas);
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
padding: 0 0 0 var(--inline-space);
}
.card__collection-name {
border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
}
.card__header {
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
}
.card__title {
margin-block-start: 0.1em;
min-block-size: 0;
app/assets/stylesheets/cards.css
+5 -16
View File
@@ -25,6 +25,10 @@
.avatar {
--avatar-size: 2.75em;
}
@media (prefers-color-scheme: dark) {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
}
/* Children
@@ -69,11 +73,6 @@
margin-block-start: calc(-1 * var(--card-padding-block));
margin-inline-start: calc(-1 * var(--card-padding-inline));
min-inline-size: 0;
.cards--considering & {
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
}
}
.card__collection {
@@ -83,12 +82,6 @@
font-weight: 800;
padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
text-transform: uppercase;
.cards--considering & {
background-color: var(--color-canvas);
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
padding: 0 0 0 var(--inline-space);
}
}
.card__id {
@@ -107,11 +100,6 @@
display: inline-flex;
margin-inline-start: var(--inline-space-half);
padding-inline-start: calc(var(--inline-space) * 0.75);
.cards--considering & {
border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
}
}
.card__tags {
@@ -211,6 +199,7 @@
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
color: var(--btn-color);
font-weight: 700;
transition: none;
}
.card__move-button {
app/views/cards/display/_preview.html.erb
+1 -1
View File
@@ -6,7 +6,7 @@
<span class="card__collection">
<span class="card__id"><%= card.id %></span>
<%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]),
class: "card__collection-name txt-uppercase overflow-ellipsis" %>
class: "card__collection-name overflow-ellipsis" %>
</span>
<%= render "cards/display/preview/tags", card: card %>
</header>