From b402c5a4904310815cbfec0b5db614c77895c42d Mon Sep 17 00:00:00 2001 From: zoobestik Date: Mon, 23 Jan 2023 20:11:35 +0100 Subject: [PATCH 01/28] Fix dark theme bugs: mobile TOC is visible on 1px and has white background, menu icon is black --- .../src/main/resources/dokka/images/burger.svg | 5 +++++ .../main/resources/dokka/images/theme-toggle.svg | 5 ++--- .../src/main/resources/dokka/styles/style.css | 15 ++++++++++----- 3 files changed, 17 insertions(+), 8 deletions(-) create mode 100644 plugins/base/src/main/resources/dokka/images/burger.svg diff --git a/plugins/base/src/main/resources/dokka/images/burger.svg b/plugins/base/src/main/resources/dokka/images/burger.svg new file mode 100644 index 0000000000..d6dcefccbd --- /dev/null +++ b/plugins/base/src/main/resources/dokka/images/burger.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/theme-toggle.svg b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg index 2a8d750ea9..dad3ff2a2c 100644 --- a/plugins/base/src/main/resources/dokka/images/theme-toggle.svg +++ b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg @@ -1,4 +1,3 @@ - - + + \ 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 e34b9fb446..1ac4504996 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -399,7 +399,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; @@ -1184,8 +1184,8 @@ div.runnablesample { } #theme-toggle-button { - width: 36px; - height: 36px; + width: 40px; + height: 40px; display: inline-flex; justify-content: center; align-items: center; @@ -1222,9 +1222,10 @@ div.runnablesample { #leftColumn { position: fixed; margin-left: -300px; + box-sizing: border-box; transition: margin .2s ease-out; z-index: 4; - background: white; + background: var(--background-color); height: 100%; } @@ -1254,7 +1255,11 @@ div.runnablesample { } .icon-toggler::before { - content: "\2630"; + display: block; + content: ""; + background: url("../images/burger.svg") no-repeat center; + height: 28px; + width: 28px; } #leftColumn.open ~ #main .icon-toggler::before { From 981ff542cbea64d74573cf9a3e17cf081b2f562e Mon Sep 17 00:00:00 2001 From: zoobestik Date: Thu, 26 Jan 2023 19:18:56 +0100 Subject: [PATCH 02/28] Refactoring css styles for header controls --- .../dokka/scripts/platform-content-handler.js | 2 +- .../resources/dokka/styles/jetbrains-mono.css | 84 ++- .../resources/dokka/styles/logo-styles.css | 24 +- .../src/main/resources/dokka/styles/style.css | 691 ++++++++++-------- .../main/resources/dokka/templates/base.ftl | 19 +- .../dokka/templates/includes/header.ftl | 18 +- 6 files changed, 475 insertions(+), 363 deletions(-) diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js index 1f99ba1f98..ca1545eb96 100644 --- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js +++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js @@ -82,7 +82,7 @@ const samplesAreEnabled = () => { const initHidingLeftNavigation = () => { - document.getElementById("leftToggler").onclick = function (event) { + document.getElementById("menu-toggle").onclick = function (event) { //Events need to be prevented from bubbling since they will trigger next handler event.preventDefault(); event.stopPropagation(); diff --git a/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css b/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css index 9a0f06f802..b7ca154d7f 100644 --- a/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css +++ b/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css @@ -1,17 +1,79 @@ -@font-face{ +@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; + src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/otf/JetBrainsMono-BoldItalic.otf') format('opentype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-BoldItalic.ttf') format('truetype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-BoldItalic.woff2') format('woff2'); + font-weight: 700; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'JetBrains Mono'; + src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/otf/JetBrainsMono-Bold.otf') format('opentype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Bold.ttf') format('truetype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Bold.woff2') format('woff2'); + font-weight: 700; font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'JetBrains Mono'; + src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/otf/JetBrainsMono-ExtraBoldItalic.otf') format('opentype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2'); + font-weight: 800; + font-style: italic; + font-display: swap; } -@font-face{ +@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; + src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/otf/JetBrainsMono-ExtraBold.otf') format('opentype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-ExtraBold.ttf') format('truetype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-ExtraBold.woff2') format('woff2'); + font-weight: 800; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'JetBrains Mono'; + src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/otf/JetBrainsMono-Italic.otf') format('opentype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Italic.ttf') format('truetype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Italic.woff2') format('woff2'); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'JetBrains Mono'; + src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/otf/JetBrainsMono-MediumItalic.otf') format('opentype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-MediumItalic.ttf') format('truetype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-MediumItalic.woff2') format('woff2'); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'JetBrains Mono'; + src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/otf/JetBrainsMono-Medium.otf') format('opentype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Medium.ttf') format('truetype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'JetBrains Mono'; + src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/otf/JetBrainsMono-Regular.otf') format('opentype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Regular.ttf') format('truetype'), + url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; } \ 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 25de3f61f9..dcff484b03 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,21 @@ -.library-name a { - position: relative; - margin-left: 55px; +.library-name--link { + display: flex; + align-items: center; + color: #fff; + font-weight: 700; } -.library-name a::before { +.library-name--link::before { content: ''; background: url("../images/logo-icon.svg") center no-repeat; - background-size: contain; - position: absolute; + background-size: 50px; + margin-right: 5px; width: 50px; height: 50px; - top: -18px; - left: -55px; -} \ No newline at end of file +} + +@media (max-width: 759px) { + .library-name--link::before { + display: none; + } +} diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index 1ac4504996..9df1590dd0 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -2,6 +2,7 @@ @import url('https://rsms.me/inter/inter.css'); @import url('jetbrains-mono.css'); +/* --- root styles --- */ :root { --default-gray: #f4f4f4; --default-font-color: black; @@ -44,12 +45,165 @@ --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 { +html { + height: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + scrollbar-color: rgba(39, 40, 44, 0.40) #F4F4F4; + scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + color: var(--default-font-color); +} + +html ::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +html ::-webkit-scrollbar-track { + background-color: var(--color-scrollbar-track); +} + +html ::-webkit-scrollbar-thumb { + width: 8px; + border-radius: 6px; + background: rgba(39, 40, 44, 0.40); + background: var(--color-scrollbar); +} + +html, body { + height: 100%; +} +/* /--- root styles --- */ + +/* --- global tags styles --- */ +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; +} + +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); +} + +pre { + display: block; +} + +dt { + color: #444; + font-weight: 700; +} + +img { + max-width: 100%; +} + +small { + font-size: 11px; +} + +table { + width: 100%; + border-collapse: collapse; + padding: 5px; +} + +th, td { + text-align: left; + vertical-align: top; + padding: 12px 10px 11px; +} + +tbody > tr { + min-height: 56px; +} + +td:first-child { + width: 20vw; +} +/* /--- global tags styles --- */ + +/* --- utils classes --- */ +.w-100 { + width: 100%; +} + +.no-gutters { + margin: 0; + padding: 0; +} + +.d-flex { + display: flex; +} + +.floating-right { + float: right; +} + +.pull-right { + float: right; + margin-left: auto +} + +.clearfix::after { + content: ' '; + clear: both; + display: block; + height: 0; +} +/* /--- utils classes --- */ + +/* ---dark theme --- */ +.theme-dark { --background-color: #27282c; --color-dark: #3d3d41; --default-font-color: hsla(0, 0%, 100%, 0.8); @@ -73,34 +227,83 @@ --sidemenu-section-active-color: var(--color-dark); } +/* /---dark theme --- */ -html { +/* --- Layout styles --- */ +#container { + display: flex; + flex-direction: row; + height: calc(100% - var(--top-navigation-height)); +} + +#container > div { height: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - scrollbar-color: rgba(39, 40, 44, 0.40) #F4F4F4; - scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track); - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - color: var(--default-font-color); + max-height: calc(100vh - var(--top-navigation-height)); + overflow: auto; } -html ::-webkit-scrollbar { - width: 8px; - height: 8px; +#main { + width: 100%; + max-width: calc(100% - var(--sidebar-width)); + display: flex; + flex-direction: column; } -html ::-webkit-scrollbar-track { - background-color: var(--color-scrollbar-track); +@media (max-width: 759px) { + #main { + max-width: 100%; + } } -html ::-webkit-scrollbar-thumb { - width: 8px; - border-radius: 6px; - background: rgba(39, 40, 44, 0.40); - background: var(--color-scrollbar); +.sidebar { + width: var(--sidebar-width); + border-right: 1px solid var(--border-color); + display: flex; + flex-direction: column; } +@media (max-width: 759px) { + .sidebar { + position: fixed; + margin-left: calc(-1 * var(--sidebar-width)); + box-sizing: border-box; + transition: margin .2s ease-out; + z-index: 4; + background: var(--background-color); + height: 100%; + } + .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 { + padding-top: 22px; + overflow-y: auto; + font-size: 12px; + font-weight: 400; + line-height: 16px; + height: 100%; +} + +@media (max-width: 759px) { + .sidebar--inner { + padding-bottom: 16px; + overflow: auto; + } +} +/* /--- Layout styles --- */ + +/* --- Main Content styles --- */ .main-content { padding-bottom: var(--bottom-spacing); z-index: 0; @@ -115,12 +318,21 @@ html ::-webkit-scrollbar-thumb { margin-right: var(--horizontal-spacing-for-content); } +@media (max-width: 759px) { + .main-content > * { + margin-left: var(--mobile-horizontal-spacing-for-content); + margin-right: var(--mobile-horizontal-spacing-for-content); + } +} + .main-content .content > hr { margin: 30px 0; border-top: 3px double #8c8b8b; } +/* /--- Main Content styles --- */ -.navigation-wrapper { +/* --- Navigation styles --- */ +.navigation { display: flex; flex-wrap: wrap; position: sticky; @@ -135,27 +347,107 @@ html ::-webkit-scrollbar-thumb { /* 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) 13px; } -.navigation-wrapper > .library-name { - font-weight: 700; - margin-right: 12px; +@media (max-width: 759px) { + .navigation { + padding-left: var(--mobile-horizontal-spacing-for-content); + padding-right: var(--mobile-horizontal-spacing-for-content); + } } -.navigation-wrapper a { - color: #fff; +/* --- Navigation MENU --- */ +.menu-toggle { + z-index: 5; + transition: margin .2s ease-out; + margin-right: 16px; + + color: var(--background-color); + + background: transparent; + border: none; + outline: none; + line-height: 0; + font-size: 0; +} + +@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; } -#searchBar { - margin-left: 16px; +/* /--- Navigation MENU --- */ + +.library-version { + margin-left: 12px; +} + +/* --- Navigation controls --- */ +.navigation-controls { + display: flex; + align-items: center; + margin-left: auto; +} + +.no-js .navigation-controls { + display: none; +} + +/* --- Navigation THEME --- */ +.navigation-controls--search { display: inline-flex; align-content: center; align-items: center; - width: 36px; - height: 36px; + width: 40px; + height: 40px; +} + +.navigation-controls--theme { + width: 40px; + height: 40px; + display: inline-flex; + justify-content: center; + align-items: center; + border-radius: 24px; + background-color: inherit; + border: none; + cursor: pointer; } +.navigation-controls--theme:hover { + background: var(--white-10); +} + +.navigation-controls--theme::before { + display: inline-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 --- */ + +/* /--- Breadcrumbs styles --- */ .breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover { margin-top: var(--breadcrumb-margin); color: var(--breadcrumb-font-color); @@ -169,6 +461,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 { @@ -272,48 +565,13 @@ p.paragraph:first-child, .divergent-group .table-row, tbody > tr { border-bottom: 1px solid var(--border-color); } - -.divergent-group .table-row:last-of-type, tbody > tr:last-of-type { - border-bottom: none; -} - -.title > .divergent-group:first-of-type { - 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; + +.divergent-group .table-row:last-of-type, tbody > tr:last-of-type { + border-bottom: none; } -#sideMenu { - padding-top: 22px; - overflow-y: auto; - font-size: 12px; - font-weight: 400; - line-height: 16px; - height: 100%; +.title > .divergent-group:first-of-type { + padding-top: 0; } .sample-container, div.CodeMirror { @@ -407,7 +665,7 @@ 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; } @@ -473,7 +731,7 @@ code.paragraph { box-sizing: border-box; content: ''; top: 0; - width: 300px; + width: var(--sidebar-width); right: 0; bottom: 0; position: absolute; @@ -603,50 +861,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 +876,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,11 +905,6 @@ h3 { word-break: break-word; } - -a { - text-decoration: none; -} - #main a:not([data-name]) { padding-bottom: 2px; border-bottom: 1px solid var(--border-color); @@ -709,47 +927,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); @@ -867,10 +1048,6 @@ small { color: var(--average-color); } -.navigation-wrapper .platform-selector:not([data-active]) { - color: #FFFFFF; -} - td.content { padding-left: 24px; padding-top: 16px; @@ -1044,23 +1221,24 @@ 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; - } } -@media print, screen and (max-width: 960px) { - +@media print, (max-width: 960px) { div.wrapper { width: auto; margin: 0; @@ -1094,7 +1272,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,159 +1344,7 @@ 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"); } - -.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; -} - -.d-flex { - display: flex; -} - -#theme-toggle { - content: url("../images/theme-toggle.svg"); -} - -#theme-toggle-button { - width: 40px; - height: 40px; - 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; -} - -@media screen and (max-width: 1119px) { - h1.cover { - font-size: 48px; - line-height: 48px; - padding-bottom: 8px; - } -} - -@media screen and (max-width: 759px) { - #main { - max-width: 100%; - } - - #leftColumn { - position: fixed; - margin-left: -300px; - box-sizing: border-box; - transition: margin .2s ease-out; - z-index: 4; - background: var(--background-color); - height: 100%; - } - - #leftColumn.open { - margin-left: 0; - } - - #leftColumn.open ~ #main #searchBar { - 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 { - display: block; - content: ""; - background: url("../images/burger.svg") no-repeat center; - height: 28px; - width: 28px; - } - - #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; -} +/* /--- footer --- */ /* the hack to hide the headers inside tabs for a package page because each tab diff --git a/plugins/base/src/main/resources/dokka/templates/base.ftl b/plugins/base/src/main/resources/dokka/templates/base.ftl index ed19d5f329..86b957f921 100644 --- a/plugins/base/src/main/resources/dokka/templates/base.ftl +++ b/plugins/base/src/main/resources/dokka/templates/base.ftl @@ -2,12 +2,13 @@ <#import "includes/header.ftl" as header> <#import "includes/footer.ftl" as footer> - + <@page_metadata.display/> <@template_cmd name="pathToRoot"> + <#-- This script doesn't need to be there but it is nice to have since app in dark mode doesn't 'blink' (class is added before it is rendered) --> @@ -30,14 +31,14 @@ <@header.display/> -
-
-
+
+ +
+ <@content/> + <@footer.display/> +
-
- <@content/> - <@footer.display/> -
-
\ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/templates/includes/header.ftl b/plugins/base/src/main/resources/dokka/templates/includes/header.ftl index 2ec4fd7c85..6e6f4f2e11 100644 --- a/plugins/base/src/main/resources/dokka/templates/includes/header.ftl +++ b/plugins/base/src/main/resources/dokka/templates/includes/header.ftl @@ -1,24 +1,24 @@ <#import "source_set_selector.ftl" as source_set_selector> <#macro display> -