diff --git a/src/styles/console.m.scss b/src/styles/console.m.scss index dba6fed98..379abcf18 100644 --- a/src/styles/console.m.scss +++ b/src/styles/console.m.scss @@ -1,129 +1,256 @@ +/* ============================ + ACODEX – Modern Console UI v2 + Premium Dark + Neon Theme + ============================ */ + +/* Global Reset */ +* { + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; +} + +/* ------------------------------ + TOGGLER BUTTON + ------------------------------ */ c-toggler { + position: fixed; + top: 15px; + left: 15px; + height: 38px; + width: 38px; + border-radius: 50%; + background: rgba(255,255,255,0.12); + backdrop-filter: blur(8px); + box-shadow: 0 4px 16px rgba(0,0,0,0.4); + border: 1px solid rgba(255,255,255,0.15); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAE9JREFUOMtjYBh0gBHO+k+cSkYilcPVMpHqpIHRwIgUFERp+I8SekQ5CY8WXH7AqYWJyGglqIERV3QykaYcV7DiSSwsODw8yJIGdTPQIAQAg9gKJl7UINwAAAAASUVORK5CYII=); + background-size: 22px; background-position: center; background-repeat: no-repeat; - background-size: 24px; - position: fixed; - top: 0; - left: 0; - height: 30px; - width: 30px; - background-color: #fff; - transform-origin: center; - border-radius: 50%; - box-shadow: -2px 2px 8px rgba(0, 0, 0, .4); + + transition: 0.25s ease; z-index: 99999; - opacity: 0.5; + cursor: pointer; } -c-object { - color: #9999ff; - text-decoration: underline; +c-toggler:hover { + background: rgba(255,255,255,0.22); + transform: scale(1.07); } c-toggler:active { - box-shadow: -1px 1px 4px rgba(0, 0, 0, .4) -} - -c-line { - display: block; + transform: scale(0.95); + box-shadow: 0 2px 6px rgba(0,0,0,0.3); } +/* ------------------------------ + CONSOLE BASE + ------------------------------ */ c-console { - box-sizing: border-box; - overflow-y: auto; position: fixed; - top: 0; - left: 0; + top: 0; left: 0; height: 100vh; width: 100vw; - background-color: #313131; + + background: #0d0d0f; + color: #e8e8e8; + + overflow-y: auto; + font-family: "Roboto Mono", monospace; + + padding-bottom: 80px; z-index: 99998; - color: #eeeeee; - font-family: "Roboto", sans-serif; + + animation: fadeInUp 0.25s ease; } c-console[title] { - padding-top: 65px; - animation: --page-transition .1s ease 1; + padding-top: 70px; } -c-console br:last-of-type { - display: none; -} +/* Title Bar */ +c-console[title]::before { + content: attr(title); + position: fixed; + top: 0; + left: 0; -c-console textarea { - color: white; - caret-color: currentColor !important; - background-color: inherit; + width: 100%; + height: 48px; + + background: rgba(25,25,28,0.9); + backdrop-filter: blur(10px); + + display: flex; + align-items: center; + justify-content: center; + + font-size: 1.1rem; + font-weight: 700; + letter-spacing: 0.5px; + + border-bottom: 1px solid rgba(255,255,255,0.12); + box-shadow: 0 2px 10px rgba(0,0,0,0.35); + + z-index: 100000; } +/* ------------------------------ + INPUT FIELD + ------------------------------ */ c-input { display: flex; width: 100%; - height: fit-content; + padding: 6px 12px; + font-size: 0.95rem; } c-input::before { - content: '>>'; - margin: 0 5px; - height: 100%; + content: ">>"; + margin-right: 10px; + color: #7d5fff; } #__c-input { width: 100%; + background: transparent; border: none; resize: none; - height: 200px; - position: relative; - background-color: transparent; - overflow: visible; + color: #e2e2e2; + font-size: 0.95rem; + caret-color: #7d5fff; } #__c-input:focus { outline: none; } -c-console[title]::before { - position: fixed; - top: 0; - left: 0; - width: 100vw; - background-color: inherit; - z-index: 999999; - content: attr(title); - display: flex; - height: 44px; - align-items: center; - justify-content: center; - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-weight: 900; - box-shadow: 0 2px 4px rgba(0, 0, 0, .2); - margin-bottom: 10px; - color: white; - font-size: medium; -} - +/* ------------------------------ + LOG MESSAGE BLOCKS + ------------------------------ */ c-message { position: relative; - display: flex; - border-bottom: solid 1px rgba(204, 204, 204, 0.4); - margin-bottom: 35px; - font-size: .9rem; - flex-wrap: wrap; + display: block; + padding: 14px 12px; + margin: 8px 0; + + border-left: 3px solid rgba(255,255,255,0.1); + background: rgba(255,255,255,0.04); + backdrop-filter: blur(5px); + + border-radius: 6px; + font-size: 0.92rem; + + animation: fadeIn 0.25s ease; } +/* ERROR */ +c-message[log-level="error"] { + border-left-color: #ff4e4e; + background: rgba(255, 40, 40, 0.14); +} + +/* WARNING */ +c-message[log-level="warn"] { + border-left-color: #f1c40f; + background: rgba(241, 196, 15, 0.14); +} + +/* ------------------------------ + CODE BLOCKS + ------------------------------ */ c-code { - position: relative; - color: rgb(214, 211, 211); - font-size: 1em; - font-family: 'Courier New', Courier, monospace; + display: block; + padding: 10px; + margin-top: 5px; + + font-family: "JetBrains Mono", monospace; + font-size: 0.9rem; + + background: #17171a; + border-radius: 6px; overflow-x: auto; - white-space: pre; - margin-bottom: 0px; - border: 'none'; + + color: #cfcfcf; + position: relative; +} + +c-code::before { + content: ">>"; + color: #7d5fff; + margin-right: 6px; + font-weight: bold; } +c-code::after { + content: "use"; + position: absolute; + top: 6px; + right: 8px; + + padding: 1px 6px; + border-radius: 4px; + font-size: 0.65rem; + + background: #7d5fff; + color: white; +} + +/* ------------------------------ + VALUE COLORS + ------------------------------ */ +c-text.__c-boolean { color: #e056fd; } +c-text.__c-number { color: #19baff; } +c-text.__c-symbol { color: #fd9644; } +c-text.__c-object { color: #badc58; } +c-text.__c-undefined { color: #f0932b; } +c-text.__c-string { color: #6ab04c; } + +/* Functions */ +c-text.__c-function { + color: #c7ecee; +} +c-text.__c-function::before { + content: "ƒ"; + margin-right: 4px; + color: #7d5fff; +} + +/* ------------------------------ + TABLE VIEW + ------------------------------ */ +c-table { + display: table; + width: 100%; + margin: 10px 0; + font-size: 0.9rem; + border: 1px solid rgba(255,255,255,0.12); +} + +c-table c-row { + display: table-row; +} + +c-table c-cell { + display: table-cell; + padding: 8px 10px; + border-bottom: 1px solid rgba(255,255,255,0.1); +} + +/* ------------------------------ + ANIMATIONS + ------------------------------ */ +@keyframes fadeInUp { + 0% { opacity: 0; transform: translateY(15px); } + 100% { opacity: 1; transform: translateY(0); } +} + +@keyframes fadeIn { + 0% { opacity: 0; } + 100% { opacity: 1; } +}} + c-code::after { content: 'use'; background-color: #666; @@ -318,4 +445,4 @@ c-table c-cell:not(:last-child) { opacity: 1; transform: translate3d(0, 0, 0) } -} \ No newline at end of file +}