MediaWiki:ZHVariantFlags.css — dev

/**
 * ZHVariantFlags
 *
 * @version 1.0.7 stable
 * @description Add flag images next to the language variant links in zh wikis.
 * @author Winston Sung
 * @author Magiczocker
 * @license CC-BY-SA-3.0 OR CC-BY-NC-SA-3.0
 *
 * 2020-08-11 1.0.0 stable: first version, only support Oasis skin on UCP wikis
 * 2020-08-11 1.0.1 beta: added support for Vector skin
 * 2020-08-11 1.0.1 stable: minor fixes for Vector skin
 * 2020-08-11 1.0.2 stable: minor fixes for Oasis skin, add support for oasis skin on legacy (non-UCP) wikis
 * 2021-10-14 1.0.3 stable: added support for FandomDesktop skin and most of MediaWiki skins
 * 2022-04-24 1.0.4 stable: added support for dev:RemoveTracking by Magiczocker
 * 2023-08-27 1.0.5 stable: dropped support for Oasis skin
 * 2023-08-30 1.0.6 stable: added flag skeletons and simplified code
 * 2023-12-26 1.0.7 stable: increased image size for legiblility,
 *   replaced png thumbnail with svg, replaced content with background-image
 */

/** Helps preventing layout shift when the flag loads in the header dropdown menu */
.page-header__variants .wds-dropdown ul > li > a {
	align-items: center;
	display: flex;
}

/** Add a flag skeleton so there's no layout shift when the flag loads */
#p-variants a[hreflang]::before,
#p-variants-desktop a[hreflang]::before,
[class^="variant-"]::before,
.skin-fandomdesktop .page-header__variants a::before,
.skin-fandomdesktop .page-header__variants a::before {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	/** A little trick */
	background-image: linear-gradient(to right, rgba(var(--theme-page-dynamic-color-1--rgb), .2), rgba(var(--theme-page-dynamic-color-1--rgb), .2));
	content: '';
	/** Necessary so the element doesn't adjust to its container's height despite declared height property */
	display: inline-block;
	height: 18px;
	/** Prevents 1px of background still being visible above some flags */
	line-height: 1;
	margin-inline-end: 8px;
	width: 24px;
	/** For wds-dropdown */
	min-width: 24px;
}

/**
 * zh (不转换/不轉換)
 * Hani/Hans/Hant, depends on the wiki used
 */
#p-variants a[hreflang="zh"]::before,
#p-variants-desktop a[hreflang="zh"]::before,
.variant-zh::before,
.skin-fandomdesktop .page-header__variants a[href$="variant=zh"]::before,
.skin-fandomdesktop .page-header__variants a[href*="variant=zh&"]::before {
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/f/ff/BCP_47_flag_zh.svg );
}
/* currentColor won't work */
.skin-fandomdesktop.theme-fandomdesktop-dark .page-header__variants a[href$="variant=zh"]::before,
.skin-fandomdesktop.theme-fandomdesktop-dark .page-header__variants a[href*="variant=zh&"]::before {
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 3 24 18" fill="none"><title>zh</title><rect x="1" y="4" rx="2" width="22" height="16" fill="%23cccccc" fill-opacity="0.44" /><!-- 中 --><path fill="%23ffffff" fill-opacity="0.88" d="M12.4745 12.858V9.413H16.2055V12.858ZM7.7555 12.858V9.413H11.4735V12.858ZM12.4745 8.464V6.150H11.4735V8.464H6.8065V14.613H7.7555V13.807H11.4735V18.02H12.4745V13.807H16.2055V14.548H17.1935V8.464Z" /></svg>' );
}

/** zh-Hans (简体) */
#p-variants a[hreflang="zh-Hans"]::before,
#p-variants-desktop a[hreflang="zh-Hans"]::before,
.variant-zh-hans::before,
.skin-fandomdesktop .page-header__variants a[href*="variant=zh-hans"]::before {
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/b/be/BCP_47_flag_zh-hans.svg );
}
/* currentColor won't work */
.skin-fandomdesktop.theme-fandomdesktop-dark .page-header__variants a[href*="variant=zh-hans"]::before {
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 3 24 18" fill="none"><title>zh-Hans</title><rect x="1" y="4" rx="2" width="22" height="16" fill="%23cccccc" fill-opacity="0.44" /><!-- 简 --><path fill="%23ffffff" fill-opacity="0.88" d="M7.944 7.224H11.909V8.043H7.944V7.224ZM12.858 7.237H17.59V8.069H12.858V7.237ZM8.178 6.054L9.101 6.288C8.62 7.64 7.788 8.94 6.93 9.772C6.748 9.616 6.358 9.356 6.124 9.239C7.008 8.472 7.749 7.289 8.178 6.054ZM13.248 6.067L14.171 6.288C13.794 7.536 13.118 8.745 12.39 9.525C12.208 9.356 11.818 9.096 11.584 8.966C12.325 8.264 12.923 7.198 13.248 6.067ZM8.919 7.848L9.738 7.549C10.089 8.082 10.492 8.836 10.648 9.291L9.79 9.642C9.647 9.161 9.27 8.407 8.919 7.848ZM14.249 7.822L15.055 7.497C15.484 8.056 15.991 8.823 16.199 9.343L15.354 9.72C15.159 9.213 14.691 8.407 14.249 7.822ZM10.05 13.828H13.989V14.543H10.05V13.828ZM6.878 11.111H7.827V18.027H6.878V11.111ZM10.05 10.019H16.667V10.89H10.05V10.019ZM7.463 9.993L8.178 9.512C8.737 9.98 9.374 10.643 9.673 11.098L8.919 11.631C8.646 11.176 8.009 10.474 7.463 9.993ZM16.16 10.019H17.109V16.87C17.109 17.416 16.992 17.676 16.602 17.819C16.212 17.962 15.575 17.975 14.587 17.962C14.548 17.715 14.418 17.351 14.275 17.104C15.003 17.13 15.705 17.13 15.887 17.117C16.095 17.104 16.16 17.052 16.16 16.87V10.019ZM10.492 12.736V15.713H13.56V12.736H10.492ZM9.647 11.969H14.431V16.467H9.647V11.969Z" /></svg>' );
}

/** zh-Hant (繁體) */
#p-variants a[hreflang="zh-Hant"]::before,
#p-variants-desktop a[hreflang="zh-Hant"]::before,
.variant-zh-hant::before,
.skin-fandomdesktop .page-header__variants a[href*="variant=zh-hant"]::before {
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/f/fa/BCP_47_flag_zh-hant.svg );
}
/* currentColor won't work */
.skin-fandomdesktop.theme-fandomdesktop-dark .page-header__variants a[href*="variant=zh-hant"]::before {
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 3 24 18" fill="none"><title>zh-Hant</title><rect x="1" y="4" rx="2" width="22" height="16" fill="%23cccccc" fill-opacity="0.44" /><!-- 繁 --><path fill="%23ffffff" fill-opacity="0.88" d="M13.846 6.08L14.704 6.288C14.249 7.588 13.469 8.81 12.598 9.616C12.455 9.46 12.117 9.135 11.922 8.992C12.754 8.277 13.443 7.211 13.846 6.08ZM16.173 7.653L17.083 7.757C16.459 10.305 14.86 11.748 12.546 12.632C12.429 12.437 12.13 12.086 11.935 11.917C14.184 11.202 15.666 9.902 16.173 7.653ZM13.521 7.38H17.85V8.16H13.131L13.521 7.38ZM7.788 6.041L8.633 6.249C8.204 7.185 7.476 8.108 6.787 8.719C6.644 8.576 6.28 8.329 6.072 8.225C6.787 7.666 7.424 6.873 7.788 6.041ZM7.619 6.886H12.299V7.562H7.281L7.619 6.886ZM13.794 7.991C14.457 9.954 15.991 11.397 18.162 11.956C17.967 12.151 17.707 12.502 17.577 12.749C15.315 12.047 13.794 10.435 13.027 8.173L13.794 7.991ZM11.48 15.31H12.442V18.066H11.48V15.31ZM11.051 12.021L11.87 12.424C11.233 12.97 10.427 13.529 9.803 13.906L9.153 13.542C9.777 13.139 10.596 12.489 11.051 12.021ZM13.534 12.528L14.353 12.996C13.092 13.88 11.363 14.881 10.037 15.505L9.426 15.089C10.765 14.439 12.507 13.347 13.534 12.528ZM7.645 13.503L8.308 12.97C9.257 13.36 10.479 13.997 11.129 14.478L10.414 15.076C9.829 14.608 8.607 13.932 7.645 13.503ZM13.937 14.166L14.587 13.698C15.692 14.205 17.07 15.011 17.772 15.622L17.083 16.155C16.42 15.557 15.055 14.712 13.937 14.166ZM13.742 16.376L14.431 15.843C15.523 16.181 16.94 16.792 17.694 17.286L16.953 17.871C16.264 17.403 14.86 16.753 13.742 16.376ZM6.332 14.959C8.763 14.959 12.728 14.907 16.472 14.816L16.42 15.531C12.767 15.635 8.867 15.739 6.371 15.778L6.332 14.959ZM9.335 15.882L10.193 16.22C9.309 16.87 7.944 17.507 6.852 17.897C6.683 17.728 6.345 17.39 6.124 17.234C7.268 16.922 8.542 16.415 9.335 15.882ZM7.294 8.173H8.074C7.879 9.434 7.58 11.072 7.346 12.06L6.553 11.969C6.8 10.981 7.112 9.369 7.294 8.173ZM9.166 8.381H9.868C9.777 9.317 9.621 10.513 9.478 11.254L8.776 11.228C8.919 10.461 9.088 9.291 9.166 8.381ZM7.58 8.173H11.363V8.758H7.58V8.173ZM6.085 9.499H12.52V10.11H6.085V9.499ZM7.086 10.929H12.507V11.527H7.086V10.929ZM11.103 8.173H11.857C11.857 8.173 11.844 8.394 11.831 8.524C11.675 11.046 11.493 11.982 11.194 12.307C10.999 12.502 10.804 12.593 10.505 12.606C10.258 12.619 9.816 12.619 9.374 12.58C9.361 12.398 9.283 12.112 9.179 11.943C9.634 11.995 10.037 11.995 10.206 11.995C10.375 11.995 10.466 11.982 10.57 11.865C10.791 11.631 10.947 10.721 11.103 8.29V8.173Z" /></svg>' );
}

/** zh-Hans-CN (大陆简体) */
#p-variants a[hreflang="zh-Hans-CN"]::before,
#p-variants-desktop a[hreflang="zh-Hans-CN"]::before,
.variant-zh-hans-cn::before,
.variant-zh-cn::before,
.skin-fandomdesktop .page-header__variants a[href*="variant=zh-cn"]::before {
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg );
}

/** zh-Hant-HK (香港繁體)‬ */
#p-variants a[hreflang="zh-Hant-HK"]::before,
#p-variants-desktop a[hreflang="zh-Hant-HK"]::before,
.variant-zh-hant-hk::before,
.variant-zh-hk::before,
.skin-fandomdesktop .page-header__variants a[href*="variant=zh-hk"]::before {
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/5/5b/Flag_of_Hong_Kong.svg );
}

/** zh-Hant-MO (澳門繁體) */
#p-variants a[hreflang="zh-Hant-MO"]::before,
#p-variants-desktop a[hreflang="zh-Hant-MO"]::before,
.variant-zh-hant-mo::before,
.variant-zh-mo::before,
.skin-fandomdesktop .page-header__variants a[href*="variant=zh-mo"]::before {
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/6/63/Flag_of_Macau.svg );
}

/** zh-Hans-MY (大马简体) */
#p-variants a[hreflang="zh-Hans-MY"]::before,
#p-variants-desktop a[hreflang="zh-Hans-MY"]::before,
.variant-zh-hans-my::before,
.variant-zh-my::before,
.skin-fandomdesktop .page-header__variants a[href*="variant=zh-my"]::before {
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/6/66/Flag_of_Malaysia.svg );
}

/** zh-Hans-SG (新加坡简体) */
#p-variants a[hreflang="zh-Hans-SG"]::before,
#p-variants-desktop a[hreflang="zh-Hans-SG"]::before,
.variant-zh-hans-sg::before,
.variant-zh-sg::before,
.skin-fandomdesktop .page-header__variants a[href*="variant=zh-sg"]::before {
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/4/48/Flag_of_Singapore.svg );
}

/** zh-Hant-TW (臺灣正體)‬ */
#p-variants a[hreflang="zh-Hant-TW"]::before,
#p-variants-desktop a[hreflang="zh-Hant-TW"]::before,
.variant-zh-hant-tw::before,
.variant-zh-tw::before,
.skin-fandomdesktop .page-header__variants a[href*="variant=zh-tw"]::before {
	background-image: url( https://upload.wikimedia.org/wikipedia/commons/7/72/Flag_of_the_Republic_of_China.svg );
}