@import "scss/_sphinx_basic"; @import "scss/_variables"; @import "scss/bootstrap_overridden"; @import "scss/bootstrap_scss/bootstrap"; @import "scss/_mixins"; @import "scss/_typography"; @import "scss/_iconfont"; div[aria-label="related navigation"] { display: none; } body { position: relative; a { @include media-breakpoint-down(lg) { overflow-wrap: anywhere; } &:not(:hover), &.o_logo { text-decoration: none !important; } &:hover { text-underline-position: from-font; } &.external { &:not(.image-reference):after { content: '#{$i-external-link}'; font-family: icomoon, sans-serif !important; @include font-size($font-size-base/1.3); margin: 0 .2rem; } } } dd { margin-left: 1rem; } // This fixes the scroll position on all elements, including refs :target { &:before { @include o-scroll-padding() } } abbr { text-underline-offset: 2px; &[title="Pull Request"] { @include o-easter-egg(); } } } .hidden { visibility: hidden !important; display: none !important; opacity: 0 !important; } span.viewcode-link { float: none; margin-left: .3rem; } //------------------------------------------------------------------------------ // Header with logo, searchbar and switchers //------------------------------------------------------------------------------ header { width: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: 10; .o_main_header { height: $o-header-mobile-height; background-color: $o-header-white; padding: 0 $padding-s; @include media-breakpoint-up(lg) { height: $o-header-height; padding: 0 $padding-m; } @include media-breakpoint-up(xl) { padding: 0 $padding-l 0 $padding-m; } .o_logo_wrapper { margin-right: $margin-s; @include media-breakpoint-up(xl) { width: calc(#{$o-side-nav-width} - #{$padding-m}); } @include media-breakpoint-up(lg) { margin-right: $margin-l; } > .o_logo { img { margin-bottom: -2px; vertical-align: baseline; } span { @include font-size($font-size-base); color: $o-violet; @include o-easter-egg($img:'img/ducky.svg'); } } } .o_logo img { @include media-breakpoint-up(lg) { height: 30px } } > div:not(.o_logo_wrapper) { @include media-breakpoint-up(lg) { width: calc(100% - (#{$o-side-nav-width})); } } .o_search_wrapper { position: relative; @include media-breakpoint-up(lg) { margin-right: $padding-m; } .o_search { position: relative; width: 100%; .btn { @include o-position-absolute($top: 50%, $right: .5rem); @include o-transform (translateY(-50%)) ; padding: 0 $padding-xs; font-size: 1.2rem; color: $gray; } .form-control { @include media-breakpoint-down(lg) { padding: 0.275rem 0.5rem; font-size: $font-size-secondary; } } } .highlight-link { @include font-size(0); margin-bottom: 0; a { text-decoration: none; color: $gray; &:before { @include o-position-absolute($top: 50%, $right: 3rem); @include o-transform (translateY(-50%)) ; @include o-inline-icon($i-close, auto, middle, 1.2rem); } } } } } .o_subheader { background: $gray-lighter; height: $o-subheader-height; padding-right: $padding-s; @include media-breakpoint-up(lg) { padding: 0 $padding-m; } @include media-breakpoint-up(xl) { padding: 0 $padding-l 0 0; } .o_side_nav_toggler_wrapper { height: 100%; button { &:focus, &:focus-visible{ box-shadow: none; outline:none; } &[aria-expanded="true"]{ background-color: rgba(0,0,0, .2); } } } } } //------------------------------------------------------------------------------ // Left side nav toctree //------------------------------------------------------------------------------ .o_side_nav { .o_mobile-overlay { background-color: rgba(0,0,0,.3); @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right:0); opacity: 0; transition: opacity .2s linear; z-index: -100; } .o_side_nav-inner { width: 90%; height: calc(100% - #{$o-headers-mobile-height}); overflow-y: auto; position: fixed; left: -100%; @include o-transition(all, .3s); padding-left: $padding-s; background-color: lighten($o-violet-dark, 70%) ; z-index: 10; @include font-size($font-size-secondary); color: $o-violet-dark; font-weight: $fw_regular; @include media-breakpoint-up(lg) { width: $o-side-nav-width; height: calc(100vh - #{$o-headers-height}); left: 0; padding-top: $padding-m; padding-left: $padding-m; } &::-webkit-scrollbar { width: 5px; } &::-webkit-scrollbar-track { background: $white; } &::-webkit-scrollbar-thumb { background-color: $o-violet-darker ; border-radius: 0; } } &.show { .o_mobile-overlay { opacity: 1; z-index: 1; } .o_side_nav-inner { left: 0; } } .toctree-l1 { padding-bottom: $padding-xs; > .o_toc_entry_wrapper a { color: $o-violet-dark; font-weight: 600; } } .o_main_toc { > ul { li { &.o_active_toc_entry { &:not(.toctree-l1) > .o_toc_entry_wrapper i[class^="i-"]:not(.collapsed), > a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i { color: $o-violet-dark; } } a { &.current { color: $o-violet-dark; } } } } } ul { .o_deepest_active_toc_entry { background-color: $gray-lighter; border-left: 3px solid $gray-lighter; margin-left: -3px; } > .toctree-l1 { &[class*="o_menu_"] > .o_toc_entry_wrapper > i:before { @include o-inline-icon($i-doc-apps, 0 5px 0 0); color: $o-violet-dark; } &.o_menu_applications > .o_toc_entry_wrapper > i:before{ content:'#{$i-doc-apps}'; } &.o_menu_administration > .o_toc_entry_wrapper > i:before{ content:'#{$i-doc-admin}'; } &.o_menu_developer > .o_toc_entry_wrapper > i:before{ content:'#{$i-doc-dev}'; } &.o_menu_services > .o_toc_entry_wrapper > i:before{ content:'#{$i-doc-services}'; } &.o_menu_contributing > .o_toc_entry_wrapper > i:before{ content:'#{$i-doc-contribute}'; } } } } .o_main_toc, .o_page_toc_nav { ul { // all uls in toc list-style: none; padding-left: $padding-s; li { > a.reference { padding-left: .875rem; } a { display: inline-block; padding: .4rem 0; color: $gray-darker; font-weight: $fw_regular; } &:not(.toctree-l1) { .o_toc_entry_wrapper { &:not(.o_page_toc_title) { display: flex; align-items: baseline; } > i[class^="i-"] { display: inline-block; margin-right: .125rem; @include o-transition(rotate, .3s); font-size: .75rem; &[aria-expanded="true"] { @include o-transform(rotate(90deg)); } } } } &.o_active_toc_entry { &:not(.toctree-l1) > .o_toc_entry_wrapper { i[class^="i-"]:not(.collapsed) { @include o-transform(rotate(90deg)); } } > a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i { font-weight: $fw_bold; } } } } > ul { //is first ul in toc padding-left: 0; } } //------------------------------------------------------------------------------ // On this page local toctree //------------------------------------------------------------------------------ aside.o_page_toc { color: $body-color; @include font-size($font-size-secondary); &:not(.o_in_nav_toc) { display: none; @include media-breakpoint-up(xl) { display: block; grid-area: toc; top: $o-headers-height; padding: $padding-m $padding-s $padding-m 0; overflow-y: auto; } position: -webkit-sticky; position: sticky; height: 100%; max-height: calc(100vh - #{$o-headers-height}); } &.o_in_nav_toc { display: block; @include media-breakpoint-up(xl) { display: none; } } h3 { text-transform: uppercase; font-weight: $fw_bold; color: $gray-darker; padding-left: $padding-xs; margin-bottom: $padding-xs; } a { font-weight: $fw_regular; color: $gray-darker; } .o_page_toc_title { display:none; + ul { padding-left: 0; } } } //------------------------------------------------------------------------------ // Main page content //------------------------------------------------------------------------------ #wrap { display: grid; grid-template-areas: "main"; grid-template-columns: minmax(0,100%); margin-top: $o-headers-mobile-height; @include media-breakpoint-up(lg) { grid-template-areas: "sidebar main toc"; grid-template-columns: minmax(0,$o-side-nav-width) minmax(0,auto) minmax(0,$o-on-page-width); margin-top: $o-headers-height; } p { > code { padding: 0 .3rem; } } code { display: inline-block; color: inherit; overflow-wrap: anywhere; &:first-of-type:not(span):not(em) { padding-left: .3rem; } &:last-of-type:not(em) { padding-right: .3rem; } ~ .sig-paren, ~ .sig-param, ~ .optional { @extend code; + .sig-paren { padding: 0 .1rem; } } &.file { font-family: $font-family-base; font-weight: $fw_medium; font-style: italic; padding-right: .4rem; color: $color-beta-dark; background-color: lighten($color-beta-lightest, 30%); } &:not(.file) { color: inherit; background: darken($doc_code-bg,3%); } } iframe { max-width: 100%; } main { position: relative; grid-area: main; padding-bottom: $padding-l; @include media-breakpoint-up(lg) { padding: $padding-m $padding-l; margin: 0; grid-column-end: toc; } @include media-breakpoint-up(xl) { grid-column-end: main; } &.o_index, &.o_fullwidth_page, &.o_has_code_column { grid-column-end: toc; } // Homepage &.o_index { .o_content_fw_banner { margin: 0 -0.75rem $margin-m; padding: $padding-m $padding-s; align-items: center; @include o-gradient(); @include media-breakpoint-up(lg) { margin: -#{$margin-m} -#{$margin-l} $margin-m; padding: $padding-m $padding-m; } @include media-breakpoint-up(xl) { margin: -#{$margin-m} -#{$margin-l} $margin-l; padding: $padding-l $padding-l; } } .row:first-of-type h2.border-top { @include media-breakpoint-up(lg) { border-top: 0 solid transparent !important; } } h5 { font-size: 12px; } ul { > li { position: relative; padding-bottom: $padding-xs; display: flex; align-items: center; &:before { @include o-inline-icon($i-article, 0 .2rem 0 0); color: $gray-light; } } } .o_changelog { .row:last-of-type > .border-bottom { border: none !important; } } } // First level legal page and pages with toctrees (i.e.: User Docs, Install & Maintain, Developer, Contributing) &.o_fullwidth_page { div.toctree-wrapper > ul { display: flex; flex-wrap: wrap; > li { @include media-breakpoint-down(lg) { width: 100%; } @include media-breakpoint-up(lg) { width: 33%; &:not(:nth-of-type(3n)){ padding-right: $padding-m; } } } } } // pages with column for code on the right &.o_has_code_column { article.doc-body { @include media-breakpoint-up(xl) { .o_git_link { right: calc(#{$o-codecol-width} + #{$padding-l}); } section { > * { width: $o-halfpage-width; float: left; clear: left; } > h1 { max-width: calc(#{$o-halfpage-width} - 120px); } > h1, > h2, > h3, > h4, > h5, > h6 { float: none; clear: none; } .doc-aside { width: $o-codecol-width; float: none; clear: none; margin-left: 57%; padding: $padding-s; blockquote { font-weight: $fw_semibold; font-style: italic; } pre { font-size: 12px; } } } } } + aside.o_page_toc{ display: none; } } &.o_hide_toc { .toctree-wrapper { display: none; } } .toctree-wrapper { > ul, .toctree-l1 > ul { padding-left: 0; list-style: none; } .toctree-l1 > a { display: block; @include font-size($h2-font-size); margin-top: $padding-m; padding-bottom: $padding-xs; border-bottom: 1px solid $gray-light; margin-bottom: $margin-s; font-size: 1.2rem; font-weight: 600; } .toctree-l1 { margin-bottom: 2rem; } .toctree-l2 > a[href="#"] { margin-top: 0.7rem; display: inline-block; } a[href="#"] { pointer-events: none; cursor: default; color: $gray-darker; font-weight: $fw_semibold; } } article.doc-body { padding-top: $padding-s; position: relative; .o_git_link { @include font-size($font-size-secondary); @include o-position-absolute($top: 0px, $right: $margin-s); @include media-breakpoint-up(lg) { @include o-position-absolute($top: 10px, $right: $margin-s); } i { margin-right: .2rem; } } .command { font-family: var(--bs-font-monospace); font-weight: $fw_regular; @extend code; } dl.py, dl.js, dl.o-definition-list { > dd { border-left: 3px solid $gray-lighter; margin: 0; padding-left: $padding-s; padding-top: $padding-xs; } &.class em.property { font-size: $font-size-secondary; &:first-child { border-bottom: 3px solid $gray-lighter; + [class^=sig] { padding-left: .3rem; } } &:not(:first-child) { @extend code; &:last-of-type { padding-right: .3rem; } } } } dl.field-list { @include font-size($font-size-secondary); padding: .5rem; border: 1px solid $gray-light; @include media-breakpoint-down(lg) { display: block; } > dt { padding-left: 0; } > dd { padding-right: 0; } ul { list-style: none; padding-left: 0; li { padding-bottom: $padding-xs; } } } // Search items highlighted span.highlighted { background-color: lighten($warning, 15%); } section { > h1 { color: $o-violet-dark; font-weight: $fw_bold; @include media-breakpoint-up(lg) { max-width: calc(100% - 120px); } + * { margin-top: $margin-s; } } > h2 { font-family: $font-family-serif; color: $gray-darker; margin-top: $margin-m; margin-bottom: $margin-s; padding-bottom: .3rem; border-bottom: 1px solid $gray-light; } > h3 { margin-top: $margin-m; font-weight: $fw_bold; } > h4 { margin-top: $margin-l; } > h4, > h5, > h6 { font-weight: $fw_semibold; } img { border: 1px solid $gray-lighter; background: $white; padding: .5rem; margin-bottom: 1rem; } img:not(.o-no-modal) { cursor: pointer; } iframe { margin-bottom: 1rem; } p > img { border: none; padding: 0; margin-bottom: 0; } .figure { .caption, .caption-text { font-weight: $fw_semibold; color: $gray; } .caption, .caption-text, .legend, .legend p { font-style: italic; margin: 0 auto; } @include media-breakpoint-up(md) { &:not([class^="col"]) .legend { max-width: 60%; } } } a.headerlink { text-decoration: none; font-size: 0; line-height: 0; visibility: hidden !important; &:before { content: "\a0"; } &:after { content: '#{$i-link}'; font-family: icomoon, sans-serif !important; @include font-size($font-size-base); margin: 0 0 0 .3rem; visibility: hidden; color: $gray-light; opacity: 0; @include o-transition(all, .1s) } } *:hover > a.headerlink:after { // This makes permalinks only visible on hover. visibility: visible; opacity: 1; } table.table { @include media-breakpoint-down(lg){ display: block; overflow-x: auto; code { overflow-wrap: break-word; } } } } } div[class^="highlight"] { // This styles the consoles like read-the-doc's consoles overflow-x: auto; border: 1px solid $gray-light; margin: 1px 0 24px 0; div[class^="highlight"] { padding: 0; border: none; margin: 0; } pre { white-space: pre; margin: 0; padding: 1rem; display: block; overflow: auto; } } .guilabel, .menuselection { font-weight: $fw_semibold; } .dfn{ @include font-size($font-size-secondary); line-height: 1; color: $color-beta; font-weight: $fw_semibold; &:before { content:'?'; display: inline-block; width: 15px; height: 15px; border: 2px solid $color-beta; border-radius: 20px; text-align: center; color: $color-beta; font-size: 12px; font-weight: $fw_extrabold; font-style: normal; margin: 0 .1rem; } } .pq-patch em { display: block; border-radius: 4px 4px 0 0; background: $gray-lighter; padding: .2rem 1rem; @include font-size($font-size-secondary); font-weight: 600; } .container .container:not([class^="col"]) { padding: 0; margin: 0; } ul, ol { text-align: left; } ol { ol { list-style: lower-alpha; > li:before { content: none; } } } //------------------------------------------------------------------------------ // Alerts //------------------------------------------------------------------------------ // alert-info // alert-note // alert-tip // alert-warning // alert-danger // alert-example // alert-exercise // alert-go_to .alert { position: relative; display: inline-block; border-radius: 0; border-width: 0 0 0 3px; width: 100%; @include font-size($font-size-secondary); code, div[class^="highlight"] { background-color: $white !important; border: 1px solid $gray-light; color: inherit; } > p , > ul { margin-bottom: .5rem; } > *:last-child { margin-bottom: 0; } > h3, > .alert-title { line-height: 1em; margin: 0 0 10px 0; @include font-size($font-size-base); font-weight: $fw_bold; &:before { @include o-inline-icon($i-info, 0 .2rem 0 0, baseline, $font-size-base, inherit); @include media-breakpoint-down(md) { display:none; } } } &.alert-info, &[class^="admonition"] { border-color: tint-color($brand-info, 30%); background-color: tint-color($brand-info, 85%); color: shade-color($brand-info, 35%); > .alert-title, > h3 { color: $brand-info; &:before { content: '#{$i-info}'; } } code, div[class^="highlight"] { border-color: tint-color($brand-info, 30%); } } &.alert-note { border-color: shade-color($info, 30%); background-color: $gray-lightest; color: shade-color($info, 55%); > .alert-title, > h3 { color: shade-color($info, 45%); &:before { content: '#{$i-note}'; } } } &.alert-tip, &.tip { border-color: shade-color($color-alpha, 10%); background-color: $gray-lightest; color: shade-color($color-alpha, 55%); > .alert-title, > h3 { color: shade-color($color-alpha, 40%); &:before { content: '#{$i-lightbulb}'; @include font-size(1.2rem); } } } &.alert-warning, &.warning { border-color: $brand-warning; > .alert-title, > h3 { color: shade-color($brand-warning, 10%); &:before { content: '#{$i-warning}'; } } code, div[class^="highlight"] { border-color: tint-color($brand-warning, 50%); } } &.alert-danger { border-color: $danger; > .alert-title, > h3 { color: darken($brand-danger, 20%); &:before { content: '#{$i-danger}'; } } code, div[class^="highlight"] { border-color: tint-color($brand-danger, 50%); } } &.alert-example { border-color: tint-color($doc_example, 30%); background-color: tint-color($doc_example, 90%); color: shade-color($doc_example, 35%); > .alert-title, > h3 { color: shade-color($doc_example, 35%); } > .alert-title:before, > h3:before { content: '#{$i-knowledge}'; } code, div[class^="highlight"] { border-color: tint-color($doc-example, 50%); } } &.alert-exercise { border-color: tint-color($doc_exercise, 30%); background-color: tint-color($doc_exercise, 90%); color: shade-color($doc_exercise, 35%); > .alert-title, > h3 { color: shade-color($doc_exercise, 35%); } > .alert-title:before, > h3:before { content: '#{$i-exercise}'; } code, div[class^="highlight"] { border-color: tint-color($doc-exercise, 50%); } } &.alert-go_to { border-color: $o-violet; background-color: $gray-lightest; a { color: $o-violet-dark; } > .alert-title, > h3 { color: $o-violet-dark; } > .alert-title:before, > h3:before { content: '#{$i-arrow-right}'; } code, div[class^="highlight"] { border-color: tint-color($o-violet, 50%); } } } .graphviz { overflow-x: auto; white-space: nowrap; img { max-width: unset; } } } } //------------------------------------------------------------------------------ // Content Tabs //------------------------------------------------------------------------------ .sphinx-tabs { padding: 0; margin-bottom: 1rem; div[role="tablist"] { border-color: $gray-light; display: inline-flex; width: 100%; } *:focus-visible { outline: none; } button { display: inline; &:focus { outline: none; } } .sphinx-tabs-tab { background: $gray-lightest; color: $gray-900; border: 0; border-top: solid 1px $gray-light; padding: .5rem 1rem; &:hover { &:not([aria-selected="true"]) { cursor: pointer; background: tint-color($o-violet-dark, 80%); color: $o-violet-dark; transition: color .15s, background .15s; border-radius: 0; } } &:first-of-type { border-left: solid 1px $gray-light; } &:last-of-type { border-right: solid 1px $gray-light; } &:focus { z-index: unset; } &[aria-selected="true"] { @include o-content-tab-selected(); margin-top: 0; margin-bottom: -1px; &:hover { cursor: unset; } &:first-of-type { @include o-content-tab-selected(); } } } .sphinx-tabs-panel { background: $doc-paper; color: $gray-900; border: 1px solid $gray-light; padding: 1rem; &:focus { outline: none; } > div[class^="highlight-"]{ border: 0 !important; } > *:last-child { margin-bottom: 0 !important; } } } //------------------------------------------------------------------------------ // Image modals //------------------------------------------------------------------------------ .o_image_modal { .modal-dialog { max-width: fit-content; } .modal-content { background-color: transparent; border: none; } .modal-body { padding: 2.2rem; } .btn-close { @include o-position-absolute($top: 0); } } //------------------------------------------------------------------------------ // Footer //------------------------------------------------------------------------------ footer { .o_get_help { padding-top: $padding-l; padding-bottom: $padding-l; background: $gray-lighter; @include media-breakpoint-up(lg) { padding-left: calc(#{$o-side-nav-width} + #{$padding-l}) } h5 { color: $secondary; font-size: 20px; font-weight: $fw_bold; margin-bottom: 1.5rem; } } }