/** 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; }