MediaWiki:Citizen.css: Porovnání verzí

/*@media screen {*/
/*    .citizen-page-container:before {*/
/*        background-image: url(/images/e/eb/Marauders-map.webp);*/
/*    }*/
/*}*/

/*@media screen and (min-width: 1120px) {*/
/*    .mw-body::before {*/
/*        background-image: url(/images/4/40/Harry-potter-logo.svg);*/
/*    }*/
/*}*/

/*:root {*/
/*    --color-surface-0: var(--tg-color-surface-0) !important;*/
/*    --color-surface-1: var(--tg-color-surface-1) !important;*/
/*    --color-surface-2: var(--tg-color-surface-2) !important;*/
/*    --color-surface-3: var(--tg-color-surface-3) !important;*/
/*    --color-surface-4: var(--tg-color-surface-4) !important;*/
/*    --color-base: var(--tg-color-base) !important;*/
/*    --color-base--emphasized: var(--tg-color-emphasized) !important;*/
/*    --color-base--subtle: var(--tg-color-subtle) !important;*/
/*    --font-family-base: var(--tg-font-family-body);*/
/*    --color-primary__h: 84.55;*/
/*    --color-primary__s: 69%;*/
/*    --color-primary__l: 28%;*/
/*    --color-primary: var(--tg-color-progressive) !important;*/
/*    --color-primary--hover: var(--tg-color-progressive--hover) !important;*/
/*    --color-primary--active: var(--tg-color-progressive--active) !important;*/
/*    --color-inverted-primary: var(--tg-color-inverted-progressive);*/

/*    --tg-inscription-size: 8px;*/
/*}*/

/* Dark theme */
/*:root.skin-theme-clientpref-night {*/
/*    --tg-border-color-base: rgba(255, 255, 255, 0.05);*/
/*    --tg-border-color-subtle: rgba(255, 255, 255, 0.02);*/
/*    --tg-border-color-interactive: rgba(255, 255, 255, 0.08);*/
/*    --tg-color-base: #e4ddcf;*/
/*    --tg-color-emphasized: #fbf8f1;*/
/*    --tg-color-subtle: #e3d2b0;*/
/*    --tg-color-inverted-progressive: #000;*/
/*    --tg-color-surface-0: #1a1a1f;*/
/*    --tg-color-surface-1: #1f1f24;*/
/*    --tg-color-surface-2: #23232e;*/
/*    --tg-color-surface-3: #282833;*/
/*    --tg-color-surface-4: #2c2c3c;*/
/*    --tg-color-surface-5: #313142;*/
/*    --tg-color-progressive: #f1c45e;*/
/*    --tg-color-progressive--hover: #ffd16b;*/
/*    --tg-color-progressive--active: #e4b750;*/
/*    --tg-opacity-pattern: 0.05;*/

/*    --color-primary__h: 41.6;*/
/*    --color-primary__s: 84%;*/
/*    --color-primary__l: 65.7%;*/
/*}*/

/* Auto theme */
/*@media screen and (prefers-color-scheme: dark) {*/
/*    :root.skin-theme-clientpref-os {*/
/*        --tg-border-color-base: rgba(255, 255, 255, 0.05);*/
/*        --tg-border-color-subtle: rgba(255, 255, 255, 0.02);*/
/*        --tg-border-color-interactive: rgba(255, 255, 255, 0.08);*/
/*        --tg-color-base: #e4ddcf;*/
/*        --tg-color-emphasized: #fbf8f1;*/
/*        --tg-color-subtle: #e3d2b0;*/
/*        --tg-color-inverted-progressive: #000;*/
/*        --tg-color-surface-0: #1a1a1f;*/
/*        --tg-color-surface-1: #1f1f24;*/
/*        --tg-color-surface-2: #23232e;*/
/*        --tg-color-surface-3: #282833;*/
/*        --tg-color-surface-4: #2c2c3c;*/
/*        --tg-color-surface-5: #313142;*/
/*        --tg-color-progressive: #f1c45e;*/
/*        --tg-color-progressive--hover: #ffd16b;*/
/*        --tg-color-progressive--active: #e4b750;*/
/*        --tg-opacity-pattern: 0.05;*/

/*        --color-primary__h: 41.6;*/
/*        --color-primary__s: 84%;*/
/*        --color-primary__l: 65.7%;*/
/*    }*/
/*}*/

/* Black theme */
/*:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {*/
/*    --tg-color-surface-0: #000;*/
/*    --tg-color-surface-1: #111;*/
/*    --tg-color-surface-2: #222;*/
/*    --tg-color-surface-3: #333;*/
/*    --tg-color-surface-4: #444;*/
/*    --tg-color-surface-5: #555;*/
/*    --delta-hover-state: 6%;*/
/*    --shadow-strength: 0.04;*/
/*}*/

/*@media screen and (prefers-color-scheme: dark) {*/
/*    :root.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 {*/
/*        --tg-color-surface-0: #000;*/
/*        --tg-color-surface-1: #111;*/
/*        --tg-color-surface-2: #222;*/
/*        --tg-color-surface-3: #333;*/
/*        --tg-color-surface-4: #444;*/
/*        --tg-color-surface-5: #555;*/
/*        --delta-hover-state: 6%;*/
/*        --shadow-strength: 0.04;*/
/*    }*/
/*}*/

/* Do not invert edit button icon in dark mode because of contrast */
/*.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before,*/
/*.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before {*/
/*    filter: none;*/
/*}*/

/*@media screen and (prefers-color-scheme: dark) {*/
/*    .skin-theme-clientpref-os #ca-edit .citizen-ui-icon::before,*/
/*    .skin-theme-clientpref-os #ca-ve-edit .citizen-ui-icon::before {*/
/*        filter: none;*/
/*    }*/
/*}*/

/*h1,*/
/*h2,*/
/*h3,*/
/*h4,*/
/*h5,*/
/*h6 {*/
/*    font-family: var(--tg-font-family-heading);*/
/*}*/

/* Add external link icon to interwiki links */
/*a.extiw::after {*/
/*    display: inline-block;*/
/*    width: 0.75em;*/
/*    height: 0.75em;*/
/*    margin-left: 0.125em;*/
/*    content: "";*/
/*    background-color: currentcolor;*/
/*    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYXJpYS1oaWRkZW49InRydWUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+IDxnIGZpbGw9ImN1cnJlbnRDb2xvciI+IDxwYXRoIGQ9Ik0xNyAxN0gzVjNoNVYxSDNhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTVoLTJ6Ii8+IDxwYXRoIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+IDwvZz4gPC9zdmc+)*/
/*        no-repeat 50% 50%;*/
/*    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYXJpYS1oaWRkZW49InRydWUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+IDxnIGZpbGw9ImN1cnJlbnRDb2xvciI+IDxwYXRoIGQ9Ik0xNyAxN0gzVjNoNVYxSDNhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTVoLTJ6Ii8+IDxwYXRoIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+IDwvZz4gPC9zdmc+)*/
/*        no-repeat 50% 50%;*/
/*    -webkit-mask-size: contain;*/
/*    mask-size: contain;*/
/*}*/

/*.plainlinks a.external::after {*/
/*    display: none;*/
/*}*/

/* Adjust wordmark size */
/*img.mw-logo-wordmark {*/
/*    height: 2rem;*/
/*}*/

/* Shift sticky header trigger point by 100px */
/*#citizen-page-header-sticky-sentinel {*/
/*    transform: translateY(100px);*/
/*}*/

/**
 * Background image handling
 */
/*.citizen-page-container,*/
/*.citizen-body-container {*/
/*    position: relative;*/
/*}*/

/*.citizen-header:before,*/
/*.citizen-page-container::before,*/
/*.mw-body::before,*/
/*.citizen-body-container::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    pointer-events: none;*/
/*}*/

/*.citizen-header:before,*/
/*.citizen-page-container::before {*/
/*    background-repeat: no-repeat;*/
/*}*/

/*.mw-body::before,*/
/*.citizen-body-container::after {*/
/*    background-repeat: repeat-y;*/
/*    filter: var(--filter-invert);*/
/*}*/

/*.citizen-header::before {*/
/*    background-position: center left;*/
/*    background-size: contain;*/
/*    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 32px);*/
/*    -webkit-mask-image: linear-gradient(*/
/*        to right,*/
/*        rgba(0, 0, 0, 0.2),*/
/*        transparent 32px*/
/*    );*/
/*}*/

/*.citizen-page-container::before {*/
/*    height: 200px;*/
/*    background-size: cover;*/
/*    mask-image: linear-gradient(*/
/*        rgba(0, 0, 0, 0.35),*/
/*        rgba(0, 0, 0, 0.2) 3rem,*/
/*        rgba(0, 0, 0, 0.05) 9rem,*/
/*        transparent 100%*/
/*    );*/
/*    -webkit-mask-image: linear-gradient(*/
/*        rgba(0, 0, 0, 0.35),*/
/*        rgba(0, 0, 0, 0.2) 3rem,*/
/*        rgba(0, 0, 0, 0.05) 9rem,*/
/*        transparent 100%*/
/*    );*/
/*}*/

/*.mw-body::before {*/
/*    position: fixed; /* Avoid layout shift */
/*    margin-left: calc(var(--tg-inscription-size) + var(--padding-page));*/
/*    opacity: calc(*/
/*        var(--tg-opacity-pattern) * 0.5*/
/*    ); /* Since this is behind content, it should be more subtle */
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*    mask-image: linear-gradient(*/
/*        transparent,*/
/*        #000 480px,*/
/*        #000 calc(100% - 480px),*/
/*        transparent*/
/*    );*/
/*    -webkit-mask-image: linear-gradient(*/
/*        transparent,*/
/*        #000 480px,*/
/*        #000 calc(100% - 480px),*/
/*        transparent*/
/*    );*/
/*}*/

/*.citizen-body-container::after {*/
/*    background-size: var(--tg-inscription-size);*/
/*    opacity: var(--tg-opacity-pattern);*/
/*    mask-image: linear-gradient(*/
/*        transparent,*/
/*        #000 160px,*/
/*        #000 calc(100% - 160px),*/
/*        transparent*/
/*    );*/
/*    -webkit-mask-image: linear-gradient(*/
/*        transparent,*/
/*        #000 160px,*/
/*        #000 calc(100% - 160px),*/
/*        transparent*/
/*    );*/
/*}*/

/*@media screen and (min-width: 640px) {*/
/*    img.mw-logo-wordmark {*/
/*        height: 2.5rem;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 1120px) {*/
/*    :root {*/
/*        --tg-inscription-size: 32px;*/
/*    }*/

    /* Make space for header background image */
/*    .citizen-header {*/
/*        padding-top: 36px;*/
/*    }*/

/*    .citizen-header::before {*/
/*        background-position: top center;*/
/*        mask-image: linear-gradient(rgba(0, 0, 0, 0.2), transparent 64px);*/
/*        -webkit-mask-image: linear-gradient(*/
/*            rgba(0, 0, 0, 0.2),*/
/*            transparent 64px*/
/*        );*/
/*    }*/

    /* Make space for inscription */
/*    .citizen-page-header,*/
/*    .citizen-body-container {*/
/*        padding-left: calc(var(--tg-inscription-size) + var(--padding-page));*/
/*    }*/
/*}*/

/*@media screen and (min-width: 1680px) {*/
/*    :root {*/
/*        --tg-inscription-size: 3vw;*/
/*    }*/
/*}*/

/* Move page header to the bottom for main page */
/*.page-Main_Page .citizen-body-container {*/
/*    grid-template-areas:*/
/*        "content"*/
/*        "header"*/
/*        "afterHeader"*/
/*        "footer";*/
/*}*/

/*@media (hover: hover) {*/
    /*
     * Search button tooltip
     * This is temporary until tooltip is fully implemented upstream at Citizen
     */
/*    .citizen-search*/
/*        .citizen-dropdown-details:not([open])*/
/*        > .citizen-dropdown-summary:hover::after {*/
/*        content: "/";*/
/*        position: absolute;*/
/*        border: 1px solid var(--border-color-interactive);*/
/*        border-radius: var(--border-radius--small);*/
/*        min-width: var(--size-icon);*/
/*        min-height: var(--size-icon);*/
/*        padding: 0 var(--space-xxs);*/
/*        background: var(--color-surface-1);*/
/*        font-size: 0.65rem;*/
/*        font-weight: var(--font-weight-medium);*/
/*        line-height: 1;*/
/*        display: flex;*/
/*        align-items: center;*/
/*        justify-content: center;*/
/*    }*/
/*}*/

/*
 * Menu
 * Rich format menu to have more hierarchy
*/
/* Remove bottom spacing as it is handled in footer portlet */
/*.citizen-drawer__menu {*/
/*	margin-bottom: 0;*/
/*	padding-bottom: 0;*/
/*}*/

/*.mw-portlet-External {*/
/*	position: sticky;*/
/*	bottom: 0;*/
/*	margin-top: var( --space-md );*/
/*    padding: var( --space-xs ) 0;*/
/*	border-top: 1px solid var( --border-color-base );*/
/*	background: var( --color-surface-1 );*/
/*	font-size: var( --font-size-x-small );*/
/*	grid-column-start: 1;*/
/*	white-space: nowrap;*/
/*}*/

/*@media screen and ( min-width: 32.875rem ) {*/
/*    .mw-portlet-External {*/
/*		grid-column-end: span 2;*/
/*	}*/
/*}*/

/*.mw-portlet-External .citizen-menu__heading {*/
/*	display: none;*/
/*}*/

/*.mw-portlet-External ul {*/
/*	display: flex;*/
/*	overflow: auto;*/
/*}*/

/*.mw-portlet-External .mw-list-item a {*/
/*	gap: 0;*/
/*}*/

/* Label */
/*.citizen-drawer__menu [id^="n-sidebar-label-"] a {*/
/*	pointer-events: none;*/
/*    margin-left: var( --space-xs );*/
/*    padding-left: var( --space-md );*/
/*	padding-right: var( --space-xs );*/
/*	border-left: 1px solid var( --border-color-base );*/
/*    border-radius: 0;*/
/*    letter-spacing: 0.05em;*/
/*    font-weight: var( --font-weight-normal );*/
/*    color: var( --color-base--subtle ) !important;*/
/*}*/

/* Icons */
/*.citizen-drawer__menu [id^="n-sidebar-icon-"] a {*/
/*	font-size: 0;*/
/*    content-visibility: auto;*/

/*}*/

/*.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {*/
/*	display: block;*/
/*    content: "";*/
/*    width: var( --size-icon );*/
/*    height: var( --size-icon );*/
/*    background: transparent center/contain no-repeat;*/
/*    opacity: var( --opacity-icon-base );*/
/*    filter: var( --filter-invert );*/
/*}*/