176 lines
3.4 KiB
CSS
176 lines
3.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-surface: var(--color-gray-900);
|
|
--color-surface-hover: var(--color-gray-800);
|
|
--color-surface-muted: oklch(from var(--color-gray-800) l c h / 40%);
|
|
|
|
--color-border: var(--color-gray-800);
|
|
--color-border-hover: var(--color-gray-700);
|
|
--color-border-focus: var(--color-blue-500);
|
|
|
|
--color-text-primary: var(--color-white);
|
|
--color-text-secondary: var(--color-gray-400);
|
|
--color-text-muted: var(--color-gray-500);
|
|
|
|
--color-icon: var(--color-gray-400);
|
|
--color-icon-muted: var(--color-gray-500);
|
|
|
|
--color-primary: var(--color-blue-600);
|
|
--color-primary-hover: var(--color-blue-500);
|
|
|
|
--color-success: var(--color-green-900);
|
|
--color-success-border: var(--color-green-800);
|
|
|
|
--color-lang-gdscript: var(--color-blue-500);
|
|
--color-lang-csharp: var(--color-green-500);
|
|
--color-lang-rust: var(--color-orange-500);
|
|
--color-lang-c: var(--color-gray-500);
|
|
--color-lang-cpp: var(--color-pink-500);
|
|
--color-lang-default: var(--color-gray-500);
|
|
}
|
|
|
|
:root {
|
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
|
|
color-scheme: dark;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
/* background-color: #242424; */
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* a { */
|
|
/* font-weight: 500; */
|
|
/* color: #646cff; */
|
|
/* text-decoration: inherit; */
|
|
/* } */
|
|
/* a:hover { */
|
|
/* color: #535bf2; */
|
|
/* } */
|
|
|
|
/* body { */
|
|
/* margin: 0; */
|
|
/* display: flex; */
|
|
/* place-items: center; */
|
|
/* min-width: 320px; */
|
|
/* min-height: 100vh; */
|
|
/* } */
|
|
|
|
h1 {
|
|
font-size: 3.2em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.card {
|
|
padding: 2em;
|
|
}
|
|
|
|
/* #app { */
|
|
/* max-width: 1280px; */
|
|
/* margin: 0 auto; */
|
|
/* padding: 2rem; */
|
|
/* text-align: center; */
|
|
/* } */
|
|
|
|
.header-title {
|
|
font-family: 'Times New Roman';
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
@apply h-10;
|
|
@apply rounded-lg;
|
|
@apply px-2 py-1;
|
|
@apply hover:bg-gray-800;
|
|
}
|
|
|
|
button:default {
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
padding: 0.6em 1.2em;
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
/* transition: border-color 0.25s, background-color 0.2s; */
|
|
color: #1a1b26
|
|
}
|
|
|
|
button:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: default;
|
|
@apply bg-zinc-700
|
|
}
|
|
|
|
button:focus,
|
|
button:focus-visible {
|
|
outline: 4px auto -webkit-focus-ring-color;
|
|
}
|
|
|
|
@keyframes grow-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes grow-out {
|
|
from {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
[data-dropdown-menu-content][data-state="open"] {
|
|
animation: grow-in 150ms ease-out;
|
|
transform-origin: top;
|
|
}
|
|
|
|
[data-dropdown-menu-content][data-state="closed"] {
|
|
animation: grow-out 150ms ease-out;
|
|
transform-origin: top;
|
|
}
|
|
|
|
[data-alert-dialog-content][data-state="open"] {
|
|
animation: grow-in 150ms ease-out;
|
|
}
|
|
|
|
[data-alert-dialog-content][data-state="closed"] {
|
|
animation: grow-out 150ms ease-out;
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: light) { */
|
|
/* :root { */
|
|
/* color: #213547; */
|
|
/* background-color: #ffffff; */
|
|
/* } */
|
|
/**/
|
|
/* a:default:hover { */
|
|
/* color: #747bff; */
|
|
/* } */
|
|
/**/
|
|
/* button:default { */
|
|
/* background-color: #f9f9f9; */
|
|
/* } */
|
|
/* } */
|