Foreground.css: Difference between revisions

Latest revision as of 19:05, 1 February 2025

/* The CSS added here will affect both desktop and mobile users. Before finishing, please ensure that the style works well on all devices. Edit this CSS with caution, it can cause big changes!

This CSS page contains formatting for the site as a whole. If you're looking for formatting for the more specific, in-article elements, check https://grousehouse.wiki/MediaWiki:Common.css!

Table of Contents (you can search the page for these titles to jump straight there):
• Headers and text
    • Collapsible headers
    • Text sizing
• Image fixes
• Search page
• Wiki editor
• Comments pages
• Category section and footer
• Recent updates and TOC
• Content removal
• Spacing and broken content fixes
• Important scaling for main content

/* Headers and text */
/* Collapsible headers */

.c-header span:before {
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: '';
    display: block;
    height: 12px;
    margin: 0.1em 0.8em;
    min-height: 1.1em;
    width: 12px;
    position: relative;
    top: 1.455em;
left: -2em;
}

.c-header {
margin-top: -1em;
}

.c-header {
    border-bottom: 1px solid lightgray;
    padding-bottom: 0.4em;
}

.h-static {
    border-bottom: 1px solid lightgray;
    padding-bottom: 0.4em;
}

.c-header.hidden:last-of-type {
    border: none;
}

h3.c-header {
    padding-left: 0.3em;
}

.c-header.hidden span:before {
    background-image: url(https://grousehouse.wiki/images/6/62/Downarrow.png);
}

.c-header.active span:before {
    background-image: url(https://grousehouse.wiki/images/3/37/Uparrow.png);
}

.c-header {
    margin-left: 1em;
}

.c-header.active {
    margin-left: 1em;
}

.c-content {
  display: none;
  overflow: hidden;
}

h2.h-static {
font-size: 1.3rem !important;
}

h3.h-static {
font-size: 1.0rem !important;
}

h2 {
font-size: 0em;
}

h2.c-header.active {
font-size: 1.3em;
}

h2.c-header.hidden {
font-size: 1.3em;
}

h3 {
font-size: 0em;
}

h3.c-header.active {
font-size: 1.1em;
}

h3.c-header.hidden {
font-size: 1.1em;
}

h4.c-header.active {
  font-size: 1em;
  font-weight: bold;
margin-left: 1.5em;
}

h4.c-header.hidden {
  font-size: 1em;
  font-weight: bold;
margin-left: 1.5em;
}


/* Text sizing */

h1#firstHeading {
font-weight: bold;
}

/* Page Body Font Sizes */

div#mw-clearyourcache ul li {
    font-size: 0.8em;
}

pre.mw-code.mw-css {
    font-size: 0.9em;
}

ul, ol, dl {
font-size: 0.9rem;
}

p {
font-size: 0.9rem;
}

.crowdsource-warning {
font-size: 0.9rem;
}


/* Image fixes */
/* Search page */

/* Results values (1 - 3, etc) */

.results-info {
    margin-bottom: -1em;
}

/* Create this page line */

p.mw-search-createlink {
    margin-top: -0.8em;
}

/* Start of search results container */

.mw-search-results-container {
    margin-top: 1.2em;
}
/* Search button */

div#mw-search-top-table button {
    height: 2.33em;
}

.mw-search-profile-tabs {
    margin-top: 1em;
}

/* Search Bar Length */

input#searchInput {
    width: 190px;
}

/* Search padding */

#mw-content-text .mw-search-results {
    margin-top: -5px;
}

.mw-search-result-heading {
    margin-top: -0.7em;
}

#mw-search-top-table div.oo-ui-actionFieldLayout {
    float: left;
    width: 55vw;
}

.mw-search-results-container {
    margin-top: 1.2em;
}

div#mw-search-top-table button {
    height: 2.31em;
}

.mw-search-profile-tabs {
    margin-top: 1em;
}

/* Wiki editor */

.wikiEditor-ui-toolbar .tabs span.tab a {
    color: #5388a0 !important;
    cursor: pointer;
    display: block;
    height: 32px;
    padding-left: 18px;
    padding-right: 12px;
}

#msupload-dropzone {
    margin: 3px;
    padding: 5px;
    border: 1px dashed #aaaaaa;
    text-align: center;
    height: 38px !important;
    color: #222222;
}

.wikiEditor-ui-toolbar .booklet > .index > .current {
    background-color: #5388a03d !important;
    color: #5388a0 !important;
}

/* Comments pages */

span.c-score-title {
    display: none;
}

.c-item {
    width: 100%;
}

textarea#comment {
    width: 100%;
}

div#spy {
    display: none;
}

.c-order {
    display: none;
}

.c-form-message {
    display: none;
}

/* Category section and footer */

/* Category section */

#catlinks {
    border-top: 1px solid lightgray !important;
    padding: 0.25rem;
    padding-top: 1rem;
    margin-top: 1em;
    border: none;
}

/* Footer Links */

span#footer-credits:after {
    content: "\A";
    white-space: pre;
}

span#footer-about:after {
    content: " | ";
}

span#footer-disclaimers:after {
    content: " | ";
}

span#footer-mobileview:after {
    content: " | ";
}

/* Footer Height */

footer.row {
height: 6.5em;
}

/* Recent updates and TOC */

/* Recent updates */

#recentupdates {
width: 38%;
  height: 500px;
  overflow: auto;
  background-color: #d4d4d4;
  margin: 0.5em;
}

div#updatestitle {
  background: #b0b0b0;
  margin-top: -0.8em;
}

div#updatestitle h3 {
border-bottom: 1px solid black;
  padding-bottom: ;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
}

div#updatedate {
    font-style: italic;
    font-size: 0.9em;
    padding-top: 1em;
}

div#updatecontent {
    border-bottom: 1px solid #bfbbbb;
    padding-bottom: 1em;
}

.update {
margin: 1em;
}

@media only screen and (max-width: 74.125em) {
#recentupdates {
width: 100%;
}
}

/* Mobile TOC */

#sidebarlogo {
position: fixed;
  top: 0.5em;
  left: 7.4vw;
width: 200px;
text-align: center;
}

#sidebarlogo img {
  height: 70px;
  width: auto;
}

table.mobiletoc {
    width: 90vw;
    margin: auto;
}

.mobiletoc th {
    padding: 10px;
}

table.mobiletoc button.mw-collapsible-toggle {
    margin-left: 20px;
}

.mw-collapsible-toggle-default::before {
    content: '[';
    color: #406e83;
}

.mw-collapsible-toggle-default::after {
    content: ']';
    color: #406e83;
}

table.mobiletoc td.disclaimer {
    font-size: 0.7em;
    padding: 10px;
}

table.mobiletoc tr:nth-of-type(2) td:first-of-type {
    padding-top: 10px;
}

table.mobiletoc td.mtocl1 {
    padding: 20px;
    padding-top: 0.1em;
    padding-bottom: 0.2em;
}

table.mobiletoc td.mtocl2 {
    padding: 20px;
    padding-left: 40px;
    padding-top: 0.1em;
    padding-bottom: 0.2em;
}

table.mobiletoc td.mtocl3 {
    padding: 20px;
    padding-left: 60px;
    padding-top: 0.1em;
    padding-bottom: 0.2em;
}

table.mobiletoc tr:last-of-type td:last-of-type {
    padding-bottom: 20px;
}

@media only screen and (max-width: 47rem) {
  table.mobiletoc {
    top: 0em;
  }
}

/* TOC Testing */

table.mobiletoc {
display: inline;
    left: 9.4vw;
    width: 170px;
    top: 6em;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
background: #b0b0b0;
    font-size: 0.8em;
}

table.mobiletoc tr {
background: #d4d4d4;
}

div#toc {
display: none;
}

@media only screen and (max-width: 62.063rem) {

table.mobiletoc {
    width: 150px;
    margin: auto;
left: 4.5vw;
    height: auto;
    overflow-y: scroll;
    font-size: 0.8em;
max-height: 80vh;
    position: fixed;
display: table;
top: 6rem;
}

}

@media only screen and (max-width: 40em) {
table.mobiletoc {
position: initial !important;
width: 90vw;
}

table.mobiletoc {
    background-color: #d4d4d4;
}

.mobiletoc th {
background-color: #b0b0b0;
}
}

@media only screen and (min-width: 40.01em) {
.mw-collapsible-toggle-default::before {
    display: none;
}

.mw-collapsible-toggle-default::after {
    display: none;
}

span.mw-collapsible-text {
    display: none;
}

td.disclaimer {
display: none;
}

table.mobiletoc tr {
    background: none;
}

.mobiletoc th {
    background: none;
font-size: 1.3em;
}

table.mobiletoc {
    background: none;
}
}


/* Remove extra headers from edit button fix */

.mw-headline + .mw-editsection {
  display: none;
}

h2 {
font-size: 0em;
}

h2.c-header.active {
font-size: 1.3em;
}

h2.c-header.hidden {
font-size: 1.3em;
}


/* Fix bolded headers being bolded in the TOC */

div#toc li a span b {
    font-weight: normal !important;
}

/* Content removal */

/* Removing the Namespace Labels */

h4.namespace.label {
    display: none
}

/* Spacing and broken content fixes */

div#mw-content-text {
    width: 100%;
}

#page-container {
    background: white;
    margin: 0 auto;
    display: flex;
    height: auto;
    min-height: 92.4vh;
}

div#mw-imagepage-section-filehistory {
    max-width: 55vw;
    width: auto;
    overflow: scroll;
}

.mw-rcfilters-ui-changesListWrapperWidget {
    position: relative;
    max-width: 89vw;
    width: auto;
    overflow: scroll;
}

.fullImageLink img {
    max-width: 90vw;
    width: 100%;
}

.mw_metadata {
    max-width: 400px;
    width: auto!important;
}

.mw-rcfilters-ui-filterWrapperWidget {
    width: 95%;
}

.mw-search-results-container, .mw-search-results-info {
    float: left;
    width: 100% !important;
}

/* Fixing top margin for logged-in users */

h1#firstHeading {
    margin-top: 0.2em !important;
    margin-bottom: 1em;
}

a#actions-button {
margin-top: 0 !important;
}

/* Fixing breaking content */

div#uploadtext {
    overflow: scroll;

}

div#p-cactions {
    text-wrap: wrap;
    word-break: break-word;
}

/* Flex container for tables that won't stay within bounds */

.flexcontainer {
    display: flex;
    flex-direction: column;
    width: 40vw;
    margin: auto;
}

@media only screen and (max-width: 40em) {

.flexcontainer {
    width: 90vw;
    margin: auto;
}

}

/* Fixing headers that get duplicated because they contain punctuation (please why) */

span[id*='.27'] {
    display: none;
}

span[id*='.3F'] {
    display: none;
}

span[id*='.2C'] {
    display: none;
}

span[id*='.2F'] {
    display: none;
}



/* Important scaling for main content */

/* Desktop 1920px# through 1281px#*/

@media only screen and (max-width: 120rem) {

/* Width of main content */
div#page-container {
    width: 80vw;
}

/* Margin at top of page */

}
 
/* Desktop 1066px# through 993px# */

@media only screen and (max-width: 66.625rem) {

h1#firstHeading {
    font-size: 1.5rem;
}

}

/* Desktop 993px# through 712px# */

@media only screen and (max-width: 62.063em) {

h1#firstHeading {
    font-size: 1.5rem;
}

}

/* Desktop 712px# through 647px# */

@media only screen and (max-width: 44.5em) {

h1#firstHeading {
    font-size: 1.2rem;
}

}

/* Desktop 647px# through 640px# (navbar total collapse width) */

@media only screen and (max-width: 40.438rem) {

h1#firstHeading {
    font-size: 1.1rem;
}

}

/* Desktop 993px# through 641px# (navbar total collapse width) */

@media only screen and (max-width: 62.063rem) {

/* Width of main content */
div#page-container {
    width: 90vw;
}

/* Margin at top of page */

/* TOC Positioning */

div#toc {
    left: 4.5vw;
    width: 200px;
    top: 8em;
}

/* Search Bar Length */

input#searchInput {
    width: 190px;
}

/* Footer Height */

footer.row {
height: 7em;
}

div#mw-content-text {
    width: 100%;
}

div#mw-imagepage-section-filehistory {
    max-width: 55vw;
    width: auto;
    overflow: scroll;
}

.mw-rcfilters-ui-changesListWrapperWidget {
    position: relative;
    max-width: 89vw;
    width: auto;
    overflow: scroll;
    font-size: 0.8em;
}

#filetoc {
max-width: 55vw;
}

}

/* Mobile 640px# and under (navbar total collapse width) */

@media only screen and (max-width: 40rem) {

#sidebarlogo {
display: none !important;
}

h1#firstHeading {
    margin-top: 1em !important;
}

i.far.fa-comments {
margin-top: 0 !important;
}

a#actions-button {
    margin-top: 0.5em !important;
}

/* Top navigation bar height */

.top-bar {
    height: 4rem;
}

/* Hide sidebar */

div#sidebar {
    display: none;
}

/* Width of main content */
div#page-container {
    width: 100vw;
}

/* Margin at top of page */

/* Hide TOC */

div#toc {
    display: none
}

/* Search Bar Length */

input#searchInput {
    width: 190px;
}

/* Footer Height */

footer.row {
height: 9em;
}

/* Top navigation on mobile */

.top-bar-section .has-dropdown {
margin-right: 0px !important;
}

/* Elements that break out on mobile */

.mw-rcfilters-ui-changesListWrapperWidget {
    max-width: 89vw;
    overflow: scroll;
    font-size: 0.8em
}

div#mw-content-text {
    width: 100%;
}

@supports (aspect-ratio:16 / 9)
#file img {
    max-width: 100%;
    height: auto;
}

div#mw-imagepage-section-filehistory {
    max-width: 90vw;
    width: auto;
    overflow: scroll;
}

#filetoc {
max-width: 90vw;
}

}

/* Adjustments for Logged-in Users */

/* Desktop 1280px# through 1067px# (navbar collapse width) */

@media only screen and (max-width: 120rem) {

}

@media only screen and (max-width: 66.625rem) {

}

@media only screen and (max-width: 62.063rem) {

footer.row:has(> #footer > #footer-left > #footer-left-ul > #footer-credits) {
    height: 10em;
}

}

@media only screen and (max-width: 44.5rem) {

footer.row:has(> #footer > #footer-left > #footer-left-ul > #footer-credits) {
    height: 10em;
}

}

@media only screen and (max-width: 40.438rem) {

footer.row:has(> #footer > #footer-left > #footer-left-ul > #footer-credits) {
    height: 10em;
}

}

@media only screen and (max-width: 40rem) {

footer.row:has(> #footer > #footer-left > #footer-left-ul > #footer-credits) {
    height: 14em;
}

}

/* Remove footer if height is small to fix keyboard bug on mobile */

@media only screen and (max-height: 25rem) {

footer.row {
display: none;
}

}

.sectionToggles {
    text-align: right;
}

button.collapseAll {
    margin-left: 0.8em;
}

#scrollToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99900; 
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#scrollToTop img {
  width: 20px;
}

#ca-talk {
  display: none;
}

#talkpagelink {
  width: 30px;
  position: absolute;
  right: 1em;
  top: 0.3em;
}

@media only screen and (max-width: 69rem) { 

table.mobiletoc {
}

#sidebarlogo {
    top: 2em;
}
}

@media only screen and (max-width: 62.063rem) {

table.mobiletoc {
}

#sidebarlogo {
left: 4vw;
}

#sidebarlogo img {
    height: 100px;
}
}

@media only screen and (max-width: 42.5rem) {

table.mobiletoc {
}

#sidebarlogo {
    top: 4em;
left: 4vw;
}

#sidebarlogo img {
    height: 100px;
}
}