Something went wrong. Try again.
Discover books, shows, and movies at your level. Track your progress by filling your Shelf with what you find, and share with other language shlf.space
Something went wrong. Try again.
shlf.space input.css
2.5 kB · 122 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123@import "tailwindcss";@import "./internal/ui/views/index/index.css";@import "./internal/ui/views/shelf/shelf.css";@import "./internal/ui/views/login/login.css";@import "./internal/ui/components/header/header.css";
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/epilogue.woff2') format('woff2');}
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/caveat.woff2') format('woff2');}
@theme { --color-canvas: #fbf9f5; --color-ink: #1a1a1a; --color-tonal: #f5f4ef; --color-dim: #5f5e5e; --color-accent: #b1b3ab; --color-hover: #e8e9e2;
--font-primary: 'Epilogue', sans-serif; --font-accent: 'Caveat', cursive;}
body { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--font-primary); background-color: var(--color-canvas); color: var(--color-ink);}
main { flex: 1; display: flex; flex-direction: column;}
.container { margin-inline: auto; max-width: 80rem; padding: 2rem 1.125rem;}
.button { display: flex; align-items: center; justify-content: center; gap: theme(spacing.2); cursor: pointer; padding: theme(spacing.3) theme(spacing.5); font-weight: bold; font-family: var(--font-primary);
&:hover { background-color: var(--color-hover); color: var(--color-ink); }
&:active { transform: scale(0.98); }
&:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
&.button-primary { background-color: var(--color-ink); color: var(--color-canvas);
&:hover { background-color: var(--color-dim); color: var(--color-canvas); } }}
.input { padding: theme(spacing.2) theme(spacing.4); background-color: var(--color-tonal); font-size: var(--text-sm); font-family: var(--font-primary);
&::placeholder { opacity: 0.75; }
&:focus { outline: 1px solid var(--color-ink); outline-offset: -2px; }}
.spinner { width: 1rem; height: 1rem; display: none; animation: spin 1s linear infinite;}
@keyframes spin { from { rotate: 0deg; } to { rotate: 360deg; }}
.htmx-request .spinner { display: inline;}