MediaWiki: Common.css

From Spire Trading Inc.
Jump to: navigation, search
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
 
 
 
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
 
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
  
 
+
/*** LAYOUT FOUNDATION ***/
/*** SELECTORS ***/
 
 
 
 
html, body {
 
html, body {
 +
  height: 100%;
 +
  margin: 0;
 
   font-family: Roboto, sans-serif;
 
   font-family: Roboto, sans-serif;
 
   line-height: 18pt;
 
   line-height: 18pt;
 
}
 
}
 
 
 
body {
 
body {
 +
  display: flex;
 +
  flex-direction: column;
 +
  min-height: 100vh;
 
   background-color: #FFF;
 
   background-color: #FFF;
 +
}
 +
#contentwrapper {
 +
  flex: 1 0 auto;
 +
}
 +
#footer {
 +
  flex-shrink: 0;
 +
  background-color: #F8F8F8;
 +
  padding: 15px 15px 15px 15px;
 
   background-image: url('https://wiki.spiretrading.com/images/b/bd/Footer.pattern.png');
 
   background-image: url('https://wiki.spiretrading.com/images/b/bd/Footer.pattern.png');
 
   background-repeat: repeat-x;
 
   background-repeat: repeat-x;
   background-position: bottom center;
+
   background-position: top center;
 
   background-size: 20%;
 
   background-size: 20%;
 +
  padding-top: 50px;
 
}
 
}
 
+
#footer.footer-sticky {
a, #mw-panel .portal .body li a {
+
   margin-top: 0 !important;
   color: #4B23A0;
 
 
}
 
}
  
 +
/*** TYPOGRAPHY ***/
 
h1, h2, h3, h4, h5, h6 {
 
h1, h2, h3, h4, h5, h6 {
 
   font-family: 'Montserrat', sans-serif;
 
   font-family: 'Montserrat', sans-serif;
 +
}
 +
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
 +
  font-family: 'Montserrat', sans-serif;
 +
}
 +
h1, .h1 { font-size: 30px; }
 +
h2, .h2 { font-size: 27px; }
 +
h3, .h3 { font-size: 24px; }
 +
h4, .h4 { font-size: 20px; }
 +
h5, .h5 { font-size: 18px; }
 +
h6, .h6 { font-size: 16px; }
 +
h1, .h1, h2, .h2, h3, .h3 {
 +
  margin-top: 25px;
 +
  margin-bottom: 15px;
 +
}
 +
.firstHeading, .tweekiFirstHeading {
 +
  text-align: left;
 +
  margin-bottom: 30px;
 
}
 
}
  
 +
/*** PAGE BASE ***/
 
#mw-page-base {
 
#mw-page-base {
 
   background-image: none;
 
   background-image: none;
Line 34: Line 60:
 
}
 
}
  
 
+
/*** LOGO ***/
/*** IDENTIFIERS ***/
+
#p-logo {
 
+
  height: 70px !important;
#pt-login-private a {
+
}
   color: #EC228F !important;
+
.mw-wiki-logo {
 +
   background-position: left 20px top 20px !important;
 
}
 
}
 
+
.navbar-brand img {
#p-logo {
+
  margin-top: -5px;
    height: 70px !important;
+
  width: 136.5px;
 +
  height: 35px;
 
}
 
}
  
 
+
/*** VECTOR TAB RESET ***/
/*** CLASSES ***/
 
 
 
/* RESETTING GRADIENTS AND HEADINGD */
 
 
.vectorTabs, .vectorTabs span, #mw-head .vectorMenu h3, .vectorTabs li {
 
.vectorTabs, .vectorTabs span, #mw-head .vectorMenu h3, .vectorTabs li {
 
   background-image: none !important;
 
   background-image: none !important;
 
}
 
}
 
/* LOGO */
 
.mw-wiki-logo {
 
    background-position: left 20px top 20px !important;
 
}
 
 
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
 
  font-family: 'Montserrat', sans-serif;
 
}
 
 
 
 
.vectorTabs .selected {
 
.vectorTabs .selected {
 
   border-bottom: 2px solid #4B23A0;
 
   border-bottom: 2px solid #4B23A0;
 
}
 
}
 
 
.mw-body {
 
.mw-body {
 
   border-color: #C8C8C8 !important;
 
   border-color: #C8C8C8 !important;
 
}
 
}
  
.toc {
+
/*** TWEEKI NAVBAR ***/
   background: #F8F9FA;
+
.navbar-default {
   border-color: #F2F2F2;
+
   background-image: none !important;
  margin: 15px 0;
+
   background-color: #FFF !important;
  padding: 15px;
 
 
}
 
}
 
+
.navbar-right {
 
+
   margin-top: 7px;
/*** SKIN: TWEEKI CUSTOMIZATIONS ***/
 
 
 
.navbar-brand img {
 
   margin-top: -5px;
 
  width: 136.5px;
 
  height: 35px;
 
 
}
 
}
  
h1, .h1 {
+
/*** SEARCH ***/
   font-size: 30px;
+
#searchInput {
 +
   margin-top: 5px;
 
}
 
}
h2, .h2 {
+
#searchInput:focus {
   font-size: 27px;
+
   border: 1px solid #4B23A0;
}
+
   background-image: none;
h3, .h3 {
+
   outline: 0;
   font-size: 24px;
+
   -webkit-box-shadow: none;
}
+
   box-shadow: none;
h4, .h4 {
 
   font-size: 20px;
 
}
 
h5, .h5 {
 
   font-size: 18px;
 
}
 
h6, .h6 {
 
   font-size: 16px;
 
 
}
 
}
  
h1, .h1, h2, .h2, h3, .h3 {
+
/*** TOC ***/
    margin-top: 25px;
+
.toc {
    margin-bottom: 15px;
+
   background: #F8F9FA;
}
+
   border-color: #F2F2F2;
 
+
   margin: 15px 0;
.firstHeading, .tweekiFirstHeading {
+
   padding: 15px;
   text-align: left;
 
   margin-bottom: 30px;
 
}
 
 
 
.navbar-default {
 
   background-image: none !important;
 
   background-color: #FFF !important;
 
 
}
 
}
  
 +
/*** BUTTONS ***/
 
.btn, #wpSave {
 
.btn, #wpSave {
 
   border: 0px !important;
 
   border: 0px !important;
 
}
 
}
 
 
.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, #wpSave {
 
.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, #wpSave {
 
   text-shadow: none !important;
 
   text-shadow: none !important;
Line 130: Line 122:
 
   box-shadow: none !important;
 
   box-shadow: none !important;
 
}
 
}
 
 
.btn-primary, .mw-ui-button.mw-ui-progressive, #wpSave {
 
.btn-primary, .mw-ui-button.mw-ui-progressive, #wpSave {
 
   background-image: none;
 
   background-image: none;
 
   background-color: #513392;
 
   background-color: #513392;
 
}
 
}
 
 
.btn-primary:hover, .btn-primary:focus, .mw-ui-button.mw-ui-progressive:hover, mw-ui-button.mw-ui-progressive:focus, #wpSave:hover, #wpSave:focus {
 
.btn-primary:hover, .btn-primary:focus, .mw-ui-button.mw-ui-progressive:hover, mw-ui-button.mw-ui-progressive:focus, #wpSave:hover, #wpSave:focus {
 
   background-color: #6556A4;
 
   background-color: #6556A4;
 
}
 
}
 
 
.btn-primary:active, .mw-ui-button.mw-ui-progressive:active, #wpSave:active {
 
.btn-primary:active, .mw-ui-button.mw-ui-progressive:active, #wpSave:active {
 
   background-color: #453A70;
 
   background-color: #453A70;
 
}
 
}
 
 
a:hover, a:focus {
 
a:hover, a:focus {
 
   color: #6556A4;
 
   color: #6556A4;
 
}
 
}
  
.navbar-right {
+
/*** LINKS ***/
   margin-top: 7px;
+
#pt-login-private a {
 +
   color: #EC228F !important;
 
}
 
}
  
#searchInput {
+
/*** FORMS ***/
   margin-top: 5px;
+
td.mw-label {
 +
   padding-right: 10px;
 
}
 
}
 
+
.oo-ui-panelLayout-framed {
#searchInput:focus {
+
   border: 0 none #FFF;
   border: 1px solid #4B23A0;
 
  background-image: none;
 
  outline: 0;
 
  -webkit-box-shadow: none;
 
  box-shadow: none;
 
}
 
 
 
#footer {
 
  background-color: #F8F8F8;
 
  padding: 15px;
 
 
}
 
}
  
 +
/*** FOOTER ICONS ***/
 
#footer-icons li:last-child::before {
 
#footer-icons li:last-child::before {
 
   content: " • ";
 
   content: " • ";
 
}
 
}
  
td.mw-label {
+
/*** MAIN PAGE CUSTOMIZATIONS ***/
   padding-right: 10px;
+
.page-Main_Page .firstHeading {
 +
   display: none;
 
}
 
}
 
+
.page-Main_Page #ca-edit {
@media only screen and (min-width: 1000px){
+
   display: none;
   #contentwrapper {
 
    margin-bottom: 190px !important;
 
  }
 
 
}
 
}
 
+
.page-Main_Page #mw-navigation {
.oo-ui-panelLayout-framed {
+
   display: none;
   border: 0 none #FFF;
 
 
}
 
}
 
+
.page-Main_Page #sidebar-right {
.page-Main_Page .firstHeading {
 
 
   display: none;
 
   display: none;
 
}
 
}
 
+
.page-Main_Page .row > .col-md-9 {
.page-Main_Page #ca-edit {
+
   flex: 0 0 100% !important;
   display: none;
+
  max-width: 100% !important;
 +
  width: 100% !important;
 
}
 
}

Latest revision as of 18:56, 27 May 2026

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

/*** LAYOUT FOUNDATION ***/
html, body {
  height: 100%;
  margin: 0;
  font-family: Roboto, sans-serif;
  line-height: 18pt;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #FFF;
}
#contentwrapper {
  flex: 1 0 auto;
}
#footer {
  flex-shrink: 0;
  background-color: #F8F8F8;
  padding: 15px 15px 15px 15px;
  background-image: url('https://wiki.spiretrading.com/images/b/bd/Footer.pattern.png');
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 20%;
  padding-top: 50px;
}
#footer.footer-sticky {
  margin-top: 0 !important;
}

/*** TYPOGRAPHY ***/
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
  font-family: 'Montserrat', sans-serif;
}
h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 27px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 20px; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }
h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 25px;
  margin-bottom: 15px;
}
.firstHeading, .tweekiFirstHeading {
  text-align: left;
  margin-bottom: 30px;
}

/*** PAGE BASE ***/
#mw-page-base {
  background-image: none;
  background-color: #FFF;
}

/*** LOGO ***/
#p-logo {
  height: 70px !important;
}
.mw-wiki-logo {
  background-position: left 20px top 20px !important;
}
.navbar-brand img {
  margin-top: -5px;
  width: 136.5px;
  height: 35px;
}

/*** VECTOR TAB RESET ***/
.vectorTabs, .vectorTabs span, #mw-head .vectorMenu h3, .vectorTabs li {
  background-image: none !important;
}
.vectorTabs .selected {
  border-bottom: 2px solid #4B23A0;
}
.mw-body {
  border-color: #C8C8C8 !important;
}

/*** TWEEKI NAVBAR ***/
.navbar-default {
  background-image: none !important;
  background-color: #FFF !important;
}
.navbar-right {
  margin-top: 7px;
}

/*** SEARCH ***/
#searchInput {
  margin-top: 5px;
}
#searchInput:focus {
  border: 1px solid #4B23A0;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*** TOC ***/
.toc {
  background: #F8F9FA;
  border-color: #F2F2F2;
  margin: 15px 0;
  padding: 15px;
}

/*** BUTTONS ***/
.btn, #wpSave {
  border: 0px !important;
}
.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, #wpSave {
  text-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.btn-primary, .mw-ui-button.mw-ui-progressive, #wpSave {
  background-image: none;
  background-color: #513392;
}
.btn-primary:hover, .btn-primary:focus, .mw-ui-button.mw-ui-progressive:hover, mw-ui-button.mw-ui-progressive:focus, #wpSave:hover, #wpSave:focus {
  background-color: #6556A4;
}
.btn-primary:active, .mw-ui-button.mw-ui-progressive:active, #wpSave:active {
  background-color: #453A70;
}
a:hover, a:focus {
  color: #6556A4;
}

/*** LINKS ***/
#pt-login-private a {
  color: #EC228F !important;
}

/*** FORMS ***/
td.mw-label {
  padding-right: 10px;
}
.oo-ui-panelLayout-framed {
  border: 0 none #FFF;
}

/*** FOOTER ICONS ***/
#footer-icons li:last-child::before {
  content: " • ";
}

/*** MAIN PAGE CUSTOMIZATIONS ***/
.page-Main_Page .firstHeading {
  display: none;
}
.page-Main_Page #ca-edit {
  display: none;
}
.page-Main_Page #mw-navigation {
  display: none;
}
.page-Main_Page #sidebar-right {
  display: none;
}
.page-Main_Page .row > .col-md-9 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}