1. Update spacing units to em 2. Hide reasoning icon by default 3. Make arrow scaleable
| @@ -347,7 +347,7 @@ input[type='checkbox']:focus-visible { | |||
| 347 | border-left: 2px solid var(--SmartThemeEmColor); | 347 | border-left: 2px solid var(--SmartThemeEmColor); |
| 348 | border-radius: 2px; | 348 | border-radius: 2px; |
| 349 | padding: 5px; | 349 | padding: 5px; |
| 350 | margin-bottom: 0.5rem; | 350 | margin-bottom: 0.5em; |
| 351 | overflow-y: auto; | 351 | overflow-y: auto; |
| 352 | color: var(--SmartThemeEmColor); | 352 | color: var(--SmartThemeEmColor); |
| 353 | } | 353 | } |
| @@ -355,6 +355,7 @@ input[type='checkbox']:focus-visible { | |||
| 355 | .mes_reasoning_details { | 355 | .mes_reasoning_details { |
| 356 | margin-right: var(--mes-right-spacing); | 356 | margin-right: var(--mes-right-spacing); |
| 357 | } | 357 | } |
| 358 | |||
| 358 | .mes_reasoning_details .mes_reasoning_summary { | 359 | .mes_reasoning_details .mes_reasoning_summary { |
| 359 | margin-right: calc(var(--mes-right-spacing) * -1); | 360 | margin-right: calc(var(--mes-right-spacing) * -1); |
| 360 | } | 361 | } |
| @@ -383,11 +384,17 @@ input[type='checkbox']:focus-visible { | |||
| 383 | cursor: pointer; | 384 | cursor: pointer; |
| 384 | position: relative; | 385 | position: relative; |
| 385 | user-select: none; | 386 | user-select: none; |
| 386 | margin: 0.5rem 2px; | 387 | margin: 0.5em 2px; |
| 387 | padding: 7px 14px; | 388 | padding: 7px 14px; |
| 388 | border-radius: 10px; | 389 | border-radius: 10px; |
| 389 | background-color: var(--grey30); | 390 | background-color: var(--grey30); |
| 390 | font-size: calc(var(--mainFontSize) * 0.9); | 391 | font-size: calc(var(--mainFontSize) * 0.9); |
| 392 | align-items: baseline; | ||
| 393 | } | ||
| 394 | |||
| 395 | /* TWIMC: Remove with custom CSS to show the icon */ | ||
| 396 | .mes_reasoning_header > .icon-svg { | ||
| 397 | display: none; | ||
| 391 | } | 398 | } |
| 392 | 399 | ||
| 393 | @supports not selector(:has(*)) { | 400 | @supports not selector(:has(*)) { |
| @@ -407,10 +414,9 @@ input[type='checkbox']:focus-visible { | |||
| 407 | } | 414 | } |
| 408 | 415 | ||
| 409 | .mes_reasoning_details .mes_reasoning_arrow { | 416 | .mes_reasoning_details .mes_reasoning_arrow { |
| 410 | font-size: 10px; | 417 | font-size: calc(var(--mainFontSize) * 0.7); |
| 411 | width: 10px; | 418 | width: calc(var(--mainFontSize) * 0.7); |
| 412 | height: 10px; | 419 | height: calc(var(--mainFontSize) * 0.7); |
| 413 | margin-top: 5px; | ||
| 414 | } | 420 | } |
| 415 | 421 | ||
| 416 | .mes_reasoning_details:not([open]) .mes_reasoning_arrow { | 422 | .mes_reasoning_details:not([open]) .mes_reasoning_arrow { |
| @@ -4251,15 +4257,15 @@ input[type="range"]::-webkit-slider-thumb { | |||
| 4251 | 4257 | ||
| 4252 | .mes_reasoning_actions { | 4258 | .mes_reasoning_actions { |
| 4253 | margin: 0; | 4259 | margin: 0; |
| 4254 | margin-top: 0.5rem; | 4260 | margin-top: 0.5em; |
| 4255 | } | 4261 | } |
| 4256 | 4262 | ||
| 4257 | .mes_edit_buttons .menu_button, | 4263 | .mes_edit_buttons .menu_button, |
| 4258 | .mes_reasoning_actions .edit_button { | 4264 | .mes_reasoning_actions .edit_button { |
| 4259 | opacity: 0.5; | 4265 | opacity: 0.5; |
| 4260 | padding: 0px; | 4266 | padding: 0px; |
| 4261 | font-size: 1rem; | 4267 | font-size: 1em; |
| 4262 | height: 2rem; | 4268 | height: 2em; |
| 4263 | margin-top: 0; | 4269 | margin-top: 0; |
| 4264 | margin-bottom: 0; | 4270 | margin-bottom: 0; |
| 4265 | aspect-ratio: 1 / 1; | 4271 | aspect-ratio: 1 / 1; |
| @@ -4269,7 +4275,7 @@ input[type="range"]::-webkit-slider-thumb { | |||
| 4269 | } | 4275 | } |
| 4270 | 4276 | ||
| 4271 | .mes_reasoning_actions .edit_button { | 4277 | .mes_reasoning_actions .edit_button { |
| 4272 | margin-bottom: 0.5rem; | 4278 | margin-bottom: 0.5em; |
| 4273 | opacity: 1; | 4279 | opacity: 1; |
| 4274 | filter: brightness(0.7); | 4280 | filter: brightness(0.7); |
| 4275 | } | 4281 | } |