:root { --logo-nav-padding: 0px; } /* Header Styles */ .md-header { padding-left: 24px; border-radius: 0px 0px 12px 12px; } /*Hide the active title next to the Kedro logo*/ .md-header__title--active { visibility: hidden;; } .md-header__inner { padding-bottom: var(--logo-nav-padding); display: flex; align-items: center; } .md-header__title { flex: 1; } .md-header--shadow { box-shadow: none; } .md-header, .md-tabs { background-color: var(--yellow-6); color: var(--black-900) !important; } /* Search Box Styles */ .md-search__form { border-radius: 4px; border: 1px solid var(--yellow-600); display: flex; padding: 8px; align-items: center; background-color: transparent; height: auto; } .md-search__inner { width: 200px; } .md-search__input { color: var(--yellow-600); font-size: 16px; padding-left: 35px !important } .md-search__input::placeholder { color: var(--yellow-600); } .md-search__icon svg { fill: var(--yellow-600); } .md-search__overlay { display: none; } .md-typeset blockquote { border-left: 0.2rem solid var(--yellow-300) !important; } .md-sidebar__scrollwrap:hover { scrollbar-color: var(--yellow-6) #0000; } /* Tabs + Navigation dropdown Styles */ .md-tabs__dropdown { position: absolute; top: 100%; left: 0; z-index: 1; display: none; min-width: 200px; background-color: var(--yellow-600); border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .md-tabs__item:hover .md-tabs__dropdown { display: block; } .md-tabs__dropdown-list { list-style: none; padding: 0.5rem 0; margin: 0; } .md-tabs__dropdown-item { padding: 0; } .md-tabs__dropdown-link { display: block; padding: 0.5rem 1rem; color: var(--black-900); text-decoration: none; } .md-tabs__dropdown-link:hover, .md-tabs__dropdown-link--active { background-color: var(--yellow-700); } .md-tabs__link { font-size: 16px; } .md-tabs__item--active { font-weight: 600; height: 100%; padding-bottom: 16px; border-bottom: 2px solid var(--black-900); } /** Primary Sidebar Style */ .md-sidebar--primary { width: 348px; padding: 0; padding: 24px 10px; /* Colour for the section label, which is the header of each section in the left sidebar */ .md-nav__item--section > .md-nav__link[for] { color: var(--text-primary-color); align-items: center; margin-left: 20px; } /* Apply border-radius to scrollbar container */ .md-sidebar__scrollwrap { border-radius: 12px; } .md-sidebar__inner { background-color: var(--primary-sidebar-bg-color); padding: 24px 10px; } .md-nav__item--section { margin-top: 0; } .md-nav__list { padding-left: 8px !important; } .md-nav__link { font-size: 16px; margin: 0px 8px 0px 24px; color: var(--text-primary-color); display: flex; align-items: center; } .md-nav__link span { padding: 4px 0 4px 0; line-height: 32px; } /* Target the arrow circle on the nav link list */ .md-nav__link .md-icon:last-child:hover { background-color: var(--primary-sidebar-bg-color); } .md-nav__link--active, .md-nav__link[href]:hover, .md-nav__link[href]:focus, .md-nav__link[for]:hover, .md-nav__link[for]:focus { border-radius: 12px; background-color: var(--active-link-bg-color); color: inherit !important; padding: 0px 8px 0 24px; margin: 0; display: flex; width: 100%; } .md-icon { display: flex; width: 24px; height: 24px; } } /* Secondary sidebar styles */ .md-sidebar--secondary { margin-right: 64px; margin-top: 48px; .md-nav__title { background: transparent; box-shadow: none; color: var(--text-secondary-color); font-size: 16px; font-weight: 400; padding-bottom: 10px; } .md-nav__item { font-size: 16px; padding-bottom: 10px; } .md-nav__link { color: var(--text-secondary-color); } .md-nav__link:hover { color: var(--text-hover-color); } .md-nav__link--active { color: var(--text-primary-color); } } /* Main Content Styles */ .md-grid { max-width: none; } .md-main__inner { margin: 0; } /* Add margin to the h1 for each page section content */ .md-content__inner.md-typeset { margin-top: 48px; } /* Code Block Styles */ .md-typeset pre { background-color: var(--admonition-bg-color); } .md-typeset pre code, .md-typeset code { background-color: var(--admonition-bg-color); color: var(--text-primary-color); } .md-typeset pre code { margin: 20px; /* this is to ensure there's no overlap with the copy icon */ } /** copy icon button in code blocks */ .md-clipboard { color: var(--text-secondary-color); } /** highlight the copy icon button on hover */ .md-clipboard:hover, pre:hover .md-clipboard { color: var(--text-hover-color); } /** Style for expandle code blocks */ .md-typeset details.example { background-color: var(--admonition-bg-color); border: none; border-radius: 6px; font-size: 16px; .md-typeset code { padding: 0; } } /* Admonition Styles */ .md-typeset .admonition { background-color: var(--admonition-bg-color); border: 1px solid var(--admonition-border-color) !important; border-radius: 6px; color: var(--text-primary-color); display: flow-root; font-size: 16px; margin: 24px 0; padding: 16px 20px; page-break-inside: avoid; } .md-typeset .admonition .admonition-title { background-color: transparent; padding-bottom: 0; } .md-typeset .admonition .admonition-title:before { background-color: var(--icon-fill-color); } .md-typeset details.example summary { background-color: var(--admonition-bg-color); color: var(--text-primary-color); } .md-typeset details.example summary:before, .md-typeset details.example summary:after { background-color: var(--icon-fill-color); } .md-typeset details.example:focus-within { box-shadow: none; } /* Codeblock Highlight Styles */ .highlight .n /* Names */, .highlight .p /* Punctuation */, .highlight .o /* Operators */, .highlight .ow /* Operator words */, .highlight .na /* Attribute names */, .highlight .nv /* Variable names */, .highlight .vc /* Class names */, .highlight .vg /* Global variables */, .highlight .vi { /* Instance variables */ color: var(--text-primary-color); } .highlight .ge, .highlight .gh, .highlight .go, .highlight .gp, .highlight .gr, .highlight .gs, .highlight .gt, .highlight .gu { color: var(--text-primary-color); } /* Comment elements in code blocks */ .highlight .c /* General comments */, .highlight .c1 /* Single-line comments */, .highlight .ch /* Hashbang comments */, .highlight .cm /* Multiline comments */, .highlight .cs /* Special comments */, .highlight .sd /* Docstrings */ { color: var(--text-secondary-color); } .md-typeset__table { td { min-width: 200px; } } /* Desktop-specific styles for positioning the search box and header options */ @media screen and (min-width: 76.2344em) { .md-search, .md-header__option, .md-header__source { transform: translateY(calc(100% + var(--logo-nav-padding))); z-index: 2; } /* Position the elements at tabs level with specific order */ .md-search { order: 1; } .md-header__option { order: 2; margin-left: 16px; .md-icon { padding-left: 0; padding-right: 0; } } .md-header__source { order: 3; width: 205px; margin-left: 0 !important; } /** Hide the nav label specifically on desktop version only */ #__nav_2_label { display: none; } } /** MOBILE STYLES */ @media screen and (max-width: 76.2344em) { .md-nav--primary .md-nav__item { border-top: none; } .md-nav--primary .md-nav__title { background-color: var(--yellow-6); color: var(--black-900); padding-left: 24px; font-size: 20px; } .md-nav__icon:after { color: var(--black-900); } .md-nav--primary .md-nav__title[for="__drawer"], .md-nav__source { background-color: var(--yellow-6); color: var(--black-900); } iframe { height: 260px; } .md-sidebar--primary, .md-nav--primary { max-width: 242px; margin: 0; } .md-content { padding: 0; } .md-nav__link { margin: 0 !important; font-size: 14px !important; } .md-content__inner>.highlight { width: 100%; margin: 0; } .md-content__inner { padding: 24px; margin: 0; } }