/* This file overrides some of doxygen's defaults */
/*
    Some important notes:
    1. The reference design uses pt for fonts and px for sizes; this implementation replaces both with viewport units:
        - px with whatever's more appropriate out of vw and vh
        - pt with rems; root font size with vw
    2. On low resolutions fonts become too small if we naively scale with vw.
    Instead we set font-size using vw at the root and scale fonts using rems. On low resolution change the root font size
    and text will scale magically
    3. Some of more interesting classes doxygen puts:
        #titlearea is the top / left zone containing the logo
        #MSearchBox is the searchbox
        #side-nav is the container of the treeview
        #nav-tree is the tree-view
        #doc-content shows the current page
*/
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Regular.ttf');
}
@font-face {
    font-family: 'Roboto Light';
    src: url('fonts/Roboto/Roboto-Light.ttf');
}
@font-face {
    font-family: 'Roboto Light Italic';
    src: url('fonts/Roboto/Roboto-LightItalic.ttf');
}
@font-face {
    font-family: 'Roboto Medium';
    src: url('fonts/Roboto/Roboto-Medium.ttf');
}

* {
    text-shadow: none !important; /* Remove the text shadow that doxygen puts everywhere */
}

html {
    /* This allows us to keep the font sizes as they are set in the design (even though the design specifies them in pt
       (at least on resolutions higher than fullhd)
    */
    font-size: 0.065vw;
}

body {
    background-image: none !important;
    background-color: #eff6f6 !important;
    overflow: hidden;
}
table, div, p, dl {
    font-family: 'Roboto', Verdana, Geneva, Arial, sans-serif;
    font-size: 14rem;
    line-height: initial;
}

/* Scrollbars where they are needed */
#side-nav::-webkit-scrollbar-track, #doc-content::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}

#side-nav::-webkit-scrollbar, #doc-content::-webkit-scrollbar {
    width: 13px;
    background-color: transparent;
}

#side-nav::-webkit-scrollbar-thumb, #doc-content::-webkit-scrollbar-thumb {
    border-radius: 13px;
    background-color: rgba(255, 255, 255, 0.4);
}
#doc-content::-webkit-scrollbar-thumb {
    border-radius: 13px;
    background-color: rgba(13, 40, 70, 0.4);
}

/* Top / titlearea. See Documentation_Source/header for the HTML structure */
#titlearea {
    border-bottom: 1px solid white;
    position: relative;
}

#top, #titlearea, #side-nav, #MSearchBox {
    width: 18.2vw !important; /* 350 / 1920 = 18.2vw*/
    background-image:none !important;
    background-color:#0d2846 !important;
}
#top, #titlearea {
    height: 16.2vh !important; /* 175 / 1080 = 16.2vh*/
    max-height: 350px !important;
    top: 0 !important; /* Doxygen attempts to move this around with JS sometimes */
}

#projectname {
     /* We don't need the project name; the logo and version suffice */
    display: none;
}
/* Version */
#projectnumber {
    color: #f58020;
    font-family: 'Roboto Light';
    font-size: 20rem;
    display: block;
    position: relative;
    top: 30%;
    text-align: right;
}
/* Subtitle */
#projectbrief {
    color: #2aa5aa;
    font-family: 'Roboto Light';
    font-size: 20rem;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
}
/* Now remove the styles for the project logo */
#projectlogo {
    width: 80% !important;
    height: 80% !important;
    position: absolute;
    right: 0%;
    top: 0%;
}
#projectlogo a, #projectlogo img {
    width: 100%;
    height: 100%;
    display: block;
}

#projectlogo, #projectbrief, #projectnumber {
    margin-right: 10%;
}


/* Search box */
#MSearchBox {
    background-color: #f5a220 !important;
    height: 6.4vh; /* 75 / 1080 */
    position: relative;
    display: block;
    margin-top: 0px;
}

#MSearchSelect {
    display: none;
}

#MSearchField {
    width: 13.5vw; /* 298 / 1920 */
    height: 3.7vh; /* 40 / 1080 */
    background-color: transparent;
    background-image: none;
    border: 1px solid white;
    border-radius: 50vh; /* Setting border-radius to absurd values makes a capsule. */
    font: 20rem 'Roboto';
    color: white !important;
    position: absolute;
    padding-left: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0 !important;
}

#MSearchBox .left {
    background-image: url('icon_magnifier.png');
    background-position: 2em 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: 2vw 50%;
}
#MSearchBox .right {
    background-image: url('icon_arrow.png');
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-position: center right;
    margin-right: 2vw;
}

/* Sidebar / tree navigation */

/* Container for the treeview and searchbox */
#side-nav {
    height: 77.4vh !important; /* 100vh - heightOf(#top) - heightOf(#MSearchBox)*/
    padding: 0 !important;
    overflow: auto;
    top: initial !important; /* Doxygen attempts to move this around with JS sometimes */
}

#nav-tree {
    background-color: inherit;
    background-image: none;
    -webkit-overflow-scrolling : touch; /* iOS 5+ */
    height: initial !important;
    overflow: hidden;
}
#nav-tree .item {
    background-image: none !important;
}

#nav-tree .children_ul .item {
    padding-left: 10px;
}
#nav-tree .children_ul .children_ul .item {
    padding-left: 20px;
}
#nav-tree .children_ul .children_ul .children_ul .item {
    padding-left: 30px;
}
#nav-tree .children_ul .children_ul .children_ul .children_ul .item {
    padding-left: 40px;
}
#nav-tree .children_ul .children_ul .children_ul .children_ul .item {
    padding-left: 50px;
}
#nav-tree .children_ul .children_ul .children_ul .children_ul .children_ul .item {
    padding-left: 60px;
}

#nav-tree a {
    font-family: 'Roboto Light';
    font-size: 20rem;
    color: #2aa5aa;
}
#nav-tree .children_ul a {
    font-size: 14rem;
    color: #2aa5aa;
}
#nav-tree .children_ul .children_ul a {
    font-size: 14rem;
    color: #9aadae;
}

#nav-tree .selected a {
    color: #f58020 !important;
}

#nav-tree .arrow {
    padding-left: 0 !important;
    background-image: url('icon_plus.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 0.75em !important;
    margin-right: 0.25em;
    display: inline-block;
}
#nav-tree .arrow.arrow-down {
    background-image: url('icon_minus.png');
}
#nav-tree-contents {
    margin-left: 0.5em;
}

.ui-resizable-handle {
    display: none !important;
}


/* Page contents */

#doc-content {
    background-color: #eff6f6;
    font: 32rem 'Roboto Light';
    color: #17b4d6;
    padding-left: 1vw;
    padding-right: 1vw;
    height: 100vh !important;
    position: relative;
    margin-top: -22.6vh; /* 100vh - heightOf(#top) - heightOf(#MSearchBox)*/
    margin-left: 18.2vw !important; /* widthOf(#top) */
}

.title {
    font: 42rem 'Roboto Light';
    color: #0d2846;
}

/* Style the line under the header */
div.header {
    border: none;
    background-color: #eff6f6;
}
.header-line-1 {
    height: 3px;
    width: 30%;
    background-color: #0d2846;

}
.header-line-2 {
    height: 1px;
    width: 100%;
    background-color: #d3dfdf;
    position: relative;
}

#doc-content .toc {
    background-color: #a6dcde;
    background-image: url('tableOfContents.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 15vw;
    border: none;
    position: relative;
    z-index: 999;
}
#doc-content .toc h3 {
    font: 22rem 'Roboto Light Italic' !important; /* (22pt * 1.25px/pt) / 1920px */
    color: #0d2846 !important;
    text-align: center;
}
#doc-content .toc a {
    font: 14rem 'Roboto Light' !important;
    color: #0d2846 !important;
}
div.toc li {
    background-image: url('icon_arrow_toc.png');
    background-size: 0.8em;
    background-position: -0.1em 0.5em;
}

.contents {
    color: #0d2846;
}

.textblock {
    margin-bottom: 4vh;
}

/* Treat the first paragraph of a page, before its first subsection as an introduction and highlight it */
.textblock > p:first-child {
    font: 16rem 'Roboto Light Italic';
    color: #f56b20;
}
/* Also force that style over any links there */
.textblock > p:first-child a {
    color: #f56b20;
}

#doc-content h1, #doc-content h2, #doc-content h3, #doc-content h4, .heading {
    font-family: 'Roboto Light';
    color: #17b4d6;
}
#doc-content h1, .heading {
    font-size: 32rem;
}
#doc-content h2 {
    font-size: 28rem;
}
#doc-content h3 {
    font-size: 24rem;
}
#doc-content h4 {
    font-size: 20rem;
}

/* Page subcontent - code, images, lists etc. */
/* Disable bullets and numbering and add them manually using counter() and unicode chars
   to style the bullets and numbering. If only list-style-color was a thing...
 */
.textblock ol, .textblock ul {
    font: 14rem 'Roboto';
    list-style-type: none;
}
.textblock ol {
    counter-reset: ol-list-1;
}
.textblock ol ol{
    counter-reset: ol-list-2;
}
.textblock ol li:before {
    color: #ff7708;
    counter-increment: ol-list-1;
    content: counter(ol-list-1) ".";
    left: -1em;
    position: absolute;
    text-align: right;
}
.textblock ol ol li:before {
    color: #ff7708;
    counter-increment: ol-list-2;
    content: counter(ol-list-2) ".";
    left: -1em;
    position: absolute;
    text-align: right;
}
.textblock ul li:before {
    color: #ff7708;
    content: '\2022' !important; /* The specificity of the ol selector is above is higher, so this important to overrule it */
    counter-increment: none !important;
    left: -1em;
    position: absolute;
    text-align: right;
}
.textblock ul ul li:before {
    content: '\25E6' !important;
}
.textblock li {
    color: #0d2846;
    position: relative;
}

.textblock a, .textblock a:visited, .memberdecls a {
    font: 14rem 'Roboto Medium';
    color: #0d2846;
}

dl.note {
    border-color: #f5b620;
}
dl.warning {
    border-color: crimson;
}

div.ah, .icona {
    font: 22rem 'Roboto Light';
    color: #eff6f6;
    background-image: none;
    background-color: #f5b620;
    border: none;
    border-radius: 15%;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    text-transform: capitalize;
    box-shadow: none;
}
.icona {
    font-size: 14rem;
    width: 32px;
    height: 32px;
    background-color: #f5b620 !important;
    color: #eff6f6 !important;
    margin-right: 3px;
}

.image img {
    box-shadow: 0px 0px 0px 1px #d3dfdf, 0px 0px 0px 4px #eff6f6;
    border-radius: 5px;
    max-width: 100%;
}
.image {
    text-align: left;
}

/* Code container */
.fragment {
    background-color: #fff !important;
    border: 1px solid #17b4d6;
    white-space: pre
}

/* API Ref */

.memtitle {
    display: none; /* Hide member titles as they are pretty much useless visually though they are used for anchoring */
}

.memberdecls {
    width: 100%
}
.memberdecls td {
    overflow: hidden;
}
.memTemplParams {
    padding-left: 14.75%;
}

/* Disable / overrule all the ugly style from the Member description+ */
.memproto {
    background-image: none;
    background-color: transparent;
    box-shadow: none;
    border: 1px solid #17b4d6;
    color: #0d2846;
}
.memdoc {
    background-image: none;
    background-color: #FFFFFF;
    box-shadow: none;
    border: 1px solid #17b4d6;
    color: #0d2846;
}

.directory tr.even {
    background-color: #a4dee0 /* Unspecified in the mockup; taken from the table of contents background */ !important;
}
.directory .arrow {
    cursor: pointer;
}

.navpath ul {
    padding-top:5px !important;
    margin-top:-10px !important;
    height:35px !important;
    border-left:0px;
}

/* Search results */

.searchresult {
    border-bottom: 1px solid white !important;
    background-color: transparent;
    margin-bottom: 1vh;
}
#searchresults ul {
    list-style-type: none;
}
#searchresults a {
    color: #f56b20 !important;
}
.searchresult-highlight {
    font-family: 'Roboto Medium';
}

/* Media queries - this needs to be last as otherwise it will fail due to the sheer amount of !important directives */
@media all and  (max-width: 1440px) {
    html {
        font-size: 0.08vw;
    }
}
@media all and (max-width: 1200px) {
    html {
        font-size: 0.8pt; /* At this size there's no point in being responsive anymore */
    }
}
@media all and (min-width: 1600px) and (max-height: 800px) {
    #projectbrief {
        display: none;
    }
}
@media all and (max-height: 600px) {
    #projectbrief {
        display: none;
    }
}
@media all and (max-width: 1200px), all and (max-height: 900px) {
    #projectnumber {
        top: 14%;
    }
    #projectbrief {
        font-size: 15rem;
    }
}
@media all and (max-width: 960px) {
    #projectnumber {
        font-size: 16.5rem;
    }
}
@media all and (max-width: 860px) {
    #top, #side-nav {
        display: none !important;
    }
    #MSearchBox {
        width: 100vw  !important;
        height: 10vh;
        min-height: 30px;
    }
    #MSearchBox .right {
        background-position: 88vw 50%;
    }
    #MSearchBox .left {
        background-position: 11vw 50%;
    }
    #MSearchField {
        width: 75vw;
        height: 7.5vh;
        min-height: 22.5px;
    }
    #doc-content {
        margin-left: 0vw !important;
        margin-top: 0vh !important;
    }
    .textblock {
        margin-bottom: 20vh;
    }
    .toc {
        display: none !important;
    }
}