commit before mass find + replace
This commit is contained in:
481
index.css
481
index.css
@@ -1,241 +1,242 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Blinking cursor animation for chat input */
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
51%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
: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;
|
||||
|
||||
--button-bg-primary : #5E48FC;
|
||||
--button-border-primary: #7B64FF;
|
||||
}
|
||||
|
||||
.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);
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Blinking cursor animation for chat input */
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
51%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
Reference in New Issue
Block a user