rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Tab fixes for CSS, darkness theme update

Browse Source
This commit is contained in:
ebolam
2022-08-21 14:25:47 -04:00
parent 0a2d0b9d2c
commit d69a0b307c
3 changed files with 53 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
static/koboldai.css
View File

@@ -67,11 +67,11 @@ input[type="range"]::-ms-fill-upper {
list-style: none; list-style: none;
/*margin: 200px 0 20px;*/ /*margin: 200px 0 20px;*/
padding: 0; padding: 0;
padding-left: 30px; /*Gui: this value should change to 10px when pinned*/ padding-left: 40px;
line-height: 24px; line-height: 24px;
height: 26px; height: 26px;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 12px;
font-family: verdana; font-family: verdana;
position: relative; position: relative;
} }
@@ -87,23 +87,22 @@ input[type="range"]::-ms-fill-upper {
-ms-user-select: none; /* Internet Explorer/Edge */ -ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */ supported by Chrome, Edge, Opera and Firefox */
border: 1px solid var(--tab_color); border: 1px solid #888;
background: var(--tab_color); background: var(--tab_color);
/*background: -o-linear-gradient(top, #337ab7 50%, #285070 100%); background: -o-linear-gradient(top, #337ab70 50%, #28507 100%);
background: -ms-linear-gradient(top, #337ab7 50%, #285070 100%); background: -ms-linear-gradient(top, #337ab70 50%, #28507 100%);
background: -moz-linear-gradient(top, #337ab7 50%, #285070 100%); background: -moz-linear-gradient(top, #337ab70 50%, #28507 100%);
background: -webkit-linear-gradient(top, #337ab7 50%, #285070 100%); background: -webkit-linear-gradient(top, #337ab70 50%, #28507 100%);
background: linear-gradient(top, #337ab7 50%, #285070 100%);*/ background: linear-gradient(top, #337ab70 50%, #28507 100%);
display: inline-block; display: inline-block;
position: relative; position: relative;
z-index: 0; z-index: 0;
border-radius: 6px 6px 6px 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-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; text-shadow: 0 1px #AAA;
margin: 0 -2px; margin: 0 -5px;
padding: 0 12px; padding: 0 20px;
} }
.tabrow span.selected { .tabrow span.selected {
background: #FFF; background: #FFF;
@@ -111,8 +110,6 @@ input[type="range"]::-ms-fill-upper {
z-index: 2; z-index: 2;
border-bottom-color: #FFF; border-bottom-color: #FFF;
} }
.tabrow:before { .tabrow:before {
position: absolute; position: absolute;
content: " "; content: " ";
@@ -124,7 +121,7 @@ input[type="range"]::-ms-fill-upper {
} }
.tabrow span:before, .tabrow span:before,
.tabrow span:after { .tabrow span:after {
border: 1px solid var(--tab_color); border: 1px solid #AAA;
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
width: 5px; width: 5px;
@@ -135,31 +132,19 @@ input[type="range"]::-ms-fill-upper {
left: -6px; left: -6px;
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 var(--tab_color); box-shadow: 2px 2px 0 #D1D1D1;
} }
.tabrow span:after { .tabrow span:after {
right: -6px; right: -6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px; border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 var(--tab_color); box-shadow: -2px 2px 0 #D1D1D1;
} }
.tabrow span.selected:before { .tabrow span.selected:before {
box-shadow: 4px 2px 0 #FFF; box-shadow: 2px 2px 0 #FFF;
} }
.tabrow span.selected:after { .tabrow span.selected:after {
box-shadow: -4px 2px 0 #FFF; box-shadow: -2px 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;
} }

29
static/koboldai.js
View File

@@ -49,6 +49,7 @@ map2.set(2, 'Top-p Sampling')
map2.set(3, 'Tail-free Sampling') map2.set(3, 'Tail-free Sampling')
map2.set(4, 'Typical Sampling') map2.set(4, 'Typical Sampling')
map2.set(5, 'Temperature') map2.set(5, 'Temperature')
var use_word_highlighting = true;
//-----------------------------------Server to UI Functions----------------------------------------------- //-----------------------------------Server to UI Functions-----------------------------------------------
function connect() { function connect() {
console.log("connected"); console.log("connected");
@@ -218,6 +219,7 @@ function do_story_text_updates(data) {
while (item.firstChild) { while (item.firstChild) {
item.removeChild(item.firstChild); item.removeChild(item.firstChild);
} }
if (use_word_highlighting) {
if (data.value.action['Selected Text'] == null) { if (data.value.action['Selected Text'] == null) {
var text_array = []; var text_array = [];
} else { } else {
@@ -236,6 +238,9 @@ function do_story_text_updates(data) {
} }
}); });
} else {
item.textContent = data.value.action['Selected Text'];
}
item.original_text = data.value.action['Selected Text']; item.original_text = data.value.action['Selected Text'];
item.setAttribute("world_info_uids", ""); item.setAttribute("world_info_uids", "");
item.classList.remove("pulse") item.classList.remove("pulse")
@@ -274,7 +279,7 @@ function do_story_text_updates(data) {
story_area.append(span); story_area.append(span);
span.scrollIntoView(); span.scrollIntoView(false);
assign_world_info_to_action(span, null); assign_world_info_to_action(span, null);
} }
@@ -323,7 +328,7 @@ function do_story_text_length_updates(data) {
} }
function do_probabilities(data) { function do_probabilities(data) {
console.log(data); //console.log(data);
if (document.getElementById('probabilities_'+data.value.id)) { if (document.getElementById('probabilities_'+data.value.id)) {
prob_area = document.getElementById('probabilities_'+data.value.id) prob_area = document.getElementById('probabilities_'+data.value.id)
} else { } else {
@@ -595,7 +600,7 @@ function load_popup(data) {
} }
function popup_items(data) { function popup_items(data) {
console.log(data); //console.log(data);
var popup_list = document.getElementById('popup_list'); var popup_list = document.getElementById('popup_list');
//first, let's clear out our existing data //first, let's clear out our existing data
while (popup_list.firstChild) { while (popup_list.firstChild) {
@@ -869,7 +874,7 @@ function show_model_menu(data) {
breadcrumbs.removeChild(breadcrumbs.firstChild); breadcrumbs.removeChild(breadcrumbs.firstChild);
} }
//add breadcrumbs //add breadcrumbs
console.log(data.breadcrumbs); //console.log(data.breadcrumbs);
for (item of data.breadcrumbs) { for (item of data.breadcrumbs) {
var button = document.createElement("button"); var button = document.createElement("button");
button.classList.add("breadcrumbitem"); button.classList.add("breadcrumbitem");
@@ -1429,7 +1434,7 @@ function show_error_message(data) {
//--------------------------------------------UI to Server Functions---------------------------------- //--------------------------------------------UI to Server Functions----------------------------------
function move_sample(direction) { function move_sample(direction) {
var previous = null; var previous = null;
console.log(direction); //console.log(direction);
for (const [index, temp] of Array.from(document.getElementsByClassName("sample_order")).entries()) { for (const [index, temp] of Array.from(document.getElementsByClassName("sample_order")).entries()) {
if (temp.classList.contains("selected")) { if (temp.classList.contains("selected")) {
if ((direction == 'up') && (index > 0)) { if ((direction == 'up') && (index > 0)) {
@@ -1547,7 +1552,7 @@ function send_world_info(uid) {
//--------------------------------------------General UI Functions------------------------------------ //--------------------------------------------General UI Functions------------------------------------
function Change_Theme(theme) { function Change_Theme(theme) {
console.log(theme); //console.log(theme);
var css = document.getElementById("CSSTheme"); var css = document.getElementById("CSSTheme");
css.setAttribute("href", "/themes/"+theme+".css"); css.setAttribute("href", "/themes/"+theme+".css");
create_theming_elements(); create_theming_elements();
@@ -1562,10 +1567,10 @@ function palette_color(item) {
function getAllCSSVariableNames(styleSheets = document.styleSheets){ function getAllCSSVariableNames(styleSheets = document.styleSheets){
var cssVars = []; var cssVars = [];
// loop each stylesheet // loop each stylesheet
console.log(styleSheets); //console.log(styleSheets);
for(var i = 0; i < styleSheets.length; i++){ for(var i = 0; i < styleSheets.length; i++){
console.log(styleSheets[i]); //console.log(styleSheets[i]);
console.log(styleSheets[i].ownerNode.attributes.id); //console.log(styleSheets[i].ownerNode.attributes.id);
// loop stylesheet's cssRules // loop stylesheet's cssRules
try{ // try/catch used because 'hasOwnProperty' doesn't work try{ // try/catch used because 'hasOwnProperty' doesn't work
for( var j = 0; j < styleSheets[i].cssRules.length; j++){ for( var j = 0; j < styleSheets[i].cssRules.length; j++){
@@ -1589,13 +1594,13 @@ function getAllCSSVariableNames(styleSheets = document.styleSheets){
} }
function create_theming_elements() { function create_theming_elements() {
console.log("Running theme editor"); //console.log("Running theme editor");
var cssVars = getAllCSSVariableNames(); var cssVars = getAllCSSVariableNames();
palette_table = document.createElement("table"); palette_table = document.createElement("table");
advanced_table = document.createElement("table"); advanced_table = document.createElement("table");
theme_area = document.getElementById("Palette"); theme_area = document.getElementById("Palette");
theme_area.append(palette_table); theme_area.append(palette_table);
console.log(cssVars); //console.log(cssVars);
//theme_area.append(advanced_table); //theme_area.append(advanced_table);
for (css_item of cssVars) { for (css_item of cssVars) {
if (css_item[0].includes("_palette")) { if (css_item[0].includes("_palette")) {
@@ -1699,7 +1704,7 @@ function preserve_game_space(preserve) {
function options_on_right(data) { function options_on_right(data) {
var r = document.querySelector(':root'); var r = document.querySelector(':root');
console.log("Setting cookie to: "+data); //console.log("Setting cookie to: "+data);
if (data) { if (data) {
setCookie("options_on_right", "true"); setCookie("options_on_right", "true");
r.style.setProperty('--story_pinned_areas', 'var(--story_pinned_areas_right)'); r.style.setProperty('--story_pinned_areas', 'var(--story_pinned_areas_right)');

6
themes/Darkness.css
View File

@@ -62,7 +62,7 @@
/*Side Menus*/ /*Side Menus*/
--tab_color: #1a625f; --tab_color: #1a625f;
--flyout_background: #1c1c1c; --flyout_background: #181818;
--flyout_background_pinned:var(--layer1_palette); --flyout_background_pinned:var(--layer1_palette);
--setting_background: #242424; --setting_background: #242424;
@@ -87,7 +87,7 @@
--wi_card_border_color: #002d6c00; --wi_card_border_color: #002d6c00;
--wi_card_border_color_to_ai: #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_text_color: #e0e0e0;
--wi_card_tag_bg_color: #242424; --wi_card_tag_bg_color: #242424;
@@ -127,7 +127,7 @@
--radius_settings_background: 10px; --radius_settings_background: 10px;
--radius_buttons: 5px; --radius_buttons: 5px;
--radius_item_popup: 5px; --radius_item_popup: 5px;
--radius_wi_card: 5px; --radius_wi_card: 10px;