/* ==UserStyle==
@name           Echo360 Dark
@version        1.0.1
@author         Hussein Esmail
@description    `A dark theme template for websites`
@namespace      https://github.com/hussein-esmail7/userstyles
@homepageURL    https://github.com/hussein-esmail7/userstyles
@supportURL     https://github.com/hussein-esmail7/userstyles/issues
@updateURL      https://raw.githubusercontent.com/hussein-esmail7/userstyles/main/src/dark_echo360.user.css
==/UserStyle== */

@-moz-document domain("echo360.ca") { 
    :root {
        --color-bg: #141414; 
        --color-highlight: green;
        --color-timeline: lightblue;
        --color-timeline-hover: white;
        --color-fg: #f8f8f8;
        --color-text-secondary: #eeeeee;
        --color-bg-table: #31363a;
        --color-table-hover: #222222;
        --transparent-color: transparent;
        --search-bar-color: white;
        --size-video-table: 98%;
        color-scheme: dark;                 /* Used to get dark scroll bars */
    }

    html, [class^="Content"], header, .main-content, .main-content * {
        /* Background color */
        background-color: var(--color-bg) !important;
    }

    h1, h2, h3, h4, h5, h6, a, strong, label, .detDesc, div, div#sortby, .comment, #comments, #detailsouterframe *, .comment, #details *, dl *, span {
        /* Text color */
        color: var(--color-fg) !important;
    }

    input, .echo-input-group, select {
        background-color: var(--color-bg-table) !important;
        color: var(--search-bar-color) !important;
    }

    .https_form {
        background-color: var(--search-bar-color);
    }
    [class^="SearchAndFilter"], [id^="video-card"], [class^="CardWrapper"], [tabindex="-1"], .echo-select__control, #mediaSortField-direction, button, .media-icons *, .group-contents * {
        background-color: var(--color-bg-table) !important;
    }
    
    .contents-wrapper {
        width: var(--size-video-table)
    }
    
    .highlight {
        background-color: var(--color-highlight) !important;
    } 
    
    .timeline-bg, img {
        background-color: transparent !important;
    }
    .progress, .volume-menu-bar-indicator {
        background-color: var(--color-timeline) !important;
    }
    .cursor {
        background-color: var(--color-timeline-hover) !important;
    }

}