6,482
edits
No edit summary |
No edit summary |
||
(27 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* WORKAROUND FOR IOS BUG */ | |||
/* https://discordapp.com/channels/674958932938195015/705057437681713165/776124337496784907 */ | |||
.main-menu-mask {display: none;} | |||
#main-menu-input:checked ~.main-menu-mask {display: block;} | |||
/* | /* | ||
Line 277: | Line 283: | ||
font-size: 30px; | font-size: 30px; | ||
text-align: center; | text-align: center; | ||
} | |||
/* heading padding */ | |||
h1, h2, h3, h4, h5, h6 { | |||
margin-bottom: 0.5em; | |||
} | |||
.content .mw-parser-output > h1, .content .mw-parser-output > h2, .content .mw-parser-output > h3, .content .mw-parser-output > h4, .content .mw-parser-output > h5, .content .section-heading, .content .in-block { | |||
margin-bottom: 0.75em; | |||
} | |||
.mw-ui-icon-element { | |||
/* | |||
padding-bottom: 0; | |||
*/ | |||
} | |||
/* Generic Boxes */ | |||
.box-generic { | |||
box-shadow: 0 0 4px #999; | |||
box-sizing: border-box; | |||
border: none; | |||
border-radius: 3px; | |||
height: 100%; | |||
padding: 1em; | |||
} | |||
.box-header h4, | |||
.box-header h3 { | |||
margin-top: 0; | |||
padding-top: 0; | |||
border-bottom: 3px solid #c7c7c7; | |||
} | |||
.box-header p { | |||
margin: 0 !important; | |||
} | |||
.box-content { | |||
padding: 0; | |||
} | |||
.box-content ul { | |||
margin: 0.3em 0 0 1em; | |||
} | |||
.box-links { | |||
column-width: 18em; | |||
padding: 0; | |||
} | |||
.box-links ul { | |||
margin: 0.3em 0 0 1.16em; | |||
} | |||
/* Flex Container */ | |||
.flex-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
grid-gap: 1em; | |||
} | |||
.flex-container .flex-item { | |||
flex: 1 1 49%; | |||
} | |||
.skin-vector-legacy .flex-container .flex-item { | |||
flex: 1 1 32%; | |||
} | |||
/* Stub, Wiki Project, Notice Templates */ | |||
.custom-notice { | |||
border: 1px solid #a2a9b1; | |||
background-color: #f8f9fa; | |||
clear: both; | |||
text-align: center; | |||
max-width: 600px; | |||
padding: .5em; | |||
margin: 0.5em auto; | |||
} | |||
/* Navigation Button template style */ | |||
.nav-container { | |||
display: grid; | |||
grid-template-columns: auto auto; | |||
} | |||
.nav-button a { | |||
color: #fff !important; | |||
background-color: #36c; | |||
border-color: #36c; | |||
padding: 0.5em 4.2em 0.5em 4.2em !important; | |||
font-weight: bold; | |||
border-radius: 4px; | |||
text-align: center; | |||
} | |||
.nav-button a:hover { | |||
text-decoration: none; | |||
background-color: #447ff5; | |||
border-color: #447ff5; | |||
} | |||
.no-prev, .no-next { | |||
display: none; | |||
} | |||
/* 20231128 */ | |||
.nav-container-flex { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 1em; | |||
margin: 1em 0; | |||
} | |||
.nav-container-flex p { | |||
margin: 0; | |||
} | |||
/* Button Box template */ | |||
.button-section h3 { | |||
margin: 0; | |||
border: none; | |||
padding: .5em 0; | |||
} | |||
.button-links { | |||
display: flex; | |||
flex-wrap: wrap; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 3px; | |||
background-color: #f8f9fa; | |||
} | |||
.button-object { | |||
flex: 0 1 100%; | |||
max-height: 64px; | |||
} | |||
.button-object:not(:last-of-type) { | |||
border-bottom: 1px solid #a2a9b1; | |||
} | |||
.button-object p { | |||
display: flex; | |||
margin: 0; | |||
max-height: 64px; | |||
} | |||
.button-object a { | |||
display: block; | |||
color: black; | |||
text-decoration: none; | |||
line-height: 1.15em; | |||
padding: .85em; | |||
flex: 1 1 100%; | |||
} | |||
.button-object a.external { | |||
background-image: none; | |||
} | |||
.button-object.button-collection a { | |||
font-weight: bold; | |||
padding: .5em; | |||
text-align: center; | |||
} | |||
.button-object a:hover { | |||
background: #c7c7c7; | |||
transition: linear .1s; | |||
} | |||
.button-object a:visited, | |||
.button-object a.external:visited { | |||
color: black; | |||
} | |||
/* Main Page styling */ | |||
.page-Main_Page #firstHeading, #contentSub, #contentSub2 { | |||
display: none; | |||
} | |||
.page-Main_Page .mw-parser-output > h2 { | |||
font-size: 1.8em; | |||
border: none; | |||
} | |||
.page-Main_Page .welcome-container { | |||
padding: 1.25em; | |||
margin-bottom: .75em; | |||
box-shadow: 0 0 4px #999; | |||
border-radius: 3px; | |||
} | |||
.page-Main_Page .welcome-inner h1 { | |||
border: none; | |||
margin: 0; | |||
line-height: 1em; | |||
} | |||
.page-Main_Page .welcome-inner .welcome-as-seen { | |||
font-style: italic; | |||
} | |||
.page-Main_Page .welcome-inner .welcome-as-seen p { | |||
margin: 0; | |||
} | |||
.page-Main_Page .welcome-stats { | |||
text-align: center; | |||
} | |||
.page-Main_Page .welcome-links { | |||
display: flex; | |||
justify-content: space-evenly; | |||
margin-top: 1em; | |||
} | |||
.page-Main_Page .welcome-links ul { | |||
font-size: 95%; | |||
margin: 0; | |||
list-style: none; | |||
} | |||
.page-Main_Page .welcome-links li { | |||
margin: 0; | |||
} | |||
.page-Main_Page .intro-container { | |||
display: flex; | |||
gap: .75em; | |||
} | |||
.page-Main_Page .eric-section, | |||
.page-Main_Page .community-section { | |||
background: none; | |||
border: none; | |||
border-radius: 3px; | |||
box-shadow: 0 0 4px #999; | |||
padding: 1.25em; | |||
} | |||
.page-Main_Page .eric-section { | |||
flex: 0 1 100%; | |||
} | |||
.page-Main_Page .community-section { | |||
flex: 0 1 100%; | |||
max-width: 33%; | |||
} | |||
.page-Main_Page .eric-section h2, | |||
.page-Main_Page .community-section h2 { | |||
border-bottom: 3px solid #c7c7c7; | |||
margin: 0; | |||
} | |||
.page-Main_Page div.floatleft { | |||
margin: 0.8em 1.25em 0 0; | |||
} | |||
.page-Main_Page div.floatleft img { | |||
margin: 0; | |||
box-shadow: 0 0 2px #afafaf; | |||
border: solid 1px #afafaf; | |||
} | |||
.page-Main_Page .eric-social { | |||
text-align: center; | |||
margin-top: .78em; | |||
} | |||
.page-Main_Page .eric-social p { | |||
margin: 0; | |||
line-height: 1em; | |||
} | |||
.page-Main_Page .eric-social .social-icons a.external { | |||
background: unset; | |||
font-size: 24px; | |||
line-height: 1em; | |||
text-align: center; | |||
} | |||
.page-Main_Page .media-section { | |||
clear: both; | |||
} | |||
.page-Main_Page .eric-section h2, | |||
.page-Main_Page .eric-section h3, | |||
.page-Main_Page .community-section h2, | |||
.page-Main_Page .community-section h3 { | |||
margin: 0; | |||
} | |||
@media only screen and (max-width : 1000px) { | |||
div.floatright { | |||
float: unset; | |||
} | |||
div.floatright img { | |||
margin-left: 0; | |||
} | |||
div.mw-collapsible { | |||
width: 95%!important; /* Temp fix for Defacing the Wall’s wide collapsible boxes on mobile */ | |||
} | |||
.infobox { | |||
float: none!important; | |||
width: 100%!important; | |||
margin: 0 0 1em 0!important; | |||
} | |||
.mobile-fullwidth { | |||
width:100%!important; | |||
} | |||
.flex-container .flex-item { | |||
flex: 1 1 100%; | |||
} | |||
.page-Main_Page .intro-container { | |||
flex-wrap: wrap; | |||
} | |||
.page-Main_Page .community-section { | |||
max-width: unset; | |||
} | |||
} | |||
/* 20210203 */ | |||
.content .box-generic .in-block { | |||
display: unset; | |||
} | |||
.content .box-generic .in-block > span { | |||
display: unset; | |||
} | |||
.box-header { | |||
padding: 0.5em; | |||
} | |||
/* 20210805 */ | |||
.page-Main_Page .welcome-links { | |||
flex-direction: column; | |||
} | |||
.page-Main_Page .welcome-links ul { | |||
list-style: disc; | |||
padding: 0; | |||
padding-left: 1em; | |||
} | |||
.page-Main_Page .welcome-links li { | |||
margin-bottom: 0.5em; | |||
} | |||
.page-Main_Page div.floatleft { | |||
margin: 0; | |||
float: unset; | |||
} | |||
.page-Main_Page .box-header { | |||
padding: 0.5em 0; | |||
} | |||
.page-Main_Page .button-object a { | |||
overflow: hidden; | |||
} | |||
.page-Main_Page h2.in-block { | |||
margin: 0.2em 0; | |||
border-bottom: none; | |||
} | |||
.page-Main_Page .eric-profile h2.in-block, | |||
.page-Main_Page .community-section h2.in-block { | |||
margin-bottom: 0.5em; | |||
padding: 0; | |||
border-bottom: 3px solid #c7c7c7; | |||
} | |||
.page-Main_Page h4.in-block { | |||
padding-bottom: 0.4em; | |||
} | |||
.box-header h4, .box-header h3 { | |||
padding-bottom: 0.1em; | |||
} | |||
/* Grid Templates */ | |||
.grid-3-col { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr 1fr; | |||
gap: 1em; | |||
} | |||
.grid-2-col { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 1em; | |||
} | |||
@media screen and (max-width: 800px) { | |||
.grid-3-col, | |||
.grid-2-col { | |||
grid-template-columns: 1fr; | |||
} | |||
} | |||
/* CardBook */ | |||
.card-book { | |||
display: grid; | |||
grid-template-columns: 112px 1fr; | |||
grid-template-rows: auto 1fr; | |||
grid-template-areas: | |||
"img info" | |||
"followon followon"; | |||
gap: 0.75em; | |||
padding: 0.75em; | |||
background: #e9e9e9; | |||
border-radius: 6px; | |||
} | |||
.card-book-img { | |||
grid-area: img; | |||
} | |||
.card-book-img img { | |||
border-radius: 3px; | |||
} | |||
.card-book-info { | |||
grid-area: info; | |||
} | |||
.card-book-title p, | |||
.card-book-authors p { | |||
line-height: 1.15; | |||
} | |||
.card-book-title p { | |||
margin: 0 0 0.25em; | |||
} | |||
.card-book-title a { | |||
font-weight: bold; | |||
} | |||
.card-book-authors p, | |||
.card-book-description p { | |||
margin: 0 0 0.5em; | |||
} | |||
.card-book-authors { | |||
font-size: 0.8em; | |||
} | |||
.card-book-description { | |||
line-height: 1.3; | |||
} | |||
.card-book-followon { | |||
grid-area: followon; | |||
} | |||
.card-book-followon-heading { | |||
color: #393939; | |||
font-weight: bold; | |||
line-height: 1.3; | |||
margin: 0 0 0.5em; | |||
} | |||
ul.card-book-followon-list { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.card-book-followon-list-item { | |||
list-style: none; | |||
display: grid; | |||
grid-template-columns: 80px 1fr; | |||
gap: 0.75em; | |||
width: 100%; | |||
} | |||
.card-book-followon-list-item:not(:last-child) { | |||
margin: 0 0 0.75em; | |||
} | |||
.card-book-followon-img { | |||
border-radius: 3px; | |||
} | |||
.card-book-followon-title p { | |||
margin: 0; | |||
} | } |