make AF panel toggles red and opaque when disabled

020741d78b403f302c5f6ee7cc7c928463e040f1

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

public/index.html+8 -5 Viewed

                         </div>
                     </div>
                     <div id="InstructSettingsColumn" class="flex-container flexNoGap flexFlowColumn flex1">
 -                        <div id="instructSettingsBlock">
                         <h4 class="standoutHeader title_restorable justifySpaceBetween">
                             <div class="flex-container">
                                 <span data-i18n="Instruct Template">Instruct Template</span>

                                     <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />
                                     <small><i class="fa-solid fa-link menu_button margin0"></i></small>
                                 </label>
                                                                     <label id="instruct_enabled_label"for="instruct_enabled" class="checkbox_label flex1" title="Enable Instruct Mode" data-i18n="[title]instruct_enabled">
                                     <input id="instruct_enabled" type="checkbox" style="display:none;" />
                                     <small><i class="fa-solid fa-power-off menu_button margin0"></i></small>
                                 </label>
                             </div>
                         </h4>
 +                        <div id="instructSettingsBlock">
++
                             <div class="flex-container" title="Select your current Instruct Template" data-i18n="[title]Select your current Instruct Template">
                                 <select id="instruct_presets" data-preset-manager-for="instruct" class="flex1 text_pole"></select>

                         </div>
                     </div>
                     <div id="SystemPromptColumn" class="flex-container flexNoGap flexFlowColumn flex1">
 -                        <div id="SystemPromptBlock">
                         <h4 class="standoutHeader title_restorable justifySpaceBetween">
                             <div class="flex-container">
                                 <span data-i18n="System Prompt">System Prompt</span>

                                 </a>
                             </div>
                             <div class="flex-container">
                                                                     <label id="sysprompt_enabled_label" for="sysprompt_enabled" class="checkbox_label flex1" title="Enable System Prompt" data-i18n="[title]sysprompt_enabled">
                                     <input id="sysprompt_enabled" type="checkbox" style="display:none;" />
                                     <small><i class="fa-solid fa-power-off menu_button margin0"></i></small>
                                 </label>
                             </div>
                         </h4>
 +                        <div id="SystemPromptBlock">
++
                             <div class="flex-container" title="Select your current System Prompt" data-i18n="[title]Select your current System Prompt">
                                 <select id="sysprompt_select" data-preset-manager-for="sysprompt" class="flex1 text_pole"></select>

                     </div>
                     <div class="mes_bias"></div>
                 </div>
                 <div class="swipe_right faflex-solidcontainer fa-chevron-right"swipeRightBlock style="display:flexFlowColumn none;flexNoGap">
 +                    <div class="swipe_right fa-solid fa-chevron-right" style="display: none;"></div>
                     <div class="swipes-counter"></div>
                 </div>
             </div>

public/style.css+19 -2 Viewed

     justify-content: center;
     z-index: 9999;
     grid-row-start: 2;
 -    grid-column-start: 4;
 -    flex-flow: column;
     font-size: 30px;
     cursor: pointer;
     align-self: center;
++
 +}
 +.swipe_left{
 position: absolute;
 bottom: 15px;
 +flex-flow: column;
 +}
++
 +.swipeRightBlock {
 +    position: absolute;
 +    right: 0;
 +    bottom: 0;
+}
 .swipes-counter {

     font-family: var(--mainFontFamily);
     font-weight: 400;
     align-self: center;
 +    min-width: 40px;
 +    display: flex;
 +    justify-content: center;
+}
 .swipe_left {

 .swipe_right {
     right: 5px;
 +    align-self:end;
+}
 .ui-settings {

     color: var(--active) !important;
+}
 +#instruct_enabled_label .menu_button:not(.toggleEnabled),
 +#sysprompt_enabled_label .menu_button:not(.toggleEnabled) {
 + color: Red;
 +}
++
 .displayBlock {
     display: block !important;
+}