diff options
Diffstat (limited to 'plugins/base/src/main/resources/dokka/styles')
3 files changed, 547 insertions, 425 deletions
diff --git a/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css b/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css deleted file mode 100644 index 9a0f06f8..00000000 --- a/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css +++ /dev/null @@ -1,17 +0,0 @@ -@font-face{ - font-family: 'JetBrains Mono'; - src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/web/JetBrainsMono-Regular.eot') format('embedded-opentype'), - url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2'), - url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face{ - font-family: 'JetBrains Mono'; - src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/web/JetBrainsMono-Bold.eot') format('embedded-opentype'), - url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Bold.woff2') format('woff2'), - url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Bold.ttf') format('truetype'); - font-weight: bold; - font-style: bold; -}
\ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/styles/logo-styles.css b/plugins/base/src/main/resources/dokka/styles/logo-styles.css index 25de3f61..f3846e82 100644 --- a/plugins/base/src/main/resources/dokka/styles/logo-styles.css +++ b/plugins/base/src/main/resources/dokka/styles/logo-styles.css @@ -1,15 +1,5 @@ -.library-name a { - position: relative; - margin-left: 55px; +:root { + --dokka-logo-image-url: url('../images/logo-icon.svg'); + --dokka-logo-height: 50px; + --dokka-logo-width: 50px; } - -.library-name a::before { - content: ''; - background: url("../images/logo-icon.svg") center no-repeat; - background-size: contain; - position: absolute; - width: 50px; - height: 50px; - top: -18px; - left: -55px; -}
\ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index e34b9fb4..8d5770df 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -1,7 +1,6 @@ -@import url(https://fonts.googleapis.com/css?family=Open+Sans:300i,400,700); -@import url('https://rsms.me/inter/inter.css'); -@import url('jetbrains-mono.css'); +@import url('https://fonts.googleapis.com/css?family=JetBrains+Mono'); +/* --- root styles --- */ :root { --default-gray: #f4f4f4; --default-font-color: black; @@ -18,7 +17,6 @@ --footer-go-to-top-color: white; --horizontal-spacing-for-content: 16px; - --mobile-horizontal-spacing-for-content: 8px; --bottom-spacing: 16px; --color-scrollbar: rgba(39, 40, 44, 0.40); --color-scrollbar-track: var(--default-gray); @@ -44,36 +42,12 @@ --inactive-tab-border-color: rgba(164, 164, 170, 0.7); --active-section-color: #7F52FF; - --inactive-section-color: rgba(25,25,28,.7); + --inactive-section-color: rgba(25, 25, 28, .7); + --sidebar-width: 280px; --sidemenu-section-active-color: #7F52FF; } -:root.theme-dark { - --background-color: #27282c; - --color-dark: #3d3d41; - --default-font-color: hsla(0, 0%, 100%, 0.8); - --border-color: hsla(0, 0%, 100%, 0.2); - --code-background: hsla(0, 0%, 100%, 0.05); - --breadcrumb-font-color: #8c8c8e; - --brief-color: hsla(0, 0%, 100%, 0.4); - --copy-icon-color: hsla(0, 0%, 100%, 0.6); - --copy-icon-hover-color: #fff; - - --active-tab-border-color: var(--default-font-color); - --inactive-tab-border-color: hsla(0, 0%, 100%, 0.4); - - --active-section-color: var(--default-font-color); - --inactive-section-color: hsla(0, 0%, 100%, 0.4); - - --navigation-highlight-color: rgba(255, 255, 255, 0.05); - --footer-background: hsla(0, 0%, 100%, 0.05); - --footer-font-color: hsla(0, 0%, 100%, 0.6); - --footer-go-to-top-color: var(--footer-font-color); - - --sidemenu-section-active-color: var(--color-dark); -} - html { height: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -100,62 +74,417 @@ html ::-webkit-scrollbar-thumb { background: var(--color-scrollbar); } +html, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +/* /--- root styles --- */ -.main-content { - padding-bottom: var(--bottom-spacing); - z-index: 0; - max-width: var(--max-width); +/* --- global tags styles --- */ +body, table { + background: var(--background-color); + font-family: var(--default-font-family); + font-style: normal; + font-weight: normal; + font-size: var(--default-font-size); + line-height: 1.6; + margin: 0; +} + +h1 { + font-size: 40px; + line-height: 48px; + letter-spacing: -1px; +} + +h2 { + font-size: 31px; + line-height: 40px; + letter-spacing: -0.5px; +} + +h3 { + font-size: 20px; + line-height: 28px; + letter-spacing: -0.2px; +} + +p, ul, ol, table, pre, dl { + margin: 0; +} + +a { + text-decoration: none; +} + +u { + text-decoration: none; + padding-bottom: 2px; + border-bottom: 1px solid var(--border-color); +} + +blockquote { + border-left: 1ch solid var(--default-gray); + margin: 0; + padding-left: 1ch; + font-style: italic; + color: var(--average-color); +} + +.theme-dark blockquote { + color: var(--default-font-color); + border-left-color: var(--code-background); +} + +pre { + display: block; +} + +dt { + color: #444; + font-weight: 700; +} + +img { + max-width: 100%; +} + +small { + font-size: 11px; +} + +table { width: 100%; - margin-left: auto; - margin-right: auto; + border-collapse: collapse; + padding: 5px; } -.main-content > * { - margin-left: var(--horizontal-spacing-for-content); - margin-right: var(--horizontal-spacing-for-content); +th, td { + padding: 12px 10px 11px; + text-align: left; + vertical-align: top; } -.main-content .content > hr { - margin: 30px 0; - border-top: 3px double #8c8b8b; +tbody > tr { + min-height: 56px; } -.navigation-wrapper { +td:first-child { + width: 20vw; +} +/* /--- global tags styles --- */ + +/* --- utils classes --- */ +.w-100 { + width: 100%; +} + +.no-gutters { + margin: 0; + padding: 0; +} + +.d-flex { display: flex; - flex-wrap: wrap; - position: sticky; - top: 0; - background-color: var(--color-dark); - z-index: 4; +} + +.floating-right { + float: right; +} + +.pull-right { + float: right; + margin-left: auto +} + +.clearfix::after { + display: block; + content: ''; + clear: both; + height: 0; +} +/* /--- utils classes --- */ + +/* ---dark theme --- */ +.theme-dark { + --background-color: #27282c; + --color-dark: #3d3d41; + --default-font-color: hsla(0, 0%, 100%, 0.8); + --border-color: hsla(0, 0%, 100%, 0.2); + --code-background: hsla(0, 0%, 100%, 0.05); + --breadcrumb-font-color: #8c8c8e; + --brief-color: hsla(0, 0%, 100%, 0.4); + --copy-icon-color: hsla(0, 0%, 100%, 0.6); + --copy-icon-hover-color: #fff; + + --active-tab-border-color: var(--default-font-color); + --inactive-tab-border-color: hsla(0, 0%, 100%, 0.4); + + --active-section-color: var(--default-font-color); + --inactive-section-color: hsla(0, 0%, 100%, 0.4); + + --navigation-highlight-color: rgba(255, 255, 255, 0.05); + --footer-background: hsla(0, 0%, 100%, 0.05); + --footer-font-color: hsla(0, 0%, 100%, 0.6); + --footer-go-to-top-color: var(--footer-font-color); + + --sidemenu-section-active-color: var(--color-dark); +} +/* /---dark theme --- */ + +.root { + display: flex; + flex-direction: column; + height: 100%; +} + +/* --- Navigation styles --- */ +.navigation { + display: flex; + justify-content: space-between; + color: #fff; + background-color: var(--color-dark); font-family: var(--default-font-family); letter-spacing: -0.1px; - align-items: center; /* Reset margin and use padding for border */ margin-left: 0; margin-right: 0; - padding: 19px var(--horizontal-spacing-for-content) 18px; + padding: 10px var(--horizontal-spacing-for-content); + + z-index: 4; } -.navigation-wrapper > .library-name { - font-weight: 700; - margin-right: 12px; +.navigation--inner { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + flex: 1 1 auto; } -.navigation-wrapper a { - color: #fff; +.navigation--inner, .navigation-title { + min-height: 40px; } -#searchBar { - margin-left: 16px; - display: inline-flex; - align-content: center; +.navigation-title, .filter-section { align-items: center; - width: 36px; - height: 36px; } +.navigation-title { + display: flex; + align-items: center; +} + +/* --- Navigation MENU --- */ +.menu-toggle { + color: var(--background-color); + line-height: 0; + font-size: 0; + text-indent: -9999px; + + background: transparent; + border: none; + padding: 0; + margin-right: 16px; + outline: none; + + transition: margin .2s ease-out; + z-index: 5; +} + +@media (min-width: 760px) { + .menu-toggle { + display: none; + } +} + +.menu-toggle::before { + display: block; + content: ''; + background: url('../images/burger.svg') no-repeat center; + height: 28px; + width: 28px; +} +/* /--- Navigation MENU --- */ + +.library-version { + position: relative; + top: -4px; + margin-left: 3px; + + color: rgba(255,255,255,.7); + font-size: 13px; + font-weight: normal; + line-height: 16px; +} + +.filter-section { + z-index: 0; +} + +.no-js .filter-section { + display: none; +} + +@media (min-width: 760px) { + .filter-section { + padding: 5px 0 5px; + } +} +/* --- Navigation controls --- */ +.navigation-controls { + display: flex; +} + +@media (min-width: 760px) { + .navigation-controls { + align-items: center; + } +} + +.no-js .navigation-controls { + display: none; +} + +/* --- Navigation THEME --- */ +.navigation-controls--search { + display: inline-flex; + font-size: 0; + line-height: 0; +} + +.navigation-controls--theme { + display: block; + border-radius: 50%; + background-color: inherit; + margin-left: 4px; + padding: 0; + border: none; + cursor: pointer; + font-size: 0; + line-height: 0; +} + +.navigation-controls--theme::before { + height: 40px; + width: 40px; +} + +.navigation-controls--theme:hover { + background: var(--white-10); +} + +.navigation-controls--theme::before { + display: block; + content: url("../images/theme-toggle.svg"); +} + +@media (max-width: 759px) { + .navigation-controls--theme { + display: none; + } +} +/* /--- Navigation THEME --- */ + +.navigation .platform-selector:not([data-active]) { + color: #fff; +} +/* /--- Navigation controls --- */ +/* /--- Navigation styles --- */ + +/* --- Layout styles --- */ + +#container { + display: flex; + flex: 1 1 auto; + min-height: 0; /* full height exclude header */ +} + +#container > .sidebar, #container > #main { + overflow: auto; +} + +#main { + display: flex; + flex-direction: column; + flex: 1 1 0; /* full width, but no affects for sidebar */ +} + +.sidebar { + display: flex; + flex-direction: column; + box-sizing: border-box; + border-right: 1px solid var(--border-color); + width: var(--sidebar-width); +} + +.no-js .sidebar { + display: none; +} + +@media (max-width: 759px) { + #container { + position: relative; + } + + .sidebar { + position: absolute; + top: 0; + bottom: 0; + box-sizing: border-box; + background: var(--background-color); + margin-left: calc(-1 * var(--sidebar-width)); + transition: margin .2s ease-out; + z-index: 4; + } + + .sidebar.open { + margin-left: 0; + } + + .sidebar.open ~ #main .navigation-controls--search { + display: none; + } + + .sidebar.open ~ #main .menu-toggle { + margin-left: var(--sidebar-width); + } +} + +.sidebar--inner { + font-size: 12px; + font-weight: 400; + line-height: 16px; + padding-top: 22px; + padding-bottom: 16px; +} +/* /--- Layout styles --- */ + +/* --- Main Content styles --- */ +.main-content { + padding-bottom: var(--bottom-spacing); + margin-left: auto; + margin-right: auto; + max-width: var(--max-width); + width: 100%; + z-index: 0; +} + +.main-content > * { + margin-left: var(--horizontal-spacing-for-content); + margin-right: var(--horizontal-spacing-for-content); +} + +.main-content .content > hr { + margin: 30px 0; + border-top: 3px double #8c8b8b; +} +/* /--- Main Content styles --- */ + +/* /--- Breadcrumbs styles --- */ .breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover { margin-top: var(--breadcrumb-margin); color: var(--breadcrumb-font-color); @@ -169,6 +498,7 @@ html ::-webkit-scrollbar-thumb { .breadcrumbs .current { color: var(--default-font-color); } +/* /--- Breadcrumbs styles --- */ .tabs-section > .section-tab:first-child, .platform-hinted > .platform-bookmarks-row > .platform-bookmark:first-child { @@ -192,6 +522,14 @@ html ::-webkit-scrollbar-thumb { margin-bottom: 16px; } +.no-js .platform-bookmarks-row + .sourceset-dependent-content { + margin-top: 8px; +} + +.no-js .platform-bookmarks-row + .sourceset-dependent-content:last-of-type { + margin-top: 0; +} + .section-tab:hover { color: var(--default-font-color); border-bottom: 2px solid var(--default-font-color); @@ -246,10 +584,13 @@ html ::-webkit-scrollbar-thumb { } .main-content p.paragraph, -.sample-container { +.sample-container, blockquote, +.content > .symbol { margin-top: 8px; } +blockquote, +.content > .symbol:first-of-type, p.paragraph:first-child, .brief p.paragraph { margin-top: 0; @@ -281,41 +622,6 @@ p.paragraph:first-child, padding-top: 0; } -#container { - display: flex; - flex-direction: row; - height: calc(100% - var(--top-navigation-height)); -} - -#container > div { - height: 100%; - max-height: calc(100vh - var(--top-navigation-height)); - overflow: auto; -} - -#main { - width: 100%; - max-width: calc(100% - 300px); - display: flex; - flex-direction: column; -} - -#leftColumn { - width: 300px; - border-right: 1px solid var(--border-color); - display: flex; - flex-direction: column; -} - -#sideMenu { - padding-top: 22px; - overflow-y: auto; - font-size: 12px; - font-weight: 400; - line-height: 16px; - height: 100%; -} - .sample-container, div.CodeMirror { position: relative; display: flex; @@ -361,6 +667,16 @@ code.paragraph { position: relative; } +code { + overflow-x: auto; + max-width: 100%; +} + +code:not(.block) { + display: inline-block; + vertical-align: middle; +} + .symbol > a { color: var(--hover-link-color); } @@ -373,7 +689,7 @@ code.paragraph { display: none; } -.sample-container:hover span.copy-icon { +.js .sample-container:hover span.copy-icon { display: inline-block; } @@ -399,7 +715,7 @@ code.paragraph { align-items: center; position: absolute; z-index: 1000; - background: white; + background: var(--background-color); font-weight: normal; font-family: var(--default-font-family); width: max-content; @@ -407,9 +723,9 @@ code.paragraph { cursor: default; border: 1px solid #D8DCE1; box-sizing: border-box; - box-shadow: 0px 5px 10px var(--ring-popup-shadow-color); + box-shadow: 0 5px 10px var(--ring-popup-shadow-color); border-radius: 3px; - color: initial; + color: var(--default-font-color); } .copy-popup-wrapper > .copy-popup-icon::before { @@ -473,7 +789,7 @@ code.paragraph { box-sizing: border-box; content: ''; top: 0; - width: 300px; + width: var(--sidebar-width); right: 0; bottom: 0; position: absolute; @@ -603,50 +919,12 @@ code.paragraph { display: none; } -body { - height: 100%; -} - -body, table { - font-family: var(--default-font-family); - background: var(--background-color); - font-style: normal; - font-weight: normal; - font-size: var(--default-font-size); - line-height: 24px; - margin: 0; -} - -table { - width: 100%; - border-collapse: collapse; - padding: 5px; -} - -tbody > tr { - min-height: 56px; -} - -td:first-child { - width: 20vw; -} .brief { white-space: pre-wrap; overflow: hidden; } -p, ul, ol, table, pre, dl { - margin: 0; -} - -h1 { - font-size: 40px; - line-height: 48px; - letter-spacing: -1px; -} - - h1.cover { font-size: 52px; line-height: 56px; @@ -656,16 +934,19 @@ h1.cover { display: block; } -h2 { - font-size: 31px; - line-height: 40px; - letter-spacing: -0.5px; +@media (max-width: 1119px) { + h1.cover { + font-size: 48px; + line-height: 48px; + padding-bottom: 8px; + } } -h3 { - font-size: 20px; - line-height: 28px; - letter-spacing: -0.2px; +@media (max-width: 759px) { + h1.cover { + font-size: 32px; + line-height: 32px; + } } .UnderCoverText { @@ -682,12 +963,7 @@ h3 { word-break: break-word; } - -a { - text-decoration: none; -} - -#main a:not([data-name]) { +.main-content a:not([data-name]) { padding-bottom: 2px; border-bottom: 1px solid var(--border-color); cursor: pointer; @@ -698,7 +974,7 @@ a { transition: color .1s, border-color .1s; } -#main a:hover { +.main-content a:hover { border-bottom-color: unset; color: inherit } @@ -709,47 +985,10 @@ a small { display: block; } -u { - text-decoration: none; - padding-bottom: 2px; - border-bottom: 1px solid var(--border-color); -} - -blockquote { - border-left: 1ch solid var(--default-gray); - margin: 0; - padding-left: 1ch; - font-style: italic; - color: var(--average-color); -} - -pre { - display: block; -} - -th, td { - text-align: left; - vertical-align: top; - padding: 12px 10px 11px; -} - -dt { - color: #444; - font-weight: 700; -} - p.paragraph img { display: block; } -img { - max-width: 100%; -} - -small { - font-size: 11px; -} - .deprecation-content { margin: 20px 10px; border:1px solid var(--border-color); @@ -783,92 +1022,90 @@ small { margin: 0; } -.platform-tag { - display: flex; - flex-direction: row; - padding: 4px 8px; - height: 24px; - border-radius: 100px; - box-sizing: border-box; - border: 1px solid transparent; - margin: 2px; - font-family: Inter, Arial, sans-serif; - font-size: 12px; - font-weight: 400; - font-style: normal; - font-stretch: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - outline: none; - color: #fff +[data-filterable-current=''] { + display: none !important; } -.platform-tags { +.platform-tags, .filter-section { display: flex; flex-wrap: wrap; - padding-bottom: 8px; + margin-bottom: -8px; + margin-left: -4px; } -.platform-tags > .platform-tag { - align-self: center; +.platform-tag { + --platform-tag-color: #bababb; + border: 0 none; + margin-right: 4px; + margin-bottom: 8px; + + font-family: var(--default-font-family); + font-size: 13px; + line-height: 1.5; + text-transform: capitalize; } -.platform-tags > .platform-tag:first-of-type { - margin-left: auto; +.platform-tag.js-like, .platform-tag.jvm-like, .platform-tag.wasm-like { + text-transform: uppercase; } -.platform-tag.jvm-like { - background-color: #4DBB5F; - color: white; +.filter-section .platform-tag { + cursor: pointer; + border-radius: 4px; + padding: 2px 16px; } -.platform-tag.js-like { - background-color: #FED236; - color: white; +.filter-section .platform-tag.jvm-like[data-active], .platform-tags .platform-tag.jvm-like { + --platform-tag-color: #4dbb5f; } -.platform-tag.wasm-like { - background-color: #654FF0; - color: white; +.filter-section .platform-tag.js-like[data-active], .platform-tags .platform-tag.js-like { + --platform-tag-color: #ffc700; } -.platform-tag.native-like { - background-color: #CD74F6; - color: white; +.filter-section .platform-tag.native-like[data-active], .platform-tags .platform-tag.native-like { + --platform-tag-color: #E082F3; } -.platform-tag.common-like { - background-color: #A6AFBA; - color: white; +.filter-section .platform-tag.wasm-like[data-active], .platform-tags .platform-tag.wasm-like { + --platform-tag-color: #9585F9; } -.filter-section { - display: flex; - flex-direction: row; - align-self: flex-end; - min-height: 36px; - z-index: 0; - flex-wrap: wrap; - align-items: center; +.filter-section .platform-tag[data-active]:hover { + color: #fff; + background-color: rgba(186, 186, 187, .7); } -.platform-selector:hover { - border: 1px solid #A6AFBA !important; +.filter-section .platform-tag:not([data-active]) { + color: #fff; + /* Safari doesn't work correctly for `outline` with `border-radius` */ + /* outline: 1px solid rgba(255,255,255,.6); */ + /* ...use `box-shadow` instead: */ + box-shadow: 0 0 0 1px rgb(255 255 255 / 60%); + background-color: rgba(255,255,255,.05); } -[data-filterable-current=''] { - display: none !important; +.filter-section .platform-tag[data-active] { + color: #19191c; + background-color: var(--platform-tag-color); } -.platform-selector:not([data-active]) { - border: 1px solid #DADFE6; - background-color: transparent; - color: var(--average-color); +.platform-tags .platform-tag { + display: flex; + align-items: center; } -.navigation-wrapper .platform-selector:not([data-active]) { - color: #FFFFFF; +.platform-tags .platform-tag::before { + display: inline-block; + content: ''; + border-radius: 50%; + background: var(--platform-tag-color); + margin: 0 4px 0 8px; + height: 8px; + width: 8px; + + font-size: 13px; + line-height: 1.6; } td.content { @@ -885,6 +1122,10 @@ td.content { flex-wrap: wrap; } +.main-subrow > div { + margin-bottom: 8px; +} + .main-subrow > div > span { display: flex; position: relative; @@ -946,8 +1187,12 @@ td.content { color: var(--active-section-color); } -.platform-hinted > .content:not([data-active]), -.tabs-section-body *[data-togglable]:not([data-active]) { +.no-js .platform-bookmarks-row, .no-js .tabs-section { + display: none; +} + +.js .platform-hinted > .content:not([data-active]), +.js .tabs-section-body *[data-togglable]:not([data-active]) { display: none; } @@ -1044,23 +1289,27 @@ Just in case of possible performance degradation it excluding tabs with briefs o width: 100%; } +@media print, (min-width: 960px) { + .title-row { + grid-template-columns: 20% auto 7em; + } +} + .keyValue { display: grid; grid-gap: 8px; } -@media print, screen and (min-width: 960px) { +@media print, (min-width: 960px) { .keyValue { grid-template-columns: 20% 80%; } - - .title-row { - grid-template-columns: 20% auto 7em; + .keyValue > div:first-child { + word-break: break-word; } } -@media print, screen and (max-width: 960px) { - +@media print, (max-width: 960px) { div.wrapper { width: auto; margin: 0; @@ -1094,7 +1343,24 @@ Just in case of possible performance degradation it excluding tabs with briefs o } } +.anchor-highlight { + border: 1px solid var(--hover-link-color) !important; + box-shadow: 0 0 0 0.2em #c8e1ff; + margin-top: 0.2em; + margin-bottom: 0.2em; +} + +.filtered-message { + margin: 25px; + font-size: 20px; + font-weight: bolder; +} + +div.runnablesample { + height: fit-content; +} +/* --- footer --- */ .footer { clear: both; display: flex; @@ -1149,154 +1415,37 @@ Just in case of possible performance degradation it excluding tabs with briefs o .footer .padded-icon::before { content: url("../images/footer-go-to-link.svg"); } +/* /--- footer --- */ -.pull-right { - float: right; - margin-left: auto -} - -div.runnablesample { - height: fit-content; -} - -.anchor-highlight { - border: 1px solid var(--hover-link-color) !important; - box-shadow: 0 0 0 0.2em #c8e1ff; - margin-top: 0.2em; - margin-bottom: 0.2em; -} - -.w-100 { - width: 100%; -} - -.no-gutters { - margin: 0; - padding: 0; +/* Logo styles */ +:root { + --dokka-logo-image-url: url('../images/logo-icon.svg'); + --dokka-logo-height: 50px; + --dokka-logo-width: 50px; } -.d-flex { +.library-name--link { display: flex; -} - -#theme-toggle { - content: url("../images/theme-toggle.svg"); -} - -#theme-toggle-button { - width: 36px; - height: 36px; - display: inline-flex; - justify-content: center; align-items: center; - border-radius: 24px; - margin-left: 16px; - background-color: inherit; - border: none; - cursor: pointer; -} - -#theme-toggle-button:hover { - background: var(--white-10); -} - -.filtered-message { - margin: 25px; - font-size: 20px; - font-weight: bolder; + color: #fff; + font-weight: 700; } -@media screen and (max-width: 1119px) { - h1.cover { - font-size: 48px; - line-height: 48px; - padding-bottom: 8px; - } +.library-name--link::before { + content: ''; + background: var(--dokka-logo-image-url) center no-repeat; + background-size: var(--dokka-logo-height) var(--dokka-logo-width); + margin-right: 5px; + width: var(--dokka-logo-height); + height: var(--dokka-logo-width); } -@media screen and (max-width: 759px) { - #main { - max-width: 100%; - } - - #leftColumn { - position: fixed; - margin-left: -300px; - transition: margin .2s ease-out; - z-index: 4; - background: white; - height: 100%; - } - - #leftColumn.open { - margin-left: 0; - } - - #leftColumn.open ~ #main #searchBar { +@media (max-width: 759px) { + .library-name--link::before { display: none; } - - #leftToggler { - z-index: 5; - font-size: 20px; - transition: margin .2s ease-out; - margin-right: 16px; - - color: var(--background-color); - } - - #leftToggler .icon-toggler:hover { - cursor: pointer; - } - - #leftColumn.open ~ #main #leftToggler { - margin-left: 300px; - } - - .icon-toggler::before { - content: "\2630"; - } - - #leftColumn.open ~ #main .icon-toggler::before { - content: "\2630"; - padding-right: 0.5em; - margin-left: -0.5em; - } - - .main-content > * { - margin-left: var(--mobile-horizontal-spacing-for-content); - margin-right: var(--mobile-horizontal-spacing-for-content); - } - - .navigation-wrapper { - padding-left: var(--mobile-horizontal-spacing-for-content); - padding-right: var(--mobile-horizontal-spacing-for-content); - } - - #sideMenu { - padding-bottom: 16px; - overflow: auto; - } - - h1.cover { - font-size: 32px; - line-height: 32px; - } - - #theme-toggle-button { - display: none; - } -} -.clearfix::after { - content: ' '; - clear: both; - display: block; - height: 0; -} - -.floating-right { - float: right; } +/* / Logo styles */ /* the hack to hide the headers inside tabs for a package page because each tab |