// SOURCE FILE

/* If the above line does not say "SOURCE FILE", then do not edit. It */
/* means this file is generated from [sass style.scss] */

/* CSS file for the Ocaml API.  San Vu Ngoc 2019 */

// TODO: the ocamldoc output of Functors like in
// compilerlibref/4.08/Arg_helper.Make.html
// is not easy to style... without breaking other tables.
   
@import "common";
@charset "UTF-8";

// tables are difficult to style, be careful.
// These settings should apply to the main index tables
// (like "index_values.html"), which do not have any particular class.
// These tables have two columns.
.api>table {
    word-break: break-word; 
    // this is unfortunately due to some very long names in Internal modules
    td.module,
    td:first-child {
	width: 33%;
    }
    td:nth-child(2) {
	width: 65%;
    }
    td[align="left"] { 
	// for the "Parameter" column of module signatures like
	// Arg_helper.Make.html, which unfortunately have no class
	// either.
	word-break: normal;
    }
    td[align="left"]:first-child {
	width: 1%;
    }
}

.api {
    // font-size: 16px;
    // font-family: $font-sans;
    // text-align: left;
    // color: #333;
    // background: #FFFFFF;
    table { 	
	// tables are difficult to style, be careful	
	border-collapse: collapse;
	border-spacing: 0;
	thead {
	    background: rgb(228, 217, 211);
	}
	/* must be same as <pre>: */
	background-color: #ede8e6;
	width: 100%;
	td {
	    padding-left: 1ex;
	    padding-right: 1ex;
	    /*float: left;*/
	}
	/* add some room at the end of the table */
	tr:last-child td {
	    padding-bottom: 7px;
	}
    }
    // Tables are used for describing types, in particular union types:
    table.typetable {
	width: 100%;
	word-break: normal;
	box-shadow: none;
	td {
	    float: left;
	}
	td:nth-child(2) {
	    width: 37%;
	    code {
		white-space: pre-line;
	    }
	}
	td:last-child {
	    width: calc(100% - 1.3em);
	    // cf: CamlinternalFormatBasics.html
	    // the 1.3em is related to the 1em below
	}
	td:first-child {
	    width: 1em;
	}
	td:nth-child(4).typefieldcomment {
	    /* this should be the column with the type */
	    width: 60%;
	    /* not optimal, see: Format.html#symbolic
	    but leaving it automatic is not always good either: see: Arg.html */
	}
    }

    // for functor signature
    table.paramstable {
	word-break: normal;
	td {
	    code {
		white-space: pre-wrap;
	    }	    
	}
	td:first-child, td:nth-child(2) {
	    width: 1em; // second column should contain only
			// ":". First one will adapt to size.
	}	
    }
    
    .sig_block {
	padding-left: 1em;
	background-color: #ede8e6;
	// PROBLEM the sig_block ends too soon, it should actually
	// include the "end)" line ==> REPORT THIS
	// (eg: compilerlibref/Arg_helper.html)
	pre {
	    margin-top: 0;
	    background: none;
	    border-left: 0;
	}
    }
    pre .sig_block {
	margin-bottom: 0; // see above
	border-left: 0;
    }
	
    *, *:before, *:after { 
	box-sizing: border-box; 
    }
    
    @include content-frame;

    /* Basic markup elements */
    
    b, strong {
	font-weight: 600;
    }
    i, em {
	font-style: italic;
    }
    sup {
	vertical-align: super;
    }
    sub {
	vertical-align: sub;
    }
    sup, sub {
	font-size: 12px;
	line-height: 0;
	margin-left: 0.2ex;
    }
    pre {
	margin-top: 0.8em;
	margin-bottom: 0;
    }
    p, ul, ol {
	margin-top: 0.5em;
	margin-bottom: 1em;
    }
    ul, ol {
	list-style-position: outside
    }
    ul>li {
	margin-left: 2rem;
    }
    ol>li {
	margin-left: 27.2px;
    }
    li>*:first-child {
	margin-top: 0
    }

    /* Text alignments, this should be forbidden. */

    .left {
	text-align: left;
    }
    .right {
	text-align: right;
    }
    .center {
	text-align: center;
    }
    /* Links and anchors */
    a {
	text-decoration: none;
	color: #92370A;
	/* box-shadow: 0 1px 0 0 #d8b68b; */
    }
    a:hover {
	box-shadow: 0 1px 0 0 #92370A;
    }
    td a:hover {
	background: white;
    }
    /* Linked highlight */
    *:target {
	/*box-shadow: 0 0px 0 1px rgba(255, 215, 181, 0.8) !important;*/
	border-radius: 1px;
	/*border-bottom: 4px solid rgb(255, 215, 181);*/
	background-color: #ffd6b5;
	z-index: 0;
	@if $ocamlorg {
	    /* Because of fixed banner in the ocaml.org site, we have to offset the targets. See https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header */
	    padding-top: 85px;
	    margin-top: -85px;
	}
    }

    
    h2:target {
	/* background: linear-gradient(to bottom, rgb(253, 252, 252) 0%, rgba(255, 215, 181, 0.3) 100%) !important; */
	/*	transition: 300ms; this prevents margin-top:-80 to work... */
    }

    *:hover>a.section-anchor {
	visibility: visible;
    }

    a.section-anchor:before {
	content: "#"
    }

    a.section-anchor:hover {
	box-shadow: none;
	text-decoration: none;
	color: #555;
    }

    a.section-anchor {
	visibility: hidden;
	position: absolute;
	/* top: 0px; */
	/* margin-left: -3ex; */
	margin-left: -1.3em;
	font-weight: normal;
	font-style: normal;
	padding-right: 0.4em;
	padding-left: 0.4em;
	/* To remain selectable */
	color: #d5d5d5;
    }

    .spec > a.section-anchor {
	margin-left: -2.3em;
	padding-right: 0.9em;
    }

    .xref-unresolved {
	color: #92370A
    }
    .xref-unresolved:hover {
	box-shadow: 0 1px 0 0 #CC6666;
    }

    /* Section and document divisions.
    Until at least 4.03 many of the modules of the stdlib start at .h7,
    we restart the sequence there like h2  */

       h1, h2, h3, h4, h5, h6, .h7, .h8, .h9, .h10 {
	font-family: $font-sans;
	font-weight: 400;
	margin: 0.5em 0 0.5em 0;
	padding-top: 0.1em;
	line-height: 1.2;
	overflow-wrap: break-word;
    }

    h1 {
	margin-top: 1.214em;
	margin-bottom: 19px;
	font-weight: 500;
	font-size: 1.953em;
	box-shadow: 0 1px 0 0 #ddd;
    }

    h2 {
	font-size: 1.563em;
	margin: 1em 0 1em 0
    }

    h3 {
	font-size: 1.25em;
    }

    small, .font_small {
	font-size: 0.8em;
    }

    h1 code, h1 tt {
	font-size: inherit;
	font-weight: inherit;
    }

    h2 code, h2 tt {
	font-size: inherit;
	font-weight: inherit;
    }

    h3 code, h3 tt {
	font-size: inherit;
	font-weight: inherit;
    }

    h3 code, h3 tt {
	font-size: inherit;
	font-weight: inherit;
    }

    h4 {
	font-size: 1.12em;
    }


    /* Preformatted and code */

    tt, code, pre {
	font-family: $font-mono;
	font-weight: 400;
    }

    pre {
	border-top: 1px solid #e69c7f;
	white-space: pre-wrap;
	word-wrap: break-word;
	padding-left: 1ex;
    }

    p code, li code { /* useful ? */
	background-color: #ebf2f9;  /*#f6f8fa;*/
	color: #0d2b3e;
	border-radius: 3px;
	padding: 0 0.3ex;
	white-space: pre-wrap; // utile seulement dans la table index_values? (attention à bootstrap.css)
    }

    pre code {
	background-color: inherit;
    }

    p a > code {
	color: #92370A;
    }

    /* Code blocks (e.g. Examples) */

    pre code.ocaml {
	font-size: 0.893rem;
    }

    /* Code lexemes */

    .keyword {
  font-family: $font-sans;
	font-weight: 500;
	color: inherit;
    }

    /* Anchors */

    a.anchor{
        position: absolute;
        right: 100%;
        padding-right: 0.4em;
        opacity: 0;
        box-shadow: none;
    }

    a.anchor:before{
        content: "#";
    }

    a.anchor:hover{
        opacity: 1 !important;
    }

    pre:hover a.anchor, :hover>a.anchor{
        opacity: 0.5;
    }

    .anchored {
        position: relative;
    }

    /* Module member specification */

    .spec:not(.include), .spec.include details summary {
	background: linear-gradient(to left, rgb(253, 252, 252) 0%, rgb(234, 246, 250) 100%);
	border-radius: 3px;
	border-left: 4px solid #5c9cf5;
	border-right: 5px solid transparent;
	padding: 0.35em 0.5em;
    }

    .spec.include details summary:hover {
	background-color: #ebeff2;
    }

    dl, div.spec, .doc, aside {
	margin-bottom: 20px;
    }

    dl > dd {
	padding: 0.5em;
    }

    dd> :first-child {
	margin-top: 0;
    }

    dd > p:first-child > code:first-child {
	color: teal;
    }

    dl:last-child, dd> :last-child, aside:last-child, article:last-child {
	margin-bottom: 0;
    }

    dt+dt {
	margin-top: 15px;
    }

    section+section, section > header + dl {
	margin-top: 25px;
    }

    .spec.type .variant {
	margin-left: 2ch;
    }
    .spec.type .variant p {
	margin: 0;
	font-style: italic;
    }
    .spec.type .record {
	margin-left: 2ch;
    }
    .spec.type .record p {
	margin: 0;
	font-style: italic;
    }

    div.def {
	margin-top: 0;
	text-indent: -2ex;
	padding-left: 2ex;
    }

    div.def+div.doc {
	margin-left: 1ex;
	margin-top: 2.5px
    }

    div.doc>*:first-child {
	margin-top: 0;
    }

    /* The elements other than heading should be wrapped in <aside> elements. */
    /* heading, body>p, body>ul, body>ol, h3, h4, body>pre { */
    /*   margin-bottom: 30px; */
    /* } */

    /* Collapsible inlined include and module */

    .spec.include details {
	position: relative;
    }

    .spec.include details:after {
	z-index: -100;
	display: block;
	content: " ";
	position: absolute;
	border-radius: 0 1ex 1ex 0;
	right: -20px;
	top: 1px;
	bottom: 1px;
	width: 15px;
	background: rgba(0, 4, 15, 0.05);
	box-shadow: 0 0px 0 1px rgba(204, 204, 204, 0.53);
    }

    .spec.include details summary {
	position: relative;
	margin-bottom: 20px;
	cursor: pointer;
	outline: none;
    }

    /* FIXME: Does not work in Firefox. */
    details summary::-webkit-details-marker {
	color: #888;
	transform: scaleX(-1);
	position: absolute;
	top: calc(50% - 5px);
	height: 11px;
	right: -29px;
    }

    td.doc *:first-child {
	margin-top: 0em
    }

    /* @ tags */

    ul.at-tag {
	list-style-type: none;
	margin-left: 0;
	padding: 0;
    }

    ul.at-tag li {
	margin-left: 0;
	padding: 0;
    }

    ul.at-tag li p:first-child {
	margin-top: 0
    }

    /* FIXME remove */

    span.at-tag {
	font-weight: bold
    }

    span.warning,
    .at-tag.deprecated {
	font-weight: normal;
	color: #8eaf20;
    }

    span.warning {
	margin-right: 1ex;
    }

    .at-tag.raise {
	font-weight: bold;
    }

    /* FIXME random other things to review. */

    .heading {
	margin-top: 10px;
	border-bottom: solid;
	border-width: 1px;
	border-color: #DDD;
	text-align: right;
	font-weight: normal;
	font-style: italic;
    }

    .heading+.sig {
	margin-top: -20px;
    }

    .heading+.parameters {
	margin-top: -20px;
    }

    /* Odig package index */

    .by-name ol, .by-tag ol, .errors ol {
	list-style-type: none;
	margin-left: 0;
    }

    .by-name ol ol, .by-tag ol ol {
	margin-top: 0;
	margin-bottom: 0
    }

    .by-name li, .by-tag li, .errors li {
	margin-left: 0;
    }

    .by-name .version {
	font-size: 10px;
	color: #AAA
    }

    .by-name nav {
	margin-bottom: 10px
    }

    .by-name nav a {
	text-transform: uppercase;
	font-size: 18px;
	margin-right: 1ex;
	color: #222;
	display: inline-block;
    }

    .by-tag nav a {
	margin-right: 1ex;
	color: #222;
	display: inline-block;
    }

    .by-tag>ol>li {
	margin-top: 10px;
    }

    .by-tag>ol>li>span, .by-tag>ol>li>ol, .by-tag>ol>li>ol>li {
	display: inline-block;
	margin-right: 1ex;
    }

    /* Odig package page */

    .package nav {
	display: inline;
	font-size: 14px;
	font-weight: normal;
    }

    .package .version {
	font-size: 14px;
    }

    h1+.modules, h1+.sel {
	margin-top: 10px
    }

    .sel {
	font-weight: normal;
	font-style: italic;
	font-size: 14px;
	margin-top: 20px;
    }

    .sel+.modules {
	margin-top: 10px;
	margin-bottom: 20px;
	margin-left: 1ex;
    }

    .modules {
	margin: 0;
    }

    .modules .module {
	min-width: 8ex;
	padding-right: 2ex
    }

    .package.info {
	margin: 0;
    }

    .package.info td:first-child {
	font-style: italic;
	padding-right: 2ex;
    }

    .package.info ul {
	list-style-type: none;
	display: inline;
	margin: 0;
    }

    .package.info li {
	display: inline-block;
	margin: 0;
	margin-right: 1ex;
    }

    #info-authors li, #info-maintainers li {
	display: block;
    }

    /* lists in the main text */
    ul.itemize {
	list-style: none;
    }

    ul.itemize li::before {
	content: "▶";
	color: $logocolor;
	margin-right: 4px;
	margin-left: -1em;
    }

    /* Sidebar and TOC */

    /*.toc ul:before */
    .toc_title
    {
	display: block;
	/*content: "Contents";*/
	/* text-transform: uppercase; */
	margin: 1.414em 0 0.5em;  
    }

    .toc_title a {
	color: #777;
	font-size: 1em;
	line-height: 1.2;
	font-weight: 500;
    }

    .toc {
	@include nav-toc;
	&.brand {
	    @include brand;
	}
    }

    .toc input#api_search {
	width: 85%;
	font-family: inherit;
    }

    .toc #search_results {
	font-size: smaller;
	ul {
	    li {
		margin-bottom: 0;
		
	    }
	    a {
		display: inline-block;
		padding-left: 0;
	    }
	}
    }

    .ocaml {
	background: linear-gradient(to left, white 0%, rgb(243, 247, 246) 100%);
    }

    span.arrow {
	font-size: 20px;
	line-height: 8pt;
	font-family: $font-mono;
    }
    header dl dd, header dl dt {
	display: inline-block;
    } 
    pre {
	background-color: #ede8e6;
    }

    #search_results li.match::before {
	content: "▶";
	font-size: smaller;
	color: $logocolor;
	float: left;
	margin-left: -3ex;
    }

    code.caml-example,
    div.caml-example, div.toplevel  {
	/*    background: linear-gradient(to left, white 0%, rgb(243, 247, 246) 100%); */
    }

    div.caml-output.ok,
    code.caml-output.ok,
    span.c006 {
	color: #045804;
    }

    code.caml-output.error,
    div.caml-output.error {
	color: orangered;
    }
    .tutorial span {
	color: $logocolor;
    }
    
    ul.tutos_menu {
	font-family: $font-sans;
	text-align: right;
	list-style: none;
    }

    ul.tutos_menu li.active a {
	color: black;
    }
    
    nav.toc {

    }

    span.c003 {
	font-family: $font-mono;
	background-color: #f3ece6;
	border-radius: 6px;
    }

    div.caml-example.toplevel div.caml-input::before,
    div.caml-example.toplevel code.caml-input::before
    {
	content:"#";
	color:#888;
    }

    span.c004 {
	color: #888;
    }

    span.c009 {
	font-style: italic;
    }

    code span.keyword,
    .caml-input span.kw {
	font-weight: 500;
	color: #444;
    }

    code span.keywordsign {
	color:#92370a;
    }
    
    .caml-input span.kw1 {
	font-weight: 500;
	color: #777;
    }

    code span.constructor,
    .caml-input span.kw2 {
	color: #8d543c;
    }

    .caml-input span.numeric {
	color: #0086b3;
    }

    .caml-input span.id {
	color: #523b74;
    }

    code span.string,
    .caml-input span.string {
	color: #df5000;
    }

    .caml-input span.comment {
	color: #969896;
    }

    .copyright {
	margin-top: 1em;
	font-size: smaller;
    }

    .dt-thefootnotes {
	float: left;
    }

    ul.info-attributes {
	margin-top: 0ex;
	margin-bottom: 1.5em;
	list-style: none;
    }

    /* pour l'API */
    hr {
	margin-bottom: 2em;
	visibility: hidden;
    }

    code.type {
	color: #8d543c;
    }

    td div.info p {
	margin: 0;
	box-shadow: 0 1px 0 0 #ddd;
    }
    td div.info { /* index page */
	padding-left: 0;
    }
    
    > #search_results { 
	margin-top: 2em; 
    }
    
    input#api_search {
	font-family: inherit;
    }
    
    #search_results {
	ul {
	    list-style: none;
	    li {
		margin-bottom: 4px;
	    }
	}

	li div.info { /* index page */
	    display: block;
	    max-width: 70%;
	    padding-left: 4em;
	    margin-bottom: 1ex;
	}

	li div.info p { /* index page */
	    margin: 0;
	}
    }

    span.search_comment {
	vertical-align: bottom;
    }

    .search_comment .hide {
	height: 0;
	visibility : hidden;
	opacity: 0
    }
    .search_comment #search_help {
	overflow: hidden;
	font-size: smaller;
	background-color: #ede8e6;
	transition: all 0.5s;
    }
    #help_icon {
	margin-left: 1ex;
	vertical-align: inherit;
	cursor: help;
    }

    
    td div.info div.info-desc {
	margin-bottom: 0;
    }

    div.info div.info-desc {
	margin-bottom: 2ex;
	padding-left: 2em;
    }

    div.info.top div.info-desc {
	padding-left: 0;
	padding-bottom: 1em;
	box-shadow: 0 1px 0 0 #ddd;
    }

    td div.info {
	margin: 0;
    }

    div.info-deprecated {
	padding-top: 0.5em;
    }

    .info-desc p {
	margin-bottom: 0;
	code {
	    white-space: normal;
	}
    }

    td.typefieldcomment > code {
	display: none; /* this only applies to "(*" and "*)" */
    }

    td.typefieldcomment {
	padding: 0;
    }

    td.typefieldcomment p {
	color: #776558;
    }

    td.typefieldcomment:nth-child(3), /* should apply to "(*" */
    td.typefieldcomment:last-child /* should apply to "*)" */
    {
	display: none; 
    }

    .api_search img {
	height: 1em;
	vertical-align: middle;
	margin-right: 1em;
    }
    
    nav .api_search img {
	margin-right: 0;
    }

}


#footer {
    margin-left: 26ex;
}


/* When the navigation bar is collapsed */
// this should match with ocamlorg.css
@media only screen and (max-width: 979px) {
    @include mobile;
    .container, .api {
	margin-left: auto;
	margin-right: auto;
    }
    @include sidebar-button;
    header {
	@include header-mobile;
    }

    .api>table {
	box-shadow:   0px 3px 9px 3px #ddd;
	margin-bottom: 1em;
	padding-bottom: 2px;
	td:nth-child(2) { 
	    width: 59%; 
	}
    }
    
    .api {
	*:target {
	    padding-top: 0px;
	    margin-top: 0px;
	}

	.toc {
	    @include nav-toc-mobile;
	}
	
	table td {
	    padding-left: 2%;
	}

	table td:first-child {
	    padding-right: 0;
	}

	table.typetable {
	    box-shadow: none;
	    td:nth-child(2) {
		white-space: normal;
		/*width: 41%;*/
		width: auto;
		max-width: calc(100% - 3ex);
	    }
	    tr td:nth-child(4).typefieldcomment {
		/*width: 50%;*/
		width: auto;
		margin-left: 3ex;
		word-break: break-word;
		float: right;
	    }
	    td:last-child {
		width: auto;
	    }
	    tr td:first-child {
		padding-right: 0;
		width: auto;
	    }
	}

	.info-desc p code {
	    word-break: break-word;
	}
	
	td div.info div.info-desc {
	    padding-left: 0;
	}
	span.search_comment {
	    display: block;
	}
    }
    .api>table td:first-child {
	width: 40%;
    }

    .api { 
	code { 
	    word-break: break-word;
	    white-space: pre-wrap;
	}
    }

    #footer {
	margin-left: auto;
    }   
}



/* When the navigation bar has reduced size */
@if $ocamlorg {
    @media (max-height: 600px) and (min-width: 980px) {
	.api *:target {
	    padding-top: 60px;
	    margin-top: -60px;
	}
	.api nav.toc {
	    top: 46px;
	}
    }
}

