Ubuntu
494 lines
11 KiB
CSS
494 lines
11 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@theme inline {
|
|
--font-head: var(--font-head);
|
|
--font-sans: var(--font-sans);
|
|
--radius: var(--radius);
|
|
--shadow-xs: 1px 1px 0 0 var(--border);
|
|
--shadow-sm: 2px 2px 0 0 var(--border);
|
|
--shadow: 3px 3px 0 0 var(--border);
|
|
--shadow-md: 4px 4px 0 0 var(--border);
|
|
--shadow-lg: 6px 6px 0 0 var(--border);
|
|
--shadow-xl: 10px 10px 0 1px var(--border);
|
|
--shadow-2xl: 16px 16px 0 1px var(--border);
|
|
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-primary-hover: var(--primary-hover);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--background-image: var(--background-image);
|
|
--chart-1: var(--chart-1);
|
|
--chart-2: var(--chart-2);
|
|
--chart-3: var(--chart-3);
|
|
--chart-4: var(--chart-4);
|
|
--chart-5: var(--chart-5);
|
|
}
|
|
|
|
:root {
|
|
--radius: 0;
|
|
--background: #fff;
|
|
--foreground: #000;
|
|
--card: #fff;
|
|
--card-foreground: #000;
|
|
--primary: #ffdb33;
|
|
--primary-hover: #ffcc00;
|
|
--primary-foreground: #000;
|
|
--secondary: #000;
|
|
--secondary-foreground: #fff;
|
|
--muted: #d5d5d5;
|
|
--muted-foreground: #5a5a5a;
|
|
--accent: #fae583;
|
|
--accent-foreground: #000;
|
|
--destructive: #e63946;
|
|
--destructive-foreground: #fff;
|
|
--border: #000;
|
|
--background-image: url("/images/banner_void_2.svg");
|
|
--chart-1: #c4a1ff;
|
|
--chart-2: #01ffcc;
|
|
--chart-3: #e7f192;
|
|
--chart-4: #000;
|
|
--chart-5: #ff30cd;
|
|
}
|
|
|
|
.dark {
|
|
--background: #1a1a1a;
|
|
--foreground: #f5f5f5;
|
|
--card: #242424;
|
|
--card-foreground: #f5f5f5;
|
|
--primary: #ffdb33;
|
|
--primary-hover: #ffcc00;
|
|
--primary-foreground: #000;
|
|
--secondary: #3a3a3a;
|
|
--secondary-foreground: #f5f5f5;
|
|
--muted: #3f3f46;
|
|
--muted-foreground: #a0a0a0;
|
|
--accent: #fae583;
|
|
--accent-foreground: #000;
|
|
--destructive: #e63946;
|
|
--destructive-foreground: #fff;
|
|
--border: #5c5c5c;
|
|
--background-image: url("/images/bg_void_3.svg");
|
|
--chart-1: #ffdb33;
|
|
--chart-2: #000;
|
|
--chart-3: #aeaeae;
|
|
--chart-4: #fae583;
|
|
--chart-5: #e63946;
|
|
}
|
|
|
|
.with-radius {
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.theme-purple {
|
|
--background: #f5f5f5;
|
|
--foreground: #1a1a1a;
|
|
--card: #FFFFFF;
|
|
--card-foreground: #f5f5f5;
|
|
--primary: #5F4FE6;
|
|
--primary-hover: #4938C2;
|
|
--primary-foreground: #fff;
|
|
--secondary: #3a3a3a;
|
|
--secondary-foreground: #f5f5f5;
|
|
--muted: #CFCCEA;
|
|
--muted-foreground: #5B5686;
|
|
--accent: #FED13B;
|
|
--accent-foreground: #000000;
|
|
--destructive: #EF4444;
|
|
--destructive-foreground: #fff;
|
|
--border: #3a3a3a;
|
|
--background-image: url("/images/bg_void_3.svg");
|
|
--chart-1: #ffdb33;
|
|
--chart-2: #000;
|
|
--chart-3: #aeaeae;
|
|
--chart-4: #fae583;
|
|
--chart-5: #e63946;
|
|
}
|
|
|
|
.dark .theme-purple {
|
|
--background: #0f0f12;
|
|
--foreground: #f5f5f5;
|
|
--card: #1a1a1d;
|
|
--card-foreground: #eaeaea;
|
|
--primary: #7b6df5;
|
|
--primary-hover: #5F4FE6;
|
|
--primary-foreground: #fff;
|
|
--secondary: #2a2a2e;
|
|
--secondary-foreground: #eaeaea;
|
|
--muted: #3d395a;
|
|
--muted-foreground: #a49fce;
|
|
--accent: #FED13B;
|
|
--accent-foreground: #000;
|
|
--destructive: #EF4444;
|
|
--destructive-foreground: #fff;
|
|
--border: #2e2e32;
|
|
}
|
|
|
|
.theme-lime {
|
|
--background: #FFFFFF;
|
|
--foreground: #000000;
|
|
--card: #FFFFFF;
|
|
--card-foreground: #000000;
|
|
--input: #FFFFFF;
|
|
--border: #000000;
|
|
--ring: #AAFC3D;
|
|
--primary: #AAFC3D;
|
|
--primary-hover: #97f819;
|
|
--primary-foreground: #000000;
|
|
--secondary: #000000;
|
|
--secondary-foreground: #FFFFFF;
|
|
--muted: #F3F3F3;
|
|
--muted-foreground: #444444;
|
|
--accent: #FF4FD8;
|
|
--accent-foreground: #000000;
|
|
--destructive: #FF0033;
|
|
--destructive-foreground: #FFFFFF;
|
|
}
|
|
|
|
|
|
.dark .theme-lime {
|
|
--background: #0f0f0f;
|
|
--foreground: #f5f5f5;
|
|
--card: #1a1a1a;
|
|
--card-foreground: #FFFFFF;
|
|
--input: #2a2a2a;
|
|
--border: #333333;
|
|
--ring: #AAFC3D;
|
|
--primary: #AAFC3D;
|
|
--primary-hover: #97f819;
|
|
--primary-foreground: #000000;
|
|
--secondary: #FFFFFF;
|
|
--secondary-foreground: #000000;
|
|
--muted: #2a2a2a;
|
|
--muted-foreground: #aaaaaa;
|
|
--accent: #FF4FD8;
|
|
--accent-foreground: #000000;
|
|
--destructive: #FF0033;
|
|
--destructive-foreground: #FFFFFF;
|
|
}
|
|
|
|
.theme-red {
|
|
--background: #FCFFE7;
|
|
--foreground: #000000;
|
|
--muted: #EFD0D5;
|
|
--muted-foreground: #A42439;
|
|
--card: #FFFFFF;
|
|
--card-foreground: #000000;
|
|
--popover: #FFFFFF;
|
|
--popover-foreground: #000000;
|
|
--border: #000000;
|
|
--input: #FFFFFF;
|
|
--primary: #EA435F;
|
|
--primary-hover: #D00000;
|
|
--primary-foreground: #FFFFFF;
|
|
--secondary: #FFDA5C;
|
|
--secondary-foreground: #000000;
|
|
--accent: #CEEBFC;
|
|
--accent-foreground: #000000;
|
|
--destructive: #D00000;
|
|
--destructive-foreground: #FFFFFF;
|
|
--ring: #000000;
|
|
}
|
|
|
|
.dark .theme-red {
|
|
--background: #0f0f0f;
|
|
--foreground: #f5f5f5;
|
|
--muted: #3a1f24;
|
|
--muted-foreground: #f2a7b2;
|
|
--card: #1a1a1a;
|
|
--card-foreground: #ffffff;
|
|
--popover: #1a1a1a;
|
|
--popover-foreground: #ffffff;
|
|
--border: #2a2a2a;
|
|
--input: #2a2a2a;
|
|
--primary: #EA435F;
|
|
--primary-hover: #D00000;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #FFDA5C;
|
|
--secondary-foreground: #000000;
|
|
--accent: #2a3b45;
|
|
--accent-foreground: #CEEBFC;
|
|
--destructive: #D00000;
|
|
--destructive-foreground: #ffffff;
|
|
--ring: #EA435F;
|
|
}
|
|
|
|
.theme-lavender {
|
|
--background: #F9F5F2;
|
|
--foreground: #000000;
|
|
--muted: #EDE3FF;
|
|
--muted-foreground: #5B3B98;
|
|
--card: #FFFFFF;
|
|
--card-foreground: #000000;
|
|
--popover: #FFFFFF;
|
|
--popover-foreground: #000000;
|
|
--border: #000000;
|
|
--input: #FFFFFF;
|
|
--primary: #C4A1FF;
|
|
--primary-hover: #9678FF;
|
|
--primary-foreground: #000000;
|
|
--secondary: #E7F193;
|
|
--secondary-foreground: #000000;
|
|
--accent: #FE91E9;
|
|
--accent-foreground: #000000;
|
|
--destructive: #FE3B3B;
|
|
--destructive-foreground: #FFFFFF;
|
|
--ring: #000000;
|
|
}
|
|
|
|
.dark .theme-lavender {
|
|
--background: #121014;
|
|
--foreground: #f5f5f5;
|
|
--muted: #2d2440;
|
|
--muted-foreground: #c7b6f3;
|
|
--card: #1a1820;
|
|
--card-foreground: #ffffff;
|
|
--popover: #1a1820;
|
|
--popover-foreground: #ffffff;
|
|
--border: #2a2a2e;
|
|
--input: #2a2a2e;
|
|
--primary: #C4A1FF;
|
|
--primary-hover: #9678FF;
|
|
--primary-foreground: #000000;
|
|
--secondary: #E7F193;
|
|
--secondary-foreground: #000000;
|
|
--accent: #FE91E9;
|
|
--accent-foreground: #000000;
|
|
--destructive: #FE3B3B;
|
|
--destructive-foreground: #ffffff;
|
|
--ring: #C4A1FF;
|
|
}
|
|
|
|
.theme-orange {
|
|
--background: #FFFFFF;
|
|
--foreground: #000000;
|
|
--muted: #FFE1C7;
|
|
--muted-foreground: #8C3D00;
|
|
--card: #FFFFFF;
|
|
--card-foreground: #000000;
|
|
--popover: #FFFFFF;
|
|
--popover-foreground: #000000;
|
|
--border: #000000;
|
|
--input: #FFFFFF;
|
|
--primary: #F07200;
|
|
--primary-hover: #ff8011;
|
|
--primary-foreground: #FDEAD9;
|
|
--secondary: #EF8C27;
|
|
--secondary-foreground: #000000;
|
|
--accent: #FF6B6B;
|
|
--accent-foreground: #000000;
|
|
--destructive: #FE3B3B;
|
|
--destructive-foreground: #FFFFFF;
|
|
--ring: #000000;
|
|
}
|
|
|
|
.dark .theme-orange {
|
|
--background: #12100e;
|
|
--foreground: #f5f5f5;
|
|
--muted: #3a2617;
|
|
--muted-foreground: #ffb679;
|
|
--card: #1a1a1a;
|
|
--card-foreground: #ffffff;
|
|
--popover: #1a1a1a;
|
|
--popover-foreground: #ffffff;
|
|
--border: #2a2a2a;
|
|
--input: #2a2a2a;
|
|
--primary: #F07200;
|
|
--primary-hover: #ff8011;
|
|
--primary-foreground: #FDEAD9;
|
|
--secondary: #EF8C27;
|
|
--secondary-foreground: #000000;
|
|
--accent: #FF6B6B;
|
|
--accent-foreground: #000000;
|
|
--destructive: #FE3B3B;
|
|
--destructive-foreground: #ffffff;
|
|
--ring: #F07200;
|
|
}
|
|
|
|
.theme-green {
|
|
--background: #FFFFFF;
|
|
--foreground: #000000;
|
|
--muted: #CBE9D8;
|
|
--muted-foreground: #1F7751;
|
|
--card: #F9F5F2;
|
|
--card-foreground: #000000;
|
|
--popover: #FFFFFF;
|
|
--popover-foreground: #000000;
|
|
--border: #000000;
|
|
--input: #FFFFFF;
|
|
--primary: #599D77;
|
|
--primary-hover: #39654c;
|
|
--primary-foreground: #FFFFFF;
|
|
--secondary: #A3D9B1;
|
|
--secondary-foreground: #000000;
|
|
--accent: #FFE75A;
|
|
--accent-foreground: #000000;
|
|
--destructive: #F05D5D;
|
|
--destructive-foreground: #FFFFFF;
|
|
--ring: #000000;
|
|
}
|
|
|
|
.dark .theme-green {
|
|
--background: #0f1210;
|
|
--foreground: #f5f5f5;
|
|
--muted: #1f3a2d;
|
|
--muted-foreground: #9cd9b8;
|
|
--card: #181c19;
|
|
--card-foreground: #ffffff;
|
|
--popover: #181c19;
|
|
--popover-foreground: #ffffff;
|
|
--border: #2a2e2b;
|
|
--input: #2a2e2b;
|
|
--primary: #599D77;
|
|
--primary-hover: #39654c;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #3a6f52;
|
|
--secondary-foreground: #ffffff;
|
|
--accent: #FFE75A;
|
|
--accent-foreground: #000000;
|
|
--destructive: #F05D5D;
|
|
--destructive-foreground: #ffffff;
|
|
--ring: #599D77;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
|
|
/* Firefox scrollbar */
|
|
html {
|
|
scrollbar-width: auto;
|
|
scrollbar-color: var(--muted) var(--foreground);
|
|
}
|
|
|
|
.bg-image {
|
|
background-image: var(--background-image);
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.text-outlined {
|
|
letter-spacing: 2px;
|
|
text-shadow:
|
|
0px 0px 0 var(--primary),
|
|
0px 0px 0 var(--primary),
|
|
4px 4px 0 var(--primary),
|
|
4px 4px 0 var(--primary);
|
|
}
|
|
|
|
/* Syntax Highlighting stuff */
|
|
|
|
pre code.hljs {
|
|
display: block;
|
|
overflow-x: auto;
|
|
padding: 1em;
|
|
}
|
|
|
|
code.hljs {
|
|
padding: 3px 5px;
|
|
}
|
|
|
|
.hljs {
|
|
background: #222;
|
|
color: #aaa;
|
|
}
|
|
|
|
.hljs-subst {
|
|
color: #aaa;
|
|
}
|
|
|
|
.hljs-section {
|
|
color: #fff;
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-quote,
|
|
.hljs-meta {
|
|
color: #444;
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-symbol,
|
|
.hljs-bullet,
|
|
.hljs-regexp {
|
|
color: #ffcc33;
|
|
}
|
|
|
|
.hljs-number,
|
|
.hljs-addition {
|
|
color: #00cc66;
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.hljs-literal,
|
|
.hljs-type,
|
|
.hljs-template-variable,
|
|
.hljs-attribute,
|
|
.hljs-link {
|
|
color: #32aaee;
|
|
}
|
|
|
|
.hljs-keyword,
|
|
.hljs-selector-tag,
|
|
.hljs-name,
|
|
.hljs-selector-id,
|
|
.hljs-selector-class {
|
|
color: #6644aa;
|
|
}
|
|
|
|
.hljs-title,
|
|
.hljs-variable,
|
|
.hljs-deletion,
|
|
.hljs-template-tag {
|
|
color: #bb1166;
|
|
}
|
|
|
|
.hljs-section,
|
|
.hljs-doctag,
|
|
.hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Custom scrollbar for sidebar */
|
|
.sidebar-scroll {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: transparent transparent;
|
|
transition: scrollbar-color 0.3s ease;
|
|
}
|
|
|
|
.sidebar-scroll:hover {
|
|
scrollbar-color: var(--color-primary) transparent;
|
|
}
|
|
|
|
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
.sidebar-scroll::-webkit-scrollbar {
|
|
width: 2px;
|
|
height: 2px;
|
|
}
|
|
|
|
.sidebar-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.sidebar-scroll::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
border-radius: 2px;
|
|
transition: background 0.3s ease;
|
|
} |