Improvement: Enhanced UI Consistency (#4499) * Improvement: Enhanced UI Consistency - Added a class to `<div class="inline-drawer-toggle inline-drawer-header">` in **AI Response Configuration** and **API Connections** menus to match the styling of similar elements in **User Settings** - Improved spacing and sizing for buttons such as `.bg_example .jg-menu` in the **Backgrounds** menu. The previous widths and gaps were too small, often causing accidental taps (especially on mobile devices) * fix * Adjust padding and background color in style.css * Update inline drawer classes for configuration sections * Remove border styles from expandable sections * fix * fix * fix(sad) * Adjust desktop bg_list width --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

5aa1c8fbacfdaf722779e494c9f8b8e1781fbab6

Rivelle <rivelle.days@gmail.com>

Signed
Parents: 862c2b7ba3da1295b0547ae125e8960393452b87
3 files changed, +10 -6Showing whitespace changes
public/css/backgrounds.css+7 -3
@@ -146,11 +146,13 @@ body.reduced-motion #bg_custom {
146 right: 2px;146 right: 2px;
147 background-color: rgba(0, 0, 0, 0.5);147 background-color: rgba(0, 0, 0, 0.5);
148 border-radius: 8px;148 border-radius: 8px;
149 gap: 2px;149 gap: 3px;
150 padding: 3px;150 padding: 3px 5px;
151 z-index: 3;151 z-index: 3;
152 backdrop-filter: blur(4px);152 backdrop-filter: blur(4px);
153 border: 1px solid var(--SmartThemeBorderColor);153 border: 1px solid var(--SmartThemeBorderColor);
154 justify-items: center;
155 align-items: center;
154156
155 opacity: 0;157 opacity: 0;
156 visibility: hidden;158 visibility: hidden;
@@ -168,11 +170,13 @@ body.reduced-motion #bg_custom {
168170
169.bg_example .jg-button {171.bg_example .jg-button {
170 display: flex;172 display: flex;
173 width: 30px;
174 height: 30px;
171 align-items: center;175 align-items: center;
172 justify-content: center;176 justify-content: center;
173 color: white;177 color: white;
174 padding: 5px;178 padding: 5px;
175 font-size: 1.2em;179 font-size: 1.1em;
176 border-radius: 6px;180 border-radius: 6px;
177 transition: background-color var(--animation-duration) ease;181 transition: background-color var(--animation-duration) ease;
178}182}
public/css/mobile-styles.css+2 -2
@@ -47,8 +47,8 @@
47 position: absolute;47 position: absolute;
48 top: 5px;48 top: 5px;
49 right: 5px;49 right: 5px;
50 width: 28px;50 width: 30px;
51 height: 28px;51 height: 30px;
52 background-color: rgba(0, 0, 0, 0.4);52 background-color: rgba(0, 0, 0, 0.4);
53 color: white;53 color: white;
54 border-radius: 6px;54 border-radius: 6px;
public/style.css+1 -1
@@ -3239,7 +3239,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
3239.bg_list {3239.bg_list {
3240 display: flex;3240 display: flex;
3241 flex-wrap: wrap;3241 flex-wrap: wrap;
3242 width: calc(var(--sheldWidth) - 10px);3242 width: calc(var(--sheldWidth) - 15px);
3243 max-width: 100vw;3243 max-width: 100vw;
3244 max-width: 100dvw;3244 max-width: 100dvw;
3245 justify-content: space-evenly;3245 justify-content: space-evenly;