Revert some "airy" changes and rewrite style sheets to make dialogs centered but scrollable on small screens; Brighten public-room-color slightly

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

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