Difference between revisions of "MediaWiki:Common.css"

Revision as of 13:54, 28 December 2016

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,600italic,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);

body {
    background: url(https://www.grinderscape.org/assets/images/background.png);
    font-family: Open Sans, sans-serif;
    line-height: 20px;
}

a {
    color: #afafaf!important;
    text-decoration: none!important;
    transition: 200ms;
}

a.new {
    color: #b24040!important;
}

 nav ul {
    list-style-type: none;
    list-style-image: none;
    text-align: center;
    margin: auto;
}

  nav ul li {
    margin: 0;
    display: inline-flex;
}

   nav ul li a {
    margin: 10px;
    padding: 0;
}

header {
    min-width: auto;
}

 div#logo {
    padding: 30px 0;
    margin: auto;
    text-align: center;
}

div#wrap {
    /*min-width: 800px;*/
    min-width:auto !important;
    max-width: 1200px;
    margin: 60px auto;
    padding: 30px 30px 0 30px;
    box-sizing: border-box;
}

 div#mw-navigation {
    display: none;
}

  div#mw-head {
    position: initial;
}

   div#p-personal {
    position: initial;
    text-align: right;
    padding-bottom: 0;
}

    #p-personal ul {
    padding: 0;
    display: inline-block;
}

     #p-personal ul li {
    float: initial;
    margin: 0;
    display: inline-block;
    padding: 0!important;
    background: none;
}

      #p-personal ul li a {
    margin: 10px;
    padding: 0;
    display: block;
}

   div#mw-head div.vectorMenu h3 {
    display: none;
}

 div#siteNotice {
    margin-bottom: 30px;
    padding: 30px;
    text-align: left;
}

  div#noticeTitle {
    margin-bottom: 10px!important;
    background: url(https://i.imgur.com/3dqF3sx.png) no-repeat;
}

  div#localNotice {
    margin-bottom: 0;
}

   div#localNotice > p {
    margin: 0;
}

 div#pageInfo {
    margin: 0 0 30px 0;
    padding: 30px;
}

  h1#firstHeading {
    background: url(https://i.imgur.com/qpqwLFJ.png) no-repeat;
    padding: 0 0 0 30px;
    line-height: 20px;
    margin: 0;
    border-bottom: none;
    font-size: 13px;
    color: #592c0d;
}

  span.subpages {
    position: relative;
    border-top: 2px solid #161b20;
    padding-top: 10px;
    margin-top: 10px;
}

 div#content-sidebar-wrap {
    display: table;
    width: 100%;
}

  div#mw-panel {
    position: initial;
    width: 350px;
    display: table-cell;
    padding: 0 0 0 30px !important;
    vertical-align: top;
    box-sizing: border-box;
}

   div#p-logo {
    display: none;
}

   div#p-search {
    margin: 0;
    float: initial;
    margin-bottom: 30px;
    padding: 30px;
}

div#p-search div#searchTitle {
    background: url(https://i.imgur.com/X1fC0qz.png) no-repeat;
}

      span.subpages:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 20px;
    background-color: #afafaf;
    top: -2px;
    left: 0;
}

    form#searchform {
    padding: 0;
    margin: 0;
}

     div#simpleSearch {
    margin: 0;
    padding: 0;
    width: 100%;
    height: initial;
    border: 0;
    background: none;
}

div#simpleSearch #searchInput, input#database_input {
    padding: 10px;
    line-height: 20px;
    font-family: Open Sans,sans-serif;
    background-color: transparent;
    border: 1px solid #161b20;
    outline: none;
}

      div#simpleSearch #searchButton {
    position: initial;
    width: 100%;
    margin-top: 10px!important;
    text-indent: initial;
}

   div#mw-panel div.portal {
    margin: 0;
    padding: 30px;
    margin-bottom: 30px;
}

    div#mw-panel div.portal h3 {
    cursor: initial;
    display: block!important;
}

     div#mw-panel div.portal h3#p-In_the_wiki-label {
    background: url(https://i.imgur.com/7DeMxyz.png) no-repeat;
}

     div#mw-panel div.portal h3#p-Popular_pages-label {
    background: url(https://i.imgur.com/qtaf1a3.png) no-repeat;
}

     div#mw-panel div.portal h3#p-Categories-label {
    background: url(https://i.imgur.com/Lnp5kiv.png) no-repeat;
}

     div#mw-panel div#p-Management{
    display: none;
}

div#mw-panel div.portal h3#p-Management-label {
    background: url(https://i.imgur.com/vcNXF6N.png) no-repeat;
}

div#mw-panel div.portal div.body {
    margin: 0!important;
}

div#mw-panel div.portal div.body ul li {
    line-height: 20px;
    display: flex;
    padding: 10px 0;
    border-bottom:1px solid rgba(0,0,0,0.1);
}

div#mw-panel div.portal div.body ul li:last-child {
    border-bottom:none;
}

  div#content-wrap {
    box-sizing: border-box;
}

   div#content-navigation-wrap {
    margin-bottom: 30px;
    overflow: hidden;
}

    div#navigation {
    display: flex;
    height: 42px;
    position: relative;
    margin-bottom: 60px;
}

    div#navigation:before {
    content: "";
    position: absolute;
    bottom: 0;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    width: 100%;
}
    div#left-navigation {
    margin: 0;
    position: absolute;
}

    div#right-navigation {
    position: absolute;
    right: 0;
    margin: 0;
}
    div.vectorTabs {
    background: none;
    padding: 0;
    height: initial;
}

    div.vectorTabs ul {
    background: none;
}
    div.vectorTabs ul li {
    background: none!important;
    font-size: 0;
}
div.vectorTabs ul li.selected a {
    cursor: initial;
    border-bottom: 2px solid #5C3219;
}
div.vectorTabs span {
    background: none;
}

div.vectorTabs ul li a {
    line-height: 20px;
    padding: 10px;
    font-size: 13px;
    height: initial;
    border-bottom: 2px solid transparent;
}

div.vectorTabs ul li a:hover {
    border-bottom: 2px solid rgba(0,0,0,0.2);
}

h3#p-cactions-label {
    padding: 0;
    margin: 0!important;
}

h3#p-cactions-label span {
    display: none;
}

div.vectorMenu h3 a {
    position: initial;
    display: block;
    width: 46px;
    height: 40px;
    background: url(https://i.imgur.com/l1cW7qY.png) no-repeat center!important;
    background-position: initial;
    outline: none;
}

div.vectorMenu h3 a:hover {
    background:#transparent!important;
}
div.vectorMenu div.menu {
    top: 40px;
    left: initial;
    right: 0;
    border: none;
    background:#c7b07c;
}
div.vectorMenu div.menu li {
    line-height: 20px;
}

div.vectorMenu li:first-child a {
    border-top: 1px solid #151A1E;
}

        div.vectorMenu li a {
    padding: 10px 15px;
    font-size: 12px;
    border-bottom: 1px solid #151A1E;
}

div.vectorMenu li a:hover {
    background:rgba(255,255,255,0.1);
}

    div#content {
    margin: 0;
    padding: 30px;
    border: none;
    background: none;
}

     #contentSub, #contentSub2 {
    margin: 30px 0;
}

    ul#footer-info {
    margin: 0 30px;
    border-top:2px solid rgba(0,0,0,0.2);
}

div#footer {
    margin: 0;
    padding: 0;
    min-width: auto;
}

 div#customFooter {
    margin: 0;
    background: #252525;
    margin-top: 30px;
    padding: 30px;
    text-align: center;
}

  div#customFooter div a {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 5px!important;
}

ul#footer-places, ul#footer-icons, li#ca-unwatch, li#ca-watch, div#jump-to-nav, span#wpSummaryLabel, input#wpSummary, div.editCheckboxes, div#editpage-copywarn {
    display: none;
}

div#siteNotice, div#pageInfo, div#content-navigation-wrap, div#p-search, div#mw-panel div.portal{
    background: #bca674 !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
div#noticeTitle, div#searchTitle, div#mw-panel div.portal h3 {
    position: relative;
    font-size: 13px;
    padding: 0 0 10px 30px;
    color: #592c0d;
    margin-bottom: 30px;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    overflow: initial;
}
body, .mw-body p, p, a:hover, div#mw-panel div.portal div.body ul li a, span.subpages a, div#simpleSearch #searchInput, div.vectorTabs ul li a, table, .mw-body-content, .mw-body pre, textarea#wpTextbox1, #contentSub, #contentSub2, input#database_input {
    color:#000 !important;
}
div.portal h3:before, div#searchTitle:before, div#noticeTitle:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 20px;
    background-color:#5c3219;
    bottom: -2px;
    left: 0;
}
div.editButtons input[type="submit"], div#simpleSearch #searchButton, div.editButtons span a, div#customFooter div a, button#database_button {
    border-radius: 3px;
    color: #afafaf;
    border: 1px solid #5c3219;
    background-color: #5c3219;
    background-image: linear-gradient( transparent,rgba(0, 0, 0, 0.15));
    padding: 10px;
    margin: 0;
    font-family: Open Sans,sans-serif;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
    outline: none;
}




























div#mw-page-base {
    background: #151515 url(https://www.grinderscape.org/assets/images/background.png);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 9999;
}

div#mw-head-base {
position: fixed;
    left: 50%;
    top: 50%;
    z-index: 9999;
    margin: -75px 0 0 -75px;
    border: 16px solid rgba(0,0,0,0.1);
    box-shadow: 0 0 5px rgba(0,0,0,0.7), inset 0 0 5px rgba(0,0,0,0.7);
    border-radius: 50%;
    border-top: 16px solid #627924;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



















/* Specific Pages */

form#editform {
    border: 1px solid rgba(0,0,0,0.3);
}

 div#toolbar {
    padding: 10px 5px;
    background: #5c3219;
    border-bottom: 1px solid #161b20;
    line-height: 0;
}

  div#toolbar > div {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin: 0 5px;
}

   div#mw-editbutton-bold, div#mw-editbutton-italic, div#mw-editbutton-headline, div#mw-editbutton-nowiki {
    display: none!important;
}

   div#mw-editbutton-link {
    background: url(https://i.imgur.com/Wrs4VMn.png);
}

  div#mw-editbutton-extlink {
    background: url(https://i.imgur.com/HKLvTBX.png);
}

   div#mw-editbutton-hr {
    background: url(https://i.imgur.com/J9is2iW.png);
}

 textarea#wpTextbox1 {
    resize: vertical;
    outline: none;
    background:rgba(0,0,0,0.1);
    font-family: monospace;
    line-height: 16px;
    font-size: 12px;
    border: none;
    padding: 10px;
}

 .editOptions {
    border: none;
    padding: 10px 5px;
    margin: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.2);
}

  .editButtons {
    display: flex;
}

   span.cancelLink {
    margin: 0;
    display: flex;
}

   div.editButtons input[type="submit"], div.editButtons span a {
    margin: 0 5px;
}

 .mw-editTools, .templatesUsed, .hiddencats, .limitreport, span.editHelp, span.mw-editButtons-pipe-separator {
    display: none;
}

ul#index {
    margin-left: 0;
}

 ul#index li {
    display: flex;
}

 ul#index li:not(:last-child) {
    padding-bottom: 10px;
    border-bottom:1px solid rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

  div.img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

  ul#index li div.img img {
    max-height: 40px;
    max-width: 40px;
}

























/* General */

body, div#mw-panel div.portal div.body ul li a, div#simpleSearch #searchButton, div#simpleSearch #searchInput, div#siteNotice, .mw-body p, table, .mw-body-content, #contentSub, #contentSub2, #p-personal ul li, nav ul li, input#database_input {
    font-size: 12px;
    line-height: 20px;
}

 div#mw-panel div.portal div.body ul li a:hover, span.subpages a:hover, div.vectorTabs ul li.selected a, div.vectorTabs ul li a:hover, th, span.cancelLink a:hover {
    color:#593018!important;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
    font-family: Open Sans, sans-serif!important;
    color: #afafaf;
    line-height: 20px;
    font-weight: normal!important;
    margin: 30px 0!important;
    font-size: 13px;
}

.mw-body img {
    max-width: 100%;
}

.mw-body p, p {
    margin: 30px 0;
    line-height: 20px;
}

.mw-body h1 {
    border-bottom: 1px solid #161b20;
    padding-bottom: 10px;
}

.mw-body h2 {
    border-bottom: none;
}

span.mw-editsection {
    display: none;
}

table {
    margin: 30px 0!important;
    background:rgba(0,0,0,0.2)!important;
    border-collapse: collapse;
}

 td, th {
    padding: 10px!important;
    border: 1px solid #161b20!important;
}

  th {
    background: #1f272f!important;
    font-weight: normal;
    text-align: left!important;
}

.mw-body pre {
    background-color: rgba(0,0,0,0.1);
    line-height: 16px;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px;
    margin: 30px 0;
}

hr {
    background-color: #161b20;
    margin: 30px 0;
}

.mw-body .external {
    padding: 0;
    background: none;
}

.mw-body ul {
    margin: 30px 0px 30px 10px;
    list-style-position: inside;
    list-style-image: none;
}

 .mw-body ul li {
    margin: 0;
}

  .mw-body ul li ul {
    margin: 10px 0 10px 30px;
}
div#customFooter, nav {
    background:#5C3219 !important;color:#bca674!important;
}
div#mw-head a {color:#bca674 !important;}
div#customFooter p{color:#bca674!important;}
div#customFooter a{color:#fff!important;}
#wrap a{color:#5c3219 !important;}
fieldset {border: 1px solid rgba(0,0,0,0.2) !important;}
.mw-changeslist-legend {border:1px solid #97855d !important;}
input[type="submit"], input[type="checkbox"], select {background: #5c3219 !important;border-color:#5c3219 !important;}
::-webkit-input-placeholder {color: #717171; }
:-moz-placeholder { color: #717171; }
::-moz-placeholder { color: #717171; }
:-ms-input-placeholder { color: #717171; }


/* 28-12-2016 */

nav ul li a:hover {
 color: #fff !important;
}
#mw-watchlist-resetbutton > input {
 color: #afafaf !important;
}
#mw-watchlist-options input {
 color: #afafaf !important;
}
.namespaceselector {
  color: #afafaf !important;
}
.mw-submit {
  color: #afafaf !important;
}
.namespaceselector {
  margin-left: 5px !important;
}
.mw-month-selector {
  color: #fdfdfd !important;
}

div#mw-panel {
  position: static !important;

}
div#mw-panel div{
  position: relative !important;
float:left !important;
 box-sizing: border-box !important;
width:100% !important;
}

/* 28-12-2016 */




/* 28-12-2016 responsive layout */
@media screen and (max-width:991px){
#content-sidebar-wrap > div {
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
}
div#content-sidebar-wrap {
  display: block !important;
}
}

@media screen and (max-width:767px){
#content-sidebar-wrap {
  display: block !important;
}
div#mw-panel {
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}
.mw-contributions-form {
  overflow: auto;
  width: 100% !important;
}
}
@media screen and (max-width:450px){
div#right-navigation {
  margin-top: 40px;
  position: static;
  display: block !important;
}
}

/* 28-12-2016 responsive layout */