From e367ca9f789582b8fefc5bc73e3aa6403f2317d5 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Wed, 11 Oct 2023 19:27:11 +0200
Subject: [PATCH] Remove css nesting to support devices with iOS 16.4 and older
 and other browsers (https://caniuse.com/css-nesting)

---
 public/styles.css                      | 61 +++++++++++---------------
 public_included_ws_fallback/styles.css | 61 +++++++++++---------------
 2 files changed, 50 insertions(+), 72 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index 589a5de..d7a2d85 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -689,21 +689,18 @@ footer .logo {
     position: relative;
 }
 
-html:not([dir="rtl"]) {
-    #display-name,
-    #edit-pen {
-        margin-left: -1rem;
-    }
+html:not([dir="rtl"]) #display-name,
+html:not([dir="rtl"]) #edit-pen {
+    margin-left: -1rem;
 }
 
-html[dir="rtl"] {
-    #display-name,
-    #edit-pen {
-        margin-right: -1rem;
-    }
-    #edit-pen {
-        transform: rotateY(180deg);
-    }
+html[dir="rtl"] #display-name,
+html[dir="rtl"] #edit-pen {
+    margin-right: -1rem;
+}
+
+html[dir="rtl"] #edit-pen {
+    transform: rotateY(180deg);
 }
 
 /* Dialog */
@@ -986,24 +983,20 @@ x-paper > .button-row > .button {
     width: 100%;
 }
 
-html:not([dir="rtl"]) {
-    & x-paper > .button-row > .button:not(:first-child) {
-        border-right: solid 1.5px var(--border-color);
-    }
-
-    & x-paper > .button-row > .button:not(:last-child) {
-        border-left: solid 1.5px var(--border-color);
-    }
+html:not([dir="rtl"]) x-paper > .button-row > .button:not(:first-child) {
+    border-right: solid 1.5px var(--border-color);
 }
 
-html[dir="rtl"] {
-    & x-paper > .button-row > .button:not(:first-child) {
-        border-left: solid 1.5px var(--border-color);
-    }
+html:not([dir="rtl"]) x-paper > .button-row > .button:not(:last-child) {
+    border-left: solid 1.5px var(--border-color);
+}
 
-    & x-paper > .button-row > .button:not(:last-child) {
-        border-right: solid 1.5px var(--border-color);
-    }
+html[dir="rtl"] x-paper > .button-row > .button:not(:first-child) {
+    border-left: solid 1.5px var(--border-color);
+}
+
+html[dir="rtl"] x-paper > .button-row > .button:not(:last-child) {
+    border-right: solid 1.5px var(--border-color);
 }
 
 .language-buttons > button > span {
@@ -1280,16 +1273,12 @@ button::-moz-focus-inner {
     z-index: -1;
 }
 
-html:not([dir="rtl"]) {
-    #about x-background {
-        right: calc(36px - var(--size-half));
-    }
+html:not([dir="rtl"]) #about x-background {
+    right: calc(36px - var(--size-half));
 }
 
-html[dir="rtl"] {
-    #about x-background {
-        left: calc(36px - var(--size-half));
-    }
+html[dir="rtl"] #about x-background {
+    left: calc(36px - var(--size-half));
 }
 
 
diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css
index b90a5bd..12f5a24 100644
--- a/public_included_ws_fallback/styles.css
+++ b/public_included_ws_fallback/styles.css
@@ -719,21 +719,18 @@ footer .logo {
     position: relative;
 }
 
-html:not([dir="rtl"]) {
-    #display-name,
-    #edit-pen {
-        margin-left: -1rem;
-    }
+html:not([dir="rtl"]) #display-name,
+html:not([dir="rtl"]) #edit-pen {
+    margin-left: -1rem;
 }
 
-html[dir="rtl"] {
-    #display-name,
-    #edit-pen {
-        margin-right: -1rem;
-    }
-    #edit-pen {
-        transform: rotateY(180deg);
-    }
+html[dir="rtl"] #display-name,
+html[dir="rtl"] #edit-pen {
+    margin-right: -1rem;
+}
+
+html[dir="rtl"] #edit-pen {
+    transform: rotateY(180deg);
 }
 
 /* Dialog */
@@ -1016,24 +1013,20 @@ x-paper > .button-row > .button {
     width: 100%;
 }
 
-html:not([dir="rtl"]) {
-    & x-paper > .button-row > .button:not(:first-child) {
-        border-right: solid 1.5px var(--border-color);
-    }
-
-    & x-paper > .button-row > .button:not(:last-child) {
-        border-left: solid 1.5px var(--border-color);
-    }
+html:not([dir="rtl"]) x-paper > .button-row > .button:not(:first-child) {
+    border-right: solid 1.5px var(--border-color);
 }
 
-html[dir="rtl"] {
-    & x-paper > .button-row > .button:not(:first-child) {
-        border-left: solid 1.5px var(--border-color);
-    }
+html:not([dir="rtl"]) x-paper > .button-row > .button:not(:last-child) {
+    border-left: solid 1.5px var(--border-color);
+}
 
-    & x-paper > .button-row > .button:not(:last-child) {
-        border-right: solid 1.5px var(--border-color);
-    }
+html[dir="rtl"] x-paper > .button-row > .button:not(:first-child) {
+    border-left: solid 1.5px var(--border-color);
+}
+
+html[dir="rtl"] x-paper > .button-row > .button:not(:last-child) {
+    border-right: solid 1.5px var(--border-color);
 }
 
 .language-buttons > button > span {
@@ -1310,16 +1303,12 @@ button::-moz-focus-inner {
     z-index: -1;
 }
 
-html:not([dir="rtl"]) {
-    #about x-background {
-        right: calc(36px - var(--size-half));
-    }
+html:not([dir="rtl"]) #about x-background {
+    right: calc(36px - var(--size-half));
 }
 
-html[dir="rtl"] {
-    #about x-background {
-        left: calc(36px - var(--size-half));
-    }
+html[dir="rtl"] #about x-background {
+    left: calc(36px - var(--size-half));
 }