Foreground.css: Difference between revisions

Revision as of 06:02, 2 February 2024

/* 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
• 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-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: '';
    display: block;
    height: 12px;
    left: 0;
    margin: 0 0.8em;
    min-height: 1.1em;
    position: absolute;
    right: 0;
    width: 12px;
}

.c-header.hidden span:before {
    background-image: url(http://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;
}

/* 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;
}

/* 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 {
padding: 1em 1em;
    border: none !important;
    display: block;
    margin: 1.5em 0;
    position: fixed !important;
    left: 10.376vw;
    width: 180px;
    top: 3.7em;
} 

div#updatestitle {
    font-weight: bold;
    border-bottom: 1px solid gray;
    padding-bottom: 1em;
}

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

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

/* TOC */

div#toc {
    left: 9.4vw;
    width: 200px;
    top: 5em;
}

/* Content removal */

/* Removing the Namespace Labels */

h4.namespace.label {
    display: none
}

/* Spacing and broken content fixes */

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

div#main-content {
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;
}

}


/* 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 */

div#main-content {
    margin-top: 5em !important;
    margin-bottom: 0.7em;
}

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

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

#recentupdates {
    left: 10.6vw;
    width: 180px;
    top: 3em;
}

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

}

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

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

#recentupdates {
    left: 5.4vw;
    width: 180px;
    top: 6.5em;
}

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

}

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

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

#recentupdates {
    left: 5.4vw;
    width: 180px;
    top: 5.5em;

}

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

}

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

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

#recentupdates {
    left: 5.4vw;
    width: 180px;
    top: 6.5em;
}

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 */

div#main-content {
    margin-top: 7em !important;
    margin-bottom: 0.7em;
}

/* 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) {

/* Top navigation bar height */

.top-bar {
    height: 3.7rem;
}

/* Hide sidebar */

div#sidebar {
    display: none;
}

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

/* Margin at top of page */

div#main-content {
    margin-top: 4em !important;
    margin-bottom: 0.7em;
}

/* Hide TOC */

div#toc {
    display: none
}

/* Search Bar Length */

input#searchInput {
    width: 190px;
}

/* Recent Updates Positioning */

#recentupdates {
    display: none;
}

/* 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) {

div#p-cactions:has(> #actions) {
    margin-top: -1em;
}

}

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

div#p-cactions:has(> #actions) {
    margin-top: 1.5em;
}

}

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

div#p-cactions:has(> #actions) {
    margin-top: -0.3em;
}

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

}

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

div#p-cactions:has(> #actions) {
    margin-top: 2.6em;
}

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

}

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

div#p-cactions:has(> #actions) {
    margin-top: 5.3em;
}

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

}

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

div#p-cactions:has(> #actions) {
    margin-top: -0.4rem;
}

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;
}

}