From 69c8b91239e57b92a406168231bea64971f80849 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Wed, 29 Nov 2023 17:42:19 +0100 Subject: [PATCH] Revert some "airy" changes and rewrite style sheets to make dialogs centered but scrollable on small screens; Brighten public-room-color slightly --- public/index.html | 68 +++++++++++++------------------ public/scripts/ui.js | 16 ++++++-- public/styles/deferred-styles.css | 36 ++++++---------- public/styles/styles-main.css | 12 ++---- 4 files changed, 58 insertions(+), 74 deletions(-) diff --git a/public/index.html b/public/index.html index 62aa65c..6142e73 100644 --- a/public/index.html +++ b/public/index.html @@ -166,9 +166,9 @@
- - - + + +
@@ -177,8 +177,8 @@ -
-

+
+

@@ -262,10 +262,10 @@
-
-

+
+

-
+

000 000

@@ -281,7 +281,7 @@
-
+
@@ -307,8 +307,8 @@ -
-

+
+

@@ -330,12 +330,10 @@ -
-
-

-
+
+

-
+

@@ -351,7 +349,7 @@
-
+
@@ -376,15 +374,13 @@ -
-
-

-
+
+

- +
@@ -408,15 +404,13 @@ -
-
-

-
+
+

- +
@@ -442,16 +436,14 @@ -
-
-

-
+
+

- +
@@ -472,12 +464,12 @@ -
-

+
+

- +
@@ -497,10 +489,8 @@ -
-
-

-
+
+

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);