MediaWiki:Common.css

From Serious Documentation
Jump to: navigation, search
/* CSS placed here will be applied to all skins */
/*----------
 Header
------------*/
#wiki-header {background: url('https://techref.myserious.com/images/backgrounds/bg-showcase-serious.jpg');}


#wiki-header .logo-text {
padding-left: 3px;
text-align: center;
width: 100%;
min-width: 220px;
color: #fff;
font-size: 18px;
display: block;
text-align: center;
text-transform: uppercase;
}

.back-to-serious {
padding-top: 40px;
font-size: .9rem;
list-style-type: none !important;
list-style-image: none !important;
font-weight: bold;
text-transform: uppercase;
}
	
.back-to-serious li a {color: #fff !important;}

#wiki-header .g-logo-block .g-content {width: 220px;}
#wiki-header {width: 100%;}
#wiki-header .g-container {margin: 0 auto; width: 98%; max-width: 1600px;}
#wiki-header .g-logo img {width: 220px;}
	
@media only all and (max-width: 47.938rem) {
.logo-text {font-size: 22px;}		
.back-to-serious {padding-top: 12px 0;}
}



/*----------
 General
------------*/
a {transition: none !important; moz-transition !important: none; webkit-transition: none !important; }
html {max-width: none;}
body {width: 100%; max-width: none; background: #fff;}
.mediawiki {min-width: 480px;}
.mw-body {
margin-top: 0 !important;
border: none;
box-shadow: 3px 3px 20px rgba(0,0,0,.45);}

#globalWrapper {margin: 0 auto !important; padding: 1%!important; width: 98% !important; max-width: 1600px;}

a {color: #0ea700 !important;}
a:visited {color: #005500 !important;}
h1, h2, h3 {color: #004646; border-color: #ed7b32; border-width: 2px;}
#catlinks {display: none;}

.mw-body {margin-top: 16px; margin: 2.8em 0 0 0;}
#column-one {width: 20%; float: left;}
div#column-content {margin-top: 12px; width: 75%;}
div#p-categorytree-portlet {width: 100%;}

.code-no-border {border: none; line-height: 1.2em;}
pre {margin-top: 1em;}


/*----------
 Left Menu
------------*/
#column-one {padding-top: 0 !important; width: 25%;}
#column-one .pBody {border: none;}
.portlet h3 {font-weight: bold; color: #003333; text-transform: none;}

#searchGoButton, #mw-searchButton, #expander {
margin: 4px 0 0 4px;
padding: 4px;
width: 42%;
display: inline-block; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,.55); background: #46b54b; border-radius: 3px; border: solid 1px #003333; box-shadow: inset 0 2px 0 #46b54b, inset 0 -7px 6px rgba(0,51,51,.4), inset 0 5px 2px rgba(255,255,255,.35);
}
#searchGoButton:hover, #mw-searchButton:hover, #expander:hover  {color: #fff !important; background: #ed7b32; border: solid 1px #893900; box-shadow: inset 0 2px 0 #ed7b32, inset 0 -7px 6px rgba(137,57,0,.4), inset 0 5px 2px rgba(255,255,255,.35);}

#searchGoButton:active, #mw-searchButton:active, #expander:active  {box-shadow: inset 0 7px 6px rgba(137,57,0,.4), inset 0 -2px 0 #ed7b32,  inset 0 -5px 2px rgba(255,255,255,.35);}

#expander {cursor: pointer; width: auto;}

.generated-sidebar {width: 100%;}
.generated-sidebar ul.fancytree-container {overflow: initial;}
span.fancytree-title {white-space: initial;}
.fancytree-exp-n span.fancytree-expander, .fancytree-exp-n span.fancytree-expander:hover, span.fancytree-icon {display: none;}
.fancytree-exp-nl span.fancytree-expander, .fancytree-exp-nl span.fancytree-expander:hover {display: none;}
.fancytree-treefocus span.fancytree-selected span.fancytree-title, .fancytree-treefocus span.fancytree-active span.fancytree-title {
    background-color: #0ea700;
}

.fancytree-treefocus span.fancytree-selected span.fancytree-title a, .fancytree-treefocus span.fancytree-active span.fancytree-title a {
    color: white !important;
    background-color: #3875D7;
}
ul.ui-fancytree.fancytree-container {outline: none; border: none;}
.fancytree-has-children {font-weight: bold;}


/*----------
 PDF Print
------------*/
#p-tb ul li, #p-tb h3 {display: none;}
#p-tb #t-pdf {display: block;}
#p-tb ul, #p-tb li {margin: 14px 0 0 0 !important; padding: 0 !important; list-style-type: none;}
#p-tb li a {display: inline-block; margin-left: 6px; padding: 5px 10px !important; width: 93%; text-align: center; color: #fff !important; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,.55); background: #46b54b; border-radius: 3px; border: solid 1px #003333; box-shadow: inset 0 2px 0 #46b54b, inset 0 -7px 6px rgba(0,51,51,.4), inset 0 5px 2px rgba(255,255,255,.35);}
#p-tb li a:hover {color: #fff !important; background: #ed7b32; border: solid 1px #893900; box-shadow: inset 0 2px 0 #ed7b32, inset 0 -7px 6px rgba(137,57,0,.4), inset 0 5px 2px rgba(255,255,255,.35);}
#p-tb li a:active {box-shadow: inset 0 7px 6px rgba(137,57,0,.4), inset 0 -2px 0 #ed7b32,  inset 0 -5px 2px rgba(255,255,255,.35);}


/*----------
 Top Menus
------------*/
#p-logo, #p-cactions.portlet {display: none;}
.g-block.g-logo-block.size-20 {width: 290px !important;}
#g-header .g-container {border-bottom: none;}
#p-logo {top: 16px; height: auto; left: 6px; width: 290px;}
li.active.g-menu-item.g-menu-item-101.g-menu-item-type-component.g-standard {text-align: right;}

/*-----------------------
   Template Classes
------------------------*/
.numbered-example {padding: 0 2px; font-size: 10px; background: #f00; color: #fff; border-radius: 50%; vertical-align: super;}
.numbered-definition {padding: 0 4px; background: #f00; color: #fff; border-radius: 50%; vertical-align: super;}
.sail-func {font-family: 'Courier New','Andale Mono',monospace; color: #007305; font-weight: bold;}



/*----------
  Footer
------------*/
#f-poweredbyico {display: none;}
#footer {margin-top: 24px !important; border-top: solid 1px #ed7b32 !important; border-bottom: solid 1px #ed7b32 !important;}

/*--------------
  Pop-In
----------------*/
.jj_sl_navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    list-style: none;
    z-index: 9999;
    top: 200px;
}

.jj_sl_navigation li {
    padding: 0px;
    overflow: hidden;
    direction: ltr;
    border: 0;
    display: block;
    float: none;
}


.jj_sl_navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    list-style: none;
    z-index: 9999;
    top: 200px;
}

.jj_sl_navigation li {
    padding: 0px;
    overflow: hidden;
    direction: ltr;
    border: 0;
    display: block;
    float: none;
}

/* Right */

.jj_sl_navigation.right { 
    right: -155px;
}

.jj_sl_navigation.right li {
	right: 0;
	position: relative;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.jj_sl_navigation.right li:hover {
	-webkit-transform: translateX(-150px);
	-moz-transform: translateX(-150px);
	transform: translateX(-150px);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.jj_sl_navigation.right li a {
	padding: 11px 10px 11px 0px;
	margin-left: 0;
	background: #ed7b32;
        transition: background 0.3s;
}

.jj_sl_navigation.right li a:hover {background: #54b64b;}

.jj_sl_navigation li a {
    display: block;
	width: 185px;
	height: 185px;
	text-decoration: none;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: inherit;
	box-sizing: content-box;
	-webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;	
        color: #fff;
}

span.jj_social_text {color: #fff !important;}

.jj_sl_navigation li a:focus {
	outline: 0;
	border: 0;
}

.jj_sl_navigation li a .jj_social_text {
	display: inline-block;
	padding: 20px 4px 8px;
	width: 130px;
	text-align: left;
	float: right;
}

.jj_sl_navigation li a .jj_social_text:after {
	margin-top: 12px;
	display: block;
	content: 'SIGN UP NOW \25b6';
	font-weight: bold;
	font-size: 16px;
	text-decoration: underline;
}


.jj_sl_navigation a:hover {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.jj_sl_navigation .jj_sprite, 
.jj_sl_navigation .jj_sprite_custom {
	position: absolute;
	left: 4px;
	top: 0;
	float: left;
	margin-top: 0px;
	display: block;
	width: 36px;
	height: 200px;
	background-repeat: no-repeat;
}

.jj_sl_navigation .jj_sprite_custom.jj_custom1 {
	background: url('https://www.seriousintegrated.com/media/mod_social_slider/icons/join-us.png');
}

/*--------------
   Template Styles
----------------*/
.courier-green {color: #46b54b; font-family: courier, monospace;}
.courier-red {color: #ff0000; font-family: courier, monospace;}
.text-red {color: #cc0000;"}

/*-------------------
   Code Highlighting
--------------------*/
.mw-highlight pre, .fake-source pre, .fake-source code {background: #222; color: #ddd;}
.mw-highlight .na, .mw-highlight .nt {color: #46b54b;}
.mw-highlight .o {color: #00b3b3;}
.mw-highlight .cm {color: #888;}
.mw-highlight .kt {color: #ed7b32;}
.mw-highlight .k, .mw-highlight .kc, .mw-highlight .kd {color: #00ff00;}
.mw-highlight .mh, .mw-highlight .mi {color: #fd0;}
.mw-highlight .nf, .mw-highlight .nc, .mw-highlight .nb {color: #00ffff;}
.mw-highlight .m {color: #999;}
.warning-code pre {margin: 0;border: 0;}

/*--------------
   Media Queries
----------------*/
@media only all and (max-width: 47.938rem) {
    .mw-body {margin-top: 16px; margin: 2.8em 0 0 0;}
    #column-one {margin-top: 12px; width: 100%!important;}
    div#column-content {margin-top: 0; width: 100% !important;}
    div.generated-sidebar {display: none;}
    #p-search .pBody {text-align: left;}
    #p-search {width: 100%;}
    #searchBody input {width: 28%;}
    #p-personal ul {padding: 0;}
    .g-block.g-logo-block.size-20, .g-ambrosia-menu.g-block.size-80 {width: 100% !important; flex: 100%;}
    #wiki-header .g-logo-block .g-content {width: 100%; text-align: center;}
    #g-header .g-logo img {width: 90%;}
    #wiki-header .logo-text {text-align: center; font-size: 7vw;}
    li.active.g-menu-item.g-menu-item-101.g-menu-item-type-component.g-standard {text-align: center;}
    .back-to-serious {padding-top: 0; float: none; text-align: center;}
    .jj_sl_navigation {display: none;}
}

@media screen and (max-width: 985px) {.jj_sl_navigation.right {display: none;}}

@media screen and (max-width: 760px) {
#column-one {width: 100%; float: none;}
div#column-content {width: 75%; float: none;}
}
Retrieved from "https://techref.myserious.com/index.php?title=MediaWiki:Common.css&oldid=7137"