summaryrefslogtreecommitdiff
path: root/moneyjsx/static/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'moneyjsx/static/main.css')
-rw-r--r--moneyjsx/static/main.css882
1 files changed, 882 insertions, 0 deletions
diff --git a/moneyjsx/static/main.css b/moneyjsx/static/main.css
new file mode 100644
index 0000000..ad6d85c
--- /dev/null
+++ b/moneyjsx/static/main.css
@@ -0,0 +1,882 @@
+:root {
+ --back: #18191B;
+ --front: #E76969;
+ --green: #69E769;
+ --site-font: Terminal;
+}
+
+@font-face {
+ font-family: Terminal;
+ src: url( /static/fonts/Web437_IBM_PGC.woff )
+}
+
+@font-face {
+ font-family: Code;
+ src: url( /static/fonts/Web437_DOS-V_re_JPN12.woff )
+}
+
+#moneyjsx-root {
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+ margin: 0;
+}
+input[type="radio"] {
+ appearance: none;
+ background-color: var( --back );
+ margin: 0;
+ font: inherit;
+ color: #888;
+ width: 1em;
+ height: 1em;
+ border: 0.15em solid currentColor;
+ border-radius: 50%;
+ display: grid;
+ place-content: center;
+}
+
+input[type="radio"]::before {
+ content: "";
+ width: 0.75em;
+ height: 0.75em;
+ border-radius: 50%;
+ transform: scale(0);
+ transition: 120ms transform ease-in-out;
+ box-shadow: inset 1em 1em var(--front);
+}
+
+input[type="radio"]:checked::before {
+ transform: scale(1);
+}
+
+header {
+ justify-content: space-between;
+ flex-direction: row;
+ align-self: center;
+ position: relative;
+ display: flex;
+ z-index: 1;
+ width: 98%;
+ top: 5px;
+}
+
+code {
+ font-family: Code;
+ font-size: 12px;
+ white-space: pre-wrap;
+}
+
+html, body {
+ height: 100%;
+ overflow: auto;
+}
+
+input {
+ background-color: #222;
+ border: 1px solid var(--front);
+ color: #888;
+ font-family: Code;
+}
+
+button {
+ cursor: pointer;
+ border: 1px solid var(--front);
+ background-color: #222;
+ color: #fff;
+ font-size: 16px;
+ font-family: var( --site-font );
+}
+
+a { text-decoration: underline; color: inherit; }
+a:hover { cursor: pointer; }
+
+body {
+ background-color: var( --back );
+ font-family: var( --site-font );
+ font-smooth: never !important;
+ background-position: center;
+ background-size: cover;
+ flex-direction: column;
+ display: flex;
+ color: #fff;
+ margin: 0;
+}
+
+@media (max-width: 768px) {
+#ascii-art {
+ font-size: 6px !important;
+ line-height: 6px !important;
+ }
+}
+
+/* chrome rendering fucking sucks */
+@supports (-moz-appearance:none) {
+ code {
+ font-size: 12px;
+ }
+}
+
+#terminal {
+ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+ background: rgba(29, 31, 32, 0.85);
+ position: relative;
+ min-height: 350px;
+ min-width: 333px;
+ max-height: 95%;
+ max-width: 100%;
+ width: 650px;
+ width: 640px;
+ overflow: hidden;
+}
+
+#model-capabilities {
+ padding-top: 5px;
+ color: #555;
+ filter: drop-shadow( 1px 1px 1px #000 );
+}
+
+#terminal-header > div {
+ margin: 0 5px;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+#terminal-header a {
+ color: var(--front);
+ text-decoration: none;
+}
+
+#terminal-inner {
+ text-align: left;
+ padding: 0 10px;
+ overflow: scroll;
+ height: calc(100% - 30px);
+}
+
+#terminal-resizer {
+ clip-path: polygon( 0% 100%, 100% 100%, 100% 0% );
+ background-color: var( --front );
+ position: absolute;
+ height: 16px;
+ z-index: 69;
+ width: 16px;
+ bottom: 3px;
+ right: 3px;
+}
+
+#cmd {
+ border: none;
+ background: none;
+ font-family: var(--site-font);
+ padding-top: 0px;
+ margin-top: 0px;
+ width: 100%;
+ outline: none;
+ display: block;
+}
+
+#cmd-input {
+ width: calc( 100% - 20px );
+ outline: none;
+ height: 20px;
+}
+
+.cmd-files {
+ padding-left: 10px;
+}
+
+.cmd-files-header {
+ color: #066;
+}
+
+.cmd-file-size {
+ color: #888;
+}
+
+.chat-error {
+ color: #f00;
+}
+
+.chat-role-user,
+.chat-role-model {
+ display: inline;
+}
+
+.chat-role-user {
+ color: var(--front);
+}
+
+.chat-role-model {
+ color: #888;
+}
+
+.chat-line {
+ display: block;
+}
+
+#chat-selection {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ bottom: 1px;
+ left: 0;
+ z-index: 11;
+ text-align: left;
+}
+
+#chat-selection-inner {
+ background-color: #222;
+ border: 1px solid var( --front );
+}
+
+#chat-selection-current {
+ padding: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
+ display: block;
+}
+
+#chat-selection-sidebar {
+ position: absolute;
+ bottom: 1px;
+ left: 0;
+ text-align: left;
+
+ z-index: 12;
+ min-height: 50px;
+ height: fit-content;
+ max-height: 50vh;
+ overflow: auto;
+ width: 230px;
+ background-color: #222;
+ border: 1px solid var( --front );
+ display: none;
+ flex-direction: column;
+ justify-content: end;
+}
+
+.chat-item {
+ padding-left: 5px;
+ margin-bottom: 5px;
+ height: 30px;
+ display: flex;
+ cursor: pointer;
+}
+
+.chat-name:hover a {
+ color: var( --front );
+}
+
+.chat-name {
+ width: 200px;
+}
+
+#chat-name {
+ width: calc(100% - 15px);
+ text-align: left;
+ height: 30px;
+ white-space: pre;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.chat-delete a {
+ text-decoration: none;
+}
+
+.chat-delete:hover a {
+ color: var( --front );
+}
+
+#terminal-resizer:hover {
+ background-color: #ccc;
+}
+
+#terminal-header {
+ -webkit-touch-callout: none;
+ height: 30px;
+ line-height: 30px;
+ background-color: rgba(29, 31, 32, 1.0);
+ overflow: hidden;
+}
+
+#suggested-prompts {
+ padding-top: 20px;
+ padding-left: 20px;
+}
+
+#homepagemain {
+ justify-content: center;
+ align-items: flex-start;
+ flex-direction: row;
+ text-align: center;
+ padding: 15px 0 0;
+ flex-wrap: wrap;
+ display: flex;
+ width: 100%;
+ z-index: 0;
+ margin: 0;
+}
+
+.red { color: var( --front ); }
+.black { color: var( --back ); }
+.green { color: var( --green ); }
+.btn_close { background: var( --front ); }
+
+#page-main {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 30px 0 0;
+ overflow-x: clip;
+ display: flex;
+ width: 100%;
+ z-index: 0;
+ margin: 0;
+}
+
+#ascii-art {
+ white-space: pre-wrap;
+ font-family: Code;
+ font-size: 9px;
+ overflow:clip;
+ width: 1200px;
+ padding-top: 5px;
+}
+
+#ascii-art span {
+ padding: 0;
+ margin: 0;
+}
+
+.groupbox {
+ border: 1px solid var( --front );
+ background-color: var( --back );
+ justify-content: flex-start;
+ align-items: flex-start;
+ flex-direction: column;
+ height: fit-content;
+ min-height: 25px;
+ min-width: 333px; /* may need to change this for mobile */
+ max-width: 600px;
+ display: flex;
+ margin: 5px;
+ z-index: 1;
+ flex: 1;
+}
+.groupbox > .grouptitle {
+ background-color: var( --back );
+ font-family: inherit;
+ position: relative;
+ margin: 0 0 -15px; /* stupid hardcode, but its: ( title font height - 4 ) * -1 */
+ padding: 0px 5px;
+ font-size: 18px;
+ z-index: 2;
+ top: -9px;
+ left: 5px;
+}
+.groupbody {
+ width: calc( 100% - 5px );
+ height: calc( 100% - 5px );
+ text-align: left;
+ margin: 5px;
+}
+
+#popup-msgbox {
+ display: none;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ left: 50%;
+ min-width: 250px;
+ border: 1px solid var( --front );
+ background: var( --back );
+ min-height: 120px;
+ top: 45vh;
+ transform: translate( -50%, -50% );
+}
+
+#header-user > button {
+ background-color: transparent;
+ text-decoration: underline;
+ color: white;
+ border: none;
+}
+
+#header-ctrls {
+ justify-content: end;
+ flex-direction: row;
+ align-items: center;
+ position: relative;
+ display: flex;
+ width: 128px;
+ padding: 0;
+ margin: 0;
+}
+
+#header-dropdown-btn {
+ font-family: inherit;
+ text-align: center;
+ line-height: 0px;
+ font-size: 1.8em;
+ color: #888;
+}
+
+.dropdown {
+ background-color: var( --back );
+ border-color: var( --front );
+ text-align: center;
+ color: #888;
+ height: 24px;
+ color: #fff;
+}
+
+.dropdown-wrapper {
+ border: 2px inset var( --front );
+ background-color: var( --back );
+ justify-content: space-evenly;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ width: 256px;
+ z-index: 10;
+ margin-left: 10px;
+}
+
+.dropdown-inner {
+ height: 30px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-evenly;
+ border-bottom: 1px solid #333;
+ cursor: pointer;
+}
+
+#login-username {
+ border: 1px solid var( --front );
+ background-color: transparent;
+ padding: 3px 6px;
+ color: white;
+}
+
+#header-login-dropdown button {
+ background-color: transparent;
+ text-decoration: underline;
+ color: white;
+ border: none;
+}
+
+#header-login-dropdown {
+ display: flex;
+ flex-direction: column;
+}
+
+#header-dropdown {
+ border: 2px inset var( --front );
+ background-color: var( --back );
+ justify-content: space-evenly;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ display: flex;
+ height: 100px;
+ width: 220px;
+ top: 24px;
+ left: 20px;
+}
+
+#login-email {
+ width: 160px;
+}
+
+#header-dropdown > a {
+ border-bottom: 1px solid #242424;
+ border-top: 1px solid #242424;
+ height: 33.3333333333%;
+ text-align: center;
+ line-height: 45px;
+ width: 100%;
+ text-decoration: underline;
+}
+#header-dropdown > a:nth-child( 1 ) { border-top: none; }
+#header-dropdown > a:nth-last-child( 1 ) { border-bottom: none; }
+
+.rolldownlist {
+ height: fit-content;
+ position: relative;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+.rolldown {
+ transition: background-color 0.3s ease-in-out;
+ border-bottom: 1px solid #E76969;
+ justify-content: space-between;
+ flex-direction: column;
+ display: flex;
+ height: auto;
+ width: 100%;
+}
+
+.rolldown:nth-of-type( 1 ) { margin-top: -5px; }
+.rolldown:nth-last-of-type( 1 ) { border-bottom: none; }
+.rolldown:hover { cursor: pointer; }
+
+.rolldown-collapsed-container {
+ overflow: hidden;
+ padding: 10px;
+ display: flex;
+ height: auto;
+ width: 100%;
+}
+
+.rolldown-collapsed {
+ float: left;
+ padding: 0;
+}
+
+.rolldown-expanded-container {
+ text-align: center;
+ overflow: hidden;
+ transition: max-height 0.3s linear;
+ max-height: 0px;
+ margin: 0;
+ padding: 0;
+}
+
+.rolldown-expanded-container.active {
+ display: flex !important;
+ max-height: 200px;
+ height: auto;
+}
+
+.rolldown-expanded {
+ margin: 20px;
+}
+
+.rolldown-expanded a { color: white; }
+
+.rolldown-icon-container {
+ margin-right: 15px;
+ position: relative;
+ float: left;
+ height: fit-content;
+}
+
+.rolldown.active .rolldown-icon-container {
+ transform: rotate( 90deg );
+}
+
+#notes-popup,
+#tokens-popup,
+#settings-popup {
+ border: 1px solid var( --front );
+ background-color: var( --back );
+ box-shadow: 1px 1px 2px black;
+ justify-content: center;
+ align-items: center;
+ align-self: center;
+ flex-direction: column;
+ position: absolute;
+ max-height: 888px;
+ max-width: 600px;
+ min-width: 300px;
+ display: flex;
+ padding: 20px;
+ z-index: 5;
+ width: 85%;
+ top: 50%;
+ left: 50%;
+ transform: translate( -50%, -50% );
+}
+
+#tokens-popup,
+#notes-popup {
+ max-width: 650px;
+}
+
+#settings-top {
+ justify-content: center;
+ align-items: baseline;
+ flex-direction: row;
+ flex-wrap: wrap;
+ display: flex;
+ width: 100%;
+}
+
+#settings-top > div {
+ width: calc(50% - 20px);
+ margin: 10px;
+}
+
+#settings-spinner-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ width: 100%;
+}
+
+#system-prompt {
+ min-width: 100%;
+ max-width: 100%;
+ min-height: 220px;
+}
+
+.settings-btn {
+ width: calc(50% - 5px);
+ height: 28px;
+ display: flex;
+ justify-content: center;
+}
+
+@media (max-width: 768px) {
+ #settings-top > div {
+ width: 100% !important;
+ }
+ #settings-top > div > div {
+ margin: 5px !important;
+ }
+}
+
+#tokens-inner,
+#notes-inner {
+ padding: 10px;
+ border: 1px solid var( --front );
+ background-color: #000;
+ box-shadow: 1px 1px 2px black;
+ width: calc( 100% - 20px );
+ max-height: 300px;
+ overflow: scroll;
+}
+
+.tokens-entry,
+.notes-entry {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid #222;
+ margin: 5px 10px;
+}
+
+.tokens-entry span,
+.notes-entry span {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+}
+
+.tokens-delete,
+.notes-delete {
+ background: none;
+ border: none;
+ color: #fff;
+ margin-left: 5px;
+ font-size: 24px;
+}
+
+.tokens-delete:hover,
+.notes-delete:hover {
+ color: var(--front);
+}
+
+.popup-msg {
+ border: 1px solid var( --front );
+ background-color: var( --back );
+ box-shadow: 1px 1px 2px black;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 1000;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+}
+
+textarea {
+ border: 1px solid var( --front );
+ background-color: #222;
+ color: white;
+}
+
+.column {
+ display: flex;
+ flex-direction: column;
+}
+
+#chat-name {
+ width: calc(100% - 15px);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: left;
+ height: 30px;
+}
+
+.chat-content {
+ display: inline;
+ white-space: pre-line;
+}
+
+.chat-line pre {
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ background-color: #000;
+ color: var(--front);
+}
+
+.chat-code-line {
+ background: #151515;
+ padding: 3px;
+ color: #0d0;
+}
+
+.chat-column {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 5px;
+}
+
+.comment {
+ color: #888;
+}
+
+#support-container {
+ width: calc( 100% - 7px ) !important;
+ justify-content: flex-start;
+ flex-direction: column;
+ text-align: center;
+ padding: 0 0 25px;
+ display: flex;
+ height: 100%;
+ z-index: 0;
+}
+
+#support-container pre {
+ border: 1px solid #444;
+ color: var( --front );
+ overflow-x: scroll;
+ background: #000;
+ width: 100%;
+}
+
+#support-container > div {
+ min-height: unset !important;
+ padding: 5px; /* placeholder */
+ width: 100%;
+}
+
+#support-container > p {
+ margin: 5px 0;
+}
+
+hr {
+ outline: 1px solid var( --front );
+ border: 1px solid var( --back );
+ border-radius: 25px;
+ width: 100%;
+}
+
+.tool-call {
+ background: #050608;
+ padding: 10px;
+ font-family: Code;
+ font-size: 12px;
+ cursor: pointer;
+}
+
+.tool-call-title-wrapper {
+ justify-content: space-between;
+ align-items: center;
+ display: flex;
+}
+
+.tool-call-collapse {
+ font-size: 17px;
+}
+
+.tool-call-title {
+
+}
+
+.tool-call-list {
+ overflow: scroll !important;
+ color: var( --front );
+}
+
+.reason-output {
+ overflow: scroll !important;
+ color: var( --front );
+}
+
+#page-selector-wrapper {
+ width: fit-content;
+ display: grid;
+ float: right;
+ clear: both;
+ margin: 0;
+ right: 0;
+}
+
+#selector-wrapper {
+ display: grid;
+ width: 100%;
+}
+
+#selector-wrapper > .dropdown-wrapper {
+ justify-self: flex-end !important;
+ margin-right: 7px !important;
+}
+
+#page-selector-wrapper > .dropdown-wrapper {
+ justify-self: flex-end !important;
+ margin-right: 10px !important;
+ width: 252px !important;
+}
+
+#tutorial-links-box {
+ border: 1px solid var( --front );
+ justify-content: center;
+ flex-direction: column;
+ justify-self: flex-end;
+ align-items: center;
+ margin: 0 10px 10px;
+ display: flex;
+ padding: 5px;
+ width: 256px;
+ float: right;
+ clear: both;
+}
+
+#model-selector {
+ align-items: flex-start;
+ justify-self: flex-end;
+ height: fit-content;
+ width: fit-content;
+ margin-right: 7px;
+ display: flex;
+}
+
+.model-capabilities {
+ flex-direction: column;
+ padding: 0 10px 10px;
+ display: flex;
+}
+
+.model-capabilities > span {
+ min-width: fit-content;
+}
+
+.model-item > .tool-call {
+ margin-right: 5px;
+}
+
+#tos-text {
+ white-space: break-spaces;
+}
generated by cgit v1.2.3 (git 2.26.2) at 2026-06-15 21:30:15 +0000