ui: card-surface utility, rounded corners, calendar polish, banner layout
- Add .card-surface utility (@layer components): rounded-sm border shadow-sm - Card.svelte, CalendarBlock, SearchableTextBlock, BlogOverview use card-surface - OrganisationsBlock: logo h-12 rounded-sm, description style cleanup, pt-1 for hover clip fix - DeadlineBanner: container-custom width constraint, text left-aligned - WindAreaPanel stats: card-surface - CalendarBlock: rounded-sm day headers, past days opacity-20 + diagonal strike - Add .day-past pseudo-element utility for diagonal line Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+26
@@ -10,6 +10,32 @@
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ==========================================================================
|
||||
Component Utilities
|
||||
========================================================================== */
|
||||
|
||||
@layer components {
|
||||
/* Shared card surface: border, background, shadow, radius */
|
||||
.card-surface {
|
||||
@apply rounded-sm border border-stein-200 bg-white shadow-sm;
|
||||
}
|
||||
|
||||
/* Diagonal strikethrough for past calendar days */
|
||||
.day-past::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
background: linear-gradient(
|
||||
to top right,
|
||||
transparent calc(50% - 0.5px),
|
||||
rgba(0, 0, 0, 0.12) calc(50% - 0.5px),
|
||||
rgba(0, 0, 0, 0.12) calc(50% + 0.5px),
|
||||
transparent calc(50% + 0.5px)
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Design Tokens – Windwiderstand (01-colors, 02-typography, 06-tokens.json)
|
||||
========================================================================== */
|
||||
|
||||
Reference in New Issue
Block a user