::-moz-selection { background-color:var(--blue-level-4); color:var(--dark-level-7); } ::selection { background-color:var(--blue-level-4); color:var(--dark-level-7); } ::backdrop { background-color:rgba(0,0,0,0.4); } html { background-color:light-dark(var(--light-level-4), var(--dark-level-5)); } body { background-color:light-dark(var(--light-level-4), var(--dark-level-5)); color:light-dark(var(--dark-level-7), var(--light-level-5)); } body.login { background-color:var(--light-level-4); color:var(--dark-level-7); } body.login #login, body.login .language-switcher { background-color:var(--light-level-1); } body.login .language-switcher { background-color:transparent; border-top-color:var(--light-level-6); } body.login form { background-color:transparent; } body.login #loginform input { background-color:var(--light-level-1); border-color:var(--blue-level-8); color:var(--dark-level-7); } body.login #mo_saml_button::after { border-bottom-color:var(--light-level-6); } body.login #mo_saml_login_sso_button { background-color:var(--green-level-6); border-color:var(--green-level-6); } body.login #mo_saml_login_sso_button:hover { background-color:var(--green-level-4); } body.login input[type="submit"] { background-color:var(--blue-level-8) !important; border-color:var(--blue-level-8) !important; color:var(--light-level-1); } body.login #loginform { background-color:var(--light-level-1); } body.login #loginform input[type="submit"] { background:var(--blue-level-8); color:var(--light-level-1); } body.login .button:hover { color:var(--light-level-1) !important; } input, button, .button, select, textarea { background-color:var(--light-level-1); border-color:var(--blue-level-7); color:var(--dark-level-7); } input, textarea, select { background-color:light-dark(var(--light-level-1), var(--dark-level-6)); border-color:light-dark(var(--blue-level-7), var(--dark-level-1)); color:light-dark(var(--dark-level-7), inherit); } button, button[type="reset"], input[type="submit"], .button, input[type="reset"] { background-color:var(--blue-level-7); color:var(--light-level-1); } input[type="submit"], .button.submit { background-color:var(--green-level-6) !important; border-color:var(--green-level-6) !important; } input[type="submit"]:hover, .button.submit:hover { background-color:var(--green-level-4) !important; } button:hover, .button:hover { background-color:var(--blue-level-6); color:var(--light-level-1); } input[disabled], button[disabled] { background:var(--dark-level-8); border-color:var(--dark-level-8); color:var(--light-level-5); } input[disabled]:hover, input[disabled]:active, input[disabled]:focus { background:var(--dark-level-8) !important; color:var(--light-level-5) !important; } article.row, .article.row { background-color:light-dark(var(--light-level-1), var(--dark-level-6)); border-color:light-dark(var(--light-level-7), var(--dark-level-4)); } main aside .column { border-color:light-dark(var(--light-level-6), var(--dark-level-7)); } main aside .button { background-color:var(--transparent); color:inherit; } main aside .button:hover { background-color:light-dark(var(--light-level-3), var(--dark-level-7)); color:inherit; } main aside #toggleBtnFavorites[aria-pressed="true"] { background-color:var(--blue-level-7); color:var(--light-level-1); outline-color:var(--light-level-1); } nav { color:light-dark(var(--dark-level-1), inherit); } dialog { background-color:light-dark(var(--light-level-1), var(--dark-level-5)); border-color:light-dark(var(--light-level-7), var(--dark-level-7)); color:light-dark(inherit, var(--light-level-5)); } table th, table td { border-color:light-dark(inherit, var(--dark-level-9)); } table tr:nth-child(even) { background-color:light-dark(var(--light-level-2), var(--dark-level-7)); } table tr:nth-child(odd) { background-color:light-dark(inherit, var(--dark-level-6)); border-color:light-dark(var(--light-level-4), var(--dark-level-9)); } table tr:focus-within td { background-color:light-dark(inherit, var(--dark-level-5)); } table thead tr:first-child { background-color:light-dark(var(--light-level-5), var(--dark-level-4)); border-color:light-dark(var(--light-level-5), var(--dark-level-9)); } table tbody tr:hover { background-color:light-dark(var(--light-level-2), var(--dark-level-7)); border-color:light-dark(var(--light-level-4), var(--dark-level-1)); } table[data-table-type="results"] tr:nth-child(even), table[data-table-type="results"] tr:nth-child(odd) { background-color:light-dark(inherit, var(--transparent)); border-color:light-dark(var(--light-level-2), var(--dark-level-7)); } table[data-table-type="results"] th:hover { background-color:light-dark(var(--light-level-2), var(--dark-level-7)); border-color:light-dark(var(--light-level-2), var(--dark-level-1)); } table[data-table-type="results"] th::after { color:var(--dark-level-7); } table[data-table-type="results"] tr:focus-within td { background-color:transparent; } table[data-table-type="results"] thead th::after { color:inherit; } table[data-table-type="results"] thead tr:first-child { background-color:light-dark(var(--transparent), var(--dark-level-4)); border-color:light-dark(var(--light-level-4), var(--dark-level-7)); } table[data-table-type="results"] tbody tr:hover { background-color:light-dark(var(--light-level-2), var(--dark-level-7)); border-color:light-dark(var(--light-level-2), var(--dark-level-1)); } button[role="switch"] { background-color:var(--light-level-1); } button[role="switch"][aria-checked="true"] { background-color:var(--blue-level-7); } button[role="switch"] span { background-color:var(--blue-level-7); } button[role="switch"][aria-checked="true"] span { background-color:var(--light-level-1); outline-color:var(--blue-level-7); } a { color:light-dark(var(--blue-level-6), var(--blue-level-4)); } a:hover { color:light-dark(var(--dark-level-7), var(--blue-level-2)); } a:focus, button:focus { outline-color:var(--orange-level-4); } a[target="_blank"]:not(:empty)::after, a[href$=".pdf"]::after, .anchor::after { background-color:currentcolor; } span.button a { color:var(--light-level-1); } footer#mainFooter { background-color:light-dark(var(--blue-level-8), var(--dark-level-4)); border-color:light-dark(var(--blue-level-8), var(--dark-level-1)); color:var(--light-level-1); } footer#mainFooter a { color:var(--light-level-1); } footer#mainFooter .column:first-of-type { background-color:light-dark(var(--light-level-1),var(--dark-level-4)); } *[data-button-role="cancel"] { background-color:var(--red-level-7) !important; border-color:var(--red-level-7) !important; } *[data-button-role="cancel"]:hover { background-color:var(--red-level-6) !important; } *[contenteditable="true"] { border-color:var(--light-level-7); } *[data-required="true"]::after { color:light-dark(var(--red-level-4), var(--red-level-3)); } *[role="note"], *[role="alert"], .errorMessage, .successMessage, .infoMessage, .warningMessage { color:var(--dark-level-7); } *[role="alert"], .errorMessage { background-color:var(--red-level-1); border-color:var(--red-level-2) !important; } .successMessage { background-color:var(--green-level-1); border-color:var(--green-level-2) !important; } .warningMessage { background-color:var(--yellow-level-1); border-color:var(--yellow-level-2) !important; } .infoMessage { background-color:var(--blue-level-2); border-color:var(--blue-level-3) !important; } .loadingSpinner { border-color:var(--light-level-3); border-top-color:var(--blue-level-7); } .postMessage { background-color:light-dark(var(--blue-level-1), var(--blue-level-3)); border-left-color:light-dark(var(--blue-level-5),var(--blue-level-5)); } .sectionNumber { color:var(--dark-level-9); } .notification::before { color:var(--light-level-1); } .notificationInfo { border-color:light-dark(var(--purple-level-4), var(--purple-level-2)); color:light-dark(var(--purple-level-4), var(--purple-level-2)); } .notificationInfo::before { background-color:light-dark(var(--purple-level-4), var(--purple-level-2)); color:light-dark(var(--light-level-1), var(--dark-level-5)); } .notificationWarning { border-color:light-dark(var(--red-level-4), var(--red-level-3)); color:light-dark(var(--red-level-4), var(--red-level-3)); } .notificationWarning::before { background-color:light-dark(var(--red-level-4), var(--red-level-3)); color:light-dark(var(--light-level-1), var(--dark-level-5)); } .iconBefore::before, .iconAfter::after { background-color:transparent; } .postMessage .iconBefore { color:var(--blue-level-9); } .postMessage .iconBefore::before { background-color:var(--blue-level-9); } .iconDocument::before { background-color:light-dark(var(--dark-level-1), var(--light-level-5)); color:light-dark(inherit, var(--light-level-5)); } .iconProtected { border-color:light-dark(var(--dark-level-1), var(--light-level-5)); color:light-dark(var(--dark-level-1), var(--light-level-5)); } .iconProtected::before { background-color:light-dark(var(--dark-level-1), var(--light-level-5)); } .iconLocked { border-color:light-dark(var(--dark-level-1), var(--light-level-5)); color:light-dark(inherit, var(--light-level-5)); } .iconLocked::before { background-color:light-dark(var(--dark-level-1), var(--light-level-5)); color:light-dark(inherit, var(--light-level-5)); } .iconCategory::before { background-color:light-dark(var(--dark-level-1), var(--light-level-5)); color:light-dark(inherit, var(--light-level-5)); } .iconTableOfContents::before { background-color:var(--light-level-1); } .iconHierachy::before { background-color:light-dark(var(--dark-level-1), var(--light-level-5)); color:light-dark(inherit, var(--light-level-5)); } .toggleBtnText { color:var(--dark-level-7); } .box { background-color:light-dark(var(--light-level-1), var(--dark-level-6)); border-color:light-dark(var(--light-level-6), var(--dark-level-1)); } .metaSectionContainer { background-color:light-dark(var(--light-level-3), var(--dark-level-3)); border-bottom-color:light-dark(var(--light-level-6), var(--dark-level-7)); } .metaSectionContainer .box.warning { background-color:light-dark(var(--red-level-1), var(--red-level-3)); color:var(--dark-level-1); } .buttonCollection .button { background-color:var(--blue-level-7); color:var(--light-level-1); } .buttonCollection .button:hover { background-color:var(--blue-level-6); color:var(--light-level-1); } .pagination .page-numbers { background-color:light-dark(var(--transparent), var(--dark-level-6)); border-color:light-dark(var(--blue-level-7), var(--dark-level-1)); color:light-dark(inherit, var(--blue-level-7)); } .pagination .current { background-color:light-dark(var(--blue-level-7), var(--dark-level-8)); color:var(--light-level-1); } .pagination a:hover { background-color:light-dark(var(--blue-level-6), var(--dark-level-8)); color:var(--light-level-1); } .categoryTreeContainer { background-color:light-dark(var(--light-level-2),var(--dark-level-7)); border-color:light-dark(var(--light-level-6), var(--dark-level-7)); } .categoryTreeContainer ul { background-color:light-dark(var(--light-level-6), var(--dark-level-5)); } .categoryTreeContainer .category a { border-left-color:var(--blue-level-6); } .categoryTreeContainer .category button { background-color:var(--blue-level-7); color:var(--light-level-1); } .categoryTreeContainer .category button:hover { background-color:light-dark(var(--blue-level-6), var(--dark-level-6)) !important; color:var(--light-level-1); } .categoryTreeContainer .category .category { background-color:light-dark(var(--light-level-7), var(--dark-level-3)); border-color:light-dark(var(--light-level-6), var(--dark-level-3)); } .categoryTreeContainer .category li { background-color:light-dark(var(--light-level-2), var(--dark-level-7)); } .select-button { background-color:light-dark(var(--light-level-1), var(--dark-level-6)); border-color:light-dark(var(--blue-level-7), var(--dark-level-1)); color:inherit; } .select-button:hover { background-color:var(--light-level-2); color:inherit; } .arrow { border-left-color:transparent; border-right-color:transparent; border-top-color:light-dark(var(--dark-level-1), var(--light-level-1)); } .select-dropdown { background-color:light-dark(var(--light-level-1), var(--dark-level-6)); border-color:light-dark(var(--light-level-6), var(--dark-level-1)); color:inherit; } .select_box label::after { background-color:var(--dark-level-9); color:var(--light-level-1); } .select_box label:hover, .select_box label:focus { background-color:var(--blue-level-6); color:var(--light-level-1); } .select_box input:checked ~ label { background-color:var(--blue-level-7); color:var(--light-level-1); } .select_box input.select-filtering { background-color:light-dark(var(--light-level-4), var(--dark-level-8)); } .gallery ul { border-color:var(--light-level-6); } .lightboxContainer { background:rgba(0,0,0,0.8); } .lightboxContainer nav { background-color:rgba(0,0,0,0.8); border-color:var(--dark-level-1); } .lightboxContainer ul li img { border-color:var(--light-level-6); } .lightboxContainer .button:hover { background-color:var(--dark-level-7); } #sideNav { background-color:light-dark(var(--blue-level-8), var(--dark-level-2)); color:var(--light-level-1); } #sideNav header { color:var(--light-level-5); } #sideNav nav ul li a { color:var(--light-level-1); } #sideNav nav ul li a:hover, #sideNav nav li.current-menu-item a { background-color:light-dark(var(--blue-level-7), var(--dark-level-7)); color:var(--light-level-1); } #sideNav .iconBefore a::before { background-color:var(--light-level-1) !important; } #sideNav[data-collapsed="true"] nav ul li a { color:light-dark(var(--blue-level-8), var(--dark-level-2)); } #sideNav[data-collapsed="true"] nav ul li a:hover, #sideNav[data-collapsed="true"] nav li.current-menu-item a { color:light-dark(var(--blue-level-7), var(--dark-level-7)); } #headerBanner { background-color:light-dark(var(--light-level-1), var(--dark-level-4)); border-bottom-color:light-dark(var(--light-level-6), var(--dark-level-1)); } #headerBanner .button { background-color:light-dark(var(--light-level-1), var(--dark-level-4)); border-color:light-dark(var(--light-level-6), var(--dark-level-1)); color:inherit; } #headerBanner .button:hover { background-color:light-dark(var(--light-level-3), var(--dark-level-7)); } #headerBanner .iconBefore::before { background-color:light-dark(var(--dark-level-7), var(--light-level-5)); } #headerBanner #quick_search_form input, #headerBanner #quick_search_form select, #headerBanner #quick_search_form *[role="separator"] { background-color:light-dark(var(--light-level-4), var(--dark-level-6)); border-color:light-dark(var(--light-level-6), var(--dark-level-1)); } #headerBanner #quick_search_form span { color:light-dark(var(--dark-level-9), var(--light-level-6)); } #headerBanner #quick_search_form button { border-color:light-dark(var(--blue-level-7), var(--dark-level-1)); } #headerBanner #toggleBtnMenu .icon, #headerBanner #toggleBtnMenu .icon::before, #headerBanner #toggleBtnMenu .icon::after { background-color:light-dark(var(--dark-level-7), var(--light-level-5)); } #headerBanner #toggleBtnNotifications .indicator { background-color:var(--red-level-4); color:var(--light-level-1); } #headerBanner .userControlMenu .button { background-color:light-dark(var(--blue-level-7), var(--blue-level-7)); border-color:light-dark(inherit, var(--transparent)); color:var(--light-level-1); } #headerBanner .userControlMenu .button:hover { background-color:var(--blue-level-6); } #userControls section { background-color:light-dark(var(--light-level-1), var(--dark-level-6)); border-color:light-dark(var(--light-level-6), var(--dark-level-4)); } #userControls .row { border-top-color:light-dark(var(--light-level-6), var(--dark-level-4)); } #logoBox { background-color:var(--blue-level-8); border-color:var(--light-level-1); } #menuTop ul li a { border-left-color:var(--light-level-6); color:var(--dark-level-7); } #mainMenu .logo:focus, #mainNav a:focus { outline-color:var(--light-level-6); } #mainMenu { background-color:var(--light-level-1); border-left-color:var(--light-level-6); } #mainNav { color:var(--light-level-1); } #mainNav li { border-bottom-color:var(--light-level-6); } #mainNav ul.sub-menu li a { color:var(--light-level-1); } .home #subMenu ul { background-color:rgba(255,255,255,0.7); } #gotoMain { background-color:var(--dark-level-1); border-color:var(--light-level-1); color:var(--light-level-1); } #backToTop { background-color:var(--blue-level-8); border-color:var(--light-level-1); color:var(--light-level-1); } #pageHeader { background-color:light-dark(var(--light-level-1), var(--dark-level-5)); } #metaSection .box.warning { background-color:light-dark(inherit, var(--red-level-9)); } #metaInformation { background-color:light-dark(var(--light-level-4), var(--dark-level-4)); border-color:light-dark(var(--light-level-6), var(--dark-level-7)); } #post_editor_style_buttons { background-color:var(--dark-level-7); border-color:var(--dark-level-1); } #post_editor_style_buttons .button { background-color:var(--dark-level-4); border-color:var(--dark-level-1); } #post_editor_style_buttons .button:hover { background-color:var(--dark-level-7); } #pageContent.row { background-color:light-dark(var(--light-level-4), var(--dark-level-5)); } #pageContent.row.articlesTable { background-color:light-dark(var(--light-level-1), var(--dark-level-5)); } #notificationNewVersion { background-color:light-dark(var(--purple-level-1), var(--transparent)); } #search_setting[aria-pressed="false"] { background-color:light-dark(var(--light-level-1), var(--dark-level-6)); border-color:light-dark(inherit, var(--dark-level-1)); color:light-dark(var(--dark-level-7), var(--light-level-1)); } #search_setting[aria-pressed="true"] { background-color:var(--blue-level-7); color:var(--light-level-1); outline-color:var(--light-level-1); } #pageSidebar { background-color:light-dark(var(--light-level-1), var(--dark-level-6)); } #pageSidebar header a { color:inherit; } #pageSidebarContent { border-color:light-dark(var(--light-level-7), var(--dark-level-4)); } #systemInfo { background-color:var(--red-level-4); color:var(--light-level-1); } #systemInfo a { color:var(--light-level-1); } /* ---------------------------------------------------------------------------------------------------------- Dark theme via data tag ------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ *[data-theme="dark"] .userControlMenu header img, *[data-theme="dark"] #userControls dialog header img { filter: var(--filter-lighten); /* Same color as #DDDDDD */ } *[data-theme="dark"] table th, *[data-theme="dark"] table td { border:1px solid; } *[data-theme="dark"] table[data-table-type="results"] th, *[data-theme="dark"] table[data-table-type="results"] td { border:0; } *[data-theme="dark"] table[data-table-type="results"] thead tr:first-child, *[data-theme="dark"] table[data-table-type="results"] tr:nth-child(even), *[data-theme="dark"] table[data-table-type="results"] tr:nth-child(odd) { border-width:0 0 1px 0; } *[data-theme="dark"] .category button { filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(250%) contrast(100%); /* Change color of the svg background */ } *[data-theme="dark"] footer#mainFooter { border-width:1px 0; } *[data-theme="dark"] footer#mainFooter .column:first-of-type img { filter:grayscale(1) invert(1); }