@mescius/dsimageviewer/docs/assets/custom.css

Document Solutions Image Viewer

:root {
    --brand-color: #577C9B;
    --brand-logo: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDQyIDEwNDIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PGcgaWQ9IkxheWVyMSI+PC9nPjxnPjxwYXRoIGQ9Ik00ODIuOTAyLDIxNy45ODFjMjAuMDQ5LC0xOC42NjMgMjc2LjA3MywxNjUuNDY3IDI3MC42NjIsMzAwLjczNmMtNS4wMTIsMTI1LjMwNyAtMjYwLjYzOCwzNDcuMjE3IC0yOTAuNzExLDMyMC43ODVjLTE1LjAzNywtNDUuMTEgNjUuMjk4LC0xMzIuOTE5IDcwLjE3MiwtMzMwLjc2M2MyLjc4OSwtMTU3LjQ2MSAtNjUuNjg4LC0yNzYuMjY5IC01MC4xMjMsLTI5MC43NThaIiBzdHlsZT0iZmlsbDojZmZmOyIvPjxwYXRoIGQ9Ik0zMzcuNTQ3LDUyOC43NDFjLTQuNDExLDEyMS45MzIgLTExLjY3OSwyNTkuODA4IDI1LjA2MSwyNTUuNjI2YzQ4LjI1MywwLjU5NiA2Ny43OCwtNzguMDkyIDY1LjE1OSwtMTcwLjQxN2MtMy42NTgsLTE4Ny44NDQgLTMxLjQxLC0zMDkuMTk2IC02Ny44NiwtMzc2Ljc0Yy0wLjMxMSwtMC41NjEgLTAuOTUxLC0wLjg1MiAtMS41NzgsLTAuNzE5Yy0wLjYyNywwLjEzMyAtMS4wOTMsMC42NjEgLTEuMTQ5LDEuMjk5Yy03LjQ0Myw4NS43NjkgLTE0LjE4MSwxODAuMzI5IC0xOS42MzQsMjkwLjk1MVoiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PC9nPjwvc3ZnPg==);
}

/* Overrides and hidden stuff */

/* 
 * Left sidebar.
 * Completely useless when right nav sidebar is visible
 */
div.site-menu {
	grid-area: none;
	display: none;
}

/*
 * Hierarchy block in entity declaration.
 * Hidden since shows even internal classes which we don't want to.
 */
.tsd-panel.tsd-hierarchy {
    display: none;
}

/* Page layout */

html {
    overflow: hidden;
}

div.page-menu {
    padding: 0;
    margin-top: 24px;
}

div.col-content {
    padding: 0;
    margin-top: 24px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}

div.tsd-page-navigation {
    border-left: 1px solid var(--color-background-active);
    padding: 0 4px;
    min-height: calc(100% - 24px);
}

header.tsd-page-toolbar {
    min-width: 100vw;
    background: var(--brand-color) !important;
}

/* Toolbar */

div.tsd-toolbar-contents {
    padding: 0;
    box-sizing: border-box;
    background: unset;
}

div.tsd-toolbar-contents a,
div.tsd-toolbar-contents a:hover,
div.tsd-toolbar-contents a:active {
    color: #fff !important;
}

div.tsd-toolbar-contents::before {
    content: var(--brand-logo);
    width: 32px;
    height: 32px;
    display: block;
}


div.tsd-toolbar-contents div.tsd-theme-toggle,
div.tsd-toolbar-contents select#tsd-theme,
div.tsd-toolbar-contents button.tsd-widget
{
    color: #fff;
}

div.tsd-toolbar-contents select#tsd-theme > option {
    color: #fff;
    background-color: var(--brand-color);
}

div.tsd-toolbar-contents select#tsd-theme,
div.tsd-toolbar-contents button.tsd-widget {
    border-color: #ffffff75 !important;
}

div.tsd-toolbar-contents select#tsd-theme:active,
div.tsd-toolbar-contents button.tsd-widget:active {
    outline: none;
}

div.tsd-toolbar-contents select#tsd-theme:hover,
div.tsd-toolbar-contents button.tsd-widget:hover {
    background: #ffffff75;
}

/* Index page (all entities summary) */

dl.tsd-member-summaries {
	display: grid;
}

dl.tsd-member-summaries dd.tsd-member-summary {
	display: none;
}

details.tsd-panel-group {
    margin: 24px 0;
}

/* Entity declaration */

.tsd-panel {
    margin-bottom: 24px;
}

.tsd-panel.tsd-member {
    border: 1px solid var(--color-background-active);
    border-radius: 8px;
    padding: 16px;
}

.tsd-panel.tsd-member > h3 {
    margin: 8px 0 16px 0;
    padding: 0;
}

/* Code blocks (examples etc.) */

code, pre {
    border-radius: 8px;
}

pre button {
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: transparent;
    outline: none;
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
    border-radius: 4px;
    transition: all .2s ease-in-out;
}

pre button:hover,
pre button:active {
    cursor: pointer;
    background: var(--brand-color);
    color: #fff;
}

/* Responsive layout */

@media (min-width: 576px) {
    .container,.container-sm {
        max-width:540px
    }
    div.container-main {
	    grid-template-areas: "content";
	    grid-template-columns: 1fr;
    }
    dl.tsd-member-summaries {
	    grid-template-columns: 1fr 1fr;
    }
    div.page-menu {
        grid-area: none;
        display: none;
    }
}

@media (min-width: 768px) {
    .container,.container-md,.container-sm {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .container,.container-lg,.container-md,.container-sm {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl {
        max-width:1000px
    }
}

@media (min-width: 1300px) {
    div.container-main {
	    grid-template-areas: "content toc";
	    grid-template-columns: 2fr 1fr;
    }
    dl.tsd-member-summaries {
	    grid-template-columns: 1fr 1fr 1fr;
    }
    div.page-menu {
        grid-area: toc;
        display: block;
    }
}

@media (min-width: 1400px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
        max-width:1200px
    }
}