190 lines
3.5 KiB
CSS
190 lines
3.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
@font-face {
|
|
font-family: "NanumSquare";
|
|
src: url("/assets/fonts/NanumSquareL.woff2") format("woff2");
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "NanumSquare";
|
|
src: url("/assets/fonts/NanumSquare.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "NanumSquare";
|
|
src: url("/assets/fonts/NanumSquareB.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "NanumSquare";
|
|
src: url("/assets/fonts/NanumSquareEB.woff2") format("woff2");
|
|
font-weight: 800 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@theme {
|
|
--font-sans: "NanumSquare", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
color: #17171f;
|
|
background: #fafafa;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #cbd5e1 transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="password"] {
|
|
color: #111827;
|
|
caret-color: #111827;
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
-webkit-text-fill-color: #111827;
|
|
}
|
|
|
|
input::placeholder {
|
|
color: #a0a7b7;
|
|
font-family: var(--font-sans);
|
|
font-weight: 700;
|
|
}
|
|
|
|
input[type="password"]::placeholder {
|
|
color: #a0a7b7;
|
|
font-family: var(--font-sans);
|
|
font-weight: 700;
|
|
-webkit-text-fill-color: #a0a7b7;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.icon-ripple-button {
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
.icon-ripple-button::after {
|
|
position: absolute;
|
|
inset: 5px;
|
|
content: "";
|
|
pointer-events: none;
|
|
border: 1px solid rgba(79, 70, 229, 0.42);
|
|
border-radius: 9999px;
|
|
opacity: 0;
|
|
transform: scale(0.72);
|
|
}
|
|
|
|
.icon-ripple-button:active::after {
|
|
animation: icon-ripple 340ms ease-out;
|
|
}
|
|
|
|
.icon-chat-blink {
|
|
animation: icon-chat-blink 1.05s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes icon-ripple {
|
|
0% {
|
|
opacity: 0.42;
|
|
transform: scale(0.72);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1.75);
|
|
}
|
|
}
|
|
|
|
@keyframes icon-chat-blink {
|
|
0% {
|
|
opacity: 1;
|
|
filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
|
|
}
|
|
|
|
45% {
|
|
opacity: 0.34;
|
|
filter: drop-shadow(0 0 7px rgba(37, 99, 235, 0.82));
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
|
|
}
|
|
}
|
|
|
|
.page-transition {
|
|
will-change: opacity, transform;
|
|
transition:
|
|
opacity 120ms ease,
|
|
transform 120ms ease;
|
|
}
|
|
|
|
.page-transition-in {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.page-transition-out {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.icon-ripple-button:active::after {
|
|
animation: none;
|
|
}
|
|
|
|
.icon-chat-blink {
|
|
animation: none;
|
|
}
|
|
|
|
.page-transition {
|
|
transition: none;
|
|
transform: none;
|
|
}
|
|
}
|