/* ==UserStyle==
@name           WorkInCulture Dark Theme
@version        1.0.0
@author         Hussein Esmail
@description    `A dark theme template for WorkInCulture.ca`
@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_workinculture.user.css
==/UserStyle== */

@-moz-document domain("workinculture.ca") {
    
    :root {
        --color-bg: #141414;            /* Default background color */
        --color-fg: #f8f8f8;            /* Default text color */
        --color-fg-secondary: #eeeeee;
        --color-fg-button: black;
        --color-bg-table: #31363a;
        --color-url: orange;
        --color-menu-outlines: white;
        --table-hover-color: #222222;
        --color-bg-search: white;
        color-scheme: dark;                 /* Used to get dark scroll bars */
        --font-all: -apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif; /* Same font as StackOverflow */
    }

    html, body, div, p,
    #jobSponsoredList .itemRow
    {
        /* Background color */
        background-color: var(--color-bg) !important;
        font-family: var(--font-all);
    
    }

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

    a, a *
    {
        color: var(--color-url) !important;
        text-decoration: none !important;
    }

    input {
        /* Text inputs */
        color: var(--color-fg-button) !important;
        background-color: var(--color-bg-search);
    }

    ul#menuElem li
    {
        
        border: solid var(--color-menu-outlines) 1px;
        border-radius: 5px;
        padding: 0px;
        margin: 5px;
    }

    ul#menuElem li a
    {
        padding: 0px 5px;
    }

    #mid {
        background: unset;
    }


    #mainNav li.HighLighted, /* Menu tab of the one you're in */
    #mainNav li.HighLighted a,
    #mainNav ul li:hover,
    #mainNav ul li a:hover
    {
        background-color: orange;
        color: black !important;
    }

    p.msg.login-info.hidden-xs /* "Login in to post a job or course" message */
    {
        /* Elements to hide */
        display: none;
    }

    #breadcrumb /* "The Job Board" header wrapper div */
    {
        height: unset;
    }

    #breadcrumb .link /* "The Job Board" header */
    {
        position: unset;
        padding-left: 10px; /* Instead of the default 140px */
    }

    #jobDetailTopLinks
    {
        border: none;
        padding: 0px;
        margin-bottom: 10px;
    }

    #jobDetailTopLinks .back a /* Left arrow image beside the "Back to the Job Board" URL at top of the page */
    {
        background: none;
        padding: 0px;
        margin-top: 0px;

    }

    a:hover 
    {
        text-decoration: underline !important;
    }

    .btn, .btn-primary, /* Login button above nav bar */
    .btn:hover, 
    .btn:focus, 
    .btn-primary:hover, 
    .btn-primary:focus
    .btn.secondary, /* Register button above nav bar */
    .btn-primary.secondary,
    .btn.secondary:hover, 
    .btn.secondary:focus, 
    .btn-primary.secondary:hover, 
    .btn-primary.secondary:focus,
    .btn.secondary, 
    .btn-primary.secondary
    {
        background-color: unset;
        border-color: var(--color-menu-outlines);
    }

    #jobSponsoredList
    {
        border: 1px white solid;
    }

    .form-control /* Dropdown filters on Job Board listing page */
    {
        height: unset;
        padding: 0px;
    }

    select
    {
        color: white !important;
        background-color: #555 !important;
    }
}