mirror of
https://github.com/KoboldAI/KoboldAI-Client.git
synced 2025-06-05 21:59:24 +02:00
Tab fixes for CSS, darkness theme update
This commit is contained in:
ebolam
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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)');
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user