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 @@
3248 </div>3248 </div>
3249 </div>3249 </div>
3250 <div id="InstructSettingsColumn" class="flex-container flexNoGap flexFlowColumn flex1">3250 <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>
3251 <div id="instructSettingsBlock">3269 <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
3271 <div class="flex-container" title="Select your current Instruct Template" data-i18n="[title]Select your current Instruct Template">3272 <div class="flex-container" title="Select your current Instruct Template" data-i18n="[title]Select your current Instruct Template">
3272 <select id="instruct_presets" data-preset-manager-for="instruct" class="flex1 text_pole"></select>3273 <select id="instruct_presets" data-preset-manager-for="instruct" class="flex1 text_pole"></select>
@@ -3431,21 +3432,22 @@
3431 </div>3432 </div>
3432 </div>3433 </div>
3433 <div id="SystemPromptColumn" class="flex-container flexNoGap flexFlowColumn flex1">3434 <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>
3434 <div id="SystemPromptBlock">3449 <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
3450 <div class="flex-container" title="Select your current System Prompt" data-i18n="[title]Select your current System Prompt">3452 <div class="flex-container" title="Select your current System Prompt" data-i18n="[title]Select your current System Prompt">
3451 <select id="sysprompt_select" data-preset-manager-for="sysprompt" class="flex1 text_pole"></select>3453 <select id="sysprompt_select" data-preset-manager-for="sysprompt" class="flex1 text_pole"></select>
@@ -5939,7 +5941,8 @@
5939 </div>5941 </div>
5940 <div class="mes_bias"></div>5942 <div class="mes_bias"></div>
5941 </div>5943 </div>
5942 <div class="swipe_right fa-solid fa-chevron-right" style="display: none;">5944 <div class="flex-container swipeRightBlock flexFlowColumn flexNoGap">
5945 <div class="swipe_right fa-solid fa-chevron-right" style="display: none;"></div>
5943 <div class="swipes-counter"></div>5946 <div class="swipes-counter"></div>
5944 </div>5947 </div>
5945 </div>5948 </div>
public/style.css+20 -3
@@ -978,13 +978,21 @@ body .panelControlBar {
978 justify-content: center;978 justify-content: center;
979 z-index: 9999;979 z-index: 9999;
980 grid-row-start: 2;980 grid-row-start: 2;
981 grid-column-start: 4;
982 flex-flow: column;
983 font-size: 30px;981 font-size: 30px;
984 cursor: pointer;982 cursor: pointer;
985 align-self: center;983 align-self: center;
984
985}
986.swipe_left{
987position: absolute;
988bottom: 15px;
989flex-flow: column;
990}
991
992.swipeRightBlock {
986 position: absolute;993 position: absolute;
987 bottom: 15px;994 right: 0;
995 bottom: 0;
988}996}
989997
990.swipes-counter {998.swipes-counter {
@@ -994,6 +1002,9 @@ body .panelControlBar {
994 font-family: var(--mainFontFamily);1002 font-family: var(--mainFontFamily);
995 font-weight: 400;1003 font-weight: 400;
996 align-self: center;1004 align-self: center;
1005 min-width: 40px;
1006 display: flex;
1007 justify-content: center;
997}1008}
9981009
999.swipe_left {1010.swipe_left {
@@ -1003,6 +1014,7 @@ body .panelControlBar {
10031014
1004.swipe_right {1015.swipe_right {
1005 right: 5px;1016 right: 5px;
1017 align-self:end;
1006}1018}
10071019
1008.ui-settings {1020.ui-settings {
@@ -2634,6 +2646,11 @@ select option:not(:checked) {
2634 color: var(--active) !important;2646 color: var(--active) !important;
2635}2647}
26362648
2649#instruct_enabled_label .menu_button:not(.toggleEnabled),
2650#sysprompt_enabled_label .menu_button:not(.toggleEnabled) {
2651 color: Red;
2652}
2653
2637.displayBlock {2654.displayBlock {
2638 display: block !important;2655 display: block !important;
2639}2656}