User:Guycn2/UserInfoPopup.css

/*

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; }

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

.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; }

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

.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; }

cursor: default; font-size: .71rem; }
 * 1) user-info-popup-popup {

.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; } }

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

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

.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; }

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

line-height: 1.68; }
 * 1) user-info-popup-content {

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

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

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

margin-top: -.13rem; }
 * 1) user-info-popup-gender-symbol {

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

.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; }

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

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

opacity: .09; width: 1.88rem; }
 * 1) user-info-popup-throbber {

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

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