toloframework/gh-pages/css/dom.css

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

:root {
  --thm-color-0:  #F0F0F0;
  --thm-color-1:  #E0E0E0;
  --thm-color-2:  #D0D0D0;
  --thm-color-3:  #FFF;
  --thm-color-P:  #2CA600;
  --thm-color-PL: #36CD00;
  --thm-color-PD: #218000;
  --thm-color-S:  #FFA000;
  --thm-color-SL: #FFD149;
  --thm-color-SD: #C67100;
}

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

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

/*********************/
/* Responsive Design */
@media (max-width: 319px) {
  .dom-hide-if-lt-320 { display: none  }
}

@media (min-width: 320px) {
  .dom-hide-if-gt-320 { display: none  }
}

@media (max-width: 479px) {
  .dom-hide-if-lt-480 { display: none  }
}

@media (min-width: 480px) {
  .dom-hide-if-gt-480 { display: none  }
}

@media (max-width: 639px) {
  .dom-hide-if-lt-640 { display: none  }
}

@media (min-width: 640px) {
  .dom-hide-if-gt-640 { display: none  }
}

@media (max-width: 799px) {
  .dom-hide-if-lt-800 { display: none  }
}

@media (min-width: 800px) {
  .dom-hide-if-gt-800 { display: none  }
}



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

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


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  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;
  margin: .5rem;
  padding: 1rem;
  text-align: justify;
  font-size: 1.2rem;
  font-style: oblique;
}
/* 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: var(--thm-color-0)}
.theme-color-0{color: var(--thm-color-0)}
.theme-color-bg-1{background-color: var(--thm-color-1)}
.theme-color-1{color: var(--thm-color-1)}
.theme-color-bg-2{background-color: var(--thm-color-2)}
.theme-color-2{color: var(--thm-color-2)}
.theme-color-bg-3{background-color: var(--thm-color-3)}
.theme-color-3{color: var(--thm-color-3)}
.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}

/****************************/
/** Material Design Themes **/
/****************************/

h1, h2, h3 { font-weight: bold }

h1 { font-size: 120%; }
h2 { font-size: 110%; }
h3 { font-size: 100%; }

/* Background color for Background. */
.thm-bg0 {
  background-color: var(--thm-color-0);
}
.thm-fg0 {
  color: var(--thm-color-0);
}
html.thm-dark .thm-bg0 {
  background-color: #303030;
}

/* Background color for App bar. */
.thm-bg1 { background-color: var(--thm-color-1) }
.thm-fg1 { color: var(--thm-color-1) }
html.thm-dark .thm-bg1 {
  background-color: #212121;
}

/* Background color for Status bar. */
.thm-bg2 { background-color: var(--thm-color-2) }
.thm-fg2 { color: var(--thm-color-2) }
html.thm-dark .thm-bg2 {
  background-color: #000;
}

/* Background color for Cards/Dialogs. */
.thm-bg3 { background-color: var(--thm-color-3) }
.thm-fg3 { color: var(--thm-color-3) }
html.thm-dark .thm-bg3 {
  background-color: #424242;
}

/* SVG */
svg .stroke0 { stroke: #000 }
svg .fill0 { fill: #000 }
svg .stroke1 { stroke: #fff }
svg .fill1 { fill: #fff }

html.thm-dark svg .stroke0 { stroke: #fff }
html.thm-dark svg .fill0 { fill: #fff }
html.thm-dark svg .stroke1 { stroke: #000 }
html.thm-dark svg .fill1 { fill: #000 }


/* Primary color. */
.thm-bgP {
  background-color: var(--thm-color-P);
  color: #fff;
}
.thm-bgP > div {
  color: #fff;
}
.thm-fgP { color: var(--thm-color-P) }

.thm-bgPL {
  background-color: var(--thm-color-PL);
  color: #000;
}
.thm-bgPL > div {
  color: #000;
}
.thm-fgPL { color: var(--thm-color-PL) }

.thm-bgPD {
  background-color: var(--thm-color-PD);
  color: #fff;
}
.thm-bgPD > div {
  color: #fff;
}
.thm-fgP { color: var(--thm-color-PD) }

.thm-bgP svg .stroke0, .thm-bgPD svg .stroke0
{ stroke: #fff }
.thm-bgP svg .fill0, .thm-bgPD svg .fill0
{ fill: #fff }
.thm-bgP svg .stroke1, .thm-bgPD svg .stroke1
{ stroke: #000 }
.thm-bgP svg .fill1, .thm-bgPD svg .fill1
{ fill: #000 }

.thm-bgPL svg .stroke0,
.thm-bg0 svg .stroke0, .thm-bg1 svg .stroke0, .thm-bg2 svg .stroke0, .thm-bg3 svg .stroke0,
.thm-bgS svg .stroke0, .thm-bgSL svg .stroke0, .thm-bgSD svg .stroke0
{ stroke: #000 }
.thm-bgPL svg .fill0,
.thm-bg0 svg .fill0, .thm-bg1 svg .fill0, .thm-bg2 svg .fill0, .thm-bg3 svg .fill0,
.thm-bgS svg .fill0, .thm-bgSL svg .fill0, .thm-bgSD svg .fill0
{ fill: #000 }
.thm-bgPL svg .stroke1,
.thm-bg0 svg .stroke1, .thm-bg1 svg .stroke1, .thm-bg2 svg .stroke1, .thm-bg3 svg .stroke1,
.thm-bgS svg .stroke1, .thm-bgSL svg .stroke1, .thm-bgSD svg .stroke1
{ stroke: #fff }
.thm-bgPL svg .fill1,
.thm-bg0 svg .fill1, .thm-bg1 svg .fill1, .thm-bg2 svg .fill1, .thm-bg3 svg .fill1,
.thm-bgS svg .fill1, .thm-bgSL svg .fill1, .thm-bgSD svg .fill1
{ fill: #fff }

.thm-bgP > svg .stroke0, .thm-bgPD > svg .stroke0
{ stroke: #fff }
.thm-bgP > svg .fill0, .thm-bgPD > svg .fill0
{ fill: #fff }
.thm-bgP > svg .stroke1, .thm-bgPD > svg .stroke1
{ stroke: #000 }
.thm-bgP > svg .fill1, .thm-bgPD > svg .fill1
{ fill: #000 }

.thm-bgPL > svg .stroke0,
.thm-bg0 > svg .stroke0, .thm-bg1 > svg .stroke0, .thm-bg2 > svg .stroke0, .thm-bg3 > svg .stroke0,
.thm-bgS > svg .stroke0, .thm-bgSL > svg .stroke0, .thm-bgSD > svg .stroke0
{ stroke: #000 }
.thm-bgPL > svg .fill0,
.thm-bg0 > svg .fill0, .thm-bg1 > svg .fill0, .thm-bg2 > svg .fill0, .thm-bg3 > svg .fill0,
.thm-bgS > svg .fill0, .thm-bgSL > svg .fill0, .thm-bgSD > svg .fill0
{ fill: #000 }
.thm-bgPL > svg .stroke1,
.thm-bg0 > svg .stroke1, .thm-bg1 > svg .stroke1, .thm-bg2 > svg .stroke1, .thm-bg3 > svg .stroke1,
.thm-bgS > svg .stroke1, .thm-bgSL > svg .stroke1, .thm-bgSD > svg .stroke1
{ stroke: #fff }
.thm-bgPL > svg .fill1,
.thm-bg0 > svg .fill1, .thm-bg1 > svg .fill1, .thm-bg2 > svg .fill1, .thm-bg3 > svg .fill1,
.thm-bgS > svg .fill1, .thm-bgSL > svg .fill1, .thm-bgSD > svg .fill1
{ fill: #fff }


/* Secondary */
.thm-bgS {
  background-color: var(--thm-color-S);
  color: #000;
}
.thm-fgS { color: var(--thm-color-S) }

.thm-bgSL {
  background-color: var(--thm-color-SL);
  color: #000;
}
.thm-fgSL { color: var(--thm-color-SL) }

.thm-bgSD {
  background-color: var(--thm-color-SD);
  color: #fff;
}
.thm-fgSD { color: var(--thm-color-SD) }

.thm-bgSD svg .stroke0 { stroke: #fff }
.thm-bgSD svg .fill0 { fill: #fff }
.thm-bgSD svg .stroke1 { stroke: #000 }
.thm-bgSD svg .fill1 { fill: #000 }

/* SVG fill and stroke */
.thm-svg-fill-P { fill: var(--thm-color-P) }
.thm-svg-stroke-P { stroke: var(--thm-color-P) }
.thm-svg-fill-PL { fill: var(--thm-color-PL) }
.thm-svg-stroke-PL { stroke: var(--thm-color-PL) }
.thm-svg-fill-PD { fill: var(--thm-color-PD) }
.thm-svg-stroke-PD { stroke: var(--thm-color-PD) }
.thm-svg-fill-S { fill: var(--thm-color-S) }
.thm-svg-stroke-S { stroke: var(--thm-color-S) }
.thm-svg-fill-SL { fill: var(--thm-color-SL) }
.thm-svg-stroke-SL { stroke: var(--thm-color-SL) }
.thm-svg-fill-SD { fill: var(--thm-color-SD) }
.thm-svg-stroke-SD { stroke: var(--thm-color-SD) }


/* Toolbar size */
.thm-sz-toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 56px;
}

/* Elevation */
.thm-ele0 { z-index: 0; box-shadow: none }
/* Switch */
.thm-ele1 { z-index: 1; box-shadow: 0 0px 1px rgba(0,0,0,.4) }
/* Card (resting), Raised button (resting), Quick entry / Search bar (resting) */
.thm-ele2 { z-index: 2; box-shadow: 0 1px 2px rgba(0,0,0,.4) }
/* Refresh indicator, Quick entry / Search bar (scrolled state) */
.thm-ele3 { z-index: 3; box-shadow: 0 1px 3px rgba(0,0,0,.4) }
/* App bar */
.thm-ele4 { z-index: 4; box-shadow: 0 2px 4px rgba(0,0,0,.4) }
/* Floating action button (FAB - resting) */
.thm-ele6 { z-index: 6; box-shadow: 0 3px 6px rgba(0,0,0,.4) }
/* Bottom navigation bar, Menu, Card (when picked up), Raised button (pressed state) */
.thm-ele8 { z-index: 8; box-shadow: 0 4px 8px rgba(0,0,0,.4) }
/* Sub menus */
.thm-ele9 { z-index: 9; box-shadow: 0 4px 9px rgba(0,0,0,.4) }
.thm-ele10 { z-index: 10; box-shadow: 0 5px 10px rgba(0,0,0,.4) }
.thm-ele11 { z-index: 11; box-shadow: 0 5px 11px rgba(0,0,0,.4) }
/* Floating action button (FAB - pressed) */
.thm-ele12 { z-index: 12; box-shadow: 0 6px 12px rgba(0,0,0,.4) }
/* Nav drawer, Right drawer, Modal bottom sheet */
.thm-ele16 { z-index: 16; box-shadow: 0 8px 16px rgba(0,0,0,.4) }
/* Dialog, Picker */
.thm-ele24 { z-index: 24; box-shadow: 0 12px 24px rgba(0,0,0,.4) }




/* Flex */
.flex-grow0 { flex-grow: 0 }
.flex-grow1 { flex-grow: 1 }
.flex-grow2 { flex-grow: 2 }
.flex-grow3 { flex-grow: 3 }
.flex-grow4 { flex-grow: 4 }
.flex-grow5 { flex-grow: 5 }
.flex-grow6 { flex-grow: 6 }
.flex-grow7 { flex-grow: 7 }
.flex-grow8 { flex-grow: 8 }
.flex-grow9 { flex-grow: 9 }
.flex-shrink0 { flex-shrink: 0 }
.flex-shrink1 { flex-shrink: 1 }
.flex-shrink2 { flex-shrink: 2 }
.flex-shrink3 { flex-shrink: 3 }
.flex-shrink4 { flex-shrink: 4 }
.flex-shrink5 { flex-shrink: 5 }
.flex-shrink6 { flex-shrink: 6 }
.flex-shrink7 { flex-shrink: 7 }
.flex-shrink8 { flex-shrink: 8 }
.flex-shrink9 { flex-shrink: 9 }