| @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Lato:wght@400;700&family=Roboto+Slab:wght@400;700&display=swap'); |
| @import 'colors.css'; |
| |
| :root { |
| /* Font Settings */ |
| --mono-font: "Fira Code", monospace; |
| --text-font: "Lato", sans-serif; |
| --title-font: "Roboto Slab", serif; |
| --leftbar-font-size: 14px; |
| |
| /* Layout Settings (changes on small screens) */ |
| --side-width: 300px; |
| --toc-width: 300px; |
| --content-padding: 24px 42px; |
| --footer-height: 42px; |
| } |
| |
| body { |
| margin: 0; |
| padding: 0; |
| font-family: "Lato", sans-serif; |
| font-size: 18px; |
| background: var(--body-bg); |
| } |
| body, button, input { |
| color: var(--body-fg); |
| } |
| |
| /* Page layout */ |
| #container { |
| min-height: 100%; |
| } |
| #leftColumn { |
| position: fixed; |
| width: var(--side-width); |
| height: 100%; |
| border-right: none; |
| background: var(--body-bg); |
| display: flex; |
| flex-direction: column; |
| z-index: 5; |
| border-right: solid 1px var(--leftbar-border); |
| } |
| #main-content { |
| min-height: calc(100vh - var(--footer-height) - 24px); |
| margin-left: var(--side-width); |
| margin-right: var(--toc-width); |
| padding: var(--content-padding); |
| padding-bottom: calc(24px + var(--footer-height)); |
| |
| display:flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| #content { |
| max-width: 1100px; |
| width: 100%; |
| } |
| |
| /* Text */ |
| h1, h2, h3 { |
| font-family: var(--title-font); |
| color: var(--title-fg); |
| font-weight: normal; |
| } |
| .monospace { |
| font-family: var(--mono-font); |
| background: var(--documentable-bg); |
| font-variant-ligatures: none; |
| /* padding: 8px; */ |
| } |
| pre, .hljs { |
| font-family: var(--mono-font); |
| background: var(--code-bg); |
| font-variant-ligatures: none; |
| } |
| code { |
| font-size: .8em; |
| font-weight: 500; |
| padding: 3px 6px; |
| border-radius: 4px; |
| color: var(--code-fg); |
| background-color: var(--code-bg); |
| } |
| pre { |
| overflow-x: auto; |
| scrollbar-width: thin; |
| margin: 0px; |
| } |
| pre code, pre code.hljs { |
| font-family: var(--mono-font); |
| font-size: 1em; |
| padding: 0; |
| } |
| |
| pre, .symbol.monospace { |
| font-weight: 500; |
| font-size: 14px; |
| padding: 8px; |
| margin-top: 8px; |
| margin-bottom: 8px; |
| } |
| pre .hljs-comment { |
| /* Fold comments in snippets */ |
| white-space: normal; |
| } |
| .symbol.monospace { |
| padding: 12px 8px 10px 12px; |
| } |
| a, a:visited, span[data-unresolved-link] { |
| text-decoration: none; |
| color: var(--link-fg); |
| } |
| a:hover, a:active { |
| color: var(--link-hover-fg); |
| } |
| |
| /* Tables */ |
| table { |
| border-collapse: collapse; |
| min-width: 400px; |
| } |
| td, th { |
| border: 1px solid var(--border-medium); |
| padding: .5rem; |
| } |
| th { |
| border-bottom: 2px solid var(--border-medium); |
| } |
| |
| /* Left bar toggler, only on small screens */ |
| #leftToggler { |
| display: none; |
| color: var(--icon-color); |
| cursor: pointer; |
| } |
| |
| /* Left bar */ |
| #paneSearch { |
| display: none; |
| } |
| #logo>span { |
| display: inline-block; |
| vertical-align: middle; |
| } |
| |
| #logo>span>img { |
| max-height: 40px; |
| max-width: 40px; |
| margin: 16px 8px 8px 16px; |
| cursor: pointer; |
| } |
| |
| #logo .projectName { |
| color: var(--leftbar-fg); |
| font-size: 28px; |
| font-weight: bold; |
| padding: 4px 0px 0px 4px; |
| } |
| |
| #logo .projectVersion { |
| font-size: 12px; |
| display: flex; |
| padding-left: 2px; |
| padding-right: calc(0.08 * var(--side-width)); |
| } |
| |
| .scaladoc_logo { |
| width: 116px; |
| margin-left: -16px; |
| } |
| |
| .theme-dark .scaladoc_logo { |
| display: none; |
| } |
| |
| .scaladoc_logo_dark { |
| display: none; |
| } |
| |
| .theme-dark .scaladoc_logo_dark { |
| width: 116px; |
| margin-left: -16px; |
| display: block; |
| } |
| |
| /* Navigation */ |
| #sideMenu2 { |
| overflow-y: auto; |
| overflow-x: hidden; |
| |
| height: 100%; |
| font-size: var(--leftbar-font-size); |
| margin-top: 8px; |
| } |
| |
| /* divs in sidebar represent entry and its children */ |
| #sideMenu2 .ni { |
| padding-left: 0.8em; |
| } |
| |
| #sideMenu2 > .ni { |
| padding-left: 0em; |
| } |
| |
| #sideMenu2 .ni { |
| display: none; |
| } |
| |
| #sideMenu2 > .ni { |
| display: block; |
| } |
| |
| #sideMenu2 .nh a:only-child { |
| padding-left: 20px; |
| } |
| |
| #sideMenu2 .nh { |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| border-radius: 3px; |
| } |
| |
| #sideMenu2 .ni.expanded > .ni { |
| display: block; |
| } |
| |
| /* show direct children of currently exmanded node*/ |
| #sideMenu2 div.expanded>div { |
| display: block; |
| } |
| /* always show top level entry*/ |
| #sideMenu2>div{ |
| display: block; |
| } |
| |
| #sideMenu2 span.micon { |
| height: 16px; |
| width: 16px; |
| margin-right: 8px; |
| } |
| |
| /* 'a's in side menu represent text of entry with link */ |
| #sideMenu2 a { |
| display: flex; |
| align-items: center; |
| overflow-wrap: anywhere; |
| color: var(--leftbar-fg); |
| padding-top: 2%; |
| padding-bottom: 2%; |
| box-sizing: border-box; |
| } |
| |
| #sideMenu2 a:hover { |
| color: var(--link-hover-fg); |
| } |
| |
| #sideMenu2 a span:not(.micon) { |
| margin-right: 0.75ex; |
| text-indent: -1.5em; |
| padding-left: 1.5em; |
| } |
| |
| #sideMenu2 a.selected span:not(.micon) { |
| margin-right: 0.5ex; |
| } |
| |
| #sideMenu2 .nh.selected { |
| background: var(--leftbar-current-bg); |
| color: var(--leftbar-current-fg); |
| font-weight: bold; |
| } |
| |
| #sideMenu2 .nh:hover { |
| color: var(--leftbar-hover-fg); |
| background: var(--leftbar-hover-bg); |
| cursor: pointer; |
| } |
| /* spans represent a expand button */ |
| span.ar { |
| cursor: pointer; |
| } |
| |
| span.ar::before { |
| content: "\e904"; /* arrow right */ |
| font-family: "dotty-icons" !important; |
| font-size: 20px; |
| color: var(--icon-color); |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| justify-content: center; |
| } |
| .ni.expanded > .nh > span.ar::before { |
| content: "\e903"; /* arrow down */ |
| } |
| |
| .div:hover>span.ar::before { |
| color: var(--leftbar-current-bg); |
| } |
| |
| /* Cover */ |
| .cover h1 { |
| font-size: 38px; |
| margin-top: 1rem; |
| margin-bottom: .25rem; |
| } |
| |
| /* Tabs */ |
| .section-tab { |
| border: none; |
| outline: none; |
| background: transparent; |
| padding: 0 6px 4px 6px; |
| margin: 1rem 1rem 0 0; |
| border-bottom: 1px solid var(--border-light); |
| cursor: pointer; |
| } |
| .section-tab[data-active=""] { |
| color: unset; |
| font-weight: bold; |
| border-bottom: 1px solid var(--active-bg); |
| } |
| .tabs-section-body > :not([data-active]) { |
| display: none; |
| } |
| |
| /* Tabs content */ |
| .table { |
| /*! display: flex; */ |
| flex-direction: column; |
| } |
| .table-row { |
| border-bottom: 2px solid var(--border-light); |
| padding: 8px 24px 8px 0; |
| } |
| .main-subrow { |
| margin-bottom: .5em; |
| } |
| .main-subrow > span > a, .main-subrow > span > span[data-unresolved-link] { |
| text-decoration: none; |
| font-style: normal; |
| font-weight: bold; |
| color: unset; |
| font-size: 18px; |
| } |
| .main-subrow .anchor-icon { /* Link Anchor */ |
| margin-left: .25rem; |
| opacity: 0; |
| transition: 0.2s 0.5s; |
| cursor: pointer; |
| } |
| .main-subrow .anchor-icon > svg { |
| margin-bottom: -5px; |
| fill: var(--link-fg); |
| } |
| .main-subrow:hover .anchor-icon { |
| opacity: 1; |
| transition: 0.2s; |
| } |
| .brief-with-platform-tags ~ .main-subrow { |
| padding-top: 0; |
| } |
| |
| span[data-unresolved-link].deprecated, a.deprecated, div.deprecated { |
| text-decoration: line-through; |
| } |
| .brief { |
| white-space: pre-wrap; |
| overflow: hidden; |
| margin-bottom: .5em; |
| } |
| /* Declarations */ |
| .symbol.monospace { |
| color: var(--symbol-fg); |
| display: block; |
| white-space: normal; |
| position: relative; |
| padding-right: 24px; /* avoid the copy button */ |
| margin: 1em 0; |
| } |
| .symbol .top-right-position { |
| position: absolute; |
| top: 8px; |
| right: 8px; |
| } |
| /* "copy to clipboard" button */ |
| .copy-popup-wrapper { |
| display: none; |
| position: absolute; |
| z-index: 1000; |
| background: white; |
| width: max-content; |
| cursor: default; |
| border: 1px solid var(--border-light); |
| box-sizing: border-box; |
| box-shadow: 0px 5px 10px var(--border-light); |
| border-radius: 3px; |
| font-weight: normal; |
| } |
| .copy-popup-wrapper.active-popup { |
| display: flex; |
| align-items: center; |
| } |
| .copy-popup-wrapper.popup-to-left { |
| left: -14rem; |
| } |
| .copy-popup-wrapper svg { |
| padding: 8px; |
| } |
| .copy-popup-wrapper:last-child { |
| padding-right: 14px; |
| } |
| |
| /* Lists of definitions, e.g. doc @tags */ |
| dl { |
| background: transparent; |
| -webkit-box-shadow: none; |
| box-shadow: none; |
| } |
| dl > div > ol { |
| list-style-type: none; |
| } |
| |
| dl.attributes > dt { |
| display: block; |
| float: left; |
| font-weight: bold; |
| } |
| dl.attributes > dt.implicit { |
| font-weight: bold; |
| color: darkgreen; |
| } |
| dl.attributes > dd { |
| display: block; |
| padding-left: 7em; |
| min-height: 24px; |
| } |
| |
| /* params list documentation */ |
| dl.paramsdesc { |
| display: flex; |
| flex-flow: row wrap; |
| } |
| dl.paramsdesc dt { |
| flex-basis: 20%; |
| padding: 2px 0; |
| text-align: left; |
| font-weight: bold; |
| } |
| dl.paramsdesc dd { |
| flex-basis: 80%; |
| flex-grow: 1; |
| margin: 0; |
| padding: 2px 0; |
| } |
| |
| .platform-dependent-row dl.attributes > dd { |
| padding-left: 3em; |
| } |
| |
| /* Workaround for dynamically rendered content inside hidden tab. |
| There's some limitation of css/html that causes wrong width/height property of elements that are rendered dynamically inside element with display:none; |
| Same solution is already used in Dokka. |
| */ |
| .platform-hinted[data-togglable="Type hierarchy"] > .content:not([data-active]), |
| .tabs-section-body > *[data-togglable="Type hierarchy"]:not([data-active]) { |
| display: block !important; |
| visibility: hidden; |
| height: 0; |
| position: fixed; |
| top: 0; |
| } |
| |
| |
| /* Footer */ |
| footer { |
| background: var(--footer-bg); |
| color: var(--footer-fg); |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-around; |
| bottom: 0px; |
| align-items: center; |
| position: fixed; |
| margin-top: 1rem; |
| margin-left: var(--side-width); |
| width: calc(100% - var(--side-width)); |
| min-height: var(--footer-height); |
| border-top: 1px solid var(--border-light); |
| font-size: 14px; |
| } |
| |
| footer .padded-icon { |
| padding-left: 0.5em; |
| } |
| footer .pull-right { |
| margin-left: auto; |
| } |
| |
| footer .mode { |
| display: flex; |
| align-items: center; |
| } |
| |
| @media(max-height:640px) { |
| footer { |
| position: unset; |
| } |
| } |
| |
| /* Theme Toggle */ |
| .switch { |
| /* The switch - the box around the slider */ |
| position: relative; |
| display: inline-block; |
| width: 60px; |
| min-width: 60px; |
| height: 32px; |
| } |
| .switch input { |
| /* Hide default HTML checkbox */ |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| .switch .slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| border-radius: 34px; |
| background-color: var(--border-medium); |
| -webkit-transition: 0.4s; |
| transition: 0.4s; |
| } |
| .switch .slider:before { |
| position: absolute; |
| content: "🌘"; |
| height: 28px; |
| width: 28px; |
| line-height:28px; |
| font-size:24px; |
| text-align: center; |
| left: 2px; |
| bottom: 4px; |
| top: 0; |
| bottom: 0; |
| border-radius: 50%; |
| margin: auto 0; |
| -webkit-transition: 0.4s; |
| transition: 0.4s; |
| background: transparent; |
| } |
| .switch input:checked + .slider { |
| background-color: var(--blue100); /* --active-bg, but not affected by the theme */ |
| } |
| .switch input:checked + .slider:before { |
| content: "🌞"; |
| -webkit-transform: translateX(28px); |
| -ms-transform: translateX(28px); |
| transform: translateX(28px); |
| } |
| |
| .documentableElement .modifiers { |
| display: table-cell; |
| min-width: 10vw; |
| max-width: 10vw; |
| width: 10vw; |
| overflow: hidden; |
| text-align: right; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| text-indent: 0em; |
| padding-right: 0.5em; |
| } |
| |
| .documentableElement.expand .modifiers { |
| white-space: break-spaces; |
| text-overflow: unset; |
| } |
| |
| .documentableElement .docs { |
| width: 100%; |
| table-layout: fixed; |
| } |
| |
| .documentableElement .modifiers .other-modifiers { |
| color: var(--grey600); |
| } |
| |
| .other-modifiers a, .other-modifiers a:visited, .other-modifiers span[data-unresolved-link] { |
| color: var(--link-sig-fg); |
| } |
| |
| .documentableElement.expand .modifiers { |
| display: table-cell; |
| } |
| |
| .documentableElement .signature { |
| color: var(--code-fg); |
| display: table-row; |
| white-space: pre-wrap; |
| font-size: 14px; |
| } |
| |
| .docs .modifiers { |
| font-size: 14px; |
| } |
| |
| .signature, .documentableElement { |
| font-weight: 500; |
| } |
| |
| .signature.monospace { |
| padding: 8px; |
| display: flex; |
| flex-direction: column; |
| border-radius: 3px; |
| } |
| |
| .signature.monospace .modifiers { |
| white-space: break-spaces; |
| } |
| |
| .signature a, .signature a:visited, .signature span[data-unresolved-link] { |
| color: var(--link-sig-fg); |
| } |
| |
| .signature a:hover { |
| color: var(--link-hover-fg); |
| } |
| |
| .expand .signature { |
| display: table-row; |
| } |
| |
| .documentableFilter { |
| border-radius: 3px; |
| } |
| |
| .documentableElement { |
| color: var(--symbol-fg); |
| white-space: normal; |
| position: relative; |
| padding: 8px; |
| font-size: 12px; |
| background: var(--documentable-bg); |
| border-left: 0.25em solid transparent; |
| margin: 0.5em 0; |
| border-radius: 3px; |
| } |
| |
| .documentableElement>div { |
| display: table; |
| } |
| |
| .expand.documentableElement>div.header { |
| display: inline-table; |
| } |
| |
| .documentableElement>div .cover { |
| display: none; |
| } |
| |
| .documentableElement.expand>div .cover { |
| display: block; |
| } |
| |
| .doc code { |
| padding: 0; |
| } |
| |
| .documentableElement:hover { |
| cursor: pointer; |
| border-left-color: var(--active-bg); |
| } |
| |
| .expand.documentableElement { |
| border-left-color: var(--active-bg); |
| } |
| .documentableElement .annotations { |
| color: var(--grey600); |
| margin-left: 10.5em; |
| font-size: 14px; |
| display: none; |
| } |
| |
| .documentableElement.expand .annotations { |
| display: inline-block; |
| } |
| |
| .documentableElement.expand .documentableBrief { |
| display: none; |
| } |
| |
| .documentableElement:before { |
| content: ' '; |
| position: absolute; |
| width: 32px; |
| height: 100%; |
| top: 0px; |
| left: -32px; |
| } |
| |
| .documentableElement:hover .documentableAnchor:before { |
| display: flex; |
| } |
| |
| .documentableElement::before:hover .documentableAnchor:before { |
| display: flex; |
| } |
| |
| .documentableAnchor:before { |
| content: "\e901"; /* arrow down */ |
| font-family: "dotty-icons" !important; |
| transform: rotate(-45deg); |
| font-size: 20px; |
| color: var(--link-fg); |
| display: none; |
| flex-direction: row; |
| align-items: center; |
| justify-content: center; |
| position: absolute; |
| top: 6px; |
| left: -32px; |
| } |
| |
| .documentableAnchor:hover:before { |
| color: var(--link-hover-fg); |
| } |
| |
| .documentableAnchor:active:before { |
| color: var(--link-hover-fg); |
| top: 8px; |
| } |
| |
| .memberDocumentation { |
| font-size: 15px; |
| line-height: 1.5; |
| } |
| |
| .memberDocumentation>p{ |
| margin: .5em 0 0 0; |
| } |
| |
| .tabs .names .tab { |
| border: none; |
| outline: none; |
| background: transparent; |
| color: var(--tab-default); |
| padding: 0 2px 8px 2px; |
| margin: 4em 1em 0 0; |
| border-bottom: 2px solid var(--border-medium); |
| cursor: pointer; |
| font-size: 16px; |
| font-family: var(--text-font); |
| } |
| |
| .tabs .names .tab.selected { |
| color: var(--tab-selected); |
| font-weight: bold; |
| border-bottom: 2px solid var(--link-fg); |
| } |
| |
| .tabs .names { |
| margin-bottom: 20px; |
| } |
| |
| .tabs .contents .tab{ |
| display: none; |
| } |
| |
| .tabs .contents .tab.selected { |
| display: block; |
| } |
| |
| .diagram-class { |
| width: 100%; |
| max-height: 400px; |
| position: relative; |
| } |
| |
| .cover-header { |
| display: flex; |
| flex-direction: row; |
| padding-top: 1em; |
| } |
| |
| .micon { |
| box-sizing: content-box; |
| margin-right: 8px; |
| color:transparent; |
| } |
| .theme-dark .micon { |
| filter: brightness(120%); |
| } |
| |
| .micon.cl { |
| content: url("../images/class.svg") |
| } |
| |
| .micon.cl-wc { |
| content: url("../images/class_comp.svg") |
| } |
| |
| .micon.ob { |
| content: url("../images/object.svg") |
| } |
| |
| .micon.ob-wc { |
| content: url("../images/object_comp.svg") |
| } |
| |
| .micon.tr { |
| content: url("../images/trait.svg") |
| } |
| |
| .micon.tr-wc { |
| content: url("../images/trait_comp.svg") |
| } |
| |
| .micon.en { |
| content: url("../images/enum.svg") |
| } |
| |
| .micon.en-wc { |
| content: url("../images/enum_comp.svg") |
| } |
| |
| .micon.gi { |
| content: url("../images/given.svg") |
| } |
| |
| .micon.va { |
| content: url("../images/val.svg") |
| } |
| |
| .micon.ty { |
| content: url("../images/type.svg") |
| } |
| |
| .micon.st { |
| content: url("../images/static.svg") |
| } |
| |
| .micon.pa { |
| content: url("../images/package.svg") |
| } |
| |
| .micon.de { |
| content: url("../images/method.svg") |
| } |
| |
| .micon.in { |
| content: url("../images/inkuire.svg") |
| } |
| |
| #leftColumn .socials { |
| display: none; |
| } |
| |
| footer .socials { |
| display: flex; |
| align-items: center; |
| } |
| |
| .footer-text { |
| margin-right: 8px; |
| } |
| |
| #generated-by { |
| display: flex; |
| align-items: center; |
| } |
| |
| /* Scrollbars */ |
| |
| :root { |
| --scrollbar-bg-color: var(--border-light); |
| --scrollbar-fg-color: var(--border-medium); |
| --scrollbar-fg-hover-color: var(--grey500); |
| } |
| |
| /* For Firefox */ |
| #sideMenu2 { |
| scrollbar-color: var(--scrollbar-fg-color) var(--scrollbar-bg-color); |
| scrollbar-width: thin; |
| } |
| |
| /* For Chrome */ |
| |
| #sideMenu2::-webkit-scrollbar-track { |
| background-color: var(--scrollbar-bg-color); |
| border-radius: 3px; |
| } |
| |
| #sideMenu2::-webkit-scrollbar-thumb { |
| background-color: var(--scrollbar-fg-color); |
| border-radius: 3px; |
| } |
| |
| #sideMenu2::-webkit-scrollbar-thumb:hover { |
| background-color: var(--scrollbar-fg-hover-color); |
| } |
| |
| #sideMenu2::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| |
| #toc { |
| position: fixed; |
| right: 0px; |
| top: 0px; |
| width: var(--toc-width); |
| height: 100%; |
| |
| padding-top: 15vh; |
| padding-right: 10px; |
| |
| display: flex; |
| flex-direction: column; |
| } |
| |
| #toc .toc-title { |
| font-weight: bold; |
| padding-left: 16px; |
| } |
| |
| #toc ul { |
| list-style-type: none; |
| padding-left: 16px; |
| } |
| |
| #toc a { |
| display: block; |
| padding-top: 0.5em; |
| padding-bottom: 0.5em; |
| color: var(--leftbar-fg); |
| transition-duration: 0.2s; |
| } |
| |
| #toc li:hover > a { |
| color: var(--link-hover-fg); |
| } |
| |
| #toc li.active > a { |
| color: var(--link-hover-fg); |
| } |
| |
| /* Signature coloring */ |
| |
| :root { |
| --type-link: var(--blue500); |
| --type: var(--grey700); |
| --keyword: var(--red500); |
| } |
| |
| :root.theme-dark { |
| --type-link: var(--blue400); |
| --keyword: var(--red400); |
| } |
| |
| .signature *[t="t"]:not([href]) { /* Types without links */ |
| color: var(--type); |
| } |
| |
| .signature *[t="t"] { /* Types with links */ |
| color: var(--type-link); |
| } |
| |
| .signature *[t="k"] { /* Keywords */ |
| color: var(--keyword); |
| } |
| |
| .signature *:not[t] { /* Plain text */ |
| |
| } |
| |
| /* Large Screens */ |
| @media(min-width: 1100px) { |
| :root { |
| --content-padding: 24px 64px; |
| } |
| } |
| /* Landscape phones, portait tablets */ |
| @media(max-width: 1200px) { |
| :root { |
| --toc-width: 0px; |
| } |
| } |
| |
| @media(max-width: 768px) { |
| :root { |
| --content-padding: 12px 12px; |
| } |
| .cover h1 { |
| font-size: 32px; |
| } |
| table { |
| width: 100%; |
| } |
| pre, .symbol.monospace { |
| overflow-x: auto; |
| } |
| .symbol .top-right-position { |
| /* The "copy content" button doesn't work well with overflow-x */ |
| display: none; |
| } |
| footer > span:first-child { |
| margin-left: 12px; |
| } |
| footer > span:last-child { |
| margin-right: 12px; |
| } |
| |
| footer { |
| position: unset; |
| } |
| |
| .footer-text { |
| display: none; |
| } |
| } |
| /* Portrait phones */ |
| @media(max-width: 576px) { |
| :root { |
| --side-width: 0px; |
| --content-padding: 48px 12px; |
| } |
| |
| /* Togglable left column */ |
| #leftColumn { |
| --side-width: 85vw; |
| margin-left: -85vw; /* closed by default */ |
| transition: margin .25s ease-out; |
| } |
| #leftColumn.open { |
| margin-left: 0; |
| } |
| #leftColumn.open ~ #main #searchBar { |
| display: none; |
| } |
| |
| #leftToggler { |
| display: unset; |
| position: absolute; |
| top: 5px; |
| left: 12px; |
| z-index: 5; |
| font-size: 30px; |
| } |
| #leftColumn.open ~ #main #leftToggler { |
| position: fixed; |
| left: unset; |
| right: 16vw; |
| color: var(--leftbar-fg); |
| } |
| .icon-toggler::before { |
| content: "\e90a"; /* menu icon */ |
| } |
| #leftColumn.open ~ #main .icon-toggler::before { |
| content: "\e900"; /* clear icon */ |
| } |
| /* --- */ |
| .cover h1 { |
| margin-top: 0; |
| } |
| .table-row { |
| padding-right: 0; |
| } |
| .main-subrow .anchor-icon { |
| display: none; |
| } |
| } |
| |
| /* Breadcrumbs */ |
| |
| .breadcrumbs a { |
| margin: 0 8px; |
| } |
| |
| .breadcrumbs a:first-child { |
| margin: 0 8px 0 0; |
| } |
| |
| .breadcrumbs { |
| align-self: flex-start; |
| } |
| |
| /* Header from docs.scala-lang */ |
| |
| .navigation .navigation-menu { |
| padding-left: 0px; |
| margin: 18px 0px; |
| } |
| .navigation .navigation-menu .navigation-menu-item { |
| margin: 5px 0px; |
| display: inline-block; |
| } |
| .navigation .navigation-menu .navigation-menu-item:last-child { |
| margin-right: 0px; |
| } |
| .navigation .navigation-menu .navigation-menu-item a { |
| padding: 5px 15px; |
| text-transform: uppercase; |
| border-radius: 300px; |
| font-weight: 700; |
| color: var(--title-fg); |
| } |
| .navigation .navigation-menu .navigation-menu-item a:active, .navigation .navigation-menu .navigation-menu-item a:focus, .navigation .navigation-menu .navigation-menu-item a:hover, .navigation .navigation-menu .navigation-menu-item a.active { |
| background: var(--red500); |
| text-decoration: none; |
| } |
| .two-columns { |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| /* Nav Icons */ |
| |
| .arrows-wrapper { |
| display: flex; |
| justify-content: space-between; |
| padding-top: 16px; |
| padding-bottom: 16px; |
| } |
| |
| .arrows { |
| color: var(--link-fg); |
| font-size: 1em; |
| text-align: center; |
| |
| display: flex; |
| align-items: center; |
| |
| transition: color 0.5s, background-color 0.5s; |
| } |
| |
| .arrows span { |
| max-width: 10vw; |
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| } |
| |
| .arrows i { |
| margin: 8px; |
| } |
| |
| .arrows.previous, .arrows.next { |
| color: var(--grey400); |
| } |
| |
| .arrows:hover { |
| text-decoration: none; |
| color: var(--link-hover-fg); |
| transition: background-color 0.15s, color 0.15s; |
| } |
| |
| .previous { |
| flex-direction: row-reverse; |
| } |
| |
| .next { |
| flex-direction: row; |
| } |
| |
| @media screen and (max-width: 1000px) { |
| .arrows-wrapper { display: none; } |
| } |