chore: edit theme overrides

Описание

Внесены изменения в содержимое папки overrides и в файл docs/extra/style.css.

Основная таблица стилей сайта документации — файл main.4b4a2bd9.min.css из темы Material для MkDocs. See: !335 (comment 67897)

Изменения содержимого папки overrides:

• извлек .icons/icon-mono.svg из partials/~picodata-link.html
• переименовал partials/~picodata-link.html -> .custom/source-picodata.html
• переименовал partials/~icon.html -> .custom/icon.html
• добавил шаблон partials/source.html
• синхронизировал .custom/source-picodata.html с шаблоном partials/source.html
• отредактировал partials/header.html и partials/nav.html

Новые переопределения таблицы стилей Material для MkDocs:

• селектор .md-source__repository {max-width: 100%} — убирает обрезание текста кнопки GitLab в хедере
• директива @media screen and (max-width: 59.984375em) — мобильная версия сайта:
  • селектор .md-nav__source {background-color: var(--md-default-bg-color)} — устанавливает белый фон для кнопок GitLab и Picodata в панели навигации

Общие изменения в файле `docs/extra/style.css`

Общие изменения в файле docs/extra/style.css

• удалил селекторы:
  • .btn и все дочерние объекты
  • .header-site и все дочерние объекты
  • .md-content
  • .md-search
  • .md-search__form input
  • .md-sidebar
  • .md-sidebar--secondary
  • .md-tabs
  • .md-tabs__link--active
  • [data-md-toggle=search]:checked~.md-header .md-search__form
• удалил директивы:
  • @media(min-width: 540px)
  • @media(min-width: 992px)
  • @media(min-width: 1400px)
  • @media screen and (max-width: 76.1875em)
• уточнил определения селекторов:
  • h1, h2, h3, h4, h5, h6 -> .md-typeset h1, h2, h3, h4, h5, h6
  • .md-header__title -> [dir=ltr] .md-header__title
  • .md-header[data-md-state="shadow"] -> .md-header--shadow
• вынес селектор .md-search__input::placeholder из директивы @media screen and (min-width: 60em)
• переместил селектор в директиву @media screen and (max-width: 76.234375em):
  • .md-nav--primary .md-nav__title[for=__drawer]
  • .md-icon__mobile

Частные изменения в файле `docs/extra/style.css`

Частные изменения в файле docs/extra/style.css

• псевдокласс :root:
  • удалил переменные:
    • --bg — взамен этой переменной и цвета white использовал переменную --md-default-bg-color
    • --btn-gray-bg
    • --btn-gray-border
    • --btn-gray-hover-bg
    • --btn-gray-hover-border
    • --btn-red-bg
    • --btn-red-border
    • --btn-red-hover-bg
    • --btn-red-hover-border
  • переименовал переменную --tiny-gray -> --gray
  • переместил переменную --md-default-fg-color--light в группу :root,[data-md-color-scheme=default]
• селекторы h4, h5, h6:
  • удалил свойство font-weight: 600 !important
• селектор .md-header--shadow:
  • переместил свойство transition из селектора .md-header--shadow
  • удалил свойство background-color: white
• селектор .md-search__form:
  • удалил свойство color: var(--black) — переопределяется далее
  • удалил свойство border-radius: 26px — переопределяется далее
  • удалил свойство border-radius: .1rem — дублирует стандартное значение
  • удалил свойства height: 1.8rem — дублирует стандартное значение

See:

• https://squidfunk.github.io/mkdocs-material/customization/#setup-and-theme-structure
• https://github.com/squidfunk/mkdocs-material/tree/master/src/templates/assets/stylesheets
• https://docs.picodata.io/picodata/stable/assets/stylesheets/main.4b4a2bd9.min.css

---

• Close #186 (closed)
• Target branch: main
• Changes should be cherry-picked to 24.1: YES
• Staging: https://docs.binary.picodata.io/picodata/branch-edit-theme-overrides/
• See !312 (merged)

docs/extra/style.css

-:root {
-
-    /* --bg: linear-gradient(353.02deg, #DEEEF9 15.65%, #E0EFF9 41.41%, #D2EAFB 66.24%, #E8F3FB 94.82%); */
-    --bg: white;
-    --shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 4px 24px rgba(0, 0, 0, 0.08);
+/* >>>>>>>>>>>> Material for MkDocs stylesheet overrides >>>>>>>>>>>> */
+/* See: ./material/templates/assets/stylesheets/main.4b4a2bd9.min.css */
 
+:root {
+    /* Variables */
     --red: #ED453A;
-    --btn-gray-bg: transparent;
-    --btn-gray-border: rgba(43, 45, 44, 0.1);
-    --btn-gray-hover-bg: rgba(43, 45, 44, 0.12);
-    --btn-gray-hover-border: rgba(43, 45, 44, 0.08);
-    --btn-red-bg: #ED453A;
-    --btn-red-border: #ED453A;
-    --btn-red-hover-bg: #D74137;
-    --btn-red-hover-border: #D74137;
-
-    --tiny-gray: rgba(43, 45, 44, 0.05);
-
+    --gray: rgba(43, 45, 44, 0.05);
+    --shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 4px 24px rgba(0, 0, 0, 0.08);
+    /* Properties */
     --md-primary-fg-color: var(--red);
-    --md-accent-fg-color: var(--red);
     --md-primary-bg-color: #1f1e1e;
+    --md-accent-fg-color: var(--red);
+    /* --md-primary-fg-color: #4051b5;
+       --md-primary-bg-color: #fff;
+       --md-accent-fg-color: #526cfe; */
+}
+
+:root,[data-md-color-scheme=default] {
     --md-default-fg-color--light: #1f1e1e;
+    /* --md-default-fg-color--light: #0000008a; */
 }
 
 html {
-    background: var(--bg);
+    background: var(--md-default-bg-color);
     height: auto;
+    /* NONE
+       height: 100%; */
 }
 
 body {
     background: transparent;
     min-height: 100vh;
+    /* background-color: var(--md-default-bg-color);
+       min-height: 100%; */
 }
 
-.btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 26px;
-    font-size: 15px;
-    color: var(--black);
-    background-color: transparent;
-    border: 1px solid transparent;
-    line-height: 1.2em;
-    padding: 0 32px;
-    height: 52px;
-    text-decoration: none;
-    text-align: center;
-    box-sizing: border-box
-}
-
-.btn.sm {
-    font-weight: 400;
-    height: 36px;
-    border-radius: 18px;
-    padding: 0 25px
-}
-
-.btn.lg {
-    height: 56px
-}
-
-.btn.red {
-    background: var(--btn-red-bg);
-    border-color: var(--btn-red-border);
-    color: #fff
-}
-
-.btn.red:hover {
-    background: var(--btn-red-hover-bg);
-    border-color: var(--btn-red-hover-border)
-}
-
-.btn.gray {
-    background: var(--btn-gray-bg);
-    border-color: var(--btn-gray-border);
-    color: var(--black)
-}
-
-.btn.gray:hover {
-    background: var(--btn-gray-hover-bg);
-    border-color: var(--btn-gray-hover-border)
-}
-
-.btn:disabled,.btn.disabled {
-    background-color: var(--gray);
-    border-color: var(--gray);
-    pointer-events: none
-}
-
-
-.header-site {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: 60px;
-    padding: 0 .8rem;
-    font-size: 17px;
-    font-weight: 500;
-    z-index: 9;
-}
-
-.header-site:hover {
-    z-index: 11;
-}
-
-.header-site__wrapper {
-    display: none;
-    flex-direction: row;
-    align-items: center;
-}
-
-@media(min-width: 540px) {
-    .header-site__wrapper {
-        display: flex;
-    }
+.md-typeset h1, h2, h3, h4, h5, h6 {
+    font-family: "Montserrat", sans-serif;
+    font-weight: 700 !important;
+    letter-spacing: -0.02em  !important;
+    /* NONE
+       font-weight: {300, 300, 400, 700, 700, 700}
+       letter-spacing: -.01em */
 }
 
-.md-header,
-.md-tabs {
-    background-color: white;
+.md-logo {
+    padding: 0 !important;
+    /* padding: .4rem */
 }
 
-.md-search {
-    z-index: 10;
+.md-logo img {
+    height: 36px !important;
+    /* height: 1.2rem */
 }
 
-.md-tabs__link--active {
-    color: var(--red) !important;
+.md-header {
+    background-color: var(--md-default-bg-color);
+    /* background-color: var(--md-primary-fg-color); */
 }
 
-.md-header {
+.md-header--shadow {
     transition: transform .25s cubic-bezier(.1,.7,.1,1),
                 box-shadow .25s,
                 background-color .25s;
-}
-.md-header[data-md-state="shadow"] {
-    background-color: white;
+    /* transition: transform .25s cubic-bezier(.1,.7,.1,1),
+                   box-shadow .25s */
 }
 
-@media screen and (max-width: 76.1875em) {
-    .md-nav--primary .md-nav__title[for=__drawer] {
-        background-color: rgba(0,0,0,.15);
-    }
+[dir=ltr] .md-header__title {
+    margin-left: 0.6rem !important;
+    /* margin-left: 1rem; */
 }
 
+.md-header__topic {
+    font-family: "Montserrat", sans-serif;
+    font-weight: 600  !important;
+    /* NONE
+       font-weight: (700 or NONE) */
+}
 
 @media screen and (min-width: 60em) {
     .md-search__form {
-        color: var(--black);
-        background-color: var(--tiny-gray) !important;
-        border: 1px solid var(--tiny-gray);
+        background-color: var(--gray);
+        border: 1px solid var(--gray);
         color: black;
-        border-radius: 26px;
-        border-radius: .1rem;
-        height: 1.8rem
-    }
-
-    [data-md-toggle=search]:checked~.md-header .md-search__form {
-        background-color: white !important;
-    }
-
-    .md-search__form input {
-        background: transparent;
-    }
-
-    .md-search__input::placeholder {
-        color: initial;
+        /* background-color:#00000042;
+           NONE
+           NONE */
     }
 
     .md-search__form:hover {
-        background-color: white;
+        background-color: var(--md-default-bg-color);
         color: inherit;
+        /* background-color: #ffffff1f
+           NONE */
     }
 }
 
-@media(min-width: 992px) {
-    .header-site {
-        height: 80px;
-    }
+.md-search__input::placeholder {
+    color: initial;
+    /* color: var(--md-primary-bg-color--light) */
 }
 
-@media(min-width: 1400px) {
-    .header-site {
-        padding: 0 60px;
-    }
+.md-header__source {
+    max-width: 4.1rem;
+    /* max-width: 11.7rem */
 }
 
-.header-site nav {
-    margin: 0 32px 0 0;
+.md-source__repository {
+    max-width: 100%
+    /* max-width: calc(100% - 1.2rem) */
 }
 
-.header-site nav ul {
-    display: none;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+.md-main {
+    background: var(--md-default-bg-color);
+    /* NONE */
 }
 
-@media(min-width: 992px) {
-    .header-site nav ul {
-        display: flex;
+@media screen and (max-width: 76.234375em) {
+    .md-nav--primary .md-nav__title[for=__drawer] {
+        background-color: rgba(0,0,0,.15);
+        /* background-color: var(--md-primary-fg-color); */
     }
 }
 
-.header-site nav ul li {
-    position: relative;
-    margin: 0 0 0 32px;
-}
-
-.header-site nav ul li a {
-    display: block;
-    color: inherit;
-    font-size: 16px;
-    font-weight: 500;
-    text-decoration: none;
-    transition: all .35s ease-in-out;
-}
-
-.header-site nav ul li a:hover {
-    color: var(--red)
-}
-
-.header-site nav ul > li ul {
-    flex-direction: column;
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    left: 50%;
-    top: 100%;
-    transform: translate(-50%, 0px);
-    transition: visibility .35s ease-in-out,opacity .35s ease-in-out;
-    list-style-type: none;
-    margin: 10px 0 0;
-    padding: 8px;
-    border-radius: 12px;
-    background: #fff;
-    box-shadow: var(--shadow);
-    z-index: 200;
-}
-
-.header-site nav ul > li ul:before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 100%;
-    height: 10px;
-    z-index: 1
-}
-
-.header-site nav ul > li ul li {
-    display: flex;
-    margin: 0
-}
-
-.header-site nav ul > li ul li a {
-    display: flex;
-    justify-content: space-between;
-    flex: 1;
-    font-size: 13px;
-    padding: 10px 12px;
-    border-radius: 8px;
-    line-height: 100%;
-    text-decoration: none;
-    color: inherit;
-    white-space: nowrap
+@media screen and (max-width: 59.984375em) {
+    .md-nav__source {
+        background-color: var(--md-default-bg-color);
+        /* background-color: var(--md-primary-fg-color--dark) */
+    }
 }
 
-.header-site nav ul > li:hover > ul {
-    visibility: visible;
-    opacity: 1
-}
+/* >>>>>>>>>>>>>>>>>>>>>>>> CUSTOM SELECTORS >>>>>>>>>>>>>>>>>>>>>>>> */
 
-.md-logo {
-    /* display: none !important; */
-    padding: 0 !important;
-}
-.md-logo img {
-    height: 36px !important;
-}
+/* Hide `.md-icon__mobile` */
 .md-icon__mobile {
     display: none;
 }
+
+/* Set `img` dimensions of `.md-icon__mobile` */
 .md-icon__mobile img {
     height: 24px;
     width: 24px;
 }
-@media screen and (max-width: 76.1875em) {
+
+/* Show `.md-icon__mobile` in the mobile version */
+@media screen and (max-width: 76.234375em) {
     .md-icon__mobile {
         display: block;
     }
 }
 
-.md-header__title {
-    margin-left: 0.6rem !important;
-}
-
-.md-header__topic {
-    font-family: "Montserrat", sans-serif;
-}
-
-/* .md-header__topic, */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-family: "Montserrat", sans-serif;
-    font-weight: 700 !important;
-    line-height: 1.2em;
-    letter-spacing: -0.02em  !important;;
-}
-
-.md-header__topic,
-h4,
-h5,
-h6 {
-    font-weight: 600  !important;
-}
-
-.md-sidebar {
-    order: 1;
-}
-
-.md-sidebar--secondary {
-    order: 3;
-}
-
-.md-content {
-    order: 2;
-}
-
-.md-main {
-    background: white;
-}
-
+/* Set `md-header__source` max-width for link to Picodata site in the header */
 .picodata-link {
     max-width: 5.9rem !important;
 }
-
-.md-header__source {
-    max-width: 4.1rem;
-}