From 89aa75d940a9cde00c5d68fe17e9bad07b8d3512 Mon Sep 17 00:00:00 2001
From: Anastasia Alexandrova <anastasia.alexandrova@percona.com>
Date: Fri, 31 May 2024 08:15:09 +0300
Subject: [PATCH] DOCS-120 Updated design.css to improve version switcher
 display in dark mode (#581)

modified:   docs/css/design.css
---
 docs/css/design.css | 168 ++++++++++++++++++++++++++++++--------------
 1 file changed, 114 insertions(+), 54 deletions(-)

diff --git a/docs/css/design.css b/docs/css/design.css
index 0191f057d..14f9728b6 100644
--- a/docs/css/design.css
+++ b/docs/css/design.css
@@ -77,10 +77,11 @@
 [data-md-color-scheme="percona-light"] {
 
     /* Primitives */
+    --md-hue: 220;
     --md-primary-fg-color: var(--sky700);
 
     /* Type */
-    --md-typeset-color: #2C323E;
+    --md-typeset-color: var(--stone900);
     --md-typeset-a-color: var(--sky700);
 
     /* Defaults */
@@ -93,20 +94,23 @@
     --md-accent-fg-color: var(--sky500);
     
     /* Footer */
-    --md-footer-fg-color: var(--md-typeset-color);
-    --md-footer-fg-color--light: var(--md-default-fg-color--light);
-    --md-footer-fg-color--lighter: var(--md-default-fg-color--lighter);
+    --md-footer-fg-color: var(--stone900);
+    --md-footer-fg-color--light: rgba(44,50,62,0.72);
+    --md-footer-fg-color--lighter: rgba(44,50,62,0.40);
     --md-footer-bg-color: var(--stone50);
     --md-footer-bg-color--dark: var(--stone50);
 
     /* Code */
     --md-code-bg-color: var(--stone800);
     --md-code-bg-color: var(--stone50);
+
+    /* Tables */
+    --md-typeset-table-color: hsla(var(--md-hue),17%,21%,0.25)
 }
 [data-md-color-scheme="percona-dark"] {
 
     /* Primitives */
-    --md-hue: 230;
+    --md-hue: 0;
     --md-primary-fg-color: var(--sky200);
 
     /* Type */
@@ -124,14 +128,18 @@
     --md-accent-bg-color: var(--stone900);
 
     /* Footer */
-    --md-footer-fg-color: var(--md-typeset-color);
-    --md-footer-fg-color--light: var(--md-default-fg-color--light);
-    --md-footer-fg-color--lighter: var(--md-default-fg-color--lighter);
+    --md-footer-fg-color: #FBFBFB;
+    --md-footer-fg-color--light: rgba(251,251,251,0.72);
+    --md-footer-fg-color--lighter: rgba(251,251,251,0.4);
+    --md-footer-bg-color: var(--stone800);
     --md-footer-bg-color--dark: var(--stone800);
 
     /* Code */
     --md-code-bg-color: var(--stone50);
     --md-code-bg-color: var(--stone800);
+
+    /* Tables */
+    --md-typeset-table-color: hsla(var(--md-hue),0%,100%,0.25)
 }
 
 /* Typography */
@@ -207,14 +215,20 @@
 .md-tabs__link {
     margin-top: 0.55rem;
 }
-.md-header__topic {
-    -webkit-transition: opacity .25s;
-    -o-transition: opacity .25s;
-    transition: opacity .25s;
-}
-.md-header__topic:hover {
-    opacity: 0.7;
+/* .md-header__topic .md-ellipsis {
+    position: relative;
 }
+.md-header__topic:hover .md-ellipsis::after {
+    content: "";
+    position: absolute;
+    display: block;
+    right: 0;
+    bottom: 11px;
+    left: 0;
+    width: 100%;
+    height: 2.5px;
+    background-color: currentColor;
+} */
 
 /* Footer */
 
@@ -234,19 +248,15 @@
     font-weight: bold;
     padding: 0.4167em 1.6em;
     border-radius: 10rem;
-    -webkit-transition: all 0.2s ease-out;
-    -o-transition: all 0.2s ease-out;
     transition: all 0.2s ease-out;
 }
 .md-typeset .md-button--primary {
     color: var(--md-accent-bg-color);
-    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
-            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
+    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
 }
 .md-typeset .md-button--primary:focus,
 .md-typeset .md-button--primary:hover {
-    -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
-            box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
 }
 .md-typeset .md-button:not(.md-button--primary):focus,
 .md-typeset .md-button:not(.md-button--primary):hover {
@@ -260,22 +270,20 @@
     padding: 0 0.2em 0.1em;
     border-radius: 0.15em;
 }
-.md-typeset .highlight code span {
-    color: var(--md-typeset-color);
-}
-.md-typeset .highlight code span {
+.md-typeset .highlight code span,
+.md-typeset code,
+.md-typeset kbd,
+.md-typeset pre {
     color: var(--md-typeset-color);
 }
 .md-button code,
 [data-md-color-scheme="percona-dark"] .md-button:not(.md-button--primary) code {
     background-color: rgba(255, 255, 255, 0.1);
-    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
-            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
 }
 .md-button:not(.md-button--primary) code {
     background-color: rgba(0, 0, 0, 0.05);
-    -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
-            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
 }
 .md-content .md-button {
     margin: 0 0.25em 0.5em 0;
@@ -314,8 +322,7 @@
     border-color: var(--md-default-fg-color--lightest)
 }
 .md-typeset .tabbed-labels {
-    -webkit-box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
-            box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
+    box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
 }
 .md-typeset .tabbed-labels > label:hover {
     color: var(--md-accent-fg-color);
@@ -354,8 +361,7 @@
     --md-admonition-bg-color: var(--md-default-bg-color);
     --md-admonition-fg-color: var(--md-typeset-color);
     border-width: 0.1125rem;
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    box-shadow: none;
 }
 .md-tabs__link {
     font-size: 0.67rem;
@@ -377,13 +383,10 @@
     border: 0.05rem solid var(--md-default-fg-color--lightest);
     border-radius: 0.2rem;
     /* box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20); */
-    -webkit-transition: all 0.2s ease-out;
-    -o-transition: all 0.2s ease-out;
     transition: all 0.2s ease-out;
 }
 [data-banner]:hover {
-    -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
-            box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
 }
 [data-banner] .title {
     font-weight: bold;
@@ -426,24 +429,14 @@
     font-size: 4em;
 }
 [data-grid] {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
+    flex-wrap: wrap;
     margin-right: -1rem;
 }
 [data-grid] [data-banner] {
-    -webkit-box-flex: 1;
-        -ms-flex: 1 1 320px;
-            flex: 1 1 320px;
-    display: -webkit-box;
-    display: -ms-flexbox;
+    flex: 1 1 320px;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    flex-direction: column;
     margin: 0 1rem 1rem 0;
 }
 [data-grid] .title {
@@ -454,9 +447,7 @@
     margin-top: 0;
 }
 [data-grid] [data-banner] > p:nth-last-child(2) {
-    -webkit-box-flex: 2;
-        -ms-flex-positive: 2;
-            flex-grow: 2;
+    flex-grow: 2;
 }
 [data-grid] + [data-banner] {
     margin-top: 0;
@@ -652,6 +643,75 @@ i[warning] [class*="moji"] {
     vertical-align: -0.3125em;
 }
 
+/* Version Select */
+
+.version-select::after {
+    content: "\25BE";
+    display: inline-block;
+    margin-left: -1em;
+    transform: translate(-0.625em, -0.0625em);
+    pointer-events: none;
+}
+#versionSelect {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    align-self: center;
+    font-family: var(--fHeading);
+    font-size: 0.9rem;
+    line-height: 1;
+    font-weight: 700;
+    padding: 0.5em 1.375em 0.5em 0.5em;
+    margin: 0 0.25em;
+    background-color: rgba(0,0,0,0.2);
+    color: inherit;
+    border: none;
+    border-radius: 0.1rem;
+}
+#versionSelect::-ms-expand {
+    display: none;
+}
+
+/* Mike Version Select */
+
+.md-version__current,
+.md-version__link {
+    font-size: 0.9rem;
+    font-weight: 700;
+    line-height: 1;
+    padding: 0.5em;
+}
+.md-version__current {
+    top: unset;
+    margin-left: 0.25em !important;
+    margin-right: 0.25em !important;
+    border-radius: 0.1rem;
+    background-color: rgba(0,0,0,0.2);
+}
+.md-version__current::after {
+    width: 0.5em;
+    height: 0.75em;
+}
+.md-version__list {
+    top: 0.1em;
+    margin: 0.25em;
+    border-radius: 0.1rem;
+}
+[dir="ltr"] .md-version__current::after {
+    margin-left: 0.4em;
+}
+[dir="rtl"] .md-version__current::after {
+    margin-right: 0.4em;
+}
+[dir="ltr"] .md-version__link {
+    padding-left: 0.5em;
+    padding-right: 1.4375em;
+}
+[dir="rtl"] .md-version__link {
+    padding-left: 1.4375em;
+    padding-right: 0.5em;
+}
+
 /* Media queries */
 
 @media screen and (max-width: 76.1875em) {
@@ -669,4 +729,4 @@ i[warning] [class*="moji"] {
         padding: 1em;
     }
 }
-/**/
+/**/
\ No newline at end of file