make AF panel toggles red and opaque when disabled

020741d78b403f302c5f6ee7cc7c928463e040f1

RossAscends <124905043+RossAscends@users.noreply.github.com>

Parents: 53424d4c8e5a8ee9b8d53723de27a2500aec6186
2 files changed, +56 -36Ignore whitespace
public/index.html+36 -33
@@ -3248,25 +3248,26 @@
32483248 </div>
32493249 </div>
32503250 <div id="InstructSettingsColumn" class="flex-container flexNoGap flexFlowColumn flex1">
3251+ <h4 class="standoutHeader title_restorable justifySpaceBetween">
3252+ <div class="flex-container">
3253+ <span data-i18n="Instruct Template">Instruct Template</span>
3254+ <a href="https://docs.sillytavern.app/usage/core-concepts/instructmode/" class="notes-link" target="_blank">
3255+ <span class="fa-solid fa-circle-question note-link-span"></span>
3256+ </a>
3257+ </div>
3258+ <div class="flex-container">
3259+ <label for="instruct_bind_to_context" class="checkbox_label flex1" title="Bind to Context&#10If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference." data-i18n="[title]instruct_bind_to_context">
3260+ <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />
3261+ <small><i class="fa-solid fa-link menu_button margin0"></i></small>
3262+ </label>
3263+ <label id="instruct_enabled_label"for="instruct_enabled" class="checkbox_label flex1" title="Enable Instruct Mode" data-i18n="[title]instruct_enabled">
3264+ <input id="instruct_enabled" type="checkbox" style="display:none;" />
3265+ <small><i class="fa-solid fa-power-off menu_button margin0"></i></small>
3266+ </label>
3267+ </div>
3268+ </h4>
32513269 <div id="instructSettingsBlock">
3252- <h4 class="standoutHeader title_restorable justifySpaceBetween">
3270+
3253- <div class="flex-container">
3254- <span data-i18n="Instruct Template">Instruct Template</span>
3255- <a href="https://docs.sillytavern.app/usage/core-concepts/instructmode/" class="notes-link" target="_blank">
3256- <span class="fa-solid fa-circle-question note-link-span"></span>
3257- </a>
3258- </div>
3259- <div class="flex-container">
3260- <label for="instruct_bind_to_context" class="checkbox_label flex1" title="Bind to Context&#10If enabled, Context templates will be automatically selected based on selected Instruct template name or by preference." data-i18n="[title]instruct_bind_to_context">
3261- <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />
3262- <small><i class="fa-solid fa-link menu_button margin0"></i></small>
3263- </label>
3264- <label for="instruct_enabled" class="checkbox_label flex1" title="Enable Instruct Mode" data-i18n="[title]instruct_enabled">
3265- <input id="instruct_enabled" type="checkbox" style="display:none;" />
3266- <small><i class="fa-solid fa-power-off menu_button margin0"></i></small>
3267- </label>
3268- </div>
3269- </h4>
32703271
32713272 <div class="flex-container" title="Select your current Instruct Template" data-i18n="[title]Select your current Instruct Template">
32723273 <select id="instruct_presets" data-preset-manager-for="instruct" class="flex1 text_pole"></select>
@@ -3431,21 +3432,22 @@
34313432 </div>
34323433 </div>
34333434 <div id="SystemPromptColumn" class="flex-container flexNoGap flexFlowColumn flex1">
3435+ <h4 class="standoutHeader title_restorable justifySpaceBetween">
3436+ <div class="flex-container">
3437+ <span data-i18n="System Prompt">System Prompt</span>
3438+ <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#system-prompt" class="notes-link" target="_blank">
3439+ <span class="fa-solid fa-circle-question note-link-span"></span>
3440+ </a>
3441+ </div>
3442+ <div class="flex-container">
3443+ <label id="sysprompt_enabled_label" for="sysprompt_enabled" class="checkbox_label flex1" title="Enable System Prompt" data-i18n="[title]sysprompt_enabled">
3444+ <input id="sysprompt_enabled" type="checkbox" style="display:none;" />
3445+ <small><i class="fa-solid fa-power-off menu_button margin0"></i></small>
3446+ </label>
3447+ </div>
3448+ </h4>
34343449 <div id="SystemPromptBlock">
3435- <h4 class="standoutHeader title_restorable justifySpaceBetween">
3450+
3436- <div class="flex-container">
3437- <span data-i18n="System Prompt">System Prompt</span>
3438- <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#system-prompt" class="notes-link" target="_blank">
3439- <span class="fa-solid fa-circle-question note-link-span"></span>
3440- </a>
3441- </div>
3442- <div class="flex-container">
3443- <label for="sysprompt_enabled" class="checkbox_label flex1" title="Enable System Prompt" data-i18n="[title]sysprompt_enabled">
3444- <input id="sysprompt_enabled" type="checkbox" style="display:none;" />
3445- <small><i class="fa-solid fa-power-off menu_button margin0"></i></small>
3446- </label>
3447- </div>
3448- </h4>
34493451
34503452 <div class="flex-container" title="Select your current System Prompt" data-i18n="[title]Select your current System Prompt">
34513453 <select id="sysprompt_select" data-preset-manager-for="sysprompt" class="flex1 text_pole"></select>
@@ -5939,7 +5941,8 @@
59395941 </div>
59405942 <div class="mes_bias"></div>
59415943 </div>
59425944 <div class="swipe_right faflex-solidcontainer fa-chevron-right"swipeRightBlock style="display:flexFlowColumn none;flexNoGap">
5945+ <div class="swipe_right fa-solid fa-chevron-right" style="display: none;"></div>
59435946 <div class="swipes-counter"></div>
59445947 </div>
59455948 </div>
public/style.css+20 -3
@@ -978,13 +978,21 @@ body .panelControlBar {
978978 justify-content: center;
979979 z-index: 9999;
980980 grid-row-start: 2;
981- grid-column-start: 4;
982- flex-flow: column;
983981 font-size: 30px;
984982 cursor: pointer;
985983 align-self: center;
984+
985+}
986+.swipe_left{
987+position: absolute;
988+bottom: 15px;
989+flex-flow: column;
990+}
991+
992+.swipeRightBlock {
986993 position: absolute;
987994 bottomright: 15px0;
995+ bottom: 0;
988996}
989997
990998.swipes-counter {
@@ -994,6 +1002,9 @@ body .panelControlBar {
9941002 font-family: var(--mainFontFamily);
9951003 font-weight: 400;
9961004 align-self: center;
1005+ min-width: 40px;
1006+ display: flex;
1007+ justify-content: center;
9971008}
9981009
9991010.swipe_left {
@@ -1003,6 +1014,7 @@ body .panelControlBar {
10031014
10041015.swipe_right {
10051016 right: 5px;
1017+ align-self:end;
10061018}
10071019
10081020.ui-settings {
@@ -2634,6 +2646,11 @@ select option:not(:checked) {
26342646 color: var(--active) !important;
26352647}
26362648
2649+#instruct_enabled_label .menu_button:not(.toggleEnabled),
2650+#sysprompt_enabled_label .menu_button:not(.toggleEnabled) {
2651+ color: Red;
2652+}
2653+
26372654.displayBlock {
26382655 display: block !important;
26392656}