Valence Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 5,033: Line 5,033:
     }
     }
}
}
/********************/
/*  OSRS Main Page  */
/********************/
:root {
    --byline-arrow-filter: invert(29%) sepia(0%) saturate(376%) hue-rotate(172deg) brightness(87%) contrast(80%);
    --tile-border-color: #cabe9b;
    --tile-background-color: #f9f3eb;
    --tile-link-button-color: #f5e9db;
    --tile-link-button-highlight-color: #dfccb0;
    --tile-dark-color: #fff;
    --tile-dark-bg: #5d6773;
    --tile-dark-link-color: #ccc;
    --tile-dark-byline-color: rgba(255, 255, 255, 0.7);
    --tile-dark-header-color: #fff;
}
.tile {
    background: var(--tile-background-color);
    border: 1px solid var(--tile-border-color);
    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.dark {
    color: var(--tile-dark-color);
    background: var(--tile-dark-bg);
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}
.tile.dark h2 {
    color: var(--tile-dark-header-color);
}
.tile.dark a {
    color: var(--tile-dark-link-color);
}
.tile.dark .byline {
    color: var(--tile-dark-byline-color);
}
.byline {
    font-size: 0.9em;
    color: var(--byline-color);
}
.byline a {
    color: var(--byline-color);
}
.tile-row {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 1em;
}
.tile-halves {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid var(--tile-border-color);
    background: var(--tile-background-color);
    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: var(--byline-color);
    overflow: hidden;
    padding: 0;
    height: 13vw;
    max-height: 12em;
    transition: 0.4s ease-out;
}
.tile-halves:hover .tile-top.tile-image img {
    transform: scale(1.1);
    transition: 0.5s ease-out;
}
.tile-top.tile-image span {
    width: 100%;
}
.tile-top.tile-image img {
    width: 100%;
    object-fit: cover;
    max-height: 200px;
    transition: 0.4s ease-out;
}
.tile-bottom {
    background: var(--tile-background-color);
    border-top: 1px solid var(--tile-border-color);
    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: var(--tile-link-button-color);
    transition: 0.3s ease-out;
}
.tile-bottom.read-more a {
    color: var(--byline-color);
    font-weight: bold;
    text-align: right;
}
.tile-bottom.read-more:hover {
    background: var(--tile-link-button-highlight-color);
}
.tile-bottom.read-more:hover .arrow {
    transform: translateX(50%);
}
.tile-bottom.read-more .arrow {
    filter: var(--byline-arrow-filter);
    margin-left: 0.4em;
    transition: 0.3s ease-out;
}
.tile.oswf-day {
    margin-left: 0.5em;
}
.oswf-tile {
    margin: 1em;
}
.oswf-tile.oswf-complete {
    opacity: 0.65;
}
.oswf-tile .oswf-summary {
    font-size: 105%;
    line-height: 1.6;
    margin-top: -0.4em;
}
.oswf-tile .oswf-img {
    display: block;
    max-width: 75px;
    float: right;
}
.oswf-tile .oswf-img img {
    max-width: 100%;
    height: auto;
}
.oswf-tile .oswf-guidance {
    border-top: 1px solid #eee;
    padding-top: 1em;
}
body.page-Old_School_RuneScape_Wiki .mw-parser-output {
    max-width: 75em;
    margin: 0 auto;
}
body.page-Old_School_RuneScape_Wiki.action-view .catlinks,
body.page-Old_School_RuneScape_Wiki.action-view #contentSub,
body.page-Old_School_RuneScape_Wiki.action-view #siteNotice {
    display: none;
}
.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-body {
    display: grid;
    grid-template-areas: "update update update" "content content content" "left left right";
    gap: 0.9rem;
    grid-template-columns: repeat(3, 1fr);
}
.mainpage-body:has(.mainpage-event) {
    grid-template-areas: "event event event" "update update update" "content content content" "left left right";
}
.mainpage-body h2 a {
    color: var(--text-color);
}
.mainpage-body .tile {
    padding-left: 1.75em;
    padding-right: 1.75em;
    max-width: 100%;
}
.mainpage-body .tile-row {
    width: 100%;
    margin-bottom: 0;
}
.mainpage-body .tile-row {
    display: grid;
    gap: 0.9rem;
}
.mainpage-left {
    grid-area: left;
    flex: 2;
    display: flex;
    flex-flow: column wrap;
}
.mainpage-left > * {
    margin: 0 0 0.9rem;
}
.mainpage-right {
    grid-area: right;
    flex: 1;
    display: flex;
    flex-flow: column wrap;
}
.mainpage-right > * {
    margin: 0 0 0.9rem;
}
.arrow {
    background: url('filepath://White-chevron.svg') no-repeat;
    display: inline-block;
    height: 0.7rem;
    width: 0.45rem;
    vertical-align: middle;
}
.arrow.dark {
    filter: invert(80%);
}
.mainpage-recent-updates {
    grid-area: update;
    grid-template-columns: repeat(3, 1fr);
}
.mainpage-recent-updates .tile-halves {
    flex: 1;
    align-content: flex-start;
}
.mainpage-recent-updates .tile-halves:hover .tile-top img {
    transform: scale(1.04);
}
.mainpage-recent-updates .tile-halves .tile-top span {
    width: 100%;
}
.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: var(--text-color);
}
.mainpage-contents {
    grid-area: content;
    grid-template-columns: repeat(6, 1fr);
}
.mainpage-contents .tile-halves {
    flex: 1;
}
.mainpage-contents .tile-top {
    position: relative;
}
.mainpage-contents h2 {
    margin: 0;
    padding: 0;
}
.mainpage-contents .tile-bottom.link-button a {
    padding: 0.75em 0.2em;
}
.mainpage-skills ul {
    columns: 3 9em;
    margin: 1em 0.7em 0.7em 1em;
}
.mainpage-skills li {
    display: flex;
    margin-bottom: 0.29em;
}
.mainpage-skills li span a {
    border-radius: 2px;
    padding: 4px;
    width: 25px;
    height: 25px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainpage-skills li > a:last-child {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: bold;
    padding-left: 0.7em;
    text-decoration: none;
}
.mainpage-skills li:hover a:first-child {
    border-radius: 2px 0 0 2px;
}
.mainpage-skills li:hover > a:last-child {
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0 2px 2px 0;
}
.skill-agility span a,
.skill-melee span a {
    background: #bc483d;
}
.skill-agility:hover > a:last-child,
.skill-melee:hover > a:last-child {
    background: #932419;
}
.skill-ranged span a {
    background: #748d36;
}
.skill-ranged:hover > a:last-child {
    background: #4c6215;
}
.skill-magic span a {
    background: #6274ab;
}
.skill-magic:hover > a:last-child {
    background: #304791;
}
.skill-fishing span a,
.skill-fletching span a {
    background: #3e8e9a;
}
.skill-fishing:hover > a:last-child,
.skill-fletching:hover > a:last-child {
    background: #1a6671;
}
.skill-cooking span a,
.skill-thieving span a {
    background: #91689e;
}
.skill-cooking:hover > a:last-child,
.skill-thieving:hover > a:last-child {
    background: #713684;
}
.skill-farming span a,
.skill-woodcutting span a {
    background: #59924f;
}
.skill-farming:hover > a:last-child,
.skill-woodcutting:hover > a:last-child {
    background: #306f25;
}
.skill-mining span a {
    background: #6385a8;
}
.skill-mining:hover > a:last-child {
    background: #315f8d;
}
.skill-smithing span a {
    background: #d2b244;
}
.skill-smithing:hover > a:last-child {
    background: #b69213;
}
.popular-pages ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.6em;
    margin: 1em 0 0.7em 0;
}
.mp-popular-page-light {
    display: flex;
    align-items: center;
    background-color: var(--button-background);
    transition: 100ms;
}
.mp-popular-page-light a {
    flex: 1;
    display: block;
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 0.7em 1em;
}
.mp-popular-page-light:hover {
    filter: brightness(115%);
    transition: 100ms;
}
.mainpage-discord {
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}
.mainpage-discord .tile-top {
    display: flex;
    align-items: center;
    background: #5865f2;
    padding: 1em 1.75em;
}
.mainpage-discord .tile-top a {
    flex: 1;
    position: relative;
    text-decoration: none;
}
.mainpage-discord .tile-top a:hover .arrow {
    transform: translateX(50%);
}
.mainpage-discord .tile-bottom {
    background: #525ee0;
    border: none;
    padding: 1em 1.75em;
}
.mainpage-discord .tile-bottom p {
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}
.mainpage-discord .partner-icon {
    margin-right: 0.75em;
}
.mainpage-discord .server-name {
    color: #fff;
    font-weight: bold;
    font-size: 1.25em;
    margin: 0.5em 0 -0.15em;
}
.mainpage-discord .server-tagline {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5em;
}
.mainpage-discord .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-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: #15202b;
    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: #121c26;
    border: none;
    padding: 1em 1.75em;
}
.mainpage-twitter .tile-bottom p {
    color: #fff;
    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: #fff;
    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: #fff;
}
.mainpage-editing p {
    color: rgba(255, 255, 255, 0.9);
}
.mainpage-editing ul {
    list-style-image: url('filepath://Transparent-chevron.svg');
}
.mainpage-poll .ajaxpoll {
    border: none;
    background: none;
    padding: 0;
    width: auto;
}
.mainpage-trailblazer {
    grid-area: event;
}
.mainpage-trailblazer .tb-logo {
    margin-bottom: 0.9rem;
}
.mainpage-trailblazer .tile-row {
    grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 720px) {
    .mainpage-trailblazer .tile-row {
          grid-template-columns: none;
    }
    .mainpage-trailblazer .tile-row .tile-top {
          height: 20vw;
          min-height: 9em;
    }
}
@media only screen and (max-width: 1200px) {
    .mainpage-contents {
          grid-template-columns: repeat(3, 1fr);
    }
}
@media only screen and (max-width: 1000px) {
    .mainpage-body {
          grid-template-areas: "update" "content" "left" "right";
          grid-template-columns: 1fr;
    }
    .mainpage-body:has(.mainpage-event) {
          grid-template-areas: "event" "update" "content" "left" "right";
    }
    .mainpage-recent-updates {
          grid-template-columns: repeat(2, 1fr);
    }
    .mainpage-recent-updates .tile-halves:last-child {
          display: none;
    }
    .mainpage-recent-updates .tile-halves:hover .tile-top img {
          transform: scale(1.04);
    }
    .mainpage-recent-updates .tile-top {
          height: 18vw;
          min-height: 9em;
    }
    .mainpage-header .header-stats {
          display: none;
    }
    .mainpage-left > *:last-child,
    .mainpage-right > *:last-child {
          margin-bottom: 0;
    }
    .popular-pages ul {
          grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 720px) {
    .mainpage-recent-updates {
          grid-template-columns: none;
    }
    .mainpage-recent-updates .tile-halves:last-child {
          display: flex;
    }
    .mainpage-contents {
          grid-template-columns: repeat(2, 1fr);
    }
}


/********************/
/********************/
Retrieved from "https://wiki.valence-smp.net/w/MediaWiki:Common.css"