MediaWiki
Common.css
From Dogcraft Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
html {
--main-color: #8b0024;
--second-color: #e05176;
--button-color: #367fa9;
--link-color: #0099db;
scroll-behavior: smooth;
}
.mw-dismissable-notice-close {
visibility:visible;
}
#siteNotice-container {
position: fixed;
z-index: 10;
width: 100%;
top: 102px;
margin: 0 auto;
max-width: 1300px;
}
.sitedir-ltr .mw-dismissable-notice-body {
margin:inherit;
}
/* == ToDo: This comment == */
/*.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 */
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;
}
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;
}
/* 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;
}
.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== */
/*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;
}
h6 {
font-size:16px; /*same as default text size*/
}
#actions-button {
z-index:5!important;
}
.mw-special-Movepage #ooui-2 {
z-index:600;
}
/* Selflinks */
a.mw-selflink {
color: inherit;
font-weight: bold;
text-decoration: inherit;
cursor: inherit;
}
.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;
}
/* Changing the default questin 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');
}
/* Overriding default margins for gallery mode slideshow */
ul.gallery.mw-gallery-slideshow {
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;
}
}*/
/* 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 #firstHeading {
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;
}
/** CSS and JS page backgrounds (to be moved into foreground.css later)**/
.mw-highlight {
background-color: #f8f8f8 !important;
}
/** Editsection links (hiding these for now, may be back later)**/
.mw-editsection {
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;
}
/**
* Hides the catlink box if no catlinks are included on the page
*/
.catlinks-allhidden {
display: none;
}
/* printfooter */
.printfooter {
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 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 */
body.page-Main_Page .title,
body.page-Main_Page #tagline {
display: none;
}
.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: 640px) {
.phonefullscreen {
width: 100%!important;
max-width:100%!important;
padding-left: 0!important;
padding-right: 0!important;
margin-left: 0!important;
margin-right: 0!important;
}
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;
}
.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: 1000px) {
.mainpagefullscreen {
width: 100%!important;
display: block!important;
padding-left: 0!important;
padding-right: 0!important;
padding-bottom: 0!important;
max-width:100%!important;
}
.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;
}
}
@media only screen and (max-width: 640px) {
.gallerybox {
width: 49%!important;
margin:auto!important;
}
/*.gallerybox div {
width: 100%!important;
}
.gallerybox div .thumb img {
width: 100%!important;
}*/
.gallery {
margin:auto!important;
}
}
@media only screen and (max-width: 1000px) {
/*=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;
}
/** ===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;
}
}
.nowraplinks a { /* prevents line breaks in links in primarily navbox */
white-space: nowrap;
}
/* Infobox template style */
.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%;
}
.module-infobox .thumb {
width:100%;
display:flex;
justify-content:center;
}
/*-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;
}
.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;
padding:0;
}
@media only screen and (max-width: 1000px) {
.module-infobox ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons {
display:none;
}
}
/** ===TEMPLATES & OTHER=== **/
/* ==Hover class== */
.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;
}
.mw-parser-output .noscrollbar {
-ms-overflow-style: none; /*IE10+*/
scrollbar-width: none; /*firefox*/
}
/* 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%;
}
/* 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;
}
/* World Map */
@media only screen and (max-width: 640px) {
.worldmap {
width: 100%;
}
}
/* 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: 640px) {
.wikitable, .mw-datatable {
max-width: 100%;
width: 100% !important;
overflow-x: scroll;
}
.wikitable:not(.mw-collapsed), .mw-datatable:not(.mw-collapsed) {
display:block;
}
}
/* - datatable - */
.datatable th, .datatable td {
border: 1px solid #d9d6d3 !important;
}
.wikitable > * > tr > th {
background: #e9edef;
}
.wikitable tbody tr {
background: #f8f9fa;
}
/** ===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;
}
/*Temp*/
.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;
}
}
/* ===Skin sandbox demo page=== */
@media only screen and (min-width: 641px) {
body.page-Dogcraft_Wiki_Skin_sandbox {
background: #f1f1f1;
background-image: url('https://dogcraft.net/img/bg/17391Spawn.png');
background-attachment: fixed;
background-size: cover;
}
.page-Dogcraft_Wiki_Skin_sandbox #p-cactions {
border: 5px white solid;
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 {
max-width: 100%;
background: #f1f1f1;
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 {
min-height: 100vh;
position: relative;
margin-top: 0;
}
}
#mall-map-container .mall-expand-content {
display:none;
}
#mall-map-container div:not(.mall-nohover) div:hover {
width: auto !important;
height: auto !important;
min-width: 10em !important;
min-height: 10em !important;
max-width:10em !important;
max-height:50em !important;
overflow: auto;
position: absolute !important;
z-index: 10;
margin: -5px -20px;
/*transition: width 0.2s ease-in-out, height 0.2s ease-in-out;*/
}
#mall-map-container div:not(.mall-nohover) div:hover .mall-expand-content {
display:inline;
}
/** Adding visual editor edit button on Guide namespace
(temporary until visual editor can properly be enabled for the namespace through LocalSettings.php)*/
.ve-not-available .ns-3002 #ca-ve-edit {
display: block;
}
/* Prevents the automatic "add new cell to grid" blocks that VE generates in edit mode from showing up on the Mall Map page*/
.ve-ce-branchNode-blockSlug, .ve-ce-branchNode-newSlug {
display:none;
}
#mall-map-container > *:not(.mall-content) {
display:none;
}
.ve-active .page-Mall_map .ve-ce-focusableNode-highlight[title="Mall footer"] {
display: none;
}
.mall-expired > div {
background: repeating-linear-gradient(-45deg,#ff9a7a,#ff9a7a 8%,coral 8%,coral 16%) !important;
border: 1px solid darkred !important;
opacity: 50%;
}
#navwrapper .top-bar-logo {
width:40px;
}
/* scrollbars - trial */
.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;
}
/* main page scrollbars */
.page-Main_Page *::-webkit-scrollbar {
width: .4em;
}
.page-Main_Page *::-webkit-scrollbar-track {
display:none;
}
.page-Main_Page div::-webkit-scrollbar-thumb {
background-color: lightgrey;
border-radius:1em;
}
.page-Main_Page div {
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;
}
/* testing history style tweaks */
.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;
}
.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;
}
.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;
}
This page was last modified on 18 July 2022, at 21:30. (2 months ago)
