dagshub-docs/theme/assets/stylesheets/extra.css

:root {
    --dark-900: #192E36;
    --dark-800: #23414D;
    --roundness: 10px;
    --md-admonition-icon--checkpoint: url('data:image/svg+xml;charset=utf-8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="checkpoint" class="svg-inline--fa fa-checkpoint fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M243.2 189.9V258c26.1 5.9 49.3 15.6 73.6 22.3v-68.2c-26-5.8-49.4-15.5-73.6-22.2zm223.3-123c-34.3 15.9-76.5 31.9-117 31.9C296 98.8 251.7 64 184.3 64c-25 0-47.3 4.4-68 12 2.8-7.3 4.1-15.2 3.6-23.6C118.1 24 94.8 1.2 66.3 0 34.3-1.3 8 24.3 8 56c0 19 9.5 35.8 24 45.9V488c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24v-94.4c28.3-12.1 63.6-22.1 114.4-22.1 53.6 0 97.8 34.8 165.2 34.8 48.2 0 86.7-16.3 122.5-40.9 8.7-6 13.8-15.8 13.8-26.4V95.9c.1-23.3-24.2-38.8-45.4-29zM169.6 325.5c-25.8 2.7-50 8.2-73.6 16.6v-70.5c26.2-9.3 47.5-15 73.6-17.4zM464 191c-23.6 9.8-46.3 19.5-73.6 23.9V286c24.8-3.4 51.4-11.8 73.6-26v70.5c-25.1 16.1-48.5 24.7-73.6 27.1V286c-27 3.7-47.9 1.5-73.6-5.6v67.4c-23.9-7.4-47.3-16.7-73.6-21.3V258c-19.7-4.4-40.8-6.8-73.6-3.8v-70c-22.4 3.1-44.6 10.2-73.6 20.9v-70.5c33.2-12.2 50.1-19.8 73.6-22v71.6c27-3.7 48.4-1.3 73.6 5.7v-67.4c23.7 7.4 47.2 16.7 73.6 21.3v68.4c23.7 5.3 47.6 6.9 73.6 2.7V143c27-4.8 52.3-13.6 73.6-22.5z"></path></svg>');
    --md-admonition-icon--illustration: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="video" class="svg-inline--fa fa-video fa-w-18" role="img" viewBox="0 0 576 512"><path fill="currentColor" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"/></svg>');
    --next-prev-button-bg: rgba(0, 0, 0, .1);
    --next-prev-button-bg-hover: rgba(0, 0, 0, .2);
    --next-prev-button-border: rgba(0, 0, 0, .2);
    --next-prev-button-text: rgba(0, 0, 0, .6);
    --next-prev-button-text-hover: rgba(0, 0, 0, .8);
    --md-header-text: rgba(255, 255, 255, .9);
    --md-header-text-hover: rgba(255, 255, 255, 1);

    --dags-card-text: rgba(0,0,0,1);
    --dags-card-divider-color: rgba(0,0,0,.05);
    --dags-card-shadow: #d4d4d5;
    --dags-card-shadow-hover-1: #c8c8c8;
    --dags-card-shadow-hover-2: #b4b4b4;
    --light-mode-display: initial;
    --dark-mode-display: none;
}

[data-md-color-scheme=slate] {
    --md-default-bg-color: hsl(189, 55%, 9%);
    --md-default-bg-color--light: hsla(189, 55%, 9%, 0.54);
    --md-default-bg-color--lighter: hsla(189, 55%, 9%, 0.26);
    --md-default-bg-color--lightest: hsla(189, 55%, 9%, 0.07);
    --md-code-bg-color: hsla(189, 55%, 5%, 1);
    --md-footer-bg-color: hsla(189, 55%, 5%, 1);
    --md-footer-bg-color--dark: hsla(189, 55%, 3%, 1);
    --next-prev-button-bg: rgba(255, 255, 255, .1);
    --next-prev-button-bg-hover: rgba(255, 255, 255, .2);
    --next-prev-button-border: rgba(255, 255, 255, .4);
    --next-prev-button-text: rgba(255, 255, 255, .8);
    --next-prev-button-text-hover: rgba(255, 255, 255, 1);

    --dags-card-text: rgba(255,255,255,1);
    --dags-card-divider-color: rgba(205, 234, 192, 0.29);
    --dags-card-shadow: #547760;
    --dags-card-shadow-hover-1: #72a283;
    --dags-card-shadow-hover-2: #89b497;
    --light-mode-display: none;
    --dark-mode-display: initial;
}

/* Typesetting */
.md-typeset h1, .md-typeset h2 {
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset h1 {
    color: var(--md-text-color);
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
}
.md-typeset h2 {
    font-weight: 400;
    padding-bottom: .25rem;
}

@media only screen and (min-width: 60em) {
    .md-nav--secondary {
        border-left: 3px solid var(--dark-900);
    }
    .md-search__input {
        border-radius: var(--roundness);
    }

    [data-md-toggle=search]:checked~.md-header .md-search__input {
        border-radius: var(--roundness) var(--roundness) 0 0;
    }
}

/*!* Styles in mobile or narrow screen mode *!*/
@media only screen and (max-width: 76.1875em) {
    html [data-md-color-primary="teal"] .md-nav--primary .md-nav__title--site {
        background: var(--dark-900);
    }
    .extra-links-sidebar .md-nav__link {
        color: rgba(255, 255, 255, 0.9);
    }
    .extra-links-sidebar .md-nav__link:hover {
        color: rgba(255, 255, 255, 1);
    }
    .extra-links-sidebar .md-nav-active .md-nav__link {
        background: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 1);
    }
}

@media only screen and (min-width: 76.19em) {
    main.md-main:before {
        background: var(--md-code-bg-color);
    }
    .md-content {
        background: var(--md-default-bg-color);
        margin-top: -1.5rem;
        padding-top: 1.5rem;
        min-height: calc(100vh - 379px); /* minus footer height */
    }
    .extra-links a {
        color: var(--md-header-text);
    }
    .extra-links a:hover {
        color: var(--md-header-text-hover);
    }
    .md-tabs__item.dropdown {
        color: var(--md-header-text);
    }
    .md-tabs__item.dropdown:hover {
        color: var(--md-header-text-hover);
    }
    .md-tab-active {
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.15);
    }
    .md-tab-active:hover {
        border-radius: 0.4rem;
        background: rgba(255, 255, 255, 0);
    }
    .md-tab-active a {
        color: rgba(255, 255, 255, 1);
    }
    /* Custom styles to make the sidebar a different color */
    main.md-main:before {
        content: "";
        z-index: -1;
        width: 50%;
        background: var(--md-code-bg-color);
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        pointer-events: none;
    }
    .md-nav--primary .md-nav__title {
        background: transparent;
        box-shadow: 0 0 0 0 transparent;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
    }
}


/*!* Header *!*/

[data-md-color-primary="teal"] .md-header {
    background: var(--dark-900);
}

/*!* Search *!*/
.md-search__output {
    border-radius: 0 0 var(--roundness) var(--roundness) !important;
}
.md-search__form {
    border-radius: var(--roundness);
}

[data-md-toggle=search]:checked~.md-header .md-search__form {
    border-radius: var(--roundness) var(--roundness) 0 0 !important;
}

/* Custom Sign In and Out Segments */
body[data-md-signed-in='false'] .show-when-signed-out,
body[data-md-signed-in='true'] .show-when-signed-in{
    visibility: visible !important;
}

body[data-md-signed-in='true'] .show-when-signed-out,
body[data-md-signed-in='false'] .show-when-signed-in {
    display: none !important;
    visibility: hidden !important;
}

/*!* Other *!*/
/*!* Custom Icons *!*/
.md-typeset .admonition.checkpoint,
.md-typeset details.checkpoint {
    border-color: rgb(43, 155, 70);
}
.md-typeset .checkpoint > .admonition-title,
.md-typeset .checkpoint > summary {
    background-color: rgba(43, 155, 70, 0.1);
    border-color: rgb(43, 155, 70);
}
.md-typeset .checkpoint > .admonition-title::before,
.md-typeset .checkpoint > summary::before {
    background-color: rgb(43, 155, 70);
    -webkit-mask-image: var(--md-admonition-icon--checkpoint);
    mask-image: var(--md-admonition-icon--checkpoint);
}
.md-typeset .admonition.illustration,
.md-typeset details.illustration {
    border-color: rgb(238, 121, 134);
}
.md-typeset .illustration > .admonition-title,
.md-typeset .illustration > summary {
    background-color: rgba(238, 121, 134, 0.1);
    border-color: rgb(238, 121, 134);
}
.md-typeset .illustration > .admonition-title::before,
.md-typeset .illustration > summary::before {
    background-color: rgb(238, 121, 134);
    -webkit-mask-image: var(--md-admonition-icon--illustration);
    mask-image: var(--md-admonition-icon--illustration);
}

/*!* Index Styles *!*/
@media only screen and (max-width: 40em) {
    #index-link-container .md-grid .dags-card {
        width: 100% !important;
        margin: 5px 0 !important;
    }
}

.dags-card {
    vertical-align: top;
    border-radius: var(--roundness);
    display: inline-block;
    text-align: left;
    margin: 0 10px 10px;
    width: 46%;
    min-height: 98px;
    overflow: hidden;
    padding: 7px 15px;
    -webkit-box-shadow: 0 1px 3px 0 var(--dags-card-shadow), 0 0 0 1px var(--dags-card-shadow);
    box-shadow: 0 1px 3px 0 var(--dags-card-shadow), 0 0 0 1px var(--dags-card-shadow);
}

.dags-card:hover {
    transform: scale(1.02);
    transition: all .1s ease-in-out;
    -webkit-box-shadow: 0 1px 5px 0 var(--dags-card-shadow-hover-1), 0 0 0 1px var(--dags-card-shadow-hover-2);
    box-shadow: 0 1px 5px 0 var(--dags-card-shadow-hover-1), 0 0 0 1px var(--dags-card-shadow-hover-2);
}

.dags-card h3 {
    font-size: 0.9rem;
    margin: 5px 0 0;
    font-weight: 900;
    color: var(--dags-card-text);
    display: inline-block;
    padding-left: 7px;
    vertical-align: top;
}

.dags-card a {
    color: black;
}

.dags-card .divider {
    border-bottom: 1px solid var(--dags-card-divider-color);
    margin: 10px -15px 12px;

}

.dags-card .content {
    margin: 0;
    font-weight: 400;
    color: var(--dags-card-text);
    min-height: 64px;
}

.dags-card .header {
    text-align: center;
    margin-top: 7px;
}

.light-mode {
    display: var(--light-mode-display);
}

.dark-mode {
    display: var(--dark-mode-display);
}

.dags-card img {
    height: 40px !important;
}

#swagger-ui .swagger-ui code {
    background-color: rgb(51, 51, 51);
    color: hsl(60, 30%, 96.1%);
}