RTL Dropdown Nav corrected thanks to @64bitint

Added popovers to possibly replace the notifications. Started adding popover toasts
Yohn · Dec 14, 2024 · 64373c2 · 64373c2
1 parent 8a7b25a
commit 64373c2
Show file tree

Hide file tree

Showing 244 changed files with 3,461 additions and 724 deletions.
diff --git a/css/pico.amber.css b/css/pico.amber.css
@@ -340,6 +340,23 @@ details summary[role=button]:not(.outline)::after {
   --pico-timeline-dot-border-color: var(--pico-primary-background);
   --pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
 }
+[data-theme=light] [aria-busy=true]:not(input, select, textarea).contrast:is(button,
+[type=submit],
+[type=button],
+[type=reset],
+[role=button]):not(.outline)::before,
+:root:not([data-theme=dark]) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
+[type=submit],
+[type=button],
+[type=reset],
+[role=button]):not(.outline)::before,
+:host(:not([data-theme=dark])) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
+[type=submit],
+[type=button],
+[type=reset],
+[role=button]):not(.outline)::before {
+  filter: invert(1) !important;
+}
 [data-theme=light] input:is([type=submit],
 [type=button],
 [type=reset],
@@ -3488,11 +3505,6 @@ body:has(dialog[open]) {
 /**
  * Nav
  */
-:where(nav li)::before {
-  float: left;
-  content: "";
-}
-
 nav,
 nav ul {
   display: flex;
@@ -4062,6 +4074,27 @@ section[role=region] details[open] > div {
   transition: opacity var(--pico-transition);
 }
 
+[popover] {
+  border-color: var(--pico-primary);
+}
+[popover]:popover-open {
+  margin: auto auto;
+}
+[popover]::backdrop {
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  background: rgba(0, 0, 0, 0.7);
+}
+[popover] button {
+  margin-top: -10px;
+  padding: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--pico-primary);
+  font-size: 1.5em;
+  opacity: 0.8;
+}
+
 /**
 * Notification (<dialog>)
 */

diff --git a/css/pico.amber.min.css b/css/pico.amber.min.css
diff --git a/css/pico.blue.css b/css/pico.blue.css
@@ -340,6 +340,23 @@ details summary[role=button]:not(.outline)::after {
   --pico-timeline-dot-border-color: var(--pico-primary-background);
   --pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
 }
+[data-theme=light] [aria-busy=true]:not(input, select, textarea).contrast:is(button,
+[type=submit],
+[type=button],
+[type=reset],
+[role=button]):not(.outline)::before,
+:root:not([data-theme=dark]) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
+[type=submit],
+[type=button],
+[type=reset],
+[role=button]):not(.outline)::before,
+:host(:not([data-theme=dark])) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
+[type=submit],
+[type=button],
+[type=reset],
+[role=button]):not(.outline)::before {
+  filter: invert(1) !important;
+}
 [data-theme=light] input:is([type=submit],
 [type=button],
 [type=reset],
@@ -3488,11 +3505,6 @@ body:has(dialog[open]) {
 /**
  * Nav
  */
-:where(nav li)::before {
-  float: left;
-  content: "";
-}
-
 nav,
 nav ul {
   display: flex;
@@ -4062,6 +4074,27 @@ section[role=region] details[open] > div {
   transition: opacity var(--pico-transition);
 }
 
+[popover] {
+  border-color: var(--pico-primary);
+}
+[popover]:popover-open {
+  margin: auto auto;
+}
+[popover]::backdrop {
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  background: rgba(0, 0, 0, 0.7);
+}
+[popover] button {
+  margin-top: -10px;
+  padding: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--pico-primary);
+  font-size: 1.5em;
+  opacity: 0.8;
+}
+
 /**
 * Notification (<dialog>)
 */

diff --git a/css/pico.blue.min.css b/css/pico.blue.min.css
diff --git a/css/pico.classless.amber.css b/css/pico.classless.amber.css
@@ -2602,11 +2602,6 @@ body:has(dialog[open]) {
 /**
  * Nav
  */
-:where(nav li)::before {
-  float: left;
-  content: "";
-}
-
 nav,
 nav ul {
   display: flex;
@@ -3176,6 +3171,27 @@ section[role=region] details[open] > div {
   transition: opacity var(--pico-transition);
 }
 
+[popover] {
+  border-color: var(--pico-primary);
+}
+[popover]:popover-open {
+  margin: auto auto;
+}
+[popover]::backdrop {
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  background: rgba(0, 0, 0, 0.7);
+}
+[popover] button {
+  margin-top: -10px;
+  padding: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--pico-primary);
+  font-size: 1.5em;
+  opacity: 0.8;
+}
+
 /**
 * Notification (<dialog>)
 */

diff --git a/css/pico.classless.amber.min.css b/css/pico.classless.amber.min.css
diff --git a/css/pico.classless.blue.css b/css/pico.classless.blue.css
@@ -2602,11 +2602,6 @@ body:has(dialog[open]) {
 /**
  * Nav
  */
-:where(nav li)::before {
-  float: left;
-  content: "";
-}
-
 nav,
 nav ul {
   display: flex;
@@ -3176,6 +3171,27 @@ section[role=region] details[open] > div {
   transition: opacity var(--pico-transition);
 }
 
+[popover] {
+  border-color: var(--pico-primary);
+}
+[popover]:popover-open {
+  margin: auto auto;
+}
+[popover]::backdrop {
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  background: rgba(0, 0, 0, 0.7);
+}
+[popover] button {
+  margin-top: -10px;
+  padding: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--pico-primary);
+  font-size: 1.5em;
+  opacity: 0.8;
+}
+
 /**
 * Notification (<dialog>)
 */

diff --git a/css/pico.classless.blue.min.css b/css/pico.classless.blue.min.css
diff --git a/css/pico.classless.conditional.amber.css b/css/pico.classless.conditional.amber.css
@@ -2602,11 +2602,6 @@ body:has(dialog[open]) {
 /**
  * Nav
  */
-:where(nav li)::before {
-  float: left;
-  content: "";
-}
-
 .pico nav,
 .pico nav ul {
   display: flex;
@@ -3176,6 +3171,27 @@ body:has(dialog[open]) {
   transition: opacity var(--pico-transition);
 }
 
+.pico [popover] {
+  border-color: var(--pico-primary);
+}
+.pico [popover]:popover-open {
+  margin: auto auto;
+}
+.pico [popover]::backdrop {
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  background: rgba(0, 0, 0, 0.7);
+}
+.pico [popover] button {
+  margin-top: -10px;
+  padding: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--pico-primary);
+  font-size: 1.5em;
+  opacity: 0.8;
+}
+
 /**
 * Notification (<dialog>)
 */

diff --git a/css/pico.classless.conditional.amber.min.css b/css/pico.classless.conditional.amber.min.css
diff --git a/css/pico.classless.conditional.blue.css b/css/pico.classless.conditional.blue.css
@@ -2602,11 +2602,6 @@ body:has(dialog[open]) {
 /**
  * Nav
  */
-:where(nav li)::before {
-  float: left;
-  content: "";
-}
-
 .pico nav,
 .pico nav ul {
   display: flex;
@@ -3176,6 +3171,27 @@ body:has(dialog[open]) {
   transition: opacity var(--pico-transition);
 }
 
+.pico [popover] {
+  border-color: var(--pico-primary);
+}
+.pico [popover]:popover-open {
+  margin: auto auto;
+}
+.pico [popover]::backdrop {
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  background: rgba(0, 0, 0, 0.7);
+}
+.pico [popover] button {
+  margin-top: -10px;
+  padding: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--pico-primary);
+  font-size: 1.5em;
+  opacity: 0.8;
+}
+
 /**
 * Notification (<dialog>)
 */

diff --git a/css/pico.classless.conditional.blue.min.css b/css/pico.classless.conditional.blue.min.css
diff --git a/css/pico.classless.conditional.cyan.css b/css/pico.classless.conditional.cyan.css
@@ -2602,11 +2602,6 @@ body:has(dialog[open]) {
 /**
  * Nav
  */
-:where(nav li)::before {
-  float: left;
-  content: "";
-}
-
 .pico nav,
 .pico nav ul {
   display: flex;
@@ -3176,6 +3171,27 @@ body:has(dialog[open]) {
   transition: opacity var(--pico-transition);
 }
 
+.pico [popover] {
+  border-color: var(--pico-primary);
+}
+.pico [popover]:popover-open {
+  margin: auto auto;
+}
+.pico [popover]::backdrop {
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  background: rgba(0, 0, 0, 0.7);
+}
+.pico [popover] button {
+  margin-top: -10px;
+  padding: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--pico-primary);
+  font-size: 1.5em;
+  opacity: 0.8;
+}
+
 /**
 * Notification (<dialog>)
 */

diff --git a/css/pico.classless.conditional.cyan.min.css b/css/pico.classless.conditional.cyan.min.css
diff --git a/css/pico.classless.conditional.fuchsia.css b/css/pico.classless.conditional.fuchsia.css
@@ -2602,11 +2602,6 @@ body:has(dialog[open]) {
 /**
  * Nav
  */
-:where(nav li)::before {
-  float: left;
-  content: "";
-}
-
 .pico nav,
 .pico nav ul {
   display: flex;
@@ -3176,6 +3171,27 @@ body:has(dialog[open]) {
   transition: opacity var(--pico-transition);
 }
 
+.pico [popover] {
+  border-color: var(--pico-primary);
+}
+.pico [popover]:popover-open {
+  margin: auto auto;
+}
+.pico [popover]::backdrop {
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  background: rgba(0, 0, 0, 0.7);
+}
+.pico [popover] button {
+  margin-top: -10px;
+  padding: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--pico-primary);
+  font-size: 1.5em;
+  opacity: 0.8;
+}
+
 /**
 * Notification (<dialog>)
 */

diff --git a/css/pico.classless.conditional.fuchsia.min.css b/css/pico.classless.conditional.fuchsia.min.css