dotty_res.styles.scalastyle.css Maven / Gradle / Ivy
The newest version!
@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 {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
width: calc(39 * var(--base-spacing));
height: calc(100% - (8 * var(--base-spacing)) - (6 * var(--base-spacing)));
left: 0px;
top: calc(8 * var(--base-spacing));
background: var(--background-nav);
border: 1px solid var(--border-default);
border-top: none;
border-left: none;
transition: left 0.2s linear;
}
#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,
code,
.hljs {
font-family: var(--mono-font);
background: var(--code-bg);
font-variant-ligatures: none;
}
code {
font-size: 0.8em;
padding: 0 0.3em;
}
pre {
overflow-x: auto;
scrollbar-width: thin;
margin: 0px;
}
pre code,
pre code.hljs {
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: 0.5rem;
color: var(--text-primary);
}
th {
border-bottom: 2px solid var(--border-medium);
}
/* 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: 0.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: 0.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: 0.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: 0.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;
} */
.memberDocumentation {
font-size: 15px;
line-height: 1.5;
}
.memberDocumentation > p {
margin: 0.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 {
display: inline;
position: fixed;
right: 0px;
top: 0px;
width: var(--toc-width);
height: calc(100% - var(--footer-height));
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: 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 0.25s ease-out;
}
#leftColumn.open {
margin-left: 0;
}
#leftColumn.open ~ #main #searchBar {
display: none;
}
.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.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;
}
}