Difference between revisions of "Common.css"

Revision as of 19:40, 29 April 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');


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

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

/* Change color of menu items and search bar background */
.top-bar-section ul li {
    background: #172A53;
}
.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;
}

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