MediaWiki

Difference between revisions of "Common.css"

From Boundary Devices Wiki

Line 16: Line 16:
 
     background: #fff;
 
     background: #fff;
 
}
 
}
@media screen and (max-width: 480px) {
+
@media (min-width: 576px) {
 
     .top-bar-logo {
 
     .top-bar-logo {
 
         margin: 0px 0px 0px 10px;
 
         margin: 0px 0px 0px 10px;

Revision as of 02:41, 2 May 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;
}


/*****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: #ededed;
    padding: 0px 0px 10px 0px;
}

/*****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;
}



/***** END *****/