/** css/custom.css **/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
--sidebarWidth: 280px;
--primaryColor: #3E5CC9;
--link: #3E5CC9;
--linkActive: #4C4EA3;
--linkHover: var(--primaryColor);
--sidebarBackground: #FFFFFF;
--sidebarBackgroundDark: #fcfcfc;
--sidebarBackgroundDarker: #F2F3F7;
--sidebarColor: #484848;
--sidebarTitleColor: #404040;
--noteHeader: #4C4EA3;
--hintHeader: #67c795;
--hintBackground: #67c7951C;
--warningHeader: #ffba28;
--warningBackground: #ffba281C;
--white: #ffffff;
--line: #e9eaed;
--icon-close: url('data:image/svg+xml;charset=utf-8,');
--icon-slack: url('data:image/svg+xml;charset=utf-8,');
--icon-external: url('data:image/svg+xml;charset=utf-8,');
--tuto-section-1: #FF4F46;
--tuto-section-2: #F8C0A7;
--tuto-section-3: #d2835e;
--tuto-section-4: #bb945e;
--tuto-section-5: #a59b78;
--tuto-section-6: #a68887;
--tuto-section-7: #fa8c5f;
--tuto-section-8: #E88D67;
--tuto-section-9: #7EB77F;
--tuto-section-10: #A1869E;
--tuto-section-11: #466362;
--tuto-section-11: #E7A9B5;
}
body {
font-family: "Inter", "Helvetica Neue", "Arial", "sans-serif";
color: #484848;
background: var(--color-background-primary);
}
html {
font-size: 16px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
.article {
color: #484848;
}
.content {
width: 50em;
margin-top: 1.5em;
}
.content--no-toc {
width: calc(50em + 15em);
}
.content .section h1 {
margin-top: 2em;
}
.content .section h1 span {
display: none;
}
.content .section h2 {
margin-top: 1.5em;
}
.content .section h3 {
margin-top: 2em;
}
p {
font-size: 16px;
line-height: 1.8em;
}
.content strong {
font-weight: 600;
}
.content a strong {
font-weight: 500;
}
p.admonition-title {
font-weight: 700;
font-size: 16px;
}
.admonition {
border-left: none;
border-radius: 6px;
}
.content .toctree-wrapper>p.caption,
h2,
h3,
h4,
h5,
h6,
legend {
font-weight: 600;
}
h1,
h2 {
font-weight: 700;
}
.button--primary {
position: relative;
border: 0;
text-decoration: none !important;
color: white !important;
border-radius: 5px;
padding: 0.3em;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease-in-out;
background: linear-gradient(-45deg, #0693e3, #0693e3);
display: inline-flex;
align-items: center;
line-height: 20px;
}
.button--primary span {
position: relative;
height: 14px;
width: 60px;
margin-left: 8px;
}
.button--primary:hover {
color: white !important;
transition: all 0.3s ease-in-out;
background: linear-gradient(-45deg, #003C5E, #003C5E);
}
.content .note .wy-alert-title,
.content .seealso .wy-alert-title,
.content .wy-alert-info.attention .wy-alert-title,
.content .wy-alert-info.caution .wy-alert-title,
.content .wy-alert-info.danger .wy-alert-title,
.content .wy-alert-info.error .wy-alert-title,
.content .wy-alert-info.hint .wy-alert-title,
.content .wy-alert-info.important .wy-alert-title,
.content .wy-alert-info.tip .wy-alert-title,
.content .wy-alert-info.warning .wy-alert-title,
.wy-alert.wy-alert-info .wy-alert-title {
background: var(--noteHeader);
}
.content .hint,
.content .seealso,
.content .wy-alert-info.attention,
.content .wy-alert-info.caution,
.content .wy-alert-info.danger,
.content .wy-alert-info.error,
.content .wy-alert-info.hint,
.content .wy-alert-info.important,
.content .wy-alert-info.tip,
.content .wy-alert-info.warning,
.wy-alert.wy-alert-info {
background: var(--hintBackground);
}
.content .hint .wy-alert-title,
.content .seealso .wy-alert-title,
.content .wy-alert-info.attention .wy-alert-title,
.content .wy-alert-info.caution .wy-alert-title,
.content .wy-alert-info.danger .wy-alert-title,
.content .wy-alert-info.error .wy-alert-title,
.content .wy-alert-info.hint .wy-alert-title,
.content .wy-alert-info.important .wy-alert-title,
.content .wy-alert-info.tip .wy-alert-title,
.content .wy-alert-info.warning .wy-alert-title,
.wy-alert.wy-alert-info .wy-alert-title {
background: var(--hintHeader);
}
.content .warning,
.content .seealso,
.content .wy-alert-info.attention,
.content .wy-alert-info.caution,
.content .wy-alert-info.danger,
.content .wy-alert-info.error,
.content .wy-alert-info.hint,
.content .wy-alert-info.important,
.content .wy-alert-info.tip,
.content .wy-alert-info.warning,
.wy-alert.wy-alert-info {
background: var(--warningBackground);
}
.content .warning .wy-alert-title,
.content .seealso .wy-alert-title,
.content .wy-alert-info.attention .wy-alert-title,
.content .wy-alert-info.caution .wy-alert-title,
.content .wy-alert-info.danger .wy-alert-title,
.content .wy-alert-info.error .wy-alert-title,
.content .wy-alert-info.hint .wy-alert-title,
.content .wy-alert-info.important .wy-alert-title,
.content .wy-alert-info.tip .wy-alert-title,
.content .wy-alert-info.warning .wy-alert-title,
.wy-alert.wy-alert-info .wy-alert-title {
background: var(--warningHeader);
}
.content code.literal,
.content tt.literal {
color: var(--color-literal);
}
.content div[class^=highlight],
.content pre.literal-block {
border: none;
border-radius: 5px;
}
:target>h1:first-of-type,
:target>h2:first-of-type,
:target>h3:first-of-type,
:target>h4:first-of-type,
:target>h5:first-of-type,
:target>h6:first-of-type,
span:target~h1:first-of-type,
span:target~h2:first-of-type,
span:target~h3:first-of-type,
span:target~h4:first-of-type,
span:target~h5:first-of-type,
span:target~h6:first-of-type {
background: none;
}
.highlight pre {
padding: 2em !important;
}
.highlight button.copybtn {
color: #ccc;
}
.highlight button.copybtn:hover {
color: #ffffff;
}
div.nbinput.container,
div.nboutput.container {
margin: 2em 0 !important;
}
.article-container img {
margin: 2em 0;
display: flex;
background: var(--color-img-background);
}
:target>h1:first-of-type,
:target>h2:first-of-type,
:target>h3:first-of-type,
:target>h4:first-of-type,
:target>h5:first-of-type,
:target>h6:first-of-type,
span:target~h1:first-of-type,
span:target~h2:first-of-type,
span:target~h3:first-of-type,
span:target~h4:first-of-type,
span:target~h5:first-of-type,
span:target~h6:first-of-type {
background: var(--color-sidebar-item-background--current);
}
/* mobile header */
.mobile-header .icon,
.mobile-header svg {
height: 1.5rem;
width: 1.5rem;
}
.mobile-header .theme-toggle-header {
padding: 0.75rem 0.5rem;
}
.header-logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 120px;
}
.header__search {
position: absolute;
top: 1em;
left: 1em;
right: 1em;
top: -5em;
z-index: 30;
transition: top 0.1s ease-in-out;
}
.mobile-header .header-right {
align-items: center;
}
.header__search__container {
align-items: center;
display: flex;
position: relative;
background: var(--color-sidebar-background-border);
border-radius: 5px;
padding: 0.75em;
}
.header__search__container:before {
background-color: var(--color-sidebar-search-text);
content: "";
height: var(--sidebar-search-icon-size);
left: 2em;
-webkit-mask-image: var(--icon-search);
mask-image: var(--icon-search);
position: absolute;
width: var(--sidebar-search-icon-size);
}
.header__search__input {
box-sizing: border-box;
border: none;
padding-left: 3em;
border-radius: 5px;
min-height: 50px;
width: 100%;
outline: none;
background: var(--color-sidebar-search-background);
color: var(--color-sidebar-search-text);
}
.search-icon {
position: relative;
height: 20px !important;
width: 20px !important;
cursor: pointer;
}
.search-icon:before {
background-color: var(--color-search-icon);
content: "";
-webkit-mask-image: var(--icon-search);
mask-image: var(--icon-search);
height: 100%;
width: 100%;
position: absolute;
}
.nav-overlay-icon .icon {
color: var(--color-search-icon) !important;
}
.close-icon {
position: absolute;
cursor: pointer;
width: 16px;
height: 16px;
right: 2em;
}
.close-icon:before {
background-color: var(--color-sidebar-search-text);
content: "";
-webkit-mask-image: var(--icon-close);
mask-image: var(--icon-close);
height: 100%;
width: 100%;
position: absolute;
}
.slack-icon:before {
position: absolute;
left: 0;
background-color: white;
content: "";
-webkit-mask-image: var(--icon-slack);
mask-image: var(--icon-slack);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
height: 100%;
width: 100%;
}
#__search:checked~.page .header__search {
top: 1em;
transition: top 0.3s ease-in-out;
}
#__search:checked~.search-overlay {
height: 100%;
opacity: 1;
width: 100%;
}
#searchbox .highlight-link {
display: none;
}
.search-overlay {
z-index: 20;
}
/* table */
.jp-RenderedHTMLCommon table,
div.rendered_html table {
margin-top: 1em;
background: var(--color-table-bg) !important;
color: var(--color-foreground-primary) !important;
border-radius: 3px;
}
div.rendered_html table th,
div.rendered_html table td {
text-align: left !important;
padding: 1em;
}
.jp-RenderedHTMLCommon tbody tr:hover,
div.rendered_html tbody tr:hover {
background: initial !important;
}
.jp-RenderedHTMLCommon tbody tr:nth-child(odd),
div.rendered_html tbody tr:nth-child(odd) {
background: var(--color-table-row) !important;
}
.jp-RenderedHTMLCommon tbody tr:hover,
div.rendered_html tbody {
border-radius: 3px;
}
tbody tr:last-child td:first-child,
tbody tr:last-child th {
border-bottom-left-radius: 3px;
}
tbody tr:last-child td:last-child {
border-bottom-right-radius: 3px;
}
thead tr:last-child th:first-child {
border-top-left-radius: 3px;
}
thead tr:last-child th:last-child {
border-top-right-radius: 3px;
}
.jp-RenderedHTMLCommon thead,
div.rendered_html thead {
border-bottom: 0 !important;
background: var(--color-table-header) !important;
border-radius: 3px;
}
/* back-to-top */
a.back-to-top.muted-link {
color: var(--color-foreground-primary);
text-decoration: none !important;
}
/* sidebar */
.sidebar-container {
width: 19em;
}
.sidebar-tree li>ul {
margin-left: 0;
}
.sidebar-tree li>ul a {
padding-left: 1em;
}
.sidebar-tree .caption,
.sidebar-tree :not(.caption)>.caption-text {
font-size: 22px;
font-weight: normal;
text-transform: none;
}
.sidebar-tree .reference {
line-height: 1.8em;
padding-left: 2em;
}
.sidebar-tree .reference:hover {
font-weight: 600;
}
.sidebar-tree .current-page>.reference {
font-weight: 600;
color: var(--color-sidebar-current-text);
}
.sidebar-tree .toctree-l2 a {
padding-left: 4em;
}
.sidebar-logo {
max-width: 160px;
margin-top: 2em;
}
.sidebar-brand {
margin: 0;
}
.sidebar-search-container {
margin: 0 16px;
padding-bottom: 16px;
}
.sidebar-tree .reference.external:after {
color: var(--color-sidebar-link-text--top-level);
}
.sidebar-search {
border: 1px solid var(--color-sidebar-search-border);
padding-left: 2.5em;
border-radius: 3px;
min-height: 40px;
}
.sidebar-search:focus {
border: 1px solid var(--color-sidebar-search-border-focus);
}
.sidebar-search::placeholder {
color: var(--color-search-placeholder);
font-weight: 600;
}
.sidebar-scroll,
.toc-scroll {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.sidebar-scroll::-webkit-scrollbar,
.toc-scroll::-webkit-scrollbar {
display: none;
/* Chrome, Safari and Opera */
}
.sidebar-search-container:before {
z-index: 12;
background: var(--color-search-icon)
}
.sidebar__theme-toggle {
display: none;
}
.sidebar-tree ul {
margin-bottom: 1rem;
}
@media (max-width: 67em) {
.sidebar__theme-toggle {
display: block;
position: absolute;
z-index: 1;
right: 1em;
top: 0.4em;
}
.social {
justify-content: center !important;
margin: auto;
}
.social--sidebar {
display: none !important;
}
.sidebar-search-container {
display: none;
}
.open-in-colab__wrapper {
display: none;
}
}
@media (min-width: 67em) {
.social--main {
display: none !important;
}
.social--sidebar {
margin-bottom: 1em;
text-align: center;
align-items: center;
display: block !important;
}
.social--sidebar>* {
margin: 3px 4px;
vertical-align: middle;
}
.open-in-colab__wrapper {
display: inline-flex;
width: calc(100% - 40px);
gap: 2px;
justify-content: right;
margin-top: 1.4em;
}
}
@media (max-width: 82em) {
.open-in-colab__wrapper {
width: calc(100% - 70px);
}
}
/* toc */
.toc-title {
color: var(--color-toc-title);
text-transform: none;
font-size: 16px;
font-weight: 600;
}
.toc-tree .reference {
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.toc-tree .reference:hover {
font-weight: 700;
color: var(--color-toc-item-text--active);
}
/* typography */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
h1 {
margin-top: 2rem
}
h2 {
margin-top: 2rem
}
p {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
/* anchors */
.headerlink {
height: 1px;
overflow: hidden;
white-space: nowrap;
width: 1px;
visibility: hidden !important;
}
.code-block-caption:hover>.headerlink:before,
dl dt:hover>.headerlink:before,
figcaption p:hover>.headerlink:before,
h1:hover>.headerlink:before,
h2:hover>.headerlink:before,
h3:hover>.headerlink:before,
h4:hover>.headerlink:before,
h5:hover>.headerlink:before,
h6:hover>.headerlink:before,
p.caption:hover>.headerlink:before,
table>caption:hover>.headerlink:before {
content: "\f0c1";
font-family: FontAwesome;
visibility: visible;
font-size: 16px;
}
/* links and buttons */
.article-container a:not(.headerlink):not(.github-stars a):not(:hover) {
color: var(--color-content-foreground);
}
.article-container a:not(.headerlink) {
text-decoration: underline;
}
a {
text-decoration: none;
}
/* add border-radius */
.content img {
border-radius: 5px;
}
.content video {
border-radius: 5px;
}
@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: none;
-webkit-text-fill-color: var(--color-sidebar-search-text);
-webkit-box-shadow: 0 0 0px 1000px var(--color-sidebar-search-background) inset;
transition: background-color 5000s ease-in-out 0s;
}
/* code */
div.nbinput.container div.input_area {
border: none !important;
}
/* Tutorials sections */
a [class^="tuto-section-"] {
height: 14px;
width: 14px;
display: inline-block;
margin-right: 1em;
border-radius: 50%;
}
div[class*="tuto-section-"] {
padding: 0;
}
a .tuto-section-1 {
background: var(--tuto-section-1);
}
a .tuto-section-2 {
background: var(--tuto-section-2);
}
a .tuto-section-3 {
background: var(--tuto-section-3);
}
a .tuto-section-4 {
background: var(--tuto-section-4);
}
a .tuto-section-5 {
background: var(--tuto-section-5);
}
a .tuto-section-6 {
background: var(--tuto-section-6);
}
a .tuto-section-7 {
background: var(--tuto-section-7);
}
a .tuto-section-8 {
background: var(--tuto-section-8);
}
a .tuto-section-9 {
background: var(--tuto-section-9);
}
a .tuto-section-10 {
background: var(--tuto-section-10);
}
a .tuto-section-11 {
background: var(--tuto-section-11);
}
/* Copyright */
.left-details {
visibility: hidden;
}
.left-details .copyright {
visibility: visible;
}
/* Cards */
.sd-card {
border-top: 1px solid var(--color-background-primary);
border-left: 1px solid var(--color-background-primary);
border-right: 1px solid var(--color-background-primary);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 1.5em;
}
.sd-card:hover {
transform: none;
}
.sd-card:hover .sd-card-title {
transition: color 0.2s ease-in-out;
}
.sd-card img {
width: auto;
margin: 2rem auto -1rem auto;
border-radius: 5px;
object-fit: cover;
object-position: 100% 0;
height: 100px;
}
@supports (object-fit: cover) {
.sd-card img {
width: 80%;
}
}
@media (min-width: 576px) {
.sd-card img {
height: 12vw;
}
}
@media (min-width: 1440px) {
.sd-card img {
height: 190px;
}
}
@media (max-width: 576px) {
.sd-card img {
height: 30vw;
}
}
.tuto-section-1 .sd-card {
border-color: var(--tuto-section-1);
background: var(--tuto-section-1);
}
.tuto-section-2 .sd-card {
border-bottom-color: var(--tuto-section-2);
background: var(--tuto-section-2);
transition: all 0.2s ease-in;
}
.tuto-section-2 .sd-card-hover:hover {
background: #f7b598;
border-color: #f7b598;
transition: all 0.2s ease-in;
box-shadow: 0 0.1rem 0.25rem var(--sd-color-shadow), 0 0 0.6rem rgba(0, 0, 0, .1) !important;
}
.tuto-section-3 .sd-card {
border-color: var(--tuto-section-3);
background: var(--tuto-section-3);
}
.tuto-section-4 .sd-card {
border-color: var(--tuto-section-4);
background: var(--tuto-section-4);
}
.tuto-section-5 .sd-card {
border-color: var(--tuto-section-5);
background: var(--tuto-section-5);
}
.tuto-section-6 .sd-card {
border-color: var(--tuto-section-6);
background: var(--tuto-section-6);
}
.tuto-section-7 .sd-card {
border-color: var(--tuto-section-7);
background: var(--tuto-section-7);
}
.tuto-section-8 .sd-card {
border-color: var(--tuto-section-8);
background: var(--tuto-section-8);
}
.tuto-section-9 .sd-card {
border-color: var(--tuto-section-9);
background: var(--tuto-section-9);
}
.tuto-section-10 .sd-card {
border-color: var(--tuto-section-10);
background: var(--tuto-section-10);
}
.tuto-section-11 .sd-card {
border-color: var(--tuto-section-11);
background: var(--tuto-section-11);
}
.sd-card img+.sd-card-body {
border-radius: 0
}
.sd-card-body {
background: var(--color-background-primary);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.sd-card-body .sd-card-title {
font-weight: normal !important;
margin-top: 10px;
margin-bottom: 20px;
}
.sd-card-body .sd-card-text {
font-size: 14px;
line-height: 1.8em;
}
/* pager */
.related-pages .title [class*="tuto-section-"] {
display: none;
}
.page-info {
color: var(--color-page-info);
}
.related-pages a:hover .page-info .title {
text-decoration: none;
}
/* selection */
::-moz-selection {
/* Code for Firefox */
color: white;
background: #0508D9;
}
::selection {
color: white;
background: #0508D9;
}
/* github star counter */
.github-stars {
display: inline-flex;
align-items: center;
}
.github-stars>a {
padding: 3px 6px;
text-decoration: none !important;
min-height: 21px;
font-size: 0.9rem;
}
.github-stars .--left {
background: #0693e3;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
color: #ffffff;
display: flex;
align-items: center;
gap: 6px;
border: 1px solid #0693e3;
}
.github-stars .--left:hover {
background: linear-gradient(-45deg, #003C5E, #003C5E);
border-color: #003C5E;
}
.github-stars .--right:hover {
color: #003C5E;
border-color: #003C5E;
}
.github-stars .--right {
background: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #0693e3;
border: 1px solid #0693e3;
display: flex;
align-items: center;
}