MediaWiki:ModernizedChanges.css

/* * @title       ModernizedChanges.css * @version     2020.10.01 * @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 */ /* Be sure to replace trailing whitespace with '\00a0' to avoid it being removed by minification */ --mc-close: ')';
 * 1) pagehistory {

--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(--themed-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 */ position: relative; display: block; margin: 16px 12px; padding: 12px 18px; border: 1px solid var(--themed-border-color); border-radius: 3px; background-color: var(--themed-page-background--secondary); box-shadow: var(--themed-window-box-shadow); }
 * 1) pagehistory li {

/* 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(--themed-text-color--secondary); }

/* 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 */ position: relative; display: inline-block; }
 * 1) pagehistory .newpage,
 * 2) pagehistory .minoredit,
 * 3) pagehistory .botedit,
 * 4) pagehistory .unpatrolled {

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

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

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

width: 0; height: 0;

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

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

/** * Undo edit text */

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

/* 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%); }