Foreground.css: Difference between revisions

Revision as of 05:35, 2 February 2024

/* CSS added to this page will only be applied to desktop users. To adjust CSS for mobile users, visit https://grousehouse.wiki/MediaWiki:Minerva.css */


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

/* Search page specifics */

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

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

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


/* Recent Updates */

#recentupdates {
padding: 1em 1em;
    border: none !important;
    display: block;
    margin: 1.5em 0;
    position: fixed !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;
}

/* Headers and text sizing */

h1#firstHeading {
font-weight: bold;
}

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

}

/* TOC Positioning */

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

/* Recent Updates Basic Formatting */

#recentupdates {
    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;
}

/* Footer Height */

footer.row {
height: 6.5em;
}

/* Search Bar Length */

input#searchInput {
    width: 190px;
}

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

}


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

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

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

/* TOC Positioning */

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

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


}

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

@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# (navbar total collapse width) */

@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# (navbar total collapse width) */

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

}

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

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

/* Category section */

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

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

div#main-content {
width: 100%;
}

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

/* Removing the Namespace Labels */

h4.namespace.label {
    display: none
}

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

}