Skip to content

Commit fc56939

Browse files
ebolamebolam
authored
Merge pull request KoboldAI#197 from LightSaveUs/UI2
Additional Visual Improvements
2 parents 8b044e1 + 43c48aa commit fc56939

File tree

7 files changed

+89
-18
lines changed

7 files changed

+89
-18
lines changed

‎static/koboldai.css‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -375,7 +375,7 @@ border-top-right-radius: var(--tabs_rounding);
375375

376376
.search_icon {
377377
position: absolute;
378-
top:10px;
378+
top:8px;
379379
color: var(--text);
380380
left: calc(var(--flyout_menu_width) - 133px);
381381
z-index:50;
@@ -686,17 +686,17 @@ border-top-right-radius: var(--tabs_rounding);
686686

687687
.bias_header_phrase {
688688
grid-area: phrase;
689-
font-size: calc(0.9em + var(--font_size_adjustment));
689+
font-size: calc(1.1em + var(--font_size_adjustment));
690690
}
691691

692692
.bias_header_score {
693693
grid-area: percent;
694-
font-size: calc(0.9em + var(--font_size_adjustment));
694+
font-size: calc(1.1em + var(--font_size_adjustment));
695695
}
696696

697697
.bias_header_max {
698698
grid-area: max;
699-
font-size: calc(0.9em + var(--font_size_adjustment));
699+
font-size: calc(1.1em + var(--font_size_adjustment));
700700
}
701701

702702
/* Theme */
@@ -1361,7 +1361,7 @@ body {
13611361
#themetext{
13621362
height: 100%;
13631363
width: 100%;
1364-
padding: 5px;
1364+
padding: 10px;
13651365
grid-area: textarea;
13661366
border-radius: var(--radius_inputbox);
13671367
}
@@ -1853,17 +1853,14 @@ body {
18531853
#context-viewer-header > h3 {
18541854
margin: 0px;
18551855
margin-top: 3px;
1856+
margin-right: 5px;
18561857
}
18571858

18581859
#context-container {
18591860
overflow-y: auto;
18601861
height: 100%;
18611862
flex-grow: 1;
1862-
padding: 0px 10px;
1863-
1864-
/* HACK: This is a visually ugly hack to avoid cutting of token tooltips on
1865-
the first line. */
1866-
padding-top: 15px;
1863+
padding: 15px 12px 15px 12px;
18671864
}
18681865

18691866
.context-symbol {
@@ -2376,7 +2373,7 @@ body {
23762373
grid-area: textarea;
23772374
background-color: var(--input_background);
23782375
color: var(--input_text);
2379-
padding: 5px;
2376+
padding: 10px;
23802377
resize: none;
23812378
border-color: white;
23822379
border-width: 1px;

‎templates/settings flyout.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ <h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined
153153
<li class="sample_order cursor" onclick="select_sample(this);">Typical Sampling</li>
154154
<li class="sample_order cursor" onclick="select_sample(this);">Temperature</li>
155155
</ul>
156-
<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
156+
<div style="display:flex;flex-direction:column;margin-top: 25px;">
157157
<div class="material-icons-outlined cursor" onclick="move_sample('up');">arrow_upward</div>
158158
<div class="material-icons-outlined cursor" onclick="move_sample('down');">arrow_downward</div>
159159

‎templates/story flyout.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ <h4 class="section_header"><label for="notes">Notes</label></h4>
5252
</div>
5353
</div>
5454
<div id="story_menu_wi" class="story_category_area tab-target tab-target-story hidden">
55-
<h4 class="section_header" style="margin-left: 10px;">World Info</h4>
55+
<h4 class="section_header" style="margin-left: 12px;">World Info</h4>
5656
<span class="help_text" style="margin-left: 20px;">
5757
Lore information, which the AI recalls by certain words.
5858
<span class="helpicon material-icons-outlined" title="Use this instead of Memory for information on things like characters, objects, events, places, and anything else with detail.">help_icon</span>

‎themes/Darkness.css‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
Name: Darkness
33
Author: LightSaveUs
4-
Version: 0.3.2
4+
Version: 0.3.3
55
Description: A theme inspired by the AI Dungeon interface.
66
*/
77

@@ -276,6 +276,22 @@ span.material-icons-outlined.cursor.search_icon {
276276
filter: brightness(100%) !important;
277277
}
278278

279+
.substitution-card > .card-left > .material-icons-outlined {
280+
color: #999 !important;
281+
}
282+
283+
.substitution-card > .card-left > .material-icons-outlined:hover {
284+
color: #e0e0e0 !important;
285+
}
286+
287+
.true-t + label::before {
288+
color: #999 !important;
289+
}
290+
291+
.true-t:checked + label::before {
292+
color: #e0e0e0 !important;
293+
}
294+
279295
/* Import */
280296

281297
a {
@@ -284,7 +300,7 @@ a {
284300

285301
.form-control {
286302
border: none;
287-
color: #555 !important;
303+
color: #148883 !important;
288304
background-color: #424243 !important;
289305
}
290306

‎themes/Monochrome.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
Name: Monochrome
33
Author: LightSaveUs
4-
Version: 0.6.1
4+
Version: 0.6.2
55
Description: A theme inspired by the NovelAI interface.
66
*/
77

@@ -242,6 +242,10 @@
242242
filter: brightness(120%) !important;
243243
}
244244

245+
#new-sub-card:hover {
246+
filter: brightness(120%) !important;
247+
}
248+
245249
/* Context Menu */
246250

247251
#context-menu {
@@ -288,6 +292,22 @@ span.helpicon.material-icons-outlined:hover {
288292
transform: scale(1) !important;
289293
}
290294

295+
.substitution-card > .card-left > .material-icons-outlined {
296+
color: #999 !important;
297+
}
298+
299+
.substitution-card > .card-left > .material-icons-outlined:hover {
300+
color: #e0e0e0 !important;
301+
}
302+
303+
.true-t + label::before {
304+
color: #999 !important;
305+
}
306+
307+
.true-t:checked + label::before {
308+
color: #e0e0e0 !important;
309+
}
310+
291311
/* Import */
292312

293313
a {
@@ -296,6 +316,7 @@ a {
296316

297317
.form-control {
298318
border: none;
319+
color: #e0e0e0 !important;
299320
background-color: #25323d !important;
300321
}
301322

‎themes/Nostalgia.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
Name: Nostalgia
33
Author: LightSaveUs
4-
Version: 0.2.2
4+
Version: 0.2.3
55
Description: A theme inspired by the previous KoboldAI interface.
66
*/
77

@@ -259,6 +259,24 @@
259259
background-color: #212122 !important;
260260
}
261261

262+
/* Icons */
263+
264+
.substitution-card > .card-left > .material-icons-outlined {
265+
color: #999 !important;
266+
}
267+
268+
.substitution-card > .card-left > .material-icons-outlined:hover {
269+
color: #fff !important;
270+
}
271+
272+
.true-t + label::before {
273+
color: #999 !important;
274+
}
275+
276+
.true-t:checked + label::before {
277+
color: #fff !important;
278+
}
279+
262280
/* Import */
263281

264282
a {
@@ -267,6 +285,7 @@ a {
267285

268286
.form-control {
269287
background-color: #404040 !important;
288+
color: #3bf723 !important;
270289
border: none;
271290
}
272291

‎themes/Unicorn.css‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
Name: Unicorn
33
Author: LightSaveUs
4-
Version: 0.3.3
4+
Version: 0.3.4
55
Description: A theme inspired by the DreamilyAI interface.
66
*/
77

@@ -302,6 +302,23 @@ span.material-icons-outlined.cursor.search_icon {
302302
filter: brightness(100%) !important;
303303
}
304304

305+
306+
.substitution-card > .card-left > .material-icons-outlined {
307+
color: #999 !important;
308+
}
309+
310+
.substitution-card > .card-left > .material-icons-outlined:hover {
311+
color: #464646 !important;
312+
}
313+
314+
.true-t + label::before {
315+
color: #999 !important;
316+
}
317+
318+
.true-t:checked + label::before {
319+
color: #dc6872 !important;
320+
}
321+
305322
/* Import */
306323

307324
a {
@@ -310,6 +327,7 @@ a {
310327

311328
.form-control {
312329
border: none;
330+
color: #e26771 !important;
313331
transform: translateX(6px)!important;
314332
background-color: #e2e2e2 !important;
315333
}

0 commit comments

Comments
 (0)