toloframework/ker/mod/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;
    font-family: 'Josefin Sans', sans-serif;
}

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

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

input:placeholder-shown {
    color: rgba(50, 75, 120, .5);
}

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

body {
    font-family: 'Josefin Sans', sans-serif;
    color: #000;
}

hr {
    border: none;
    height: 1px;
    background-image: -webkit-linear-gradient(to right, transparent, rgba(0,0,0,.5) 50%, transparent);
    background-image: linear-gradient(to right, transparent, rgba(0,0,0,.5) 50%, transparent);
}


.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;
}

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

.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-18 {
    box-shadow: 0 9px 18px rgba(0,0,0,.4);
    transform: translateY(-9px);
    z-index: 18;
}

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

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