User:Lupo/monobook.css
Appearance
Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump. This code will be executed when previewing this page. |
The accompanying .js page for this skin is at User:Lupo/monobook.js. |
/* 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;
}