User:Lupo/monobook.css

    From Wikipedia, the free encyclopedia
    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.
    */
    
    select#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. */
    
    div.boilerplate#substub {
       display: none;
    }
    
    div#siteNotice, div#centralNotice, li#n-sitesupport, li#n-shoplink, li#pt-sandbox {
       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 ^="http://"] {
        background:inherit !important;
        padding-right:0 !important;
        margin-right:0 !important;
    }
    
    /* suppress the person icon by your username */
    li#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. */
    
    div#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 */
    li#mytabs-ca-talk { margin-right: 1.6em; }
    li#mytabs-ca-watch, li#mytabs-ca-unwatch, li#mytabs-ca-varlang-0, li#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; }
    
    div#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;
    }