315 lines
8.4 KiB
CSS
315 lines
8.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--font-sans: "Inter", sans-serif;
|
|
--font-mono: "JetBrains Mono", monospace;
|
|
--font-chivo: "Chivo", sans-serif;
|
|
|
|
/* Core Theme Colors */
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 0%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 0%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 0%;
|
|
--primary: 0 0% 0%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--primary-hover: 240 4% 16%;
|
|
--secondary: 0 0% 100%;
|
|
--secondary-foreground: 240 4% 16%;
|
|
--secondary-hover: 240 6% 90%;
|
|
--muted: 240 5% 96%;
|
|
--muted-foreground: 240 4% 46%;
|
|
--accent: 240 5% 96%;
|
|
--accent-foreground: 0 0% 0%;
|
|
--border: 240 4.8% 95.9%;
|
|
--input: 240 6% 90%;
|
|
--ring: 0 0% 0%;
|
|
--placeholder-foreground: 240 5% 65%;
|
|
|
|
--accent-amber: 48 96% 89%; /* amber-100 #fef3c7 */
|
|
--accent-amber-foreground: 26 90% 37%; /* amber-700 #b45309 */
|
|
--accent-emerald: 149 80% 90%; /* emerald-100 #d1fae5 */
|
|
--accent-emerald-foreground: 161 94% 30%; /* emerald-600 #059669 */
|
|
--accent-red: 0 93% 94%; /* red-100 #fee2e2 */
|
|
--accent-red-foreground: 0 72% 51%; /* red-600 #dc2626 */
|
|
--accent-indigo: 226 100% 94%; /* indigo-100 #e0e7ff */
|
|
--accent-indigo-foreground: 243 75% 59%; /* indigo-600 #4f46e5 */
|
|
--accent-pink: 326 78% 95%; /* pink-100 #fce7f3 */
|
|
--accent-pink-foreground: 333 71% 51%; /* pink-600 #db2777 */
|
|
--accent-purple: 269 100% 95%; /* purple-100 #f3e8ff */
|
|
--accent-purple-foreground: 271 81% 56%; /* purple-600 #7c3aed */
|
|
|
|
--destructive: 0 72% 51%; /* red-600 #dc2626 */
|
|
--destructive-foreground: 0 0% 100%;
|
|
--warning: 26 90% 37%; /* amber-700 #b45309 */
|
|
--warning-foreground: 0 0% 100%;
|
|
|
|
/* Component Colors */
|
|
--component-icon: #d8598a;
|
|
--flow-icon: #2f67d0;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 240 6% 10%;
|
|
--foreground: 0 0% 100%;
|
|
--card: 240 6% 10%;
|
|
--card-foreground: 0 0% 100%;
|
|
--popover: 240 6% 10%;
|
|
--popover-foreground: 0 0% 100%;
|
|
--primary: 0 0% 100%;
|
|
--primary-foreground: 0 0% 0%;
|
|
--primary-hover: 240 6% 90%;
|
|
--secondary: 0 0% 0%;
|
|
--secondary-foreground: 240 6% 90%;
|
|
--secondary-hover: 240 4% 16%;
|
|
--muted: 240 4% 16%;
|
|
--muted-foreground: 240 5% 65%;
|
|
--accent: 240 4% 16%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--border: 240 3.7% 15.9%;
|
|
--input: 240 5% 34%;
|
|
--ring: 0 0% 100%;
|
|
--placeholder-foreground: 240 4% 46%;
|
|
|
|
--accent-amber: 22 78% 26%; /* amber-900 #78350f */
|
|
--accent-amber-foreground: 46 97% 65%; /* amber-300 #fcd34d */
|
|
--accent-emerald: 164 86% 16%; /* emerald-900 #064e3b */
|
|
--accent-emerald-foreground: 158 64% 52%; /* emerald-400 #34d399 */
|
|
--accent-red: 0 63% 31%; /* red-900 #7f1d1d */
|
|
--accent-red-foreground: 0 91% 71%; /* red-400 #f87171 */
|
|
--accent-indigo: 242 47% 34%; /* indigo-900 #312e81 */
|
|
--accent-indigo-foreground: 234 89% 74%; /* indigo-400 #818cf8 */
|
|
--accent-pink: 336 69% 30%; /* pink-900 #831843 */
|
|
--accent-pink-foreground: 329 86% 70%; /* pink-400 #f472b6 */
|
|
--accent-purple: 274 66% 32%; /* purple-900 #4c1d95 */
|
|
--accent-purple-foreground: 270 95% 75%; /* purple-400 #a78bfa */
|
|
|
|
--destructive: 0 84% 60%; /* red-500 #ef4444 */
|
|
--destructive-foreground: 0 0% 100%;
|
|
--warning: 46 97% 65%; /* amber-300 #fcd34d */
|
|
--warning-foreground: 0 0% 0%;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.header-arrangement {
|
|
@apply flex w-full h-[53px] items-center justify-between border-b border-border;
|
|
}
|
|
|
|
.header-start-display {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
.header-end-division {
|
|
@apply flex justify-end px-2;
|
|
}
|
|
|
|
.header-end-display {
|
|
@apply ml-auto mr-2 flex items-center gap-5;
|
|
}
|
|
|
|
.header-github-link {
|
|
@apply inline-flex h-8 items-center justify-center rounded-md border border-input px-2 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
|
|
}
|
|
|
|
.header-notifications {
|
|
@apply absolute right-[0px] top-[-4px] h-1 w-1 rounded-full bg-destructive;
|
|
}
|
|
|
|
.header-menu-bar {
|
|
@apply flex items-center rounded-md py-1 text-sm font-medium;
|
|
}
|
|
|
|
.header-menu-bar-display {
|
|
@apply flex max-w-[110px] cursor-pointer items-center gap-2 lg:max-w-[150px];
|
|
}
|
|
|
|
.header-menu-flow-name {
|
|
@apply flex-1 truncate;
|
|
}
|
|
|
|
.header-menu-options {
|
|
@apply mr-2 h-4 w-4;
|
|
}
|
|
|
|
.side-bar-arrangement {
|
|
@apply flex h-full w-[18rem] flex-col overflow-hidden border-r scrollbar-hide;
|
|
}
|
|
|
|
.side-bar-search-div-placement {
|
|
@apply relative mx-auto flex items-center py-3;
|
|
}
|
|
|
|
.side-bar-components-icon {
|
|
@apply h-6 w-4 text-ring;
|
|
}
|
|
|
|
.side-bar-components-text {
|
|
@apply w-full truncate pr-1 text-xs text-foreground;
|
|
}
|
|
|
|
.side-bar-components-div-form {
|
|
@apply flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring px-3 py-1 text-sm;
|
|
}
|
|
|
|
.side-bar-components-border {
|
|
@apply cursor-grab rounded-l-md border-l-8;
|
|
}
|
|
|
|
.side-bar-components-gap {
|
|
@apply flex flex-col gap-2 p-2;
|
|
}
|
|
|
|
.side-bar-components-div-arrangement {
|
|
@apply w-full overflow-auto pb-10 scrollbar-hide;
|
|
}
|
|
|
|
.side-bar-button-size {
|
|
@apply h-5 w-5;
|
|
}
|
|
|
|
.side-bar-button-size:hover {
|
|
@apply hover:text-accent-foreground;
|
|
}
|
|
|
|
.side-bar-buttons-arrangement {
|
|
@apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2;
|
|
}
|
|
|
|
.side-bar-button {
|
|
@apply flex w-full;
|
|
}
|
|
|
|
.components-disclosure-arrangement {
|
|
@apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-primary-foreground px-3 py-2;
|
|
}
|
|
|
|
.components-disclosure-title {
|
|
@apply flex items-center text-sm text-primary;
|
|
}
|
|
|
|
.toolbar-wrapper {
|
|
@apply flex h-10 items-center gap-1 rounded-xl border border-border bg-background p-1 shadow-sm;
|
|
}
|
|
|
|
.playground-btn-flow-toolbar {
|
|
@apply relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-normal transition-all duration-500 ease-in-out;
|
|
}
|
|
|
|
.input-search {
|
|
@apply primary-input mx-2 pr-7;
|
|
}
|
|
|
|
/* GitHub Star Button */
|
|
.github-star-link {
|
|
@apply inline-flex h-8 items-center rounded-md text-sm font-medium text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
|
|
}
|
|
|
|
.github-star-content {
|
|
@apply flex items-center px-2 pr-1;
|
|
}
|
|
|
|
.github-star-icon {
|
|
@apply h-4 w-4;
|
|
}
|
|
|
|
.github-star-text {
|
|
@apply ml-1;
|
|
}
|
|
|
|
.github-star-count-section {
|
|
@apply border-l bg-muted/80 px-2 py-1;
|
|
}
|
|
|
|
.github-star-display {
|
|
@apply flex items-center gap-1;
|
|
}
|
|
|
|
.github-star-count-icon {
|
|
@apply h-3 w-3 fill-current;
|
|
}
|
|
|
|
.github-star-count {
|
|
@apply text-xs font-medium text-foreground;
|
|
}
|
|
|
|
.github-star-loading {
|
|
@apply flex items-center justify-center;
|
|
}
|
|
|
|
.github-star-skeleton {
|
|
@apply h-3 w-8 animate-pulse bg-muted-foreground/20 rounded;
|
|
}
|
|
|
|
.github-star-error {
|
|
@apply text-xs text-muted-foreground;
|
|
}
|
|
|
|
/* Discord Link */
|
|
.discord-link {
|
|
@apply inline-flex h-8 items-center rounded-md text-sm font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
|
|
background-color: #5865f2;
|
|
border-color: #5865f2;
|
|
color: white;
|
|
}
|
|
|
|
.discord-link:hover {
|
|
@apply opacity-90;
|
|
}
|
|
|
|
.discord-content {
|
|
@apply flex items-center px-2 pr-1;
|
|
}
|
|
|
|
.discord-icon {
|
|
@apply flex items-center justify-center;
|
|
}
|
|
|
|
.discord-text {
|
|
@apply ml-1;
|
|
}
|
|
|
|
.discord-member-section {
|
|
@apply border-l border-white/20 bg-black/10 px-2 py-1;
|
|
}
|
|
|
|
.discord-member-display {
|
|
@apply flex items-center gap-1;
|
|
}
|
|
|
|
.discord-member-icon {
|
|
@apply h-3 w-3;
|
|
}
|
|
|
|
.discord-member-count {
|
|
@apply text-xs font-medium;
|
|
}
|
|
|
|
.discord-loading {
|
|
@apply flex items-center justify-center;
|
|
}
|
|
|
|
.discord-skeleton {
|
|
@apply h-3 w-8 animate-pulse bg-white/20 rounded;
|
|
}
|
|
|
|
.discord-error {
|
|
@apply text-xs opacity-70;
|
|
}
|
|
}
|