MediaWiki

Difference between revisions of "Common.css"

From Boundary Devices Wiki

Tag: Replaced
 
(83 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/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 +
 +
h1, h2, h3, h4, h5, h6 {
 +
    line-height: 1.25em;
 +
}
 +
 +
.row {
 +
  max-width: 95em !important;
 +
}
 +
 +
/*****FOREGROUND SKIN STYLING*****/
 +
/***************************/
 +
/***** START *****/
 +
 +
/* Mobile Styling of top bar */
 +
.top-bar {
 +
    background: #fff;
 +
}
 +
@media (min-width: 576px) {
 +
    .top-bar-logo {
 +
        margin: 0px 0px 0px 10px;
 +
    }
 +
}
 +
.top-bar .toggle-topbar.menu-icon a {
 +
    color: #172a53;
 +
}
 +
 +
.top-bar .toggle-topbar.menu-icon a span::after {
 +
    box-shadow: 0 0 0 1px #172a53,0 7px 0 1px #172a53,0 14px 0 1px #172a53;
 +
}
 +
 +
/* Change fonts in top bar */
 +
.top-bar-section ul li > a {
 +
    font-family: "Ubuntu", sans-serif !important;
 +
    color: #172a53;
 +
}
 +
 +
.top-bar-section li.active:not(.has-form) a:not(.button) {
 +
    color: #172a53;
 +
}
 +
 +
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
 +
    color: #10bf10 !important;
 +
}
 +
 +
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
 +
    background: #172a53 !important;
 +
}
 +
 +
/* Change color of menu items and search bar background */
 +
.top-bar-section ul li {
 +
    background: transparent;
 +
}
 +
.top-bar-section .has-form {
 +
    background: transparent;
 +
}
 +
 +
/* Adjust spacing of top bar elements */
 +
.top-bar-section ul {
 +
    padding: 20px;
 +
}
 +
 +
/* Change top bar button color */
 +
.top-bar .button.search {
 +
    background-color: #10bf10;
 +
    border-color: #188e18;
 +
}
 +
 +
body.page-Main_Page h1 {
 +
    display: none;
 +
}
 +
 +
h3#tagline {
 +
    display: none;
 +
}
 +
 +
.top-bar .button.search {
 +
    font-family: 'Ubuntu', sans-serif !important;
 +
    border-radius: 0px 15px 15px 0px;
 +
}
 +
 +
.top-bar input {
 +
    border-radius: 10px 0px 0px 10px;
 +
}
 +
 +
.title-area-1 {
 +
    background: #172a53;
 +
    padding: 0px 0px 10px 0px;
 +
}
 +
 +
.title-area-1 h3 {
 +
    color: #ffffff;
 +
}
 +
 +
/* Main Page Styling */
 +
.product-thumbnail {
 +
    border: 1px solid #ddd;
 +
    border-radius: 3px;
 +
    text-align: center;
 +
    padding: 30px 0px;
 +
}
 +
 +
.product-title {
 +
    text-align: center;
 +
    font-size: 18px;
 +
}
 +
 +
/* Product Page */
 +
 +
/* Hide top title */
 +
h1#firstHeading {
 +
    display: none;
 +
}
 +
 +
.product-image {
 +
    text-align: center;
 +
}
 +
 +
.icon-check::before {
 +
    font-family: "Font Awesome 5 Brands";
 +
    content: "\f00c";
 +
}
 +
 +
/* Same height columns on larger screen sizes */
 +
@media (min-width: 576px) {
 +
.equalheight {
 +
    /*min-height: 300px;*/
 +
    margin: 0 auto;
 +
    display: -webkit-flex; /* Safari */   
 +
    display: flex; /* Standard syntax */
 +
}
 +
 +
.tablecolumn {
 +
    -webkit-flex: 1; /* Safari */
 +
    -ms-flex: 1; /* IE 10 */
 +
    flex: 1; /* Standard syntax */
 +
}
 +
}
 +
 +
.blueheader {
 +
    background-color: #172A53;
 +
    margin-bottom: 14px;
 +
}
 +
 +
.blueheader h2 {
 +
    color: #ffffff;
 +
    font-weight: 700;
 +
    font-size: 18px;
 +
    text-align: center;
 +
}
 +
 +
.greenheader {
 +
    background-color: #1ED01F;
 +
    margin-bottom: 14px;
 +
}
 +
 +
.greenheader h2 {
 +
    color: #ffffff;
 +
    font-weight: 700;
 +
    font-size: 18px;
 +
    text-align: center;
 +
}
 +
 +
.redheader {
 +
    background-color: #F01108;
 +
    margin-bottom: 14px;
 +
}
 +
 +
.redheader h2 {
 +
    color: #ffffff;
 +
    font-weight: 700;
 +
    font-size: 18px;
 +
    text-align: center;
 +
}
 +
 +
.blackheader {
 +
    background-color: #000;
 +
    margin-bottom: 14px;
 +
}
 +
 +
.blackheader h2 {
 +
    color: #ffffff;
 +
    font-weight: 700;
 +
    font-size: 18px;
 +
    text-align: center;
 +
}
 +
 +
.greyheader {
 +
    background-color: #797C7D;
 +
    margin-bottom: 14px;
 +
}
 +
 +
.greyheader h2 {
 +
    color: #ffffff;
 +
    font-weight: 700;
 +
    font-size: 18px;
 +
    text-align: center;
 +
}
 +
 +
.lightgreybackground {
 +
  background-color: #F2F2F2;
 +
}
 +
 +
.greenbackground {
 +
  background-color: #E8F6E9;
 +
}
 +
.redbackground {
 +
  background-color: #FAEBE9;
 +
}
 +
.blackbackground {
 +
  background-color: #000000;
 +
  color: #ffffff;
 +
}
 +
.greybackground {
 +
  background-color: #dbdbdb;
 +
}
 +
 +
/* Footer Styling */
 +
footer.row {
 +
    margin-top: 2em;
 +
    color: #c7c7c7 !important;
 +
    background: #121212 !important;
 +
    max-width: 100% !important;
 +
    padding-top: 50px !important;
 +
}
 +
 +
footer.row a {
 +
    color: #c7c7c7;
 +
}
 +
 +
/*****FOREGROUND SKIN STYLING*****/
 +
/***************************/
 +
/***** END *****/
 +
 +
/*****APEX SKIN STYLING*****/
 +
/***************************/
 +
/***** START *****/
 +
/* START - General Theme Styling */
 +
h1, h2, h3, h4, h5, h6, p, body {
 +
font-family: "Ubuntu", sans-serif;
 +
}
 +
 +
/* START - Edit the Top Bar and Menu */
 +
@media only screen and (min-width: 40.0625em) {
 +
  .top-bar {
 +
      background: #fff !important;
 +
  }
 +
}
 +
#navwrapper > nav > ul > li.name > div > a > div {
 +
  display: none !important;
 +
}
 +
.top-bar-logo {
 +
  margin: 20px 10px 10px 20px;
 +
}
 +
.apex-nav {
 +
  background: none;
 +
  border-top: none;
 +
  border-bottom: none;
 +
}
 +
/* END - Edit the Top Bar and Menu */
 +
 +
 +
/* START - Edit the tables */
 +
 +
.welcome {
 +
  width: 100%;
 +
  text-align: center;
 +
  background: #1D3468;
 +
  border: none;
 +
  padding: 20px;
 +
}
 +
 +
.producttable {
 +
  padding: 25px;
 +
  width: 100%;
 +
}
 +
 +
/* Table Headers */
 +
.tableheader-blue {
 +
  width: 20%;
 +
  background-color: #172A53;
 +
  color: #ffffff;
 +
  font-weight: 700;
 +
  font-size: 18px;
 +
  text-align: center;
 +
  padding: 10px !important;
 +
}
 +
.tableheader-green {
 +
  width: 20%;
 +
  background-color: #1ED01F;
 +
  color: #ffffff;
 +
  font-weight: 700;
 +
  font-size: 18px;
 +
  text-align: center;
 +
  padding: 10px !important;
 +
}
 +
.tableheader-red {
 +
  width: 20%;
 +
  background-color: #F01108;
 +
  color: #ffffff;
 +
  font-weight: 700;
 +
  font-size: 18px;
 +
  text-align: center;
 +
  padding: 10px !important;
 +
}
 +
.tableheader-black {
 +
  width: 20%;
 +
  background-color: #000000;
 +
  color: #ffffff;
 +
  font-weight: 700;
 +
  font-size: 18px;
 +
  text-align: center;
 +
  padding: 10px !important;
 +
}
 +
.tableheader-grey {
 +
  width: 20%;
 +
  background-color: #797C7D;
 +
  color: #ffffff;
 +
  font-weight: 700;
 +
  font-size: 18px;
 +
  text-align: center;
 +
  padding: 10px !important;
 +
}
 +
 +
/* Table Columns */
 +
td.tablecolumn-lightgrey {
 +
  background-color: #F2F2F2 !important;
 +
  padding: 30px;
 +
  vertical-align: top;
 +
}
 +
td.tablecolumn-green {
 +
  background-color: #E8F6E9 !important;
 +
  padding: 30px;
 +
  vertical-align: top;
 +
}
 +
td.tablecolumn-red {
 +
  background-color: #FAEBE9!important;
 +
  padding: 30px;
 +
  vertical-align: top;
 +
}
 +
td.tablecolumn-grey {
 +
  background-color: #F3F2F2!important;
 +
  padding: 30px;
 +
  vertical-align: top;
 +
}
 +
 +
/** <pre> Styling **/
 +
pre {
 +
  background-color: #f1f1f1;
 +
  border-left-color: #172a53;
 +
  border-left-style: solid;
 +
  border-left-width: 5px;
 +
  padding: 1em;
 +
  font-size: 100%;
 +
  color: #000;
 +
  margin: 20px 0px;
 +
}
 +
 +
/** style pages **/
 +
.mw-parser-output > h1 {
 +
  border-bottom: 1px solid #000;
 +
}
 +
 +
.mw-parser-output > h2 {
 +
  border-bottom: 1px solid #000;
 +
}
 +
 +
#toc, .toc {
 +
  background: #f1f1f1;
 +
}
 +
 +
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
 +
    margin: 20px 0px;
 +
}
 +
 +
.column-subheading {
 +
    font-weight: 700;
 +
}
 +
/***** END *****/

Latest revision as of 20:51, 18 June 2021

/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25em;
}

.row {
   max-width: 95em !important;
}

/*****FOREGROUND SKIN STYLING*****/
/***************************/
/***** START *****/

/* Mobile Styling of top bar */
.top-bar {
    background: #fff;
}
@media (min-width: 576px) {
    .top-bar-logo {
        margin: 0px 0px 0px 10px;
    }
}
.top-bar .toggle-topbar.menu-icon a {
    color: #172a53;
}

.top-bar .toggle-topbar.menu-icon a span::after {
    box-shadow: 0 0 0 1px #172a53,0 7px 0 1px #172a53,0 14px 0 1px #172a53;
}

/* Change fonts in top bar */
.top-bar-section ul li > a {
    font-family: "Ubuntu", sans-serif !important;
    color: #172a53;
}

.top-bar-section li.active:not(.has-form) a:not(.button) {
    color: #172a53;
}

.top-bar-section li.active:not(.has-form) a:not(.button):hover {
    color: #10bf10 !important;
}

.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
    background: #172a53 !important;
}

/* Change color of menu items and search bar background */
.top-bar-section ul li {
    background: transparent;
}
.top-bar-section .has-form {
    background: transparent;
}

/* Adjust spacing of top bar elements */
.top-bar-section ul {
    padding: 20px;
}

/* Change top bar button color */
.top-bar .button.search {
    background-color: #10bf10;
    border-color: #188e18;
}

body.page-Main_Page h1 { 
    display: none; 
}

h3#tagline {
    display: none;
}

.top-bar .button.search {
    font-family: 'Ubuntu', sans-serif !important;
    border-radius: 0px 15px 15px 0px;
}

.top-bar input {
    border-radius: 10px 0px 0px 10px;
}

.title-area-1 {
    background: #172a53;
    padding: 0px 0px 10px 0px;
}

.title-area-1 h3 {
    color: #ffffff;
}

/* Main Page Styling */
.product-thumbnail {
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    padding: 30px 0px;
}

.product-title {
    text-align: center;
    font-size: 18px;
}

/* Product Page */

/* Hide top title */
h1#firstHeading {
    display: none;
}

.product-image {
    text-align: center;
}

.icon-check::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f00c";
}

/* Same height columns on larger screen sizes */
@media (min-width: 576px) {
.equalheight {
    /*min-height: 300px;*/
    margin: 0 auto;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standard syntax */
}

.tablecolumn {
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
}
}

.blueheader {
    background-color: #172A53;
    margin-bottom: 14px;
}

.blueheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.greenheader {
    background-color: #1ED01F;
    margin-bottom: 14px;
}

.greenheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.redheader {
    background-color: #F01108;
    margin-bottom: 14px;
}

.redheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.blackheader {
    background-color: #000;
    margin-bottom: 14px;
}

.blackheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.greyheader {
    background-color: #797C7D;
    margin-bottom: 14px;
}

.greyheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.lightgreybackground {
   background-color: #F2F2F2;
}

.greenbackground {
   background-color: #E8F6E9;
}
.redbackground {
   background-color: #FAEBE9;
}
.blackbackground {
   background-color: #000000;
   color: #ffffff;
}
.greybackground {
   background-color: #dbdbdb;
}

/* Footer Styling */
footer.row {
    margin-top: 2em;
    color: #c7c7c7 !important;
    background: #121212 !important;
    max-width: 100% !important;
    padding-top: 50px !important;
}

footer.row a {
    color: #c7c7c7;
}

/*****FOREGROUND SKIN STYLING*****/
/***************************/
/***** END *****/

/*****APEX SKIN STYLING*****/
/***************************/
/***** START *****/
/* START - General Theme Styling */
h1, h2, h3, h4, h5, h6, p, body {
font-family: "Ubuntu", sans-serif;
}

/* START - Edit the Top Bar and Menu */
@media only screen and (min-width: 40.0625em) {
   .top-bar { 
      background: #fff !important;
   }
}
#navwrapper > nav > ul > li.name > div > a > div {
   display: none !important;
}
.top-bar-logo {
   margin: 20px 10px 10px 20px;
}
.apex-nav {
   background: none;
   border-top: none;
   border-bottom: none;
}
/* END - Edit the Top Bar and Menu */


/* START - Edit the tables */

.welcome {
   width: 100%;
   text-align: center;
   background: #1D3468;
   border: none;
   padding: 20px;
}

.producttable {
   padding: 25px;
   width: 100%;
}

/* Table Headers */
.tableheader-blue {
   width: 20%;
   background-color: #172A53;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}
.tableheader-green {
   width: 20%;
   background-color: #1ED01F;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}
.tableheader-red {
   width: 20%;
   background-color: #F01108;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}
.tableheader-black {
   width: 20%;
   background-color: #000000;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}
.tableheader-grey {
   width: 20%;
   background-color: #797C7D;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}

/* Table Columns */
td.tablecolumn-lightgrey {
   background-color: #F2F2F2 !important;
   padding: 30px;
   vertical-align: top;
}
td.tablecolumn-green {
   background-color: #E8F6E9 !important;
   padding: 30px;
   vertical-align: top;
}
td.tablecolumn-red {
   background-color: #FAEBE9!important;
   padding: 30px;
   vertical-align: top;
}
td.tablecolumn-grey {
   background-color: #F3F2F2!important;
   padding: 30px;
   vertical-align: top;
}

/** <pre> Styling **/
pre {
   background-color: #f1f1f1;
   border-left-color: #172a53;
   border-left-style: solid;
   border-left-width: 5px;
   padding: 1em;
   font-size: 100%;
   color: #000;
   margin: 20px 0px;
}

/** style pages **/
.mw-parser-output > h1 {
   border-bottom: 1px solid #000;
}

.mw-parser-output > h2 {
   border-bottom: 1px solid #000;
}

#toc, .toc {
   background: #f1f1f1;
}

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
    margin: 20px 0px;
}

.column-subheading {
    font-weight: 700;
}
/***** END *****/
Retrieved from "https://bdwiki.ezurio.com/index.php?title=MediaWiki:Common.css&oldid=336"