378 lines
9.8 KiB
CSS
378 lines
9.8 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: inset 1px 0px 3px -1px rgba(255, 255, 255, 0.2),
|
|
inset -1px 0px 3px 1px rgba(0, 0, 0, 0.15),
|
|
0px 0px 2px 1px #32ff6f67;
|
|
}
|
|
|
|
50% {
|
|
box-shadow: inset -1px 0px 3px 1px rgba(255, 255, 255, 0.2),
|
|
inset 1px 0px 3px -1px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: inset 1px 0px 3px -1px rgba(255, 255, 255, 0.2),
|
|
inset -1px 0px 3px 1px rgba(0, 0, 0, 0.15),
|
|
0px 0px 2px 1px #32ff6f67;
|
|
}
|
|
}
|
|
|
|
@keyframes blinkLightYellow {
|
|
|
|
0% {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #ffef3c6c;
|
|
}
|
|
|
|
50% {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #ffef3c6c;
|
|
}
|
|
}
|
|
|
|
@keyframes blinkLightBlue {
|
|
|
|
0% {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #39a2f362;
|
|
}
|
|
|
|
50% {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #39a2f362;
|
|
}
|
|
}
|
|
|
|
@keyframes blinkLightRed {
|
|
|
|
0% {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #ff2d5e63;
|
|
}
|
|
|
|
50% {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #ff2d5e63;
|
|
}
|
|
}
|
|
|
|
.blinkLightBlue,
|
|
.blinkLightGreen,
|
|
.blinkLightRed,
|
|
.blinkLightYellow {
|
|
animation-duration : 5s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
border : solid 1px transparent;
|
|
}
|
|
|
|
.blinkLightBlue {
|
|
animation-name: blinkLightBlue;
|
|
box-shadow : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #39a2f32d;
|
|
border: solid 1px #39a2f362;
|
|
}
|
|
|
|
.blinkLightGreen {
|
|
animation-name: blinkLightGreen;
|
|
box-shadow : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #a5ffc075;
|
|
border: solid 1px rgba(187, 248, 185, 0.31);
|
|
}
|
|
|
|
.blinkLightRed {
|
|
animation-name: blinkLightRed;
|
|
box-shadow : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #f63d6875;
|
|
border: solid 1px #e4547656;
|
|
}
|
|
|
|
.blinkLightYellow {
|
|
animation-name: blinkLightYellow;
|
|
box-shadow : inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15),
|
|
0px 0px 2px 1px #f7f3c275;
|
|
border: solid 1px #e4e25456;
|
|
}
|
|
|
|
.blinkLightActive {
|
|
animation: none !important;
|
|
}
|
|
|
|
.blinkLightEmpty {
|
|
box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.20),
|
|
inset -1px 0px 3px 0px rgba(78, 78, 78, 0.15);
|
|
animation : none !important;
|
|
border : none !important;
|
|
background-color: var(--Neutrals-NeutralSlate400)
|
|
}
|
|
|
|
:root {
|
|
|
|
|
|
--background-primary : #FFFFFF;
|
|
--background-secondary: #FDFDFD;
|
|
--background-tertiary : #FAFAFA;
|
|
|
|
--text-primary : #0A0D12;
|
|
--text-secondary: #717680;
|
|
--text-tertiary : #A4A7AE;
|
|
|
|
--accent : #5E48FC;
|
|
--accent-hover: #4C3CF0;
|
|
--accent-text : #FFFFFF;
|
|
|
|
--border-color: #E9EAEB;
|
|
--border-light: #F5F5F5;
|
|
|
|
--sidebar-bg : #FDFDFD;
|
|
--sidebar-text : #717680;
|
|
--sidebar-active-bg : #5E48FC;
|
|
--sidebar-active-text: #FFFFFF;
|
|
|
|
--input-bg : #F5F5F5;
|
|
--input-border : #E9EAEB;
|
|
--input-placeholder: #717680;
|
|
|
|
--button-secondary-bg : #F5F5F5;
|
|
--button-secondary-hover: #E9EAEB;
|
|
|
|
--color-red : #FB3748;
|
|
--color-green : #1FC16B;
|
|
--color-orange : #5E48FC;
|
|
--color-light-orange: #F38744;
|
|
--color-yellow : #FEEE95;
|
|
|
|
--Neutrals-NeutralState950: #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;
|
|
|
|
--neutral-100: #A4A7AE;
|
|
--neutral-200: #D5D7DA;
|
|
--neutral-300: #E9EAEB;
|
|
--neutral-400: #F5F5F5;
|
|
--neutral-500: #FAFAFA;
|
|
--neutral-600: #FDFDFD;
|
|
--neutral-700: #FEFEFE;
|
|
|
|
--Brand-Orange: #3399FF;
|
|
|
|
--Other-Red : #FB3748;
|
|
--Other-Green: #1FC16B;
|
|
--Other-White: #FFFFFF;
|
|
|
|
--button-bg-primary : #5E48FC;
|
|
--button-border-primary: #7B64FF;
|
|
|
|
--white: #FFFFFF;
|
|
}
|
|
|
|
.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;
|
|
/* Dark 3 */
|
|
--status-red : #F63D68;
|
|
/* Other Red */
|
|
--status-green : #3CCB7F;
|
|
/* Other Green */
|
|
--status-orange : #FF4405;
|
|
/* Other Orange */
|
|
--status-yellow : #FEEE95;
|
|
/* Other Yellow */
|
|
--neutral-200 : #717670;
|
|
--neutral-300 : #535862;
|
|
--neutral-400 : #414651;
|
|
--neutral-500 : #252B37;
|
|
--neutral-600 : #181D27;
|
|
--neutral-700 : #0A0D12;
|
|
|
|
--Neutrals-NeutralState950: #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;
|
|
|
|
}
|
|
|
|
* {
|
|
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);
|
|
} |