MediaWiki

Common.css

From Dogcraft Wiki

No edit summary
m (Added scroll padding to account for the topbar)
 
(88 intermediate revisions by 2 users not shown)
Line 1: Line 1:
html {
html { /*global CSS variables*/
--main-color: #8b0024;
--main-color: #8b0024;
--second-color: #e05176;
--second-color: #e05176;
--button-color: #367fa9;
--button-color: #367fa9;
--link-color: #0099db;
--link-color: #0099db;
scroll-behavior: smooth;
--radius: 5px;
}
}
.nav .nav-title a span {
background: transparent border-box;
background: linear-gradient(180deg, #FE0000 16.66%, #FD8C00 16.66%, 33.32%, #FFE500 33.32%, 49.98%, #119F0B 49.98%, 66.64%, #0644B3 66.64%, 83.3%, #C22EDC 83.3%);
background-clip: text;
-webkit-background-clip: text;
color: white;
color: rgba(225, 225, 225, 0.3);
}
/*pride month nav title logo fix */
.nav .nav-title img {
width:60px;
max-width:60px;
}


.mw-dismissable-notice-close {
html {
visibility:visible;
scroll-behavior: smooth;
scroll-padding: calc(110px + 2rem);
}
}


#siteNotice-container {
:has(:target) {
position: fixed;
  scroll-padding: calc(110px + 2rem);
z-index: 10;
width: 100%;
top: 102px;
margin: 0 auto;
max-width: 1300px;
}
}


.sitedir-ltr .mw-dismissable-notice-body {
/* Temporary classes for News indicator positioning for logged out users */
margin:inherit;
@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;
}
}
}


/* == ToDo: This comment == */
/* == Things that will (eventually) be moved out to MediaWiki:Dogcraft.css == */
 
/*.top ~ #content > .ve-init-target-visual {
display:none;
}*/
/* vertically centering indicators (namespace label, featured article label) in all namespaces except main, alignign it with actions button - testing */
/* vertically centering indicators (namespace label, featured article label) in all namespaces except main, alignign it with actions button - testing */
Line 58: Line 48:
a.new { /* Broken link color */
a.new { /* Broken link color */
color: #8b0024;
color: #8b0024; /*this could be "red"*/
}
}
Line 67: Line 57:
a.oo-ui-labelElement-label:not(.new) { /*Visual editor redirect suggestions should be blue when it points to an existing page, instead of red*/
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;
color:#0099db;
}
.mw-highlight pre { /*Special:ApiSandbox output wrapping*/
white-space: pre-wrap;
}
}
Line 85: Line 79:
.oo-ui-windowManager-modal > .tdg-templateDataDialog {
.oo-ui-windowManager-modal > .tdg-templateDataDialog {
z-index: 11;
z-index: 11;
}
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
z-index:11;
}
}
Line 114: Line 112:


/* ==Structural/Skin changes== */
/* ==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*/
/*heading sizes - test here now, ask Owen to move into skin file after trial*/
Line 127: Line 133:
h5 {
h5 {
font-size:18px;
font-size:18px;
font-weight:600;  /* mid-bold: bolder then normal text, not as bold as the other headers */
}
}
h6 {
h6 {
font-size:16px; /*same as default text size*/
font-size:16px; /*same as default text size*/
font-weight:600; /* mid-bold: bolder then normal text, not as bold as the other headers */
}
}
Line 138: Line 146:
.mw-special-Movepage #ooui-2 {
.mw-special-Movepage #ooui-2 {
z-index:600;
z-index:600;
}
.clear-both,
.clear_both {
clear:both;
}
blockquote {
margin-top: 10px;
}
}
Line 143: Line 160:
a.mw-selflink {
a.mw-selflink {
color: inherit;
color: inherit;
font-weight: bold;
font-weight: 600;
text-decoration: inherit;
text-decoration: inherit;
cursor: inherit;
cursor: inherit;
}
}
.mw-selflink:hover {
.content .mw-selflink:hover {
text-decoration:none;
text-decoration:none;
}
}
Line 169: Line 186:
background-clip:padding-box;
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;
}
/**/


/* Changing the default questin mark in the help indicator on special and category pages */  
#mw-indicator-mw-helplink a { /* Changing the default question mark in the help indicator on special and category pages */  
#mw-indicator-mw-helplink a {
background-image: url('images/0/0d/Mw_helplink_image.svg');
background-image: url('images/0/0d/Mw_helplink_image.svg');
}
}
/* Overriding default margins for gallery mode slideshow */
ul.gallery.mw-gallery-slideshow { /* Overriding default margins for gallery mode slideshow */
ul.gallery.mw-gallery-slideshow {
margin: 0;
margin: 0;
}
/* Sitenotice */
/* Moving the Sitenotice down, so it isn't hidden by the topbar */
/**#siteNotice {
margin-top: .1em;
position: fixed;
z-index: 4;
width: 100%;
}**/
/* Hiding it by default */
/*#siteNotice {
display: none;
}*/
/* re-enabling it on select namespaces (main, user, project, guide) */
/*.ns-0 #siteNotice, .ns-2 #siteNotice,
.ns-4 #siteNotice, .ns-3002 #siteNotice {
display: block;
}*/
.mw-dismissable-notice-close {
font-size: 12px;
}
}
/* @media only screen and (max-width: 1000px) {
#siteNotice {
display:none!important;
}
}*/
Line 213: Line 219:
/*first heading needs to be the one to be moved down, because if the whole #content is moved down, the Action button will become
/*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 */
unclickable */
.ns-0 #firstHeading {  
/*.ns-0 #content > h1 { --to remove with new skin 2023
padding-top:3.5rem !important;
padding-top:3.5rem !important;
}
}*/


/* ==Skin fixes after updating to Mw 1.35== */
/* ==Skin fixes after updating to Mw 1.35== */
Line 232: Line 238:


}
}
/** CSS and JS page backgrounds (to be moved into foreground.css later)**/
.mw-highlight {
.mw-highlight { /* CSS and JS page backgrounds (to be moved into foreground.css later) */
background-color: #f8f8f8 !important;  
background-color: #f8f8f8 !important;  
}
}
/** Editsection links (hiding these for now, may be back later)**/
.mw-editsection { /* Editsection links (hiding these for now, may be back later) */
.mw-editsection {
display: none;
display: none;
}
}
Line 270: Line 275:
}
}
/**
.catlinks-allhidden { /* Hides the catlink box if no catlinks are included on the page */
* Hides the catlink box if no catlinks are included on the page
*/
.catlinks-allhidden {
display: none;
}
/* printfooter */
.printfooter {
display: none;
display: none;
}
}
Line 301: Line 297:
cursor: not-allowed;
cursor: not-allowed;
}
}
/* Hide open list marker on the Go to Dogcraft button in topbar */
/*#p-Go_to_Dogcraft a::after {
display:none;
}*/
/* Hide already hidden (empty) go-to-dc.net dropdown ul*/
/*#p-Go_to_Dogcraft ul.dropdown {
display:none;
}*/


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


/* ToDo ??? (this could be leftover from previous skin/the foundation grid) */
.row.display {
.row.display {
background: #eee;
background: #eee;
Line 334: Line 321:
padding-bottom: 8px;
padding-bottom: 8px;
}
}


/* clearfix */
/* clearfix */
Line 347: Line 332:


/*==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-left: 0!important;
margin-right: 0!important;
margin-right: 0!important;
box-sizing: border-box;
}
}
Line 378: Line 364:
.infobox {
.infobox {
width: 100%!important;
width: 100%!important;
float: none !important;
}
}
Line 397: Line 384:
}
}


@media only screen and (max-width: 1000px) {
@media only screen and (max-width: 999px) {
.mainpagefullscreen {
.mainpagefullscreen {
width: 100%!important;
width: 100%!important;
Line 408: Line 394:
}
}
.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 435: Line 422:
}
}


@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;
}
}
}
}
@media only screen and (max-width: 1000px) {
 
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=*/
Line 478: Line 470:
padding-left:3px;  
padding-left:3px;  
padding-right:3px;
padding-right:3px;
}
/** ===CSS placed here will be applied to default skin for navigation boxes=== */
table.navbox {            /* navbox container style */
  border: 1px solid #aaa;
  width: 100%;
  margin: auto;
  clear: both;
  font-size: 88%;
  text-align: center;
  padding: 1px;
}
table.navbox + table.navbox {
  margin-top: -1px;        /* single pixel border between adjacent navboxes (doesn't work for IE6, but that's okay) */
}
.navbox-title, .navbox-abovebelow, table.navbox th {
  text-align: center;      /* title and above/below styles */
  padding-left: 1em;
  padding-right: 1em;
}
.navbox-group {          /* group style */
  white-space: nowrap;
  text-align: right;
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
}
.navbox, .navbox-subgroup {
  background: #fdfdfd;    /* Background color */
}
.navbox-list {
  border-left: 2px solid #fdfdfd;  /* Must match background color */
}
.navbox-title, table.navbox th {
  background: #ccccff;    /* Level 1 color */
}
.navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title {
  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;
    }
}
}


Line 539: Line 476:
}
}


/* Infobox template style */
.mw-gallery-slideshow .gallerybox, .mw-gallery-slideshow .gallerybox > div, .mw-gallery-slideshow .gallerybox div.thumb { /* slideshow gallery fix originally for infoboxes */
.infobox {
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #E9EDEF;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
    width: 22em;
}
 
.infobox td,
.infobox th {
    vertical-align: top;
}
 
.infobox title {
color: white;
}
 
.infobox heading {
color: white;
}
 
.infobox caption {
    font-size: larger;
    color: black;
}
 
/*-new-old -> infobox 2.0-*/
.module-infobox.infobox {
text-align: center;
font-size: 88%;
line-height: 1.5em;
padding: 0.5em 0 0 0;
border-radius: 10px;
}
 
.module-infobox .infobox-above {
font-size: 140%;
font-weight: bold;
padding: 0.3rem;
}
 
.module-infobox .infobox-header {
padding: 0.375rem;
border-radius: 0 0 10px 10px;
background:#8b0024;
color:white;
font-size:large;
}
.module-infobox .infobox-header.captioned {
border-radius:10px;
}
 
.module-infobox .infobox-label, .module-infobox .infobox-data {
text-align:left;
padding: .375rem .625rem;
}
 
.module-infobox .infobox-subheader {
padding-bottom: .3rem;
}
 
.module-infobox .thumb .thumbinner {
margin:0;
border-radius:0;
width: 100%;
}
 
.module-infobox .thumb .thumbinner img {
width:100%;
}
 
/*-infobox gallery slideshow-*/
.module-infobox ul.gallery.mw-gallery-slideshow .gallerycarousel {
width:100%; /*image wobbly*/
}
.module-infobox ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons {
padding: 0.3em 0;
}
.module-infobox ul.gallery.mw-gallery-slideshow {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap: 3px;
padding:0;
}
.module-infobox ul.gallery.mw-gallery-slideshow li.gallerybox {
max-width: 20%;
display:flex;
flex-direction:column;
justify-content:center;
min-height:3.5rem;
margin-bottom: 0.2rem;
}
.module-infobox ul.gallery.mw-gallery-slideshow .gallerybox > div {
max-width:100%;
display:flex;
justify-content:center;
}
 
.mw-gallery-slideshow .gallerybox, .mw-gallery-slideshow .gallerybox > div, .mw-gallery-slideshow .gallerybox div.thumb {
width: inherit !important;
width: inherit !important;
}
.module-infobox ul.gallery.mw-gallery-slideshow .gallerybox div.thumb {
max-width:100%;
}
.module-infobox ul.gallery.mw-gallery-slideshow .gallerybox div.thumb > div {
margin: 0 0 !important;
}
.module-infobox .mw-gallery-slideshow .gallerybox .gallerytext {
display:none;
}
.module-infobox ul.gallery.mw-gallery-slideshow .gallerybox.slideshow-current {
outline: solid slategray 2px;
border-radius: 7.5px;
}
.module-infobox .mw-gallery-slideshow-buttons.oo-ui-layout.oo-ui-panelLayout > div {
display:flex;
justify-content:space-around;
}
.module-infobox ul.gallery.mw-gallery-slideshow .gallerycarousel.mw-gallery-slideshow-thumbnails-toggled {
margin-bottom:0;
}
.module-infobox div.gallerytext{
word-wrap:anywhere;
}
@media only screen and (max-width: 1000px) {
.module-infobox ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons {
display:none;
}
}
}


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


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


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


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


/* Hides the desktop version on mobile*/
/* Hides the desktop version on mobile*/
Line 739: Line 590:
display:inline-block;
display:inline-block;
}
}
}
.image-cover {
object-fit:cover;
height:100%;
width: 100%;
}
.image-cover a {
height:100%;
width: 100%;
}
}


Line 761: Line 623:
margin-left: -9px;
margin-left: -9px;
margin-top: -9px;
margin-top: -9px;
}
/* World Map */
@media only screen and (max-width: 640px) {
.worldmap {
width: 100%;
}
}
/* lbox */
.lbox:hover{
background-color:white !important;
box-shadow: 0 2px 3px rgba(85, 85, 85, 0.45), 0 0 10px rgba(85, 85, 85, 0.45) !important;
transition: box-shadow ease-in-out 0.2s;
}
.lbox:focus, .lbox:focus-within, .lbox:active {
  box-shadow: none !important;
}
 
.lbox-overlay:hover {
background: black;
opacity: 5%;
}
.lbox:hover h3 {
  background: #9b0031 !important;
  border-color: #9b0031 !important;
}
.lbox:hover .fbox-content {
max-height:1000px !important;
}
}


Line 814: Line 644:
}
}


@media only screen and (max-width: 640px) {
@media only screen and (max-width: 999px) {
.wikitable, .mw-datatable {
.wikitable, .mw-datatable {
max-width: 100%;
max-width: 100%;
Line 826: Line 656:
}
}


/** ===WIKI EDITOR=== **/
/** ===WIKI EDITOR=== **/
Line 839: Line 670:
}
}


/*Temp*/
/* User edit counts table*/
.uecTable2 {
.uecTable2 {
width: 612px;
width: 612px;
Line 857: Line 688:
}
}


/* ===Skin sandbox demo page=== */
/* scrollbars */
@media only screen and (min-width: 641px) {
 
body.page-Dogcraft_Wiki_Skin_sandbox {
.mw-parser-output ::-webkit-scrollbar {
background: #f1f1f1;
    width: .4em;
background-image: url('https://dogcraft.net/img/bg/17391Spawn.png');
background-attachment: fixed;
background-size: cover;
}
}
.page-Dogcraft_Wiki_Skin_sandbox #p-cactions {
.mw-parser-output ::-webkit-scrollbar-track {
border: 5px white solid;
    display:none;
border-radius: 15px;
background: white;
margin-top: 3.5rem;
margin-bottom: 8.6em;
padding-top: 0.46875rem;
padding-bottom: 0.9375rem;
box-shadow: inset 0 0 0 5px var(--main-color);
}
}
.page-Dogcraft_Wiki_Skin_sandbox footer {
.mw-parser-output ::-webkit-scrollbar-thumb {
max-width: 100%;
  background-color: lightgrey;
background: #f1f1f1;
  border-radius:1em;
padding-top: 20px;
box-shadow: inset 0 2px 2px -1px rgba(85, 85, 85, 0.25);
position: absolute;
bottom: 0;
}
}
.page-Dogcraft_Wiki_Skin_sandbox #page-content {
.mw-parser-output * {
min-height: 100vh;
scrollbar-width:thin;  
position: relative;
scrollbar-color:lightgray transparent;
margin-top: 0;
}
}
 
/* == 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;
}
}


#mall-map-container .mall-expand-content {
.ns-special .mw-datatable {
display:none;
  border: none;
}
}


#mall-map-container div:not(.mall-nohover) div:hover {
/* = Heading banners = */
  width: auto !important;
#content > h1.banner {
  height: auto !important;
  margin: -25px -25px 10px -25px;
  min-width: 10em !important;
  justify-content: center;
  min-height: 10em !important;
  display: flex;
  max-width:10em !important;
  align-items: center;
  max-height:50em !important;
  color: white;
  overflow: auto;
  text-shadow: 0 0 5px black;
  position: absolute !important;
  position: relative;
  z-index: 10;
  background: /*linear-gradient(transparent, transparent 70%, rgba(255, 255, 255, 0.95)), */rgba(0,0,0,0.2);
  margin: -5px -20px;
  min-height: 210px; /* min height mostly for mobile */
  /*transition: width 0.2s ease-in-out, height 0.2s ease-in-out;*/
  clear: both; /* primarily for better alignment in the visual editor */
}
}


#mall-map-container div:not(.mall-nohover) div:hover .mall-expand-content {
#content > h1.banner.category-custom {
display:inline;
  background: linear-gradient(transparent, transparent 70%, rgba(255, 255, 255, 0.95)), rgba(0,0,0,0.2);
}
}


/** Adding visual editor edit button on Guide namespace
#content > h1.banner::after {
(temporary until visual editor can properly be enabled for the namespace through LocalSettings.php)*/
  content: '';
.ve-not-available .ns-3002 #ca-ve-edit {
  height: 0;
display: block;
  padding-top: var(--banner-padding, 210px);
}
}


/* Prevents the automatic "add new cell to grid" blocks that VE generates in edit mode from showing up on the Mall Map page*/
#content > h1.banner::before {
.ve-ce-branchNode-blockSlug, .ve-ce-branchNode-newSlug {
  content: '';
display:none;
  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*/
}
}


#mall-map-container > *:not(.mall-content) {
#content > h1.banner ~ #tagline {
display:none;
display:none;
}
}


.ve-active .page-Mall_map .ve-ce-focusableNode-highlight[title="Mall footer"] {
#headbanner {
    display: none;
display: none;
}
}


.mall-expired > div {
#content > h1.banner ~ #siteSub .mw-helplink { /* hiding category help indicator on pages with banner */
    background: repeating-linear-gradient(-45deg,#ff9a7a,#ff9a7a 8%,coral 8%,coral 16%) !important;
display: none;
    border: 1px solid darkred !important;
    opacity: 50%;
}
}


#navwrapper .top-bar-logo {
#content > h1.category-custom ~ .mw-body-content .mw-category-generated {
width:40px;
  display: none;
}
}


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


.mw-parser-output ::-webkit-scrollbar {
@media only screen and (max-width: 450px) {
    width: .4em;
#content > h1.banner {
}
margin: -21px -6px 0 -6px;
font-size: 30px;
.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;
}
}
}
#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;
}


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


.page-Main_Page *::-webkit-scrollbar {
body:not(.mw-special-Recentchanges) .mw-contributions-list li:hover {
    width: .4em;
background: #e2e5e8;
}
}
 
.page-Main_Page *::-webkit-scrollbar-track {
body:not(.mw-special-Recentchanges) .newpage,
    display:none;
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;
}
}
 
.page-Main_Page div::-webkit-scrollbar-thumb {
body:not(.mw-special-Recentchanges) .comment.comment--without-parentheses {
  background-color: lightgrey;
order: 1;
  border-radius:1em;
margin: 6px 0 0 1rem;
flex-basis: 100%;
}
}


.page-Main_Page div {
body:not(.mw-special-Recentchanges) span.comment.comment--without-parentheses::after,
scrollbar-width:thin;
body:not(.mw-special-Recentchanges) span.comment.comment--without-parentheses::before {
scrollbar-color:lightgray transparent;
  content: '';
}
}


/* == Gadget:Helppage CSS: placed here because the wikiActions portion needs to be here to be selectively enabled for Site Content Editors only.
/* ##Special styles for reverted edits */
The rest is here so its in one place. The gadget's js has also been moved to Common.js now. == */
.mw-tag-mw-reverted {
  color: gray;
}


.page-Help_Resources #wikiActions,
.mw-tag-mw-reverted .mw-changeslist-date {
.page-Rules #wikiActions {
  color: inherit;
display:none;
  text-decoration: line-through;
}
}


#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*/
.mw-changeslist-date {
    display: none;
}
}
.nav .right #wikiNav.current:not(.expanded) #wikiLink {
 
background: transparent !important;
.mw-tag-mw-reverted .history-user {
-webkit-filter: brightness(0) invert(1);
  color: inherit;
filter: brightness(0) invert(1);
  text-decoration: line-through;
}
}
.nav .right #wikiNav.current #wikiLink:hover {
 
background: white !important;
.mw-tag-mw-reverted .history-user a {
  color: gray;
  text-decoration: line-through;
}
}
#wikiNav:hover #wikiLink {
 
-webkit-filter: none !important;
.mw-tag-mw-reverted .mw-usertoollinks.mw-changeslist-links {
filter: none !important;
  text-decoration: line-through;
}
}


/* testing history style tweaks */
 
/* ##History pages exclusive styles */
 
.action-history ul#pagehistory {
.action-history ul#pagehistory {
margin: 0 0.5rem;
margin: 0 0.5rem;
Line 1,017: Line 965:
list-style: none;
list-style: none;
border-bottom: 1px solid #d9d6d3;
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 {
.action-history ul#pagehistory li.selected {
Line 1,030: Line 983:
.action-history #pagehistory li:hover {
.action-history #pagehistory li:hover {
background:#e9efef;
background:#e9efef;
}
.mw-datatable td, .mw-datatable th {
  border-top: none;
  border-left: none;
  border-right: none;
}
.mw-datatable th {
  background-color: #e2e5e8;
  border:3px solid transparent;
  background-clip:padding-box;
}
.mw-datatable td {
  background-color: transparent;
}
.mw-datatable {
  border: none;
}
.mw-datatable tr:hover td {
  background-color: #e9edef;
}
}

Latest revision as of 18:09, 13 February 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 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 == */
	
	/* 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;
	overflow: auto;
	margin: 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 */
}

#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;
}
Background Takeshi by Edo