/*
Theme Name: Dark Mode Astra (Addon)
Author: TUB Hamburg
Author URI: 
Description: 
Tags: custom-colors
Version: 1.0
Requires at least: x.0
Tested up to: x.0
Requires PHP: x.0
License: CC0
License URI: x
Text Domain: 
Template: Any (Astra Pro tested)
*/

/**
 * TUB.find: Customization for darkmode (2022-06-23)
 * Übernommen und angepasst für Wordpress: 2023-05-11
 * Siehe README.md
 */

/* Define some vanilla vars (which work without less) */

:root { }

/* Any element with the class "light--hidden"/"dark--hidden" will be hidden when the root element has the class light/dark */
:root.light .light--hidden, :root.dark .dark--hidden 
    { display: none; }

/* Vanilla variables by mode: light */
:root.light {
    --background-one: #ffffff;
    --background-two: #222222;

    --color-text-one: #000000;
    --color-text-two: #ffffff;

    --link-one: #006a81;
    --link-two: #009eac;
}
  
  /* Vanilla variables by mode: dark */
:root.dark {
    /* tub.find */
    --background-one: #111111;
    --background-two: #202020;
    --background-three: #505050;

    --color-text-one: #818181;
    --color-text-two: rgba(255,255,255,.88);
    --color-text-three: #000000;

    --link-one: #64E2FC;
    --link-two: #05C2D3;    
}

/* toggle link */
.color-mode__btn svg 
    { width: 25px; height: 25px; margin-left: 7px; fill: none; stroke: var(--link-one); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; float: right; }
.color-mode__btn:hover svg, .color-mode__btn:focus svg, .color-mode__btn:focus 
    { outline: none; fill: #fff7d6; }
.color-mode__btn:hover 
	{ cursor: pointer; }
/* Optionally hide text left from icon */
.color-mode__btn .mode_text { display: none;}

/* All wrapping elements need to have background color (when usign something like " filter: invert(100%) hue-rotate(180deg)")
body, .site-content, .site-footer, .site 
	{ background-color: white; }*/

/* Screen and by mode */
@media screen {
    /*
     * LIGHT MODE 
     */
    :root.light {
        /* Nothing special yet; base Vufind theme is "light only" */
    }


    /*
     * DARK MODE 
     */

     /*
     * START Von TUB-Egänzungen "Dark Mode for A" 
     */
    /* :root.dark a, :root.dark a svg {color: #5ED4EC !important;} */
/*
    :root.dark header a, :root.dark .entry-content a:where(:not(.wp-element-button)), :root.dark .ast-breadcrumbs a
        { filter: invert(100%) hue-rotate(180deg) brightness(1.2); }
    :root.dark .entry-content .rss_image a, :root.dark .entry-title a, #dbis_wrapper #link_sorting
        { filter: none; }
*/

    /* Link colors */
    :root.dark .ast-builder-menu-1 .menu-item > .menu-link, :root.dark .ast-breadcrumbs-wrapper .trail-items a, :root.dark .header-widget-area-inner a, :root.dark .ast-icon 
        { color: var(--link-one); }
    :root.dark svg.account-icon 
        { filter: invert(100%) hue-rotate(180deg) brightness(1.2); } /* @todo: check again later */
    :root.dark a, :root.dark .page-title 
        { color: var(--link-two); }       

    /* Backgrounds */
    :root.dark .ast-below-header-bar
        {background-color: var(--background-one)}
    :root.dark .ast-sticky-active .ast-below-header-bar
        {background-color: var(--background-three);} /* --ast-global-color-4} */
    :root.dark #wpadminbar
        {background-color: var(--background-three);}

    /* Images */
    :root.dark img { filter: brightness(0.9); }
	
	/* WP-DBIS */
	:root.dark li.dbis_category
		{background-color: var(--background-three);}
	:root.dark ul.dbis_category_sublist
		{background-color: var(--background-one);}
	
    /*
     * ENDE Von TUB-Egänzungen "Dark Mode for A" 
     */


    /*
     * START Von "Dark Mode for A" übernommen
     * (Experimentell)
     */
    :root.dark body, :root.dark .ast-separate-container, :root.dark input:not([type="submit"]), :root.dark textarea, :root.dark select, :root.dark .widget_search .search-form .search-field, :root.dark .ast-header-break-point .main-header-menu .sub-menu, :root.dark .ast-header-breadcrumb
        {color: var(--color-text-two); background-color: var(--background-one)}    
       
    :root.dark input[type="email"]:focus, :root.dark input[type="password"]:focus, :root.dark input[type="reset"]:focus, :root.dark input[type="search"]:focus, :root.dark input[type="tel"]:focus, :root.dark input[type="text"]:focus, :root.dark input[type="url"]:focus, :root.dark select:focus, :root.dark textarea:focus
    , :root.dark .ast-search-menu-icon .search-form
        {color: var(--color-text-one); background-color: var(--background-two)}

    :root.dark .ast-primary-header-bar, :root.dark .ast-separate-container .ast-article-post, :root.dark .ast-separate-container .ast-article-single:not(.ast-related-post), :root.dark .site-below-footer-wrap[data-section="section-below-footer-builder"], :root.dark .ast-separate-container .comments-title, :root.dark .ast-separate-container .ast-comment-list li, :root.dark .ast-separate-container .comment-respond, :root.dark .main-header-menu .sub-menu, :root.dark .ast-header-break-point .main-header-menu, :root.dark .wp-block-table.is-style-stripes tbody tr:nth-child(2n+1)
        {background-color: var(--background-one)}

    :root.dark pre
        {background: none}

    :root.dark .ast-primary-header-bar, :root.dark .ast-separate-container .ast-article-post, :root.dark .ast-separate-container .ast-article-single, :root.dark input, :root.dark textarea, :root.dark .widget_search .search-form .search-field, :root.dark .comments-area, :root.dark blockquote, :root.dark .page-links a .page-link, :root.dark body .gallery-caption, :root.dark body .gallery-icon, :root.dark body .gallery-caption, :root.dark table, :root.dark td, :root.dark th, :root.dark .wp-block-calendar tbody td, :root.dark .wp-block-calendar th, :root.dark .ast-header-break-point .ast-primary-header-bar, :root.dark select
        {border-color: var(--background-three)}

    :root.dark .site-title a, :root.dark .site-title a:focus, :root.dark .site-title a:hover, :root.dark .site-title a:visited, :root.dark .widget-title, :root.dark .entry-title a, :root.dark h1, :root.dark .entry-content h1, :root.dark h2, :root.dark .entry-content h2, :root.dark h3, :root.dark .entry-content h3, :root.dark h4, :root.dark .entry-content h4, :root.dark h5, :root.dark .entry-content h5, :root.dark h6, :root.dark .entry-content h6, :root.dark blockquote, :root.dark .ast-footer-copyright, :root.dark body .gallery-caption
        {color: var(--color-text-two)}

    :root.dark #wp-calendar th
        {color: var(--color-text-three)}	

    /* Logo a bit brighter */
    :root.dark .custom-logo-link img 
        { filter: brightness(1.4) contrast(1.2); } 
    :root.dark .ast-primary-header-bar, :root.dark .ast-header-break-point .ast-primary-header-bar
        { border-bottom: 1px solid #00c1d4; }

    /* Addon Anmeldung */
    :root.dark iframe {background-color: var(--color-text-two);}

    /*
     * END Von "Dark Mode for A" übernommen (teils; res auskomemntiert)
     */
}