Minor layout adjustments

This commit is contained in:
nuttylmao
2025-09-06 22:11:04 +10:00
parent d8b3ee772c
commit af65fcf27b
5 changed files with 24 additions and 18 deletions
+8 -6
View File
@@ -56,27 +56,29 @@
<!-- Streamer.bot Connect Dialog -->
<div id="sb-connect-dialog" class="dialog">
<button class="dialog-nav-button" onclick="ClosenConnectDialog()">×</button>
<hr class="divider">
<div style="display: flex; flex-direction: row; align-items: center; gap: 1em">
<img src="../../resources/streamer.bot.png" style="height: 40px;" />
<label class="title">Streamer.bot</label>
</div>
<div style="display: flex; flex-direction: row; gap: 1em">
<div class="field">
<label for="sb-address">Address *</label>
<label for="sb-address">Address <span style="color: var(--mandatory-field-color);">*</span></label>
<input type="text" id="sb-address" name="sb-address" placeholder="127.0.0.1" value="127.0.0.1">
</div>
<div class="field">
<label for="sb-port">Port *</label>
<label for="sb-port">Port <span style="color: var(--mandatory-field-color);">*</span></label>
<input type="text" id="sb-port" name="sb-port" placeholder="8080" value="8080">
</div>
</div>
<div class="field">
<label for="sb-password">Password</label>
<label class="setting-description" for="sb-password">(Optional)</label>
<input type="password" id="sb-password" name="sb-password">
</div>
<hr class="divider">
<label id="sb-error-label"></label>
<button id="sb-connect-button" onclick="Connect()">Connect</button>
+5
View File
@@ -260,6 +260,11 @@ function OpenConnectDialog() {
blurLayer.style.display = "block";
}
function ClosenConnectDialog() {
sbConnectDialog.style.display = "none";
blurLayer.style.display = "none";
}
function OpenRequiredActionsDialog() {
sbRequiredActionsDialog.style.display = "flex";
blurLayer.style.display = "block";
+7 -11
View File
@@ -15,7 +15,7 @@ body {
display: flex;
flex-direction: row;
align-items: center;
padding: 1em;
padding: 0em 1em;
gap: 1em;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}
@@ -52,14 +52,10 @@ body {
#blur-layer {
position: fixed;
inset: 0;
/* top:0; left:0; bottom:0; right:0 */
backdrop-filter: blur(5px);
/* blur the content behind */
-webkit-backdrop-filter: blur(5px);
/* Safari support */
z-index: 1;
/* behind the modal */
inset: 0; /* top:0; left:0; bottom:0; right:0 */
backdrop-filter: blur(10px); /* blur the content behind */
-webkit-backdrop-filter: blur(10px); /* Safari support */
z-index: 1; /* behind the modal */
}
@@ -78,10 +74,10 @@ body {
}
#sb-error-label {
background: #a82d2e33;
background: var(--error-background);
border-radius: 0.5em;
padding: 1em;
color: #c65e5e;
color: var(--error-color);
display: none;
}