/* Sphinx-Gallery has compatible CSS to fix default sphinx themes Tested for Sphinx 1.3.1 for all themes: default, alabaster, sphinxdoc, scrolls, agogo, traditional, nature, haiku, pyramid Tested for Read the Docs theme 0.1.7 */ /* Define light colors */ :root, html[data-theme="light"], body[data-theme="light"]{ --sg-tooltip-foreground: black; --sg-tooltip-background: rgba(250, 250, 250, 0.9); --sg-tooltip-border: #ccc transparent; --sg-thumb-box-shadow-color: #6c757d40; --sg-thumb-hover-border: #0069d9; --sg-script-out: #888; --sg-script-pre: #fafae2; --sg-pytb-foreground: #000; --sg-pytb-background: #ffe4e4; --sg-pytb-border-color: #f66; --sg-download-a-background-color: #ffc; --sg-download-a-background-image: linear-gradient(to bottom, #ffc, #d5d57e); --sg-download-a-border-color: 1px solid #c2c22d; --sg-download-a-color: #000; --sg-download-a-hover-background-color: #d5d57e; --sg-download-a-hover-box-shadow-1: rgba(255, 255, 255, 0.1); --sg-download-a-hover-box-shadow-2: rgba(0, 0, 0, 0.25); } @media(prefers-color-scheme: light) { :root[data-theme="auto"], html[data-theme="auto"], body[data-theme="auto"] { --sg-tooltip-foreground: black; --sg-tooltip-background: rgba(250, 250, 250, 0.9); --sg-tooltip-border: #ccc transparent; --sg-thumb-box-shadow-color: #6c757d40; --sg-thumb-hover-border: #0069d9; --sg-script-out: #888; --sg-script-pre: #fafae2; --sg-pytb-foreground: #000; --sg-pytb-background: #ffe4e4; --sg-pytb-border-color: #f66; --sg-download-a-background-color: #ffc; --sg-download-a-background-image: linear-gradient(to bottom, #ffc, #d5d57e); --sg-download-a-border-color: 1px solid #c2c22d; --sg-download-a-color: #000; --sg-download-a-hover-background-color: #d5d57e; --sg-download-a-hover-box-shadow-1: rgba(255, 255, 255, 0.1); --sg-download-a-hover-box-shadow-2: rgba(0, 0, 0, 0.25); } } html[data-theme="dark"], body[data-theme="dark"] { --sg-tooltip-foreground: white; --sg-tooltip-background: rgba(10, 10, 10, 0.9); --sg-tooltip-border: #333 transparent; --sg-thumb-box-shadow-color: #79848d40; --sg-thumb-hover-border: #003975; --sg-script-out: rgb(179, 179, 179); --sg-script-pre: #2e2e22; --sg-pytb-foreground: #fff; --sg-pytb-background: #1b1717; --sg-pytb-border-color: #622; --sg-download-a-background-color: #443; --sg-download-a-background-image: linear-gradient(to bottom, #443, #221); --sg-download-a-border-color: 1px solid #3a3a0d; --sg-download-a-color: #fff; --sg-download-a-hover-background-color: #616135; --sg-download-a-hover-box-shadow-1: rgba(0, 0, 0, 0.1); --sg-download-a-hover-box-shadow-2: rgba(255, 255, 255, 0.25); } @media(prefers-color-scheme: dark){ html[data-theme="auto"], body[data-theme="auto"] { --sg-tooltip-foreground: white; --sg-tooltip-background: rgba(10, 10, 10, 0.9); --sg-tooltip-border: #333 transparent; --sg-thumb-box-shadow-color: #79848d40; --sg-thumb-hover-border: #003975; --sg-script-out: rgb(179, 179, 179); --sg-script-pre: #2e2e22; --sg-pytb-foreground: #fff; --sg-pytb-background: #1b1717; --sg-pytb-border-color: #622; --sg-download-a-background-color: #443; --sg-download-a-background-image: linear-gradient(to bottom, #443, #221); --sg-download-a-border-color: 1px solid #3a3a0d; --sg-download-a-color: #fff; --sg-download-a-hover-background-color: #616135; --sg-download-a-hover-box-shadow-1: rgba(0, 0, 0, 0.1); --sg-download-a-hover-box-shadow-2: rgba(255, 255, 255, 0.25); } } .sphx-glr-thumbnails { width: 100%; margin: 0px 0px 20px 0px; /* align thumbnails on a grid */ justify-content: space-between; display: grid; /* each grid column should be at least 160px (this will determine the actual number of columns) and then take as much of the remaining width as possible */ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; } .sphx-glr-thumbnails .toctree-wrapper { /* hide empty toctree divs added to the DOM by sphinx even though the toctree is hidden (they would fill grid places with empty divs) */ display: none; } .sphx-glr-thumbcontainer { background: transparent; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 0 0 10px var(--sg-thumb-box-shadow-color); /* useful to absolutely position link in div */ position: relative; /* thumbnail width should include padding and borders and take all available space */ box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid transparent; /* align content in thumbnail */ display: flex; flex-direction: column; align-items: center; gap: 7px; } .sphx-glr-thumbcontainer p { position: absolute; top: 0; left: 0; } .sphx-glr-thumbcontainer p, .sphx-glr-thumbcontainer p a { /* link should cover the whole thumbnail div */ width: 100%; height: 100%; } .sphx-glr-thumbcontainer p a span { /* text within link should be masked (we are just interested in the href) */ display: none; } .sphx-glr-thumbcontainer:hover { border: 1px solid; border-color: var(--sg-thumb-hover-border); cursor: pointer; } .sphx-glr-thumbcontainer a.internal { bottom: 0; display: block; left: 0; box-sizing: border-box; padding: 150px 10px 0; position: absolute; right: 0; top: 0; } /* Next one is to avoid Sphinx traditional theme to cover all the thumbnail with its default link Background color */ .sphx-glr-thumbcontainer a.internal:hover { background-color: transparent; } .sphx-glr-thumbcontainer p { margin: 0 0 0.1em 0; } .sphx-glr-thumbcontainer .figure { margin: 10px; width: 160px; } .sphx-glr-thumbcontainer img { display: inline; max-height: 112px; max-width: 160px; } .sphx-glr-thumbcontainer[tooltip]:hover:after { background: var(--sg-tooltip-background); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: var(--sg-tooltip-foreground); content: attr(tooltip); padding: 10px; z-index: 98; width: 100%; height: 100%; position: absolute; pointer-events: none; top: 0; box-sizing: border-box; overflow: hidden; backdrop-filter: blur(3px); } .sphx-glr-script-out { color: var(--sg-script-out); display: flex; gap: 0.5em; } .sphx-glr-script-out::before { content: "Out:"; /* These numbers come from the pre style in the pydata sphinx theme. This * turns out to match perfectly on the rtd theme, but be a bit too low for * the pydata sphinx theme. As I could not find a dimension to use that was * scaled the same way, I just picked one option that worked pretty close for * both. */ line-height: 1.4; padding-top: 10px; } .sphx-glr-script-out .highlight { background-color: transparent; /* These options make the div expand... */ flex-grow: 1; /* ... but also keep it from overflowing its flex container. */ overflow: auto; } .sphx-glr-script-out .highlight pre { background-color: var(--sg-script-pre); border: 0; max-height: 30em; overflow: auto; padding-left: 1ex; /* This margin is necessary in the pydata sphinx theme because pre has a box * shadow which would be clipped by the overflow:auto in the parent div * above. */ margin: 2px; word-break: break-word; } .sphx-glr-script-out + p { margin-top: 1.8em; } blockquote.sphx-glr-script-out { margin-left: 0pt; } .sphx-glr-script-out.highlight-pytb .highlight pre { color: var(--sg-pytb-foreground); background-color: var(--sg-pytb-background); border: 1px solid var(--sg-pytb-border-color); margin-top: 10px; padding: 7px; } div.sphx-glr-footer { text-align: center; } div.sphx-glr-download { margin: 1em auto; vertical-align: middle; } div.sphx-glr-download a { background-color: var(--sg-download-a-background-color); background-image: var(--sg-download-a-background-image); border-radius: 4px; border: 1px solid var(--sg-download-a-border-color); color: var(--sg-download-a-color); display: inline-block; font-weight: bold; padding: 1ex; text-align: center; } div.sphx-glr-download code.download { display: inline-block; white-space: normal; word-break: normal; overflow-wrap: break-word; /* border and background are given by the enclosing 'a' */ border: none; background: none; } div.sphx-glr-download a:hover { box-shadow: inset 0 1px 0 var(--sg-download-a-hover-box-shadow-1), 0 1px 5px var(--sg-download-a-hover-box-shadow-2); text-decoration: none; background-image: none; background-color: var(--sg-download-a-hover-background-color); } .sphx-glr-example-title:target::before { display: block; content: ""; margin-top: -50px; height: 50px; visibility: hidden; } ul.sphx-glr-horizontal { list-style: none; padding: 0; } ul.sphx-glr-horizontal li { display: inline; } ul.sphx-glr-horizontal img { height: auto !important; } .sphx-glr-single-img { margin: auto; display: block; max-width: 100%; } .sphx-glr-multi-img { max-width: 42%; height: auto; } div.sphx-glr-animation { margin: auto; display: block; max-width: 100%; } div.sphx-glr-animation .animation { display: block; } p.sphx-glr-signature a.reference.external { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 3px; font-size: 75%; text-align: right; margin-left: auto; display: table; } .sphx-glr-clear { clear: both; } a.sphx-glr-backref-instance { text-decoration: none; }