From 4a997cb2d0516e1bdc6a57826e5f8b2711b0cf63 Mon Sep 17 00:00:00 2001 From: Niklan Date: Wed, 8 Apr 2026 21:25:37 +0500 Subject: [PATCH] style: refine borders, shadows, and code-block collapse UI --- .../laszlo/assets/css/02-element/code.css | 3 -- .../assets/css/03-component/theme/hljs.css | 4 +- .../assets/css/03-component/ui/prose.css | 5 +- .../content/article-card/article-card.css | 5 +- .../components/content/article/article.css | 3 +- .../ui/breadcrumb-item/breadcrumb-item.css | 6 +-- .../laszlo/components/ui/callout/callout.css | 6 +-- .../components/ui/code-block/code-block.css | 46 ++++++++++++++----- .../components/ui/lightbox/lightbox.css | 7 +-- 9 files changed, 49 insertions(+), 36 deletions(-) diff --git a/app/themes/laszlo/assets/css/02-element/code.css b/app/themes/laszlo/assets/css/02-element/code.css index 7bf0a5f8..5f88c3bb 100644 --- a/app/themes/laszlo/assets/css/02-element/code.css +++ b/app/themes/laszlo/assets/css/02-element/code.css @@ -1,7 +1,5 @@ @layer element { code { - --inline-color: light-dark(#005cc5, #79c0ff); - color: var(--color-on-surface); border-radius: var(--spacing-1); background: var(--color-surface-container-high); @@ -21,7 +19,6 @@ padding: var(--spacing-1); vertical-align: middle; word-break: break-word; - color: var(--inline-color); font-size: 0.8em; } } diff --git a/app/themes/laszlo/assets/css/03-component/theme/hljs.css b/app/themes/laszlo/assets/css/03-component/theme/hljs.css index 2040958e..a7ec85b9 100644 --- a/app/themes/laszlo/assets/css/03-component/theme/hljs.css +++ b/app/themes/laszlo/assets/css/03-component/theme/hljs.css @@ -97,9 +97,9 @@ height: var(--spacing-6); cursor: pointer; text-indent: -9999px; - border: 1px solid var(--color-outline-variant); + opacity: 0.4; border-radius: var(--spacing-1); - background-color: var(--color-primary); + background-color: var(--color-on-surface-variant); padding-inline: var(--spacing-2); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 11.397c0-2.726 0-4.089.843-4.936c.844-.847 2.201-.847 4.917-.847h2.88c2.715 0 4.073 0 4.916.847c.844.847.844 2.21.844 4.936v4.82c0 2.726 0 4.089-.844 4.936c-.843.847-2.201.847-4.916.847h-2.88c-2.716 0-4.073 0-4.917-.847s-.843-2.21-.843-4.936z'/%3E%3Cpath fill='%23000' d='M4.172 3.172C3 4.343 3 6.229 3 10v2c0 3.771 0 5.657 1.172 6.828c.617.618 1.433.91 2.62 1.048c-.192-.84-.192-1.996-.192-3.66v-4.819c0-2.726 0-4.089.843-4.936c.844-.847 2.201-.847 4.917-.847h2.88c1.652 0 2.8 0 3.638.19c-.138-1.193-.43-2.012-1.05-2.632C16.657 2 14.771 2 11 2S5.343 2 4.172 3.172' opacity='0.5'/%3E%3C/svg%3E"); mask-repeat: no-repeat; diff --git a/app/themes/laszlo/assets/css/03-component/ui/prose.css b/app/themes/laszlo/assets/css/03-component/ui/prose.css index 7576f87a..5e593b08 100644 --- a/app/themes/laszlo/assets/css/03-component/ui/prose.css +++ b/app/themes/laszlo/assets/css/03-component/ui/prose.css @@ -147,7 +147,6 @@ calc(0.2727rem + 0.9697vw), var(--spacing-8) ); - border: 1px solid var(--color-outline-variant); border-radius: var(--spacing-4); background: var(--color-surface-container-low); gap: clamp(var(--spacing-2), calc(0.2727rem + 0.9697vw), var(--spacing-8)); @@ -176,6 +175,10 @@ } } + .prose sup { + line-height: 0; + } + .prose .footnote-ref { text-decoration: none; font: var(--typography-body-small); diff --git a/app/themes/laszlo/components/content/article-card/article-card.css b/app/themes/laszlo/components/content/article-card/article-card.css index 12559f9e..4420cfce 100644 --- a/app/themes/laszlo/components/content/article-card/article-card.css +++ b/app/themes/laszlo/components/content/article-card/article-card.css @@ -10,12 +10,13 @@ padding: var(--spacing-4); transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1); color: var(--color-on-surface); - border: 1px solid var(--color-outline-variant); + border: 1px solid + color-mix(in sRGB, var(--color-outline-variant), transparent 50%); border-radius: var(--spacing-4); outline: var(--default-focus-outline-width) solid transparent; background: var(--color-surface-container-lowest); gap: var(--spacing-6); - box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 90%) 0 2px + box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 96%) 0 2px 8px 0; &:focus-within, diff --git a/app/themes/laszlo/components/content/article/article.css b/app/themes/laszlo/components/content/article/article.css index 7746a00a..6a70d799 100644 --- a/app/themes/laszlo/components/content/article/article.css +++ b/app/themes/laszlo/components/content/article/article.css @@ -3,7 +3,8 @@ --_article-spacing: var(--spacing-8); --_article-header-background: var(--color-surface-container-lowest); --_article-main-background: var(--color-surface-container-lowest); - --article-border: 1px solid var(--color-outline-variant); + --article-border: 1px solid + color-mix(in sRGB, var(--color-outline-variant), transparent 50%); --article-border-radius: var(--spacing-4); --article-box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 95%) 0px 4px 16px, diff --git a/app/themes/laszlo/components/ui/breadcrumb-item/breadcrumb-item.css b/app/themes/laszlo/components/ui/breadcrumb-item/breadcrumb-item.css index 4621edab..d5772ef4 100644 --- a/app/themes/laszlo/components/ui/breadcrumb-item/breadcrumb-item.css +++ b/app/themes/laszlo/components/ui/breadcrumb-item/breadcrumb-item.css @@ -18,11 +18,7 @@ background-color 150ms ease-in-out; text-decoration: none; color: var(--arrow-color); - background-color: color-mix( - in sRGB, - var(--arrow-background-color), - transparent 50% - ); + background-color: var(--arrow-background-color); backdrop-filter: blur(var(--spacing-4)); font: var(--typography-label-large); clip-path: polygon( diff --git a/app/themes/laszlo/components/ui/callout/callout.css b/app/themes/laszlo/components/ui/callout/callout.css index 6d167fd6..942a6232 100644 --- a/app/themes/laszlo/components/ui/callout/callout.css +++ b/app/themes/laszlo/components/ui/callout/callout.css @@ -8,13 +8,11 @@ flex-direction: column; padding: var(--spacing-6); color: var(--color-on-surface); - border: 2px solid - color-mix(in sRGB, var(--_callout-color), var(--color-surface) 30%); border-radius: var(--spacing-3); background-image: linear-gradient( to bottom, - color-mix(in sRGB, var(--_callout-color), var(--color-surface) 90%), - color-mix(in sRGB, var(--_callout-color), var(--color-surface) 85%) + color-mix(in sRGB, var(--_callout-color), var(--color-surface) 85%), + color-mix(in sRGB, var(--_callout-color), var(--color-surface) 80%) ); gap: var(--spacing-4); } diff --git a/app/themes/laszlo/components/ui/code-block/code-block.css b/app/themes/laszlo/components/ui/code-block/code-block.css index deed2212..fa552b07 100644 --- a/app/themes/laszlo/components/ui/code-block/code-block.css +++ b/app/themes/laszlo/components/ui/code-block/code-block.css @@ -1,6 +1,6 @@ @layer component.ui { .code-block { - --collapse-height: 60px; + --collapse-height: 100px; display: flex; flex-direction: column; @@ -23,14 +23,24 @@ transition: opacity 0.2s; pointer-events: none; opacity: 0; - border-top: 1px solid var(--color-outline-variant); border-radius: 0 0 var(--spacing-2) var(--spacing-2); - background: color-mix( - in sRGB, - var(--color-secondary-fixed), - transparent 50% + background: linear-gradient( + to bottom, + color-mix( + in sRGB, + var(--color-surface-container-high), + transparent 100% + ) + 0%, + color-mix(in sRGB, var(--color-surface-container-high), transparent 85%) + 25%, + color-mix(in sRGB, var(--color-surface-container-high), transparent 60%) + 50%, + color-mix(in sRGB, var(--color-surface-container-high), transparent 20%) + 70%, + var(--color-surface-container-high) 80%, + var(--color-surface-container-high) 100% ); - backdrop-filter: blur(var(--spacing-2)); } } @@ -63,17 +73,29 @@ } .code-block__button { - all: unset; position: absolute; z-index: 10; right: 0; bottom: 0; left: 0; + display: flex; + align-items: flex-end; + justify-content: center; height: var(--collapse-height); + padding-bottom: var(--spacing-3); cursor: pointer; - text-align: center; - text-transform: uppercase; - color: var(--color-on-secondary-fixed); - font: var(--typography-label-large); + text-decoration: underline; + color: var(--color-on-surface-variant); + border-radius: 0 0 var(--spacing-2) var(--spacing-2); + font: var(--typography-label-medium); + all: unset; + text-underline-offset: 3px; + &:hover { + background-image: linear-gradient( + to bottom, + transparent, + color-mix(in sRGB, var(--color-shadow), transparent 88%) + ); + } } } diff --git a/app/themes/laszlo/components/ui/lightbox/lightbox.css b/app/themes/laszlo/components/ui/lightbox/lightbox.css index 275aa489..2690c392 100644 --- a/app/themes/laszlo/components/ui/lightbox/lightbox.css +++ b/app/themes/laszlo/components/ui/lightbox/lightbox.css @@ -25,12 +25,7 @@ right: var(--spacing-2); transition: opacity 0.25s linear; opacity: 0; - color: var(--color-on-tertiary-container); - border-radius: var(--spacing-2); - background-color: var(--color-tertiary-container); - box-shadow: - color-mix(in sRGB, var(--color-scrim), transparent 90%) 0 10px 15px -3px, - color-mix(in sRGB, var(--color-scrim), transparent 95%) 0 4px 6px -2px; + color: var(--color-on-surface); } .lightbox:hover .lightbox__icon {