MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
body {
background: url(/resources/assets/tl-wiki-head.webp) #f6f6f6 top left no-repeat; /* Top left bg image */
font-family: 'IBM Plex Sans','Helvetica Neue','Arial',sans-serif;
}
/* Mainpage Right */
.mainpage-right {
flex: 1;
display: flex;
flex-flow: column wrap;
}
.mainpage-right > * {
margin: 0 0 0.9rem;
}
.arrow {
background: url('https://tradelands.wiki/images/b/bc/White_Chevron.png') no-repeat;
display: inline-block;
height: 0.7rem;
width: 0.45rem;
vertical-align: middle;
}
.mainpage-social {
border: none;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}
.mainpage-social .tile-top {
display: flex;
align-items: center;
padding: 1em 1.5em;
}
.mainpage-social .tile-top a {
flex: 1;
position: relative;
text-decoration: none;
}
.mainpage-social .tile-top a:hover .arrow {
transform: translateX(50%);
}
.mainpage-social .tile-bottom {
border: none;
padding: 1em 1.75em;
}
.mainpage-social .tile-bottom p {
color: #ffffff;
font-weight: bold;
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0;
}
.mainpage-social .social-icon {
margin-right: 0.75em;
width: 60px;
text-align: center;
}
.mainpage-social .social-header {
color: #ffffff;
font-weight: bold;
font-size: 1.15em;
margin: 0.5em 0 -0.15em;
}
body.wgl-readermode .mainpage-social .social-header {
font-size: 1.05em;
}
.mainpage-social .social-tagline {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0.5em;
}
.mainpage-social .arrow {
position: absolute;
top: calc(50% - .5em);
right: 0;
height: 1em;
width: 0.7em;
background-size: 0.7em 1em;
transition: 0.3s ease-out;
}
.mainpage-social.mainpage-discord .tile-top {
background: #7289da;
}
.mainpage-social.mainpage-discord .tile-bottom {
background: #697ec4;
}
/*Mainpage Popular */
.mainpage-left {
flex: 2;
display: flex;
flex-flow: column wrap;
margin-right: 0.9rem;
}
.mainpage-popular li a:first-child {
border-radius: 3px;
padding: 4px;
background: #e6e6e6;
}
.mainpage-popular ul {
columns: 3;
margin: 1em 0.7em 0.7em 1em;
}
.mainpage-popular li {
display: flex;
margin-bottom: 0.4em;
isolation: isolate;
}
.mainpage-popular li a:last-child {
flex: 1;
display: flex;
align-items: center;
color: #36414f;
font-weight: bold;
padding-left: 0.7em;
text-decoration: none;
}
.mainpage-popular li:hover a:first-child {
border-radius: 3px 0 0 3px;
}
.mainpage-popular li:hover a:last-child {
color: rgba(255, 255, 255, 0.9);
border-radius: 0 3px 3px 0;
}
/* TILES */
.mainpage-contents .tile-halves {
flex: 1;
margin-right: 0.9rem;
}
.mainpage-contents .tile-top {
height: 5rem!important;
position: relative;
}
.mainpage-tiles .tile-halves {
flex: 1;
align-content: flex-start;
margin-right: 0.9rem;
}
.mainpage-body {
display: flex;
flex-flow: row wrap;
}
.mainpage-body h2 a {
color: #444e5a;
}
.mainpage-body .tile {
padding-left: 1.75em;
padding-right: 1.75em;
max-width: 100%;
}
.mainpage-body .tile-row {
width: 100%;
margin-bottom: 0.9rem;
}
.tile {
background: #ffffff;
border: 1px solid #e4eaee;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
padding: 1.5em 2em 1em;
max-width: 40em;
}
.tile h2 {
font-size: 1.4em;
font-weight: bold;
border: none;
margin: 0 0 0.4em;
}
.tile .byline + h2 {
margin-top: -0.5em;
}
.tile.link-button {
padding: 0;
}
.tile.link-button a {
color: inherit;
display: block;
padding: 1.25em 1.5em 0.75em;
text-decoration: none;
}
.tile.dark {
color: #ffffff;
background: #5d6773;
border: none;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}
.tile.dark h2,
.tile.dark h3 {
color: #ffffff;
}
.tile.dark a {
color: #ccd2d8;
}
.tile.dark .byline {
color: rgba(255, 255, 255, 0.7);
}
.byline {
font-size: 0.9em;
color: #949eaa;
}
.byline a {
color: #949eaa;
}
.tile-row {
display: flex;
flex-flow: row wrap;
margin-bottom: 1em;
}
.tile-halves {
display: flex;
flex-flow: row wrap;
border: 1px solid #e4eaee;
background: #ffffff;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
}
.tile-halves h2 {
font-size: 1.4em;
font-weight: bold;
border: none;
margin: 0 0 0.4em;
}
.tile-halves .byline + h2 {
margin-top: -0.5em;
}
.tile-top {
width: 100%;
padding: 1.3rem 1.5rem 0.6rem;
}
.tile-top.tile-image {
display: flex;
align-items: center;
background-color: #949eaa;
overflow: hidden;
padding: 0;
height: 13vw;
max-height: 12em;
}
.tile-top.tile-image a {
width: 100%;
}
.tile-top.tile-image img {
width: 100%;
height: auto;
transition: 0.4s ease-out;
}
.tile-bottom {
background: #ffffff;
border-top: 1px solid #e4eaee;
width: 100%;
padding: 1rem 1.5rem 0.6rem;
}
.tile-bottom.link-button {
align-self: flex-end;
padding: 0;
}
.tile-bottom.link-button a {
display: block;
text-align: center;
padding: 0.75em 1.5em 0.8em;
text-decoration: none;
}
.tile-bottom.read-more {
background: #f9fafa;
transition: 0.3s ease-out;
}
.tile-bottom.read-more a {
color: #949eaa;
font-weight: bold;
text-align: right;
}
.tile-bottom.read-more:hover {
background: #f2f4f4;
}
.tile-bottom.read-more:hover .arrow {
transform: translateX(50%);
}
.tile-bottom.read-more .arrow {
filter: invert(43%) sepia(50%) hue-rotate(175deg);
margin-left: 0.4em;
transition: 0.3s ease-out;
}
/* TILES */
#simpleSearch input {
background-color: transparent;
color: #000;
margin: 0;
padding: 0;
border: 0;
}
#simpleSearch {
height: 2.485em !important;
}
#p-search form {
margin: 0;
}
#p-logo {
margin-bottom: 6em;
}
#p-search {
margin: 0;
}
.vectorTabs ul li {
background: #eeeeee!important;
}
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
.mw-body {
border-color: transparent;
box-shadow: 0 0 7px rgba(0,0,0,0.15);
background-color: #f9f9f9;
}
.vector-menu-tabs a {
background-image: none;
}
#mw-page-base {
background:none;
}
.mainpage-header {
display: flex;
margin: 0 1.75em 1.5em;
}
.mainpage-header .header-stats ul {
list-style: none;
}
.mainpage-header .header-intro h1 {
font-size: 2.5em;
}
.mainpage-header .header-stats {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
margin-top: -1em;
}
.homepagecont {
max-width: 75em;
margin: 0 auto;
}
.mainpage-header .header-intro {
flex: 2;
}
.shipwrightsays {
background: #eee;
border: 1px solid #aaa;
margin: 0 0 1em 1em;
padding: 1em;
max-width: 800px;
overflow: hidden;
}
.shipwrightsays img {
float: left;
}
.infobox {
background: #eee;
border: 1px solid #aaa;
float: right;
margin: 0 0 1em 1em;
padding: 1em;
width: 250px;
}
.infobox-title {
font-size: 2em;
text-align: center;
}
.infobox-image {
text-align: center;
}
.infobox th {
text-align: left;
vertical-align: top;
width: 120px;
}
.infobox td {
vertical-align: top;
}
.card {
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.1);
transition: 0.3s;
border: 1px solid #e4eaee;
}
.vectorTabs {
background-color: #f9f9f9;
background-image: none !important;
}
.vectorTabs li.selected {
background: #f9f9f9 !important;
}
.vectorTabs ul li {
background: #f6f6f6;
background-image: none !important;
}
.vectorTabs span {
background-image: none !important;
}
#simpleSearch {
border: none;
background: #ffffff;
height: 2.1em;
margin-top: 0;
box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.15);
}
#simpleSearch #searchInput {
padding: 1em 0 0 .75em;
}
div.vectorTabs ul li:not(.selected), div#mw-head div.vectorMenu h3 {
box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.15);
}
div.vectorTabs ul li:not(.selected), div#mw-head div.vectorMenu h3 {
box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.15);
}
div.vectorTabs, div.vectorTabs ul, div#mw-head div.vectorMenu h3 {
background: #f6f6f6;
}
a {
text-decoration: none;
color: #0645ad !important;
background: none;
}
a:visited {
color: #0b0080;
}