dev

Note: After publishing, you may have to bypass your browser's cache to see the changes.

/*
 * @title        ModernizedChanges.css
 * @version      2023.12.09
 * @description  Modernizes the appearance of change-related pages.
 * @author       Himmalerin
 * @license      CC-BY-SA-3.0
 */

/*------------------------------------*\
  #BASE-STYLES
\*------------------------------------*/

/**
 * Store the content values as variables for reuse
 */

/* Special:RecentChanges */
.mw-changeslist,
/* Special:Log */
.mw-special-Log ul,
/* Special:Contributions */
.mw-contributions-list,
/* ?action=history */
#pagehistory {
	/* Be sure to replace trailing whitespace with '\00a0' to avoid it being
	   removed by minification */
	--mc-close: ')';

	--mc-followed: ' (followed)';

	--mc-bytes: ' bytes';
	--mc-bytes-pos: 'added\00a0';
	--mc-bytes-neg: 'removed\00a0';

	--mc-edit: ' edit';
	--mc-edit-singular: 'Edited by:\00a0';
	--mc-edit-plural: 'Edits by:\00a0';

	--mc-change-singular: 'Changed by:\00a0';
	--mc-change-plural: 'Changes by:\00a0';
	--mc-summary: 'Summary:\00a0(';
	--mc-log-reason: 'Reason:\00a0';

	--mc-contrib-current: ' revision)';
}

/**
 * Grey-out less significant parts of the interface
 */

/* Everything by default */
.mw-enhanced-rc,
/* Difference in page size, --mc-bytes* */
.mw-diff-bytes::before,
.mw-diff-bytes::after,
/* Edit summary, --mc-summary */
.comment--without-parentheses::before,
.comment--without-parentheses::after,
/* Log summary/reason, --mc-log-reason */
.mw-changeslist-log .comment::before,
/* Single edit, --mc-edit-singular */
.mw-changeslist-line-inner-userLink::before,
.mw-enhanced-rc-nested > .mw-userlink::before,
/* Multiple edits, --mc-edit-plural */
.changedby::before {
	color: var(--themed-overlay-color);
}

/**
 * Reset text color of certain parts
 */

/* Timestamps */
td.mw-enhanced-rc,
/* Edit summary */
.comment--without-parentheses,
/* Log reason */
.comment,
/* Expiration date of block */
.blockExpiry {
	color: var(--theme-page-text-color);
}

/**
 * Changes card
 */

/* Special:RecentChanges, grouped */
.client-js .mw-changeslist table.mw-enhanced-rc,
/* Special:RecentChanges, ungrouped */
.client-js .mw-changeslist li,
/* Special:SocialActivity */
.social-activity-list li,
/* Special:Contributions */
.mw-contributions-list > li,
/* Special:Log */
.mw-special-Log #mw-content-text ul li,
/* ?action=history */
#pagehistory li {
	position: relative;
	display: block;
	margin: 16px 12px;
	padding: 12px 18px;
	border: 1px solid var(--theme-border-color);
	border-radius: 3px;
	background-color: var(--theme-page-background-color--secondary);
	box-shadow: 0 6px 12px rgba(0,0,0,.15);
}

/* Hide the '..' seperators */
.mw-changeslist-separator,
.mw-changeslist-line-inner-separatorAfterLinks {
	display: none;
	font-size: 0;
}

/*------------------------------------*\
  #EDIT-MARKERS
\*------------------------------------*/

/* Base styles for all markers */
.newpage,
.minoredit,
.botedit,
.unpatrolled {
	position: absolute;
	top: 0;
	left: 0;

	width: 18px;
	height: 18px;
	border-radius: 50%;

	color: rgba(0, 0, 0, 0);
	transform: translateY(2px);
}

.newpage::before,
.minoredit::before,
.botedit::before,
.unpatrolled::before {
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
}

/**
 * New page marker
 */
.newpage {
	background-color: #006400;
}

/* Add a "+" */
.newpage::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fefefe' viewBox='0 0 20 20'%3E%3Cpath d='M11 9V4H9v5H4v2h5v5h2v-5h5V9z'/%3E%3C/svg%3E");
}

/**
 * Minor edit marker
 */
.minoredit {
	background-color: grey;
}

/**
 * Bot edit marker
 * "Warning tape" style gradient
 */
.botedit {
	background: repeating-linear-gradient(
		45deg,
		#ffcc00,
		#ffcc00 4px,
		#353535 4px,
		#353535 7px
	);
}

/**
 * Unpatrolled page marker
 * More specific to overrule Fandom's colors
 */
.ooui-theme-fandom .unpatrolled {
	background-color: #fefefe;
	color: rgba(0, 0, 0, 0);
}

.unpatrolled::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d33' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1010 10A10 10 0 0010 0zm1 16H9v-2h2zm0-4H9V4h2z'/%3E%3C/svg%3E");
}

/*------------------------------------*\
  #RECENT-CHANGES
  Special:RecentChanges
\*------------------------------------*/

/**
 * Legend for edit markers
 * See the #EDIT-MARKERS section
 */

/* Make the legend centered on the page instead of floating to the right */
.mw-changeslist-legend {
	float: unset;
	margin: unset;
}

.mw-changeslist-legend dt {
	position: static;
}

.mw-changeslist-legend dd {
	margin-left: 1em;
	padding: 0.4em;
}

/* Shove the byte change down so it lines up with the description */
.mw-changeslist-legend .mw-plusminus-pos {
	margin-top: 0.3em;
}

.mw-changeslist-legend .mw-plusminus-pos::before,
.mw-changeslist-legend .mw-plusminus-pos::after {
	content: '';
}

/**
 * Shove content onto new lines
 */

/* User info */
.mw-changeslist-line-inner-separatorAftercharacterDiff, 
/* Edit summaries */
.comment--without-parentheses,
/* Edit tags */
.mw-tag-markers,
/* Nested user info */
.mw-diff-bytes ~ .mw-changeslist-separator,
/* Multiple log change usernames */
.mw-changeslist-log.mw-collapsible .mw-changeslist-separator,
/* Special:Log, log summary */
.mw-changeslist-log .comment {
	display: block;
}

/**
 * Bold important parts of the interface
 */

/* Page titles */
.mw-title,
/* Log type */
.mw-changeslist-log .mw-changeslist-line-inner-logLink > .mw-changeslist-links,
/* Affected page name */
.mw-changeslist-log .mw-changeslist-line-inner-logEntry > a:last-of-type,
/* Nested Log type */
.mw-changeslist-log td.mw-changeslist-line-inner:first-of-type,
/* Nested log affected page names */
.mw-changeslist-log .mw-enhanced-rc-nested > a:last-of-type,
/* Block log: Name of blocked user */
.mw-changeslist-log-block .mw-userlink:last-of-type,
/* Move log: Last two links are page titles */
.mw-changeslist-log-move .mw-changeslist-line-inner-logEntry > a:nth-last-child(-n+2),
/* Upload log: Name of uploaded file */
.mw-changeslist-log-upload .mw-changeslist-line-inner-logEntry > a:last-of-type {
	font-weight: bold;
}

/* Increase font-size of page titles */
.mw-title {
	font-size: 1.2em;
	line-height: 1;
}

/* Shrink the history links and user tool links */
.mw-changeslist-links,
.mw-tag-markers {
	font-size: 0.9em;
}

/* Prefix single edit usernames with --mc-edit-singular */
.mw-changeslist-line-inner-userLink::before {
	content: var(--mc-edit-singular);
}

/* Prefix multiple edit usernames with --mc-edit-plural */
.changedby::before {
	content: var(--mc-edit-plural);
}

/* Mark followed pages with the contents of --mc-watched */
.mw-changeslist-line-watched .mw-title::after {
	content: var(--mc-followed);
	font-weight: normal;
	font-size: 0.8em;
}

/* Mark edit summaries with the contents of --mc-summary */
.comment--without-parentheses::before {
	content: var(--mc-summary);
}

/**
 * Size diffs
 */

/* Mark increases in page size with --mc-bytes-pos */
.mw-plusminus-pos::before {
	content: var(--mc-bytes-pos);
}

/* Mark decreases in page size with --mc-bytes-neg */
.mw-plusminus-neg::before {
	content: var(--mc-bytes-neg);
}

/* Mark all changes in page size with --mc-bytes */
.mw-plusminus-pos::after,
.mw-plusminus-neg::after {
	content: var(--mc-bytes);
}

/* Keep the --mc-bytes* text unbolded even if there's a large edit */
.mw-diff-bytes::before,
.mw-diff-bytes::after {
	font-weight: normal;
}

/**
 * Grouped edits dropdown toggle
 */

/* Increase the size target area for clicking on the toggle */
.mw-changeslist .mw-enhancedchanges-arrow-space {
	width: 30px;
	height: 25px;
}

/* Unset the existing dropdown arrow */
.mw-changeslist .mw-collapsible-arrow.mw-collapsible-toggle-collapsed,
.mw-changeslist .mw-collapsible-arrow.mw-collapsible-toggle-expanded {
	background-image: unset;
}

/* Base styles for the toggles */
.mw-changeslist .mw-collapsible-arrow.mw-collapsible-toggle-collapsed::before,
.mw-changeslist .mw-collapsible-arrow.mw-collapsible-toggle-expanded::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: var(--theme-page-text-mix-color);
}

/* Icon for the collapsed toggle */
.mw-changeslist .mw-collapsible-arrow.mw-collapsible-toggle-collapsed::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4002 6.4a.7978.7978 0 01-.2344.5656l-3.2 3.2a.8.8 0 01-.872.1737.7992.7992 0 01-.4936-.7392V3.2a.8.8 0 011.3656-.5656l3.2 3.2a.7978.7978 0 01.2344.5656z'/%3E%3C/svg%3E");
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.4002 6.4a.7978.7978 0 01-.2344.5656l-3.2 3.2a.8.8 0 01-.872.1737.7992.7992 0 01-.4936-.7392V3.2a.8.8 0 011.3656-.5656l3.2 3.2a.7978.7978 0 01.2344.5656z'/%3E%3C/svg%3E");
	/* scale() is used to sharpen the svg */
	transform: translate(25%, 25%) scale(1.07, 1.07);
}

/* Icon for the expanded toggle */
.mw-changeslist .mw-collapsible-arrow.mw-collapsible-toggle-expanded::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.0002 8.8a.7978.7978 0 01-.5656-.2344l-3.2-3.2a.8.8 0 01-.1736-.872A.7992.7992 0 012.8002 4h6.4a.8.8 0 01.5656 1.3656l-3.2 3.2a.7978.7978 0 01-.5656.2344z'/%3E%3C/svg%3E");
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.0002 8.8a.7978.7978 0 01-.5656-.2344l-3.2-3.2a.8.8 0 01-.1736-.872A.7992.7992 0 012.8002 4h6.4a.8.8 0 01.5656 1.3656l-3.2 3.2a.7978.7978 0 01-.5656.2344z'/%3E%3C/svg%3E");
	transform: translate(25%, 25%);
}

/**
 * Grouped edits
 */

/* Keep edit markers from escaping */
td.mw-enhanced-rc {
	position: relative;
}

tr.mw-rcfilters-ui-highlights-enhanced-toplevel td:not(:first-child) {
	padding-bottom: 1em;
}

.mw-rcfilters-ui-highlights-enhanced-nested:not(:last-child)
	td:not(:nth-child(2)) {
	border-bottom: 1px solid #c8ccd1;
}

table.mw-enhanced-rc td.mw-enhanced-rc-nested {
	padding: 0.5em 0 0.5em 2em;
}

/* Move the edit markers */
.mw-rcfilters-ui-highlights-enhanced-nested .newpage,
.mw-rcfilters-ui-highlights-enhanced-nested .minoredit,
.mw-rcfilters-ui-highlights-enhanced-nested .botedit,
.mw-rcfilters-ui-highlights-enhanced-nested .unpatrolled {
	transform: translate(40%, 60%);
}

/* Bring the time over so it's beneath the main time */
.mw-enhanced-rc-nested > .mw-enhanced-rc-time {
	position: absolute;
	transform: translateX(-155%);
}

/* Shove the diff text towards the right */
.mw-diff-bytes {
	margin-left: 0.5em;
}

/**
 * Ungrouped edits
 */

/* Remove the left margin from the changes list */
.mw-changeslist > ul.special {
	margin-left: 0;
}

.mw-changeslist > ul .newpage,
.mw-changeslist > ul .minoredit,
.mw-changeslist > ul .botedit,
.mw-changeslist > ul .unpatrolled {
	position: relative;
	display: inline-block;
	font-size: 0;
}

/**
 * Recent log entries
 */

/* Remove the parenthesis from around log titles */
.mw-changeslist-log
	.mw-changeslist-line-inner-logLink
	> .mw-changeslist-links::before,
.mw-changeslist-log
	.mw-changeslist-line-inner-logLink
	> .mw-changeslist-links::after,
/* Keep the contents of --mc-edit-singular from showing up */
.mw-changeslist-log .mw-userlink::before {
	content: '';
}

/* Hacky CSS to remove the parenthesis around nested log titles */
.mw-collapsible.mw-changeslist-log
	.mw-changeslist-line-inner
	> span:first-of-type {
	user-select: none;

	margin-right: 0.5rem;

	font-weight: bold;
	font-size: 0;
}

.mw-changeslist-log .mw-changeslist-line-inner a:first-of-type,
.mw-collapsible.mw-changeslist-log .mw-changeslist-line-inner a {
	font-size: 1rem;
}

/* Prefix single change usernames with --mc-change-singular */
.mw-changeslist-log .mw-changeslist-line-inner-userLink::before {
	content: var(--mc-changes-singular);
}

/* Prefix multiple edit usernames with --mc-change-plural */
.mw-changeslist-log .changedby::before {
	content: var(--mc-change-plural);
}

/* Prefix log summaries with --mc-log-reason */
.mw-changeslist-log .comment::before {
	content: var(--mc-log-reason);
}

/* Shove log information onto a new line */
.mw-changeslist-log .mw-changeslist-line-inner-separatorAfterLinks {
	display: block;
}

/*------------------------------------*\
  #CONTRIBUTIONS
  Special:Contributions
\*------------------------------------*/

.social-activity-list li {
	display: flex;
}

.social-activity-list .activity-data em {
	display: block;
}

/*------------------------------------*\
  #CONTRIBUTIONS
  Special:Contributions
\*------------------------------------*/

/**
 * Bold important parts of the interface
 */

/* Page titles */
.mw-contributions-title {
	font-weight: bold;
}

/**
 * Edit markers
 */

/* Put them on the same line as the page title */
.mw-contributions-list .newpage,
.mw-contributions-list .minoredit,
.mw-contributions-list .botedit,
.mw-contributions-list .unpatrolled {
	position: relative;
	display: inline-block;

	transform: translate(0, 0.2em);
}

/* Keep them from moving content around */
.mw-contributions-list .newpage::before,
.mw-contributions-list .minoredit::before,
.mw-contributions-list .botedit::before,
.mw-contributions-list .unpatrolled::before {
	position: absolute;
	width: 18px;
}

/**
 * Current Revision
 */

/* Move the to the upper right */
.mw-uctop {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-0.5em, 0.4em);
}

/* Append the contents of --mc-contrib-current */
.mw-uctop::after {
	content: var(--mc-contrib-current);
}

/*------------------------------------*\
  #LOGS
  Special:Logs
\*------------------------------------*/

/**
 * Bold important parts of the interface
 */

/* Username of the person performing the action */
.mw-special-Log .mw-userlink,
/* The last link in each log entry */
.mw-special-Log #content ul > li > a:last-of-type,
/* Block log: Block expiration date */
.mw-special-Log .blockExpiry,
/* Move log: Page origin */
.mw-logline-move > a:nth-last-child(3) {
	font-weight: bold;
}

/* Shove the log summary onto a new line */
.mw-special-Log .comment {
	display: block;
}

/* Prefix log summaries with --mc-log-reason */
.mw-special-Log .comment::before {
	content: var(--mc-log-reason);
}

/*------------------------------------*\
  #PAGE-HISTORY
  ?action=history
\*------------------------------------*/

/**
 * Bold important parts of the interface
 */

/* Usernames */
.history-user > .mw-userlink {
	font-weight: bold;
}

/* Edit markers */
#pagehistory .newpage,
#pagehistory .minoredit,
#pagehistory .botedit,
#pagehistory .unpatrolled {
	position: relative;
	display: inline-block;
}

/* Color the selected history cards */
#pagehistory li.selected {
	border-color: var(--theme-link-color);
}

/* Mark selected history cards with a triangle in the upper left */
#pagehistory li.selected::before {
	content: '';

	position: absolute;
	left: 0;
	top: 0;

	width: 0;
	height: 0;

	border-style: solid;
	border-width: 16px 16px 0 0;
	border-color: var(--theme-link-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

/**
 * Bold and increase font size of important parts of the interface
 */
#pagehistory > li > span.mw-changeslist-links:not(.mw-history-histlinks) {
	font-size: 1em;
	font-weight: bold;
}

/**
 * Undo edit text
 */

/* Remove the parenthesis from around the undo edit text */
#pagehistory > li > .mw-changeslist-links:not(.mw-history-histlinks)::before,
#pagehistory > li > .mw-changeslist-links:not(.mw-history-histlinks)::after {
	content: '';
}

/* Append --mc-edit onto the undo edit text */
.mw-history-undo > a::after {
	content: var(--mc-edit);
}

/*------------------------------------*\
  #PAGE-DIFFS
  ?type=revision
\*------------------------------------*/

/**
 * Edit markers
 */

/* Put them on the same line as the page title */
.diff .newpage,
.diff .minoredit,
.diff .botedit,
.diff .unpatrolled {
	position: relative;
	display: inline-block;
	transform: translateY(25%);
}