MediaWiki:Vector.css: Difference between revisions

From OniGalore
(trying out current diff-gazing style used on MW)
 
(added help button hiding code)
 
(42 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will affect users of the Vector skin */
/* Hide the '?' button at top-right of some pages */
#mw-indicator-mw-helplink { display: none; }


/*
/* Fix the sidebar in place when scrolling, as long as we are not on a small screen (e.g. a phone) */
** Diff rendering
@media (min-device-width:481px)
*/
{
table.diff, td.diff-otitle, td.diff-ntitle {
  div#mw-panel
background-color: white;
  {
    position:fixed;
    height:100%;
    /* Prevent content overlay when sidewards scrolling */
    background-color:#F6F6F6;
  }
}
}


td.diff-otitle,
/* For small screens, fix the sidebar this way to avoid overlap when zooming */
td.diff-ntitle {
@media (max-device-width:480px)
text-align: center;
{
  div#mw-panel
  {
    position:absolute;
  }
}
}


td.diff-marker {
/* Darken the background for code tags just a tiny bit
text-align: right;
** so code stands out more (default is 249, 249, 249)
font-weight: bold;
*/
font-size: 1.25em;
code
}
{
 
    background-color:rgb(245, 245, 245);
td.diff-lineno {
font-weight: bold;
}
}


/* Raise size of text in diff views to 100% since
** Vector makes them 88% by default
*/
td.diff-addedline,
td.diff-addedline,
td.diff-deletedline,
td.diff-deletedline,
td.diff-context {
td.diff-context
font-size: 88%;
{
vertical-align: top;
    font-size:100%;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
}
}


td.diff-addedline,
/* Allow limiting of which header levels are shown in a TOC;
td.diff-deletedline {
  <div class="toclimit-3">, for instance, will limit to
border-style: solid;
  showing ==headings== and ===headings=== but no further
border-width: 1px 1px 1px 4px;
  (as long as there are no =headings= on the page, which
border-radius: 0.33em;
  there shouldn't be according to the MoS). Used by Template:
  TOClimit.
*/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul
{
    display:none;
}
}


td.diff-addedline {
/* When <div class="nonumtoc"> is used on the table of contents,
border-color: #a3d3ff;
  the ToC will display without numbers. Used by Template:TOCnonum. */
.nonumtoc .tocnumber { display:none; }
.nonumtoc #toc ul,
.nonumtoc .toc ul
{
    line-height:1.5em;
    list-style:none;
    margin:.3em 0 0;
    padding:0;
}
}
 
.nonumtoc #toc ul ul,
td.diff-deletedline {
.nonumtoc .toc ul ul
border-color: #ffe49c;
{  
    margin:0 0 0 2em;  
}
}


td.diff-context {
/* Redesigned outbound arrow for external links */
background: #F2F2F2;
div#content a.external
color: #333333;
{
border-style: solid;
background-image:url(/w/images/e/ea/Link_icon_-_external.svg);
border-width: 1px 1px 1px 4px;
background-size:10px;
border-color: #e6e6e6;
background-position:top right;
border-radius: 0.33em;
background-repeat:no-repeat;
padding-right:11px;
}
}


.diffchange {
/* Provide sideways arrow for links to other Oni2.net sites */
font-weight: bold;
div#content a.external[href*=".oni2.net"]
text-decoration: none;
{
background-image:url(/w/images/9/98/Link_icon_-_oni2.net.svg);
background-size:12px;
background-position:top right;
background-repeat:no-repeat;
padding-right:13px;
}
}


table.diff {
/* Provide circular arrow for external internal links */
border: none;
div#content a.external[href*="wiki.oni2.net"]
width: 98%;
{
border-spacing: 4px;
background-image:url(/w/images/7/7d/Link_icon_-_external_internal.svg);
 
background-position:top right;
/* Ensure that colums are of equal width */
background-repeat:no-repeat;
table-layout: fixed;
padding-right:12px;
}
}


td.diff-addedline .diffchange,
/* Show movie icon for links to movie files that typically play in-browser */
td.diff-deletedline .diffchange {
div#content a.external[href$=".avi" i],
border-radius: 0.33em;
div#content a.external[href$=".mov" i],
padding: 0.25em 0;
div#content a.external[href$=".mp4" i],
div#content a.external[href$=".wmv" i]
{
background-image:url(/w/images/4/45/Link_icon_-_movie_file.svg);
background-size:12px;
background-position:top right;
background-repeat:no-repeat;
padding-right:14px;
}
}


td.diff-addedline .diffchange {
/* Show sound icon for links to audio files that typically play in-browser */
background: #d8ecff;
div#content a.external[href$=".m4a" i],
div#content a.external[href$=".mp3" i],
div#content a.external[href$=".wav" i]
{
background-image:url(/w/images/5/52/Link_icon_-_sound_file.svg);
background-size:12px;
background-position:top right;
background-repeat:no-repeat;
padding-right:14px;
}
}


td.diff-deletedline .diffchange {
/* Provide green upward arrow for interwiki links */
background: #feeec8;
div#content a.extiw
}
{
 
background-image:url(/w/images/d/dd/Link_icon_-_interwiki.svg);
table.diff td {
background-position:top right;
padding: 0.33em 0.66em;
background-repeat:no-repeat;
}
padding-right:11px;
 
table.diff col.diff-marker {
width: 2%;
}
 
table.diff col.diff-content {
width: 48%;
}
 
table.diff td div {
/* Force-wrap very long lines such as URLs or page-widening char strings.*/
word-wrap: break-word;
 
/* As fallback (FF<3.5, Opera <10.5), scrollbars will be added for very wide cells
  instead of text overflowing or widening
*/
overflow: auto;
}
}

Latest revision as of 16:18, 2 January 2026

/* Hide the '?' button at top-right of some pages */
#mw-indicator-mw-helplink { display: none; }

/* Fix the sidebar in place when scrolling, as long as we are not on a small screen (e.g. a phone) */
@media (min-device-width:481px)
{
  div#mw-panel
  {
    position:fixed;
    height:100%;
    /* Prevent content overlay when sidewards scrolling */
    background-color:#F6F6F6;
  }
}

/* For small screens, fix the sidebar this way to avoid overlap when zooming */
@media (max-device-width:480px)
{
  div#mw-panel
  {
    position:absolute;
  }
}

/* Darken the background for code tags just a tiny bit
** so code stands out more (default is 249, 249, 249)
*/
code
{
    background-color:rgb(245, 245, 245);
}

/* Raise size of text in diff views to 100% since
** Vector makes them 88% by default
*/
td.diff-addedline,
td.diff-deletedline,
td.diff-context
{
    font-size:100%;
}

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS). Used by Template:
   TOClimit.
 */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul
{
    display:none;
}

/* When <div class="nonumtoc"> is used on the table of contents,
   the ToC will display without numbers. Used by Template:TOCnonum. */
.nonumtoc .tocnumber { display:none; }
.nonumtoc #toc ul,
.nonumtoc .toc ul
{
    line-height:1.5em;
    list-style:none;
    margin:.3em 0 0;
    padding:0;
}
.nonumtoc #toc ul ul, 
.nonumtoc .toc ul ul
{ 
    margin:0 0 0 2em; 
}

/* Redesigned outbound arrow for external links */
div#content a.external
{
 background-image:url(/w/images/e/ea/Link_icon_-_external.svg);
 background-size:10px;
 background-position:top right;
 background-repeat:no-repeat;
 padding-right:11px;
}

/* Provide sideways arrow for links to other Oni2.net sites */
div#content a.external[href*=".oni2.net"]
{
 background-image:url(/w/images/9/98/Link_icon_-_oni2.net.svg);
 background-size:12px;
 background-position:top right;
 background-repeat:no-repeat;
 padding-right:13px;
}

/* Provide circular arrow for external internal links */
div#content a.external[href*="wiki.oni2.net"]
{
 background-image:url(/w/images/7/7d/Link_icon_-_external_internal.svg);
 background-position:top right;
 background-repeat:no-repeat;
 padding-right:12px;
}

/* Show movie icon for links to movie files that typically play in-browser */
div#content a.external[href$=".avi" i],
div#content a.external[href$=".mov" i],
div#content a.external[href$=".mp4" i],
div#content a.external[href$=".wmv" i]
{
 background-image:url(/w/images/4/45/Link_icon_-_movie_file.svg);
 background-size:12px;
 background-position:top right;
 background-repeat:no-repeat;
 padding-right:14px;
}

/* Show sound icon for links to audio files that typically play in-browser */
div#content a.external[href$=".m4a" i],
div#content a.external[href$=".mp3" i],
div#content a.external[href$=".wav" i]
{
 background-image:url(/w/images/5/52/Link_icon_-_sound_file.svg);
 background-size:12px;
 background-position:top right;
 background-repeat:no-repeat;
 padding-right:14px;
}

/* Provide green upward arrow for interwiki links */
div#content a.extiw
{
 background-image:url(/w/images/d/dd/Link_icon_-_interwiki.svg);
 background-position:top right;
 background-repeat:no-repeat;
 padding-right:11px;
}