@require './vuepress/styles/config'

/*
 *
 * Defines default styles specific to Sphinx Press,
 * on top of VuePress styles
 *
 */


.page
  margin-left: 10px
  margin-right: 10px

// ReST put table cell elements into P
table, dd, li
  p
    margin: 0


.content
  max-width: 840px
  margin: 0 auto

  pre
    line-height: 1.4;
    padding: 1.25rem 1.5rem;
    margin: .85rem 0;
    background-color: #282c34;
    border-radius: 6px;
    overflow: auto;

  code
    color: #476582;
    padding: .25rem .5rem;
    margin: 0;
    font-size: .85em;
    background-color: rgba(27,31,35,.05);
    border-radius: 3px;

  .footnote-reference, .label, .reference
    scroll-margin-top: $navbarHeight

  & a:focus
    // remove outline because padding mess it up
    outline none

/* MAKES MAIN TEXT SECTION LARGER */
.content:not(.custom)
  max-width: 840px

.content section
  scroll-margin-top: ($navbarHeight + 0.5rem)
  margin-bottom 0
  &:hover
    .headerlink
        opacity: 1


/* Use # as symbol for anchor headerlinks */
h1, h2, h3, h4, h5, h6
  &:hover a.headerlink
    &::after
      visibility visible
      content "#"

a.headerlink
  font-size 0.85em
  visibility hidden
  &:hover
    text-decoration none

ul.page-nav
  list-style none
  & li
    display inline-block

.body-header
  display flex
  & ul.page-nav
    flex-grow 1
    list-style none
    list-style-position inside
    text-align right
    margin-right 30px
    & li + li:before
      content "|"
      padding 0 1em

ul.breadcrumbs
  list-style none
  & li
    display inline-block
    margin-right 5px

/* THE SECTION BELOW DEFINES THE APPEARANCE OF TABLE-OF-CONTENTS */
/* color fixes for table of contents */
.toc-backref
  /* TOCS cause all your section titles to go green. Pouah! */
  color: inherit
.contents.topic p.topic-title
  /* Hide all TOC titles */
  display: none
.contents.topic
  margin-bottom: 3em


/* -- sidebars -------------------------------------------------------------- */
aside.sidebar {
    margin: 0 0 0.5em 1em;
    border: 1px solid #ddb;
    padding: 7px;
    background-color: #ffe;
    width: 40%;
    float: right;
    clear: right;
    overflow-x: auto;
}

p.sidebar-title {
    font-weight: bold;
}

div.admonition, div.topic, blockquote {
    clear: left;
}
pre, div[class*="highlight-"] {
    clear: both;
}
/* -- sidebars -------------------------------------------------------------- */



/** index page **/
.toctree-wrapper .caption
  // same as h2
  font-weight 600
  line-height 1.25
  font-size 1.65rem
  padding-bottom .3rem
  border-bottom 1px solid $borderColor



/** footer **/
.footer
  clear both
  min-height 2rem
  padding-top 1rem
  overflow auto
  color grey
  font-size small
  line-height 1.5rem


/** pygments style **/
.content .highlight
  border-radius 6px

// force background color from pygments
.content .highlight pre
  background-color inherit

.content .highlighted
  background-color #fbe54e
  font-weight bold
  padding 0 4px

/*** admonitions based on custom-blocks.styl */
.admonition
  padding .1rem 1.5rem
  border-left-width .5rem
  border-left-style solid
  margin 1rem 0
  // default color
  background-color #e2e2e2
  border-color #787878

  .admonition-title
    font-weight 600
    margin-bottom -0.4rem
  &.tip, &.hint
    background-color #f3f5f7
    border-color #42b983
  &.important, &.note
    background-color #e5f1fb
    border-color #5faaea
  &.warning, &.caution
    background-color rgba(255,229,100,.3)
    border-color darken(#ffe564, 35%)
    color darken(#ffe564, 70%)
    .custom-block-title
      color darken(#ffe564, 50%)
    a
      color $textColor
  &.danger, &.error
    background-color #ffe6e6
    border-color darken(red, 20%)
    color darken(red, 70%)
    .custom-block-title
      color darken(red, 40%)
    a
      color $textColor


.line-block
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  .line-block
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 1.5em;

.guilabel, .menuselection
  font-family: sans-serif;

.accelerator
  text-decoration: underline;

.classifier
  font-style: oblique;

.classifier:before
  font-style: normal;
  margin: 0.5em;
  content: ":";

abbr, acronym
  border-bottom: dotted 1px;
  cursor: help;


/* -- topics ---------------------------------------------------------------- */

div.topic
  border: 1px solid #ccc;
  padding: 7px;
  margin: 10px 0 10px 0;
  background-color: #f7f7f7;
p.topic-title
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 10px;

a.brackets:before,
span.brackets > a:before
  content: "[";
a.brackets:after,
span.brackets > a:after
  content: "]";

p.rubric
  margin-top: 30px;
  font-weight: bold;



/* THE SECTION BELOW CHANGES CODE FONTS FOR BETTER 80-CHARS READABILITY */
code, pre, kbd, samp, .pre
  /* list of fonts taken from pydata-theme */
  font-family: "SFMono-Regular", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

@media (max-width: 1200px)
  pre
    font-size: 0.95em

blockquote
  font-size: inherit
  h2
    margin-left: 1em


/* THE SECTION BELOW DEFINES THE APPEARANCE OF AUTODOC-GENERATED DOCS */
.sig
  .property
    color: #4d6a86
    padding-right: 0.25rem

.sig-name.descname
  font-size: 1.2em
  font-weight: bold
  padding: 0 0 3px /* creates a perfect grey rectangle*/

.sig-param
  margin-left: 0.3em

.sig-paren
  margin-left: 0.3em

dt
  line-height: 1.5em
  margin-top: 1em
  font-weight: 700

dt.field-odd, dt.field-even, p.rubric
  font-size: 1.2em
  font-weight: bold
  color: #4d6a86

dd
  margin-inline-start: 10px

dd.field-odd p strong
  margin-left: 1em

dl.method, dl.function
  margin-top: 1em
  margin-bottom: 2em

.viewcode-link
  margin-left: 1em
  color: #9ad8bc
/* end - autodoc */

dl.field-list
  display: grid;
  grid-template-columns: fit-content(30%) auto;
  dt
    margin-top: 0
  dd
    margin-bottom: 1em

dl.field-list > dt
    font-weight: bold;
    word-break: break-word;
    padding-left: 0.5em;
    padding-right: 5px;

dl.field-list > dt:after
    content: ":";

dl.field-list > dd
    padding-left: 0.5em;
    margin-top: 0em;
    margin-left: 0em;
    margin-bottom: 0em;
dl
    margin-bottom: 15px;



/* figure alignment */

img.align-left, figure.align-left, .figure.align-left, object.align-left {
    clear: left;
    float: left;
    margin-right: 1em;
}

img.align-right, figure.align-right, .figure.align-right, object.align-right {
    clear: right;
    float: right;
    margin-left: 1em;
}

img.align-center, figure.align-center, .figure.align-center, object.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.align-default, figure.align-default, .figure.align-default {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-default {
    text-align: center;
}

.align-right {
    text-align: right;
}



/* THE SECTION BELOW FIXES A SPHINX-MERMAID OPACITY PROBLEM */
.content .section
  opacity: 1.0 !important
.section
  opacity: 1.0 !important
