Cookies help us deliver our services. By using our services, you agree to our use of cookies. More information

We are currently changing the appearance of the wiki to a responsive theme to eliminate switching between desktop and mobile themes. Please report any issues on the Wiki Support page

 Actions

MediaWiki

Difference between revisions of "Pivot.css"

From Dragon Mania Legends Wiki

m (Test new fb widget tweaks first before adding one via different embed method to circumvent php errors. :(()
m (Add scroll options to pivot, since fontawesome arrow is specific to Pivot)
Line 179: Line 179:
 
#n-New-Page a::before {
 
#n-New-Page a::before {
 
     content: "\f084";
 
     content: "\f084";
 +
}
 +
 +
/* ---- Scroll to Top button ---- */
 +
#topBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 30px;
 +
  z-index: 99;
 +
  font-size: 16px;
 +
  border: none;
 +
  outline: none;
 +
  background-color: rgba(0, 0, 0, 0.3);
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 20px;
 +
  border-radius: 4px;
 +
}
 +
#topBtn:hover {
 +
  background-color: #555;
 +
}
 +
#topBtn:before {
 +
    position: fixed;
 +
    bottom: 40px;
 +
    right: 44px;
 +
    color: #fff;
 +
    font-size: 18px;
 +
    font-family: 'FontAwesome' !important;
 +
    content: "\f106";
 +
    font-weight: 600;
 
}
 
}
  

Revision as of 03:50, 14 July 2019

/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* ---------- See Common.css for cross-theme reusable styles ---------- */
/* - Code formatted using current MediaWiki convention/recommendation - */
/* - See https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS - */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */

body {
  background: url("/images/b/b8/DMLWIKI-Background-Responsive.jpg") no-repeat left top fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Move cookie warning to bottom on Pivot so not in the way of menu */
.mw-cookiewarning-container {
    bottom: 0;
    top:unset;
}
.mw-cookiewarning-text {
	text-align:center;
}

/* -------------------------------------------------------------------- */
/* ----------------------- Theme Customizations ----------------------- */
/* -------------------------------------------------------------------- */
/* Top Wiki title bar background color */
.tab-bar {
    background: #e79403; /* color sampled direct from Collection menu tab */
}
/* Hide Namespace label on each page */
.namespace.label {
    display:none!important; /* Ignore code hint, leave "!important" */
}
/* Title bar font and font color */
.tab-bar .title {
    font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-shadow: 2px 2px #000;
}
/* ---- Logo ---- */
li.name.logo > a { /* ignore code hinting, leave the "li" ON, */
    background-color: transparent!important;
    border: 0 !important;
    opacity: 1!important;
}
li.name.logo {
    width: 90%;
}

/* ---- Right user menu ---- */
.right-off-canvas-menu, 
.left-off-canvas-menu {
    background: #e7e7e7;
}
/* font */
ul.off-canvas-list li a {
    color: #333;
}
/* hover color */
ul.off-canvas-list li a:hover {
    background: #efdb97;
}
/* top label color and font color */
ul.off-canvas-list li label {
    background: #ccc;
    border: none;
    color: #000;
}

/* ---- */
.row .row {
	margin:inherit;
}
/* ---- Actions menu text links ---- */
#p-cactions > a.button {
    margin-bottom: 0.8em;
}
#p-cactions #drop1 a:hover {
    color: #db6700;
    border:0px;
}
#p-cactions {
    padding-left: 2em;
    padding-right: 2em;
}
#page-actions {
font-weight:normal;
}
#siteNotice {
    margin-top: 2.2em;
}
#siteNotice p {
    font-size:0.9rem!important;
}

/* ---- Left wiki navigation font, color, spacing, shadow ---- */
ul.side-nav label {
    font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #e79403; /* color sampled direct from Collection menu tab */
    letter-spacing: 1px;
    font-variant: normal;
	font-weight: normal;
	text-shadow: 2px 2px #000000;
	border-radius: 8px 8px 0px 0px;
	margin-top: 8px;
	font-size: 1rem;
}
.side-nav li {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    margin: 0px;
}
ul.off-canvas-list li a {
    padding: 0.35em;
}
#sidebar ul a {
    font-size: 1rem;
}
input#searchInput {
    height: 35px;
    margin-left: 0;
}
/* Search box */
ul.side-nav input[type="search"] {
    border-radius: 8px;
    margin-top: 40px;
}
/* White sidebar buttons except last one */
.side-nav li a:not(.button) {
    color: #333;
    background-color: #fff;
    border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
    margin: 0px;
    padding: 0.3em 0.5em 0em .5em;
    opacity: 0.9;
}
/* White sidebar buttons last items - round + outline - Ignore slow attribute warning */
/* If screen size is 640px wide or more */
@media screen and (min-width:640px) {
	#n-New-Articles a, 
	#n-MobGa.me a, 
	#n-Dragon-Stats a, 
	[id^='n-Formulas'] a, 
	[id^='n-MobGa'] a, 
	#t-info a, 
	#n-Multi-upload a,
	.ns-special #t-print a {
	    border-radius: 0px 0px 8px 8px; /* Ignore warning, way items are named forces this use :( */
	    border-right: 1px solid #ccc;
		border-left: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding-bottom: 3px!important;
	}
} /* End media query */

.side-nav li a:not(.button):focus {
    color: #a54600;
    opacity: .8;
    background-color: #fff;
}
.side-nav li a:not(.button):hover {
    opacity: 0.9;
    color: #db6700;
    background-color: #fff;
}

/* ---- FontAwesome icon replacements + adjustments ---- */
.fa-user::before {
    content: "\f0c9";
}
.fa-navicon::before {
    content: "\f0ca"; /* \f044*/
}
#n-Multi-upload a::before,
#n-Special-Pages a::before,
#n-New-Page a::before {
    content: "\f084";
}

/* ---- Scroll to Top button ---- */
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 16px;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  cursor: pointer;
  padding: 20px;
  border-radius: 4px;
}
#topBtn:hover {
  background-color: #555;
}
#topBtn:before {
    position: fixed;
    bottom: 40px;
    right: 44px;
    color: #fff;
    font-size: 18px;
    font-family: 'FontAwesome' !important;
    content: "\f106";
    font-weight: 600;
}

/* ---- Page body content adjustments ---- */
/* This is the Root Element font size, all rem elements
*  will size in relation to what this size is set at */
html {
  font-size: 16px;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight:bold;
    margin-top: 1.2em;
}
h3, h4, h5, h6 {
	color:#222;
}
h1 {
	color:#000;
	margin-top:1em;
	margin-bottom:1.4em;
}
h2 {
    border-bottom: 1px solid #a2a9b1;
}
h3 {
    font-size: 1.3rem !important;
}
h4 {
	font-size: 1.2rem;
    font-style: italic;
    font-weight: normal !important;
}
h3#tagline {
    display:none;
}
.toctitle > h2 {
    margin-top: 1em;
    font-size: 1rem;
}
h1.title {
    font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing:1px;
    margin-top: 0.8em;
    margin-bottom:1.2em;
}
.firstHeading {
    font-family: 'grobold', 'Segoe UI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
	color: #333;
}
/* ---- Paragraph and list styles ---- */
p, ul, ol, dl {
    font-size: 1rem!important;
}
ul, ol, dl {
    line-height: 1.5;
}
pre, .mw-code {
	background-color: #eff6fc;
    border: 1px solid #ccc;
    padding: 1em;
}
pre, code, tt, kbd, samp, .mw-code {
    font-family: monospace, "Courier New", Courier;
    border: 1px solid #d7d7d7;
    color: #000;
    background-color: #fff;
    border-radius: 2px!important;
    /* padding: 2px 4px 0px 4px; */
}

/* ---- Link colors ---- */
a {
    color: #0078a0;
}
a:hover {
	color: #db6700;
}
/* category link color */
#mw-normal-catlinks a.new {
    color: #0078a0;
}

/* ---- Images ---- */
.floatright img {
	margin-left: 1.5em;
}
.floatleft img {
    margin-right: 1.5em;
}
.thumbcaption {
    font-style: italic;
    font-size: smaller;
    margin-top: 2px;
}
floatright,
div.tright, 
div.floatright, 
table.floatright,
thumb.tright {
	margin-left: 1em;
	margin-bottom:1em;
}
/* May need to add class to gallery to target mainpage specific */
ul.gallery {
    margin: 0!important;
}

/* ---- Table of Contents ---- */
#preftoc li {
    background: #e79403;
    padding: unset; /* not unified with hover for some odd reason */
}
#preftoc li a:hover {
    background: #2ba6cb;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-decoration:none;
}
#preftoc > li.selected {
	background: #0386ad;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
/* Prevent padding from disappearing when toc content is folded up --*/
#toc #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
    margin-left: 1em;
    margin-right: 1em;
}
#toc, .toc, .mw-warning, table.wikitable {
    background-color: #fff;
}

/* ---- Wikitable Adjustments ---- */
table.wikitable > tr > th, 
table.wikitable > tr > td, 
table.wikitable > * > tr > th, 
table.wikitable > * > tr > td {
    border: 1px solid #a2a9b1;
    line-height: 1.5em;
}
table.wikitable > tr > th, 
table.wikitable > * > tr > th {
    background-color: #e7e7e7; 
    font-weight: bold;
    padding: 2px 5px!important;
}
table.wikitable {
    color: #222;
    margin: 1em 0;
    border: 1px solid #a2a9b1;
}
table {
    margin-bottom: 0em;
}
table.jquery-tablesorter th.headerSort {
    padding-right: 21px!important;
}

/* Table of Dragons Adjustments */
.tod-legend {
}

/* ---- category links ---- */
#catlinks,
.catlinks li {
    font-size: 0.8rem;
}

/* ---- footer adjustments ---- */
#div-footer-left {
	padding-left: 10px;
	padding-right: 0px;
}
#footer-left li {
	font-size: 0.8em;	
	float:left;
	margin-right:30px;
}

#footer-lastmod {
	width:100%;
	margin-bottom:3em;
}
#footer-right li {	
    float: left;
    width: 31%;
    margin-left: 1%!important;
}
li.social-follow {
	display:none;
}
#footer-right-icons {
	padding-left:0px;
	padding-right:10px;
	padding-top: 3.3em;
}
footer.row {
	margin-top: 1em!important;
}
/* ---- Preview page tweaks ---- */
.mw-filepage-resolutioninfo {
    margin-top: 2em;
}


/* ---- Editor, interface and special page changes ---- */
.wikiEditor-ui-text, 
.mw-editfont-monospace,
#mw-content-text > textarea {
    font-family: monospace, "Courier New", Courier;
}
.wikiEditor-ui-controls, 
.wikiEditor-ui-buttons,
.wikiEditor-ui {
    background-color: transparent;
    border-top: none;
}
/* Remove changelist extra background color */
table.mw-changeslist-line {
    background-color:transparent;
}
.mw-changeslist {
	line-height:1.4em;
}
.mw-highlight {
    line-height: initial;
}
/* remove extra space from below text widgets */
.textwidget { /* Ignore code hint error p.textwidget */
margin-bottom: 0px;
}
/* Remove extra space between rows */
.row .row {
    margin-bottom: 0px;
}
.mw-content-ltr ul {
    margin: .5em .2em 1em 1.3em;
}
/* Redirected From notice text */
.mw-redirectedfrom {
	font-size:0.8rem;
	font-style: italic;
	color:#555;
}

/* ---- Input buttons/controls ---- */
input[type="submit"] {
    background-color: #e79403;
    border-color: #333;
}
input[type="file"], input[type="checkbox"], input[type="radio"], select, input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
	margin: 0 0.5rem;
	padding: 0px 25px 0px 5px;
}
input[type="number"] {
	margin: 0 0.5rem;
	padding: 0px 0px 0px 5px;
}
label {
    font-size: 1rem;
}

/* Help actions are in sidebar, doesn't need to be in two places */
div.mw-indicator-mw-helplink,
div#mw-indicator-mw-helplink,
.mw-indicator,
.mw-indicators,
div.mw-indicator
div.mw-indicators,
div.mw-indicators.mw-body-content,
#mw-indicator-mw-helplink a {
	float:right;
	display:none;
}



/* -----------------------------------------------*/
/* -------- Plugins Theme-specific tweaks --------*/
/* ------ All other tweaks go in Common.css ------*/
/* -----------------------------------------------*/

/* ---- Echo ---- */
#echo-notifications {
    margin: -0.4em;
}
#echo-notifications li {
	margin: 0 0 0 10px;
    height: 30px;
    line-height: 30px;
}
/* color link to match Echo */
a.mw-helplink {
    color: #ccc;
}
.mw-echo-ui-overlay {
    font-size: 0.875rem;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
}
#pt-notifications-alert .mw-echo-notifications-badge::after, 
#pt-notifications-notice .mw-echo-notifications-badge::after {
    background-color: red;
}
#pt-notifications-alert .mw-echo-notifications-badge::after, #pt-notifications-notice .mw-echo-notifications-badge::after {
    font-size: 0.7rem;
    line-height: 1.4em;
}

/* Button colors */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    background-color: #e79403;
    border-color: #e79403;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
    background-color: #f0bf11;
    border-color: #f0bf11;
}

/* ---- Code editor plugin ---- */
/* remove line through editor window (print cutoff line) */
.ace-tm .ace_print-margin {
    display: none;
}
/* ---- js Addon Tweaks ---- */
#google_translate_element { /* to be removed later */
    margin-left: 10px;
    position: relative;
    top: -13px;
    margin-bottom: -10px;
}
/* ---- Yandex Search ---- */
div#ytWidget {
    margin-left: 10px;
    position: relative!important;
    top: -13px!important;
    float: right!important;
}
#yt-widget .yt-wrapper_align_right {
    display: none!important;
}
#yt-widget .yt-listbox__col {
    display: inline-block;
    list-style: none;
    vertical-align: top;
    float: left;
}
#yt-widget .yt-listbox__col {
    float: left;
}
#yt-widget .yt-listbox {
    width: 100%;
    min-width: 300px;
    right: 0px;
}
#yt-widget.yt-state_bottom .yt-listbox {
    bottom: unset!important;
}

/* Tabber */
ul.tabbernav {
    margin-bottom: 0px!important;
}
ul.tabbernav li a {
    font-size: 0.8em;
}

/* Comment streams */
.cs-reply-comment > .cs-comment-header {
    background-color: #fff;
}

/* ------------------------------------------------------------------ */
/* ------------------------- Facebook Widget ------------------------ */
/* ------------------------------------------------------------------ */
html#facebook.svg body.plugin.gecko.win.x1.Locale_en_US div._li div div#u_0_0 div div._2p3a {
    min-width: 250px;
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* ------------------------------ Forum ----------------------------- */
/* ------------------------------------------------------------------ */
table.mw-wikiforum-frame {
    background: #fff;
}
#mw-wikiforum-searchbox-border {
    background: #fff;
}
#mw-wikiforum-searchbox-picture:after {
	content:"<-Press to search"
}
.wikiEditor-ui {
    background-color: transparent;
}

.mw-wikiforum-thread-sub p,
p.mw-wikiforum-thread {
	padding-top: 10px;
}
/* Stop buttons from being stretched */
.mw-wikiforum-rightside img {
    width: auto;
}
th.mw-wikiforum-thread-top { /* Remove easter colors */
	border: #ccc;
	background: #CCC;
}
td.mw-wikiforum-thread-main {
    border: 1px solid #ccc;
    background: #fff;
}
td.mw-wikiforum-thread-sub {
    border: 1px solid #ccc;
    background: #fbf6ea;
}

/* ------------------------------------------- */
/* ----------- Testing only section ---------- */
/* ------------------------------------------- */

/* ----- We need our tables to scroll for mobile not shrink ----- */
/* --- in width until they are virtually unusable/unreadable! --- */
table,
table.wikitable {
    max-width: none;
    overflow: auto!important;
}
/* Make View Sorce pages display in Monospace font as edited pages */
#mw-content-text > textarea {
font-family:monospace,monospace;
}
table.wikitable > tr > th, 
table.wikitable > * > tr > th {
	padding: 2px 19.1px 2px 5px
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
    padding: 1px 4px 1px 5px;
}

/* Adjust DML Icon sizes and placement on buttons */
.sz-lg > a > img {
    margin-top: -9px;
    min-height:20px;
    max-height:20px;
    width:auto;
}
.sz-med > a > img {
    margin-top: -7px;
    min-height:18px;
    max-height:18px;
    width:auto;
}
.sz-sm > a > img {
    margin-top: -5px;
    min-height:15px;
    max-height:15px;
    width:auto;
}

/* Built-in Gallery Slideshow Mode Tweaks */
.mw800 .mw-gallery-slideshow-img-container img {
	max-width:800px;
}
ul.gallery.mw-gallery-slideshow {
    display: block;
    text-align: center;
}
.mw800 li.gallerybox div.gallerytext {
	display:none;
}
.mw-gallery-slideshow li.gallerybox.slideshow-current {
    background: #dde8ec;
}

/* ------------------------------------------------------------------------ */
/* ----------- Most Media Queries belong in Common.css not here ----------- */
/* ------------------------------------------------------------------------ */

@media only screen and (max-width: 500px) {
	#p-cactions {
	    padding-left: 0.8em!important;
	    padding-right: 0.8em!important;
	}
}

@media only screen and (min-width: 961px) {
	#p-cactions > a.button {
	    margin-right: 0px;
	}
}

/* If screen size is 960px wide or less */
@media screen and (max-width:960px) {
	#div-footer-left {
    	width: 100%!important;
	}
	#footer-lastmod {
		margin-bottom:0.2em;
	}
	#footer-right-icons {
		padding-top: 0.2em;
	}
	#footer-right-icons {
		width: 100%;
	}
	ul#footer-right li {
    	width: auto;
	}
}

/* If screen size is more than 642px wide, hide the left Pivot aside menu */
/* Prevents brief flash of left sidebar on page load, not sure why */
@media screen and (min-width: 642px) {
  aside.left-off-canvas-menu  {
    display:none;
  }
}

/* ----------------------------------------------- */
/* ----------- END Testing only section ---------- */
/* ----------------------------------------------- */