Restyle welcome

60fef3ee99705be644c25e578b666344af8af81d

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 02b0000117e6b9136ed9014d9eb2c1655ccb7761
3 files changed, +81 -78Ignore whitespace
public/script.js+2 -2
@@ -658,7 +658,7 @@ async function getSystemMessages() {
658 is_user: false,658 is_user: false,
659 is_system: true,659 is_system: true,
660 uses_system_ui: true,660 uses_system_ui: true,
661 mes: await renderTemplateAsync('welcome', { displayVersion } ),661 mes: await renderTemplateAsync('welcome', { displayVersion }),
662 },662 },
663 group: {663 group: {
664 name: systemUserName,664 name: systemUserName,
@@ -9106,7 +9106,7 @@ function doDrawerOpenClick() {
9106 const drawer = $(`#${targetDrawerID}`);9106 const drawer = $(`#${targetDrawerID}`);
9107 const drawerToggle = drawer.find('.drawer-toggle');9107 const drawerToggle = drawer.find('.drawer-toggle');
9108 const drawerWasOpenAlready = drawerToggle.parent().find('.drawer-content').hasClass('openDrawer');9108 const drawerWasOpenAlready = drawerToggle.parent().find('.drawer-content').hasClass('openDrawer');
9109 if (drawerWasOpenAlready || drawer.hasClass('resizing') ) { return; }9109 if (drawerWasOpenAlready || drawer.hasClass('resizing')) { return; }
9110 doNavbarIconClick.call(drawerToggle);9110 doNavbarIconClick.call(drawerToggle);
9111}9111}
91129112
public/scripts/templates/welcome.html+73 -76
@@ -1,95 +1,92 @@
1<h3>1<h3>
2 <span id="version_display_welcome">{{displayVersion}}</span>2 <span id="version_display_welcome">{{displayVersion}}</span>
3</h3>3</h3>
4<a href="https://docs.sillytavern.app/usage/update/" target="_blank" data-i18n="Want to update?">4<a href="https://docs.sillytavern.app/usage/update/" target="_blank" data-i18n="Want to update?">
5 Want to update?5 Want to update?
6</a>6</a>
7<hr>
8<h3 data-i18n="How to start chatting?">How to start chatting?</h3>7<h3 data-i18n="How to start chatting?">How to start chatting?</h3>
9<ol>8<ol>
10 <li>9 <li>
11 <span data-i18n="Click _space">Click </span>10 <span data-i18n="Click _space">Click </span>
12 <button class="menu_button menu_button_icon drawer-opener inline-flex" data-target="sys-settings-button">11 <button class="menu_button menu_button_icon drawer-opener inline-flex" data-target="sys-settings-button">
13 <i class="fa-solid fa-plug"></i>12 <i class="fa-solid fa-plug"></i>
14 <span data-i18n="[title]API Connections">API Connections</span>13 <span data-i18n="[title]API Connections">API Connections</span>
15 </button>14 </button>
16 <span data-i18n="and select a">and select a</span>15 <span data-i18n="and connect to an">and connect to an</span>
17 <a href="https://docs.sillytavern.app/usage/api-connections/" target="_blank">16 <a href="https://docs.sillytavern.app/usage/api-connections/" target="_blank">
18 <span class="fa-solid fa-circle-question"></span>17 <span class="fa-solid fa-circle-question"></span>
19 <span data-i18n="Chat API">Chat API</span></a>.18 <span data-i18n="API">API</span></a>.
20 </li>19 </li>
21 <li>20 <li>
22 <span data-i18n="Click _space">Click </span>21 <span data-i18n="Click _space">Click </span>
23 <button class="menu_button menu_button_icon drawer-opener inline-flex" data-target="rightNavHolder">22 <button class="menu_button menu_button_icon drawer-opener inline-flex" data-target="rightNavHolder">
24 <i class="fa-solid fa-address-card"></i>23 <i class="fa-solid fa-address-card"></i>
25 <span data-i18n="[title]Character Management">Character Management</span>24 <span data-i18n="[title]Character Management">Character Management</span>
26 </button>25 </button>
27 <span data-i18n="and pick a character."> and pick a character.</span>26 <span data-i18n="and pick a character."> and pick a character.</span>
28 </li>27 </li>
29</ol>28</ol>
3029
31<p>30<div>
32 <span data-i18n="You can add more">You can add more</span>31 <span data-i18n="You can add more">You can add more</span>
33 <button class="open_characters_library menu_button menu_button_icon inline-flex">32 <button class="open_characters_library menu_button menu_button_icon inline-flex">
34 <i class="fa-solid fa-image-portrait"></i>33 <i class="fa-solid fa-image-portrait"></i>
35 <span data-i18n="Sample characters">Sample characters</span>34 <span data-i18n="Sample characters">Sample characters</span>
36 </button>35 </button>
37 <span data-i18n="or">or</span>36 <span data-i18n="or">or</span>
38 <button class="external_import_button menu_button menu_button_icon inline-flex">37 <button class="external_import_button menu_button menu_button_icon inline-flex">
39 <i class="fa-solid fa-cloud-arrow-down"></i>38 <i class="fa-solid fa-cloud-arrow-down"></i>
40 <span data-i18n="Import Characters">Import characters</span>39 <span data-i18n="Import Characters">Import characters</span>
41 </button>40 </button>
42 <span data-i18n="from other websites">from other websites.</span>41 <span data-i18n="from other websites">from other websites.</span>
4342</div>
44 <span data-i18n="Go to the">Go to the</span>43<div>
44 <span data-i18n="Go to the">Go to the</span>
4545
46 <i data-i18n="Download Extensions & Assets">Download Extensions & Assets</i>46 <i data-i18n="Download Extensions & Assets">Download Extensions & Assets</i>
47 <span data-i18n="menu within">menu within</span>47 <span data-i18n="menu within">menu within</span>
4848
49 <button class="menu_button menu_button_icon drawer-opener inline-flex" data-target="extensions-settings-button">49 <button class="menu_button menu_button_icon drawer-opener inline-flex" data-target="extensions-settings-button">
50 <i class="fa-solid fa-cubes"></i>50 <i class="fa-solid fa-cubes"></i>
51 <span data-i18n="[title]Extensions">Extensions</span>51 <span data-i18n="[title]Extensions">Extensions</span>
52 </button>52 </button>
5353
54 <span data-i18n="to install additional features.">to install additional features.</span>54 <span data-i18n="to install additional features.">to install additional features.</span>
55</p>55</div>
5656
57<hr>
58<h3 data-i18n="Confused or lost?">Confused or lost?</h3>57<h3 data-i18n="Confused or lost?">Confused or lost?</h3>
59<ul>58<ul>
60 <li>59 <li>
61 <span class="note-link-span"><a class="fa-solid fa-circle-question" target="_blank"60 <span class="note-link-span"><a class="fa-solid fa-circle-question" target="_blank"
62 href="https://docs.sillytavern.app/"></a></span> - <span61 href="https://docs.sillytavern.app/"></a></span> - <span data-i18n="click these icons!">click these
63 data-i18n="click these icons!">click these icons!</span>62 icons!</span>
64 </li>63 </li>
65 <li>64 <li>
66 <span data-i18n="Enter">Enter </span><code>/?</code><span data-i18n="in the chat bar"> in the chat bar</span>65 <span data-i18n="Enter">Enter </span><code>/?</code><span data-i18n="in the chat bar"> in the chat bar</span>
67 </li>66 </li>
68 <li>67 <li>
69 <a target="_blank" href="https://docs.sillytavern.app/" data-i18n="SillyTavern Documentation Site">68 <a target="_blank" href="https://docs.sillytavern.app/" data-i18n="SillyTavern Documentation Site">
70 SillyTavern Documentation Site69 SillyTavern Documentation Site
71 </a>70 </a>
72 </li>71 </li>
73</ul>72</ul>
7473
75<hr>
76<h3 data-i18n="Still have questions?">Still have questions?</h3>74<h3 data-i18n="Still have questions?">Still have questions?</h3>
77<ul>75<ul>
78 <li>76 <li>
79 <a target="_blank" href="https://discord.gg/sillytavern" data-i18n="Join the SillyTavern Discord">77 <a target="_blank" href="https://discord.gg/sillytavern" data-i18n="Join the SillyTavern Discord">
80 Join the SillyTavern Discord78 Join the SillyTavern Discord
81 </a>79 </a>
82 </li>80 </li>
83 <li>81 <li>
84 <a target="_blank" href="https://github.com/SillyTavern/SillyTavern/issues" data-i18n="Post a GitHub issue">82 <a target="_blank" href="https://github.com/SillyTavern/SillyTavern/issues" data-i18n="Post a GitHub issue">
85 Post a GitHub issue83 Post a GitHub issue
86 </a>84 </a>
87 </li>85 </li>
88 <li>86 <li>
89 <a target="_blank" href="https://github.com/SillyTavern/SillyTavern#questions-or-suggestions"87 <a target="_blank" href="https://github.com/SillyTavern/SillyTavern#questions-or-suggestions"
90 data-i18n="Contact the developers">88 data-i18n="Contact the developers">
91 Contact the developers89 Contact the developers
92 </a>90 </a>
93 </li>91 </li>
94</ul>92</ul>
95
public/style.css+6 -0
@@ -314,6 +314,12 @@ input[type='checkbox']:focus-visible {
314 display: inline-block;314 display: inline-block;
315}315}
316316
317.mes_text ol,
318.mes_text ul {
319 margin-top: 5px;
320 margin-bottom: 5px;
321}
322
317.mes_text br,323.mes_text br,
318.mes_bias br {324.mes_bias br {
319 content: ' ';325 content: ' ';