diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 6bf85b6..db8df09 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -688,10 +688,13 @@ class PeerUI {
class Dialog {
constructor(id) {
this.$el = $(id);
- this.$el.querySelectorAll('[close]').forEach(el => {
+ this.$autoFocus = this.$el.querySelector('[autofocus]');
+ this.$xBackground = this.$el.querySelector('x-background');
+ this.$closeBtns = this.$el.querySelectorAll('[close]');
+
+ this.$closeBtns.forEach(el => {
el.addEventListener('click', _ => this.hide())
});
- this.$autoFocus = this.$el.querySelector('[autofocus]');
Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail));
}
@@ -701,8 +704,15 @@ class Dialog {
}
show() {
+ if (this.$xBackground) {
+ this.$xBackground.scrollTop = 0;
+ }
+
this.$el.setAttribute('show', true);
- if (!window.isMobile && this.$autoFocus) this.$autoFocus.focus();
+
+ if (!window.isMobile && this.$autoFocus) {
+ this.$autoFocus.focus();
+ }
}
isShown() {
diff --git a/public/styles/deferred-styles.css b/public/styles/deferred-styles.css
index 3613377..d8e8f0e 100644
--- a/public/styles/deferred-styles.css
+++ b/public/styles/deferred-styles.css
@@ -13,7 +13,7 @@
overflow: auto;
resize: none;
line-height: 16px;
- max-height: 300px;
+ max-height: 350px;
word-break: break-word;
word-wrap: anywhere;
}
@@ -276,38 +276,30 @@ x-dialog x-background {
z-index: 30;
transition: opacity 300ms;
will-change: opacity;
- overflow: overlay;
+ padding: 10px 5px 20px;
+ overflow: scroll
}
x-dialog x-paper {
+ position: relative;
display: flex;
+ margin: auto;
flex-direction: column;
- width: calc(100vw - 10px);
+ width: 400px;
z-index: 3;
border-radius: 30px;
- max-width: 400px;
overflow: hidden;
box-sizing: border-box;
transition: transform 300ms;
will-change: transform;
}
-#pair-device-dialog x-paper,
-#edit-paired-devices-dialog x-paper,
-#public-room-dialog x-paper,
-#language-select-dialog x-paper {
- position: absolute;
- top: max(50%, 350px);
- margin-top: -328.5px;
-}
-
x-paper > .row:first-of-type {
background-color: var(--accent-color);
- padding: 10px;
margin-bottom: 5px;
}
-x-paper > .row:first-of-type h2 {
+x-paper .dialog-title {
color: white;
}
@@ -383,15 +375,15 @@ x-dialog a {
user-select: text;
display: inline-block;
font-size: 45px;
- letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 20px);
- text-indent: calc(0.5 * (11px + min(calc((100vw - 80px - 99px) / 100 * 6), 28px)));
+ letter-spacing: 18px;
+ text-indent: 15px;
margin: 10px 0;
}
.key-qr-code {
width: fit-content;
align-self: center;
- margin-top: 15px;
+ margin-top: 5px;
margin-bottom: 10px;
}
@@ -413,8 +405,8 @@ x-dialog hr {
}
.hr-note {
- margin-top: 23px;
- margin-bottom: 31px;
+ margin-top: 13px;
+ margin-bottom: 21px;
}
.hr-note hr {
@@ -436,10 +428,6 @@ x-dialog hr {
text-transform: uppercase;
}
-#pair-device-dialog x-background {
- padding: 16px!important;
-}
-
/* Edit Paired Devices Dialog */
.paired-devices-wrapper:empty:before {
content: attr(data-empty);
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index b1ca12c..0ce951d 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -181,7 +181,7 @@ h1 {
}
h2 {
- font-size: 24px;
+ font-size: 22px;
font-weight: 400;
letter-spacing: -.012em;
line-height: 32px;
@@ -434,10 +434,6 @@ footer .logo {
white-space: nowrap;
}
-.badge-gradient {
- background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 80%, white) 0%, var(--badge-color) 50%);
-}
-
.badge-room-ip {
--badge-color: var(--primary-color);
}
@@ -840,7 +836,7 @@ body {
/* Constant colors */
--primary-color: #4285f4;
--paired-device-color: #00a69c;
- --public-room-color: #db8500;
+ --public-room-color: #ed9d01;
--accent-color: var(--primary-color);
--ws-peer-color: #ff6b6b;
--btn-disabled-color: #5B5B66;
@@ -867,7 +863,7 @@ body {
/* Dark theme colors */
body.dark-theme {
--text-color: 238,238,238;
- --dialog-bg-color: #121212;
+ --dialog-bg-color: #141414;
--bg-color: 0,0,0;
--bg-color-secondary: #262628;
--border-color: rgb(91, 91, 91);
@@ -885,7 +881,7 @@ body.dark-theme {
/* defaults to dark theme */
body {
--text-color: 238,238,238;
- --dialog-bg-color: #121212;
+ --dialog-bg-color: #141414;
--bg-color-secondary: #262628;
--bg-color: 0,0,0;
--border-color: rgb(91, 91, 91);