rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix styles for extensions menu

Browse Source
This commit is contained in:
RossAscends
2023-05-18 02:25:47 +09:00
parent 3951049e03
commit 2e86775d4a
7 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/scripts/extensions/dice/index.js
View File

@@ -29,7 +29,10 @@ async function doDiceRoll() {
function addDiceRollButton() {
const buttonHtml = `
<div id="roll_dice" class="fa-solid fa-dice list-group-item" title="Roll the dice" /></div>
<div id="roll_dice" class="list-group-item flex-container flexGap5">
<div class="fa-solid fa-dice extensionsMenuExtensionButton" title="Roll Dice" /></div>
Roll Dice
</div>
`;
const dropdownHtml = `
<div id="dice_dropdown">
@@ -55,7 +58,7 @@ function addDiceRollButton() {
button.hide();
let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
placement: 'left-end',
placement: 'bottom',
});
$(document).on('click touchend', function (e) {

4
public/scripts/extensions/dice/style.css
View File

@@ -1,5 +1,5 @@
#roll_dice {
order: 100;
/* order: 100; */
/* width: 40px;
height: 40px;
margin: 0;
@@ -11,7 +11,7 @@
opacity: 0.7;
display: flex;
align-items: center;
justify-content: center;
/* justify-content: center; */
}

9
public/scripts/extensions/stable-diffusion/index.js
View File

@@ -537,11 +537,14 @@ async function sendMessage(prompt, image) {
function addSDGenButtons() {
const buttonHtml = `
<div id="sd_gen" class="fa-solid fa-paintbrush list-group-item" title="Trigger Stable Diffusion" /></div>
<div id="sd_gen" class="list-group-item flex-container flexGap5">
<div class="fa-solid fa-paintbrush extensionsMenuExtensionButton" title="Trigger Stable Diffusion" /></div>
StableDiffusion
</div>
`;
const waitButtonHtml = `
<div id="sd_gen_wait" class="fa-solid fa-hourglass-half list-group-item" /></div>
<div id="sd_gen_wait" class="fa-solid fa-hourglass-half" /></div>
`
const dropdownHtml = `
<div id="sd_dropdown">
@@ -570,7 +573,7 @@ function addSDGenButtons() {
messageButton.hide();
let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
placement: 'left-end',
placement: 'bottom',
});
$(document).on('click', '.sd_message_gen', sdMessageButton);

6
public/scripts/extensions/stable-diffusion/style.css
View File

@@ -3,8 +3,8 @@
}
#sd_gen {
order: 100;
/* width: 40px;
/*order: 100;
width: 40px;
height: 40px;
margin: 0;
padding: 1px; */
@@ -15,7 +15,7 @@
opacity: 0.7;
display: flex;
align-items: center;
justify-content: center;
/* justify-content: center; */
}
#sd_gen:hover {

11
public/scripts/extensions/tts/index.js
View File

@@ -233,9 +233,9 @@ function updateUiAudioPlayState() {
let img
// Give user feedback that TTS is active by setting the stop icon if processing or playing
if (!audioElement.paused || isTtsProcessing()) {
img = 'fa-solid fa-stop-circle list-group-item'
img = 'fa-solid fa-stop-circle extensionsMenuExtensionButton'
} else {
img = 'fa-solid fa-circle-play list-group-item'
img = 'fa-solid fa-circle-play extensionsMenuExtensionButton'
}
audioControl.className = img
} else {
@@ -256,7 +256,12 @@ function onAudioControlClicked() {
}
function addAudioControl() {
$('#extensionsMenu').prepend('<div id="tts_media_control" class="list-group-item" />')
$('#extensionsMenu').prepend(`
<div id="ttsExtensionMenuItem" class="list-group-item flex-container flexGap5">
<div id="tts_media_control" class="extensionsMenuExtensionButton "/></div>
TTS Playback
</div>`)
$('#tts_media_control').attr('title', 'TTS play/pause').on('click', onAudioControlClicked)
audioControl = document.getElementById('tts_media_control')
updateUiAudioPlayState()

18
public/scripts/extensions/tts/style.css
View File

@@ -1,5 +1,5 @@
#tts_media_control {
order: 100;
/* order: 100; */
/* width: 40px;
height: 40px;
margin: 0;
@@ -7,14 +7,24 @@
outline: none;
border: none;
cursor: pointer;
transition: 0.3s;
opacity: 0.7;
/* transition: 0.3s;
opacity: 0.7; */
display: flex;
align-items: center;
justify-content: center;
/* justify-content: center; */
}
#ttsExtensionMenuItem {
transition: 0.3s;
opacity: 0.7;
}
#ttsExtensionMenuItem:hover {
opacity: 1;
filter: brightness(1.2);
}
#tts_media_control:hover {
opacity: 1;
filter: brightness(1.2);

10
public/style.css
View File

@@ -512,10 +512,14 @@ code {
#extensionsMenu {
z-index: 100;
backdrop-filter: blur(var(--SmartThemeBlurStrength));
font-size: 30px;
/* padding: 10px; */
display: flex;
gap: 10px;
}
.extensionsMenuExtensionButton {
font-size: 20px;
height: 20px;
width: 20px;
}
#right-nav-panel hr,
@@ -526,7 +530,7 @@ code {
}
.options-content a,
#extensionsMenu div {
#extensionsMenu>div {
color: var(--SmartThemeBodyColor);
padding: 12px 16px;
text-decoration: none;