Example CSS including properties

your_style.css

/*
 * ===============================================
 * This is the same as your_style.css but is used
 * with skype/index.jsp (hence the name).
 * ===============================================
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 * 
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */

/* This prevents a small UI "blip" when hovering over the far right sparks */
#sparks {
	padding-right: 45px;
}

/* ====================================== 
    Skype Palette and Styles
   ====================================== */
:root {
    --skype-blue: #1560b7;
    
    --skype-link: #235ecd;
    
    --skype-pink: #b3577a;
    --skype-teal: #00877d;
    --skype-gray: #535353;
    --skype-purple: #613d7c;
    --skype-orange: #f27a1a;
    --skype-blue-sec: #2476d4;
    --skype-pale-green: #b2dab7;

    --skype-gray-100: #f8f9fa;
    --skype-gray-200: #e9ecef;
    --skype-gray-300: #dee2e6;
    --skype-gray-400: #ced4da;
    --skype-gray-500: #adb5bd;
    --skype-gray-600: #868e96;
    --skype-gray-700: #495057;
    --skype-gray-800: #373a3c;
    --skype-gray-900: #212529;
}

html {
    font-size: 16px;
}

body {
    color: var(--skype-gray-900);
}

a {
    color: var(--skype-link);
    text-decoration: underline;
}

p, li {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
}

/* This just resets smartadmin definition; see later for background color */
aside {
    background: #FFF;
}

h1, h1.page-title, .txt-color-blueDark {
    color: var(--skype-blue) !important; 
    font-size: 1.25rem;
    font-weight: 700;
}

h2 {
    margin: 5px 0; /* This is a smartadmin override */
    font-size: 1.25rem;
    font-weight: 700;
}

h3 {
    font-size: 1.125rem;
    font-weight: 500;
}

h4 {
    font-size: 1rem;
    font-weight: 700;
}

h5 {
    font-size: 1rem;
    font-weight: 600;
}

h6 {
    font-size: 1rem;
    font-weight: 500;
}

.lead {
    font-size: 19px; /* TODO update with skype standard */
}

#header {
    background-image: none;
    background-color: #ffffff;
}

#ribbon {
    display: none;
}

.page-title span {
    color: var(--skype-blue);
    font-size: 1.25rem;
    vertical-align: 0px;
}

#ribbon {
    background-color: #d1dff3; /*$skype-blue-light: #d1dff3*/
}

#ribbon .breadcrumb, #ribbon .breadcrumb a {
    color: #212529 !important; /*$gray-900*/
}

#ribbon .breadcrumb li:last-child, #ribbon .breadcrumb>.active {
    color: #212529; /*$gray-900*/
}

.breadcrumb>li+li:before {
    color: #212529; /*$gray-900*/
}

/* Simulate bootstrap 4.0+ class */
.d-none {
    display: none;
}

/* Set color of menu links */
nav ul li a {
    color: #ffffff; /*$white*/
/*  color: #d1dff3; /*$skype-blue-light: #d1dff3*/
}

nav ul ul li a {
    color: #ffffff; /*$white*/
}

nav ul ul ul li a {
    color: #ffffff; /*$white*/
}

/* menu "badge" */
nav>ul>li>a>i>em {
    background: #920000; /*$red: #920000*/
}

.login-info {
    border-bottom: 1px solid #1560b7; /*$skype-blue: #1560b7*/
}

.login-info>span {
    border-bottom: 1px solid #1560b7; /*$skype-blue: #1560b7*/
}

/* ==================================
        Jarvis Widget - overrides
   =================================== */

.jarviswidget>header {
    color: #ffffff; /*$white*/
    background-color: var(--skype-blue);
    border: 1px solid #C2C2C2;
}

.jarviswidget>header h2 {
    font-size: 1.25rem;
    line-height: 32px; /* needs to be the same as .jarviswidget>header>.widget-icon */
}

.jarviswidget-ctrls a {
    color: #ffffff; /*$white*/
}

.jarviswidget>div {
    font-size: 1rem;
}

/* ==================================
        Menu - overrides
   =================================== */
/* === selected menu item ===
Very important that selector with 'li' is 
defined so that it is more specific than the following
selector that only includes '.active'
*/
nav ul li.open.active>a {
    background-color: #1560b7; /*$skype-blue: #1560b7*/
}

nav ul .active>a {
    background-color: #0c4587; /*$skype-blue-dark: #0c4587*/
}

.skype-purple-color {
    color: var(--skype-purple);
}

.skype-purple-border {
    border-color: var(--skype-purple);
}

.skype-purple-background {
    background-color: color-mix(in oklab, var(--skype-purple) 10%, white);
}

.skype-pink-color {
    color: var(--skype-pink);
}

.skype-pink-border {
    border-color: var(--skype-pink);
}

.skype-pink-background {
    background-color: color-mix(in oklab, var(--skype-pink) 10%, white);
}

.skype-orange-color {
    color: var(--skype-orange);
}

.skype-orange-border {
    /* gray is not a mistake... orange does not meet accessibility contract ratio */
    border-color: var(--skype-gray-600);
}

.skype-orange-background {
    background-color: color-mix(in oklab, var(--skype-orange) 10%, white);
}

.skype-teal-color {
    color: var(--skype-teal);
}

.skype-teal-border {
    border-color: var(--skype-teal);
}

.skype-teal-background {
    background-color: color-mix(in oklab, var(--skype-teal) 10%, white);
}

.skype-blue-sec-color {
    color: var(--skype-blue-sec);
}

.skype-blue-sec-border {
    border-color: var(--skype-blue-sec);
}

.skype-blue-sec-background {
    background-color: color-mix(in oklab, var(--skype-blue-sec) 10%, white);
}

.skype-gray-100-color {
    color: var(--skype-gray-100);
}

.skype-gray-100-border {
    border-color: var(--skype-gray-800);
}

.skype-gray-100-background {
    background-color: var(--skype-gray-100);
}

.skype-gray-200-color {
    color: var(--skype-gray-200);
}

.skype-gray-200-border {
    border-color: var(--skype-gray-800);
}

.skype-gray-200-background {
    background-color: var(--skype-gray-200);
}

.skype-gray-color {
    color: var(--skype-gray-800);
}

.skype-gray-border {
    border-color: var(--skype-gray-800);
}

.skype-gray-background {
    background-color: color-mix(in oklab, var(--skype-gray-800) 10%, white);
}

.txt-color-primary {
    color: #212529; /*$gray-900*/
}

.txt-color-primary-light {
    color: #ffffff; /*$white*/
}

.txt-color-skype-blue {
    color: #1560b7; /*$skype-blue: #1560b7*/
}

.txt-color-skype-blue-secondary {
    color: #014575; /*$indigo*/
}

.txt-color-success {
    color: #227207; /*$green: #227207*/
}

.txt-color-error {
    color: #920000; /*$red: #920000*/
}

/* ===== Remaining skype colors (used for icons) ===== */

.color-skype-blue-dark {
    color: #0c4587; /*$skype-blue-dark: #0c4587*/
}

.color-skype-indigo-dark {
    color: #013155; /*$indigo-dark: #013155*/
}

.color-skype-green-dark {
    color: #114402; /*$green-dark: #114402*/
}

.color-skype-yellow-dark {
    color: #bc8c17; /*$yellow-dark: #bc8c17*/
}

.color-skype-red-dark {
    color: #6b0000; /*$red-dark: #6b0000*/
}

/* There is a smartadmin rule that uses bg* so sometimes 
    use of bg-color-white causes issues so then use white-bg.
*/
.bg-color-white, .white-bg {
    background-color: #ffffff; /*$white: #ffffff*/
}

.bg-color-light {
    background-color: #f8f9fa; /*$gray-100: #f8f9fa*/
}

.bg-color-light-blue {
    background-color: #d1dff3; /*$skype-blue-light: #d1dff3*/
}

.bg-color-dark {
    background-color: #dee2e6; /*$gray-300: #dee2e6*/
}

.green-bg, .success-bg {
    background-color: #227207; /*$green: #227207*/
}

.green-light-bg {
    background-color: #e9f1e7; /*$green-light: #e9f1e7*/
}

.green-dark-bg {
    background-color: #114402; /*$green-dark: #114402*/
}

.red-bg, .error-bg {
    background-color: #920000; /*$red: #920000*/
}

.red-light-bg {
    background-color: #f7e8e5; /*$red-light: #f7e8e5*/
}

.red-dark-bg {
    background-color: #6b0000; /*$red-dark: #6b0000*/
}

/* Notice that I have experimented with switching the yellow and yellow light */
.yellow-bg {
    background-color: #f9e79f; /*$yellow-light: #f9e79f*/
}

.yellow-light-bg {
    background-color: #efe1b3; /*$yellow: #ffcf03*/
}	

.yellow-dark-bg, .warning-bg {
    background-color: #bc8c17; /*$yellow-dark: #bc8c17*/
}

.info-bg, aside, nav ul ul {
    background-color: var(--skype-blue);
}

.indigo-bg {
    background-color: #014575; /*$indigo: #014575*/
}

.indigo-light-bg {
    background-color: #e5ebf1; /*$indigo-light: #e5ebf1*/
}

.indigo-dark-bg {
    background-color: #013155; /*$indigo-dark: #013155*/
}

.cyan-bg {
    background-color: #86c5f4; /*$cyan: #86c5f4*/
}

.cyan-light-bg {
    background-color: #e7f4fd; /*$cyan-light: #e7f4fd*/
}

.skype-blue-light-bg {
    background-color: #d1dff3; /*$skype-blue-light: #d1dff3*/
}

.skype-blue-dark-bg {
    background-color: #0c4587; /*$skype-blue-dark: #0c4587*/
}

.gray-900-color {
    color: #212529; /*$gray-900: #212529*/
}

.gray-800-color {
    color: #373a3c; /*$gray-800: #373a3c*/
}

.gray-700-color {
    color: #495057; /*$gray-700: #495057*/
}

.gray-600-color {
    color: #868e96; /*$gray-600: #868e96*/
}

.gray-500-color {
    color: #adb5bd; /*$gray-500: #adb5bd*/
}

.gray-400-color {
    color: #ced4da; /*$gray-400: #ced4da*/
}

.gray-300-color {
    color: #dee2e6; /*$gray-300: #dee2e6*/
}

.gray-200-color {
    color: #e9ecef; /*$gray-200: #e9ecef*/
}

.gray-100-color {
    color: #f8f9fa; /*$gray-100: #f8f9fa*/
}

.gray-900-bg {
    background-color: #212529; /*$gray-900: #212529*/
}

.gray-800-bg {
    background-color: #373a3c; /*$gray-800: #373a3c*/
}

.gray-700-bg {
    background-color: #495057; /*$gray-700: #495057*/
}

.gray-600-bg {
    background-color: #868e96; /*$gray-600: #868e96*/
}

.gray-500-bg {
    background-color: #adb5bd; /*$gray-500: #adb5bd*/
}

.gray-400-bg {
    background-color: #ced4da; /*$gray-400: #ced4da*/
}

.gray-300-bg {
    background-color: #dee2e6; /*$gray-300: #dee2e6*/
}

.gray-200-bg {
    background-color: #e9ecef; /*$gray-200: #e9ecef*/
}

.gray-100-bg {
    background-color: #f8f9fa; /*$gray-100: #f8f9fa*/
}

.purple-bg {
    background-color: #613d7c; /*$purple: #613d7c*/
}

.pink-bg {
    background-color: #b3577a; /*$pink: #b3577a*/
}

.orange-bg {
    background-color: #f27a1a; /*$orange: #f27a1a*/
}

.teal-bg {
    background-color: #00877d; /*$teal: #00877d*/
}

.gray-bg {
    background-color: #535353; /*$gray: #535353*/
}

.blue-bg {
    background-color: #2476d4; /*$blue: #2476d4*/
}

.pale-green-bg {
    background-color: #b2dab7; /*$pale-green: #b2dab7*/
}

/*
## skype Blue / Components
$skype-blue: #1560b7
$skype-blue-light: #d1dff3
$skype-blue-dark: #0c4587

## Information/Help
$indigo: #014575
$indigo-light: #e5ebf1
$indigo-dark: #013155

## Success/Complete
$green: #227207
$green-light: #e9f1e7
$green-dark: #114402

## Warning/Error
$red: #920000
$red-light: #f7e8e5
$red-dark: #6b0000

## Caution/In-Progress
* $yellow cannot be used for an icon on any skype background because it does not meet contrast ratios.  Use $BLyellow instead.
$yellow: #ffcf03
$yellow-light: #f9e79f
$yellow-dark: #bc8c17

* $cyan cannot be used for an icon on any skype background because it does not meet contrast ratios.  Use other skype blues instead.
$cyan: #86c5f4
$cyan-light: #e7f4fd
$indigo-dark: #013155

## Secondary Palette 
$purple: #613d7c
$pink: #b3577a
$orange:#f27a1a
$teal: #00877d
$gray: #535353
$blue: #2476d4
$pale-green: #b2dab7

* The text overlay on teal must be bold to meet accessibility contrast ratios 
** Orange and pale green cannot be used as an icon on any skype background because they do not meet contrast ratios.
*** Orange and pale green need a dark border if used as a background on a container 

## Neutral Palette 
$gray-100: #f8f9fa
$gray-200: #e9ecef
$gray-300: #dee2e6
$gray-400: #ced4da
$gray-500: #adb5bd
$gray-600: #868e96
$gray-700: #495057
$gray-800: #373a3c
$gray-900: #212529

## Links
$link-blue: #235ecd

*/