MediaWiki:Timeless.css

/* All CSS here will be loaded for users of the Timeless skin */
.color-left {
    height: 0.35em;
    background: #f6e457;
    width: 50%;
    float: left;
}

.color-middle {
    height: 0.35em;
    background: #4db0e6;
    margin-left: 15em;
    margin-right: 17em;
}

.color-right {
    display: inline-block;
    height: 0.35em;
    background: #f6e457;
    width: 50%;
    float: right;
}

#mw-content-container {
    background: #eaecf0;
    border-bottom: solid 4px #4db0e6;
    background-repeat: no-repeat;
    background-position: center 10em;
}

.mw-body .mw-parser-output h1:after {
 border-bottom-width: 0px !important; 
}

.mw-parser-output h2:after {
    content: '';
    display: block;
    border-bottom: 0px !important;
    overflow: hidden;
}



.mainpage-header {
    display: flex;
    margin:2.6em 1.75em 1.5em
}

.mainpage-header .header-intro {
    flex:2
}

.mainpage-header .header-intro h1 {
    font-size: 2.5em;
    font-weight: bold;
    border: none;
    margin:0 0 0.15em
}

.mainpage-header .header-intro p {
    font-size: 1.1em;
    line-height:1.7em
}

.mainpage-header .header-stats {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:-1em
}

.mainpage-header .header-stats ul {
    list-style:none
}

.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
}

.mainpage-left {
    flex: 2;
    display: flex;
    flex-flow: column wrap;
    margin-right:0.9rem
}

.mainpage-left > * {
    margin:0 0 0.9rem
}

.mainpage-right {
    flex: 1;
    display: flex;
    flex-flow:column wrap
}

.mainpage-right > * {
    margin:0 0 0.9rem
}

.arrow {
    background: url(/images/2/2c/White-chevron.svg?b82be) no-repeat;
    display: inline-block;
    height: 0.7rem;
    width: 0.45rem;
    vertical-align:middle
}

.arrow.dark {
    filter:invert(80%)
}

.ribbon {
    position: absolute;
    right: -0.5em;
    top: -0.5em;
    color: #ffffff;
    background: #6bc71f;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.045em;
    line-height: 2.25em;
    padding: 0 0.55em;
    border-radius: 0.35em;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    pointer-events:none
}

.tile.big-tile {
    width: 100%;
    background: linear-gradient(to left, rgba(249, 243, 235, 0), rgba(249, 243, 235, 0.75), #F9F3EB 40%), url(/images/b/be/Main_page_Twisted_League.png?1a0da) right / auto 100% no-repeat #ffffff;
    margin-bottom: 0.9rem;
    padding-right:8vw
}

.mainpage-recent-updates .tile-halves {
    flex: 1;
    align-content: flex-start;
    margin-right:0.9rem
}

.mainpage-recent-updates .tile-halves:hover .tile-top img {
    transform:scale(1.04)
}

.mainpage-recent-updates .tile-halves:last-child {
    margin-right:0
}

.mainpage-recent-updates .tile-bottom.link-button a {
    text-align: left;
    padding:1rem 1.5rem 0.75rem
}

.mainpage-recent-updates h2 {
    margin:-0.5em 0 0.3em
}

.mainpage-recent-updates p:not(.byline) {
    font-size: 0.9em;
    line-height: 1.75em;
    color:#444e5a
}

.mainpage-recent-updates .jagex-promotion .byline {
    color:#855cd8
}

.mainpage-contents .tile-halves {
    flex: 1;
    margin-right:0.9rem
}

.mainpage-contents .tile-halves:last-child {
    margin-right:0
}

.mainpage-contents .tile-top {
    height: 4.5rem;
    position:relative
}

.mainpage-contents .tile-top h2 a {
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 4.5rem;
    padding-left:0.45rem
}

.mainpage-contents h2 {
    margin: 0;
    padding:0
}

.mainpage-skills ul {
    columns: 3;
    margin:1em 0.7em 0.7em 1em
}

.mainpage-skills li {
    display: flex;
    margin-bottom:0.29em
}

.mainpage-skills li a:first-child {
    border-radius: 3px;
    padding: 4px;
    width: 25px;
    height: 25px;
    text-align:center
}

.mainpage-skills li a:last-child {
    flex: 1;
    display: flex;
    align-items: center;
    color: #444e5a;
    font-weight: bold;
    padding-left: 0.7em;
    text-decoration:none
}

.mainpage-skills li:hover a:first-child {
    border-radius:3px 0 0 3px
}

.mainpage-skills li:hover a:last-child {
    color: rgba(255, 255, 255, 0.9);
    border-radius:0 3px 3px 0
}

.mainpage-twitter {
    border: none;
    box-shadow:0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3)
}

.mainpage-twitter .tile-top {
    display: flex;
    align-items: center;
    background: #00ACED;
    padding:1em 1.75em
}

.mainpage-twitter .tile-top a {
    flex: 1;
    position: relative;
    text-decoration:none
}

.mainpage-twitter .tile-top a:hover .arrow {
    transform:translateX(50%)
}

.mainpage-twitter .tile-bottom {
    background: #0084B4;
    border: none;
    padding:1em 1.75em
}

.mainpage-twitter .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-twitter .twitter-logo {
    margin-right:0.75em
}

.mainpage-twitter .twitter-name {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.25em;
    margin:0.5em 0 -0.15em
}

.mainpage-twitter .twitter-tagline {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom:0.5em
}

.mainpage-twitter .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-editing {
    border: none;
    box-shadow:0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3)
}

.mainpage-editing .tile-top {
    background:#438ab5
}

.mainpage-editing .tile-bottom {
    background: #3980ab;
    border: none;
    padding:0.8rem 1.5rem 0.4rem
}

.mainpage-editing h2, .mainpage-editing a {
    color:#ffffff
}

.mainpage-editing p {
    color:rgba(255, 255, 255, 0.9)
}

.mainpage-editing ul {
    list-style-image:url(/images/d/d1/Transparent-chevron.svg?20dcf)
}

.mainpage-editing a:visited {
    color:#ffffff
}

.tile-top img{
    width: 150%;
    height: 150%;
}