mirror of
https://github.com/RealKai42/qwerty-learner.git
synced 2026-04-04 22:09:04 +08:00
73 lines
2.0 KiB
CSS
73 lines
2.0 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
|
||
'Helvetica Neue', sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
background-color: #faf9ff;
|
||
@apply transition-colors duration-300;
|
||
}
|
||
|
||
html.dark body {
|
||
@apply bg-gray-900;
|
||
}
|
||
|
||
code {
|
||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
:global(#root) {
|
||
height: 100%;
|
||
}
|
||
|
||
.card {
|
||
box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
|
||
0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
|
||
0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
|
||
}
|
||
|
||
/* Well, TailwindCSS does’t have `text-shadow` classes. */
|
||
.text-shadow {
|
||
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.customized-scrollbar::-webkit-scrollbar {
|
||
width: 6px;
|
||
background: inherit;
|
||
}
|
||
|
||
.customized-scrollbar::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.customized-scrollbar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
@layer components {
|
||
.word-chip {
|
||
@apply flex h-10 w-auto cursor-pointer
|
||
flex-row items-center
|
||
justify-center rounded-md border-2
|
||
border-solid border-indigo-400 bg-white px-2 py-0.5 transition-colors duration-100 hover:bg-indigo-100 dark:border-slate-800
|
||
dark:bg-slate-700 dark:hover:bg-slate-600 md:h-12
|
||
md:px-5 md:py-1;
|
||
}
|
||
|
||
.word-chip > span {
|
||
@apply font-mono text-2xl font-light text-gray-600 dark:text-gray-300 md:text-3xl;
|
||
}
|
||
|
||
.word-chip-tooltip {
|
||
@apply pointer-events-none flex items-center justify-center whitespace-nowrap rounded-lg
|
||
bg-white py-1 px-2 text-xs text-gray-500
|
||
shadow-md dark:bg-gray-800 dark:text-gray-300;
|
||
}
|
||
}
|