toloframework/gh-pages/css/dom.css

Javascript/HTML/CSS compiler for Firefox OS or nodewebkit apps using modules in the nodejs style.

*, .dom, .dom * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: .5em;
}

.dom.wide {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.dom.wide-flex {
    display: flex;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.dom.hide {
    display: none;
}

/*****************/
/* Default theme */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-size: 16px;
    font-family: sans-serif;
    background-color: #eee;
}

.label {
    color: #468;
    font-family: sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant: small-caps;
}



/* Elevations: https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android- */

.theme-elevation-0 {
    box-shadow: none;
    z-index: 0;
}

.theme-elevation-1 {
    box-shadow: 0 .5px 1px rgba(0,0,0,.4);
    transform: translateY(-.5px);
    z-index: 1;
}

.theme-elevation-2 {
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
    transform: translateY(-1px);
    z-index: 2;
}

.theme-elevation-3 {
    box-shadow: 0 1.5px 3px rgba(0,0,0,.4);
    transform: translateY(-1.5px);
    z-index: 3;
}

.theme-elevation-4 {
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
    transform: translateY(-2px);
    z-index: 4;
}

.theme-elevation-6 {
    box-shadow: 0 3px 6px rgba(0,0,0,.4);
    transform: translateY(-3px);
    z-index: 6;
}

.theme-elevation-8 {
    box-shadow: 0 4px 8px rgba(0,0,0,.4);
    transform: translateY(-4px);
    z-index: 8;
}

.theme-elevation-9 {
    box-shadow: 0 4.5px 9px rgba(0,0,0,.4);
    transform: translateY(-4.5px);
    z-index: 9;
}

.theme-elevation-12 {
    box-shadow: 0 6px 12px rgba(0,0,0,.4);
    transform: translateY(-6px);
    z-index: 12;
}

.theme-elevation-16 {
    box-shadow: 0 8px 16px rgba(0,0,0,.4);
    transform: translateY(-8px);
    z-index: 16;
}

.theme-elevation-24 {
    box-shadow: 0 12px 24px rgba(0,0,0,.4);
    transform: translateY(-12px);
    z-index: 24;
}

.theme-color-bg-0{background-color: #fff}
.theme-color-bg-1{background-color: #EBF5F8}
.theme-color-bg-2{background-color: #D6EBF1}
.theme-color-bg-3{background-color: #C2E0EB}
.theme-color-bg-4{background-color: #ADD6E4}
.theme-color-bg-5{background-color: #99ccdd}
.theme-color-bg-6{background-color: #7AA3B1}
.theme-color-bg-7{background-color: #5C7A85}
.theme-color-bg-8{background-color: #3D5258}
.theme-color-bg-9{background-color: #1F292C}
.theme-color-bg-10{background-color: #000}

.theme-color-bg-A0{background-color: #fff}
.theme-color-bg-A1{background-color: #FFEBCC}
.theme-color-bg-A2{background-color: #FFD699}
.theme-color-bg-A3{background-color: #FFC266}
.theme-color-bg-A4{background-color: #FFAD33}
.theme-color-bg-A5{background-color: #ff9900}
.theme-color-bg-A6{background-color: #CC7A00}
.theme-color-bg-A7{background-color: #995C00}
.theme-color-bg-A8{background-color: #663D00}
.theme-color-bg-A9{background-color: #331F00}
.theme-color-bg-A10{background-color: #000}

.theme-color-bg-B0{background-color: #fff}
.theme-color-bg-B1{background-color: #F5F5F5}
.theme-color-bg-B2{background-color: #EBEBEB}
.theme-color-bg-B3{background-color: #E0E0E0}
.theme-color-bg-B4{background-color: #D6D6D6}
.theme-color-bg-B5{background-color: #cccccc}
.theme-color-bg-B6{background-color: #A3A3A3}
.theme-color-bg-B7{background-color: #7A7A7A}
.theme-color-bg-B8{background-color: #525252}
.theme-color-bg-B9{background-color: #292929}
.theme-color-bg-B10{background-color: #000}

.theme-color-fg-0{color: #fff}
.theme-color-fg-1{color: #EBF5F8}
.theme-color-fg-2{color: #D6EBF1}
.theme-color-fg-3{color: #C2E0EB}
.theme-color-fg-4{color: #ADD6E4}
.theme-color-fg-5{color: #99ccdd}
.theme-color-fg-6{color: #7AA3B1}
.theme-color-fg-7{color: #5C7A85}
.theme-color-fg-8{color: #3D5258}
.theme-color-fg-9{color: #1F292C}
.theme-color-fg-10{color: #000}

.theme-color-fg-A0{color: #fff}
.theme-color-fg-A1{color: #FFEBCC}
.theme-color-fg-A2{color: #FFD699}
.theme-color-fg-A3{color: #FFC266}
.theme-color-fg-A4{color: #FFAD33}
.theme-color-fg-A5{color: #ff9900}
.theme-color-fg-A6{color: #CC7A00}
.theme-color-fg-A7{color: #995C00}
.theme-color-fg-A8{color: #663D00}
.theme-color-fg-A9{color: #331F00}
.theme-color-fg-A10{color: #000}

.theme-color-fg-B0{color: #fff}
.theme-color-fg-B1{color: #F5F5F5}
.theme-color-fg-B2{color: #EBEBEB}
.theme-color-fg-B3{color: #E0E0E0}
.theme-color-fg-B4{color: #D6D6D6}
.theme-color-fg-B5{color: #cccccc}
.theme-color-fg-B6{color: #A3A3A3}
.theme-color-fg-B7{color: #7A7A7A}
.theme-color-fg-B8{color: #525252}
.theme-color-fg-B9{color: #292929}
.theme-color-fg-B10{color: #000}