User:Nux/global.css
< User:Nux
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* @sa [[User:Nux/global.js]] */
/* @sa [[User:Nux/vector.js]] */
/* @sa [[User:Nux/vector.css]] */
/* @sa [[User:Nux/common.js]] */
/* @sa [[User:Nux/common.css]] */
/**
Dev version.
https://github.com/Eccenux/wiki-global-scripts
*/
/*
Popups mouse guides.
For: [[w:en:Wikipedia:Tools/Navigation popups]]
The idea was to make the more or less invisible guides (roads) for the mouse from a link to the popups menu.
Also added some safe space around the menu so that the mouse doesn't slip from the edge.
@author Maciej Nux
@license CC-BY
@started 2023-06
*/
.popup_menu:hover {
box-shadow: 0 0 5px 5px rgba(179, 179, 255, 0.3);
}
/* colors for testing *
.popup_menu li::after,
.popup_menu li::before,
.popup_menu::after,
.popup_menu::before {
background: #5554;
}
.popup_menu li {
background:white;
}
/* 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% + 0.5em);
left: -1.7em;
width: 1.7em;
}
.popup_menu li::after {
content: '';
display: block;
position: absolute;
top: 0;
height: calc(100% + 0.5em);
left: calc(10em - 1px);
/* depends on the width of the menu */
width: 1em;
}
/*
Minor
@author Maciej Nux
@license PD-trivia / CC0
*/
/* viewit tab with no real use... */
#ca-viewitgallery {
display: none;
}
/* lang on special pages */
.ns-special #p-lang-btn {
display: none;
}
/* [[phab:T330386]] DiscussionTools new topic button flickers on Firefox mobile */
.ext-discussiontools-init-new-topic-open .ext-discussiontools-init-new-topic,
.ext-discussiontools-init-new-topic-opened .ext-discussiontools-init-new-topic,
.client-nojs .ext-discussiontools-init-new-topic {
transform: none !important;
transition: none !important;
position: sticky !important;
}
/* Anti-shake for customMenuItems; [[Wikipedia:pl:Wikipedysta:Nux/personalizacja.js]] */
.vector-user-links.vector-user-links-wide {
min-width: 32em;
}
/*
Icons on links in a sidebar.
@author Maciej Nux
@license PD-trivia / CC0
@started 2022-08
*/
/* wide page tools */
#vector-page-tools-pinned-container .vector-page-tools {
/* width: 140px; */
width: 12em !important;
}
/* Wikidata link (en.wiki at al) */
#t-wikibase span::before {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/66/Wikidata-logo-en.svg);
background-size: 0.9em;
width: 0.9em;
height: 0.9em;
background-repeat: no-repeat;
background-position: left bottom;
margin-bottom: -1px;
margin-right: 0.2ch;
margin-left: 0;
content: " ";
display: inline-block;
box-sizing: border-box;
}
/* Current revision link */
#t-permalink span::before {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a1/Clock-By-Atif_-Arshad-1230728.svg);
background-size: 0.9em;
width: 0.9em;
height: 0.9em;
background-repeat: no-repeat;
background-position: left bottom;
margin-bottom: -1px;
margin-right: 0.5ch;
margin-left: 0;
content: " ";
display: inline-block;
box-sizing: border-box;
}
/* Edit interlanguage links (en.wiki at al) */
.wb-langlinks-link > a::before {
background-image: url(/w/load.php?modules=skins.vector.icons&image=language&format=original&skin=vector-2022&version=ia7tj);
background-size: 0.9em;
width: 0.9em;
height: 0.9em;
background-repeat: no-repeat;
background-position: left bottom;
margin-bottom: -1px;
margin-right: 0.5ch;
margin-left: 0;
content: " ";
display: inline-block;
box-sizing: border-box;
}
.vector-feature-page-tools-enabled .vector-pinnable-element .mw-list-item a,
.vector-dropdown-content .mw-list-item a {
display: inline-block;
}
/*
Edit form elements order.
Przenieś część rzeczy na górę.
(efektywnie zbliża podgląd do przycisków)
@author Maciej Nux
@license CC-BY
@started 2022-11
*/
#editform {
display: grid;
}
.mw-editTools {
grid-row-start: 1;
}
.templatesUsed {
grid-row-start: 2;
}
.limitreport {
grid-row-start: 3;
}
body:not(.nux-editToolsCollapse-done) .mw-editTools {
display: none;
}
body .templatesUsed {
margin-top: 0;
}
/* [[User_talk:Nux/collapseEditReports.js]] */
/* [[m:User_talk:Nux/collapseEditReports.js]] */
body:not(.nux-collapseEditReports-done) #editform .templatesUsed > ul,
body:not(.nux-collapseEditReports-done) #editform .wikibase-entity-usage > ul,
body:not(.nux-collapseEditReports-done) #editform .limitreport > ul,
body:not(.nux-collapseEditReports-done) #editform .templatesUsed > div:nth-child(2),
body:not(.nux-collapseEditReports-done) #editform .wikibase-entity-usage > div:nth-child(2),
body:not(.nux-collapseEditReports-done) #editform .limitreport > div:nth-child(2) {
display: none !important;
}
/*
Mobile Watchlist UX.
@author Maciej Nux
@license CC-BY
@started 2023-05
*/
@media (hover: none) and (pointer: coarse) {
/*
Fixing button spacing (classic, fat fingers problem).
li.mw-changeslist-line
span.mw-changeslist-line-prefix
a.mw-unwatch-link
a.mw-watch-link
span.mw-changeslist-line-inner
div.mw-changeslist-links
...
span.mw-pager-tools
*/
li.mw-changeslist-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
}
li.mw-changeslist-line .mw-changeslist-line-prefix {
width: auto;
height: auto;
}
li.mw-changeslist-line .mw-changeslist-line-inner {
display: contents;
}
li.mw-changeslist-line::before,
li.mw-changeslist-line .mw-changeslist-line-inner > :empty {
display: none !important;
}
li.mw-changeslist-line .mw-changeslist-line-inner > *,
ul.mw-contributions-list li > * {
margin: 0;
}
li.mw-changeslist-line .mw-changeslist-line-prefix a {
padding: 0.2em 0.6em;
background: whitesmoke;
display: inline-block;
box-sizing: border-box;
}
li.mw-changeslist-line .mw-pager-tools {
padding-top: 0.8em;
}
li.mw-changeslist-line .mw-tag-marker {
border-radius: 0.6em;
}
li.mw-changeslist-line .mw-userlink {
padding: 0 !important;
}
/* unwatched (default style doesn't work due to display:contents) */
.mw-changelist-line-inner-unwatched > * {
opacity: 0.5;
text-decoration: line-through;
}
/* watchlist seen/unseen status */
ul .mw-changeslist-line .mw-title {
font-weight: bold;
}
ul .mw-changeslist-line:not(.mw-changeslist-line-watched) .mw-title {
font-weight: normal;
}
}
/*
Diff colours (red-green).
The idea was to make to colours resamble the existing VE's red-green visual diff.
@author Maciej Nux
@license CC-BY
@started 2024-01
*/
/**
Two columns.
*/
.diff-addedline {
border-color: rgba(0, 175, 137, 0.6) !important;
background-color: rgba(0, 175, 137, 0.01) !important;
}
.diff-addedline .diffchange {
background: color-mix(in srgb, rgba(0, 175, 137) 35%, white);
}
.diff-deletedline {
border-color: rgba(209, 29, 19, 0.7) !important;
background-color: rgba(209, 29, 19, 0.005) !important;
}
.diff-deletedline .diffchange {
background: color-mix(in srgb, rgba(209, 29, 19) 15%, white);
text-decoration: rgba(200, 0, 0, 0.4) line-through;
}
/**
Inline (aka single column).
*/
:is(.mw-diff-inline-deleted, .mw-diff-inline-changed, .mw-diff-inline-moved) del {
background: color-mix(in srgb, rgba(209, 29, 19) 15%, white);
text-decoration: rgba(200, 0, 0, 0.4) line-through;
}
:is(.mw-diff-inline-added, .mw-diff-inline-changed, .mw-diff-inline-moved) ins {
background: color-mix(in srgb, rgba(0, 175, 137) 50%, white);
outline: 1px solid rgba(0, 175, 137, 0.6);
outline-offset: -2px;
}
.mw-diff-table-prefix .mw-diff-inline-legend .mw-diff-inline-legend-ins {
background: color-mix(in srgb, rgba(0, 175, 137) 50%, white);
}
.mw-diff-table-prefix .mw-diff-inline-legend .mw-diff-inline-legend-del {
background: color-mix(in srgb, rgba(209, 29, 19) 15%, white);
text-decoration: rgba(200, 0, 0, 0.4) line-through;
}
/* Tools tweaks */
#t-upload,
#t-urlshortener-qrcode,
#t-urlshortener {
display: none;
}
#vector-page-tools #t-specialpages {
display: none;
}