toloframework/src/com/page/page.com.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;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Josefin Sans;
    font-size: 19px;
    background: #cfd8dc;
}

section, nav {
    padding: 1rem;
    margin: 1rem;
    display: inline-block;
    vertical-align: top;
    max-width: 1000px;
}

span, strong, b, em, i, code {
    display: inline;
    margin: 0;
    padding: 0;
}

body.theme-webgl .theme-label {
    color: rgba(0,0,0,.8);
    font-family: sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant: small-caps;
    line-height: 1rem;
    font-size: .8rem;
    padding: 0 .5rem;
    margin: 0;
    text-align: left;
    vertical-align: middle;
}

body.theme-webgl .theme-info {
    color: #000;
    background: #fff;
    margin: .5rem;
    padding: 1rem;
    text-align: justify;
    box-shadow: 0 0 1px rgba(0,0,0,.4);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* main */
body.theme-webgl .theme-color-bg-0{background-color: #EEFFFF}
body.theme-webgl .theme-color-0{color: #EEFFFF}
body.theme-webgl .theme-color-bg-1{background-color: #DDF5F8}
body.theme-webgl .theme-color-1{color: #DDF5F8}
body.theme-webgl .theme-color-bg-2{background-color: #CCEBF1}
body.theme-webgl .theme-color-2{color: #CCEBF1}
body.theme-webgl .theme-color-bg-3{background-color: #BBE0EB}
body.theme-webgl .theme-color-3{color: #BBE0EB}
body.theme-webgl .theme-color-bg-4{background-color: #AAD6E4}
body.theme-webgl .theme-color-4{color: #AAD6E4}
body.theme-webgl .theme-color-bg-5{background-color: #99ccdd}
body.theme-webgl .theme-color-5{color: #99ccdd}
body.theme-webgl .theme-color-bg-6{background-color: #7AB8CC}
body.theme-webgl .theme-color-6{color: #7AB8CC}
body.theme-webgl .theme-color-bg-7{background-color: #5CA3BB}
body.theme-webgl .theme-color-7{color: #5CA3BB}
body.theme-webgl .theme-color-bg-8{background-color: #3D8FAA}
body.theme-webgl .theme-color-8{color: #3D8FAA}
body.theme-webgl .theme-color-bg-9{background-color: #1F7A99}
body.theme-webgl .theme-color-9{color: #1F7A99}
body.theme-webgl .theme-color-bg-10{background-color: #006688}
body.theme-webgl .theme-color-10{color: #006688}
/* accent */
body.theme-webgl .theme-color-bg-A0{background-color: #FFFFCC}
body.theme-webgl .theme-color-A0{color: #FFFFCC}
body.theme-webgl .theme-color-bg-A1{background-color: #FFE7A3}
body.theme-webgl .theme-color-A1{color: #FFE7A3}
body.theme-webgl .theme-color-bg-A2{background-color: #FFCF7A}
body.theme-webgl .theme-color-A2{color: #FFCF7A}
body.theme-webgl .theme-color-bg-A3{background-color: #FFB852}
body.theme-webgl .theme-color-A3{color: #FFB852}
body.theme-webgl .theme-color-bg-A4{background-color: #FFA029}
body.theme-webgl .theme-color-A4{color: #FFA029}
body.theme-webgl .theme-color-bg-A5{background-color: #ff8800}
body.theme-webgl .theme-color-A5{color: #ff8800}
body.theme-webgl .theme-color-bg-A6{background-color: #F07C00}
body.theme-webgl .theme-color-A6{color: #F07C00}
body.theme-webgl .theme-color-bg-A7{background-color: #E16F00}
body.theme-webgl .theme-color-A7{color: #E16F00}
body.theme-webgl .theme-color-bg-A8{background-color: #D16300}
body.theme-webgl .theme-color-A8{color: #D16300}
body.theme-webgl .theme-color-bg-A9{background-color: #C25600}
body.theme-webgl .theme-color-A9{color: #C25600}
body.theme-webgl .theme-color-bg-A10{background-color: #B34A00}
body.theme-webgl .theme-color-A10{color: #B34A00}
/* back */
body.theme-webgl .theme-color-bg-B0{background-color: #FFFFFF}
body.theme-webgl .theme-color-B0{color: #FFFFFF}
body.theme-webgl .theme-color-bg-B1{background-color: #F5F7F8}
body.theme-webgl .theme-color-B1{color: #F5F7F8}
body.theme-webgl .theme-color-bg-B2{background-color: #ECEFF1}
body.theme-webgl .theme-color-B2{color: #ECEFF1}
body.theme-webgl .theme-color-bg-B3{background-color: #E2E8EA}
body.theme-webgl .theme-color-B3{color: #E2E8EA}
body.theme-webgl .theme-color-bg-B4{background-color: #D9E0E3}
body.theme-webgl .theme-color-B4{color: #D9E0E3}
body.theme-webgl .theme-color-bg-B5{background-color: #cfd8dc}
body.theme-webgl .theme-color-B5{color: #cfd8dc}
body.theme-webgl .theme-color-bg-B6{background-color: #BECACF}
body.theme-webgl .theme-color-B6{color: #BECACF}
body.theme-webgl .theme-color-bg-B7{background-color: #ACBBC2}
body.theme-webgl .theme-color-B7{color: #ACBBC2}
body.theme-webgl .theme-color-bg-B8{background-color: #9BADB6}
body.theme-webgl .theme-color-B8{color: #9BADB6}
body.theme-webgl .theme-color-bg-B9{background-color: #899EA9}
body.theme-webgl .theme-color-B9{color: #899EA9}
body.theme-webgl .theme-color-bg-B10{background-color: #78909C}
body.theme-webgl .theme-color-B10{color: #78909C}