Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add optional below-chat Present Characters panel (#3)

Browse Source
This commit is contained in:
Tremendoussly
2026-03-08 22:58:42 +01:00
committed by GitHub
parent ae9e44eafb
commit 2f98686e60
16 changed files with 593 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+138
View File
@@ -15,6 +15,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-panel,
#rpg-thought-panel,
#rpg-thought-icon,
#rpg-alt-present-characters,
.rpg-mobile-toggle {
--rpg-bg: var(--SmartThemeBlurTintColor, rgba(26, 26, 46, 0.9));
--rpg-accent: var(--black30a, rgba(22, 33, 62, 0.9));
@@ -3256,6 +3257,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Apply sci-fi theme to thought panel */
#rpg-thought-panel[data-theme="sci-fi"],
#rpg-thought-icon[data-theme="sci-fi"],
#rpg-alt-present-characters[data-theme="sci-fi"],
.rpg-mobile-toggle[data-theme="sci-fi"] {
--rpg-bg: #0a0e27;
--rpg-accent: #1a1f3a;
@@ -3304,6 +3306,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Apply fantasy theme to thought panel */
#rpg-thought-panel[data-theme="fantasy"],
#rpg-thought-icon[data-theme="fantasy"],
#rpg-alt-present-characters[data-theme="fantasy"],
.rpg-mobile-toggle[data-theme="fantasy"] {
--rpg-bg: #2b1810;
--rpg-accent: #3d2414;
@@ -3361,6 +3364,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Apply cyberpunk theme to thought panel */
#rpg-thought-panel[data-theme="cyberpunk"],
#rpg-thought-icon[data-theme="cyberpunk"],
#rpg-alt-present-characters[data-theme="cyberpunk"],
.rpg-mobile-toggle[data-theme="cyberpunk"] {
--rpg-bg: #000000;
--rpg-accent: #0d0d0d;
@@ -5022,6 +5026,140 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
}
/* ============================================
BELOW-CHAT PRESENT CHARACTERS
============================================ */
#rpg-alt-present-characters {
margin: 0 0 10px;
padding: 8px 10px 8px;
border-radius: 14px;
border: 1px solid var(--rpg-border, rgba(255, 255, 255, 0.14));
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%),
linear-gradient(135deg, var(--rpg-accent, rgba(34, 40, 60, 0.94)) 0%, var(--rpg-bg, rgba(18, 21, 34, 0.96)) 100%);
box-shadow: 0 12px 28px var(--rpg-shadow, rgba(0, 0, 0, 0.24));
color: var(--rpg-text, var(--SmartThemeBodyColor, #ecf0f1));
backdrop-filter: blur(12px);
}
.rpg-alt-present-characters__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.rpg-alt-present-characters__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.rpg-alt-present-characters__title i {
color: var(--rpg-highlight, #e94560);
}
.rpg-alt-present-characters__count {
min-width: 24px;
height: 24px;
padding: 0 7px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--rpg-border, rgba(255, 255, 255, 0.14));
color: var(--rpg-text, var(--SmartThemeBodyColor, #ecf0f1));
font-size: 0.74rem;
font-weight: 700;
}
.rpg-alt-present-characters__scroll {
overflow-x: auto;
overflow-y: hidden;
padding-top: 2px;
scrollbar-width: thin;
transform: scaleY(-1);
}
.rpg-alt-present-characters__track {
display: flex;
gap: 10px;
width: max-content;
min-width: 100%;
transform: scaleY(-1);
padding-bottom: 2px;
}
.rpg-alt-present-character {
flex: 0 0 98px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 98px;
}
.rpg-alt-present-character__portrait {
position: relative;
aspect-ratio: 11 / 15;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14);
background: var(--rpg-bg, rgba(18, 21, 34, 0.96));
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.rpg-alt-present-character__portrait:hover {
transform: translateY(-2px);
border-color: var(--rpg-highlight, #e94560);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.22);
}
.rpg-alt-present-character__portrait img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.rpg-alt-present-character__meta {
display: flex;
flex-direction: column;
min-width: 0;
}
.rpg-alt-present-character__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rpg-alt-present-character__name {
font-size: 0.78rem;
font-weight: 600;
line-height: 1.1;
text-align: center;
}
@media (max-width: 768px) {
#rpg-alt-present-characters {
margin-bottom: 8px;
padding: 7px 9px 7px;
border-radius: 12px;
}
.rpg-alt-present-character {
flex-basis: 84px;
min-width: 84px;
}
}
/* ============================================
CHAT THOUGHT OVERLAYS
============================================ */