@drop-in/new/packages/graffiti/drop-in.css

A SvelteKit Svelte 5 PocketBase Starter Kit with a CLI

/* Typeography */
:root {
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial,
		sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

	--min-vw: 360;
	--max-vw: 800;

	/* Deprecated	- use --fs: 1 instead */
	/* Fluid Type */
	--fs-xxxs: clamp(0.45rem, 0.305882vi + 0.37rem, 0.58rem);
	--fs-xxs: clamp(0.56rem, 0.376471vi + 0.47rem, 0.72rem);
	--fs-xs: clamp(0.7rem, 0.470588vi + 0.58rem, 0.9rem);
	--fs-base: clamp(0.88rem, 0.588235vi + 0.73rem, 1.13rem);
	--fs-s: clamp(1.09rem, 0.752941vi + 0.9rem, 1.41rem);
	--fs-m: clamp(1.37rem, 0.917647vi + 1.14rem, 1.76rem);
	--fs-l: clamp(1.71rem, 1.152941vi + 1.42rem, 2.2rem);
	--fs-xl: clamp(2.14rem, 1.435294vi + 1.78rem, 2.75rem);
	--fs-xxl: clamp(2.67rem, 1.788235vi + 2.22rem, 3.43rem);
	--fs-xxxl: clamp(3.34rem, 2.235294vi + 2.78rem, 4.29rem);
	--fs-xxxxl: clamp(4.17rem, 2.8vi + 3.47rem, 5.36rem);
	/* END Deprecated Fluid Type */

	--line-height: calc(2px + 2ex + 2px);

	/* Vertical Spacing */
	--vs-s: 0.5rem;
	--vs-base: 1rem;
	--vs-m: 1.5rem;
	--vs-l: 2rem;

	/* Border Radius */
	--rad-xs: 2px;
	--rad-s: 4px;
	--rad-m: 8px;
	--rad-l: 16px;

	/* Padding */
	--pad-xs: 2px;
	--pad-s: 6px;
	--pad-m: 12px;
	--pad-l: 25px;

	/* Shadow */
	--shadow-color: 0deg 0% 0%;
	--bs-s: 0.5px 0.8px 1.1px hsl(var(--shadow-color) / 0.3),
		0.8px 1.3px 1.7px -1.2px hsl(var(--shadow-color) / 0.3),
		1.9px 3.1px 4.1px -2.5px hsl(var(--shadow-color) / 0.3);
	--bs-m: 0.5px 0.8px 1.1px hsl(var(--shadow-color) / 0.32),
		1.6px 2.6px 3.4px -0.8px hsl(var(--shadow-color) / 0.32),
		3.9px 6.4px 8.4px -1.7px hsl(var(--shadow-color) / 0.32),
		9.6px 15.5px 20.5px -2.5px hsl(var(--shadow-color) / 0.32);
	--bs-l: 0.5px 0.8px 1.1px hsl(var(--shadow-color) / 0.3),
		2.7px 4.4px 5.8px -0.4px hsl(var(--shadow-color) / 0.3),
		4.9px 8px 10.6px -0.7px hsl(var(--shadow-color) / 0.3),
		8.1px 13.1px 17.3px -1.1px hsl(var(--shadow-color) / 0.3),
		12.9px 20.9px 27.6px -1.4px hsl(var(--shadow-color) / 0.3),
		20.1px 32.7px 43.2px -1.8px hsl(var(--shadow-color) / 0.3),
		30.6px 49.7px 65.7px -2.1px hsl(var(--shadow-color) / 0.3),
		45px 73.1px 96.6px -2.5px hsl(var(--shadow-color) / 0.3);

	/* Default Palette */
	--yellow: #ffd817;
	--orange: #ff9e02;
	--red: #ff5a00;
	--pink: #ff0084;
	--teal: #a0dcc8;
	--blue: #0001fb;

	--fg: light-dark(#000, #fff);
	--bg: light-dark(#fff, #000);

	--tint-or-shade: color-mix(in oklab, var(--fg), transparent 95%);
	--tint-or-shade-harder: color-mix(in oklab, var(--fg), transparent 90%);

	/* Fluid Type */
	--font-size-min: 16;
	--font-size-max: 20;
	--font-ratio-min: 1.25;
	--font-ratio-max: 1.25;
	--font-width-min: 320;
	--font-width-max: 1500;

	color-scheme: light dark;
}

html {
	box-sizing: border-box;
}

html,
body,
body > .body-fill {
	height: 100%;
	margin: 0;
}

body > .body-fill {
	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
}

header,
main,
footer {
	width: 100%;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	font-family: var(--font-sans);
	line-height: 1.5;
	margin: 0;
	min-height: 100vh;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
.fluid,
textarea,
input,
select,
button,
th,
td {
	--fluid-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), var(--fl, 0)));
	--fluid-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), var(--fl, 0)));
	--fluid-preferred: calc(
		(var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min))
	);
	--fluid-type: clamp(
		(var(--fluid-min) / 16) * 1rem,
		((var(--fluid-min) / 16) * 1rem) -
			(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
			(var(--fluid-preferred) * var(--variable-unit, 100vi)),
		(var(--fluid-max) / 16) * 1rem
	);
	font-size: var(--fluid-type);
	margin-block: 0 var(--vs-base);
}

/* This makes containers, with container queries use a cqi unit instead of vi */
/* FC Fluid Container */
.fluid-text-container,
.fc {
	container-type: inline-size;
	--variable-unit: 100cqi;
}
h1,
.h1 {
	margin-block: 0 var(--vs-base);
	--fl: 5;
}
h2,
.h2 {
	--fl: 4;
}
h3,
.h3 {
	--fl: 3;
}
h4,
.h4 {
	--fl: 2;
}
h5,
.h5 {
	--fl: 1;
}
h6,
.h6 {
	--fl: 0;
}
p,
li,
body,
input,
textarea,
select {
	--fl: 0;
}
.fs-xs {
	--fl: -1;
}
.fs-base {
	--fl: 0;
}
.fs-s {
	--fl: 1;
}
.fs-m {
	--fl: 2;
}
.fs-l {
	--fl: 3;
}
.fs-xl {
	--fl: 4;
}
.fs-xxl {
	--fl: 5;
}
.fs-xxxl {
	--fl: 6;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
	margin: 0;
}

button,
.button {
	cursor: pointer;
	background: var(--bg);
	color: var(--fg);
	border: solid 1px var(--tint-or-shade);
	border-radius: var(--rad-s);
	padding: var(--pad-s) var(--pad-l);
}

/* UTILITIES */

.readable {
	max-width: 900px;
	width: 100%;
}

.flex {
	display: flex;
	gap: 10px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	grid-gap: 20px;
}

.visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect(0px, 0px, 0px, 0px);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0px;
	border: 0px;
}

.no-list {
	list-style: none;
	margin: 0;
	padding: 0;
	li {
		margin: 0;
		padding: 0;
	}
}

.row {
	margin-block: var(--vs-l);
}
/* END UTILITIES */

/* LAYOUT */
.layout {
	display: grid;
	align-content: start;
	grid-template-rows: auto;
	--max-col-size: 100px;
	--min-col-size: 50px;
	--gcs: 12;
	--gg: 2.5;
	--gc: minmax(var(--min-col-size), var(--max-col-size));
	--g-boundary: minmax(calc(var(--gg) * 1%), 1fr);
	--g-gutter-width: calc(var(--gg) * 1%);

	grid-template-columns:
		[start gutter] var(--g-boundary) [content]
		repeat(calc(var(--gcs) - 1), [col-start] var(--gc) [col-end gutter] var(--g-gutter-width))
		[last-col-start col-start] var(--gc) [col-end content-end gutter] var(--g-boundary)
		[end];
	@media (width < 1000px) {
		--gcs: 8;
	}
	@media (width < 500px) {
		--gcs: 4;
	}
}

.layout > * {
	grid-column: content / content-end;
}

.layout .sub {
	grid-template-columns: subgrid;
	display: grid;
}

.layout .col {
	grid-column: col-start round(down, mod(calc(var(--start) - 1), var(--gcs)) + 1) / span
		var(--span, 'end');
}
/* Sidebar class (1/4 width) */
.layout .sidebar {
	@media (width < 700px) {
		grid-column: content / span 3;
	}
	@media (width < 500px) {
		grid-column: content / content-end;
	}
	grid-column: content / span 3;
}

/* Main content area class */
.layout .main {
	grid-column: col-start 3 / content-end;
	@media (width < 500px) {
		grid-column: content / content-end;
	}
}

/* Sidebar class (1/4 width) */
.layout .invert-sidebar {
	@media (width < 1000px) {
		--start: 7;
		--span: 3;
	}
	@media (width < 500px) {
		grid-column: content / content-end;
	}

	--start: 10;
	--span: 5;
}

/* TODO this is being overridden by specificity */
/* Main content area class */
.layout .invert-main {
	@media (width < 1000px) {
		grid-column: col-start / span 11;
	}
	@media (width < 500px) {
		grid-column: content / content-end;
	}
	grid-column: col-start / span 17;
}

.layout .full {
	width: 100%;
	grid-column: start / end;
}

.c-full {
	--start: 1;
	--span: calc((var(--gcs) * 2 - 1));
}

.c-quarter {
	--start: 1; /* Always starts at column 2 */
	--span: calc((var(--gcs) / 2) - 1); /* Half of the total columns, excluding the first gutter */
}

.c-quarter:nth-child(2 of .c-quarter) {
	--start: calc((var(--gcs) / 4) + 1);
}

.c-quarter:nth-child(3 of .c-quarter) {
	--start: calc((var(--gcs) / 4) * 2 + 1);
}

.c-quarter:nth-child(4 of .c-quarter) {
	--start: calc(((var(--gcs) / 4) * 3) + 1);
}

.c-half {
	--start: 1;
	--span: calc((var(--gcs) - 1)); /* Half of the total columns, excluding the first gutter */
}
.c-half:nth-child(2 of .c-half) {
	--start: calc(
		(var(--gcs) / 2) + 1
	); /* Starts after the first .c-half including its span and the gutter */
}

:where(h1, h2, h3, h4, h5, h6) {
	view-transition-name: var(--transition-name);
}
/* END LAYOUT */

/* @drop-in/decks Specific Styles */

/* Accordion */
.di-accordion {
	margin-block: 0 var(--vs-base);
	summary {
		font-size: var(--base);
		padding: 2rem 1rem;
		border-block-end: solid 1px var(--tint-or-shade);
	}
	border-block-end: solid 1px var(--tint-or-shade);
}

/* Share */
.di-dialog {
	border-radius: var(--rad-m);
	max-width: 60ch;
	border: none;
	padding: var(--pad-m);
	position: relative;
	box-shadow: var(--bs-l);
	&::backdrop {
		background-color: rgb(0 0 0 / 0.5);
		backdrop-filter: blur(5px);
	}
	> *:first-child {
		margin-top: 0;
	}
	.share-window {
		display: flex;
		align-items: center;
	}
	a {
		text-decoration: none;
	}
}
.di-drawer {
	border: none;
	border-radius: var(--rad-m);
	padding: var(--pad-m);
	box-shadow: var(--bs-l);
	&::backdrop {
		background-color: rgb(0 0 0 / 0.5);
		backdrop-filter: blur(5px);
	}
}

.di-drawer-close-button {
	position: absolute;
	top: 10px;
	right: 10px;
}

.di-dialog-close {
	position: absolute;
	border: none;
	right: 10px;
	top: 10px;
	line-height: var(--fs-s);
	font-size: var(--fs-s);
	cursor: pointer;
}

/* Menu */
.di-menu {
	background: var(--bg);
	box-shadow: var(--bs-m);
	border-radius: var(--rad-m);
	padding: var(--pad-s);
	flex-direction: column;
	border: solid 1px var(--tint);
	width: 150px;
	z-index: 10;
	.di-menu-inner {
		gap: 10px;
		display: flex;
		flex-direction: column;
	}
	button,
	a {
		line-height: 1;
		background: transparent;
		color: var(--fg);
		gap: 10px;
		padding: var(--pad-s);
		align-items: center;
		border-radius: var(--rad-s);
		border: none;
		width: 100%;
		display: flex;
		&:hover,
		&:active {
			background: var(--tint-or-shade);
		}
	}
}

.di-toast-slice {
	background: var(--bg);
	box-shadow: var(--bs-m);
	border-radius: var(--rad-s);
	padding: var(--pad-m) var(--pad-l);
	flex-direction: column;
	border: solid 1px var(--tint);
	z-index: 10;
	overflow: hidden;
	position: relative;
	.progress {
		--info: var(--blue);
		--success: var(--green);
		--warning: var(--yellow);
		--error: var(--red);
	}
}