From d69a0b307c2c77fed6da212deacf88a266bd8c92 Mon Sep 17 00:00:00 2001 From: ebolam Date: Sun, 21 Aug 2022 14:25:47 -0400 Subject: [PATCH] Tab fixes for CSS, darkness theme update --- static/koboldai.css | 47 ++++++++++++--------------------- static/koboldai.js | 63 ++++++++++++++++++++++++--------------------- themes/Darkness.css | 6 ++--- 3 files changed, 53 insertions(+), 63 deletions(-) diff --git a/static/koboldai.css b/static/koboldai.css index bd51399f..4801e28e 100644 --- a/static/koboldai.css +++ b/static/koboldai.css @@ -67,11 +67,11 @@ input[type="range"]::-ms-fill-upper { list-style: none; /*margin: 200px 0 20px;*/ padding: 0; - padding-left: 30px; /*Gui: this value should change to 10px when pinned*/ + padding-left: 40px; line-height: 24px; height: 26px; overflow: hidden; - font-size: 14px; + font-size: 12px; font-family: verdana; position: relative; } @@ -87,23 +87,22 @@ input[type="range"]::-ms-fill-upper { -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ - border: 1px solid var(--tab_color); + border: 1px solid #888; background: var(--tab_color); - /*background: -o-linear-gradient(top, #337ab7 50%, #285070 100%); - background: -ms-linear-gradient(top, #337ab7 50%, #285070 100%); - background: -moz-linear-gradient(top, #337ab7 50%, #285070 100%); - background: -webkit-linear-gradient(top, #337ab7 50%, #285070 100%); - background: linear-gradient(top, #337ab7 50%, #285070 100%);*/ + background: -o-linear-gradient(top, #337ab70 50%, #28507 100%); + background: -ms-linear-gradient(top, #337ab70 50%, #28507 100%); + background: -moz-linear-gradient(top, #337ab70 50%, #28507 100%); + background: -webkit-linear-gradient(top, #337ab70 50%, #28507 100%); + background: linear-gradient(top, #337ab70 50%, #28507 100%); display: inline-block; position: relative; z-index: 0; - border-radius: 6px 6px 6px 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; - /*box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--tab_color);*/ + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #AAA; text-shadow: 0 1px #AAA; - margin: 0 -2px; - padding: 0 12px; + margin: 0 -5px; + padding: 0 20px; } .tabrow span.selected { background: #FFF; @@ -111,8 +110,6 @@ input[type="range"]::-ms-fill-upper { z-index: 2; border-bottom-color: #FFF; } - - .tabrow:before { position: absolute; content: " "; @@ -124,7 +121,7 @@ input[type="range"]::-ms-fill-upper { } .tabrow span:before, .tabrow span:after { - border: 1px solid var(--tab_color); + border: 1px solid #AAA; position: absolute; bottom: -1px; width: 5px; @@ -135,31 +132,19 @@ input[type="range"]::-ms-fill-upper { left: -6px; border-bottom-right-radius: 6px; border-width: 0 1px 1px 0; - box-shadow: 2px 2px 0 var(--tab_color); + box-shadow: 2px 2px 0 #D1D1D1; } .tabrow span:after { right: -6px; border-bottom-left-radius: 6px; border-width: 0 0 1px 1px; - box-shadow: -2px 2px 0 var(--tab_color); + box-shadow: -2px 2px 0 #D1D1D1; } .tabrow span.selected:before { - box-shadow: 4px 2px 0 #FFF; + box-shadow: 2px 2px 0 #FFF; } .tabrow span.selected:after { - box-shadow: -4px 2px 0 #FFF; -} -.themerow .tabrow{ - margin-top: 5px; -} -.themerow .tabrow:before { - position: absolute; - content: " "; - width: 100%; - bottom: 0; - left: 0; - border-bottom: 0px solid rgb(195, 50, 50); - z-index: 1; + box-shadow: -2px 2px 0 #FFF; } diff --git a/static/koboldai.js b/static/koboldai.js index dd45cbba..755f4953 100644 --- a/static/koboldai.js +++ b/static/koboldai.js @@ -49,6 +49,7 @@ map2.set(2, 'Top-p Sampling') map2.set(3, 'Tail-free Sampling') map2.set(4, 'Typical Sampling') map2.set(5, 'Temperature') +var use_word_highlighting = true; //-----------------------------------Server to UI Functions----------------------------------------------- function connect() { console.log("connected"); @@ -218,24 +219,28 @@ function do_story_text_updates(data) { while (item.firstChild) { item.removeChild(item.firstChild); } - if (data.value.action['Selected Text'] == null) { - var text_array = []; - } else { - var text_array = data.value.action['Selected Text'].split(" "); - } - text_array.forEach(function (text, i) { - if (text != "") { - var word = document.createElement("span"); - word.classList.add("rawtext"); - if (i == text_array.length) { - word.textContent = text; - } else { - word.textContent = text+" "; - } - item.append(word); + if (use_word_highlighting) { + if (data.value.action['Selected Text'] == null) { + var text_array = []; + } else { + var text_array = data.value.action['Selected Text'].split(" "); } - - }); + text_array.forEach(function (text, i) { + if (text != "") { + var word = document.createElement("span"); + word.classList.add("rawtext"); + if (i == text_array.length) { + word.textContent = text; + } else { + word.textContent = text+" "; + } + item.append(word); + } + + }); + } else { + item.textContent = data.value.action['Selected Text']; + } item.original_text = data.value.action['Selected Text']; item.setAttribute("world_info_uids", ""); item.classList.remove("pulse") @@ -274,7 +279,7 @@ function do_story_text_updates(data) { story_area.append(span); - span.scrollIntoView(); + span.scrollIntoView(false); assign_world_info_to_action(span, null); } @@ -323,7 +328,7 @@ function do_story_text_length_updates(data) { } function do_probabilities(data) { - console.log(data); + //console.log(data); if (document.getElementById('probabilities_'+data.value.id)) { prob_area = document.getElementById('probabilities_'+data.value.id) } else { @@ -595,7 +600,7 @@ function load_popup(data) { } function popup_items(data) { - console.log(data); + //console.log(data); var popup_list = document.getElementById('popup_list'); //first, let's clear out our existing data while (popup_list.firstChild) { @@ -869,7 +874,7 @@ function show_model_menu(data) { breadcrumbs.removeChild(breadcrumbs.firstChild); } //add breadcrumbs - console.log(data.breadcrumbs); + //console.log(data.breadcrumbs); for (item of data.breadcrumbs) { var button = document.createElement("button"); button.classList.add("breadcrumbitem"); @@ -1429,7 +1434,7 @@ function show_error_message(data) { //--------------------------------------------UI to Server Functions---------------------------------- function move_sample(direction) { var previous = null; - console.log(direction); + //console.log(direction); for (const [index, temp] of Array.from(document.getElementsByClassName("sample_order")).entries()) { if (temp.classList.contains("selected")) { if ((direction == 'up') && (index > 0)) { @@ -1547,7 +1552,7 @@ function send_world_info(uid) { //--------------------------------------------General UI Functions------------------------------------ function Change_Theme(theme) { - console.log(theme); + //console.log(theme); var css = document.getElementById("CSSTheme"); css.setAttribute("href", "/themes/"+theme+".css"); create_theming_elements(); @@ -1562,10 +1567,10 @@ function palette_color(item) { function getAllCSSVariableNames(styleSheets = document.styleSheets){ var cssVars = []; // loop each stylesheet - console.log(styleSheets); + //console.log(styleSheets); for(var i = 0; i < styleSheets.length; i++){ - console.log(styleSheets[i]); - console.log(styleSheets[i].ownerNode.attributes.id); + //console.log(styleSheets[i]); + //console.log(styleSheets[i].ownerNode.attributes.id); // loop stylesheet's cssRules try{ // try/catch used because 'hasOwnProperty' doesn't work for( var j = 0; j < styleSheets[i].cssRules.length; j++){ @@ -1589,13 +1594,13 @@ function getAllCSSVariableNames(styleSheets = document.styleSheets){ } function create_theming_elements() { - console.log("Running theme editor"); + //console.log("Running theme editor"); var cssVars = getAllCSSVariableNames(); palette_table = document.createElement("table"); advanced_table = document.createElement("table"); theme_area = document.getElementById("Palette"); theme_area.append(palette_table); - console.log(cssVars); + //console.log(cssVars); //theme_area.append(advanced_table); for (css_item of cssVars) { if (css_item[0].includes("_palette")) { @@ -1699,7 +1704,7 @@ function preserve_game_space(preserve) { function options_on_right(data) { var r = document.querySelector(':root'); - console.log("Setting cookie to: "+data); + //console.log("Setting cookie to: "+data); if (data) { setCookie("options_on_right", "true"); r.style.setProperty('--story_pinned_areas', 'var(--story_pinned_areas_right)'); diff --git a/themes/Darkness.css b/themes/Darkness.css index 4edff814..a4e2336b 100644 --- a/themes/Darkness.css +++ b/themes/Darkness.css @@ -62,7 +62,7 @@ /*Side Menus*/ --tab_color: #1a625f; - --flyout_background: #1c1c1c; + --flyout_background: #181818; --flyout_background_pinned:var(--layer1_palette); --setting_background: #242424; @@ -87,7 +87,7 @@ --wi_card_border_color: #002d6c00; --wi_card_border_color_to_ai: #002d6c00; - --wi_card_bg_color: #181818; + --wi_card_bg_color: #1c1c1c; --wi_card_text_color: #e0e0e0; --wi_card_tag_bg_color: #242424; @@ -127,7 +127,7 @@ --radius_settings_background: 10px; --radius_buttons: 5px; --radius_item_popup: 5px; - --radius_wi_card: 5px; + --radius_wi_card: 10px;