/*

    patch css elements of daux.io blue theme
    version 2025-01-21

*/

:root {

    /* Axels Overrides */
    --color-text: #567;
    --link-color: #37a;
    --brand-color: var(--color-secondary);
    --brand-background: var(--body-background);
    --hr-color: none;

    --pager-background-color: #f8fafc;
    --pager-hover-background-color: #f8ecf4;

    --search-field-background: none;
    --search-field-border-color: none;

    --sidebar-background:var(--body-background);
    --sidebar-border-color: none;
    --sidebar-link-active-background: #f4f8f8;
    
    --table-border: #eee;
    --table-header-background: #d8e8e8;
    --table-background-odd: #f8f7f5;
    --toc--inner-border-color: none;
    --code-tag-background-color: #f0f4f8;
    --code-tag-border-color: rgba(0,0,0,0.05);

    /* Axels custom values */
    --axel_bg-toc: var(--body-background);
    --axel_bg-toc-head: #f8f8f8;
    --axel_bg-toc-border: #8ce;
    --axel_bg-toc-border: #eee;
    --axel_color-toc:#89a;

    --axel_brand-background: none;
    --axel_brand-pre-background: #8ce;
    --axel_brand-pre-background-hover: #adf;
    --axel_sidebar-link-active-background: linear-gradient(20deg,#fdf4e8, #f8ecf4,#f0f4ff);

    --axel_h1_header: none;

    --axel_h1: #aaa;
    --axel_h1-bg: none;
    --axel_h1-bottom: 3px solid none;
    --axel_h2: #123;
    --axel_h2-bg: none;
    --axel_h2-bottom: 2px solid #8ce;
    --axel_h3: #456;
    --axel_h3-bg: none;
    --axel_h3-bottom: 1px solid #ddd;
    --axel_h4: #8ac;
    --axel_h4-bg: none;
    --axel_h4-bottom: 1px dashed #ddd;

    --axel_hero_bg: #f8f8f8;
    --axel_hero_bg: linear-gradient(20deg, #f8ecf4, #f0faf8,#f0f4ff,#fdf4e8);
    --axel_hero_shadow: 0.2em 0.2em 2em #cef;
    --axel_img-border: 2px dashed #cbc;

    --axel_nav-bg: #fcfcfc;
    --axel_nav-buttomborder: #ddd;

    --axel_pre-background: #f8f7f5;
    --axel-article-nav-border-top: 0px dotted #ddd;
}

.dark {

    /* Axels Overrides */
    --body-background: #181c28;
    --color-text: #789;
    --link-color: #6bd;

    --brand-color: #c92;
    --brand-background: var(--body-background);
    --hr-color: none;
    --code-tag-background-color_: #bcc;

    --pager-background-color: #123;
    --pager-hover-background-color: #111;

    --search-field-background: none;
    --search-field-border-color: none;

    --sidebar-background:var(--body-background);
    --sidebar-border-color: none;
    --sidebar-link-active-background: #333;
    --sidebar-link-color: #89a;
    --sidebar-link-hover-background: #182830;

    /* Axels custom values */
    --axel_bg-toc: var(--body-background);
    --axel_bg-toc-head: #333;
    --axel_bg-toc-border: #256;
    
    --axel_brand-background: none;
    --axel_brand-pre-background: #69a;
    --axel_brand-pre-background-hover: #6ab;
    --axel_sidebar-link-active-background: #424;

    --axel_h1_header: none;

    --axel_h1: #777;
    --axel_h1-bg: none;
    --axel_h1-bottom: none;
    --axel_h2: #484;
    --axel_h2-bg: none;
    --axel_h2-bottom: 2px solid #256;
    --axel_h3: #838;
    --axel_h3: #476;
    --axel_h3-bg: none;
    --axel_h3-bottom: 1px solid #333;
    --axel_h4: #c74;
    --axel_h4: #689;
    --axel_h4-bg: none;
    --axel_h4-bottom: 1px dashed #333;

    --axel_hero_bg: none;
    --axel_hero_shadow: 0.2em 0.2em 2em #245;

    --axel_img-border: 2px dashed #656;

    --axel_nav-bg:#242424;
    --axel_nav-buttomborder: #555;
    --axel_pre-background: #bcc;

    --axel-article-nav-border-top: 0px dotted #234;
}

/* ---------- left side ---------- */

a.Brand::before {
	background: var(--axel_brand-pre-background);
    border-radius: 100%;
	color: #fff;
    font-family: arial;
	font-weight: bold;
	padding: 0.3em 0.3em;
	content: 'AH';
    margin-right: 0.4em;
    float: left;
}
a.Brand:hover::before {
	background: var(--axel_brand-pre-background-hover);
}
a.Brand {
	background: var(--axel_brand-background );
	font-size: 200%;
    height: 4em;
}


.Nav__item--open > a, .Nav__item--active > a {
	background: var(--axel_sidebar-link-active-background);
}

/* ---------- page header: breadcrumb ---------- */

.Page__header{border: none;}
.Page__header a{color: var(--axel_h1_header);}
.Page__header h1{font-size: 1.3em;}

/* ---------- page content ---------- */

h2::before{ content: ': : '; opacity: 0.5;}
h3::before{ content: '> '; opacity: 0.4;}
h4::before{ content: '_ '; opacity: 0.3;}
h5::before{ content: '. '; opacity: 0.2;}

.s-content{padding-top: 1em;}
.s-content h1{background: var(--axel_h1-bg); color: var(--axel_h1); font-size: 200%; font-weight:bold; margin-bottom: 2em; margin-top: 0em; border-bottom: var(--axel_h1-bottom);}
.s-content h2{background: var(--axel_h2-bg); color: var(--axel_h2); font-size: 180%; font-weight:bold; margin-top: 4em; border-bottom: var(--axel_h2-bottom); padding: 0.2em}
h2:first-of-type {margin-top: 0em;}
.s-content>h3{background: var(--axel_h3-bg); color: var(--axel_h3); font-size: 150%; font-weight:bold; margin-top: 5em; border-bottom: var(--axel_h3-bottom);}
.s-content>h4{background: var(--axel_h4-bg); color: var(--axel_h4); font-size: 130%; font-weight:bold; margin-top: 5em; border-bottom: var(--axel_h4-bottom);}

.s-content img{border: var(--axel_img-border); border-radius: 1.5em; padding: 1em; margin: 1em 0;}
.s-content pre{
    background: var(--axel_pre-background);
    border-radius: 1em;
    margin: 0 -15px 20px;
    padding: 1em;
}

/* FIX smaller fnt size in tables */
.s-content table {
	font-size: 1em;
}

.s-content h3 code{border: none; background: none; }

article nav{border-top: var(--axel-article-nav-border-top); margin: 8em 0 5em;}
.Pager li > a{
    border: none;
    padding: 1em 2em;
}

.s-content code {
	background: var(--code-tag-background-color);
	border: 1px solid var(--code-tag-border-color);
}

/* ---------- classes ---------- */

.required{color:#a42;}
.optional{color:#888;}

div.hero{background: var(--axel_hero_bg);border-radius: 2em; border: 10px solid rgba(0,0,0,0.01); padding: 5em 2em;text-align: center;
    box-shadow: var(--axel_hero_shadow);
} 
div.hero h2{background: none; _border: none; text-align: center; font-size: 300%; margin: 0 0 2em;}
div.hero h2::before{content: none;}
div.hero p.center{text-align: center;}

/* ---------- TOC ---------- */
@media(min-width:1700px){
    .TableOfContentsContainer{
        position: fixed;
        right: 2em;
        top: 3em;
    }
    .TableOfContentsContainer__content{
        border: none;
    }
    .TableOfContentsContainer h4{
        display: none;  
    }
}

.TableOfContentsContainer{
    background-color: var(--axel_bg-toc);
    padding: 0.5em;
    max-height: 95%;
    overflow: auto;
}

.s-content .TableOfContentsContainer h4{
    background-color: var(--axel_bg-toc-head);
    border-top-left-radius: 0.7em;
    border-bottom: 2px solid var(--axel_bg-toc-border);
	font-size: 1.2em;
    font-weight: bold;
    margin: 0;
    padding: 0.3em 0.7em;
}

.TableOfContentsContainer__content {
	border-width: 1px;
	font-size: 0.5em;
}
ul.TableOfContents ul{
	list-style-type: none;
    padding-left: 1em;
}
ul.TableOfContents a {
	color: var(--axel_color-toc);
}
ul.TableOfContents a:hover {
	text-decoration: underline;
}

.EditOn a::before{
    content: '✏️ ';
}

.Links a[href^="https://github.com/"]::before {
    content: '🌐 ';
}

.Links a[href^="https://git-repo.iml.unibe.ch/"]::before {
    content: '🌐 ';
}

.Links a[href^="https://www.axel-hahn.de/docs"]::before {
    content: '📗 ';
}