MediaWiki:Common.less/mainpage.less: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.less/mainpage.less (view source)

Revision as of 17:12, 17 October 2024

687 bytes removed ,  17 October
no edit summary
VisualWikitext
 
No edit summary
Line 1:
/* =================== MAIN PAGE =================== *//* =================== variables =================== */@mp-text-light: fade( @white, 90% );@mp-gutter-width: .9rem;/* unused:root { --bigtile-background-color: #f9f3eb; --bigtile-background-fade-zero: fade(#f9f3eb, 0%); --bigtile-background-fade-seventyfive: fade(#f9f3eb, 75%);}*//* =================== mixins =================== */// skill training colors.skill-color(@color) { // icon span a { background: desaturate( lighten( @color, 15% ), 20% ); } // skill name &:hover > a:last-child { background: @color; }}/* ========================== page-specific styles ========================== */body.page-Old_School_RuneScape_Wiki { // limit max width for readability // don't use #mw-content-text because it includes the editform .mw-parser-output { max-width: 75em; margin: 0 auto; } // not when editing &.action-view { .catlinks, #contentSub, // hide pagetitle in favor of .mainpage-header // Note: as of mw1.38, this is not needed anymore // blanking both [[MediaWiki:Mainpage-title-loggedin]] & // [[MediaWiki:Mainpage-title]] applies an inline `display: none;` // #firstHeading, // anything listed in the sitenotice should already be on the main page #siteNotice { display: none; } }}/* ==================== general styles ==================== */.mainpage-header { display: flex; margin: 2.6em 1.75em 1.5em; .header-intro { flex: 2; h1 { font-size: 2.5em; font-weight: bold; border: none; margin: 0 0 .15em; } p { font-size: 1.1em; line-height: 1.7em; } } .header-stats { flex: 1; display: flex; justify-content: center; align-items: center; margin-top: -1em; }}// main sections.mainpage-body { display: grid; grid-template-areas: "event event event" // for tbzr tile "update update update" "content content content" "left left right"; gap: 0.9rem; grid-template-columns: repeat(3, 1fr); h2 a { color: var(--text-color); } .tile { padding-left: 1.75em; padding-right: 1.75em; max-width: 100%; } .tile-row { width: 100%; margin-bottom: 0; }}.mainpage-body .tile-row { display: grid; gap: 0.9rem}// left column.mainpage-left { grid-area: left; flex: 2; display: flex; flex-flow: column wrap; > * { margin: 0 0 @mp-gutter-width; }}// right column.mainpage-right { grid-area: right; flex: 1; display: flex; flex-flow: column wrap; > * { margin: 0 0 @mp-gutter-width; }}/* ==================== components ==================== */.arrow { background: url('/images/rss/White-chevron.svg') no-repeat; display: inline-block; height: .7rem; width: .45rem; vertical-align: middle; &.dark { filter: invert(80%); }}/* ============================= section-specific styles ============================= *//* -------------------- recent updates -------------------- */// big tile/* unused.tile.big-tile { width: 100%; background: linear-gradient(to left, var(--bigtile-background-fade-zero), var(--bigtile-background-fade-seventyfive), var(--bigtile-background-color) 40%), url("/images/rss/Main page Twisted League.png") right / auto 100% no-repeat @white; margin-bottom: @mp-gutter-width; padding-right: 8vw;} */.mainpage-recent-updates { grid-area: update; grid-template-columns: repeat(3, 1fr); .tile-halves { flex: 1; align-content: flex-start; // zoom on hover &:hover .tile-top img { transform: scale(1.04); } .tile-top span { width: 100%; } } .tile-bottom.link-button a { text-align: left; padding: 1rem 1.5rem .75rem; } h2 { margin: -0.5em 0 .3em; } p:not(.byline) { font-size: .9em; line-height: 1.75em; color: var(--text-color); }}/* -------------------- wiki contents -------------------- */@mp-contents-height: 4.5rem;.mainpage-contents { grid-area: content; grid-template-columns: repeat(6, 1fr); .tile-halves { flex: 1; } .tile-top { position: relative; // needed for ribbon } h2 { margin: 0; padding: 0; } .tile-bottom.link-button a { padding: 0.75em 0.2em; // prevent grid gap misalignment }}/* -------------------- skill training -------------------- */.mainpage-skills { ul { columns: 3 9em; margin: 1em .7em .7em 1em; } // skill row li { display: flex; margin-bottom: .29em; // skill icon span a { border-radius: @border-radius; padding: 4px; width: 25px; height: 25px; text-align: center; display: flex; justify-content: center; align-items: center; } // skill text > a:last-child { flex: 1; display: flex; align-items: center; font-weight: bold; padding-left: .7em; text-decoration: none; } &:hover { a:first-child { border-radius: @border-radius 0 0 @border-radius; } > a:last-child { color: @mp-text-light; border-radius: 0 @border-radius @border-radius 0; } } }}.skill-agility,.skill-melee { .skill-color( #932419 ); // red}.skill-ranged { .skill-color( #4c6215 ); // green}.skill-magic { .skill-color( #304791 ); // blurple}.skill-fishing,.skill-fletching { .skill-color( #1a6671 ); // bluish}.skill-cooking,.skill-thieving { .skill-color( #713684 ); // purple}.skill-farming,.skill-woodcutting { .skill-color( #306f25 ); // dark green}.skill-mining { .skill-color( #315f8d ); // dark blue}.skill-smithing { .skill-color( #b69213 ); // gold}/* -------------------- popular pages -------------------- */.popular-pages ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .6em; margin: 1em 0 .7em 0;}// skill row.mp-popular-page-light { display: flex; align-items: center; background-color: var(--button-background); transition: 100ms; a { flex: 1; display: block; color: @white; font-weight: bold; text-align: center; text-decoration: none; padding: .7em 1em; } &:hover { filter: brightness(115%); transition: 100ms; }}/* -------------------- discord server -------------------- */.mainpage-discord { border: none; box-shadow: @box-shadow-dark; .tile-top { display: flex; align-items: center; background: @discord-bg; padding: 1em 1.75em; a { flex: 1; position: relative; // allow link to cover icon text-decoration: none; &:hover .arrow { transform: translateX(50%); } } } .tile-bottom { background: @discord-bg-dark; border: none; padding: 1em 1.75em; p { color: @white; font-weight: bold; font-size: .9em; text-align: center; text-transform: uppercase; letter-spacing: .03em; margin: 0; } } .partner-icon { margin-right: .75em; } .server-name { color: @white; font-weight: bold; font-size: 1.25em; margin: .5em 0 -0.15em; } .server-tagline { color: @mp-text-light; margin-bottom: .5em; } .arrow { position: absolute; top: ~"calc(50% - .5em)"; // center arrow on its point right: 0; height: 1em; width: .7em; background-size: .7em 1em; transition: .3s ease-out; }}/* -------------------- X / Twitter --------------------*/@twitter-bg: #15202b;@twitter-bg-dark: #121c26;.mainpage-twitter { border: none; box-shadow: @box-shadow-dark; .tile-top { display: flex; align-items: center; background: @twitter-bg; padding: 1em 1.75em; a { flex: 1; position: relative; // allow link to cover icon text-decoration: none; &:hover .arrow { transform: translateX(50%); } } } .tile-bottom { background: @twitter-bg-dark; border: none; padding: 1em 1.75em; p { color: @white; font-weight: bold; font-size: .9em; text-align: center; text-transform: uppercase; letter-spacing: .03em; margin: 0; } } .twitter-logo { margin-right: .75em; } .twitter-name { color: @white; font-weight: bold; font-size: 1.25em; margin: .5em 0 -0.15em; } .twitter-tagline { color: @mp-text-light; margin-bottom: .5em; } .arrow { position: absolute; top: ~"calc(50% - .5em)"; // center arrow on its point right: 0; height: 1em; width: .7em; background-size: .7em 1em; transition: .3s ease-out; }}/* -------------------- edit the wiki -------------------- */.mainpage-editing { border: none; box-shadow: @box-shadow-dark; .tile-top { background: @steel-blue; } .tile-bottom { background: saturate( darken( @steel-blue, 4% ), 4% ); border: none; padding: .8rem 1.5rem .4rem; } h2, a { color: @white; } p { color: @mp-text-light; } ul { list-style-image: url('/images/rss/Transparent-chevron.svg'); }}/* ========================== poll ========================== */.mainpage-poll .ajaxpoll { border: none; background: none; padding: 0; width: auto;}/* ========================== tbz(r) tile ========================== */.mainpage-trailblazer { grid-area: event; .tb-logo { margin-bottom: @mp-gutter-width; } .tile-row { grid-template-columns: repeat(3,1fr); @media only screen and (max-width: @width-breakpoint-tablet) { grid-template-columns: none; .tile-top { height: 20vw; min-height: 9em; } } }}/* ========================== media queries ========================== */@media only screen and (max-width: @width-breakpoint-desktop-wide) { // switch to two rows of three tiles .mainpage-contents { grid-template-columns: repeat(3, 1fr) }}@media only screen and (max-width: @width-breakpoint-desktop) { // mainpage-left and -right on one column now .mainpage-body { grid-template-areas: "event event event" // for tbzr tile "update update update" "content content content" "left left left" "right right right"; } .mainpage-recent-updates { grid-template-columns: repeat(2, 1fr); .tile-halves { // hide third recent update &:last-child { display: none; } // zoom on hover &:hover .tile-top img { transform: scale(1.04); } } .tile-top { height: 18vw; min-height: 9em; } } // hide other things .mainpage-header .header-stats { display: none; } // kill margin as it duplicates grid's gap .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: @width-breakpoint-tablet) { .mainpage-recent-updates { // resulting in single column grid-template-columns: none; // revert display:none .tile-halves:last-child { display: flex; } } // switch to three rows of two tiles .mainpage-contents { grid-template-columns: repeat(2, 1fr); }}
/* ===================
MAIN PAGE
=================== */
 
/* ===================
variables
=================== */
 
@mp-text-light: fade( @white, 90% );
@mp-gutter-width: .9rem;
 
/* unused
:root {
--bigtile-background-color: #f9f3eb;
--bigtile-background-fade-zero: fade(#f9f3eb, 0%);
--bigtile-background-fade-seventyfive: fade(#f9f3eb, 75%);
}
*/
 
/* ===================
mixins
=================== */
 
// skill training colors
.skill-color(@color) {
 
// icon
span a {
background: desaturate( lighten( @color, 15% ), 20% );
}
 
// skill name
&:hover > a:last-child {
background: @color;
}
 
}
 
/* ==========================
page-specific styles
========================== */
 
body.page-Old_School_RuneScape_Wiki {
 
// limit max width for readability
// don't use #mw-content-text because it includes the editform
.mw-parser-output {
max-width: 75em;
margin: 0 auto;
}
 
// not when editing
&.action-view {
 
.catlinks,
#contentSub,
// hide pagetitle in favor of .mainpage-header
// Note: as of mw1.38, this is not needed anymore
// blanking both [[MediaWiki:Mainpage-title-loggedin]] &
// [[MediaWiki:Mainpage-title]] applies an inline `display: none;`
// #firstHeading,
// anything listed in the sitenotice should already be on the main page
#siteNotice {
display: none;
}
 
}
 
}
 
/* ====================
general styles
==================== */
 
.mainpage-header {
display: flex;
margin: 2.6em 1.75em 1.5em;
 
.header-intro {
flex: 2;
 
h1 {
font-size: 2.5em;
font-weight: bold;
border: none;
margin: 0 0 .15em;
}
 
p {
font-size: 1.1em;
line-height: 1.7em;
}
 
}
 
.header-stats {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
margin-top: -1em;
}
 
}
 
// main sections
.mainpage-body {
display: grid;
grid-template-areas:
"event event event" // for tbzr tile
"update update update"
"content content content"
"left left right";
gap: 0.9rem;
grid-template-columns: repeat(3, 1fr);
 
h2 a {
color: var(--text-color);
}
 
.tile {
padding-left: 1.75em;
padding-right: 1.75em;
max-width: 100%;
}
 
.tile-row {
width: 100%;
margin-bottom: 0;
}
 
}
 
.mainpage-body .tile-row {
display: grid;
gap: 0.9rem
}
 
// left column
.mainpage-left {
grid-area: left;
flex: 2;
display: flex;
flex-flow: column wrap;
 
> * {
margin: 0 0 @mp-gutter-width;
}
 
}
 
// right column
.mainpage-right {
grid-area: right;
flex: 1;
display: flex;
flex-flow: column wrap;
 
> * {
margin: 0 0 @mp-gutter-width;
}
 
}
 
/* ====================
components
==================== */
 
.arrow {
background: url('filepath://White-chevron.svg') no-repeat;
display: inline-block;
height: .7rem;
width: .45rem;
vertical-align: middle;
 
&.dark {
filter: invert(80%);
}
 
}
 
/* =============================
section-specific styles
============================= */
 
/* --------------------
recent updates
-------------------- */
 
// big tile
/* unused
.tile.big-tile {
width: 100%;
background: linear-gradient(to left, var(--bigtile-background-fade-zero), var(--bigtile-background-fade-seventyfive), var(--bigtile-background-color) 40%), url("filepath://Main page Twisted League.png") right / auto 100% no-repeat @white;
margin-bottom: @mp-gutter-width;
padding-right: 8vw;
} */
 
.mainpage-recent-updates {
grid-area: update;
grid-template-columns: repeat(3, 1fr);
 
.tile-halves {
flex: 1;
align-content: flex-start;
 
// zoom on hover
&:hover .tile-top img {
transform: scale(1.04);
}
.tile-top span {
width: 100%;
}
}
 
.tile-bottom.link-button a {
text-align: left;
padding: 1rem 1.5rem .75rem;
}
 
h2 {
margin: -0.5em 0 .3em;
}
 
p:not(.byline) {
font-size: .9em;
line-height: 1.75em;
color: var(--text-color);
}
 
}
 
/* --------------------
wiki contents
-------------------- */
@mp-contents-height: 4.5rem;
 
.mainpage-contents {
grid-area: content;
grid-template-columns: repeat(6, 1fr);
 
.tile-halves {
flex: 1;
}
 
.tile-top {
position: relative; // needed for ribbon
}
 
h2 {
margin: 0;
padding: 0;
}
 
.tile-bottom.link-button a {
padding: 0.75em 0.2em; // prevent grid gap misalignment
}
 
}
 
/* --------------------
skill training
-------------------- */
 
.mainpage-skills {
 
ul {
columns: 3 9em;
margin: 1em .7em .7em 1em;
}
 
// skill row
li {
display: flex;
margin-bottom: .29em;
 
// skill icon
span a {
border-radius: @border-radius;
padding: 4px;
width: 25px;
height: 25px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
 
// skill text
> a:last-child {
flex: 1;
display: flex;
align-items: center;
font-weight: bold;
padding-left: .7em;
text-decoration: none;
}
 
&:hover {
 
a:first-child {
border-radius: @border-radius 0 0 @border-radius;
}
 
> a:last-child {
color: @mp-text-light;
border-radius: 0 @border-radius @border-radius 0;
}
 
}
 
}
}
 
.skill-agility,
.skill-melee {
.skill-color( #932419 ); // red
}
 
.skill-ranged {
.skill-color( #4c6215 ); // green
}
 
.skill-magic {
.skill-color( #304791 ); // blurple
}
 
.skill-fishing,
.skill-fletching {
.skill-color( #1a6671 ); // bluish
}
 
.skill-cooking,
.skill-thieving {
.skill-color( #713684 ); // purple
}
 
.skill-farming,
.skill-woodcutting {
.skill-color( #306f25 ); // dark green
}
 
.skill-mining {
.skill-color( #315f8d ); // dark blue
}
 
.skill-smithing {
.skill-color( #b69213 ); // gold
}
 
/* --------------------
popular mw.pages
-------------------- */
 
.popular-mw.pages ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: .6em;
margin: 1em 0 .7em 0;
}
 
// skill row
.mp-popular-page-light {
display: flex;
align-items: center;
background-color: var(--button-background);
transition: 100ms;
 
a {
flex: 1;
display: block;
color: @white;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: .7em 1em;
}
 
&:hover {
filter: brightness(115%);
transition: 100ms;
}
 
}
 
/* --------------------
discord server
-------------------- */
.mainpage-discord {
border: none;
box-shadow: @box-shadow-dark;
 
.tile-top {
display: flex;
align-items: center;
background: @discord-bg;
padding: 1em 1.75em;
 
a {
flex: 1;
position: relative; // allow link to cover icon
text-decoration: none;
 
&:hover .arrow {
transform: translateX(50%);
}
 
}
 
}
 
.tile-bottom {
background: @discord-bg-dark;
border: none;
padding: 1em 1.75em;
 
p {
color: @white;
font-weight: bold;
font-size: .9em;
text-align: center;
text-transform: uppercase;
letter-spacing: .03em;
margin: 0;
}
 
}
 
.partner-icon {
margin-right: .75em;
}
 
.server-name {
color: @white;
font-weight: bold;
font-size: 1.25em;
margin: .5em 0 -0.15em;
}
 
.server-tagline {
color: @mp-text-light;
margin-bottom: .5em;
}
 
.arrow {
position: absolute;
top: ~"calc(50% - .5em)"; // center arrow on its point
right: 0;
height: 1em;
width: .7em;
background-size: .7em 1em;
transition: .3s ease-out;
}
 
}
 
/* --------------------
X / Twitter
--------------------*/
@twitter-bg: #15202b;
@twitter-bg-dark: #121c26;
 
.mainpage-twitter {
border: none;
box-shadow: @box-shadow-dark;
 
.tile-top {
display: flex;
align-items: center;
background: @twitter-bg;
padding: 1em 1.75em;
 
a {
flex: 1;
position: relative; // allow link to cover icon
text-decoration: none;
 
&:hover .arrow {
transform: translateX(50%);
}
 
}
 
}
 
.tile-bottom {
background: @twitter-bg-dark;
border: none;
padding: 1em 1.75em;
 
p {
color: @white;
font-weight: bold;
font-size: .9em;
text-align: center;
text-transform: uppercase;
letter-spacing: .03em;
margin: 0;
}
 
}
 
.twitter-logo {
margin-right: .75em;
}
 
.twitter-name {
color: @white;
font-weight: bold;
font-size: 1.25em;
margin: .5em 0 -0.15em;
}
 
.twitter-tagline {
color: @mp-text-light;
margin-bottom: .5em;
}
 
.arrow {
position: absolute;
top: ~"calc(50% - .5em)"; // center arrow on its point
right: 0;
height: 1em;
width: .7em;
background-size: .7em 1em;
transition: .3s ease-out;
}
 
}
 
/* --------------------
edit the wiki
-------------------- */
 
.mainpage-editing {
border: none;
box-shadow: @box-shadow-dark;
 
.tile-top {
background: @steel-blue;
}
 
.tile-bottom {
background: saturate( darken( @steel-blue, 4% ), 4% );
border: none;
padding: .8rem 1.5rem .4rem;
}
 
h2,
a {
color: @white;
}
 
p {
color: @mp-text-light;
}
 
ul {
list-style-image: url('filepath://Transparent-chevron.svg');
}
 
}
 
/* ==========================
poll
========================== */
 
.mainpage-poll .ajaxpoll {
border: none;
background: none;
padding: 0;
width: auto;
}
 
/* ==========================
tbz(r) tile
========================== */
 
.mainpage-trailblazer {
grid-area: event;
 
.tb-logo {
margin-bottom: @mp-gutter-width;
}
 
.tile-row {
grid-template-columns: repeat(3,1fr);
 
@media only screen and (max-width: @width-breakpoint-tablet) {
grid-template-columns: none;
.tile-top {
height: 20vw;
min-height: 9em;
}
}
}
 
}
 
/* ==========================
media queries
========================== */
 
@media only screen and (max-width: @width-breakpoint-desktop-wide) {
 
// switch to two rows of three tiles
.mainpage-contents {
grid-template-columns: repeat(3, 1fr)
}
 
}
 
@media only screen and (max-width: @width-breakpoint-desktop) {
 
// mainpage-left and -right on one column now
.mainpage-body {
grid-template-areas:
"event event event" // for tbzr tile
"update update update"
"content content content"
"left left left"
"right right right";
}
 
.mainpage-recent-updates {
grid-template-columns: repeat(2, 1fr);
 
.tile-halves {
 
// hide third recent update
&:last-child {
display: none;
}
 
// zoom on hover
&:hover .tile-top img {
transform: scale(1.04);
}
 
}
 
.tile-top {
height: 18vw;
min-height: 9em;
}
 
}
 
// hide other things
.mainpage-header .header-stats {
display: none;
}
 
// kill margin as it duplicates grid's gap
.mainpage-left > *:last-child,
.mainpage-right > *:last-child {
margin-bottom: 0;
}
 
.popular-mw.pages ul {
grid-template-columns: repeat(2, 1fr);
}
}
 
@media only screen and (max-width: @width-breakpoint-tablet) {
.mainpage-recent-updates {
// resulting in single column
grid-template-columns: none;
 
// revert display:none
.tile-halves:last-child {
display: flex;
}
}
 
// switch to three rows of two tiles
.mainpage-contents {
grid-template-columns: repeat(2, 1fr);
}
}
Retrieved from "https://wiki.runerealm.org/w/Special:MobileDiff/38839"

Navigation menu