Jump to content

User:Guycn2/UserInfoPopup.css

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/*


== User Info Popup ==

Adds an "i" (info) icon at the top of user-related pages
(e.g. user pages, user talk pages, "Contributions" pages, etc.)

The color of the "i" icon represents the amount of time passed since the user last edited:
* Green – user last edited less than 20 minutes ago
* Orange – user last edited more than 20 minutes ago, but less than 3 months ago
* Red – user last edited more than 3 months ago

Hover over the "i" icon to quickly view useful information about the relevant user:
* Registration date
* Number of edits
* Time elapsed since last edit
* User groups (rights), incl. global ones
* Latest block time (incl. range and global blocks, when applicable)
* Gender (if disclosed)

See full documentation at:
[[User:Guycn2/UserInfoPopup]]

See also:
* [[User:Guycn2/UserInfoPopup.js]] – for the script's main source code

Skins supported:
Vector (both 2022 and 2010), Monobook, Timeless, and Minerva.
Also fully supported on the mobile interface.

Dependencies:
* mediawiki.api
* mediawiki.language.months
* mediawiki.user
* mediawiki.util
* user.options
* oojs-ui-core


Written by: [[User:Guycn2]]


*/

.mw-indicators:has( #mw-indicator-user-info-popup-indicator ):has( #mw-indicator-mw-helplink ) {
	display: flex;
}

.skin-vector-2022 .mw-indicators:has( #mw-indicator-user-info-popup-indicator ):has( #mw-indicator-mw-helplink ) {
	column-gap: unset;
	flex-wrap: nowrap;
}

.skin-vector-legacy .mw-indicators:has( #mw-indicator-user-info-popup-indicator ) {
	padding-top: .3em;
}

.skin-monobook #content:has( #user-info-popup-popup:not( .oo-ui-element-hidden ) ) {
	z-index: 10;
}

.skin-monobook .mw-indicators:has( #user-info-popup-popup:not( .oo-ui-element-hidden ) ) {
	position: relative;
	z-index: 10;
}

#mw-indicator-user-info-popup-indicator {
	cursor: pointer;
	padding: 0 .1rem;
}

.skin-vector-2022 #right-navigation #mw-indicator-user-info-popup-indicator {
	display: flex;
	align-items: center;
}

.ltr.skin-vector-2022 #right-navigation #mw-indicator-user-info-popup-indicator {
	margin-left: .11rem;
	margin-right: .05rem;
}

.rtl.skin-vector-2022 #right-navigation #mw-indicator-user-info-popup-indicator {
	margin-right: .11rem;
	margin-left: .05rem;
}

body:not( .skin-timeless ) .mw-indicators > #mw-indicator-user-info-popup-indicator,
.skin-timeless .mw-indicators:has( #mw-indicator-mw-helplink ) > #mw-indicator-user-info-popup-indicator {
	margin-left: .6rem;
	margin-right: .6rem;
}

.ltr.skin-timeless #mw-indicator-user-info-popup-indicator:only-child {
	margin-right: .8rem;
}

.rtl.skin-timeless #mw-indicator-user-info-popup-indicator:only-child {
	margin-left: .8rem;
}

.skin-timeless #mw-indicator-user-info-popup-indicator {
	position: relative;
	bottom: .5rem;
}

.skin-minerva #mw-indicator-user-info-popup-indicator {
	margin: 1rem .25rem;
	position: relative;
	z-index: 1;
}

.ltr.skin-minerva #mw-indicator-user-info-popup-indicator {
	float: right;
}

.rtl.skin-minerva #mw-indicator-user-info-popup-indicator {
	float: left;
}

.minerva-header:has( #main-menu-input[ aria-expanded="true" ] ) ~ #mw-indicator-user-info-popup-indicator {
	z-index: 0;
}

.user-info-popup-icon {
	width: 20.3px;
	height: 20.3px;
	opacity: .73;
	border-radius: 50%;
	transition: all 300ms;
}

#mw-indicator-user-info-popup-indicator:hover > .user-info-popup-icon,
#mw-indicator-user-info-popup-indicator:focus-within > .user-info-popup-icon {
	opacity: 1;
	filter: drop-shadow( 0 0 .8rem rgba( 0, 0, 0, .27 ) );
}

.skin-vector-2022 #right-navigation .user-info-popup-icon {
	margin-top: .12rem;
}

.skin-timeless .user-info-popup-icon {
	margin-top: 0;
}

.skin-minerva .user-info-popup-icon {
	margin-top: .25rem;
}

#user-info-popup-popup {
	cursor: default;
	font-size: .71rem;
}

.skin-vector-2022 #user-info-popup-popup.oo-ui-popupWidget-anchored-top {
	margin-top: 11.25px;
}

.skin-vector-2022 #user-info-popup-popup:not( .oo-ui-popupWidget-anchored-top ) {
	top: -10.8px !important;
}

.skin-vector-legacy #user-info-popup-popup {
	top: -6.6px !important;
}

.skin-monobook #user-info-popup-popup.oo-ui-popupWidget-anchored-top {
	margin-top: 8px;
}

.skin-timeless #user-info-popup-popup.oo-ui-popupWidget-anchored-top {
	margin-top: 10.5px;
}

.skin-minerva #user-info-popup-popup.oo-ui-popupWidget-anchored-top {
	margin-top: 7px;
}

.skin-minerva #user-info-popup-popup:not( .oo-ui-popupWidget-anchored-top ) {
	top: -7.6px !important;
}

.ltr #user-info-popup-popup.oo-ui-popupWidget-anchored-end,
.rtl #user-info-popup-popup.oo-ui-popupWidget-anchored-start {
	margin-right: 10px;
}

.rtl #user-info-popup-popup.oo-ui-popupWidget-anchored-end,
.ltr #user-info-popup-popup.oo-ui-popupWidget-anchored-start {
	margin-left: 10px;
}

.ltr.skin-monobook #user-info-popup-popup.oo-ui-popupWidget-anchored-end,
.rtl.skin-monobook #user-info-popup-popup.oo-ui-popupWidget-anchored-start {
	margin-right: 7px;
}

.rtl.skin-monobook #user-info-popup-popup.oo-ui-popupWidget-anchored-end,
.ltr.skin-monobook #user-info-popup-popup.oo-ui-popupWidget-anchored-start {
	margin-left: 7px;
}

.skin-vector-2022 #user-info-popup-popup:not( .oo-ui-popupWidget-anchored-top ) > .oo-ui-popupWidget-anchor,
.skin-vector-legacy #user-info-popup-popup > .oo-ui-popupWidget-anchor,
.skin-minerva #user-info-popup-popup:not( .oo-ui-popupWidget-anchored-top ) > .oo-ui-popupWidget-anchor {
	top: 22px !important;
}

@media screen and ( max-width: 600px ) {
	
	.ltr.skin-vector-2022 #user-info-popup-popup.oo-ui-popupWidget-anchored-top > .oo-ui-popupWidget-anchor {
		left: 89.2% !important;
	}
	
	.rtl.skin-vector-2022 #user-info-popup-popup.oo-ui-popupWidget-anchored-top > .oo-ui-popupWidget-anchor {
		right: 89.2% !important;
	}
	
}

#user-info-popup-popup > .oo-ui-popupWidget-popup {
	background-color: #fefefe;
}

#user-info-popup-popup.oo-ui-popupWidget-anchored-top > .oo-ui-popupWidget-anchor::after {
	border-bottom-color: #fefefe;
}

.ltr #user-info-popup-popup.oo-ui-popupWidget-anchored-end > .oo-ui-popupWidget-anchor::after,
.rtl #user-info-popup-popup.oo-ui-popupWidget-anchored-start > .oo-ui-popupWidget-anchor::after {
	border-left-color: #fefefe;
}

.ltr #user-info-popup-popup.oo-ui-popupWidget-anchored-start > .oo-ui-popupWidget-anchor::after,
.rtl #user-info-popup-popup.oo-ui-popupWidget-anchored-end > .oo-ui-popupWidget-anchor::after {
	border-right-color: #fefefe;
}

#user-info-popup-popup .oo-ui-popupWidget-body {
	min-width: 197px;
}

#user-info-popup-content {
	line-height: 1.68;
}

.oo-ui-popupWidget-body:has( #user-info-popup-content ) {
	height: unset !important;
	max-height: unset !important;
	scrollbar-gutter: unset;
}

#user-info-popup-header {
	border-bottom: .5px solid #dbdbdb;
	padding-bottom: 4px;
	margin-bottom: 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#user-info-popup-username {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #303030;
	font-weight: bold;
	text-align: center;
	padding: 0 .65rem;
}

#user-info-popup-gender-symbol {
	margin-top: -.13rem;
}

#user-info-popup-list {
	font-size: 95%;
	list-style: none;
	color: #4d4d4d;
	margin-left: 0;
	margin-right: 0;
}

.user-info-popup-property {
	font-weight: bold;
}

.user-info-popup-value > a {
	text-decoration: none;
	color: #4775d1;
	transition: color 300ms;
}

.user-info-popup-value > a:hover,
.user-info-popup-value > a:focus {
	text-decoration: none;
	color: #2952a3;
}

#user-info-popup-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: .35rem;
	height: 76%;
}

.oo-ui-popupWidget-body:has( #user-info-popup-placeholder ) {
	height: 5.87rem !important;
	max-height: unset !important;
}

#user-info-popup-throbber {
	opacity: .09;
	width: 1.88rem;
}

#user-info-popup-placeholder-text {
	color: #878787;
}

.skin-timeless #user-info-popup-placeholder-text,
.skin-minerva #user-info-popup-placeholder-text {
	margin-top: 4px;
	margin-bottom: 0;
}