/* style.css */ /* Define colors */ :root { --distill-gray: rgb(107, 114, 128); --distill-gray-light: rgb(185, 185, 185); --distill-gray-lighter: rgb(228, 228, 228); --distill-gray-lightest: rgb(245, 245, 245); --distill-blue: #007BFF; } /* Container for the controls */ [id^="plot-"] { display: flex; flex-direction: column; align-items: center; gap: 15px; /* Adjust the gap between controls as needed */ } [id^="plot-"] figure { margin-bottom: 0px; margin-top: 0px; padding: 0px; } .plotly_caption { font-style: italic; margin-top: 10px; } .plotly_controls { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: flex-start; gap: 30px; } .plotly_input_container { display: flex; align-items: center; flex-direction: column; gap: 10px; } /* Style for the select dropdown */ .plotly_input_container > select { padding: 2px 4px; /* border: 1px solid #ccc; */ line-height: 1.5em; text-align: center; border-radius: 4px; font-size: 12px; background-color: var(--distill-gray-lightest); outline: none; } /* Style for the range input */ .plotly_slider { display: flex; align-items: center; gap: 10px; } .plotly_slider > input[type="range"] { -webkit-appearance: none; height: 2px; background: var(--distill-gray-light); border-radius: 5px; outline: none; } .plotly_slider > span { font-size: 14px; line-height: 1.6em; min-width: 16px; } .plotly_slider > input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--distill-blue); cursor: pointer; } .plotly_slider > input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--distill-blue); cursor: pointer; } /* Style for the labels */ .plotly_input_container > label { font-size: 14px; font-weight: bold; } .main-plot-container { margin-top: 21px; margin-bottom: 35px; } .main-plot-container > figure { display: block !important; /* Let this be handled by graph-container */ margin-bottom: 0px; margin-top: 0px; } .main-plot-container > div { display: none !important; } @media (min-width: 768px) { .main-plot-container > figure { display: none !important; } .main-plot-container > div { display: flex !important; } } d-byline .byline { grid-template-columns: 1fr; grid-column: text; font-size: 0.9rem; line-height: 1.8em; } @media (min-width: 768px) { d-byline .byline { grid-template-columns: 5fr 1fr 1fr; } } #title-plot { margin-top: 0px; margin-bottom: 0px; } d-contents > nav a.active { text-decoration: underline; } @media (max-width: 1199px) { d-contents { display: none; justify-self: start; align-self: start; padding-bottom: 0.5em; margin-bottom: 1em; padding-left: 0.25em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(0, 0, 0, 0.1); } } d-contents a:hover { border-bottom: none; } @media (min-width: 1200px) { d-article { /* Ensure d-article does not prevent sticky positioning */ overflow: visible; } d-contents { align-self: start; grid-column-start: 1 !important; grid-column-end: 4 !important; grid-row: auto / span 6; justify-self: end; margin-top: 0em; padding-right: 3em; padding-left: 2em; border-right: 1px solid rgba(0, 0, 0, 0.1); border-right-width: 1px; border-right-style: solid; border-right-color: rgba(0, 0, 0, 0.1); position: -webkit-sticky; /* For Safari */ position: sticky; top: 10px; /* Adjust this value if needed */ } } d-contents nav h3 { margin-top: 0; margin-bottom: 1em; } d-contents nav div { color: rgba(0, 0, 0, 0.8); font-weight: bold; } d-contents nav a { color: rgba(0, 0, 0, 0.8); border-bottom: none; text-decoration: none; } d-contents li { list-style-type: none; } d-contents ul, d-article d-contents ul { padding-left: 1em; } d-contents nav ul li { margin-bottom: .25em; } d-contents nav a:hover { text-decoration: underline solid rgba(0, 0, 0, 0.6); } d-contents nav ul { margin-top: 0; margin-bottom: 6px; } d-contents nav > div { display: block; outline: none; margin-bottom: 0.5em; } d-contents nav > div > a { font-size: 13px; font-weight: 600; } d-contents nav > div > a:hover, d-contents nav > ul > li > a:hover { text-decoration: none; }