From af45ca1afd2421bec28e44edb56fd79cc03c567c Mon Sep 17 00:00:00 2001 From: Alina Derkach Date: Fri, 24 May 2024 16:36:40 +0300 Subject: [PATCH] Update design.css (#152) * Update design.css * Update design.css --- docs/css/design.css | 79 ++++++++++++++++++--------------------------- 1 file changed, 31 insertions(+), 48 deletions(-) diff --git a/docs/css/design.css b/docs/css/design.css index 0191f057..92ee7e97 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 */ @@ -208,8 +216,6 @@ margin-top: 0.55rem; } .md-header__topic { - -webkit-transition: opacity .25s; - -o-transition: opacity .25s; transition: opacity .25s; } .md-header__topic:hover { @@ -234,19 +240,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 +262,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 +314,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 +353,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 +375,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 +421,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 +439,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;