Slight layout fixes to the char import popup

- Need to pull my "wider" popup type from the other branch, because 1/1 aspect ratio scaling is just bad
- Add a few tailwind-like classes for ul-li styling
- Add <kbd> element styling for keyboard buttons

public/css/st-tailwind.css

@@ -572,3 +572,23 @@ textarea:disabled {
     text-align: center;
     padding: 5px;
 }
+
+ul.li-padding-b-1 li {
+    padding-bottom: 1em;
+}
+
+ul.li-padding-b-2 li {
+    padding-bottom: 2em;
+}
+
+ul.li-padding-b-5 li {
+    padding-bottom: 5em;
+}
+
+ul.li-padding-bot5 li {
+    padding-bottom: 5px;
+}
+
+ul.li-padding-bot10 li {
+    padding-bottom: 10px;
+}

public/script.js

@@ -10539,7 +10539,7 @@ jQuery(async function () {
         const html = await renderTemplateAsync('importCharacters');
 
         /** @type {string?} */
-        const input = await callGenericPopup(html, POPUP_TYPE.INPUT, '', { wide: true, okButton: $('#shadow_popup_template').attr('popup_text_import'), rows: 4 });
+        const input = await callGenericPopup(html, POPUP_TYPE.INPUT, '', { wider: true, okButton: $('#shadow_popup_template').attr('popup_text_import'), rows: 4 });
 
         if (!input) {
             console.debug('Custom content import cancelled');

public/scripts/popup.js

@@ -48,7 +48,7 @@ export class Popup {
      * @param {string} inputValue - Value to set the input to.
      * @param {PopupOptions} options - Options for the popup.
      */
-    constructor(text, type, inputValue = '', { okButton, cancelButton, rows, wide, large, allowHorizontalScrolling, allowVerticalScrolling } = {}) {
+    constructor(text, type, inputValue = '', { okButton, cancelButton, rows, wide, wider, large, allowHorizontalScrolling, allowVerticalScrolling } = {}) {
         this.type = type;
 
         /**@type {HTMLTemplateElement}*/
@@ -64,6 +64,7 @@ export class Popup {
         this.cancel = this.dom.querySelector('.dialogue_popup_cancel');
 
         if (wide) dlg.classList.add('wide_dialogue_popup');
+        if (wider) dlg.classList.add('wider_dialogue_popup');
         if (large) dlg.classList.add('large_dialogue_popup');
         if (allowHorizontalScrolling) dlg.classList.add('horizontal_scrolling_dialogue_popup');
         if (allowVerticalScrolling) dlg.classList.add('vertical_scrolling_dialogue_popup');
@@ -225,12 +226,12 @@ export class Popup {
  * @param {PopupOptions} options - Options for the popup.
  * @returns
  */
-export function callGenericPopup(text, type, inputValue = '', { okButton, cancelButton, rows, wide, large, allowHorizontalScrolling, allowVerticalScrolling } = {}) {
+export function callGenericPopup(text, type, inputValue = '', { okButton, cancelButton, rows, wide, wider, large, allowHorizontalScrolling, allowVerticalScrolling } = {}) {
     const popup = new Popup(
         text,
         type,
         inputValue,
-        { okButton, cancelButton, rows, wide, large, allowHorizontalScrolling, allowVerticalScrolling },
+        { okButton, cancelButton, rows, wide, wider, large, allowHorizontalScrolling, allowVerticalScrolling },
     );
     return popup.show();
 }

public/scripts/templates/importCharacters.html

@@ -2,7 +2,7 @@
 <h4 data-i18n="Enter the URL of the content to import">Enter the URL of the content to import</h3>
 <div class="sources_list justifyLeft">
     <span data-i18n="Supported sources:">Supported sources:</span><br>
-    <ul class="marginTop5">
+    <ul class="marginTop5 li-padding-bot5">
         <li><span data-i18n="char_import_1">Chub Character (Direct Link or ID)</span><br><span data-i18n="char_import_example">Example:</span> <tt>Anonymous/example-character</tt></li>
         <li><span data-i18n="char_import_2">Chub Lorebook (Direct Link or ID)</span><br><span data-i18n="char_import_example">Example:</span> <tt>lorebooks/bartleby/example-lorebook</tt></li>
         <li><span data-i18n="char_import_3">JanitorAI Character (Direct Link or UUID)</span><br><span data-i18n="char_import_example">Example:</span> <tt>ddd1498a-a370-4136-b138-a8cd9461fdfe_character-aqua-the-useless-goddess</tt></li>
@@ -19,7 +19,7 @@
     <span data-i18n="Write each URL or ID into a new line.">
         Write each URL or ID into a new line.
     </span>
-    <span data-i18n="(Shift + Enter to start a new line)">
+    <span data-i18n="(&lt;kbd&gt;Shift&lt;/kbd&gt; + &lt;kbd&gt;Enter&lt;/kbd&gt; to start a new line)">
-        (Shift + Enter to start a new line)
+        (<kbd>Shift</kbd> + <kbd>Enter</kbd> to start a new line)
     </span>
 </small>

public/style.css

@@ -430,6 +430,21 @@ code {
     color: var(--white70a);
 }
 
+kbd {
+    display: inline-block;
+    padding: 2px 4px;
+    font-family: Consolas, monospace;
+    white-space: nowrap;
+    /* background-color: #eeeeee; */
+    background-color: rgba(255, 255, 255, 0.9);
+    color: #333;
+    border: 1px solid #b4b4b4;
+    border-radius: 3px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+    font-size: 90%;
+    line-height: 1;
+}
+
 
 hr {
     background-image: linear-gradient(90deg, var(--transparent), var(--SmartThemeBodyColor), var(--transparent));
@@ -3069,6 +3084,10 @@ grammarly-extension {
     min-width: var(--sheldWidth);
 }
 
+.wider_dialogue_popup {
+    min-width: 750px;
+}
+
 .horizontal_scrolling_dialogue_popup {
     overflow-x: unset !important;
 }