/* ==UserStyle==
@name           Office Dark
@version        1.0.1
@author         Hussein Esmail
@description    `A dark theme for the website Office.com`
@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_office.user.css
==/UserStyle== */

@-moz-document domain("office.com") {
    :root {
        --color-bg: #141414;            /* Default background color */
        --color-fg: #f8f8f8;            /* Default text color */
        --color-bg-secondary: #2f2f2f;
        --color-bg-tertiary: #3e3e3e;
        --color-bg-lighter: #eeeeee;
        --color-bg-table: #31363a;
        --color-fg-secondary: #eeeeee;
        --color-fg-button: black;
        --color-selected: #3f3f3f;
        --color-inprogress: darkcyan;
        --table-hover-color: #222222;
        --search-bar-color: white;
        color-scheme: dark;                 /* Used to get dark scroll bars */
    }

    .plannerApp, .sideNav, .ms-Callout-main, .plannerAppCallout, .o365cs-base, .form-content-container, .office-form-body {
        background-color: var(--color-bg) !important;
    }

    h1, h2, h3, h4, h5, h6, tspan, label, input, span, div.name, [class^="overflowInitialsIcon"], .plannerApp, .sideNav, .selected, span.leftNavItem, .ms-Icon, .welcome, .tileName, .ms-TooltipHost, .value, .primaryTextSectionTitle, .pivotLink, .title, .dueDate, .addTaskText, .addColumn, .ms-Checkbox-text, .label, .htmlContent, .commenterName, .timestamp, .ms-TextField-field, .ms-Callout-main, .text-format-content, .office-form-footer-block, .office-form-notice-password {
        /* Main text color */
        color: var(--color-fg) !important;
    }

    .ms-TextField-fieldGroup, button.header {
        background-color: var(--color-bg-tertiary) !important;
    }

    .rollupChart {
        background-color: var(--color-bg-lighter) !important;
    }

    img, span.leftNavItem, .ms-Icon, .linkContents {
        background-color: transparent;
    }

    li.selected {
        background-color: var(--color-selected) !important;
    }

    .planCard, div.container, .addButton, .taskEditor-dialog-container, .taskEditor-dialog-content, .toggle-immersive-reader-button, input, textarea, .button-content, .office-form-footer, .ms-ContextualMenu-itemText {
        background-color: var(--color-bg-secondary) !important;
    }

    .color-inprogress {
        color: var(--color-inprogress) !important;
    }

}

@-moz-document domain("login.microsoftonline.com"),
domain("login.live.com") {

    :root {
        --color-bg: #141414;            /* Default background color */
        --color-fg: #f8f8f8;            /* Default text color */
        --color-bg-secondary: #2f2f2f;
        --color-bg-tertiary: #3e3e3e;
        --color-bg-lighter: #eeeeee;
        --color-bg-table: #31363a;
        --color-fg-secondary: #eeeeee;
        --color-fg-button: black;
        --color-selected: #3f3f3f;
        --color-inprogress: darkcyan;
        --table-hover-color: #222222;
        --color-bg-search: white;
        color-scheme: dark;                 /* Used to get dark scroll bars */
    }

	.middle, /* Login background */
	.sign-in-box, /* Self-explanatory */
	.ext-title,
	#displayName,
	#idBoilerPlateText
	{
		background-color: var(--color-bg);
		color: var(--color-fg);
	}

	.tile-menu div[role="button"] img, /* Menu dots and profile picture */
	.background-logo /* "Outlook" header image */
	{
		background-color: white;
	}

	.full-height
	{
		border: none !important;
		padding: 0 !important;
		margin: none !important;
	}

	input[name="passwd"]
	{
		background-color: var(--color-bg-search) !important;
		color: white !important;
	}
}