From 7d4e689bec8fb73e0eb85f3dc060939027294899 Mon Sep 17 00:00:00 2001 From: Kristan Schlikow Date: Tue, 9 Apr 2024 19:03:35 +0200 Subject: [PATCH 1/4] Update layout for avatar tags and controls --- public/css/mobile-styles.css | 5 +- public/css/tags.css | 2 +- public/index.html | 132 +++++++++++++++++------------------ public/style.css | 30 ++++++-- 4 files changed, 93 insertions(+), 76 deletions(-) diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css index 3156e9207..5a27ed760 100644 --- a/public/css/mobile-styles.css +++ b/public/css/mobile-styles.css @@ -208,7 +208,6 @@ #cfgConfig, #logprobsViewer, #movingDivs > div { - height: calc(100vh - 45px); height: calc(100svh - 45px); min-width: 100% !important; width: 100% !important; @@ -221,6 +220,7 @@ top: var(--topBarBlockSize) !important; left: 0 !important; backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); + padding-right: 15px; } #floatingPrompt, @@ -241,6 +241,9 @@ /* .avatar_div { margin-top: 5px; } */ + #avatar_controls { + padding: + } #character_popup { width: 100%; diff --git a/public/css/tags.css b/public/css/tags.css index 8c25eb1dd..11806c69a 100644 --- a/public/css/tags.css +++ b/public/css/tags.css @@ -99,7 +99,7 @@ #bulkTagsList, #tagList.tags { - margin: 2px 0; + margin: 5px 0; } #bulkTagsList, diff --git a/public/index.html b/public/index.html index cd5cf7d59..7c9f9deee 100644 --- a/public/index.html +++ b/public/index.html @@ -4150,7 +4150,7 @@
-
+
@@ -4187,76 +4187,74 @@ Tokens: counting... -
- -
-
-
-
-
- - - -
- -
-
- - -
- -
-
-
diff --git a/public/style.css b/public/style.css index 2ff9ef394..04e5cf64d 100644 --- a/public/style.css +++ b/public/style.css @@ -939,8 +939,8 @@ body.reduced-motion #bg_custom { } .avatar img { - width: var(--avatar-base-width); - height: var(--avatar-base-height); + width: calc(var(--avatar-base-width) + 5px); + height: calc(var(--avatar-base-height) + 5px); object-fit: cover; object-position: center center; border-radius: var(--avatar-base-border-radius-round); @@ -985,9 +985,7 @@ body.reduced-motion #bg_custom { } .avatars_inline .avatar { - margin-top: calc(var(--avatar-base-border-radius)); - margin-left: calc(var(--avatar-base-border-radius)); - margin-bottom: calc(var(--avatar-base-border-radius)); + margin: calc(var(--avatar-base-border-radius)); } .avatars_inline .avatar:last-of-type { @@ -1652,6 +1650,7 @@ input[type=search]:focus::-webkit-search-cancel-button { .missing-avatar.inline_avatar { padding: unset; border-radius: var(--avatar-base-border-radius-round); + width: fit-content; } /*applies to char list and mes_text char display name*/ @@ -2000,6 +1999,19 @@ grammarly-extension { justify-content: center; align-items: center; align-self: center !important; + width: 100%; + height: 100%; + /* Avoids cutting off the box shadow on the avatar*/ + margin: 10px; +} + +#avatar_controls { + height: 100%; + width: 100%; + flex-grow: 1; + justify-content: flex-end; + flex-flow: column; + padding: 10px 10px 10px 0; } #description_div, @@ -2210,11 +2222,11 @@ grammarly-extension { font-weight: bold; padding: 5px; margin: 0; - height: 26px; filter: grayscale(0.5); text-align: center; font-size: 17px; aspect-ratio: 1 / 1; + flex: 0.075; } .menu_button:hover, @@ -2633,7 +2645,11 @@ input[type="range"]::-webkit-slider-thumb { color: var(--SmartThemeBodyColor); } -#char-management-dropdown, +#char-management-dropdown { + height: 100%; + margin-bottom: 0; +} + #tagInput { height: 26px; margin-bottom: 0; From d4adbf496f722046cea2055603ed27630e5ad33d Mon Sep 17 00:00:00 2001 From: Kristan Schlikow Date: Tue, 9 Apr 2024 19:25:56 +0200 Subject: [PATCH 2/4] Address styling issues --- public/css/mobile-styles.css | 8 +++++--- public/style.css | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css index 5a27ed760..c5e4eb1a7 100644 --- a/public/css/mobile-styles.css +++ b/public/css/mobile-styles.css @@ -208,6 +208,8 @@ #cfgConfig, #logprobsViewer, #movingDivs > div { + /* 100vh are fallback units for browsers that don't support svh */ + height: calc(100vh - 45px); height: calc(100svh - 45px); min-width: 100% !important; width: 100% !important; @@ -220,6 +222,9 @@ top: var(--topBarBlockSize) !important; left: 0 !important; backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); + } + + #right-nav-panel { padding-right: 15px; } @@ -241,9 +246,6 @@ /* .avatar_div { margin-top: 5px; } */ - #avatar_controls { - padding: - } #character_popup { width: 100%; diff --git a/public/style.css b/public/style.css index 04e5cf64d..bc85a734b 100644 --- a/public/style.css +++ b/public/style.css @@ -939,8 +939,8 @@ body.reduced-motion #bg_custom { } .avatar img { - width: calc(var(--avatar-base-width) + 5px); - height: calc(var(--avatar-base-height) + 5px); + width: var(--avatar-base-width); + height: var(--avatar-base-height); object-fit: cover; object-position: center center; border-radius: var(--avatar-base-border-radius-round); From b811d690685bb9958563f17963902f5bb83e1814 Mon Sep 17 00:00:00 2001 From: Kristan Schlikow Date: Wed, 10 Apr 2024 19:10:15 +0200 Subject: [PATCH 3/4] Fix sizing on smaller resolutions --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 7c9f9deee..95595144a 100644 --- a/public/index.html +++ b/public/index.html @@ -4187,7 +4187,7 @@ Tokens: counting...
-
+
-
+