320 lines
8 KiB
CSS
320 lines
8 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%;
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 240 6% 90%;
|
|
--input: 240 6% 90%;
|
|
--ring: 0 0% 0%;
|
|
--placeholder-foreground: 240 5% 65%;
|
|
|
|
/* Status Colors */
|
|
--status-red: #ef4444;
|
|
--status-yellow: #eab308;
|
|
--status-green: #4ade80;
|
|
--status-blue: #2563eb;
|
|
|
|
/* Component Colors */
|
|
--component-icon: #d8598a;
|
|
--flow-icon: #2f67d0;
|
|
|
|
/* Data Type Colors */
|
|
--datatype-blue: 221.2 83.2% 53.3%;
|
|
--datatype-blue-foreground: 214.3 94.6% 92.7%;
|
|
--datatype-yellow: 40.6 96.1% 40.4%;
|
|
--datatype-yellow-foreground: 54.9 96.7% 88%;
|
|
--datatype-red: 0 72.2% 50.6%;
|
|
--datatype-red-foreground: 0 93.3% 94.1%;
|
|
--datatype-emerald: 161.4 93.5% 30.4%;
|
|
--datatype-emerald-foreground: 149.3 80.4% 90%;
|
|
--datatype-violet: 262.1 83.3% 57.8%;
|
|
--datatype-violet-foreground: 251.4 91.3% 95.5%;
|
|
|
|
/* Warning */
|
|
--warning: 48 96.6% 76.7%;
|
|
--warning-foreground: 240 6% 10%;
|
|
|
|
--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%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 240 5% 26%;
|
|
--input: 240 5% 34%;
|
|
--ring: 0 0% 100%;
|
|
--placeholder-foreground: 240 4% 46%;
|
|
|
|
/* Dark mode data type colors */
|
|
--datatype-blue: 211.7 96.4% 78.4%;
|
|
--datatype-blue-foreground: 221.2 83.2% 53.3%;
|
|
--datatype-yellow: 50.4 97.8% 63.5%;
|
|
--datatype-yellow-foreground: 40.6 96.1% 40.4%;
|
|
--datatype-red: 0 93.5% 81.8%;
|
|
--datatype-red-foreground: 0 72.2% 50.6%;
|
|
--datatype-emerald: 156.2 71.6% 66.9%;
|
|
--datatype-emerald-foreground: 161.4 93.5% 30.4%;
|
|
--datatype-violet: 252.5 94.7% 85.1%;
|
|
--datatype-violet-foreground: 262.1 83.3% 57.8%;
|
|
|
|
--warning: 45.9 96.7% 64.5%;
|
|
--warning-foreground: 240 6% 10%;
|
|
}
|
|
|
|
* {
|
|
@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-[14.5rem] 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;
|
|
}
|
|
}
|