From adef1997671d4a17edd14dfb75cadf7ecd4011e6 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Thu, 2 Nov 2023 13:32:57 +0900
Subject: [PATCH] fix slider width on high zoom, restyle ? links

---
 public/index.html | 114 +++++++++++++++++++++++-----------------------
 public/style.css  |  27 +----------
 2 files changed, 59 insertions(+), 82 deletions(-)

diff --git a/public/index.html b/public/index.html
index 5a91269c0..f9a32a40a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -122,14 +122,14 @@
                 <div data-i18n="clickslidertips" class="toggle-description wide100p editable-slider-notification">
                     Click slider numbers to input manually.
                 </div>
-                <div name="samplerHelpButton" class="note-link-span-lrg fa-solid fa-question fa-2x"></div>
+                <a href="https://docs.sillytavern.app/usage/api-connections/koboldai/" target="_blank" title="Improved Samplers documentation coming soon."><span name="samplerHelpButton" class="note-link-span topRightInset fa-solid fa-circle-question"></span></a>
                 <div class="scrollableInner">
                     <div class="flex-container" id="ai_response_configuration">
                         <div id="respective-presets-block" class="width100p">
                             <div id="kobold_api-presets">
                                 <h4 class="margin0"><span data-i18n="kobldpresets">Kobold Presets</span>
                                     <a href="https://docs.sillytavern.app/usage/api-connections/koboldai/" class="notes-link" target="_blank">
-                                        <span class="note-link-span">?</span>
+                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                     </a>
                                 </h4>
                                 <div class="flex-container">
@@ -148,7 +148,7 @@
                                 <h4 class="margin0">
                                     <span data-i18n="novelaipreserts">NovelAI Presets</span>
                                     <a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank">
-                                        <span class="note-link-span">?</span>
+                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                     </a>
                                 </h4>
                                 <div class="flex-container">
@@ -215,7 +215,7 @@
                         <div id="common-gen-settings-block" class="width100p">
                             <div id="pro-settings-block" class="flex-container gap10h5v justifyCenter">
 
-                                <div id="amount_gen_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="response legth(tokens)">
+                                <div id="amount_gen_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="response legth(tokens)">
                                     <small>Response Length (tokens)</small>
                                     <input class="neo-range-slider" type="range" id="amount_gen" name="volume" min="16" max="1024" step="1">
                                     <div data-randomization-disabled="true" class="wide100p">
@@ -225,12 +225,12 @@
                                         <label class="checkbox_label" for="streaming_textgenerationwebui">
                                             <input type="checkbox" id="streaming_textgenerationwebui" />
                                             <small data-i18n="Streaming">Stream
-                                                <div class="margin5 fa-solid fa-question opacity50p hoverglow" title="Display the response bit by bit as it is generated.&#13;When this is off, responses will be displayed all at once when they are complete."></div>
+                                                <div class="margin5 fa-solid fa-circle-info opacity50p " title="Display the response bit by bit as it is generated.&#13;When this is off, responses will be displayed all at once when they are complete."></div>
                                             </small>
                                         </label>
                                     </div>
                                 </div>
-                                <div id="max_context_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="context size(tokens)">
+                                <div id="max_context_block" class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="context size(tokens)">
                                     <small>Context Size (tokens)</small>
                                     <input class="neo-range-slider" type="range" id="max_context" name="volume" min="512" max="8192" step="64">
                                     <div data-randomization-disabled="true" class="wide100p">
@@ -240,7 +240,7 @@
                                         <label class="checkbox_label">
                                             <input id="max_context_unlocked" type="checkbox" />
                                             <small data-i18n="unlocked">Unlocked
-                                                <div id="max_context_unlocked_warning" class="fa-solid fa-question opacity50p hoverglow" title="Only select models support context sizes greater than 4096 tokens.&#13;Increase only if you know what you're doing."></div>
+                                                <div id="max_context_unlocked_warning" class="fa-solid fa-circle-info opacity50p " title="Only select models support context sizes greater than 4096 tokens.&#13;Increase only if you know what you're doing."></div>
                                             </small>
                                         </label>
                                     </div>
@@ -451,56 +451,56 @@
                             </div>
                             <div id="range_block_textgenerationwebui">
                                 <div class="flex-container gap10h5v justifyCenter">
-                                    <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="temperature">
+                                    <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="temperature">
                                         <small>Temperature
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="temp_textgenerationwebui" name="volume" min="0.0" max="2.0" step="0.01" x-setting-id="temp">
                                         <input type="number" class="neo-range-input" min="0.0" max="2.0" step="0.01" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="rep.pen">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="rep.pen">
                                         <small>Repetition Penalty
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5" step="0.01">
                                         <input class="neo-range-input" type="number" min="1" max="1.5" step="0.01" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="rep.pen range">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="rep.pen range">
                                         <small>Repetition Penalty Range
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="rep_pen_range_textgenerationwebui" name="volume" min="0" max="4096" step="1">
                                         <input class="neo-range-input" type="number" min="0" max="4096" step="1" data-for="rep_pen_range_textgenerationwebui" id="rep_pen_range_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Encoder Rep. Pen.">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Encoder Rep. Pen.">
                                         <small>Encoder Repetition Penalty
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" />
                                         <input class="neo-range-input" type="number" min="0.8" max="1.5" step="0.01" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Frequency Penalty">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Frequency Penalty">
                                         <small>Frequency Penalty
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="freq_pen_textgenerationwebui" name="volume" min="-2" max="2" step="0.01" />
                                         <input class="neo-range-input" type="number" data-for="freq_pen_textgenerationwebui" min="-2" max="2" step="0.01" id="freq_pen_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Presence Penalty">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5  flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Presence Penalty">
                                         <small>Presence Penalty
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="presence_pen_textgenerationwebui" name="volume" min="-2" max="2" step="0.01" />
                                         <input class="neo-range-input" type="number" min="-2" max="2" step="0.01" data-for="presence_pen_textgenerationwebui" id="presence_pen_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="No Repeat Ngram Size">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="No Repeat Ngram Size">
                                         <small>No Repeat Ngram Size
 
                                         </small>
                                         <input class="neo-range-slider" type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1">
                                         <input class="neo-range-input" type="number" min="0" max="20" step="1" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Min Length">
+                                    <div data-newbie-hidden class="alignitemscenter flex-container marginBot5 flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Min Length">
                                         <small>Min Length
 
                                         </small>
@@ -1273,42 +1273,42 @@
                             <div data-newbie-hidden id="textgenerationwebui_api-settings">
 
                                 <div class="flex-container gap10h5v justifyCenter">
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Top K">
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Top K">
                                         <small>Top K</small>
                                         <input class="neo-range-slider" type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
                                         <input class="neo-range-input" type="number" min="0" max="200" step="1" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Top P">
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Top P">
                                         <small>Top P</small>
                                         <input class="neo-range-slider" type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Typical P">
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Typical P">
                                         <small>Typical P</small>
                                         <input class="neo-range-slider" type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Top A">
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Top A">
                                         <small>Top A</small>
                                         <input class="neo-range-slider" type="range" id="top_a_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="top_a_textgenerationwebui" id="top_a_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Tail Free Sampling">
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Tail Free Sampling">
                                         <small>Tail Free Sampling</small>
                                         <input class="neo-range-slider" type="range" id="tfs_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="tfs_textgenerationwebui" id="tfs_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Epsilon Cutoff">
+                                    <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Epsilon Cutoff">
                                         <small>Epsilon Cutoff</small>
                                         <input class="neo-range-slider" type="range" id="epsilon_cutoff_textgenerationwebui" name="volume" min="0" max="9" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="9" step="0.01" data-for="epsilon_cutoff_textgenerationwebui" id="epsilon_cutoff_counter_textgenerationwebui">
                                     </div>
-                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="Eta Cutoff">
+                                    <div class="alignitemscenter flex-container flexFlowColumn flexBasis48p flexGrow flexShrink gap0" data-i18n="Eta Cutoff">
                                         <small>Eta Cutoff</small>
                                         <input class="neo-range-slider" type="range" id="eta_cutoff_textgenerationwebui" name="volume" min="0" max="20" step="0.01">
                                         <input class="neo-range-input" type="number" min="0" max="20" step="0.01" data-for="eta_cutoff_textgenerationwebui" id="eta_cutoff_counter_textgenerationwebui">
                                     </div>
-                                    <div name="checkboxes" class="flex-container flexFlowColumn flexBasis48p flexShrink ">
+                                    <div name="checkboxes" class="flex-container flexFlowColumn flexBasis48p flexGrow flexShrink ">
                                         <div class="justifyCenter">
                                             <label class="checkbox_label" for="do_sample_textgenerationwebui">
                                                 <input type="checkbox" id="do_sample_textgenerationwebui" />
@@ -1317,13 +1317,13 @@
                                             <label class="checkbox_label" for="add_bos_token_textgenerationwebui">
                                                 <input type="checkbox" id="add_bos_token_textgenerationwebui" />
                                                 <small data-i18n="Add BOS Token">Add BOS Token
-                                                    <div class="fa-solid fa-question opacity50p hoverglow" data-i18n="Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative." title="Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative."></div>
+                                                    <div class="fa-solid fa-circle-info opacity50p " data-i18n="Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative." title="Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative."></div>
                                                 </small>
                                             </label>
                                             <label class="checkbox_label" for="ban_eos_token_textgenerationwebui">
                                                 <input type="checkbox" id="ban_eos_token_textgenerationwebui" />
                                                 <small data-i18n="Ban EOS Token">Ban EOS Token
-                                                    <div class="fa-solid fa-question opacity50p hoverglow" data-i18n="Ban the eos_token. This forces the model to never end the generation prematurely" title="Ban the eos_token. This forces the model to never end the generation prematurely."></div>
+                                                    <div class="fa-solid fa-circle-info opacity50p " data-i18n="Ban the eos_token. This forces the model to never end the generation prematurely" title="Ban the eos_token. This forces the model to never end the generation prematurely."></div>
                                                 </small>
                                             </label>
                                             <label class="checkbox_label" for="skip_special_tokens_textgenerationwebui">
@@ -1334,47 +1334,47 @@
                                     </div>
                                     <div name="miroStatBlock">
                                         <h4 class="wide100p textAlignCenter" data-i18n="Mirostat (mode=1 is only for llama.cpp)">Mirostat
-                                            <div class=" fa-solid fa-question opacity50p hoverglow" title="Mode=1 is only for llama.cpp&#13;More helpful tips coming soon."></div>
+                                            <div class=" fa-solid fa-circle-info opacity50p " title="Mode=1 is only for llama.cpp&#13;More helpful tips coming soon."></div>
                                         </h4>
                                         <div class="flex-container flexFlowRow gap10px flexShrink">
-                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn  flexShrink gap0" data-i18n="Mirostat Mode">
+                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0" data-i18n="Mirostat Mode">
                                                 <small>Mode</small>
                                                 <input class="neo-range-slider" type="range" id="mirostat_mode_textgenerationwebui" name="volume" min="0" max="2" step="1" />
                                                 <input class="neo-range-input" type="number" min="0" max="2" step="1" data-for="mirostat_mode_textgenerationwebui" id="mirostat_mode_counter_textgenerationwebui">
                                             </div>
-                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn  flexShrink gap0" data-i18n="Mirostat Tau">
+                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0" data-i18n="Mirostat Tau">
                                                 <small>Tau</small>
                                                 <input class="neo-range-slider" type="range" id="mirostat_tau_textgenerationwebui" name="volume" min="0" max="20" step="0.01" />
                                                 <input class="neo-range-input" type="number" min="0" max="20" step="0.01" data-for="mirostat_tau_textgenerationwebui" id="mirostat_tau_counter_textgenerationwebui">
                                             </div>
-                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn  flexShrink gap0" data-i18n="Mirostat Eta">
+                                            <div class="alignitemscenter flex-container marginBot5 flexFlowColumn flexGrow flexShrink gap0" data-i18n="Mirostat Eta">
                                                 <small>Eta</small>
                                                 <input class="neo-range-slider" type="range" id="mirostat_eta_textgenerationwebui" name="volume" min="0" max="1" step="0.01" />
                                                 <input class="neo-range-input" type="number" min="0" max="1" step="0.01" data-for="mirostat_eta_textgenerationwebui" id="mirostat_eta_counter_textgenerationwebui">
                                             </div>
                                         </div>
                                     </div>
-                                    <div name="contrastiveSearchBlock">
-                                        <h4 data-i18n="Contrastive search">Contrast Search
-                                            <div class=" fa-solid fa-question opacity50p hoverglow" title="Helpful tip coming soon."></div>
+                                    <div name="contrastiveSearchBlock" class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink ">
+                                        <h4 class="textAlignCenter" data-i18n="Contrastive search">Contrast Search
+                                            <div class=" fa-solid fa-circle-info opacity50p " title="Helpful tip coming soon."></div>
                                         </h4>
-                                        <div class="alignitemscenter flexFlowColumn flex-container flexBasis48p flexShrink gap0" data-i18n="Penalty Alpha">
+                                        <div class="alignitemscenter flex-container flexFlowColumn gap0">
                                             <small>Penalty Alpha</small>
                                             <input class="neo-range-slider" type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
                                             <input class="neo-range-input" type="number" min="0" max="5" step="0.05" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
                                         </div>
                                     </div>
-                                    <div name="beamSearchBlock">
+                                    <div name="beamSearchBlock" class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink justifyCenter">
                                         <h4 class="textAlignCenter" span data-i18n="Beam search">Beam Search
-                                            <div class=" fa-solid fa-question opacity50p hoverglow" title="Helpful tip coming soon."></div>
+                                            <div class=" fa-solid fa-circle-info opacity50p " title="Helpful tip coming soon."></div>
                                         </h4>
                                         <div class="flex-container flexFlowRow gap10px ">
-                                            <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p  gap0" data-i18n="Number of Beams">
+                                            <div class="alignitemscenter flex-container flexFlowColumn gap0" data-i18n="Number of Beams">
                                                 <small>Number of Beams</small>
                                                 <input class="neo-range-slider" type="range" id="num_beams_textgenerationwebui" name="volume" min="1" max="20" step="1" />
                                                 <input class="neo-range-input" type="number" min="1" max="20" step="1" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui">
                                             </div>
-                                            <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p  gap0">
+                                            <div class="alignitemscenter flex-container flexFlowColumn gap0">
                                                 <small data-i18n="Length Penalty">Length Penalty</small>
                                                 <input class="neo-range-slider" type="range" id="length_penalty_textgenerationwebui" name="volume" min="-5" max="5" step="0.1" />
                                                 <input class="neo-range-input" type="number" min="-5" max="5" step="0.1" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui">
@@ -1392,7 +1392,7 @@
                                         <h4 class="range-block-title justifyLeft">
                                             <span data-i18n="Banned Tokens">Banned Tokens</span>
                                             <span data-i18n="LLaMA models">(LLaMA models)</span>
-                                            <div class="margin5 fa-solid fa-question opacity50p hoverglow" title="Helpful tip coming soon."></div>
+                                            <div class="margin5 fa-solid fa-circle-info opacity50p " title="Helpful tip coming soon."></div>
                                         </h4>
                                         <small class="" data-i18n="Sequences you don't want to appear in the output. One per line.">
                                             Sequences you don't want to appear in the output. One per line. Text or [token ids].
@@ -1412,7 +1412,7 @@
                                     <div class="alignitemscenter flex-container  flexFlowColumn flexBasis48p flexShrink gap0" data-i18n="CFG Scale">
                                         <div>
                                             CFG Scale
-                                            <div class="margin5 fa-solid fa-question opacity50p hoverglow" title="Helpful tip coming soon."></div>
+                                            <div class="margin5 fa-solid fa-circle-info opacity50p " title="Helpful tip coming soon."></div>
                                         </div>
                                         <input class="neo-range-slider" type="range" id="guidance_scale_textgenerationwebui" name="volume" min="0.1" max="4" step="0.05">
                                         <input class="neo-range-input" type="number" min="0.1" max="4" step="0.05" data-for="guidance_scale_textgenerationwebui" id="guidance_scale_counter_textgenerationwebui">
@@ -1431,7 +1431,7 @@
                                     <hr class="width100p">
                                     <div id="grammar_block_ooba">
                                         <h4 data-i18n="Grammar">Grammar
-                                            <div class="margin5 fa-solid fa-question opacity50p hoverglow" title="Helpful tip coming soon."></div>
+                                            <div class="margin5 fa-solid fa-circle-info opacity50p " title="Helpful tip coming soon."></div>
                                         </h4>
                                         <div class="range-block">
                                             <textarea id="grammar_string_textgenerationwebui" rows="2" class="text_pole textarea_compact monospace"></textarea>
@@ -1445,7 +1445,7 @@
                                     <div class="range-block">
                                         <div class="range-block-title" data-i18n="Seed">
                                             Seed
-                                            <div class="margin5 fa-solid fa-question opacity50p hoverglow" title="Helpful tip coming soon."></div>
+                                            <div class="margin5 fa-solid fa-circle-info opacity50p " title="Helpful tip coming soon."></div>
                                         </div>
                                         <input type="number" id="seed_textgenerationwebui" class="text_pole wide100p" maxlength="100" />
                                     </div>
@@ -1674,7 +1674,7 @@
                             <div id="api_loading_novel" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
                             <h4><span data-i18n="Novel AI Model">Novel AI Model</span>
                                 <a href="https://docs.sillytavern.app/usage/api-connections/novelai/#models" class="notes-link" target="_blank">
-                                    <span class="note-link-span">?</span>
+                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                 </a>
                             </h4>
                             <select id="model_novel_select">
@@ -2043,7 +2043,7 @@
                 <h3 class="margin0" data-i18n="Advanced Formatting">
                     Advanced Formatting
                     <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/" class="notes-link" target="_blank">
-                        <span class="note-link-span">?</span>
+                        <span class="fa-solid fa-circle-question note-link-span"></span>
                     </a>
                 </h3>
                 <div class="flex-container">
@@ -2128,7 +2128,7 @@
                         <div>
                             <h4 data-i18n="Instruct Mode">Instruct Mode
                                 <a href="https://docs.sillytavern.app/usage/core-concepts/instructmode/" class="notes-link" target="_blank">
-                                    <span class="note-link-span">?</span>
+                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                 </a>
                             </h4>
                             <div>
@@ -2320,7 +2320,7 @@
                         <div data-newbie-hidden>
                             <h4><span data-i18n="Tokenizer">Tokenizer</span>
                                 <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#tokenizer" class="notes-link" target="_blank">
-                                    <span class="note-link-span">?</span>
+                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                 </a>
                             </h4>
                             <select id="tokenizer">
@@ -2338,7 +2338,7 @@
                             <div class="range-block-title justifyLeft">
                                 <span data-i18n="Token Padding">Token Padding</span>
                                 <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#token-padding" class="notes-link" target="_blank">
-                                    <span class="note-link-span">?</span>
+                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                 </a>
                             </div>
                             <input id="token_padding" class="text_pole textarea_compact" type="number" min="-2048" max="2048" />
@@ -2376,7 +2376,7 @@
                                         Custom Stopping Strings
                                     </span>
                                     <a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#custom-stopping-strings" class="notes-link" target="_blank">
-                                        <span class="note-link-span">?</span>
+                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                     </a>
                                 </h4>
                                 <div>
@@ -2441,7 +2441,7 @@
                     <h3 class="margin0">
                         <span data-i18n="Worlds/Lorebooks">Worlds/Lorebooks</span>
                         <a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/" class="notes-link" target="_blank">
-                            <span class="note-link-span">?</span>
+                            <span class="fa-solid fa-circle-question note-link-span"></span>
                         </a>
                     </h3>
                 </div>
@@ -2825,7 +2825,7 @@
                                 <span>
                                     <span data-i18n="Message Sound">Message Sound</span>
                                     <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#message-sound" class="notes-link" target="_blank">
-                                        <span class="note-link-span">?</span>
+                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                     </a>
                                 </span>
                             </label>
@@ -2976,7 +2976,7 @@
                                     <input id="render_formulas" type="checkbox" />
                                     <span data-i18n="Render Formulas">Render Formulas</span>
                                     <a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#formulas-rendering" class="notes-link" target="_blank">
-                                        <span class="note-link-span">?</span>
+                                        <span class="fa-solid fa-circle-question note-link-span"></span>
                                     </a>
                                 </label>
                                 <label data-newbie-hidden class="checkbox_label" for="allow_name2_display">
@@ -3331,7 +3331,7 @@
                         <div id="description_div" class="marginBot5">
                             <span data-i18n="Character Description">Description</span>
                             <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
-                                <span class="note-link-span">?</span>
+                                <span class="fa-solid fa-circle-question note-link-span"></span>
                             </a>
                         </div>
 
@@ -3344,7 +3344,7 @@
                             <span>
                                 <span data-i18n="First message">First message</span>
                                 <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#first-message" class="notes-link" target="_blank">
-                                    <span class="note-link-span">?</span>
+                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                 </a>
                             </span>
                             <div class="menu_button menu_button_icon open_alternate_greetings margin0" title="Click to set additional greeting messages" data-i18n="[title]Click to set additional greeting messages">
@@ -3391,7 +3391,7 @@
                             <span>
                                 <span data-i18n="Group Controls">Group Controls</span>
                                 <a href="https://docs.sillytavern.app/usage/core-concepts/groupchats/" class="notes-link" target="_blank">
-                                    <span class="note-link-span">?</span>
+                                    <span class="fa-solid fa-circle-question note-link-span"></span>
                                 </a>
                             </span>
                             <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
@@ -3632,7 +3632,7 @@
         <div id="personality_div">
             <h4>
                 <span data-i18n="Personality summary">Personality summary</span>
-                <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#personality-summary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
+                <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#personality-summary" class="notes-link" target="_blank"><span class="fa-solid fa-circle-question note-link-span"></span></a>
             </h4>
             <textarea id="personality_textarea" name="personality" data-i18n="[placeholder](A brief description of the personality)" placeholder="(A brief description of the personality)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="50000"></textarea>
             <div class="extension_token_counter">
@@ -3644,7 +3644,7 @@
             <h4>
                 <span data-i18n="Scenario">Scenario</span>
                 <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#scenario" class="notes-link" target="_blank">
-                    <span class="note-link-span">?</span>
+                    <span class="fa-solid fa-circle-question note-link-span"></span>
                 </a>
             </h4>
             <textarea id="scenario_pole" name="scenario" data-i18n="[placeholder](Circumstances and context of the interaction)" placeholder="(Circumstances and context of the interaction)" class="text_pole" maxlength="50000" value="" autocomplete="off" form="form_create" rows="1"></textarea>
@@ -3690,7 +3690,7 @@
         <div id="mes_example_div" class="flex-container flexFlowColumn">
             <div>
                 <h4><span data-i18n="Examples of dialogue">Examples of dialogue</span></h4>
-                <h5 data-i18n="Important to set the character's writing style.">Important to set the character's writing style. <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#examples-of-dialogue" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
+                <h5 data-i18n="Important to set the character's writing style.">Important to set the character's writing style. <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#examples-of-dialogue" class="notes-link" target="_blank"><span class="fa-solid fa-circle-question note-link-span"></span></a></h5>
             </div>
             <textarea id="mes_example_textarea" class="flexGrow" name="mes_example" data-i18n="[placeholder](Examples of chat dialog. Begin each example with START on a new line.)" placeholder="(Examples of chat dialog. Begin each example with &lt;START&gt; on a new line.)" form="form_create" maxlength="50000" rows="6"></textarea>
             <div class="extension_token_counter">
@@ -3715,7 +3715,7 @@
                 </div>
                 <div id="selectChatPopupHeaderText" class="TxtLrgBoldCenter">
                     <span id="ChatHistoryCharName"></span><span data-i18n="Chat History">Chat History</span>
-                    <a href="https://docs.sillytavern.app/usage/core-concepts/chatfilemanagement/#chat-import" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
+                    <a href="https://docs.sillytavern.app/usage/core-concepts/chatfilemanagement/#chat-import" class="notes-link" target="_blank"><span class="fa-solid fa-circle-question note-link-span"></span></a>
                 </div>
 
                 <input type="text" id="select_chat_search" class="menu_button" placeholder="Search..." autocomplete="off">
diff --git a/public/style.css b/public/style.css
index af566bb6f..c29f67ab8 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2346,36 +2346,16 @@ input[type="range"]::-webkit-slider-thumb {
 
 .note-link-span {
     color: var(--SmartThemeQuoteColor);
-    border: 1px solid var(--SmartThemeQuoteColor);
-    border-radius: 10px;
-    line-height: var(--mainFontSize);
-    font-size: var(--mainFontSize);
-    font-weight: 700;
-    width: calc(var(--mainFontSize) + 0.2rem);
-    height: calc(var(--mainFontSize) + 0.2rem);
     display: inline-block;
     opacity: 0.5;
     margin: 0 5px;
     text-align: center;
+    border-radius: 100%;
     box-shadow: 0 0 3px black;
     transition: all 250ms;
 }
 
-.note-link-span-lrg {
-    color: var(--SmartThemeQuoteColor);
-    border: 3px solid var(--SmartThemeQuoteColor);
-    border-radius: 100%;
-    line-height: calc(var(--mainFontSize)*1.6);
-    font-size: calc(var(--mainFontSize)*1.4);
-    font-weight: 700;
-    width: calc(var(--mainFontSize) + 1rem);
-    height: calc(var(--mainFontSize) + 1rem);
-    display: inline-block;
-    opacity: 0.5;
-    margin: 0 5px;
-    text-align: center;
-    box-shadow: 0 0 3px black;
-    transition: all 250ms;
+.topRightInset {
     position: absolute;
     top: 6px;
     right: 23px;
@@ -3455,9 +3435,6 @@ a {
     flex-wrap: wrap;
 }
 
-#max_context_unlocked_warning {
-    /* flex-basis: 100%; */
-}
 
 #max_context_unlocked:not(:checked)+div {
     display: none;