/* ---------------------------------------------------------------------------------------------------------- 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%); } */ /********************************************/ ::-moz-selection { background-color:var(--blue-2); color:var(--dark-7); } ::selection { background-color:var(--blue-2); color:var(--dark-7); } ::backdrop { background-color:rgba(0,0,0,0.4); } body { background-color: light-dark(var(--neutral-2), var(--neutral-7)); color: light-dark(var(--neutral-7), var(--neutral-2)); } article, .article { background-color: light-dark(var(--neutral-1), var(--neutral-6)); color: light-dark(var(--neutral-7), var(--neutral-2)); } a { color: light-dark(var(--blue-4), var(--blue-2)); } a:focus, button:focus { outline-color: var(--orange-4); } a:hover { color: light-dark(var(--neutral-7), var(--blue-1)); } a[target="_blank"]:not(:empty)::after, a[href$=".pdf"]::after { background-color:currentcolor; } hr { background-color: var(--neutral-4); } button { border-color: light-dark (var(--neutral-8), var(--neutral-1)); } button[role="switch"][aria-checked="false"] span { background-color: var(--blue-4); outline-color: var(--blue-4); } button[role="switch"][aria-checked="true"] span { background-color: var(--neutral-1); outline-color: var(--blue-4); } button[data-toggle="favorite-app"][aria-pressed="true"] { background-color: light-dark(var(--green-2), var(--green-3)); color: var(--neutral-7); } dialog { background-color:light-dark(var(--neutral-1), var(--neutral-6)); border-color:light-dark(var(--neutral-4), var(--neutral-7)); color:light-dark(inherit, var(--neutral-2)); } figcaption { border-color: light-dark(var(--neutral-3), var(--neutral-7)); } .info { background-color: light-dark(var(--blue-1), var(--blue-2)); border-color: light-dark(var(--blue-5), var(--blue-2)); color: var(--blue-5); } .success { background-color: light-dark(var(--green-1), var(--green-2)); border-color: light-dark(var(--green-5), var(--green-2)); color: var(--green-5); } .warning { background-color: light-dark(var(--yellow-1), var(--yellow-2)); border-color: light-dark(var(--yellow-5), var(--yellow-2)); color: var(--yellow-5); } .error { background-color: light-dark(var(--red-1), var(--red-2)); border-color: light-dark(var(--red-5), var(--red-2)); color: var(--red-5); } .anchor::after { background-color:currentcolor; } .author a { color: currentColor; } .heading { color: var(--neutral-1); text-shadow:0 2px 0 rgba(0,0,0,1); } .iconAfter::after, .iconBefore::before { background-color: light-dark(var(--neutral-6), var(--neutral-3)); } .profileImage { border-color: light-dark(var(--neutral-1), var(--neutral-5)); } .submit { background-color: var(--blue-4) !important; border-color: var(--blue-4) !important; color: var(--neutral-1) !important; } .submit:hover { background-color: var(--blue-3) !important; border-color: var(--blue-4) !important; color: var(--neutral-8) !important; } .input, .select { background-color: light-dark(var(--neutral-2), var(--neutral-5)); border-color: light-dark(var(--neutral-4), var(--neutral-5)); } .button { background-color: var(--blue-4); border-color: light-dark(var(--neutral-7), var(--neutral-1)); color: var(--neutral-1); } .button.cancel { background-color: var(--red-3); border-color: var(--neutral-7); color: var(--neutral-7); } .button.cancel:hover { background-color: var(--red-4) !important; } .button.cancel[type="reset"] { background-color: transparent; border-color: light-dark(var(--neutral-7), var(--neutral-1)); color: light-dark(var(--neutral-7), var(--neutral-1)); } .button.cancel[type="reset"]:hover { background-color: var(--red-3); border-color: var(--neutral-7); color: var(--neutral-7); } .button.edit { background-color: transparent; color: inherit; } .loadingSpinner { border-color: var(--neutral-4); border-top-color: var(--blue-4); } .badge.type { background-color: light-dark(var(--purple-5), var(--purple-2)); border-color: light-dark(var(--purple-5), var(--purple-2)); color: light-dark(var(--neutral-1), var(--neutral-8)); } .badge.category { background-color: var(--transparent); border-color: light-dark(var(--purple-5), var(--purple-2)); color: light-dark(var(--purple-5), var(--purple-2)); } .badge.period { background-color: var(--blue-4); border-color: var(--blue-4); } .badge.archived { background-color: var(--neutral-8); border-color: var(--neutral-8); color: var(--neutral-1); } .badge.cancel:hover { background-color: var(--red-4); } .actionGroup .group-details { border-color: light-dark(var(--neutral-3), var(--neutral-8)); } .actionGroup .group-details > summary { background-color: light-dark(var(--neutral-2), var(--neutral-5)); } .actionGroup .iconPencil::before { background-color: var(--neutral-1); } .article .header > .row { border-color: light-dark(var(--neutral-3), var(--neutral-7)); } .article .metainformation .header > .row.content { border-color: light-dark(var(--neutral-3), var(--neutral-7)); } .article[data-post-type="application"] .header > .row.content { border-color: light-dark(var(--neutral-3), var(--neutral-7)); } .article .moreActions [role="tablist"] .button:hover::before { background-color: var(--neutral-8); } .article .moreActions .section .button:hover { background-color: var(--blue-3); } .article .moreActions .section .button::before { background-color: var(--neutral-1); } .article .moreActions .section .button:hover::before { background-color: var(--neutral-8); } .article .moreActions .section .button.favorite { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-7)); color: light-dark(var(--neutral-7), var(--neutral-1)); } .article .moreActions .section .button.favorite:hover { background-color: light-dark(var(--neutral-2), var(--neutral-5)); } .article .moreActions .section .button.favorite[aria-pressed="true"] { background-color: light-dark(var(--blue-4), var(--blue-4)); color: var(--neutral-1); } .article .moreActions .section .button.favorite[aria-pressed="true"]::before { background-color: var(--neutral-1); } .article .moreActions .section .button.favorite[aria-pressed="false"]::before { background-color: light-dark(var(--neutral-7), var(--neutral-1)); } .grid .button:hover { background-color: var(--blue-3); border-color: var(--neutral-7); color: var(--neutral-8); } .article table th, .article table td { border-color: inherit; } .article table tr:nth-child(even) { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); } .article table tr:nth-child(odd) { background-color: light-dark(var(--neutral-2), var(--neutral-7)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); } .article table tr:focus-within td { background-color: inherit; } .article table thead tr:first-child { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); } .article table tbody tr:hover { background-color: light-dark(var(--neutral-2), var(--neutral-5)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); } .feed .article header > .row { border-color: light-dark(var(--neutral-3), var(--neutral-7)); } .feed .article .content .read-more { color: light-dark(var(--blue-4), var(--blue-2)); } .feed .article .content h2 a { color: light-dark(var(--neutral-6), var(--blue-2)); } .feed .article a.button { color: var(--neutral-1); } .feed .article a.button:hover { background-color: var(--blue-3); } .feed.comments .article.column { background-color: light-dark(var(--neutral-1), var(--neutral-6)); } .feed.comments .article .content { background-color: light-dark(var(--neutral-2), var(--neutral-5)); } .feed.comments ol[data-level="1"] > .comment { border-bottom-color: light-dark(var(--neutral-3), var(--neutral-7)); } .feed.comments .article::before { border-color: light-dark(var(--neutral-3), var(--neutral-5)); } .feed.comments .article::after { background-color: light-dark(var(--neutral-3), var(--neutral-5)); } .feed.comments ol[class*="comment-level-"] > li::before { background-color: light-dark(var(--neutral-3), var(--neutral-5)); } .feed.comments .article footer .buttonGroup .button { background-color: transparent; color: light-dark(var(--neutral-7), var(--neutral-2)); } .feed.comments .article footer .buttonGroup .likeGroup { border-color: var(--neutral-4); } .feed.comments .article footer .buttonGroup .likeCount { border-color: var(--neutral-4); } .feed.likes li:hover { background-color: light-dark(var(--neutral-2), var(--neutral-5)); } .article[data-post-type="page"] .badge.type { background-color: light-dark(var(--green-4), var(--green-2)); border-color: light-dark(var(--green-4), var(--green-2)); color: light-dark(var(--neutral-1), var(--neutral-8)); } .article[data-post-type="page"] .badge.category { background-color: var(--transparent); border-color: light-dark(var(--green-4), var(--green-2)); color: light-dark(var(--green-4), var(--green-2)); } .article[data-post-type="application"] .badge.type { background-color: light-dark(var(--blue-4), var(--blue-2)); border-color: light-dark(var(--blue-4), var(--blue-2)); color: light-dark(var(--neutral-1), var(--neutral-8)); } .article[data-post-type="application"] .badge.category { background-color: var(--transparent); border-color: light-dark(var(--blue-4), var(--blue-2)); color: light-dark(var(--blue-4), var(--blue-2)); } .component { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); } .component .button { background-color: var(--blue-4); color: var(--neutral-1); } .component > a { color: light-dark(var(--neutral-7), var(--neutral-2)); } .component > a:hover p.button { background-color: var(--blue-3); color: var(--neutral-8); } .component .heading { background-color: transparent; color: light-dark(var(--neutral-7), var(--neutral-2)); } .component .header { padding: 1rem 1.25rem; border-bottom-color: light-dark(var(--neutral-3), var(--neutral-8)); } .modal #postLikesSection li a { color: currentColor; } #headerBanner { background-color: light-dark(var(--neutral-1), var(--neutral-7)); border-bottom-color: light-dark(var(--neutral-3), var(--neutral-8)); } #headerBanner .logo { background-color: light-dark(var(--blue-4), var(--neutral-7)); } #headerBanner .row { border-color: var(--neutral-3); } #headerBanner .container { background-color: light-dark(var(--neutral-1), var(--neutral-7)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); } #headerBanner .container .row { border-color: light-dark(var(--neutral-3), var(--neutral-8)); } #headerBanner .container .heading { color: inherit; } #headerBanner .button { background-color: light-dark(var(--neutral-1), var(--neutral-7)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); color: inherit; } #headerBanner .button:hover { background-color: light-dark(var(--neutral-2), var(--neutral-6)); } #headerBanner .iconBefore::before { background-color: light-dark(var(--neutral-6), var(--neutral-3)); } #headerBanner #quickSearch input { background-color: light-dark(var(--neutral-2), var(--neutral-6)); border-color: light-dark(var(--neutral-4), var(--neutral-8)); color: inherit; } #headerBanner #quickSearch button { border-color: light-dark(var(--blue-4), var(--neutral-8)) !important; } #headerBanner .modal .form .submit { border-color: var(--neutral-7); } #headerBanner .modal > .column > .cancel { background-color: var(--red-3); border-color: var(--neutral-7); color: var(--neutral-7); } /* --red-5 rather than the lighter --red-4: white 0.75rem text on --red-4 lands at 3.7:1, under the 4.5:1 that WCAG 2.1 AA asks of normal sized text. This pairing is the one #siteEnvironementMessage already uses. */ #headerBanner .indicator { background-color: var(--red-5); color: var(--neutral-1); } #headerBanner .modal > .column > .cancel:hover { background-color: var(--red-4); } #toggleMainMenu .burgerMenu, #toggleMainMenu .burgerMenu::before, #toggleMainMenu .burgerMenu::after { background-color: light-dark(var(--neutral-6), var(--neutral-3)); } #toggleMainMenu[aria-expanded="true"] .burgerMenu { background-color: transparent; } #mainMenu { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); } #mainMenu button[data-button-role="close"] { background-color: var(--blue-4); border-color: var(--neutral-8); color: var(--neutral-1); } #mainMenu button[data-button-role="close"]:hover { background-color: var(--blue-3); } #mainMenu ul[data-list-type="interactiveTree"] { padding-top: 1px; } #profileMenu.container .button:last-of-type, #feedbackMenu.container .button:last-of-type, #actionsMenu.container .button:last-of-type { background-color: var(--blue-4); color: var(--neutral-1); } #mainBreadcrumbs { background-color: light-dark(var(--neutral-1), var(--neutral-7)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); color: light-dark(var(--neutral-5), var(--neutral-2)); } #pageHeader .badge.type { background-color: var(--purple-5); border-color: var(--purple-5); color: var(--neutral-1); } ul[data-list-type="interactiveTree"] { background-color: light-dark(var(--neutral-3), var(--neutral-8)); border-color: light-dark(var(--neutral-3), var(--neutral-8)) !important; } ul[data-list-type="interactiveTree"] a { border-color: light-dark(var(--neutral-3), var(--neutral-8)); border-left-color: var(--blue-4); } ul[data-list-type="interactiveTree"] a[aria-current="page"] { background-color: light-dark(var(--neutral-2), var(--neutral-7)); border-left-color: var(--blue-3); } ul[data-list-type="interactiveTree"] ul { background-color: light-dark(var(--neutral-3), var(--neutral-7)); } ul[data-list-type="interactiveTree"] li .row { background-color: light-dark(var(--neutral-1), var(--neutral-6)); } ul[data-list-type="interactiveTree"] button { background-color: var(--blue-4) !important; color: var(--neutral-1); } ul[data-list-type="interactiveTree"] button:hover { background-color: var(--blue-3) !important; } ul[data-list-type="interactiveTree"] button:focus { background-color: var(--blue-3); } ul[data-list-type="interactiveTree"] .iconBefore::before { background-color: var(--neutral-1) !important; } /* Prenumerationer: the choices are drawn as cards, see style.css. */ ul[data-list-style="cards"] { background-color: transparent; } ul[data-list-style="cards"] ul { background-color: transparent; } ul[data-list-style="cards"] li .row { background-color: transparent; } ul[data-list-style="cards"] label { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); } ul[data-list-style="cards"] label:has(input:checked) { background-color: light-dark(var(--neutral-2), var(--neutral-7)); border-color: var(--blue-4); } ul[data-list-style="cards"] label:has(input:disabled) { color: light-dark(var(--neutral-5), var(--neutral-3)); } ul[data-list-style="cards"] button.button { background-color: light-dark(var(--neutral-1), var(--neutral-6)) !important; border-color: light-dark(var(--neutral-3), var(--neutral-8)); } ul[data-list-style="cards"] button.button:hover { background-color: light-dark(var(--neutral-2), var(--neutral-5)) !important; } ul[data-list-style="cards"] .iconBefore::before { background-color: light-dark(var(--neutral-6), var(--neutral-1)) !important; } #quickAccess header { border-color: light-dark(var(--neutral-3), var(--neutral-8)); } #quickAccess *[role="tablist"] { border-color: light-dark(var(--neutral-3), var(--neutral-8)); } #quickAccess *[role="tablist"] .button { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); color: inherit; } #quickAccess *[role="tablist"] .button:hover { background-color: light-dark(var(--neutral-2), var(--neutral-5)); } #quickAccess section[role="tabpanel"] { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); border-top-color: var(--blue-4); } #quickAccess ul[data-list-type="interactiveTree"] li { background-color: light-dark(var(--neutral-1), var(--neutral-7)); } #quickAccess .submenu { background-color: light-dark(var(--neutral-2), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); color: inherit; } #quickAccess ul[data-list-type="interactiveTree"] li .row { background-color: light-dark(var(--neutral-1), var(--neutral-7)); } #quickAccess ul[data-list-type="interactiveTree"] a.button { color: var(--neutral-1); } #quickAccess ul[data-list-type="interactiveTree"] a.button:hover { background-color: var(--blue-3); } #quickAccess .buttonGroup { background-color: light-dark(var(--neutral-3), var(--neutral-8)); } #quickAccess .buttonGroup .button { background-color: light-dark(var(--neutral-1), var(--neutral-6)); color: light-dark(var(--neutral-7), var(--neutral-1)); } #quickAccess .buttonGroup .button:hover { background-color: light-dark(var(--blue-1), var(--blue-4)); } #newsFeed footer { border-color: light-dark(var(--neutral-3), var(--neutral-7)); } #newsFeed .createPost { background-color: light-dark(var(--neutral-1), var(--neutral-6)); } #newsFeed .createPost .button { background-color: transparent; color: light-dark(var(--neutral-6), var(--neutral-1)); } .nav.submenu a { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); color: inherit; } .nav.submenu a:hover { background-color: light-dark(var(--blue-1), var(--blue-4)); } .nav.submenu a[aria-current="page"] { background-color: light-dark(var(--blue-1), var(--blue-4)); border-color: light-dark(var(--blue-4), var(--blue-1)); } .article .footer { border-color: light-dark(var(--neutral-3), var(--neutral-7)); } .article .footer .buttonGroup { background-color: light-dark(var(--neutral-3), var(--neutral-7)); } .article .footer .buttonGroup .button { background-color: light-dark(var(--neutral-1), var(--neutral-6)); color: light-dark(var(--neutral-7), var(--neutral-1)); } .article .footer .buttonGroup .button:hover { background-color: light-dark(var(--blue-1), var(--blue-4)); } .article .footer .buttonGroup .iconLike::before { background-color: light-dark(var(--neutral-8), var(--neutral-3)); } .article .footer .buttonGroup .iconLike.liked::before { background-color: light-dark(var(--blue-4), var(--neutral-3)); } .iconLike::before, .iconLike::after { background-color: light-dark(var(--neutral-8), var(--neutral-3)); } .iconLike.liked::before, .iconLike.liked::after { background-color: light-dark(var(--blue-4), var(--neutral-3)); } #commentFormRoot { border-color: light-dark(var(--neutral-3), var(--neutral-7)); } #favoriteList .button { background-color: transparent; border-color: light-dark(var(--neutral-7), var(--neutral-1)); color: light-dark(var(--neutral-7), var(--neutral-1)); } #favoriteList .button[data-delete]:hover { background-color: var(--red-3); border-color: var(--neutral-7); color: var(--neutral-7); } #favoriteList .button[data-toggle]:hover, #favoriteList .button[data-toggle][aria-pressed="true"] { background-color: var(--green-2); border-color: var(--neutral-7); color: var(--neutral-7); } #favoriteList tr.dragging, #favoriteList tr.touch-dragging { background-color: light-dark(var(--neutral-3), var(--neutral-5)); } #pageSidebar > .button { border-color: var(--neutral-8); } #pageSidebar > .button:hover { background-color: var(--blue-3); } #pageSidebar > .button::before { background-color: var(--neutral-1); } #pageSidebarContent { background-color: light-dark(var(--neutral-1), var(--neutral-6)); border-color: light-dark(var(--neutral-3), var(--neutral-8)); } #siteEnvironementMessage { background-color: var(--red-5); color: var(--neutral-1); } #siteEnvironementMessage a { color: var(--neutral-1); } #gotoMain { background-color:var(--neutral-8); border-color:var(--neutral-1); color:var(--neutral-1); } #backToTop { background-color:var(--blue-4); border-color:var(--neutral-1); color:var(--neutral-1); } #backToTop a { color:var(--neutral-1); } #mainFooter { background-color: var(--neutral-6); color:var(--neutral-1); } #mainFooter a { color: var(--blue-2); } #mainFooter a:hover { color: var(--neutral-1); } #mainFooter > .row:last-of-type { background-color: var(--neutral-7); } #mainFooter .column:first-of-type { } #mainFooter .column.widget { border-color: var(--neutral-8); } *[data-theme="dark"] #headerBanner .container img { filter: var(--filter-lighten); } /*body.login { background: #703299; background: linear-gradient(90deg, rgba(112, 50, 153, 1) 0%, rgba(54, 42, 133, 1) 100%); }*/ body.login { background: #0B5D8F; background: linear-gradient(90deg, rgba(11, 93, 143, 1) 0%, rgba(61, 123, 44, 1) 100%); color: var(--neutral-2); } body.login #headerBanner { background-color: var(--neutral-7); border-color:transparent; } body.login #headerBanner .description { color: var(--neutral-2); } body.login .loginWindow { background-color: var(--neutral-6); color: var(--neutral-2); }