532 lines
13 KiB
CSS
532 lines
13 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Blinking cursor animation for chat input */
|
|
@keyframes blink {
|
|
|
|
0%,
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
51%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes blinkLightGreen {
|
|
|
|
0% {
|
|
box-shadow: 0px 0px 3px 0.5px #32ff6f67;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
box-shadow: revert;
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0px 0px 3px 0.5px #32ff6f67;
|
|
}
|
|
}
|
|
|
|
@keyframes blinkLightYellow {
|
|
|
|
0% {
|
|
box-shadow: 0px 0px 3px 0.5px #ffef3c6c;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
box-shadow: revert;
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0px 0px 3px 0.5px #ffef3c6c;
|
|
}
|
|
}
|
|
|
|
@keyframes blinkLightBlue {
|
|
|
|
0% {
|
|
box-shadow: 0px 0px 3px 0.5px #39a2f362;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
box-shadow: revert;
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0px 0px 3px 0.5px #39a2f362;
|
|
}
|
|
}
|
|
|
|
div:has(>button.bg-\[--Brand-Orange\]:disabled) {
|
|
background: transparent !important;
|
|
;
|
|
}
|
|
|
|
@keyframes blinkLightRed {
|
|
|
|
0% {
|
|
box-shadow: 0px 0px 3px 0.5px #ff2d5e63;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
box-shadow: revert;
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0px 0px 3px 0.5px #ff2d5e63;
|
|
}
|
|
}
|
|
|
|
div.bg-gradient-to-b {
|
|
background: var(--button-border-primary);
|
|
}
|
|
|
|
.blinkLightBlue,
|
|
.blinkLightGreen,
|
|
.blinkLightRed,
|
|
.blinkLightYellow {
|
|
animation-duration : 5s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.blinkLightBlue {
|
|
animation-name: blinkLightBlue;
|
|
box-shadow : 0px 0px 3px 0.5px #39a2f32d;
|
|
border : solid 1px #39a2f362;
|
|
}
|
|
|
|
.blinkLightGreen {
|
|
animation-name: blinkLightGreen;
|
|
box-shadow : 0px 0px 3px 0.5px #a5ffc075;
|
|
border : solid 1px rgba(187, 248, 185, 0.31);
|
|
}
|
|
|
|
.blinkLightRed {
|
|
animation-name: blinkLightRed;
|
|
box-shadow : 0px 0px 3px 0.5px #f63d6875;
|
|
border : solid 1px #e4547656;
|
|
}
|
|
|
|
.blinkLightYellow {
|
|
animation-name: blinkLightYellow;
|
|
box-shadow : 0px 0px 3px 0.5px #f7f3c275;
|
|
border : solid 1px #e4e25456;
|
|
}
|
|
|
|
.blinkLightActive {
|
|
animation: none !important;
|
|
}
|
|
|
|
.blinkLightEmpty {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.1),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.1);
|
|
animation : none !important;
|
|
border : none !important;
|
|
background-color: var(--Neutrals-NeutralSlate400)
|
|
}
|
|
|
|
div:has(>input[type="text"]:focus:not(.focus\:ring-2)):not(:has(>label)),
|
|
div:has(>input[type="email"]:focus):not(:has(>label)),
|
|
div:has(>input[type="password"]:focus):not(:has(>label)),
|
|
div:has(>textarea:focus) {
|
|
animation : blinkLightBlue 2s ease infinite;
|
|
box-shadow : 0px 0px 3px 0.5px #39a2f32d;
|
|
border : 1px solid;
|
|
mask-border-outset: 1px;
|
|
margin : -1px;
|
|
outline : none;
|
|
outline-offset : none;
|
|
}
|
|
|
|
div:has(>input[type="text"]:focus:not(.focus\:ring-2)):not(:has(>label))>input[type="text"]:focus,
|
|
div:has(>input[type="email"]:focus):not(:has(>label))>input[type="email"]:focus,
|
|
div:has(>input[type="password"]:focus):not(:has(>label))>input[type="password"]:focus {
|
|
outline: none;
|
|
border : none;
|
|
}
|
|
|
|
.Outline {
|
|
background: linear-gradient(180deg, #66B2FF 0%, #0073E5 100%);
|
|
}
|
|
|
|
:root {
|
|
--Brand-Orange: #3399FF;
|
|
|
|
--Neutrals-NeutralSlate950: #0A0D12;
|
|
--Neutrals-NeutralSlate900: #181D27;
|
|
--Neutrals-NeutralSlate800: #252B37;
|
|
--Neutrals-NeutralSlate700: #414651;
|
|
--Neutrals-NeutralSlate600: #535862;
|
|
--Neutrals-NeutralSlate500: #7A7680;
|
|
--Neutrals-NeutralSlate400: #A4A7AE;
|
|
--Neutrals-NeutralSlate300: #D5D7DA;
|
|
--Neutrals-NeutralSlate200: #E9EAEB;
|
|
--Neutrals-NeutralSlate100: #F5F5F5;
|
|
--Neutrals-NeutralSlate50 : #FAFAFA;
|
|
--Neutrals-NeutralSlate0 : #FDFDFD;
|
|
|
|
--background-primary : var(--Brand-Orange);
|
|
--background-secondary: var(--Neutrals-NeutralSlate0);
|
|
--background-tertiary : var(--Neutrals-NeutralSlate50);
|
|
|
|
--text-primary : var(--Neutrals-NeutralSlate950);
|
|
--text-secondary : #717680;
|
|
--text-tertiary : var(--Neutrals-NeutralSlate400);
|
|
--Light-Grays-l-gray08: #FFFFFF;
|
|
|
|
--accent : #5E48FC;
|
|
--accent-hover: #4C3CF0;
|
|
--accent-text : #FFFFFF;
|
|
|
|
--border-color: var(--Neutrals-NeutralSlate200);
|
|
--border-light: var(--Neutrals-NeutralSlate100);
|
|
|
|
--Text-White-00: var(--Neutrals-NeutralSlate200);
|
|
|
|
--Text-Gray-0 : var(--Neutrals-NeutralSlate200);
|
|
--Text-Gray-50 : var(--Neutrals-NeutralSlate50);
|
|
--Text-Gray-100: var(--Neutrals-NeutralSlate100);
|
|
--Text-Gray-200: var(--Neutrals-NeutralSlate200);
|
|
--Text-Gray-300: var(--Neutrals-NeutralSlate300);
|
|
--Text-Gray-400: var(--Neutrals-NeutralSlate400);
|
|
--Text-Gray-500: var(--Neutrals-NeutralSlate500);
|
|
--Text-Gray-600: var(--Neutrals-NeutralSlate600);
|
|
--Text-Gray-700: var(--Neutrals-NeutralSlate700);
|
|
--Text-Gray-800: var(--Neutrals-NeutralSlate800);
|
|
--Text-Gray-900: var(--Neutrals-NeutralSlate900);
|
|
--Text-Gray-950: var(--Neutrals-NeutralSlate950);
|
|
--Text-Dark-950: var(--Neutrals-NeutralSlate950);
|
|
|
|
--Outline-Outline-Gray-200: var(--Neutrals-NeutralSlate200);
|
|
--Button-Secondary : var(--Neutrals-NeutralSlate100);
|
|
--Main-BG-Gray-100 : var(--Neutrals-NeutralSlate100);
|
|
--red-200 : #FFC0C5;
|
|
|
|
--sidebar-bg : var(--Neutrals-NeutralSlate200);
|
|
--sidebar-text : #717680;
|
|
--sidebar-active-bg : #5E48FC;
|
|
--sidebar-active-text: #FFFFFF;
|
|
|
|
--input-bg : var(--Neutrals-NeutralSlate100);
|
|
--input-border : var(--Neutrals-NeutralSlate200);
|
|
--input-placeholder: #717680;
|
|
|
|
--button-secondary-bg : var(--Neutrals-NeutralSlate100);
|
|
--button-secondary-hover: var(--Neutrals-NeutralSlate200);
|
|
--button-bg-primary : var(--Brand-Orange);
|
|
--button-border-primary : linear-gradient(180deg, #66B2FF 0%, #0073E5 100%);
|
|
|
|
--color-red : #FB3748;
|
|
--color-green : #1FC16B;
|
|
--color-orange : #5E48FC;
|
|
--color-light-orange: #F38744;
|
|
--color-yellow : #FEEE95;
|
|
|
|
--Other-Red : #FB3748;
|
|
--Other-Green: #1FC16B;
|
|
--Other-White: #FFFFFF;
|
|
|
|
|
|
--white: #FFFFFF;
|
|
|
|
div:has(>input[type="text"]:focus):not(:has(>label)),
|
|
div:has(>input[type="email"]:focus):not(:has(>label)),
|
|
div:has(>input[type="password"]:focus):not(:has(>label)),
|
|
div:has(>textarea:focus) {
|
|
border-color: color-mix(in srgb, var(--Brand-Orange), white 20%);
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
/* Dark theme variables - using new Figma color palette */
|
|
--background-primary : #0A0D12;
|
|
/* Dark 7 */
|
|
--background-secondary : #181D27;
|
|
/* Dark 6 */
|
|
--background-tertiary : #252B37;
|
|
/* Dark 5 */
|
|
--text-primary : #FDFDFD;
|
|
/* Gray 6 */
|
|
--text-secondary : #D5D7DA;
|
|
/* Gray 2 */
|
|
--text-tertiary : #A4A7AE;
|
|
/* Gray 1 */
|
|
--accent : #5E48FC;
|
|
/* Brand Main */
|
|
--accent-hover : #6B56FF;
|
|
/* Slightly lighter brand */
|
|
--accent-text : #FFFFFF;
|
|
/* Base White */
|
|
--border-color : #535862;
|
|
/* Dark 3 */
|
|
--border-light : #414651;
|
|
/* Dark 4 */
|
|
--sidebar-bg : #181D27;
|
|
/* Dark 6 */
|
|
--sidebar-text : #D5D7DA;
|
|
/* Gray 2 */
|
|
--sidebar-active-bg : #5E48FC;
|
|
/* Brand Main */
|
|
--sidebar-active-text : #FFFFFF;
|
|
/* Base White */
|
|
--input-bg : #252B37;
|
|
/* Dark 5 */
|
|
--input-border : #414651;
|
|
/* Dark 4 */
|
|
--input-placeholder : #717680;
|
|
/* Dark 2 */
|
|
--button-secondary-bg : #414651;
|
|
/* Dark 4 */
|
|
--button-secondary-hover: #535862;
|
|
|
|
--Neutrals-NeutralSlate950: #FDFDFD;
|
|
--Neutrals-NeutralSlate900: #FAFAFA;
|
|
--Neutrals-NeutralSlate800: #F5F5F5;
|
|
--Neutrals-NeutralSlate700: #E9EAEB;
|
|
--Neutrals-NeutralSlate600: #D5D7DA;
|
|
--Neutrals-NeutralSlate500: #A4A7AE;
|
|
--Neutrals-NeutralSlate400: #7A7680;
|
|
--Neutrals-NeutralSlate300: #535862;
|
|
--Neutrals-NeutralSlate200: #414651;
|
|
--Neutrals-NeutralSlate100: #252B37;
|
|
--Neutrals-NeutralSlate50 : #181D27;
|
|
--Neutrals-NeutralSlate0 : #0A0D12;
|
|
|
|
--Light-Grays-l-gray08: #0F0F0F;
|
|
|
|
div:has(>input[type="text"]:focus):not(:has(>label)),
|
|
div:has(>input[type="email"]:focus):not(:has(>label)),
|
|
div:has(>input[type="password"]:focus):not(:has(>label)),
|
|
div:has(>textarea:focus) {
|
|
border-color: color-mix(in srgb, var(--Brand-Orange), black 20%);
|
|
}
|
|
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Neue Montreal';
|
|
src : url('/fonts/NeueMontreal-Regular.woff2') format('woff2'),
|
|
url('/fonts/NeueMontreal-Regular.woff') format('woff');
|
|
font-weight : normal;
|
|
font-style : normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
|
|
|
|
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 : var(--background-primary);
|
|
color : var(--text-primary);
|
|
}
|
|
|
|
#root {
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Custom slider styling */
|
|
.slider {
|
|
-webkit-appearance: none;
|
|
appearance : none;
|
|
background : var(--border-color);
|
|
outline : none;
|
|
border-radius : 8px;
|
|
transition : all 0.2s ease;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance : none;
|
|
width : 20px;
|
|
height : 20px;
|
|
border-radius : 50%;
|
|
background : var(--accent);
|
|
cursor : pointer;
|
|
border : 2px solid white;
|
|
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
transition : all 0.2s ease;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb:hover {
|
|
background: var(--accent-hover);
|
|
transform : scale(1.1);
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
width : 20px;
|
|
height : 20px;
|
|
border-radius: 50%;
|
|
background : var(--accent);
|
|
cursor : pointer;
|
|
border : 2px solid white;
|
|
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
transition : all 0.2s ease;
|
|
}
|
|
|
|
.slider::-moz-range-thumb:hover {
|
|
background: var(--accent-hover);
|
|
transform : scale(1.1);
|
|
}
|
|
|
|
/* Radio button styling */
|
|
input[type="radio"] {
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
/* Focus states */
|
|
.slider:focus {
|
|
box-shadow: 0 0 0 3px rgba(94, 72, 252, 0.3);
|
|
}
|
|
|
|
input[type="radio"]:focus {
|
|
box-shadow: 0 0 0 3px rgba(94, 72, 252, 0.3);
|
|
}
|
|
|
|
/* Markdown Content Styling */
|
|
.markdown-content {
|
|
line-height: 1.6;
|
|
color : var(--Neutrals-NeutralSlate950);
|
|
}
|
|
|
|
.markdown-content h1,
|
|
.markdown-content h2,
|
|
.markdown-content h3,
|
|
.markdown-content h4,
|
|
.markdown-content h5,
|
|
.markdown-content h6 {
|
|
font-weight : 600;
|
|
line-height : 1.3;
|
|
margin-top : 1em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.markdown-content h1:first-child,
|
|
.markdown-content h2:first-child,
|
|
.markdown-content h3:first-child,
|
|
.markdown-content h4:first-child,
|
|
.markdown-content h5:first-child,
|
|
.markdown-content h6:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-content p {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.markdown-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-content ul,
|
|
.markdown-content ol {
|
|
margin-bottom: 1em;
|
|
padding-left : 1.5em;
|
|
}
|
|
|
|
.markdown-content li {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.markdown-content li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-content strong {
|
|
font-weight: 600;
|
|
color : var(--Neutrals-NeutralSlate950);
|
|
}
|
|
|
|
.markdown-content code {
|
|
font-family : 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
font-size : 0.875em;
|
|
padding : 0.2em 0.4em;
|
|
background-color: var(--Neutrals-NeutralSlate100);
|
|
border-radius : 4px;
|
|
color : var(--Neutrals-NeutralSlate800);
|
|
}
|
|
|
|
.markdown-content pre {
|
|
font-family : 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
font-size : 0.875em;
|
|
line-height : 1.5;
|
|
background-color: var(--Neutrals-NeutralSlate100);
|
|
border-radius : 8px;
|
|
padding : 1rem;
|
|
overflow-x : auto;
|
|
margin-bottom : 1em;
|
|
}
|
|
|
|
.markdown-content pre code {
|
|
background : none;
|
|
padding : 0;
|
|
border-radius: 0;
|
|
color : inherit;
|
|
}
|
|
|
|
.markdown-content blockquote {
|
|
border-left : 4px solid var(--Neutrals-NeutralSlate300);
|
|
padding-left: 1rem;
|
|
margin : 1em 0;
|
|
color : var(--Neutrals-NeutralSlate700);
|
|
font-style : italic;
|
|
}
|
|
|
|
.markdown-content a {
|
|
color : var(--Brand-Orange);
|
|
text-decoration: underline;
|
|
transition : color 0.2s;
|
|
}
|
|
|
|
.markdown-content a:hover {
|
|
color : var(--Brand-Orange);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.markdown-content table {
|
|
width : 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom : 1em;
|
|
border : 1px solid var(--Neutrals-NeutralSlate200);
|
|
border-radius : 8px;
|
|
overflow : hidden;
|
|
}
|
|
|
|
.markdown-content th,
|
|
.markdown-content td {
|
|
padding : 0.75rem 1rem;
|
|
text-align : left;
|
|
border-bottom: 1px solid var(--Neutrals-NeutralSlate200);
|
|
}
|
|
|
|
.markdown-content th {
|
|
background-color: var(--Neutrals-NeutralSlate100);
|
|
font-weight : 600;
|
|
color : var(--Neutrals-NeutralSlate950);
|
|
}
|
|
|
|
.markdown-content tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.markdown-content hr {
|
|
border : none;
|
|
border-top: 1px solid var(--Neutrals-NeutralSlate200);
|
|
margin : 1.5em 0;
|
|
}
|