User:Lupo/monobook.css

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/* User-defined CSS for Wikipedia (MediaWiki 1.3) skin customization. By [[User:Lupo]]. */

/* Purpose:
/* 1. Minor tweaks: changing links styles (I like underlined links) and colors to better
      distinguish internal/external/stub/non-existing links; removing the useless "user" icon,
      getting rid of unwanted arrow image after external links, saving some space in tables.
   2. Moving the "personal toolbar" (top right of the screen) into a side box.
   3. Moving the interlanguage links to the top.
   4. Bottom tabs.   
   5. Make all non-main namespace pages have a light blue background.
*/

#wpLicense {width : 100%; overflow: hidden;}

@media print {
 
  /* Make sure my "moved" portlet stuff isn't printed! */
  .portlet {
     display:none ! important
  }

  /* Suppress back links in auto-generated refs in print. */
  a[href ^="#_ref-"] {
     display:none ! important
  }

  a.image[href *="Image:Replace_this_image1.svg"] {
     display: none !important
  }
}

/* Section 0: Enabling/disabling text. */

#substub, #pt-sandbox {
   display: none;
}

#siteNotice, #centralNotice, #n-sitesupport, #n-shoplink {
   display: none ! important
}

#watchlist-message { display:none; }

/* Section 1: Minor tweaks. */

/* I like blue, underlined links */
a {
    text-decoration: underline;
    color: blue;
}

a.external {
    text-decoration: underline;
    color: teal;
}

.portlet a {
   text-decoration: underline;
}

/* But not for stub links */
a.stub { 
    text-decoration: none;
    color: brown;
}

/* Expose "upper-case I instead of lower-case l" impostors: on "Special:" pages such as
   RC and the Watchlist, use a serif font for any link that goes to a user page. */
body.ns--1 a[title ^="User:"] {
    font-family: serif;
}

/* However, keep using the default font for diff and history links and the like. */
body.ns--1 a[href *="id="], body.ns--1 a[title *="/"] {
    font-family: inherit;
}

/* Get rid of the stupid arrow after external links (only for http for the time being) */
#bodyContent a[href ^="https://"] {
    background:inherit !important;
    padding-right:0 !important;
    margin-right:0 !important;
}

/* suppress the person icon by your username */
#pt-userpage { background: none; }

/* Pages on watchlist that have changed since the last visit. */
strong.mw-watched a { font-weight: bold; }

/* save space in tables */

table {
    background: none;
}

/*
table p {
   margin: 0 0 0 0;
   line-height: 1.2em;
}
*/

th {
   line-height: 1.2em;
}

td {
   line-height: 1.2em;
}

/* Fix white padding around floating images */

div.floatleft, div.floatright {
    border:none;
    padding:0.5em;
}

div.thumb, div.tright {
    border:none;
}

div.tright {
    margin-left: 0.5em;
}

div.tleft {
    margin-right: 0.5em;
}

/* Section 2: Transform the user toolbar into a sidebox */

#p-personal * #pt-notifications {
    display: none;
}
#p-personal {
    position:relative;
    z-index:3;
    width: 11.5em;
}

#p-personal .pBody {
    width: 10.8em;
    border: none;
    margin: 0 0 0.5em 0em;
    float: none;
    overflow: hidden;
    font-size: 95%;
    background: White;
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
    padding: 0 0.8em 0.3em .5em;
}

#p-personal ul {
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("/style/monobook/bullet.gif");

    font-size:95%;
    margin: 0 0 0 1.5em;
    padding:0;
    text-align:left;
    text-transform: none;
}

#p-personal li {
    display: list-item;
    padding:0;
    margin: 0 0 0 0;
    /* margin-bottom: 0.1em; */
}

#p-personal li a {
    text-decoration: underline;
    color: blue;
}

#p-personal li a:hover {
    text-decoration: underline;
    color: blue;
}

#p-personal h3 {
    display: inline;
    padding: 0em 1em 0em 0.5em;
}

/* Waste less space in sidebar */

#p-nav ul, #p-navigation ul, #p-tbx ul, #p-tb ul {
    line-height: 1.5em;
    margin: 0 0 0 1.5em;
}

#p-nav li, #p-navigation li, #p-tbx li, #p-tb li {
    margin: 0 0 0 0;
}

/* Somebody just removed it... */

#p-nav h3, #p-navigation h3 {
    display: inherit;
    padding: 0em 1em 0em 0.5em;
}

/* Section 3: Make the interlanguage links appear at the top. */

/* This works through a combination of CSS and JavaScript. My JS physically moves
   the #p-lang and #p-cactions from the sidebar into the main column, so that the main
   column actually contains three divs following each other: #p-lang, #p-cactions, and
   #content. This allows me to use simple relative positioning to achieve a
   proper layout, and I don't need to mess around with absolute positioning. As a
   result, I can also do away with the bizarre and artificial margins for #content and
   #p-cactions. */

#content {
    margin-top: 0;
}

#p-cactions {
    position: relative;
    margin-bottom: 0;
    margin-top: 0.5em;
    top: 0;
}

#column-content #p-cactions {
    float:none;
}

/* Switch off that stupid z-layer changing on hovering: it causes re-layouts (and the
   layout changes!) on my browser. */

#p-cactions .selected a:hover {
    z-index: 3;
}

#p-cactions li a:hover {
    z-index: 0;
}

/* Global position is at the top */
#p-lang {
    width: auto;
    padding:0 0 0 0;
    margin:0 0 0 12.2em; /* 12.2 is the width of the side bar */
    position:relative;
    z-index: 2;
    border: none;
    background: none;
    overflow: visible;
    line-height: 1.2em;
}

/* Add padding to skip the side bar */
#p-lang .portlet,
#p-lang .pBody {
    padding-left: 0;
    margin:0;
    border: none;
    z-index:2;
    overflow: visible;
    background: none;
}

#p-lang h3 {
    display: none;
}

/* The UL shall display as inline */
#p-lang ul {
    display: inline;
    border: none;
    line-height: 1.2em;
    margin: 0;
    text-align: left;
    list-style: none;
    z-index:2;
    background: none;
}

/* Ditto for the LI */
#p-lang li {
    z-index:2;
    border:none;
    padding:0;
    display: inline;
    margin-right: 0.5em;
    line-height: 1.2em;
    background: none;
}

/* I like underlined links, and "teal" is my color for external links */
#p-lang li a {
    text-decoration: underline;
    color: teal;
    background: none;
}

/* Section 4: Bottom tabs layout */

#mytabs {
    margin: -0.3em 0 0  11.5em;
    white-space:nowrap;
    line-height: 1.1em;
    overflow: visible;
    border-collapse: collapse;
    padding: 0 0 0 1em;
    list-style: none;
    font-size: 95%;
}
#mytabs .pBody {
    font-size: 1em;
    background-color: transparent;
    color: inherit;
    border-collapse: inherit;
    border: 0;
    padding: 0;
}
#mytabs .hiddenStructure { display: none; }
#mytabs li {
    display: inline;
    border: 1px solid #aaaaaa;
    border-top: none;
    padding: 0.1em 0 0 0;
    margin: 0 0.3em 0 0;
    overflow: visible;
    background: White;
}
#mytabs li.selected {
    border-color: #fabd23;
    padding: 0.2em 0 0 0;
}
#mytabs li a {
    background-color: White;
    color: #0014a6;
    border: none;
    padding: 0.3em 0.8em 0 0.8em;
    text-decoration: none;
    text-transform: lowercase;
    position: relative;
    margin: 0;
}
#mytabs li.selected a { z-index: 3; }
#mytabs .new a { color:#ba0000; }
#mytabs h3 { display: none; }
#mytabs li.istalk { margin-right: 0; }
#mytabs li.istalk a { padding-right: 0.5em; }
#mytabs-ca-addsection a { 
    padding-left: 0.4em;
    padding-right: 0.4em;
}
/* offsets to distinguish the tab groups */
#mytabs-ca-talk { margin-right: 1.6em; }
#mytabs-ca-watch, #mytabs-ca-unwatch, #mytabs-ca-varlang-0, #mytabs-ca-print {
    margin-left: 1.6em;
}

/* Section 5: Make all non-namespace pages have a light blue content area. This is done
   by setting the background color for all #content areas to light blue and then overriding
   it for any #content enclosed in a .ns-0 (main namespace). I then do the same for the
   "tab" background colors. */

#content {
    background: #F8FCFF; /* a light blue */
}

.ns-0 * #content {
    background: white;
}

#mytabs li {
    background: #F8FCFF;
}

.ns-0 * #mytabs li {
    background: white;
}

#mytabs li a {
    background-color: #F8FCFF;
}

.ns-0 * #mytabs li a {
    background-color: white;
}

/* For p-cactions (the top "tabs") it works only because my .js moves them into the
   "ns-0" wrapper anyway. */
#p-cactions li {
    background: #F8FCFF;
}

.ns-0 * #p-cactions li {
    background: white;
}

#p-cactions li a {
    background-color: #F8FCFF;
}

.ns-0 * #p-cactions li a {
    background-color: white;
}

/* Section 6: My own toolbox (Generated by Javascript) */

/* Making space for my own links */
#p-logo { display:none; }

#column-one { padding-top: 0px; }

#p-lupo-links .pBody {
    font-size: 91%;
}

#p-lupo-links h3 {
    display: inline;
    padding: 0em 1em 0em 0.5em;
    text-transform: lowercase;
}