User:Qzykcc/modern.css

/* A wikipedia custom style file for use with the `Modern' theme.

Copyright (c) 2012 qzykcc Last modified: <2013-10-29 16:29:33> CC-by-sa

It has a Facebook-like fixed top bar with text `Wikipedia', the article name, some personal settings and a search bar. The sidebar is moved to the bottom of the page. The main content area is presented in a central column that resembles physical paper. Also, most borders and backgrounds inside the content text area is removed, and the font used is a serif font.

WARNING: This file is only tested on recent versions of Webkit and Gecko browsers. It might work on older browsers. It is not expected to work or even degrade gracefully on seriously outdated browsers.

@media screen { div#mw_header { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; padding: 0.3em 0; /* make the height larger, more breathing room for text */ background-color: #2377b1; background-image: -webkit-linear-gradient(180deg, #2377b1 0%, #005c9e 100%); background-image: -moz-linear-gradient(180deg, #2377b1 0%, #005c9e 100%); background-image: -o-linear-gradient(180deg, #2377b1 0%, #005c9e 100%); background-image: -ms-linear-gradient(180deg, #2377b1 0%, #005c9e 100%); background-image: linear-gradient(180deg, #2377b1 0%, #005c9e 100%); border-bottom: solid 1px #00416e; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); } div#mw_header h1#firstHeading { font-size: 24px; border: none; display: block; -webkit-text-shadow: #111111 0.1em 0.1em 0.2em; -moz-text-shadow: #111111 0.1em 0.1em 0.2em; -o-text-shadow: #111111 0.1em 0.1em 0.2em; -ms-text-shadow: #111111 0.1em 0.1em 0.2em; text-shadow: #111111 0.1em 0.1em 0.2em; overflow: visible; } div#mw_header h1#firstHeading:before { content: "Wikipedia"; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.1em; font-size: 75%; padding-right: 1em; position: relative; top: -3px; } div#mw_header h1#firstHeading a.NavToggle { display: none; }

div#mw_main { margin-top: 2.6em; /* main content moved down to accommodate larger topbar */ } div#mw_main div#mw_contentwrapper { float: none; /* no more sidebar, bottom `bar' */ margin: 0; background-image: -webkit-radial-gradient(center top, circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 400px); background-image: -moz-radial-gradient(center top, circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 400px); background-image: -o-radial-gradient(center top, circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 400px); background-image: -ms-radial-gradient(center top, circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 400px); background-image: radial-gradient(center top, circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 400px); background-color: #dce2e6; background-repeat: no-repeat; } div#mw_main div#mw_contentwrapper div#p-cactions { margin-left: 0; background-color: transparent; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.1em; text-align: center; } div#mw_main div#mw_contentwrapper div#p-cactions div.pBody ul { display: block; } div#mw_main div#mw_contentwrapper div#p-cactions div.pBody ul li { display: inline; float: none; } div#mw_main div#mw_contentwrapper div#mw_content { margin: 0; border: none; background: transparent; } div#mw_main div#mw_contentwrapper div#mw_content div#mw_contentholder > div.mw-topboxes { text-align: center; } div#mw_main div#mw_contentwrapper div#mw_content div#mw_contentholder div#mw-content-text { width: 45em; margin: 2em auto; padding: 5em; font-size: 16px; -webkit-box-shadow: 0 0.3em 1em black; -moz-box-shadow: 0 0.3em 1em black; -o-box-shadow: 0 0.3em 1em black; -ms-box-shadow: 0 0.3em 1em black; box-shadow: 0 0.3em 1em black; background: white; overflow: auto; } div#mw_main div#mw_contentwrapper div#mw_content div#mw_contentholder div#mw-content-text a { text-decoration: none; } div#mw_main div#mw_contentwrapper div#mw_content div#mw_contentholder div#mw-content-text a:not(.image):hover, div#mw_main div#mw_contentwrapper div#mw_content div#mw_contentholder div#mw-content-text a:not(.image):active, div#mw_main div#mw_contentwrapper div#mw_content div#mw_contentholder div#mw-content-text a:not(.image):focus { background-color: #d5e4ee; } div#mw_main div#mw_contentwrapper div#mw_content div#mw_contentholder div#mw-content-text h1, div#mw_main div#mw_contentwrapper div#mw_content div#mw_contentholder div#mw-content-text h2 { border: none; overflow: visible; } div#mw_main div#mw_portlets { width: 100%; /* use whole width for the original sidebar */ border: none; background: #dce2e6; } div#mw_main div#mw_portlets div.portlet { text-align: center; } div#mw_main div#mw_portlets div.portlet div.pBody ul li { padding: 2px 0.5em 2px 0; margin-bottom: 0.5em; display: inline; font-size: 0.9em; } div#mw_main div#mw_portlets div.portlet div.pBody ul li:before { content: "|"; padding: 2px 0.5em 2px 0; } div#mw_main div#mw_portlets div.portlet div.pBody ul li:first-child:before { content: ""; } div#mw_main div#mw_portlets div.portlet h3 { display: none; } div#mw_main div#mw_portlets div#p-search { /* the search section originally in the sidebar; can't have `visibility: hidden' otherwise search field wouldn't show up */ height: 0; overflow: hidden; } div#mw_main div#mw_portlets div#p-search div#searchBody { /* the whole section in the sidebar is repositioned because we do not want just two buttons in the bottom `bar'! */         position: fixed; z-index: 1002; width: 14em; top: 0.5em; right: 12em; padding: 0; } div#mw_main div#mw_portlets div#p-search div#searchBody input#searchGoButton, div#mw_main div#mw_portlets div#p-search div#searchBody input#mw-searchButton { display: none; /* who needs buttons? */ }         div#mw_main div#mw_portlets div#p-search div#searchBody input#searchInput { position: relative; top: -2px; /* vertically center search field */ }

div#p-personal { /* user name, preferences, logout etc, as a dropdown menu */ position: fixed; top: 0.55em; right: 0; left: auto; width: 12em; z-index: 1001; overflow: visible; text-align: left; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.1em; } div#p-personal div.pBody { margin-right: 1em; overflow: visible; } div#p-personal div.pBody ul { background-color: transparent; } div#p-personal div.pBody ul:hover li ~ li, div#p-personal div.pBody ul:active li ~ li, div#p-personal div.pBody ul:focus li ~ li { height: 1.5em; } div#p-personal div.pBody ul li { display: block; float: none; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; } div#p-personal div.pBody ul li:hover, div#p-personal div.pBody ul li:active, div#p-personal div.pBody ul li:focus { background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%); background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.3); -o-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.3); -ms-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.3); } div#p-personal div.pBody ul li:hover a, div#p-personal div.pBody ul li:active a, div#p-personal div.pBody ul li:focus a { color: white; } div#p-personal div.pBody ul li:last-child { /* last item of dropdown menu */ -webkit-border-radius: 0 0 1ex 1ex; -moz-border-radius: 0 0 1ex 1ex; -o-border-radius: 0 0 1ex 1ex; -ms-border-radius: 0 0 1ex 1ex; border-radius: 0 0 1ex 1ex; } div#p-personal div.pBody ul li:first-child { padding-left: 1.3em; position: relative; } div#p-personal div.pBody ul li:first-child a:before, div#p-personal div.pBody ul li:first-child a:after { content: ""; position: absolute; top: 50%; background: #e8eff4; } div#p-personal div.pBody ul li:first-child a:before { left: 4px; width: 16px; height: 5px; margin-top: 1px; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -o-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } div#p-personal div.pBody ul li:first-child a:after { left: 9px; width: 6px; height: 10px; margin-top: -7px; -webkit-border-radius: 5px 5px 5px 5px/5px 5px 10px 10px; -moz-border-radius: 5px 5px 5px 5px/5px 5px 10px 10px; -o-border-radius: 5px 5px 5px 5px/5px 5px 10px 10px; -ms-border-radius: 5px 5px 5px 5px/5px 5px 10px 10px; border-radius: 5px 5px 5px 5px/5px 5px 10px 10px; } div#p-personal div.pBody ul li:first-child:hover a:before, div#p-personal div.pBody ul li:first-child:hover a:after, div#p-personal div.pBody ul li:first-child:active a:before, div#p-personal div.pBody ul li:first-child:active a:after, div#p-personal div.pBody ul li:first-child:focus a:before, div#p-personal div.pBody ul li:first-child:focus a:after { background: white; } div#p-personal div.pBody ul li ~ li { /* items in the menu */ -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); -o-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); -ms-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); height: 0; overflow: hidden; background-color: #05406a; } div#p-personal div.pBody ul li a { padding: 0 0.5em; color: #e8eff4; -webkit-text-shadow: 0 1px 1px #111111; -moz-text-shadow: 0 1px 1px #111111; -o-text-shadow: 0 1px 1px #111111; -ms-text-shadow: 0 1px 1px #111111; text-shadow: 0 1px 1px #111111; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; } div#p-personal div.pBody ul li a.mw-echo-notifications-badge { background: transparent; color: #e8eff4; padding: 0 0.5em; margin: 0; text-align: inherit; } div#p-personal div.pBody ul li a.mw-echo-notifications-badge:hover, div#p-personal div.pBody ul li a.mw-echo-notifications-badge:active, div#p-personal div.pBody ul li a.mw-echo-notifications-badge:focus { background-color: transparent; } div#p-personal div.pBody ul li a.mw-echo-notifications-badge:after { content: " notifications"; }

div.thumbinner, div.thumb, div.thumbinner img, table#toc, table.toccolours, div#toctitle, div#mw_contentholder > div.mw-topboxes, .mw-topbox, div#siteSub, .sidebar, table.mbox-small, table.wikitable, table.wikitable > tr > th, table.wikitable > * > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > td, pre, .mw-code, table.ambox { border: none !important; background: transparent !important; } } body { font-family: "Warnock Pro", "Hoefler Text", Georgia, serif; text-rendering: optimizeLegibility; }

ol.references, div.reflist, div.refbegin { font-size: 70%; }