@tailwind base; @tailwind components; @tailwind utilities; @layer base { @font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("./assets/fonts/Inter.var.latin.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+02BB-02BC, U+2000-206F, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD, U+E06B-E080, U+02E2, U+02E2, U+02B0, U+1D34, U+1D57, U+1D40, U+207F, U+1D3A, U+1D48, U+1D30, U+02B3, U+1D3F; } h1 { @apply text-neutral-800 text-[22px] font-medium leading-[30.80px]; } h2 { @apply text-neutral-500 text-sm font-medium uppercase leading-tight tracking-wide; } } @layer components { .card { @apply p-5 bg-white rounded-lg border border-gray-200; } .card h1 { @apply text-neutral-800 text-lg font-medium leading-snug; } .card h2 { @apply text-neutral-500 text-xs font-semibold uppercase tracking-wide; } .card tbody { @apply flex flex-col gap-2; } .card td:first-child { @apply w-40 text-neutral-500 text-sm leading-tight flex-shrink-0; } .card td:last-child { @apply text-neutral-800 text-sm leading-tight; } .description { @apply text-neutral-500 leading-snug } /** * .toggle applies "Toggle" UI styles to input[type="checkbox"] form elements. * You can use the -large and -small modifiers for size variants. */ .toggle { @apply appearance-none relative w-10 h-5 rounded-full bg-neutral-300 cursor-pointer; transition: background-color 200ms ease-in-out; } .toggle:disabled { @apply bg-neutral-200; @apply cursor-not-allowed; } .toggle:checked { @apply bg-indigo-500; } .toggle:checked:disabled { @apply bg-indigo-300; } .toggle:focus { @apply outline-none ring; } .toggle::after { @apply absolute bg-white rounded-full will-change-[width]; @apply w-3.5 h-3.5 m-[0.1875rem] translate-x-0; content: " "; transition: width 200ms ease, transform 200ms ease; } .toggle:checked::after { @apply translate-x-5; } .toggle:checked:disabled::after { @apply bg-indigo-50; } .toggle:enabled:active::after { @apply w-[1.125rem]; } .toggle:checked:enabled:active::after { @apply w-[1.125rem] translate-x-3.5; } .toggle-large { @apply w-12 h-6; } .toggle-large::after { @apply m-1 w-4 h-4; } .toggle-large:checked::after { @apply translate-x-6; } .toggle-large:enabled:active::after { @apply w-6; } .toggle-large:checked:enabled:active::after { @apply w-6 translate-x-4; } .toggle-small { @apply w-6 h-3; } .toggle-small:focus { /** * We disable ring for .toggle-small because it is a * small, inline element. */ @apply outline-none shadow-none; } .toggle-small::after { @apply w-2 h-2 m-0.5; } .toggle-small:checked::after { @apply translate-x-3; } .toggle-small:enabled:active::after { @apply w-[0.675rem]; } .toggle-small:checked:enabled:active::after { @apply w-[0.675rem] translate-x-[0.55rem]; } } /** * Non-Tailwind styles begin here. */ .bg-gray-0 { --tw-bg-opacity: 1; background-color: rgba(250, 249, 248, var(--tw-bg-opacity)); } .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgba(249, 247, 246, var(--tw-bg-opacity)); } html { letter-spacing: -0.015em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .link { --text-opacity: 1; color: #4b70cc; color: rgba(75, 112, 204, var(--text-opacity)); } .link:hover, .link:active { --text-opacity: 1; color: #19224a; color: rgba(25, 34, 74, var(--text-opacity)); } .link-underline { text-decoration: underline; } .link-underline:hover, .link-underline:active { text-decoration: none; } .link-muted { /* same as text-gray-500 */ --tw-text-opacity: 1; color: rgba(112, 110, 109, var(--tw-text-opacity)); } .link-muted:hover, .link-muted:active { /* same as text-gray-500 */ --tw-text-opacity: 1; color: rgba(68, 67, 66, var(--tw-text-opacity)); } .button { font-weight: 500; padding-top: 0.45rem; padding-bottom: 0.45rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.375rem; border-width: 1px; border-color: transparent; transition-property: background-color, border-color, color, box-shadow; transition-duration: 120ms; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); min-width: 80px; } .button:focus { outline: 0; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); } .button:disabled { cursor: not-allowed; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .button-blue { --bg-opacity: 1; background-color: #4b70cc; background-color: rgba(75, 112, 204, var(--bg-opacity)); --border-opacity: 1; border-color: #4b70cc; border-color: rgba(75, 112, 204, var(--border-opacity)); --text-opacity: 1; color: #fff; color: rgba(255, 255, 255, var(--text-opacity)); } .button-blue:enabled:hover { --bg-opacity: 1; background-color: #3f5db3; background-color: rgba(63, 93, 179, var(--bg-opacity)); --border-opacity: 1; border-color: #3f5db3; border-color: rgba(63, 93, 179, var(--border-opacity)); } .button-blue:disabled { --text-opacity: 1; color: #cedefd; color: rgba(206, 222, 253, var(--text-opacity)); --bg-opacity: 1; background-color: #6c94ec; background-color: rgba(108, 148, 236, var(--bg-opacity)); --border-opacity: 1; border-color: #6c94ec; border-color: rgba(108, 148, 236, var(--border-opacity)); } .button-red { background-color: #d04841; border-color: #d04841; color: #fff; } .button-red:enabled:hover { background-color: #b22d30; border-color: #b22d30; } /** * .spinner creates a circular animated spinner, most often used to indicate a * loading state. The .spinner element must define a width, height, and * border-width for the spinner to apply. */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner { @apply border-transparent border-t-current border-l-current rounded-full; animation: spin 700ms linear infinite; }