Game widow (talk | contribs) No edit summary |
(Replacing "/media" links with image links. If you have any questions or noticed issues related to this edit, please reach out to us using the Special:Contact page.) |
||
Line 87: | Line 87: | ||
body { |
body { |
||
− | background-image: url(https:// |
+ | background-image: url(https://static.wikia.nocookie.net/aether_gamepedia_en/images/5/51/Wiki-background.png/revision/latest?cb=20180726045516); |
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||
background-size: cover; |
background-size: cover; |
||
Line 138: | Line 138: | ||
*/ |
*/ |
||
div#mw-panel > div.portal > h3 { |
div#mw-panel > div.portal > h3 { |
||
− | background-image: url(https:// |
+ | background-image: url(https://static.wikia.nocookie.net/aether_gamepedia_en/images/f/fc/Arrow-expanded.png/revision/latest?cb=20180128191534) !important; |
} |
} |
||
div#mw-panel > div.portal.collapsed > h3 { |
div#mw-panel > div.portal.collapsed > h3 { |
||
− | background-image: url(https:// |
+ | background-image: url(https://static.wikia.nocookie.net/aether_gamepedia_en/images/1/15/Arrow-collapsed.png/revision/latest?cb=20180128191435) !important; |
} |
} |
||
Line 535: | Line 535: | ||
/* copyright images tweak */ |
/* copyright images tweak */ |
||
.copyright-icon { |
.copyright-icon { |
||
− | background: url("https:// |
+ | background: url("https://static.wikia.nocookie.net/commons_hydra/images/thumb/b/b6/Copyright.png/32px-Copyright.png") transparent center center no-repeat; |
background-size: 100%; |
background-size: 100%; |
||
width: 32px; |
width: 32px; |
Latest revision as of 15:02, 2 December 2020
/*
* Credit goes to DarkShadowTNT
* from the dutch Minecraft Gamepedia wiki as
* for the CSS-styling of this wiki so
* thank them, as for the work of mostly how this skin looks.
*
* Please note: This CSS is build upon the site's Common.css (or
* Hydra.css, whatever is used). It therefor is an addition, not
* a replacement of the old CSS.
*
* Fonts may affect the look of this CSS. Fonts used during creation
* of the CSS were Roboto-Regular and Consolas.
*/
/**************************************************************/
/*
* This skin customization has been designed using the following
* fonts:
* * Roboto-Regular (with backup as sans-serif)
* * Consolas (with backup monospaced)
*
* To have a similar layout for everyone, I suggest at least
* importing the font TT Pines Bold Italic from an online source
* (possibly using Special:FontManager or so), as some OS's don't
* have this font by default.
*
* The color palette is as follows:
* * rgb(255, 255, 255) = hex #FFFFFF (transparency optional). If
* used with transparency, then rgba(255, 255, 255, <transparency>)
* * rgb(230, 232, 255) = hex #E6E8FF. Background color, used as
* a backup when image is not loading.
* * rgb(169, 172, 199) = hex #79788C. Used when something is
* selected, aswell as the separetion border for MsUpload files.
* * rgb(122, 122, 153) = hex #7A7A99. Used as background color
* for MsUpload
* * rgb(190, 193, 213) = hex #BEC1D5. Used as background color
* for unuploaded files in MsUpload.
* * rgb(200, 204, 209) = hex #C8CCD1. Used for various border
* colors, aswell as sidebar text.
*/
/*
* Import Lucida Sans Unicode-like font, in this case Roboto-Regular.
*/
@font-face {
font-family: 'Roboto-Regular';
src: local('Roboto-Regular'),
local('Roboto-Regular'),
url(/media/hydra/fonts/Roboto-Regular.ttf) format('truetype');
}
/*
* Change default font to Roboto-Regular with a generic font family
* as back up if needed.
*/
.mw-editsection,
html,
body,
select,
input,
button,
span.input-counter,
div.footer-links,
div#netbar,
div#content h1,
div#content h2,
div#content h3,
div#content h4,
div#content h5,
div#content h6,
div#content #firstHeading {
font-family: 'Roboto-Regular', sans-serif !important;
}
/*
* Set background to have the same background color as the
* color on the background file and add File:Wiki-background.png.
* Image is expanded to cover the whole background and placed
* in the middle of the page. The image is also fixed.
*
* It might be useful to try to combine all the tags into one.
* This would be the tag 'background'.
*
* Edit: LaDestitute changed the background-image to use a much-smaller rescaled version so the css-styling loads faster (also to be considerate of people with slower internet)
*/
body {
background-image: url(https://static.wikia.nocookie.net/aether_gamepedia_en/images/5/51/Wiki-background.png/revision/latest?cb=20180726045516);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: #3a3e54;
background-attachment: fixed;
}
/*
* Make the top bar transparent
*/
#mw-page-base {
background: transparent;
}
/*
* Make the main page content a little bit transparent. Also
* remove the bright-blue border.
*/
#content {
background-color: rgba(255, 255, 255, 0.85);
border: none;
}
/*
* Give #footer a transparent white background.
*/
#footer {
background-color: rgba(255, 255, 255, 0.85);
}
/*
* Style the side panel
*/
/*
* Style the headers
*/
div#mw-panel > div > h3 > a {
font-size: 120%;
font-variant: small-caps;
font-weight: bold;
color: white !important;
}
/*
* Style the arrow to the left.
*
* The first rule is when expanded, the second one when collapsed
*/
div#mw-panel > div.portal > h3 {
background-image: url(https://static.wikia.nocookie.net/aether_gamepedia_en/images/f/fc/Arrow-expanded.png/revision/latest?cb=20180128191534) !important;
}
div#mw-panel > div.portal.collapsed > h3 {
background-image: url(https://static.wikia.nocookie.net/aether_gamepedia_en/images/1/15/Arrow-collapsed.png/revision/latest?cb=20180128191435) !important;
}
/*
* Style the side panel
*/
/*
* Style the links
*/
div.body > ul > li > a {
color: #FFFFFF !important;
}
div.body > ul > li > a:hover {
color: #FFF !important;
}
/*
* Add a semi-transparent white border under the so-called portals
*/
div#mw-panel > .portal {
border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}
/*
* However, the last one should not have a border, as that looks
* unprofessional
*/
div#mw-panel > .portal#p-socialProfiles {
border-bottom: none;
}
/*
* Style the tabs at the top of the page
*/
/*
* Position the tab text, search bar and follow icon higher
*/
div.vectorMenu h3 span {
margin-top: -0.75em;
}
#simpleSearch {
margin-top: -0.1em !important;
}
div.suggestions {
margin-top: -2.4em !important;
}
/*
* Some exceptions
*/
div.vectorTabs span,
div.vectorTabs ul li,
div.vectorTabs li span a,
div#mw-head div.vectorMenu h3 span {
background-color: transparent;
margin-left: -0.5px;
border: none;
}
/*
* Remove border of certain dropdown menus
*/
div#mw-head div.vectorMenu div.menu {
border: none;
margin-top: -0.5em;
}
/*
* Add a white, rounded border around both navigation areas.
*/
#left-navigation,
#right-navigation {
background-color: rgba(255, 255, 255, 0.85);
border-radius: 10px 10px 0 0;
height: 2em;
margin-top: 2.94em;
}
/*
* Set the border radius (aka rounded corner). All these rules
* are needed to successfully create rounded corners.
*/
div.vectorTabs,
div.vectorTabs span,
div.vectorTabs ul,
div.vectorTabs ul li,
div.vectorTabs ul li span a,
div#mw-head div.vectorMenu h3 {
border-radius: 10px 10px 0 0;
background-image: none;
}
/*
* Generic styling
*/
div.vectorTabs,
div#mw-head div.vectorMenu h3 {
border: none;
height: 2.2em;
}
/*
* Make the text bold
*/
div.vectorTabs li a,
div.vectorTabs li span a,
div#mw-head div.vectorMenu h3 span {
font-weight: bold;
}
/*
* When a tab is selected
*/
div.vectorTabs li.selected,
div.vectorTabs li.selected a {
background-color: #A0A3BC;
border: none;
color: white !important;
height: 1.3em;
margin-top: 0.1875em;
}
/*
* Position the tab text and follow icon higher
*/
div.vectorTabs li span a,
div.vectorMenu h3 span {
margin-top: -0.625em;
}
div.vectorTabs li.selected a {
position: relative;
bottom: 0.4375em;
}
div.vectorTabs li.selected span {
line-height: 0.1875em;
}
div.vectorMenu h3 a {
margin-top: -0.5em;
}
.icon.mw-watchlink span {
margin-top: -0.25em;
}
/*
* Recolor border of certain dropdown menus
*/
div#mw-head div.vectorMenu div.menu {
border: 1px white;
}
/*
* Make background color of navbox white
*/
.navbox {
background-color: white;
}
/*
* Style the wikieditor
*/
/*
* Make the UI transparent, aswell as setting it to have no
* border.
*/
.wikiEditor-ui,
.wikiEditor-ui-controls,
.wikiEditor-ui-buttons {
background-color: transparent;
border: none;
}
.wikiEditor-ui-tabs,
.wikiEditor-ui .wikiEditor-ui-view {
border: none;
}
/*
* Re-add border to the code area
*/
.wikiEditor-ui-text {
border-left: 1px solid #C8CCD1;
border-right: 1px solid #C8CCD1;
}
/*
* Style the WikiEditor tabs
*/
.wikiEditor-ui-tabs > div {
border: none;
background-color: white;
font-weight: bold;
}
.wikiEditor-ui-tabs > div.current {
background-color: #79788C;
}
.wikiEditor-ui-tabs > div.current > a {
color: white;
}
.wikiEditor-ui-toolbar {
background-image: none;
background-color: white;
}
#wikiEditor-section-advanced,
#wikiEditor-section-characters,
#wikiEditor-section-help {
background-color: white;
}
#wikiEditor-section-characters > div > div.current,
#wikiEditor-section-help > div > div.current {
background-color: #79788C;
color: white;
}
/*
* Style the quick upload section
*/
#msupload-div {
background-color: #7A7A99;
}
#msupload-list .file {
background-color: #BEC1D5;
border-top: 1px solid #79788C;
}
/*
* Style the edit summary section
*/
.editOptions {
border-top: 1px solid #C8CCD1;
}
/*
* Remove border of certain dropdown menus
*/
div#mw-head div.vectorMenu div.menu {
border: none;
margin-top: -0.5em;
}
/*
* End of skin styling.
*/
/* For elements which only display in the mobile view */
.mobileonly {
display: none;
}
/* Hide main page header */
body.page-Aether_Wiki h1.firstHeading {
display:none;
}
/* for "edit this page" tab and "discussion" tab etc */
.pagetab {
border-style: solid solid none;
border-width: thin;
border-color: #808080;
padding:0.25ex 1ex 0ex;
font-size: 95%;
}
.ambox {
background-color: #eeeeee;
border-bottom-color: #383838;
border-right-color: #383838;
border-top-color: #383838;
border-collapse: collapse;
font-size: 95%;
margin: 0 auto 2px auto;
width: 80%;
}
.ambox-gray {
border-left-color: #383838;
}
.ambox.ambox-tiny {
font-size: 90%;
margin: 2px 0;
width: auto;
}
.ambox + .ambox {
margin-top: -2px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.ambox-blue {
border-left: 10px solid #1e90ff;
}
.ambox-red {
border-left: 10px solid #b22222;
}
.ambox-orange {
border-left: 10px solid #f28500;
}
.ambox-yellow {
border-left: 10px solid #f4c430;
}
.ambox-purple {
border-left: 10px solid #9932cc;
}
.ambox-gray {
border-left: 10px solid #bba;
}
.ambox-green {
border-left: 10px solid #228b22;
}
/* Ambox small text */
.amsmalltext {
font-size: smaller;
margin-left:0.8em;
margin-top:0.5em;
}
/* INFOBOXES */
.infoboxtable {
background-color: #f9f9f9;
border: 1px solid #aaaaaa;
color: #000000;
float: right;
font-size: 89%;
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
width: 300px;
}
.infoboxtable td {
vertical-align: top;
}
.infoboxtable td > div {
background-color: #f9f9f9;
border: 2px solid inherit;
border-radius: 5px;
font-weight: bold;
padding: 0.5px 7px;
text-align: right;
}
.infoboxname {
font-size: 110%;
font-weight: bold;
padding: 0.5em;
}
.infoboxdetails {
padding: 0em;
}
/* copyright images tweak */
.copyright-icon {
background: url("https://static.wikia.nocookie.net/commons_hydra/images/thumb/b/b6/Copyright.png/32px-Copyright.png") transparent center center no-repeat;
background-size: 100%;
width: 32px;
height: 32px;
}
.feature {
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px; padding: 10px;
}
/* Navbox template style */
table.navbox {
border: 1px solid #aaaaaa;
clear: both;
font-size: 88%;
margin: auto;
padding: 1px;
text-align: center;
width: 100%;
}
/* Border between adjacent navboxes */
table.navbox + table.navbox {
margin-top: -1px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
.navbox-group {
font-weight: bold;
padding-left: 1em;
padding-right: 1em;
white-space: nowrap;
}
/* Base background */
.navbox, .navbox-subgroup {
background: rgba(255, 255, 255, 0.2);
}
.navbox-list {
border-color: rgba(255, 255, 255, 0.2); /* Must match background color */
}
/* Level 1 color */
.navbox-title,
table.navbox th {
background: rgba(255, 255, 255, 0.2);
color: #444;
}
/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: rgba(255, 255, 255, 0.2);
color: #333;
}
/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: rgba(0, 0, 0, 0.05);
color: #333;
}
/* Even row striping */
.navbox-even {
background: rgba(0, 0, 0, 0.05);
color: #333;
}
/* Odd row striping */
.navbox-odd {
background: transparent;
}
.collapseButton {
font-weight: normal;
width: auto;
}
.navbox .collapseButton {
width: 6em;
}
.navbar {
font-size: 88%;
font-weight: normal;
}
.navbox .navbar {
font-size: 100%;
}
table.collapsed tr.collapsible {
display: none;
}
/* End of new Navbox styling */
/* Tabber styling */
.tabberlive .tabbertab,
.tabber .tabbertab {
border-color: transparent;
border-image: none;
border-style: solid none none;
border-width: 1px medium medium ;
}
ul.tabbernav {
border-bottom: none;
}
ul.tabbernav li a {
background: none repeat scroll 0 0 #A0A3BC;
border: 1px solid #A0A3BC;
border-image: none;
border-radius: 10px 10px 0 0;
margin-left: 3px;
padding: 3px 0.5em;
text-decoration: none;
}
ul.tabbernav li {
display: inline;
list-style: none outside none;
margin: 0 0 0 7px;
}
ul.tabbernav li a:link {
color: #fff;
}
ul.tabbernav li a:hover {
background: none repeat scroll 0 0 #A0A3BC;
border-color: #A0A3BC;
color: #000;
}
ul.tabbernav li.tabberactive a:hover {
color: #c0c0c0;
}
ul.tabbernav li.tabberactive a {
background-color: #0A3073;
color: #FFF;
}
ul.tabbernav li.tabberactive a,
ul.tabbernav li.tabberactive a:hover,
ul.tabbernav li.tabberactive a:link {
background-color: #0A3073;
border-bottom: 1px none;
padding: 2px 0.5em 4px;
}
/* This CSS governs the responsive 3 column main page layout */
.fpmidsections {
float: left;
width: 100%;
overflow: hidden;
}
.fpsection1,
.fpsection2,
.fpsection3,
.fpsection4 {
float: left;
clear: both;
width: 100%;
}
.fpmain .columns .leftcol,
.fpmain .columns .rightcol {
width: 100%;
margin: 0;
padding: 0;
}
@media (min-width: 790px) {
.fpsection1,
.fpsection4 {
float: left;
clear: none;
width: 50%;
}
.fpmidsections {
float: right;
clear: none;
width: 50%;
}
}
@media (min-width: 990px) {
.fpmain .columns .leftcol {
float: left;
width: 50%;
}
.fpmain .columns .rightcol {
float: right;
width: 50%;
}
}
@media (min-width: 1390px) {
.fpmidsections {
clear: none;
float: right;
width: 66.667%;
}
.fpsection1 {
clear: none;
width: 33.333%;
}
.fpsection2,
.fpsection3 {
clear: none;
width: 50%;
}
.fpsection4 {
clear: left;
width: 33.333%;
}
}