MediaWiki:Mobile.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Mobile.css (view source)

Revision as of 14:00, 5 October 2022

14,973 bytes added ,  14:00, 5 October 2022
no edit summary
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1,377: Line 1,377:
     padding: 0;
     padding: 0;
}
}
 
/*
.mainpage-recent-updates a + a:before {
.mainpage-recent-updates a + a:before {
     content: "· ";
     content: "· ";
Line 1,383: Line 1,383:
     white-space: pre-wrap;
     white-space: pre-wrap;
     pointer-events: none;
     pointer-events: none;
}
}*/


@media only screen and (min-width: 58em) {
@media only screen and (min-width: 58em) {
Line 1,679: Line 1,679:
     max-width: inherit !important;
     max-width: inherit !important;
     height: inherit !important;
     height: inherit !important;
}
/* Added stuff from RL output */
.perk-link {
    background: #09222F;
    border-radius: 111px;
    width: 35px;
    height: 35px;
    line-height: 30px;
    display: inline-table;
    margin-right: 5px;
    text-align: center;
}
.perk-link.perk-link-nobg {
    background: transparent;
}
.perk-link > a {
    vertical-align: middle;
}
.perk-link .perk-link-rank {
    position: relative;
    top: -26px;
    left: 5px;
    margin-bottom: -28px;
    line-height: 0;
    float: left;
}
.perk-background {
    background: #09222F;
}
.navbox .perk-link img {
    max-height: initial;
}
.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;
}
.tile h2 {
    font-weight: 600;
    border: none;
    margin-top: 0.4em;
}
.tile .byline + h2 {
    margin-top: -0.5em;
}
.byline {
    font-size: 0.9em;
    color: #949eaa;
}
.byline a {
    color: #949eaa;
}
.tile-halves {
    border: 1px solid #e4eaee;
    background: #ffffff;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
}
.tile-halves .byline + h2 {
    margin-top: -0.5em;
}
.tile-top {
    padding: 1.3rem 1.5rem 2rem;
}
.tile-top.tile-image {
    background-color: #949eaa;
    padding: 0;
}
.tile-bottom {
    background: #ffffff;
    border-top: 1px solid #e4eaee;
    padding: 1rem 1.5rem 2rem;
}
.tile-bottom.read-more {
    background: #f9fafa;
    padding: 0;
    transition: 0.3s ease-out;
}
.tile-bottom.read-more a {
    display: block;
    color: #949eaa;
    font-weight: bold;
    text-align: right;
    padding: 1em 1.75em;
    text-decoration: none;
}
.tile-bottom.read-more:hover {
    background: #f2f4f4;
}
.tile-bottom.read-more .arrow {
    filter: invert(43%) sepia(50%) hue-rotate(175deg);
    margin-left: 0.4em;
    transition: 0.3s ease-out;
}
.tile.oswf-day {
    float: none !important;
    padding: 0.5em 2em;
}
.tile.oswf-day h2 {
    margin-right: auto;
    margin-left: auto;
    margin-top: -0.5em;
}
.oswf-tile {
    margin-bottom: 1em;
}
.oswf-tile h2 {
    clear: none !important;
    margin-top: 0;
    padding-top: 0.2em !important;
}
.oswf-tile .oswf-img {
    display: block;
    max-width: 75px;
    float: right;
}
.oswf-tile .oswf-img img {
    max-width: 100%;
    height: auto !important;
}
.mainpage-body {
    color: #4c4c4c;
}
.mainpage-body h2,
.mainpage-body h2 a {
    color: #444e5a;
}
.mainpage-body ul {
    margin: 0 0.25em;
    list-style-type: disc;
}
.mainpage-left > * {
    border-bottom: none;
}
.mainpage-left .tile {
    padding: 2.5em 1.75em 2em;
    border-left-width: 0;
    border-right-width: 0;
}
.mainpage-left .tile h2 {
    padding: 0;
    margin: 0.65em 0.5em;
}
.mainpage-left .tile-halves {
    border-left-width: 0;
    border-right-width: 0;
}
.mainpage-left .tile-halves h2 {
    padding: 0;
    margin: 0.65em 0.5em;
}
.tile.big-tile {
    border: none;
    border-bottom: 1px solid #e4eaee;
}
.mainpage-recent-updates {
    border-bottom: 1px solid #e4eaee;
    padding: 1.5em 1em 2.5em;
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-scroll-snap-destination: 50% 50%;
    scroll-snap-destination: 50% 50%;
    -webkit-scroll-snap-type: mandatory;
    scroll-snap-type: mandatory;
}
.mainpage-recent-updates .tile {
    width: 78%;
}
.mainpage-recent-updates .tile p,
.mainpage-recent-updates .tile a {
    white-space: normal !important;
}
.mainpage-recent-updates .tile-halves {
    display: inline-block;
    margin: 1em 0.75em 0 0;
    width: 85vw;
    max-width: 18em;
    white-space: initial;
    -webkit-scroll-snap-coordinate: 50% 50%;
    scroll-snap-coordinate: 50% 50%;
    scroll-snap-align: center;
}
.mainpage-recent-updates .tile-halves:nth-child(1) {
    animation: 0.9s 0.2s both slide-up;
}
.mainpage-recent-updates .tile-halves:nth-child(2) {
    animation: 0.9s 0.4s both slide-up;
}
.mainpage-recent-updates .tile-halves:nth-child(3) {
    animation: 0.9s 0.6s both slide-up;
    margin-right: 1em;
}
.mainpage-recent-updates .tile-top {
    height: 9em;
    overflow: hidden;
}
.mainpage-recent-updates .tile-bottom {
    display: flex;
    padding-bottom: 0.5rem;
}
.mainpage-recent-updates .tile-bottom p:not(.byline) {
    color: #4c4c4c;
}
.mainpage-recent-updates .byline {
    margin: 0;
}
.mainpage-recent-updates .byline + h2 {
    margin: 0.025em 0 0;
    padding: 0;
}
@media only screen and (min-width: 58em) {
    .mainpage-recent-updates {
          display: flex;
          flex-flow: row wrap;
          justify-content: center;
          overflow-x: initial;
    }
    .mainpage-recent-updates::before {
          width: 100%;
    }
    .mainpage-recent-updates .tile-halves:nth-child(3) {
          margin-right: 0;
    }
}
.mainpage-contents {
    background: #5d6773;
    padding: 2.5em 1em 2em;
}
.mainpage-contents::before {
    content: 'Explore';
    margin-left: 1.5em;
    color: #949eaa;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.mainpage-contents .tile-halves {
    border: none;
    background: none;
    box-shadow: none;
    margin: 0 1.5em;
}
.mainpage-contents .tile-halves:first-child {
    margin-top: 1.25em;
}
.mainpage-contents .tile-halves:first-child .tile-bottom {
    border-top: none;
}
.mainpage-contents .tile-halves:last-child {
    margin-bottom: 0;
}
.mainpage-contents .tile-halves:last-child .tile-top {
    border-bottom: none;
}
.mainpage-contents .tile-bottom {
    border-color: #828d9a;
    padding: 0.25em 0;
    background: none;
}
.mainpage-contents h2 {
    padding: 0 0 0.35em;
    width: 100%;
}
.mainpage-contents h2 a {
    color: #f9fafa;
    display: block;
}
.mainpage-skills .tile-top {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.mainpage-skills .tile-top h2 {
    position: -webkit-sticky;
    position: sticky;
    left: 0.5em;
}
.mainpage-skills .tile-top ul {
    columns: 3;
    width: 32em;
    list-style: none;
    margin-left: 0.75em;
}
@media only screen and (min-width: 32em) {
    .mainpage-skills .tile-top ul {
          width: 100%;
          max-width: 50em;
          margin: auto;
    }
}
.mainpage-skills .tile-top li {
    display: flex;
    align-items: center;
    margin-bottom: 0.6em;
}
.mainpage-skills .tile-top li a:first-child {
    width: 25px;
    height: 25px;
    padding: 4px;
    border-radius: 3px;
}
.mainpage-skills .tile-top li a:last-child {
    flex: 1;
    color: #444e5a;
    font-weight: bold;
    padding-left: 0.5em;
}
.skill-agility a:first-child,
.skill-melee a:first-child {
    background: #bc483d;
}
.skill-ranged a:first-child {
    background: #748d36;
}
.skill-magic a:first-child {
    background: #6274ab;
}
.skill-fishing a:first-child,
.skill-fletching a:first-child {
    background: #3e8e9a;
}
.skill-cooking a:first-child,
.skill-divination a:first-child,
.skill-thieving a:first-child {
    background: #91689e;
}
.skill-farming a:first-child,
.skill-woodcutting a:first-child {
    background: #59924f;
}
.skill-mining a:first-child,
.skill-summoning a:first-child {
    background: #6385a8;
}
.skill-invention a:first-child,
.skill-smithing a:first-child {
    background: #d2b244;
}
.skill-archaeology a:first-child {
    background: #a56831;
}
.mainpage-wikinews::before {
    content: 'From the wiki';
    margin-left: 0.75em;
    color: #949eaa;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.mainpage-wikinews .news-date {
    font-weight: bold;
    margin-bottom: 0;
}
.mainpage-left .mainpage-wikinews p {
    margin-left: 0.75em;
    margin-right: 0.75em;
}
.mainpage-yg {
    display: none;
    padding-bottom: 2.5em !important;
}
.mainpage-yg::before {
    content: 'Discussions';
    margin-left: 0.75em;
    color: #949eaa;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
body.is-authenticated .mainpage-yg {
    display: inherit;
}
.mainpage-news {
    background: #f9fafa;
}
.mainpage-news .news-updates::before {
    content: 'Newsposts';
    margin-left: 0.75em;
    color: #949eaa;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.mainpage-news .news-updates li {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.mainpage-social {
    border: none;
    margin-bottom: 0;
}
.mainpage-social .tile-top {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em 2em;
    height: 70px;
}
.mainpage-social .tile-top .social-icon {
    float: left;
    margin: 0 1em 0 -1em;
    width: 60px;
    text-align: center;
}
.mainpage-social .tile-top .social-header {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.25em;
    margin: 0;
}
.mainpage-social .tile-top .social-tagline {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}
.mainpage-social .tile-bottom {
    border: none;
    padding: 1em 2em;
}
.mainpage-social .tile-bottom p {
    color: #949eaa;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #ffffff;
    font-size: 0.9em;
    text-align: center;
    margin: 0;
}
.mainpage-social.mainpage-discord .tile-top {
    background: #7289da;
}
.mainpage-social.mainpage-discord .tile-bottom {
    background: #697ec4;
}
.mainpage-social.mainpage-twitter .tile-top {
    background: #1da1f2;
}
.mainpage-social.mainpage-twitter .tile-bottom {
    background: #1e96e0;
}
.mainpage-events {
    border: none;
    margin-bottom: 0;
}
.mainpage-events .tile-top {
    background-color: #4f348b;
    color: #fff;
    padding: 1em 2em;
}
.mainpage-events .tile-top h2 {
    margin-bottom: 0;
    padding-bottom: 0;
}
.mainpage-events .tile-top .note {
    margin-top: 0;
    color: #949eaa;
    font-style: italic;
}
.mainpage-events .tile-top .note a,
.mainpage-events .tile-top .note a:visited {
    color: #b8c5d4;
}
.mainpage-events .tile-top a,
.mainpage-events .tile-top a:visited,
.mainpage-events .tile-top h2 a {
    color: #fff;
    text-decoration: none;
}
.mainpage-events .tile-top ul {
    list-style: none;
    margin-top: 1em;
    margin-left: 0;
}
.mainpage-events .tile-top li {
    padding-bottom: 0.6em;
    overflow: auto;
}
.mainpage-events .tile-top li img {
    max-width: 30px;
    width: auto;
    height: auto;
}
.mainpage-events .tile-top li a:hover,
.mainpage-events .tile-top li a:focus {
    text-decoration: underline;
}
.mainpage-events .tile-top li a {
    float: left;
}
.mainpage-events .tile-top li a:first-child {
    width: 30px;
}
.mainpage-events .tile-top li a:last-child {
    padding-left: 1.5em;
    text-indent: -1em;
    line-height: 1.5;
}
.mainpage-events .tile-top li:last-of-type {
    display: none;
}
.mainpage-events .tile-bottom {
    border: none;
    padding: 1em 1.75em;
    background-color: #3d276b;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}
body.wgl-darkmode .mainpage-events .tile-bottom {
    background-color: #3d276b;
    color: #fff;
}
.mainpage-events .tile-bottom a,
.mainpage-events .tile-bottom a:visited {
    color: #fff;
    text-decoration: none;
}
.mainpage-events .tile-bottom .arrow {
    margin-left: 0.2em;
}
.mw-recentchanges-toplinks th {
    font-size: 90%;
}
.mw-changeslist-legend {
    margin-left: 0;
}
#mw-mf-diffview del {
    border: 2px #379541 solid;
    padding: 0.15em 0.5em;
    background-color: #c1edbf !important;
    margin-right: 2px;
}
#mw-mf-diffview del::before {
    content: "- ";
    font-weight: bold;
    font-size: 100%;
}
#mw-mf-diffview ins {
    border: 2px #438ab5 solid;
    padding: 0.15em 0.5em;
    background-color: #bddff2 !important;
    margin-right: 2px;
}
#mw-mf-diffview ins::before {
    content: "+ ";
    font-weight: bold;
    font-size: 100%;
}
#mw-mf-minidiff {
    background: #f9f9f9;
    border: 1px #f1f1f1 solid;
    padding: 10px;
}
.mw-diff-inline-changed,
.mw-diff-inline-added {
    padding-bottom: 10px;
}
#mw-mf-diffview #mw-mf-diff-comment::before {
    content: "(";
}
#mw-mf-diffview #mw-mf-diff-comment::after {
    content: ")";
}
#mw-mf-diffarea {
    padding: 1em 1em 2em !important;
}
.forumsearchbox {
    padding: 0.5em;
    text-align: center;
    font-size: 90%;
    background-color: #f1f1f1;
    margin: auto !important;
}
.forumsearchbox tbody {
    display: inline;
}
.forumsearchbox input {
    margin: 0.5em;
}
.forumheader {
    border-left: 15px solid #ccc;
    background-color: #f1f1f1;
    margin: 1em 0;
    padding: 12px;
}
.forum_title {
    text-align: left;
}
.forum_title .forum_new {
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 1px;
}
.forum_edited {
    text-align: right;
}
.forumlist {
    margin: auto !important;
}
.forumlist .forum_editor,
.forumlist .forum_type {
    display: none;
}
.forumlist .forum_title,
.forumlist .forum_edited {
    width: auto;
}
.forumactiveheader,
.forumarchiveheader,
.forumoldarchives {
    background-color: #438ab5;
    color: #ffffff;
}
.forumoldarchives a {
    color: #ffffff;
}
.forumcolumnheader {
    background-color: #e6e6e6;
    color: #000000;
    text-align: left;
    padding-left: 5px;
    margin: auto;
}
.mainpage-skills .tile-top {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.mainpage-skills .tile-top h2 {
    position: -webkit-sticky;
    position: sticky;
    left: 0.5em;
}
.mainpage-skills .tile-top ul {
    columns: 3;
    width: 32em;
    list-style: none;
    margin-left: 0.75em;
}
@media only screen and (min-width: 32em) {
    .mainpage-skills .tile-top ul {
          width: 100%;
          max-width: 50em;
          margin: auto;
    }
}
.mainpage-skills .tile-top li {
    display: flex;
    align-items: center;
    margin-bottom: 0.6em;
}
.mainpage-skills .tile-top li a:first-child {
    width: 25px;
    height: 25px;
    padding: 4px;
    border-radius: 3px;
}
.mainpage-skills .tile-top li a:last-child {
    flex: 1;
    color: #444e5a;
    font-weight: bold;
    padding-left: 0.5em;
}
.skill-agility a:first-child,
.skill-melee a:first-child {
    background: #bc483d;
}
.skill-ranged a:first-child {
    background: #748d36;
}
.skill-magic a:first-child {
    background: #6274ab;
}
.skill-fishing a:first-child,
.skill-fletching a:first-child {
    background: #3e8e9a;
}
.skill-cooking a:first-child,
.skill-divination a:first-child,
.skill-thieving a:first-child {
    background: #91689e;
}
.skill-farming a:first-child,
.skill-woodcutting a:first-child {
    background: #59924f;
}
.skill-mining a:first-child,
.skill-summoning a:first-child {
    background: #6385a8;
}
.skill-invention a:first-child,
.skill-smithing a:first-child {
    background: #d2b244;
}
.skill-archaeology a:first-child {
    background: #a56831;
}
}
Retrieved from "https://near-reality.wiki/w/Special:MobileDiff/789...808"

Navigation menu