diff --git a/refact_webgui/webgui/static/admin-style.css b/refact_webgui/webgui/static/admin-style.css index 7b0c91fb..e95edb8b 100644 --- a/refact_webgui/webgui/static/admin-style.css +++ b/refact_webgui/webgui/static/admin-style.css @@ -30,3 +30,54 @@ html { width: 340px; height: auto; } +.login-mode { + display: flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border: 0; + cursor: pointer; + outline: 0 !important; + margin-right: 10px; + margin-bottom: 2px; + background: none; + padding: 20px; + position: absolute; + right: 20px; + top: 20px; +} +.login-mode svg { + width: 22px; + height: 22px; +} +.nav-moon, +.nav-sun { + display: none; +} +html[data-bs-theme='dark'] .nav-sun { + display: block; +} +html[data-bs-theme='light'] .nav-moon { + display: block; +} +html[data-bs-theme='dark'] .login-mode svg path { + fill: #adb5bd; +} +html[data-bs-theme='dark'] .admin-logo path:not(.k) { + fill: rgba(255,255,255,0.65); +} +:root { + --dark-blue: #144289; + --dark-blue-hover: #2d62b3; +} +html[data-bs-theme='dark'] .btn-primary { + --bs-btn-bg: var(--dark-blue); + --bs-btn-border-color: var(--dark-blue); + --bs-btn-hover-bg: var(--dark-blue-hover); + --bs-btn-hover-border-color: var(--dark-blue-hover); + --bs-btn-active-bg: var(--dark-blue-hover); + --bs-btn-active-border-color: var(--dark-blue-hover); + --bs-btn-disabled-bg: var(--dark-disabled); + --bs-btn-disabled-border-color: var(--dark-disabled); +} diff --git a/refact_webgui/webgui/static/admin.html b/refact_webgui/webgui/static/admin.html index 1906fb83..ed02a7d0 100644 --- a/refact_webgui/webgui/static/admin.html +++ b/refact_webgui/webgui/static/admin.html @@ -11,14 +11,15 @@ Refact Server Login +
- - + + @@ -59,6 +59,9 @@ {{/unless}} {{/each}}
+
  • + +
  • diff --git a/refact_webgui/webgui/static/index.js b/refact_webgui/webgui/static/index.js index 66b6b901..c348fd55 100644 --- a/refact_webgui/webgui/static/index.js +++ b/refact_webgui/webgui/static/index.js @@ -4,6 +4,14 @@ const req = await fetch('list-plugins'); const plugins = await req.json(); let history_state = []; let create_h_state = true; + + +let stored_theme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); +if (stored_theme) { + document.documentElement.setAttribute('data-bs-theme', stored_theme) +} + + // show navigation bar immediately, import later plugins_to_top_nav_bar(plugins); @@ -279,3 +287,16 @@ function logout_button_init() { } logout_button_init() + +const site_mode = document.querySelector('.nav-mode'); +site_mode.addEventListener('click', () => { + var current_theme = document.documentElement.getAttribute("data-bs-theme"); + var target_theme = "light"; + + if (current_theme === "light") { + target_theme = "dark"; + } + + document.documentElement.setAttribute('data-bs-theme', target_theme) + localStorage.setItem('theme', target_theme); +}); \ No newline at end of file diff --git a/refact_webgui/webgui/static/style.css b/refact_webgui/webgui/static/style.css index d4263d2c..d56713d6 100644 --- a/refact_webgui/webgui/static/style.css +++ b/refact_webgui/webgui/static/style.css @@ -7,6 +7,66 @@ body { background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); min-height: 100%; } +html[data-bs-theme='dark'] body { + background-color: #212529; + color: #fff; + background-image: none; +} +.nav-modewrap { + display: inline-flex; + align-items: center; +} +.nav-mode, +.login-mode { + display: flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border: 0; + cursor: pointer; + outline: 0 !important; + margin-right: 10px; + margin-bottom: 2px; + background: none; +} +.login-mode svg, +.nav-mode svg { + width: 22px; + height: 22px; +} +.nav-moon, +.nav-sun { + display: none; +} +html[data-bs-theme='dark'] .nav-sun { + display: block; +} +html[data-bs-theme='light'] .nav-moon { + display: block; +} +html[data-bs-theme='dark'] .nav-mode svg path, +html[data-bs-theme='dark'] .login-mode svg path { + fill: var(--bs-nav-link-color); +} +html[data-bs-theme='dark'] .navbar-brand svg path:not(.k) { + fill: rgba(255,255,255,0.65); +} +html[data-bs-theme='dark'] .table tr:hover td, +html[data-bs-theme='dark'] .table tr:active td, +html[data-bs-theme='dark'] .table-success td { + background-color: rgba(255, 255, 255,0.02) !important; + color: rgba(255, 255, 255, 0.65); +} +html[data-bs-theme='dark'] .table-hover>tbody>tr:hover>* { + --bs-table-accent-bg: rgba(255, 255, 255,0.1) !important; +} +html[data-bs-theme='dark'] .fine-gfx { + opacity: 0.6; +} +html[data-bs-theme='dark'] .fine-gfx:hover { + opacity: 1; +} code { font-family: "Azeret Mono", monospace; } @@ -26,6 +86,10 @@ code { border: 1px solid rgba(0,0,0,0.15); position: relative; } +html[data-bs-theme='dark'] .pane { + background-color: transparent; + border-color: rgba(255,255,255,0.65) +} .temp-disabled { opacity: 0.2; pointer-events: none !important; @@ -59,9 +123,16 @@ code { background-color: #fff; padding: 15px 0; } +html[data-bs-theme='dark'] .navbar { + background-color: #212529db; + border-bottom: 1px solid rgba(255,255,255,0.15); +} .navbar-nav { width: 100%; } +html[data-bs-theme='dark'] .table-types thead th { + background-color: rgba(255,255,255,0.05); +} .header-tabs { display: flex; align-items: center; @@ -254,6 +325,10 @@ h3 { overflow: hidden; flex-direction: column; } +html[data-bs-theme='dark'] .gpus-item { + background-color: transparent; + border-color: rgba(255,255,255,0.65); +} .gpus-title { font-size: 0.8rem; text-align: left; @@ -273,6 +348,11 @@ h3 { border-radius: 4px; margin-top: 10px; } +html[data-bs-theme='dark'] .gpus-current-status { + background-color: transparent; + color: rgba(255,255,255,0.85); + border: 1px solid rgba(255,255,255,0.65); +} .gpus-content { } @@ -298,6 +378,9 @@ h3 { position: relative; display: inline-flex; } +html[data-bs-theme='dark'] .gpus-mem-bar { + background-color: rgba(255,255,255,0.15); +} .gpus-mem-bar span { background-color: rosybrown; position: absolute; @@ -329,6 +412,11 @@ h3 { margin-top: 10px; z-index: 999; } +html[data-bs-theme='dark'] .gpus-status { + border: 1px solid rgba(255,255,255,0.65); + color: rgba(255,255,255,0.85); + background-color: #212529; +} .gpus-status-visible { display: block; } @@ -496,6 +584,11 @@ h3 { margin-left: 100px; align-items: center; } +html[data-bs-theme='dark'] .run-rename-popup { + background-color: #212529; + color: #fff; + border-color: rgba(255,255,255,0.15); +} .run-rename-popup pre { margin: 0; } @@ -522,6 +615,9 @@ h3 { font-weight: bold; color: #0d6efd !important; } +html[data-bs-theme='dark'] #nav-container .main-active { + color: rgba(255,255,255,0.85) !important; +} .chat-enabler { margin-bottom: 20px; } @@ -745,6 +841,13 @@ h3 { padding: 5px; overflow: hidden; } +html[data-bs-theme='dark'] .model-finetune-item { + background-color: #212529; + border: 1px solid rgba(255, 255, 255,0.1); +} +html[data-bs-theme='dark'] .btn-remove-run { + background-color: transparent !important; +} .model-finetune-item-inner { display: flex; @@ -1148,6 +1251,9 @@ h3 { .projects-dropdown li:last-child button { border-top: 1px solid #ccc; } +html[data-bs-theme='dark'] .projects-dropdown li:last-child button { + border-top-color: rgba(255, 255, 255, 0.15); +} .projects-dropdown li:only-child button { border-top: none; } @@ -1229,4 +1335,118 @@ h3 { margin-bottom: 8px; font-size: 13px; max-width: 600px; +} +.cm-s-monokai.CodeMirror { background: #212529; color: #f8f8f2; } +.cm-s-monokai div.CodeMirror-selected { background: #49483E; } +.cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line > span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); } +.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); } +.cm-s-monokai .CodeMirror-gutters { background: #353333; border-right: 0px; } +.cm-s-monokai .CodeMirror-guttermarker { color: white; } +.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; } +.cm-s-monokai .CodeMirror-linenumber { color: #d0d0d0; } +.cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; } + +.cm-s-monokai span.cm-comment { color: #75715e; } +.cm-s-monokai span.cm-atom { color: #ae81ff; } +.cm-s-monokai span.cm-number { color: #ae81ff; } + +.cm-s-monokai span.cm-comment.cm-attribute { color: #97b757; } +.cm-s-monokai span.cm-comment.cm-def { color: #bc9262; } +.cm-s-monokai span.cm-comment.cm-tag { color: #bc6283; } +.cm-s-monokai span.cm-comment.cm-type { color: #5998a6; } + +.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; } +.cm-s-monokai span.cm-keyword { color: #f92672; } +.cm-s-monokai span.cm-builtin { color: #66d9ef; } +.cm-s-monokai span.cm-string { color: #e6db74; } + +.cm-s-monokai span.cm-variable { color: #f8f8f2; } +.cm-s-monokai span.cm-variable-2 { color: #9effff; } +.cm-s-monokai span.cm-variable-3, .cm-s-monokai span.cm-type { color: #66d9ef; } +.cm-s-monokai span.cm-def { color: #fd971f; } +.cm-s-monokai span.cm-bracket { color: #f8f8f2; } +.cm-s-monokai span.cm-tag { color: #f92672; } +.cm-s-monokai span.cm-header { color: #ae81ff; } +.cm-s-monokai span.cm-link { color: #ae81ff; } +.cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; } + +.cm-s-monokai .CodeMirror-activeline-background { background: #373831; } +.cm-s-monokai .CodeMirror-matchingbracket { + text-decoration: underline; + color: white !important; +} + +:root { + --dark-blue: #144289; + --dark-blue-hover: #2d62b3; + --dark-disabled: #343f50; + --dark-red: #93333c; + --dark-red-hover: #b13440; + --dark-red-disabled: #55292d; +} +/* Dark mode */ +html[data-bs-theme='dark'] .btn-primary { + --bs-btn-bg: var(--dark-blue); + --bs-btn-border-color: var(--dark-blue); + --bs-btn-hover-bg: var(--dark-blue-hover); + --bs-btn-hover-border-color: var(--dark-blue-hover); + --bs-btn-active-bg: var(--dark-blue-hover); + --bs-btn-active-border-color: var(--dark-blue-hover); + --bs-btn-disabled-bg: var(--dark-disabled); + --bs-btn-disabled-border-color: var(--dark-disabled); +} +html[data-bs-theme='dark'] .btn-outline-primary { + --bs-btn-color: var(--dark-blue-hover); + --bs-btn-border-color: var(--dark-blue-hover); + --bs-btn-hover-bg: var(--dark-blue-hover); + --bs-btn-hover-border-color: var(--dark-blue-hover); + --bs-btn-active-bg: var(--dark-blue); + --bs-btn-active-border-color: var(--dark-blue); + --bs-btn-disabled-color: var(--dark-blue); + --bs-btn-disabled-border-color: var(--dark-blue) +} + +html[data-bs-theme='dark'] .form-check-input:checked { + background-color: var(--dark-blue); + border-color: var(--dark-blue); +} +html[data-bs-theme='dark'] .fake-link { + color: var(--dark-blue); +} +html[data-bs-theme='dark'] .fake-link:hover { + color: var(--dark-blue-hover); +} +html[data-bs-theme='dark'] .btn-outline-danger { + --bs-btn-color: var(--dark-red); + --bs-btn-border-color: var(--dark-red); + --bs-btn-hover-bg: var(--dark-red); + --bs-btn-hover-border-color: var(--dark-red); + --bs-btn-active-bg: var(--dark-red); + --bs-btn-active-border-color: var(--dark-red); + --bs-btn-disabled-color: var(--dark-red); + --bs-btn-disabled-border-color: var(--dark-red) +} +html[data-bs-theme='dark'] .btn-danger { + --bs-btn-bg: var(--dark-red); + --bs-btn-border-color: var(--dark-red); + --bs-btn-hover-bg: var(--dark-red-hover); + --bs-btn-hover-border-color: var(--dark-red-hover); + --bs-btn-active-bg: var(--dark-red-hover); + --bs-btn-active-border-color: var(--dark-red-hover); + --bs-btn-disabled-bg: var(--dark-red-disabled); + --bs-btn-disabled-border-color: var(--dark-red-disabled); +} +html[data-bs-theme='dark'] .dropdown-item.active, +html[data-bs-theme='dark'] .dropdown-item:active { + background-color: var(--dark-blue-hover) !important; +} +html[data-bs-theme='dark'] .nav-link { + color: var(--dark-blue-hover); +} +html[data-bs-theme='dark'] footer { + opacity: 0.5; +} + +html[data-bs-theme='dark'] .bg-primary { + background-color: var(--dark-blue) !important; } \ No newline at end of file diff --git a/refact_webgui/webgui/static/tab-finetune.html b/refact_webgui/webgui/static/tab-finetune.html index ea0a6b1a..99617b69 100644 --- a/refact_webgui/webgui/static/tab-finetune.html +++ b/refact_webgui/webgui/static/tab-finetune.html @@ -14,7 +14,6 @@

    Finetunes

    Steps -