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

improved tags styling

Browse Source
This commit is contained in:
RossAscends
2023-04-28 16:26:54 +09:00
parent ce9717ea76
commit 59575b9893
2 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -1474,7 +1474,7 @@
<hr> <hr>
<div id="tags_div"> <div id="tags_div">
<div class="margin-bot-10px">Tags</div> <!-- <div class="margin-bot-10px">Tags</div> -->
<input id="tagInput" class="text_pole" placeholder="Search / Create tags" maxlength="50" /> <input id="tagInput" class="text_pole" placeholder="Search / Create tags" maxlength="50" />
<div id="tagList" class="tags"></div> <div id="tagList" class="tags"></div>
</div> </div>

32
public/style.css
View File

@@ -859,6 +859,7 @@ input[type="file"] {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 5px;
} }
#rm_ch_create_block { #rm_ch_create_block {
@@ -988,7 +989,7 @@ select option:not(:checked) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin: 10px 5px; margin: 5px;
column-gap: 10px; column-gap: 10px;
} }
@@ -2322,6 +2323,10 @@ h5 {
grid-template-columns: 340px auto; grid-template-columns: 340px auto;
} }
#tags_div {
min-width: 0;
}
.tag { .tag {
border-radius: 5px; border-radius: 5px;
border-style: solid; border-style: solid;
@@ -2337,6 +2342,7 @@ h5 {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
width: fit-content; width: fit-content;
min-width: 0;
text-shadow: none !important; text-shadow: none !important;
} }
@@ -2349,23 +2355,37 @@ h5 {
} }
.tags { .tags {
margin: 5px 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
column-gap: 0.4rem; column-gap: 0.2rem;
row-gap: 0.4rem; row-gap: 0.2rem;
}
#tagList.tags {
margin: 5px 0;
} }
.tags.tags_inline { .tags.tags_inline {
position: absolute; position: absolute;
margin: 2px 10px; margin-right: 5px;
right: 0; right: 0;
opacity: 0.6; opacity: 0.6;
column-gap: 0.2rem; column-gap: 0.2rem;
flex-wrap: nowrap; row-gap: 0.2rem;
justify-content: flex-end; justify-content: flex-end;
max-width: 50%;
max-height: 100%;
overflow: hidden;
}
.tag_name {
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
white-space: nowrap;
} }
.tags_inline .tag { .tags_inline .tag {