MediaWiki:Gadget-Navigation-Popups.css

.popupMoreLink {
  display: block;
  text-align: right;
  cursor: pointer;
}

ins.popupDiff {
  background: #afe;
}

del.popupDiff {
  background: #ffe6e6;
}

#selectionPreview {
  border: 2px solid #ddd;
  background-color: #eef;
  padding: 6px;
}

.navpopup {
  border: 1px solid #bbb;
  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  font-size: 11px;
  box-shadow: 0 3px 8px rgba( 50, 50, 50, 0.35 );
  word-wrap: break-word;
}

.navpopup hr {
  color: #aaa !important;
  background-color: #aaa !important;
}

/* Configure Drag bar color */
.popupDrag {
  background-color: #ffbe20;
  height: 5px;
  margin-top: -5px;
  margin-bottom: 5px;
}

.popupDragHandle {
  cursor: move;
  position: relative;
}

/* menu magic - many thanks to [[User:Zocky]]! */

/* popups */
.popup_menu {
  display: none;
  position: absolute;
  left: 0;
  margin: 0;
  margin-top: 1.4em;
  line-height: 1.25em;
  top: 0;
  z-index: 2;
  width: 10em;
  background: white;
  border: 1px solid grey;
  padding: 0 !important;
  margin-left: -6px;
  border-width: 1px 1px 1px 6px;
}

.popup_menu li { /* both: popup_menu_row and popup_menu_item */
  list-style: none;
  margin:0;
  padding:0;
}

.popup_menu a {
  display: block;
  padding: 3px;
  color: #555;
}

.popup_menu_row a {
  display: inline-block;
}

.popup_menu_row {
  color: #aaa;
}

.popup_drop {
  display: inline;
  position: relative;
}

.popup_drop a,
.popup_drop a:visited {
  padding: 3px;
  margin: 0;
  font-weight: bold;
  color: #0645ad;
}

.popup_drop:hover .popup_menu,
.popup_drop .popup_menu:hover {
  display: inline;
  background: white;
  padding: 2px;
  color: #555;
}

.popup_drop:hover {
  background: #ccf;
  color: #44f;
}

/* other colours, styles and so on */
.popup_menu a:hover {
  background: grey;
  color: #fff;
  text-decoration: none;
}

.popup_mainlink {
  font-size: 140%;
  font-weight: bold;
}

.popup_mainlink a {
  color: #000;
}

a.popup_change_title_link {
  color: #152;
}

.popup_diff_dates {
  font-style: italic;
  background: none;
}

.popup_menu_item a {
  display: block;
}

.popup_history_row_even {
  background: #eee;
}

.popup_history_date {
  font-weight: bold;
  font-size: 120%;
}

.popup_history_row_odd,
.popup_history_row_even {
	display: flex;
}

.popup_history_row_even td:nth-child(3),
.popup_history_row_odd td:nth-child(3) {
	flex: 3;
	word-break: break-word;
}
.popup_history_row_even td:nth-child(4),
.popup_history_row_odd td:nth-child(4) {
	flex: 7;
	word-break: break-word;
}
.popup_history_row_even > td:not(:last-child),
.popup_history_row_odd > td:not(:last-child) {
	margin-right: 2px;
}

/* disable interwiki styling */
.popupPreview a.extiw,
.popupPreview a.extiw:active {
  color: #36b;
  background: none;
  padding: 0;
}

.popupPreview .external {
  color: #36b;
}

/* this can be used in the content area to switch off
special external link styling */
.popupPreview .plainlinks a {
  background: none !important;
  padding: 0 !important;
}

/*
	Mouse safe zones for popup menu.
*/

/* eye guide suggestion */	
.popup_menu:hover
{
	box-shadow: 0 0 5px 5px rgba(179, 179, 255, 0.3)
}

/* trapezoid guide for the cursor */	
.popup_menu::before {
	content: '';
	display: block;
	position: absolute;
	height: 1.5em;
	top: -1.4em;
	left: -1.2em;
	width: calc(2 * var(--navpop-m-len, 6ch));
	transform: perspective(1px) rotateX(1deg);
}

/* make the trapezoid go behing menu items */
.popup_menu::before {
	z-index: 1;
}

.popup_menu li {
	position: relative;
	z-index: 2;
}

/* additional hover margin on the sides */
.popup_menu li::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	height: calc(100% + .5em);
	left: -1.7em;
	width: 1.7em;
}

.popup_menu li::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	height: calc(100% + .5em);
	left: calc(10em - 1px);	/* depends on the width of the menu */
	width: 1em;
}

/* 
 * Citizen override styles
 * Adapted from The Apple Wiki
 * https://theapplewiki.com/wiki/MediaWiki:Gadget-popups.css
*/

/* Disable Extension:Popups */
.mwe-popups {
	display: none !important;
}

.navpopup[style*=inline] {
	animation: navpopup-fade-in-up 200ms ease forwards;
}

@keyframes navpopup-fade-in-up {
	from {
		opacity: 0;
		transform: translate(0, 20px);
	}
}

.skin-citizen .navpopup {
	font-size: 0.8125rem;
	line-height: var(--line-height-sm);
}

.skin-citizen .navpopup,
.skin-citizen .popup_menu,
.skin-citizen .popup_drop:hover .popup_menu,
.skin-citizen .popup_drop .popup_menu:hover {
	padding: var(--space-md);
	background-color: var(--color-surface-1);
	border: 1px solid var(--border-color-base);
	border-radius: var(--border-radius--medium);
	box-shadow: var(--box-shadow-dialog);
}

.skin-citizen .popupTopLinks,
.skin-citizen .popupRedirTopLinks {
	margin-bottom: var(--space-xxs);
	font-size: 0; /* Remove dots */
}

.skin-citizen .popupImage img {
	margin-left: var(--space-xxs); /* Preserve space between title and image */
}

.skin-citizen .popup_mainlink {	
	display: block;
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-semibold);
}

.skin-citizen .popup_mainlink a {
	color: var(--color-base--emphasized);
}

.skin-citizen .popup_drop {
	font-size: 0.8125rem; /* reset */
	background: transparent !important; /* remove hover styles */
}

.skin-citizen .popupTopLinks > .popup_drop:first-of-type,
.skin-citizen .popupRedirTopLinks > .popup_drop:first-of-type {
	margin-left: calc(var(--space-xs) * -1);
}

.skin-citizen .popup_drop > a,
.skin-citizen .popup_drop > a:visited {
	display: inline-block;
	padding: var(--space-xxs) var(--space-xs);
	border-radius: var(--border-radius--small);
}

.skin-citizen .popup_drop > a,
.skin-citizen .popup_drop > a:visited,
.skin-citizen .popup_menu a {
	color: var(--color-base);
	font-weight: var(--font-weight-medium);
	transition: var(--transition-hover);
    transition-property: opacity;
	text-transform: capitalize; /* Reintroduce capitalization */
	text-decoration: none !important;
}

.skin-citizen .popup_drop > a:hover,
.skin-citizen .popup_menu a:hover {
	color: var(--color-base--emphasized);
	background-color: var(--background-color-quiet--hover);
}

.skin-citizen .popup_drop > a:active,
.skin-citizen .popup_menu a:active,
.skin-citizen .popup_drop > a:focus,
.skin-citizen .popup_menu a:focus {
	color: var(--color-base--subtle);
	background-color: var(--background-color-quiet--active);
}

.skin-citizen .popup_menu,
.skin-citizen .popup_drop:hover .popup_menu,
.skin-citizen .popup_drop .popup_menu:hover {
	width: auto;
	padding: var(--space-xs) 0 !important;
	margin-top: calc(1em + var(--space-xxs) * 2);
	overflow: hidden;
	white-space: nowrap;
}

.skin-citizen .popup_menu_row {
	color: transparent;
}

.skin-citizen .popup_menu_row a {
	margin-left: calc(var(--space-xxs) * -1);
	margin-right: calc(var(--space-xxs) * -1);
	padding-left: var(--space-xs);
	padding-right: var(--space-xs);
}

.skin-citizen .popup_menu_row span:first-child a {
	margin-left: 0;
	padding-left: var(--space-sm);
}

.skin-citizen .popup_menu_row span:last-child a {
	margin-right: 0;
	padding-right: var(--space-sm);
}

.skin-citizen .popup_menu a {
	padding: var(--space-xxs) var(--space-sm);
}

.skin-citizen .navpopup hr {
	margin: var(--space-xs) 0;
	color: transparent !important;
	background: transparent !important;
}

.skin-citizen .popupWarnRedir {
    letter-spacing: 0.05em;
}

.skin-citizen .popupWarnRedir > hr {
	margin-bottom: var( --space-sm );
}

.skin-citizen .popupData {
	color: var(--color-base--subtle);
}

.skin-citizen .popupPreview {
	line-height: var(--line-height);
}

.skin-citizen .popupPreview p {
	margin: var(--space-sm) 0;
}

.skin-citizen .popupPreview h1,
.skin-citizen .popupPreview h2,
.skin-citizen .popupPreview h3,
.skin-citizen .popupPreview h4,
.skin-citizen .popupPreview h5,
.skin-citizen .popupPreview h6,
.skin-citizen .popupPostPreview h1,
.skin-citizen .popupPostPreview h2,
.skin-citizen .popupPostPreview h3,
.skin-citizen .popupPostPreview h4,
.skin-citizen .popupPostPreview h5,
.skin-citizen .popupPostPreview h6 {
	margin: var(--space-sm) 0;
	font-size: var(--font-size-h5);
}

.skin-citizen .popupPreview > :last-child {
	margin-bottom: 0;
}

.skin-citizen .popup_history_row_even {
	background: var(--color-surface-3);
}