MediaWiki: Common.css
From Spire Trading Inc.
Spireadmin (talk | contribs) |
Spireadmin (talk | contribs) |
||
| 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 ***/ | |
| − | /*** | ||
| − | |||
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 { | #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; | ||
| Line 23: | Line 27: | ||
background-size: 20%; | background-size: 20%; | ||
padding-top: 50px; | padding-top: 50px; | ||
| + | } | ||
| + | #footer.footer-sticky { | ||
| + | margin-top: 0 !important; | ||
} | } | ||
| + | /*** 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 ***/ | |
| − | /*** | + | #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 { | .vectorTabs, .vectorTabs span, #mw-head .vectorMenu h3, .vectorTabs li { | ||
background-image: none !important; | background-image: none !important; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.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; | ||
} | } | ||
| − | . | + | /*** TWEEKI NAVBAR ***/ |
| − | background: | + | .navbar-default { |
| − | + | background-image: none !important; | |
| − | + | background-color: #FFF !important; | |
| − | |||
} | } | ||
| − | + | .navbar-right { | |
| − | + | margin-top: 7px; | |
| − | |||
| − | |||
| − | .navbar- | ||
| − | margin-top: | ||
| − | |||
| − | |||
} | } | ||
| − | + | /*** 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 { | .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; | ||
} | } | ||
| − | + | /*** LINKS ***/ | |
| − | + | #pt-login-private a { | |
| + | color: #EC228F !important; | ||
} | } | ||
| − | + | /*** FORMS ***/ | |
| − | + | td.mw-label { | |
| + | padding-right: 10px; | ||
} | } | ||
| − | + | .oo-ui-panelLayout-framed { | |
| − | + | border: 0 none #FFF; | |
| − | border | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | # | ||
| − | |||
| − | |||
} | } | ||
| + | /*** FOOTER ICONS ***/ | ||
#footer-icons li:last-child::before { | #footer-icons li:last-child::before { | ||
content: " • "; | content: " • "; | ||
} | } | ||
| − | + | /*** MAIN PAGE CUSTOMIZATIONS ***/ | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.page-Main_Page .firstHeading { | .page-Main_Page .firstHeading { | ||
display: none; | display: none; | ||
} | } | ||
| − | |||
.page-Main_Page #ca-edit { | .page-Main_Page #ca-edit { | ||
display: none; | display: none; | ||
} | } | ||
| − | |||
.page-Main_Page #mw-navigation { | .page-Main_Page #mw-navigation { | ||
display: none; | display: none; | ||
} | } | ||
| − | |||
.page-Main_Page #sidebar-right { | .page-Main_Page #sidebar-right { | ||
display: none; | display: none; | ||
} | } | ||
| − | |||
.page-Main_Page .row > .col-md-9 { | .page-Main_Page .row > .col-md-9 { | ||
flex: 0 0 100% !important; | flex: 0 0 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;
}
