MediaWiki

Common.css

From Dogcraft Wiki

No edit summary
m (mobile no border)
Β 
(553 intermediate revisions by 3 users not shown)
Line 1: Line 1:
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
html { /*global CSS variables*/
@import url('https://fonts.googleapis.com/css?family=Fascinate+Inline&display=swap');
--main-color: #8b0024;
--second-color: #e05176;
--button-color: #367fa9;
--link-color: #0099db;
--radius: 5px;
}


/* Hide "Main Page" titles */
html {
body.page-Main_Page .title,
scroll-behavior: smooth;
body.page-Main_Page #tagline {
scroll-padding: calc(110px + 2rem);
display: none;
}
Β 
:has(:target) {
Β  scroll-padding: calc(110px + 2rem);
}
}


.row.display {
/* Temporary template:anchor_link parent positioning until TemplateData adds :has() support */
background: #eee;
:has(> a > span.anchor-visible) {
font-size: 11px;
position: relative;
margin-bottom: 10px;
}
}
.row.display .columns,
Β 
.row.display .column {
/* Temporary classes for News indicator positioning for logged out users */
background: #e7e7e7;
@media only screen and (min-width: 701px) {
border: 1px solid #ddd;
.indicator-right {
font-size: 13px;
position: relative;
font-weight: bold;
}
text-indent: 3px;
padding-top: 8px;
.indicator-right .mw-indicators.mw-body-content {
color: #444;
position: absolute;
padding-bottom: 8px;
right: 0;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
}
}


/* == Things that will (eventually) be moved out to MediaWiki:Dogcraft.css == */
/* mobile no border */
@media only screen and (max-width: 749px) {
body > #main {
Β  padding-left: 0;
Β  padding-right: 0;
}
.content {
}
body > #main > main > .content {
Β  border: 0;
Β  border-radius: 0;
Β  margin-top: 0;
Β  padding: 25px 20px;
}
}


/* VisualEditor
* fixes misalignment of icons
*/
.oo-ui-toolbar-bar .oo-ui-tool .oo-ui-tool-link {
padding-top: 0 !important;
}


/*==Fixes the Visula Editor save confirm dialog box's position on screens smaller than 550px==*/
/* reversing the order of items in the actions menu dropdown */
@media only screen and (max-width: 499px) {
.tippy-box[data-theme~="dropdown"] .tippy-content .dropdown-content {
.oo-ui-window-frame {
flex-direction: column-reverse;
top: 90.9px!important;
}
/* styling for the create page in category inputbox, used in the MediaWiki:Category header system message */
#create-new-in-category {
Β  font-size: 1rem;
Β  margin-bottom: 1rem;
}
/* definiton lists */
:not(.nolist) > dl {
margin-inline-start: 1rem;
list-style-type: disc;
}
dt {
display: list-item;
font-weight: 600;
}
dd + dt {
margin-top: .5em;
}
.nolist > dl > dt {
display: block;
}
/* bugfix: hiding hidden categories by default
* the second part of this bugfix is in Common.js, which shows hidden categories only to people who have selected the appropriate user preference
*/
#mw-hidden-catlinks {
display: none;
}
Β 
/* hiddencats styles */
#mw-hidden-catlinks::before {
Β  content: 'Status categories:';
color: gray;
}
#mw-hidden-catlinks {
Β  border-top: 1px solid #a2a9b1;
Β  padding-top: 4px;
Β  margin-top: 8px;
Β  margin-bottom: -8px;
}
Β 
/* vertically centering indicators (namespace label, featured article label) in all namespaces except main, alignign it with actions button - testing */
body:not(.ns-0) .top .indicators {
margin: auto 0;
}
@media only screen and (max-width: 900px)
{
/* galery overflows on small mobile screens */
ul.gallery:not(.slick-slider) {
overflow-x: auto;
}
}
a.new { /* Broken link color */
color: #8b0024; /*this could be "red"*/
}
figure[typeof~="mw:Image/Thumb"] > :first-child > img {
width: calc(100% - 10px) !important;
}
a.oo-ui-labelElement-label:not(.new) { /*Visual editor redirect suggestions should be blue when it points to an existing page, instead of red*/
color:#0099db;
}
.mw-highlight pre { /*Special:ApiSandbox output wrapping*/
white-space: pre-wrap;
}
/* Visual editor prompt for editing templates goes off the screen on small mobile screens, taking the edit button with it.*/
@media only screen and (max-width: 900px) Β 
{
.ve-ui-linearContextItem-title {
flex: 0;
}
}
Β 
@media only screen and (min-width: 901px) { /* desktop */
.ve-ui-toolbar-saveButton { /* save button full height */
padding-top: 0.857143em;
}
}
.oo-ui-windowManager-modal > .tdg-templateDataDialog {
z-index: 11;
}
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
z-index:11;
}
.ve-ui-overlay-global {
z-index: 11;
}
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
top: 7.5em;
}
/* Under 350px the ip bar height doubles */
@media only screen and (max-width: 349px) { Β 
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
top: 9em;
}
}
.ve-init-target-visualΒ  .oo-ui-menuToolGroup {
border-left-color: transparent;
border-right-color: transparent;
}
.ve-init-target-visualΒ  :not(.oo-ui-toolbar-actions) > .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
border-bottom: none;
box-shadow: 0 3px 5px 1px rgba(0,0,0,0.3);
}
Β 
Β 
/* ==Structural/Skin changes== */
Β 
h1, h2, h3, h4, h5, h6 {
margin: 10px 0 0;
}
#tagline {
margin-top: -5px;
}
}
}


/*VE Gallery Insert box fix on phone*/
/*heading sizes - test here now, ask Owen to move into skin file after trial*/
@media only screen and (max-width: 900px) {
h2 {
.ve-ui-mwGalleryDialog .oo-ui-window-frame {
font-size:30px; /*primarily used*/
top: 90.9px!important;
}
h3 {
font-size:24px; /*secondarily used*/
}
h4 {
font-size:20px;
}
h5 {
font-size:18px;
font-weight:600;Β  /* mid-bold: bolder then normal text, not as bold as the other headers */
}
h6 {
font-size:16px; /*same as default text size*/
font-weight:600; /* mid-bold: bolder then normal text, not as bold as the other headers */
}
#actions-button {
z-index:5!important;
}
.mw-special-Movepage #ooui-2 {
z-index:600;
}
.clear-both,
.clear_both {
clear:both;
}
blockquote {
margin-top: 10px;
}
/* Selflinks */
a.mw-selflink {
color: inherit;
font-weight: 600;
text-decoration: inherit;
cursor: inherit;
}
.content .mw-selflink:hover {
text-decoration:none;
}
/* Search box allignment issue */
@media only screen and (min-width: 641px) {
.top-bar input {
padding-top: .5rem;
}
}
/* Correct anchor behavior with fixed topnav */
.mw-headline:target, .anchor:target {
Β  Β  padding-top: 110px;
Β  Β  margin-top: -110px;
}
}
}
.mw-hightlight :target {
/*VE Gallery Insert box fix on dektop*/
border-top:110px solid transparent;
@media only screen and (min-width: 901px) {
margin-top:-110px;
.ve-ui-mwGalleryDialog .oo-ui-window-frame {
background-clip:padding-box;
top: 80px!important;
}
}
}
/**/


/*VE Media Insert box fix on phone*/
/* Adding spacing between paragraphs (MAJOR) */
@media only screen and (max-width: 900px) {
.mw-body-content p, .mw-body-content ul { Β 
.ve-ui-mwMediaDialog .oo-ui-window-frame {
margin-bottom:1em;
top: 90.9px!important;
}
}
}
/*VE Media Insert box fix on dektop*/
.mw-body-content ul ul, #toc ul,
@media only screen and (min-width: 901px) {
.mw-body-content ul.gallery p,
.ve-ui-mwMediaDialog .oo-ui-window-frame {
.mw-body-content blockquote p { /* exclusions */
top: 80px!important;
margin-bottom: initial;
}
/* slim utility class: disables bottom margin */
.mw-body-content .slim ul,
.mw-body-content .slim p,
.mw-body-content .slim { /* exclusions */
margin-bottom: initial;
}
}
}
/**/


/*VE All options menus fix on phone*/
#mw-indicator-mw-helplink a { /* Changing the default question mark in the help indicator on special and category pages */ Β 
@media only screen and (max-width: 700px) {
background-image: url('images/0/0d/Mw_helplink_image.svg');
.ve-ui-dir-block-ltr .oo-ui-window-frame {
}
top: 90.9px!important;
ul.gallery.mw-gallery-slideshow { /* Overriding default margins for gallery mode slideshow */
margin: 0;
}
}
}
/* Moving content down (testing) (main only) */
/*first heading needs to be the one to be moved down, because if the whole #content is moved down, the Action button will become
unclickable */
/*.ns-0 #content > h1 {Β  --to remove with new skin 2023
padding-top:3.5rem !important;
}*/


/* ==Skin fixes after updating to Mw 1.35== */
/** Image positioning **/
div.tright,
div.floatright,
table.floatright {
Β  clear: right;
Β  float: right;
}
div.tleft,
div.floatleft,
table.floatleft {
Β  float: left;
Β  clear: left;


@media only screen and (max-height: 519px) and (min-width: 500px) {
.oo-ui-window-frame {
top: 80px!important;
}
}
.mw-highlight { /* CSS and JS page backgrounds (to be moved into foreground.css later) */
background-color: #f8f8f8 !important;
}
.mw-editsection { /* Editsection links (hiding these for now, may be back later) */
display: none;
}
/** Categories **/
.catlinks ul {
Β  Β  display: inline;
Β  Β  margin: 0;
Β  Β  padding: 0;
Β  Β  list-style: none;
Β  Β  list-style-type: none;
Β  Β  list-style-image: none;
}
.catlinks li {
display: inline-block;
line-height: 1.25em;
border-right: 1px solid #a2a9b1;
margin: 0.125em 0;
padding: 0 0.5em;
zoom: 1;
}
.catlinks li:last-of-type {
border-right: none;
}
.mw-normal-catlinks a {
vertical-align: middle;
}
.catlinks-allhidden { /* Hides the catlink box if no catlinks are included on the page */
display: none;
}
/* Setting the width of the captions on packed-overlay and packed-hover galleries to cover the entire image */
.gallerytextwrapper {
width: 100% !important;
}
}


/***** CSS placed here will be applied to/* default skin for navigation boxes */
/* Hide discusson pages */


table.navbox {Β  Β  Β  Β  Β  Β  /* navbox container style */
/*#ca-talk,*/ #pt-mytalk, #wikiEditor-section-help div[rel="discussion"],
Β  border: 1px solid #aaa;
.mw-usertoollinks span:first-of-type, .mw-usertoollinks > span:nth-child(2)::before,
Β  width: 100%;
.mw-contributions-user-tools .mw-changeslist-links span:first-of-type,
Β  margin: auto;
.mw-contributions-user-tools .mw-changeslist-links > span:nth-child(2)::before,
Β  clear: both;
.ns-talk #ca-edit, .ns-talk #ca-addsection {
Β  font-size: 88%;
display: none;
Β  text-align: center;
Β  padding: 1px;
}
}
table.navbox + table.navbox {
a.mw-usertoollinks-talk, a.mw-usertoollinks-talk:hover, a.mw-usertoollinks-talk:active { /* striketrough file page uploader talkpage links for lack of anything better */
Β  margin-top: -1px;Β  Β  Β  Β  /* single pixel border between adjacent navboxes (doesn't work for IE6, but that's okay) */
text-decoration: line-through;
cursor: not-allowed;
}
}
.navbox-title, .navbox-abovebelow, table.navbox th {
Β 
Β  text-align: center;Β  Β  Β  /* title and above/below styles */
/* Hide "Main Page" titles */ Β 
Β  padding-left: 1em;
body.page-Main_Page #content > h1,
Β  padding-right: 1em;
body.page-Main_Page #tagline {
display: none;
}
}
.navbox-group {Β  Β  Β  Β  Β  /* group style */
Β 
Β  white-space: nowrap;
/* ToDo ??? (this could be leftover from previous skin/the foundation grid) */
Β  text-align: right;
.row.display {
Β  font-weight: bold;
background: #eee;
Β  padding-left: 1em;
font-size: 11px;
Β  padding-right: 1em;
margin-bottom: 10px;
}
}
.navbox, .navbox-subgroup {
.row.display .columns,
Β  background: #fdfdfd; Β  Β  /* Background color */
.row.display .column {
}
background: #e7e7e7;
.navbox-list {
border: 1px solid #ddd;
Β  border-left: 2px solid #fdfdfd; Β  /* Must match background color */
font-size: 13px;
}
font-weight: bold;
.navbox-title, table.navbox th {
text-indent: 3px;
Β  background: #ccccff; Β  Β  /* Level 1 color */
padding-top: 8px;
}
color: #444;
.navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title {
padding-bottom: 8px;
Β  background: #ddddff; Β  Β  /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
Β  background: #e6e6ff; Β  Β  /* Level 3 color */
}
.navbox-even {
Β  background: #f7f7f7; Β  Β  /* Even row striping */
}
.navbox-odd {
Β  background: transparent; /* Odd row striping */
}
@media print {
Β  Β  .navbox {
Β  Β  Β  Β  display: none;
Β  Β  }
}
}


.nowraplinks a { /* prevents line breaks in links in primarily navbox */
/* clearfix */
Β  Β  white-space: nowrap;
.clearfix::after {
Β  content: "";
Β  clear: both;
Β  display: table;
}
}


/* Disables Discussion pages */
/** ===PHONE VIEW FIXES=== **/
ca-talk { display:none!important; }


/* Infobox template style */
.infobox {
Β  Β  border: 1px solid #aaa;
Β  Β  background-color: #E9EDEF;
Β  Β  margin: 0.5em 0 0.5em 1em;
Β  Β  padding: 0.2em;
Β  Β  float: right;
Β  Β  clear: right;
Β  Β  width: 22em;
}
/*==Sets infobox width to full screen on phones==*/
/*==Sets infobox width to full screen on phones==*/
@media only screen and (max-width: 640px) {
@media only screen and (max-width: 999px) {
.phonefullscreen {
.phonefullscreen {
width: 100%!important;
width: 100%!important;
max-width:100%!important;
max-width:100%!important;
padding-left: 0!important;
/*padding-left: 0!important;
padding-right: 0!important;
padding-right: 0!important;*/
margin-left: 0!important;
margin-right: 0!important;
box-sizing: border-box;
}
figure {
width: 100%!important;
margin-left: 0!important;
margin-right: 0!important;
}
.phonefullscreen2 {
width: 100%!important;
max-width:100%!important;
}
.trophyfullscreen {
display:block;
}
.trophyfullscreen > div {
float:none!important;
}
}
.infobox {
.infobox {
width: 100%;
width: 100%!important;
float: none !important;
}
}
Line 171: Line 448:
overflow-wrap: break-word!important;
overflow-wrap: break-word!important;
}
}
}
.flex-mobile-wrap {
flex-wrap: wrap;
}
.flex-mobile-wrap > div{
max-width:100% !important;
}
}


@media only screen and (max-width: 640px) {
@media only screen and (max-width: 999px) {
.mainpagefullscreen {
.mainpagefullscreen {
width: 100%!important;
width: 100%!important;
Line 183: Line 467:
}
}
.example-orbit {
/* orbit styles are staying dispite foundation framework being removed, Owen's orbit carousels might use these */
.example-orbit { Β 
width: 100%!important;
width: 100%!important;
padding-left: 0!important;
padding-left: 0!important;
Line 192: Line 477:
padding-left: 0!important;
padding-left: 0!important;
padding-right: 0!important;
padding-right: 0!important;
}
.orbit-container .thumbimage,
.orbit-container .thumbinner,
.orbit-container .thumb{
width: 100%!important;
max-width:100%!important;
}
}
}
}
Line 203: Line 495:
}
}


@media only screen and (max-width: 640px) {
/* = gallery styles = */
.gallerybox {
ul.gallery.center:not(.mw-gallery-slideshow) {
width: 49%!important;
font-size: 0; /* this is needed to remove the empty character MW inserts as padding between gallery items */
margin:auto!important;
display: flex;
}
flex-wrap: wrap;
justify-content: center;
.gallerybox div {
gap: 5px;
width: 100%!important;
}
}
Β 
@media only screen and (max-width:640px) {
/*.gallerybox div .thumb img {
ul.gallery:not(.mw-gallery-slideshow) {
width: 100%!important;
font-size: 0; /* this is needed to remove the empty character MW inserts as padding between gallery items */
}*/
display: flex;
flex-wrap: wrap;
.gallery {
justify-content: center;
margin:auto!important;
gap: 5px;
}
}
}
li.gallerybox {
font-size:initial;
}
@media only screen and (max-width: 999px) {
/*=Sets the Main Page option buttons to small=*/
/*=Sets the Main Page option buttons to small=*/
.mainpagegallery .thumb {
.mainpagegallery .thumb {
width: 124.667px!important;
width: 124.667px!important;
margin: auto;
margin: auto !important;
}
}
.mainpagegallery .gallerybox {
.mainpagegallery .gallerybox {
Line 231: Line 530:
}
}


/*=Padding, and margin to images=*/
.thumb .thumbinner {
.thumbinner {
border-radius: 5px;
margin:5px; Β 
margin: 5px;
margin-top:10px; Β 
}
margin-bottom:10px; Β 
Β 
padding-left:5px; Β 
.mw-body-content img.thumbimage { /* this rule is meant to override ".content img { ... }" */
padding-right:5px;
vertical-align: initial;
height: initial; /*not sure if the height here does anything*/
border-radius: 5px;
}
}


Line 249: Line 550:
}
}


.nowraplinks a { /* prevents line breaks in links in primarily navbox */
Β  Β  white-space: nowrap;
}


.infobox td,
.mw-gallery-slideshow .gallerybox, .mw-gallery-slideshow .gallerybox > div, .mw-gallery-slideshow .gallerybox div.thumb { /* slideshow gallery fix originally for infoboxes */
.infobox th {
width: inherit !important;
Β  Β  vertical-align: top;
}
}


.infobox title {
/** ===TEMPLATES & OTHER=== **/
color: white;
Β 
/* ==Hover class== ToDo: this should be removed, rewritten into a single utility class or moved into templatestyles and a template */
.hover:hover .hoverbox {
display: inline;
}
}


.infobox heading {
.hoverbox {
color: white;
display: none;
}
}


.infobox caption {
.hover2:hover .hoverbox2 {
Β  Β  font-size: larger;
display: block;
Β  Β  color: black;
}
}
.infobox.bordered {
Β 
Β  Β  border-collapse: collapse;
.hoverbox2 {
display: none;
}
}
.infobox.bordered td,
Β 
.infobox.bordered th {
.hover3:hover .hoverbox {
Β  Β  border: 1px solid #aaa;
display: inline;
position: absolute;
top: 0;
left: 0;
width: 1000px;
}
}
.infobox.bordered .borderless td,
Β 
.infobox.bordered .borderless th {
/* ==Flip Cards== */
Β  Β  border: 0;
Β 
.flip-card:focus .flip-card-inner, .flip-card:focus-within .flip-card-inner {
Β  transform: rotateY(180deg);
}
Β 
.flip-card:hover #trophy-title {
Β  background-color: var(--second-color)!important;
Β  outline-color: var(--second-color)!important;
}
}
Β 
.infobox.sisterproject {
.flip-card:hover #trophy-image {
Β  Β  width: 20em;
Β  outline-color: var(--second-color)!important;
Β  Β  font-size: 90%;
}
}
Β 
.infobox.standard-talk {
/* == Utility classes == */
Β  Β  border: 1px solid #3C8DBC;
Β 
Β  Β  background-color: #3C8DBC;
.noscrollbar::-webkit-scrollbar { /*chrome, edge, safari*/
width:0;
}
}
.infobox.standard-talk.bordered td,
Β 
.infobox.standard-talk.bordered th {
.gallery.nosize div.gallerytext { /* gallery nosize class : hides image pixels size, useful for DPL gallery mode */
Β  Β  border: 1px solid #3C8DBC;
Β  font-size: 0;
}
}
.gallery.nosize div.gallerytext a {
/* styles for bordered infobox with merged rows */
Β  font-size: initial;
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
Β  Β  border: 6;
Β  Β  border-top: 1px solid #aaa;
Β  Β  border-right: 1px solid #aaa;
}
}
Β 
.infobox.bordered .mergedrow td,
html:not(.ve-activated) .veonly {
.infobox.bordered .mergedrow th {
display:none;
Β  Β  border: 0;
Β  Β  border-right: 1px solid #aaa;
}
}
Β 
/* Styles for geography infoboxes, eg countries,
@media only screen and (min-width: 641px) { /* text-columns-<n> class(es) should only work on desktop/tablet */
Β  country subdivisions, cities, etc.Β  Β  Β  Β  Β  Β  */
.text-columns-3 {
.infobox.geography {
-moz-column-count:3;
Β  Β  text-align: left;
-webkit-column-count:3;
Β  Β  border-collapse: collapse;
-ms-column-count:3;
Β  Β  line-height: 1.2em; Β 
column-count:3;
Β  Β  font-size: 90%;
}
}
}
Β  Β 
Β  Β 
.infobox.geographyΒ  td,
.mw-parser-output .noscrollbar {
.infobox.geographyΒ  th {
-ms-overflow-style: none; /*IE10+*/
Β  Β  border-top: solid 1px #aaa;
scrollbar-width: none; /*firefox*/
Β  Β  padding: 0.4em 0.6em 0.4em 0.6em;
}
}
.infobox.geography .mergedtoprow td,
Β 
.infobox.geography .mergedtoprow th {
.mw-ui-button.disabled {
Β  Β  border-top: solid 1px #aaa;
background-color:#c8ccd1;
Β  Β  padding: 0.4em 0.6em 0.2em 0.6em;
color:#ffffff;
border-color:#c8ccd1;
cursor:default
}
}
.mw-ui-button.disabled:hover,
.infobox.geography .mergedrow td,
.mw-ui-button.disabled:active {
.infobox.geography .mergedrow th {
background-color:#c8ccd1;
Β  Β  border: 0;
color:#ffffff;
Β  Β  padding: 0 0.6em 0.2em 0.6em;
box-shadow:none;
border-color:#c8ccd1
}
}
Β 
.infobox.geography .mergedbottomrow td,
/* Showing wiki only elements on the wiki on Site Content pages */
.infobox.geography .mergedbottomrow th {
.wiki-only {
Β  Β  border-top: 0;
display: flex !important;
Β  Β  border-bottom: solid 1px #aaa;
Β  Β  padding: 0 0.6em 0.4em 0.6em;
}
}
Β 
.infobox.geography .maptable td,
/* Hides the desktop version on mobile*/
.infobox.geography .maptable th {
@media only screen and (max-width: 999px) {
Β  Β  border: 0;
.vdesktop {
Β  Β  padding: 0;
display: none;
}
}
}


/* ==Hover class== */
/* Hides the mobile version on desktop*/
.hover:hover .hoverbox {
@media only screen and (min-width: 1000px) {
display: inline;
.vmobile {
display: none;
}
}
}


.hoverbox {
@media only screen and (min-width: 641px) {
display: none;
.trophyfullscreen {
display:inline-block;
}
}
}


.hover2:hover .hoverbox2 {
.image-cover {
display: block;
object-fit:cover;
height:100%;
width: 100%;
}
}


.hoverbox2 {
.image-cover a {
display: none;
height:100%;
width: 100%;
}
}




/* ==Domi Testing Stuff== */
/* Speech Bubble */ Β 
.hovered:hover .hoveree {
.speech-bubble {
display: inline;
position: relative;
background: #f0f0f0;
border-radius: .4em;
}
Β 
.speech-bubble:after {
content: '';
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 12%;
width: 1000px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #fffff0;
border-top: 0;
margin-left: -9px;
margin-top: -9px;
}
Β 
/* Wikitable Styles */
Β 
.wikitable th, .wikitable td {
border: 2px solid #fff !important;
}
Β 
.wikitable > * > tr > th {
background: var(--main-color);
color: #fff;
}
Β 
.wikitable tbody tr:nth-child(even) {
background: #f5f5f5;
}
Β 
.wikitable tbody tr:nth-child(odd) {
background: #e9edef;
}
}


.hoveree {
@media only screen and (max-width: 999px) {
display: none;
.wikitable, .mw-datatable {
max-width: 100%;
width: 100% !important;
overflow-x: scroll;
}
Β 
.wikitable:not(.mw-collapsed), .mw-datatable:not(.mw-collapsed) {
display:block;
}
}
}




/**/
/** ===WIKI EDITOR=== **/
Β 
/*Help section fully displayed*/
#wikiEditor-section-help .index, #wikiEditor-section-help .pages {
height: 100%;
}


/*Special characters to fit boxes*/
.wikiEditor-ui-toolbar .page-characters div span {
height: 30px;
}


.tabbutton1:not(:focus) ~ .tabspace1 {
/* User edit counts table*/
display:none;
.uecTable2 {
width: 612px;
margin: auto;
}
}


.tabbutton2:not(:focus) ~ .tabspace2 {
/* ===Module:Chart fixes=== */
display:none;
Β 
.piechart {
clip-path: circle(48% at 50% 50%);
}
}


.tabbutton3:not(:focus) ~ .tabspace3 {
@media only screen and (max-width: 640px) {
display:none;
.chart {
overflow-y: scroll;
}
}
}


/* scrollbars */


/* ==Setting Wiki to new look== */
.mw-parser-output ::-webkit-scrollbar {
:root {
Β  Β  width: .4em;
--main-color: #8b0024;
}
--button-color: #367fa9;
--second-color: #e05176;
.mw-parser-output ::-webkit-scrollbar-track {
Β  Β  display:none;
}
.mw-parser-output ::-webkit-scrollbar-thumb {
Β  background-color: lightgrey;
Β  border-radius:1em;
}
.mw-parser-output * {
scrollbar-width:thin;
scrollbar-color:lightgray transparent;
}
Β 
/* == Gadget:Helppage CSS: placed here because the wikiActions portion needs to be here to be selectively enabled for Site Content Editors only.
The rest is here so its in one place. The gadget's js has also been moved to Common.js now. == */
Β 
.page-Help_Resources #wikiActions,
.page-Rules #wikiActions {
display:none;
}
}


body {
#wikiNav:not(.expanded) > div { /* this is technically generally applied, but only used by Gadget:Helppage. It automatically hides the wiki dropdowns if .expanded is removed from the wikiNav*/
font-family: "Nunito", sans-serif;
Β  Β  display: none;
background: #ffffff;
}
.nav .right #wikiNav.current:not(.expanded) #wikiLink {
background: transparent !important;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
.nav .right #wikiNav.current #wikiLink:hover {
background: white !important;
}
#wikiNav:hover #wikiLink {
-webkit-filter: none !important;
filter: none !important;
}
}


/* =Further testing= */
/* class:mw-datatable */


/*
.mw-datatable th {
.page-Grand_Central_Station_Survival_3 {
Β  background-color: #e2e5e8;
background: pink;
color: yellow;
--main-color: olive;
--button-color: purple;
--second-color: #e05176;
--link-hover-color: white;
--link-broken-color: purple;
--link-color: darkseagreen;
font-family: 'Fascinate Inline', cursive;
}
}


.page-Sandbox3 {
.mw-datatable tr:hover td {
background-image: url(https://wiki.dogcraft.net/images/0/0d/References.png);
Β  background-color: #e9edef;
background-repeat: no-repeat;
}
background-attachment: fixed;
background-size: auto 100%;
}*/


/* Sets Actions button to use the page's --button-color variable for background */
.mw-datatable {
.button.secondary {
border-collapse:collapse;
background-color: var(--button-color);
}
}


/* Sets page titles to use the page's font */
.mw-datatable th, .mw-datatable td {
h1, h2, h3, h4, h5, h6 {
padding: 0.2em 0.4em;
font-family: inherit;
border: 1px solid #a2a9b1;
}
}


@media only screen and (max-width: 640px) {
.ns-special .mw-datatable td, .ns-special .mw-datatable th {
.nophone {
Β  border-top: none;
display: none;
Β  border-left: none;
}
Β  border-right: none;
}
}


@media only screen and (max-width: 641px) {
.ns-special .mw-datatable td {
.pagetabs {
Β  background-color: transparent;
background: #8b0024;
}
}
}


@media only screen and (min-width: 641px) {
.ns-special .mw-datatable {
.phoneonly {
Β  border: none;
display: none;
}
}
}


/* ==Tab System (Retired)== */
/* = Heading banners = */
#content > h1.banner {
Β  margin: -25px -25px 10px -25px;
Β  justify-content: center;
Β  display: flex;
Β  align-items: center;
Β  color: white;
Β  text-shadow: 0 0 5px black;
Β  position: relative;
Β  background: /*linear-gradient(transparent, transparent 70%, rgba(255, 255, 255, 0.95)), */rgba(0,0,0,0.2);
Β  min-height: 210px; /* min height mostly for mobile */
Β  clear: both; /* primarily for better alignment in the visual editor */
}


/* 3 Tabs */
/*this doesn't look great */
/*#content > h1.banner.category-custom {
Β  background: linear-gradient(transparent, transparent 70%, rgba(255, 255, 255, 0.95)), rgba(0,0,0,0.2);
}*/


.tabs31 {
#content > h1.banner::after {
Β  Β  background: url('https://wiki.dogcraft.net/images/0/07/Tabs31.png');
Β  content: '';
background-size: cover;
Β  height: 0;
Β  Β  background-position: center;
Β  padding-top: var(--banner-padding, 210px);
Β  Β  background-repeat: no-repeat;
}
}


@media only screen and (max-width: 1159px) {
#content > h1.banner::before {
Β Β  .tabs31 {
Β  content: '';
Β  Β  background: url('https://wiki.dogcraft.net/images/2/27/TabsMobile.png');
Β  position: absolute;
background-size: cover;
Β  width: 100%;
Β  Β  background-position: center;
Β Β  height: 100%;
Β  Β  background-repeat: no-repeat;
Β  background: var(--banner-image);
Β Β  }
Β  background-position: center;
Β  background-size: cover;
Β  background-repeat: no-repeat;
Β Β  z-index: -1;
Β  background-color:firebrick; /*second color*/
}
}


.tabs32 {
#content > h1.banner ~ #tagline {
Β  Β  background: url('https://wiki.dogcraft.net/images/4/40/Tabs32.png');
display:none;
background-size: cover;
Β  Β  background-position: center;
Β  Β  background-repeat: no-repeat;
}
}


@media only screen and (max-width: 1159px) {
#headbanner {
Β  .tabs32 {
display: none;
Β  Β  background: url('https://wiki.dogcraft.net/images/2/27/TabsMobile.png');
background-size: cover;
Β  Β  background-position: center;
Β  Β  background-repeat: no-repeat;
Β  }
}
}


.tabs33 {
#content > h1.banner ~ #siteSub .mw-helplink { /* hiding category help indicator on pages with banner */
Β  Β  background: url('https://wiki.dogcraft.net/images/c/ca/Tabs33.png');
display: none;
background-size: cover;
Β  Β  background-position: center;
Β  Β  background-repeat: no-repeat;
}
}


@media only screen and (max-width: 1159px) {
#content > h1.category-custom ~ .mw-body-content .mw-category-generated {
Β  .tabs33 {
Β  display: none;
Β  Β  background: url('https://wiki.dogcraft.net/images/2/27/TabsMobile.png');
background-size: cover;
Β  Β  background-position: center;
Β  Β  background-repeat: no-repeat;
Β  }
}
}


/* {{pp-template}} */
#content > h1.banner ~ #siteSub {
.release_timeline {
Β  font-size: initial;
float: right !important; /* Minerva uses !important */
Β  text-align: start;
clear: right !important; /* Minerva uses !important */
width: auto !important; /* Minerva uses !important */
flex: 1 1 100%;
margin: 0 0 .3em 1em;
padding: .75em 1em;
font-size: 80%;
line-height: .9;
border-collapse: separate;
border-spacing: 0 1px;
background-color: transparent;
}
}


@media (max-width:550px) {
@media only screen and (max-width: 450px) {
.release_timeline {
#content > h1.banner {
width: 100% !important;
margin: -21px -6px 0 -6px;
box-sizing: border-box;
font-size: 30px;
}
}
}
}


.rt_left {
#content > h1.category-custom ~ #siteSub .mw-redirectedfrom { /*hiding redirect notice on category portal pages*/
float: left !important; /* Minerva uses !important */
display: none;
clear: left !important; /* Minerva uses !important */
}
margin: 0 1em 0 .3em;
Β 
/* switching panel tab order in ve insert -> media */
.ve-ui-mwMediaDialog-panel-search .oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-tabSelectWidget.oo-ui-tabSelectWidget-framed.oo-ui-selectWidget-unpressed {
Β  display: flex;
Β  flex-direction: row-reverse;
Β  justify-content: start;
}
}


.release_timeline .rt_caption {
Β 
padding: .4em .4em .2em;
/* Elems | https://dogcraft.net/wiki/Dogcraft_Wiki:Sandbox/Main_Page/Sample */
font-size: 112.5%;
Β 
text-align: center;
.page-Dogcraft_Wiki_Sandbox_Main_Page_Sample #content > h1 {
display: table-caption;
Β  display: none;
}
}


.release_timeline .rt_subtitle {
.page-Dogcraft_Wiki_Sandbox_Main_Page_Sample #tagline {
padding-top: .3em;
Β  display: none;
font-size: 90%;
font-weight: normal;
}
}


.release_timeline td {
.page-Dogcraft_Wiki_Sandbox_Main_Page_Sample #siteSub {
border: none;
Β  display: none;
padding: .4em;
text-align: left;
background: none;
font: inherit;
color: inherit;
}
}


.release_timeline th {
.page-Dogcraft_Wiki_Sandbox_Main_Page_Sample .top {
border: none;
Β  display: none;
padding: .4em;
text-align: right;
background: none;
font: inherit;
color: inherit;
}
}


.release_timeline .rt_first {
Β 
padding: .4em .4em .2em;
/* #Dogcraft.css (added here for performance reasons) */
Β 
/* ##Contributions & History page styles */
Β 
.mw-contributions-list {
margin-left: 0;
}
}


.release_timeline .rt_next {
.mw-contributions-list li {
padding: .2em .4em;
padding: 0.5rem 6.5rem 0.5rem 0.5rem;
list-style: none;
border-bottom: 1px solid #d9d6d3;
position: relative;
display: flex;
flex-wrap: wrap;
column-gap: 5px;
}
}


.release_timeline .rt_last {
li.mw-contributions-current {
padding: .2em .4em;
background: #e9efef;
border-bottom: 1px solid #a2a9b1;
}
}


/* Speech Bubble */
body:not(.mw-special-Recentchanges) .mw-changeslist-separator {
.speech-bubble {
display: none;
position: relative;
}
background: #fffff0;
Β 
border-radius: .4em;
body:not(.mw-special-Recentchanges) .mw-diff-bytes:not(.history-size) {
position: absolute;
width: 5em;
right: 28px;
text-align: end;
height: 100%;
top: 0;
display: flex;
align-items: center;
justify-content: end;
}
Β 
body:not(.mw-special-Recentchanges) .mw-contributions-list li:hover {
background: #e2e5e8;
}
}


.speech-bubble:after {
body:not(.mw-special-Recentchanges) .newpage,
content: '';
body:not(.mw-special-Recentchanges) .minoredit,
body:not(.mw-special-Recentchanges) .botedit {
display:flex;
align-items: center;
padding-right: 5px;
position: absolute;
position: absolute;
width: 1em;
right: 0;
height: 100%;
top: 0;
top: 0;
left: 12%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #fffff0;
border-top: 0;
margin-left: -9px;
margin-top: -9px;
}
}


/* Navigation Popups */
body:not(.mw-special-Recentchanges) .comment.comment--without-parentheses {
.navpopup { Β 
order: 1;
Β Β  background-color: #fffff0Β  !important;
margin: 6px 0 0 1rem;
Β Β  border-color: #fffff0 !important;
flex-basis: 100%;
}
Β 
body:not(.mw-special-Recentchanges) span.comment.comment--without-parentheses::after,
body:not(.mw-special-Recentchanges) span.comment.comment--without-parentheses::before {
Β  content: '';
}
Β 
/* ##Special styles for reverted edits */
.mw-tag-mw-reverted {
Β  color: gray;
}
Β 
.mw-tag-mw-reverted .mw-changeslist-date {
Β Β  color: inherit;
Β  text-decoration: line-through;
}
Β 
.mw-changeslist-date {
}
Β 
.mw-tag-mw-reverted .history-user {
Β  color: inherit;
Β Β  text-decoration: line-through;
}
Β 
.mw-tag-mw-reverted .history-user a {
Β  color: gray;
Β  text-decoration: line-through;
}


.mw-tag-mw-reverted .mw-usertoollinks.mw-changeslist-links {
Β  text-decoration: line-through;
}
}


/* World Map */
Β 
@media only screen and (max-width: 640px) {
/* ##History pages exclusive styles */
.worldmap {
Β 
width: 100%; Β 
.action-history ul#pagehistory {
}
margin: 0 0.5rem;
}
.action-history ul#pagehistory li {
padding: 0.5rem 0.2rem;
list-style: none;
border-bottom: 1px solid #d9d6d3;
position: relative;
padding-right: 6.5rem;
display: flex;
flex-wrap: wrap;
column-gap: 2px;
}
.action-history ul#pagehistory li.selected {
outline:none;
border-bottom: 1px solid #a2a9b1;
}
.action-history ul#pagehistory li.selected.before {
background:#e2e5e8;
}
.action-history ul#pagehistory li.selected.after {
background:#e9efef;
}
.action-history #pagehistory li:hover {
background:#e9efef;
}
}

Latest revision as of 01:44, 6 September 2024

html { /*global CSS variables*/
	--main-color: #8b0024;
	--second-color: #e05176;
	--button-color: #367fa9;
	--link-color: #0099db;
	--radius: 5px;
}

html {
	scroll-behavior: smooth;
	scroll-padding: calc(110px + 2rem);
}

:has(:target) {
  scroll-padding: calc(110px + 2rem);
}

/* Temporary template:anchor_link parent positioning until TemplateData adds :has() support */
:has(> a > span.anchor-visible) {
	position: relative;
}

/* Temporary classes for News indicator positioning for logged out users */
@media only screen and (min-width: 701px) {
	.indicator-right {
		position: relative;
	}
	
	.indicator-right .mw-indicators.mw-body-content {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		display: flex;
		align-items: center;
	}
}

/* == Things that will (eventually) be moved out to MediaWiki:Dogcraft.css == */
	
	/* mobile no border */
	@media only screen and (max-width: 749px) {
		body > #main {
		  padding-left: 0;
		  padding-right: 0;
		}
		
		.content {
		}
		
		body > #main > main > .content {
		  border: 0;
		  border-radius: 0;
		  margin-top: 0;
		  padding: 25px 20px;
		}
	}


	/* reversing the order of items in the actions menu dropdown */
	.tippy-box[data-theme~="dropdown"] .tippy-content .dropdown-content {
		flex-direction: column-reverse;
	}
	
	/* styling for the create page in category inputbox, used in the MediaWiki:Category header system message */
	#create-new-in-category {
	  font-size: 1rem;
	  margin-bottom: 1rem;
	}
	
	/* definiton lists */
	:not(.nolist) > dl {
		margin-inline-start: 1rem;
		list-style-type: disc;
	}
	dt {
		display: list-item;
		font-weight: 600;
	}
	dd + dt {
		margin-top: .5em;
	}
	.nolist > dl > dt {
		display: block;
	}
	
	
	/* bugfix: hiding hidden categories by default
	 * the second part of this bugfix is in Common.js, which shows hidden categories only to people who have selected the appropriate user preference
	 */
	#mw-hidden-catlinks {
		display: none;
	}

	/* hiddencats styles */
	#mw-hidden-catlinks::before {
	  content: 'Status categories:';
		color: gray;
	}
	
	#mw-hidden-catlinks {
	  border-top: 1px solid #a2a9b1;
	  padding-top: 4px;
	  margin-top: 8px;
	  margin-bottom: -8px;
	}

	
	/* vertically centering indicators (namespace label, featured article label) in all namespaces except main, alignign it with actions button - testing */
	body:not(.ns-0) .top .indicators {
		margin: auto 0;
	}
	
	@media only screen and (max-width: 900px) 
	{
		/* galery overflows on small mobile screens */
		ul.gallery:not(.slick-slider) {
			overflow-x: auto;
		}
	}
	
	a.new { /* Broken link color */
		color: #8b0024; /*this could be "red"*/
	}
	
	figure[typeof~="mw:Image/Thumb"] > :first-child > img {
		width: calc(100% - 10px) !important;
	}
	
	a.oo-ui-labelElement-label:not(.new) { /*Visual editor redirect suggestions should be blue when it points to an existing page, instead of red*/
		color:#0099db;
	}
	
	.mw-highlight pre { /*Special:ApiSandbox output wrapping*/
		white-space: pre-wrap;
	}
	
	/* Visual editor prompt for editing templates goes off the screen on small mobile screens, taking the edit button with it.*/
	@media only screen and (max-width: 900px) 
	{
		.ve-ui-linearContextItem-title {
			flex: 0;
		}
	}

	@media only screen and (min-width: 901px) { /* desktop */
		.ve-ui-toolbar-saveButton { /* save button full height */
			padding-top: 0.857143em;
		}	
	}
	
	.oo-ui-windowManager-modal > .tdg-templateDataDialog {
		z-index: 11;
	}
	
	.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
		z-index:11;
	}
	
	.ve-ui-overlay-global {
		z-index: 11;
	}
	
	.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
		top: 7.5em;
	}
	
	/* Under 350px the ip bar height doubles */
	@media only screen and (max-width: 349px) { 
		.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
			top: 9em;
		}
	}
	
	.ve-init-target-visual  .oo-ui-menuToolGroup {
		border-left-color: transparent;
		border-right-color: transparent;
	}
	
	.ve-init-target-visual  :not(.oo-ui-toolbar-actions) > .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
		border-bottom: none;
		box-shadow: 0 3px 5px 1px rgba(0,0,0,0.3);
	}


/* ==Structural/Skin changes== */

	h1, h2, h3, h4, h5, h6 {
		margin: 10px 0 0;
	}
	
	#tagline {
		margin-top: -5px;
	}

	/*heading sizes - test here now, ask Owen to move into skin file after trial*/
	h2 {
		font-size:30px;	/*primarily used*/
	}
	h3 {
		font-size:24px; /*secondarily used*/
	}
	h4 {
		font-size:20px;
	}
	h5 {
		font-size:18px;
		font-weight:600;  /* mid-bold: bolder then normal text, not as bold as the other headers */
	}
	h6 {
		font-size:16px; /*same as default text size*/
		font-weight:600; /* mid-bold: bolder then normal text, not as bold as the other headers */
	}
	
	#actions-button {
		z-index:5!important;
	}
	
	.mw-special-Movepage #ooui-2 {
		z-index:600;
	}
	
	.clear-both,
	.clear_both {
		clear:both;
	}
	
	blockquote {
		margin-top: 10px;
	}
	
/* Selflinks */
	a.mw-selflink {
		color: inherit;
		font-weight: 600;
		text-decoration: inherit;
		cursor: inherit;
	}
	
	.content .mw-selflink:hover {
		text-decoration:none;
	}
	
/* Search box allignment issue */
	@media only screen and (min-width: 641px) {
		.top-bar input {
			padding-top: .5rem;
		}
	}
	
/* Correct anchor behavior with fixed topnav */
	.mw-headline:target, .anchor:target {
	    padding-top: 110px;
	    margin-top: -110px;
	}
	.mw-hightlight :target {
		border-top:110px solid transparent;
		margin-top:-110px;
		background-clip:padding-box;
	}
/**/

/* Adding spacing between paragraphs (MAJOR) */
	.mw-body-content p, .mw-body-content ul { 
		margin-bottom:1em;
	}
	
	.mw-body-content ul ul, #toc ul, 
	.mw-body-content ul.gallery p,
	.mw-body-content blockquote p { /* exclusions */
		margin-bottom: initial;
	}
	
	/* slim utility class: disables bottom margin */
	.mw-body-content .slim ul, 
	.mw-body-content .slim p,
	.mw-body-content .slim { /* exclusions */
		margin-bottom: initial;
	}
/**/

	#mw-indicator-mw-helplink a { /* Changing the default question mark in the help indicator on special and category pages */ 
		background-image: url('images/0/0d/Mw_helplink_image.svg');
	}
	
	ul.gallery.mw-gallery-slideshow { /* Overriding default margins for gallery mode slideshow */
		margin: 0;
	}
	
	
	/* Moving content down (testing) (main only) */
	/*first heading needs to be the one to be moved down, because if the whole #content is moved down, the Action button will become
	unclickable */
	/*.ns-0 #content > h1 {  --to remove with new skin 2023
		padding-top:3.5rem !important;
	}*/

/* ==Skin fixes after updating to Mw 1.35== */
	/** Image positioning **/
	div.tright,
	div.floatright,
	table.floatright {
	  clear: right;
	  float: right;
	}
	div.tleft,
	div.floatleft,
	table.floatleft {
	  float: left;
	  clear: left;

	}
	
	.mw-highlight { /* CSS and JS page backgrounds (to be moved into foreground.css later) */
		background-color: #f8f8f8 !important; 
	}
	
	.mw-editsection { /* Editsection links (hiding these for now, may be back later) */
		display: none;
	}
	
	/** Categories **/
	
	.catlinks ul {
	    display: inline;
	    margin: 0;
	    padding: 0;
	    list-style: none;
	    list-style-type: none;
	    list-style-image: none;
	}
	
	.catlinks li {
		display: inline-block;
		line-height: 1.25em;
		border-right: 1px solid #a2a9b1;
		margin: 0.125em 0;
		padding: 0 0.5em;
		zoom: 1;
	}
	
	.catlinks li:last-of-type {
		border-right: none;
	}
	
	.mw-normal-catlinks a {
		vertical-align: middle;
	}
	
	.catlinks-allhidden { /* Hides the catlink box if no catlinks are included on the page */
		display: none;
	}

/* Setting the width of the captions on packed-overlay and packed-hover galleries to cover the entire image */
.gallerytextwrapper {
	width: 100% !important;
}

/* Hide discusson pages */

/*#ca-talk,*/ #pt-mytalk, #wikiEditor-section-help div[rel="discussion"],
.mw-usertoollinks span:first-of-type, .mw-usertoollinks > span:nth-child(2)::before,
.mw-contributions-user-tools .mw-changeslist-links span:first-of-type,
.mw-contributions-user-tools .mw-changeslist-links > span:nth-child(2)::before,
.ns-talk #ca-edit, .ns-talk #ca-addsection {
	display: none;
}
a.mw-usertoollinks-talk, a.mw-usertoollinks-talk:hover, a.mw-usertoollinks-talk:active { /* striketrough file page uploader talkpage links for lack of anything better */
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Hide "Main Page" titles */ 
body.page-Main_Page #content > h1,
body.page-Main_Page #tagline {
	display: none;
}

/* ToDo ??? (this could be leftover from previous skin/the foundation grid) */
.row.display {
	background: #eee;
	font-size: 11px;
	margin-bottom: 10px;
}
.row.display .columns,
.row.display .column {
	background: #e7e7e7;
	border: 1px solid #ddd;
	font-size: 13px;
	font-weight: bold;
	text-indent: 3px;
	padding-top: 8px;
	color: #444;
	padding-bottom: 8px;
}

/* clearfix */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/** ===PHONE VIEW FIXES=== **/

/*==Sets infobox width to full screen on phones==*/
@media only screen and (max-width: 999px) {
	.phonefullscreen {
		width: 100%!important;
		max-width:100%!important;
		/*padding-left: 0!important;
		padding-right: 0!important;*/
		margin-left: 0!important;
		margin-right: 0!important;
		box-sizing: border-box;
	}
	
	figure {
		width: 100%!important;
		margin-left: 0!important;
		margin-right: 0!important;
	}
	
	.phonefullscreen2 {
		width: 100%!important;
		max-width:100%!important;
	}
	
	.trophyfullscreen {
		display:block;
	}
	
	.trophyfullscreen > div {
		float:none!important;
	}
	
	.infobox {
		width: 100%!important;
		float: none !important;
	}
	
	.infobox .phonefullscreen img {
		width: 100%;
	}
	
	.mw-references-wrap {
		width: 100%!important;
		overflow-wrap: break-word!important;
	}
	
	.flex-mobile-wrap {
		flex-wrap: wrap;
	}
	.flex-mobile-wrap > div{
		max-width:100% !important;
	}
}	

@media only screen and (max-width: 999px) {
	.mainpagefullscreen {
		width: 100%!important;
		display: block!important;
		padding-left: 0!important;
		padding-right: 0!important;
		padding-bottom: 0!important;
		max-width:100%!important;
	}
	
	 /* orbit styles are staying dispite foundation framework being removed, Owen's orbit carousels might use these */
	.example-orbit { 
		width: 100%!important;
		padding-left: 0!important;
		padding-right: 0!important;
	}
	.orbit-container {
		width: 100%!important;
		padding-left: 0!important;
		padding-right: 0!important;
	}
	
	.orbit-container .thumbimage, 
	.orbit-container .thumbinner, 
	.orbit-container .thumb{
		width: 100%!important;
		max-width:100%!important;
	}
}

/*==Sets image width to full screen on phones==*/
@media only screen and (max-width: 640px) {
	.thumbimage, .thumbinner, .thumb{
		width: 100%!important;
		max-width:100%!important;
	}
}

/* = gallery styles = */ 
ul.gallery.center:not(.mw-gallery-slideshow) {
	font-size: 0; /* this is needed to remove the empty character MW inserts as padding between gallery items */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}

@media only screen and (max-width:640px) {
	ul.gallery:not(.mw-gallery-slideshow) {
		font-size: 0; /* this is needed to remove the empty character MW inserts as padding between gallery items */
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
	}
}

li.gallerybox {
	font-size:initial;
}

@media only screen and (max-width: 999px) {
	
	/*=Sets the Main Page option buttons to small=*/
	.mainpagegallery .thumb {
		width: 124.667px!important;
		margin: auto !important;
	}
	.mainpagegallery .gallerybox {
		width: 49%!important;
	}
}

.thumb .thumbinner {
	border-radius: 5px;
	margin: 5px;
}

.mw-body-content img.thumbimage { /* this rule is meant to override ".content img { ... }" */
	vertical-align: initial;
	height: initial; /*not sure if the height here does anything*/
	border-radius: 5px;
}

/*=Gray and italic image captions=*/
.thumbcaption {
	color:#6f6f6f; 
	font-style:italic; 
	background:#fcfdfe; 
	padding-left:3px; 
	padding-right:3px;
}

.nowraplinks a { /* prevents line breaks in links in primarily navbox */
    white-space: nowrap;
}

.mw-gallery-slideshow .gallerybox, .mw-gallery-slideshow .gallerybox > div, .mw-gallery-slideshow .gallerybox div.thumb { /* slideshow gallery fix originally for infoboxes */
	width: inherit !important;
}

/** ===TEMPLATES & OTHER=== **/

/* ==Hover class== ToDo: this should be removed, rewritten into a single utility class or moved into templatestyles and a template */
.hover:hover .hoverbox {
	display: inline;
}

.hoverbox {
	display: none;
}

.hover2:hover .hoverbox2 {
	display: block;
}

.hoverbox2 {
	display: none;
}

.hover3:hover .hoverbox {
	display: inline;
	position: absolute;
	top: 0;
	left: 0;
	width: 1000px;
}

/* ==Flip Cards== */

.flip-card:focus .flip-card-inner, .flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card:hover #trophy-title {
  background-color: var(--second-color)!important;
  outline-color: var(--second-color)!important;
}

.flip-card:hover #trophy-image {
  outline-color: var(--second-color)!important;
}

/* == Utility classes == */

.noscrollbar::-webkit-scrollbar { /*chrome, edge, safari*/
	width:0;
}

.gallery.nosize div.gallerytext { /* gallery nosize class : hides image pixels size, useful for DPL gallery mode */
  font-size: 0;
}
.gallery.nosize div.gallerytext a {
  font-size: initial;
}

html:not(.ve-activated) .veonly {
	display:none;
}

@media only screen and (min-width: 641px) { /* text-columns-<n> class(es) should only work on desktop/tablet */
	.text-columns-3 {
		-moz-column-count:3;
		-webkit-column-count:3;
		-ms-column-count:3;
		column-count:3;
	}
}
 
.mw-parser-output .noscrollbar {
	-ms-overflow-style: none; /*IE10+*/
	scrollbar-width: none; /*firefox*/
}

.mw-ui-button.disabled {
 background-color:#c8ccd1;
 color:#ffffff;
 border-color:#c8ccd1;
 cursor:default
}
.mw-ui-button.disabled:hover,
.mw-ui-button.disabled:active {
 background-color:#c8ccd1;
 color:#ffffff;
 box-shadow:none;
 border-color:#c8ccd1
}

/* Showing wiki only elements on the wiki on Site Content pages */
.wiki-only {
	display: flex !important;
}

/* Hides the desktop version on mobile*/
@media only screen and (max-width: 999px) {
	.vdesktop {
		display: none;
	}
}

/* Hides the mobile version on desktop*/
@media only screen and (min-width: 1000px) {
	.vmobile {
		display: none;
	}
}

@media only screen and (min-width: 641px) {
	.trophyfullscreen {
		display:inline-block;
	}
}

.image-cover {
	object-fit:cover;
	height:100%;
	width: 100%;
}

.image-cover a {
	height:100%;
	width: 100%;
}


/* Speech Bubble */ 
.speech-bubble {
	position: relative;
	background: #f0f0f0;
	border-radius: .4em;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 12%;
	width: 0;
	height: 0;
	border: 9px solid transparent;
	border-bottom-color: #fffff0;
	border-top: 0;
	margin-left: -9px;
	margin-top: -9px;
}

/* Wikitable Styles */

.wikitable th, .wikitable td {
	border: 2px solid #fff !important;
}

.wikitable > * > tr > th {
	background: var(--main-color);
	color: #fff;
}

.wikitable tbody tr:nth-child(even) {
	background: #f5f5f5;
}

.wikitable tbody tr:nth-child(odd) {
	background: #e9edef;
}

@media only screen and (max-width: 999px) {
	.wikitable, .mw-datatable {
		max-width: 100%;
		width: 100% !important;
		overflow-x: scroll;
	}

	.wikitable:not(.mw-collapsed), .mw-datatable:not(.mw-collapsed) {
		display:block;
	}
	
}


/** ===WIKI EDITOR=== **/

/*Help section fully displayed*/
#wikiEditor-section-help .index, #wikiEditor-section-help .pages {
	height: 100%;
}

/*Special characters to fit boxes*/
.wikiEditor-ui-toolbar .page-characters div span {
	height: 30px;
}

/* User edit counts table*/
.uecTable2 {
	width: 612px;
	margin: auto;
}

/* ===Module:Chart fixes=== */

.piechart {
	clip-path: circle(48% at 50% 50%);
}

@media only screen and (max-width: 640px) {
	.chart {
		overflow-y: scroll;
	}
}

/* scrollbars */

	.mw-parser-output ::-webkit-scrollbar {
	    width: .4em;
	}
	
	.mw-parser-output ::-webkit-scrollbar-track {
	    display:none;
	}
	
	.mw-parser-output ::-webkit-scrollbar-thumb {
	  background-color: lightgrey;
	  border-radius:1em;
	}
	
	.mw-parser-output * {
	scrollbar-width:thin; 
	scrollbar-color:lightgray transparent;
	}

/* == Gadget:Helppage CSS: placed here because the wikiActions portion needs to be here to be selectively enabled for Site Content Editors only.
The rest is here so its in one place. The gadget's js has also been moved to Common.js now. == */

.page-Help_Resources #wikiActions,
.page-Rules #wikiActions {
	display:none;
}

#wikiNav:not(.expanded) > div { /* this is technically generally applied, but only used by Gadget:Helppage. It automatically hides the wiki dropdowns if .expanded is removed from the wikiNav*/
    display: none;
}
.nav .right #wikiNav.current:not(.expanded) #wikiLink {
	background: transparent !important;
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}
.nav .right #wikiNav.current #wikiLink:hover {
	background: white !important;
}
#wikiNav:hover #wikiLink {
	-webkit-filter: none !important;
	filter: none !important;
}

/* class:mw-datatable */

.mw-datatable th {
  background-color: #e2e5e8;
}

.mw-datatable tr:hover td {
  background-color: #e9edef;
}

.mw-datatable {
	border-collapse:collapse;
}

.mw-datatable th, .mw-datatable td {
	padding: 0.2em 0.4em;
	border: 1px solid #a2a9b1;
}

.ns-special .mw-datatable td, .ns-special .mw-datatable th {
  border-top: none;
  border-left: none;
  border-right: none;
}

.ns-special .mw-datatable td {
  background-color: transparent;
}

.ns-special .mw-datatable {
  border: none;
}

/* = Heading banners = */
#content > h1.banner {
  margin: -25px -25px 10px -25px;
  justify-content: center;
  display: flex;
  align-items: center;
  color: white;
  text-shadow: 0 0 5px black;
  position: relative;
  background: /*linear-gradient(transparent, transparent 70%, rgba(255, 255, 255, 0.95)), */rgba(0,0,0,0.2);
  min-height: 210px; /* min height mostly for mobile */
  clear: both; /* primarily for better alignment in the visual editor */
}

/*this doesn't look great */
/*#content > h1.banner.category-custom { 
  background: linear-gradient(transparent, transparent 70%, rgba(255, 255, 255, 0.95)), rgba(0,0,0,0.2);
}*/

#content > h1.banner::after {
  content: '';
  height: 0;
  padding-top: var(--banner-padding, 210px);
}

#content > h1.banner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--banner-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  background-color:firebrick; /*second color*/
}

#content > h1.banner ~ #tagline {
	display:none;
}

#headbanner {
	display: none;
}

#content > h1.banner ~ #siteSub .mw-helplink { /* hiding category help indicator on pages with banner */
	display: none;
}

#content > h1.category-custom ~ .mw-body-content .mw-category-generated {
  display: none;
}

#content > h1.banner ~ #siteSub {
  font-size: initial;
  text-align: start;
}

@media only screen and (max-width: 450px) {
	#content > h1.banner {
		margin: -21px -6px 0 -6px;
		font-size: 30px;
	}
}

#content > h1.category-custom ~ #siteSub .mw-redirectedfrom { /*hiding redirect notice on category portal pages*/
	display: none;
}

/* switching panel tab order in ve insert -> media */
.ve-ui-mwMediaDialog-panel-search .oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-tabSelectWidget.oo-ui-tabSelectWidget-framed.oo-ui-selectWidget-unpressed {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}


/* Elems | https://dogcraft.net/wiki/Dogcraft_Wiki:Sandbox/Main_Page/Sample */

.page-Dogcraft_Wiki_Sandbox_Main_Page_Sample #content > h1 {
  display: none;
}

.page-Dogcraft_Wiki_Sandbox_Main_Page_Sample #tagline {
  display: none;
}

.page-Dogcraft_Wiki_Sandbox_Main_Page_Sample #siteSub {
  display: none;
}

.page-Dogcraft_Wiki_Sandbox_Main_Page_Sample .top {
  display: none;
}


/* #Dogcraft.css (added here for performance reasons) */

/* ##Contributions & History page styles */

.mw-contributions-list {
	margin-left: 0;
}

.mw-contributions-list li {
	padding: 0.5rem 6.5rem 0.5rem 0.5rem;
	list-style: none;
	border-bottom: 1px solid #d9d6d3;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	column-gap: 5px;
}

li.mw-contributions-current {
	background: #e9efef;
	border-bottom: 1px solid #a2a9b1;
}

body:not(.mw-special-Recentchanges) .mw-changeslist-separator {
	display: none;
}

body:not(.mw-special-Recentchanges) .mw-diff-bytes:not(.history-size) {
	position: absolute;
	width: 5em;
	right: 28px;
	text-align: end;
	height: 100%;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: end;
}

body:not(.mw-special-Recentchanges) .mw-contributions-list li:hover {
	background: #e2e5e8;
}

body:not(.mw-special-Recentchanges) .newpage,
body:not(.mw-special-Recentchanges) .minoredit,
body:not(.mw-special-Recentchanges) .botedit {
	display:flex;
	align-items: center;
	padding-right: 5px;
	position: absolute;
	width: 1em;
	right: 0;
	height: 100%;
	top: 0;
}

body:not(.mw-special-Recentchanges) .comment.comment--without-parentheses {
	order: 1;
	margin: 6px 0 0 1rem;
	flex-basis: 100%;
}

body:not(.mw-special-Recentchanges) span.comment.comment--without-parentheses::after,
body:not(.mw-special-Recentchanges) span.comment.comment--without-parentheses::before {
  content: '';
}

/* ##Special styles for reverted edits */
.mw-tag-mw-reverted {
  color: gray;
}

.mw-tag-mw-reverted .mw-changeslist-date {
  color: inherit;
  text-decoration: line-through;
}

.mw-changeslist-date {
}

.mw-tag-mw-reverted .history-user {
  color: inherit;
  text-decoration: line-through;
}

.mw-tag-mw-reverted .history-user a {
  color: gray;
  text-decoration: line-through;
}

.mw-tag-mw-reverted .mw-usertoollinks.mw-changeslist-links {
  text-decoration: line-through;
}


/* ##History pages exclusive styles */

.action-history ul#pagehistory {
	margin: 0 0.5rem;
}
.action-history ul#pagehistory li {
	padding: 0.5rem 0.2rem;
	list-style: none;
	border-bottom: 1px solid #d9d6d3;
	position: relative;
	padding-right: 6.5rem;
	display: flex;
	flex-wrap: wrap;
	column-gap: 2px;
}
.action-history ul#pagehistory li.selected {
	outline:none;
	border-bottom: 1px solid #a2a9b1;
}
.action-history ul#pagehistory li.selected.before {
	background:#e2e5e8;
}
.action-history ul#pagehistory li.selected.after {
	background:#e9efef;
}
.action-history #pagehistory li:hover {
	background:#e9efef;
}