update 9/20/25
This commit is contained in:
333
index.css
333
index.css
@@ -17,83 +17,76 @@
|
||||
@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;
|
||||
box-shadow: 0px 0px 3px 0.5px #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);
|
||||
25%,
|
||||
75% {
|
||||
box-shadow: revert;
|
||||
}
|
||||
|
||||
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;
|
||||
box-shadow: 0px 0px 3px 0.5px #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;
|
||||
box-shadow: 0px 0px 3px 0.5px #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);
|
||||
25%,
|
||||
75% {
|
||||
box-shadow: revert;
|
||||
}
|
||||
|
||||
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;
|
||||
box-shadow: 0px 0px 3px 0.5px #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;
|
||||
box-shadow: 0px 0px 3px 0.5px #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);
|
||||
25%,
|
||||
75% {
|
||||
box-shadow: revert;
|
||||
}
|
||||
|
||||
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;
|
||||
box-shadow: 0px 0px 3px 0.5px #39a2f362;
|
||||
}
|
||||
}
|
||||
|
||||
div:has(>button.bg-\[--Brand-Orange\]:disabled) {
|
||||
background: transparent !important;
|
||||
;
|
||||
}
|
||||
|
||||
@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;
|
||||
box-shadow: 0px 0px 3px 0.5px #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);
|
||||
25%,
|
||||
75% {
|
||||
box-shadow: revert;
|
||||
}
|
||||
|
||||
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;
|
||||
box-shadow: 0px 0px 3px 0.5px #ff2d5e63;
|
||||
}
|
||||
}
|
||||
|
||||
div.bg-gradient-to-b {
|
||||
background: var(--button-border-primary);
|
||||
}
|
||||
|
||||
.blinkLightBlue,
|
||||
.blinkLightGreen,
|
||||
.blinkLightRed,
|
||||
@@ -101,39 +94,30 @@
|
||||
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;
|
||||
box-shadow : 0px 0px 3px 0.5px #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);
|
||||
box-shadow : 0px 0px 3px 0.5px #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;
|
||||
box-shadow : 0px 0px 3px 0.5px #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;
|
||||
box-shadow : 0px 0px 3px 0.5px #f7f3c275;
|
||||
border : solid 1px #e4e25456;
|
||||
}
|
||||
|
||||
.blinkLightActive {
|
||||
@@ -141,50 +125,41 @@
|
||||
}
|
||||
|
||||
.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);
|
||||
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;
|
||||
|
||||
|
||||
--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-NeutralSlate950: #0A0D12;
|
||||
--Neutrals-NeutralSlate900: #181D27;
|
||||
--Neutrals-NeutralSlate800: #252B37;
|
||||
--Neutrals-NeutralSlate700: #414651;
|
||||
@@ -197,24 +172,76 @@
|
||||
--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;
|
||||
--background-primary : var(--Brand-Orange);
|
||||
--background-secondary: var(--Neutrals-NeutralSlate0);
|
||||
--background-tertiary : var(--Neutrals-NeutralSlate50);
|
||||
|
||||
--Brand-Orange: #3399FF;
|
||||
--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;
|
||||
|
||||
--button-bg-primary : #5E48FC;
|
||||
--button-border-primary: #7B64FF;
|
||||
|
||||
--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 {
|
||||
@@ -258,23 +285,8 @@
|
||||
--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-NeutralSlate950: #FDFDFD;
|
||||
--Neutrals-NeutralSlate900: #FAFAFA;
|
||||
--Neutrals-NeutralSlate800: #F5F5F5;
|
||||
--Neutrals-NeutralSlate700: #E9EAEB;
|
||||
@@ -287,6 +299,15 @@
|
||||
--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%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -380,7 +401,7 @@ input[type="radio"]:focus {
|
||||
/* Markdown Content Styling */
|
||||
.markdown-content {
|
||||
line-height: 1.6;
|
||||
color: var(--Neutrals-NeutralSlate950);
|
||||
color : var(--Neutrals-NeutralSlate950);
|
||||
}
|
||||
|
||||
.markdown-content h1,
|
||||
@@ -389,9 +410,9 @@ input[type="radio"]:focus {
|
||||
.markdown-content h4,
|
||||
.markdown-content h5,
|
||||
.markdown-content h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-top: 1em;
|
||||
font-weight : 600;
|
||||
line-height : 1.3;
|
||||
margin-top : 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@@ -415,7 +436,7 @@ input[type="radio"]:focus {
|
||||
.markdown-content ul,
|
||||
.markdown-content ol {
|
||||
margin-bottom: 1em;
|
||||
padding-left: 1.5em;
|
||||
padding-left : 1.5em;
|
||||
}
|
||||
|
||||
.markdown-content li {
|
||||
@@ -428,75 +449,75 @@ input[type="radio"]:focus {
|
||||
|
||||
.markdown-content strong {
|
||||
font-weight: 600;
|
||||
color: var(--Neutrals-NeutralSlate950);
|
||||
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;
|
||||
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);
|
||||
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;
|
||||
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;
|
||||
border-radius : 8px;
|
||||
padding : 1rem;
|
||||
overflow-x : auto;
|
||||
margin-bottom : 1em;
|
||||
}
|
||||
|
||||
.markdown-content pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
background : none;
|
||||
padding : 0;
|
||||
border-radius: 0;
|
||||
color: inherit;
|
||||
color : inherit;
|
||||
}
|
||||
|
||||
.markdown-content blockquote {
|
||||
border-left: 4px solid var(--Neutrals-NeutralSlate300);
|
||||
border-left : 4px solid var(--Neutrals-NeutralSlate300);
|
||||
padding-left: 1rem;
|
||||
margin: 1em 0;
|
||||
color: var(--Neutrals-NeutralSlate700);
|
||||
font-style: italic;
|
||||
margin : 1em 0;
|
||||
color : var(--Neutrals-NeutralSlate700);
|
||||
font-style : italic;
|
||||
}
|
||||
|
||||
.markdown-content a {
|
||||
color: var(--Brand-Orange);
|
||||
color : var(--Brand-Orange);
|
||||
text-decoration: underline;
|
||||
transition: color 0.2s;
|
||||
transition : color 0.2s;
|
||||
}
|
||||
|
||||
.markdown-content a:hover {
|
||||
color: var(--Brand-Orange);
|
||||
color : var(--Brand-Orange);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.markdown-content table {
|
||||
width: 100%;
|
||||
width : 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1em;
|
||||
border: 1px solid var(--Neutrals-NeutralSlate200);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
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;
|
||||
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);
|
||||
font-weight : 600;
|
||||
color : var(--Neutrals-NeutralSlate950);
|
||||
}
|
||||
|
||||
.markdown-content tr:last-child td {
|
||||
@@ -504,7 +525,7 @@ input[type="radio"]:focus {
|
||||
}
|
||||
|
||||
.markdown-content hr {
|
||||
border: none;
|
||||
border : none;
|
||||
border-top: 1px solid var(--Neutrals-NeutralSlate200);
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
margin : 1.5em 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user