update 9/20/25

This commit is contained in:
Ra
2025-09-20 21:44:02 -07:00
parent c713c2ed5e
commit b41f489fe6
58 changed files with 11529 additions and 2769 deletions

333
index.css
View File

@@ -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;
}