sadira/www/css/db.css

Web framework

@font-face{
    font-family:'Ubuntu'; 
    font-style:normal; 
    font-weight:300; 
    src:url('img/ubuntu-L-webfont.eot'); 
    src:local('Ubuntu Light'),local('Ubuntu-Light'),
      url('../fonts/ubuntu/ubuntu-L-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ubuntu/ubuntu-L-webfont.woff') format('woff'),
      url('../fonts/ubuntu/ubuntu-L-webfont.ttf') format('truetype'),
      url('../fonts/ubuntu/ubuntu-L-webfont.svg#UbuntuLight') format('svg');
}

*{ 
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.value{
/*  font-size: 1.0em;  */
  /*padding: .5em;*/
/*  margin-left: .5em; */
  vertical-align: middle;
}

.db  { 
  margin: 0px;
/*  padding: .5em;*/
  font-family : sans-serif;
/*  font-size: medium;*/
  font-family: Ubuntu;

  display: block; 
  border : 2px solid rgba(0,0,0,0.0);  
  border-radius: .3em;
/*  vertical-align: top;*/

  max-width: calc(100% - 10px);

} 

.dbitem{

}

.db  h1 {
  display: inline-block;
/*  font-weight: medium;*/
  font-size: 1em; 
}

.db ul{
  padding : 0px;
  margin: 0px;
}

.db .disabled { 
  display: none;
} 

.root{
  display: inline-block;
  font-weight: normal;
}


.db input{
  border: none; 
 /* line-height: 2em; */
  padding: .3em;
  border-radius: .5em;
 /* background-color: rgba(30,30,30,.3);
  color: white; 
  margin: .1em;
  padding-top:.5em;
  padding-bottom:.5em;
*/
  display: inline-block;
text-align: center;
  vertical-align: middle;
}

.db input[type="number"]{
  max-width: 6em;
}


.db input[type="checkbox"]{
 /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  padding: 10px;

}

.db .color_container{
/*  float: left;*/
  border: 1px solid rgba(200,200,200,0.7);*/
}

.db .color_container > input[type="color"]{
  opacity: 0;
  display: block;
  padding: 0px;
  margin: 0px;
  width: 1.5em;
  height: 1.0em;
}
/*
  -ms-transform: scale(1.5); 
  -moz-transform: scale(1.5); 
  -webkit-transform: scale(1.5); 
  -o-transform: scale(1.5); 
*/

.db input[type="file"]{
  background: none;
}
.db input[type="button"], .db input[type="file"]{
  background: #104020;
  color: white;
  margin: 0px;
  padding: 0px;
  padding: .2em;
/*  background: linear-gradient(to bottom, rgba(120,30,130,.7), rgba(80,5,90,0.5) ); */
  border-radius: .3em;
/*  color: white; */
 /* text-shadow : 0px 0px 2px rgba(250,250,250,.8); */
  cursor: pointer;
}
.db input[type="button"]:hover{
  background: orange; 
  text-shadow : 0px 0px 2px rgba(0,0,0,1); 
/*  linear-gradient(to bottom, rgba(190,40,200,.7), rgba(80,5,90,0.5) ); */
}

.newline {
  display: block; 
}

.db .newline > h1{
  display: inline-block; 
}

.newline > .dbitem{
  display: inline-block;
  
}



.dbitem{
  display: inline-block;
/*  margin-left : .5em;
  line-height: 2em; */
  
  text-align : left;

}

.dbitem > .db{
  display: inline-block;
}

.dbname { 
  display : inline-block; 
/*  padding: .3em; */
}

.db span.dbitem{
  background: #222;
  padding: .3em;
  border-radius: .5em;
}
/*
.zoom:before {

content : "Zoom In";
}

.unzoom:before {

content : "Zoom Out";
}
*/

.db .full{
  overflow: hidden;
/*  width: calc(100% - .2em); */
}

.db .html_content {
  text-align: left;
  padding : 1em;
  display: block;
}

.db .childs .inline .db { 
 display : inline-block;
}

.db .childs .inline .newline{ 
 display : block;
}

.db > .childs .dbname{ 
/*  vertical-align: top;*/

}

.db .inline { 
  display: inline-block;
  vertical-align: top;
}

.db .inline > .childs .db{ 
/*  display: inline-block; */
}


.db > .childs .db{ 
/*display: inline-block;*/
                      }

.db > .childs { 
/*  background-color: rgba(200,200,255,0.8);*/
} 

.db > .childs .newline { 
  display : block;
}

.db > ul{
  list-style-type: none;
}

.db > ul > li{
  display: inline-block;
  background: #333;
  border-radius: .5em;
  padding: .3em;
/*  margin-right: .5em; */
}


.db label{
  font-size: 1.1em;
/*  padding-left: .4em; */
}

.db label>input{
/*  margin-left: .5em; */
}

.db > .childs .dbname { 
  margin: 0px;
}
/*
.db .db > .childs .dbname { 
  margin-left: .2em;
  margin-right: .2em;
  padding: .2em;

}
*/
.childs{
  display: inline-block;
  max-width: calc(100% - .5em);
}

.db .db {
  font-size : 98%;
/*  margin-top: 1em; */
}

.dbname {
  vertical-align: middle;
}

h1.section_title{
/*  width: calc( 100% - 1.5em);*/
  text-align: left;
  display: inline-block; 
/*font-size: 1.3em;*/
/*line-height: 2em;*/
  padding-right: .7em;
/*  padding-left: .7em;*/
  padding-top: .2em;
  padding-bottom: .2em;
/*  margin-right: 1em;*/

  color: rgba(40,255,120,1.0);
  text-shadow: 0px 0px 1px white;
  font-weight: bold;
  vertical-align: top;
/* background: rgba(30,30,30,.6);*/
/*  background: linear-gradient(to bottom, rgba(10,10,10,.7), rgba(80,80,80,0.8) );  */
  border-radius: .2em;
}

.slided{
  border-radius: .7em;
  background: linear-gradient(to bottom, rgba(10,10,10,.7), rgba(80,80,80,0.8) ); 
/*  background:  rgba(60,70,50,0.8); */
  /*box-shadow : 0px 0px 2px rgba(255,255,255,1.0);  */
  text-shadow : 0px 0px 5px springgreen;
  font-weight : bold;
  vertical-align: top;

/*  color: rgba(230,20,30,1.0); */
}

.db .dbname{
/*  vertical-align: middle; */
/*  color : rgba(200,255,200,0.0); */
}

.db .dbname .slided {
}



/*
.db .db .dbname{
  color : rgba(25,25,25,1.0);
  font-size: 1em;
}

.db .db .db .dbname{
  color : rgba(20,40,40,1.0);
}

.db .db .db .db .dbname{
  color : rgba(30,30,30,1.0);
}

.db .db .db .db .db .dbname{
  color : rgba(40,40,40,1.0);
}


.column .db  {
  margin: 0px;
  margin-bottom:.3em;
  margin-top:.3em;
  margin-left:.3em;
  margin-right:.3em;
  background-color: rgba(30,30,30,0.5);
}

.column .db .db  {
  background-color: rgba(40,40,40,0.5);

  color: rgba(80,30,18,0.8); 
  
  margin: .5em;
  border : 2px solid rgba(80,8,80,0.7);

}
*/

.db .db .db .db  {
/*  color: rgba(200,130,15,1.0); 
  background-color: rgba(50,50,50,0.3);
*/
}

.db .db .db .db .db {
/*  color: white;
  background-color: rgba(10,10,10,0.3);
 */
}


.db .editable .dbname:hover{
  text-shadow : 0px 0px 5px rgba(30,80,255,1.0);
}
.db .un_editable .dbname:hover{
  text-shadow : 0px 0px 5px rgba(255,80,55,1.0);
}

.db .editable:hover{
  border : 2px dashed rgba(20,80,200,0.9);
  cursor: pointer;
}

.db .un_editable:hover{
  border : 2px dashed rgba(50,50,50,0.8);
  cursor: pointer;
}


.flat{
  margin: 0px;
  padding: 0px;
  background: rgba(55,55,55,.4);
  display: inline-block;
}

.flat .db{
  background: rgba(5,5,5,.4);
}
.flat .db .db{
  background: rgba(5,5,5,.4);
}

.flat > .dbname {
  display: inline-block;
}
.flat > .childs{
  display  : inline-block;
  background: rgba(5,5,5,.4);
  vertical-align: top;
}

.flat .newline > .dbitem{
  display: inline-block;
}

.flat .db > .childs{
  display  : inline-block;
  background: rgba(5,5,5,.4);
}

.inline{ 
  display: inline-block;
} 



/*.number_fixed_size > .dbitem > li > label > .value{ */
.number_fixed_size .value{
  margin-left: 1em; 
  padding: 0px;
  min-width: 3em;
  max-width: 5em;
}

.db > *{

}

nav{  
     }

.db > nav{
  list-style-type: none;
  display : block; 
  margin-top: 1em;
  padding-top: .5em;
  padding-bottom: .5em;
  vertical-align: middle;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 1.2em;
  white-space : nowrap;
  
  /*max-width: calc(100% - 1.5em);*/
  overflow: -moz-scrollbars-none;
  background: linear-gradient(to bottom, rgba(10,10,10,.7), rgba(80,80,80,0.8) );             
}

::-webkit-scrollbar {  
    display: none; 
}

.db > nav > li{
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
}

.db > nav > li .dbname{
  /*font-size: 1.2em;*/
  padding-left : .5em;
  padding-right : .5em;
  padding-top: .3em;                      
  padding-bottom: .3em;                      
}

.nodeco{ 
  margin: 0;
  padding: 0;
  border: 0;
}

.column {
  display: block;
  vertical-align: top;  
}
.column .root{
  margin:0px;
}
.column > .dbname {
  display: inline-block;
  padding-top: 1em;
  padding-bottom: 1em;

}


.column > .childs{
  display  : block;
  vertical-align: top;  
}


.tab_widget{ 
  /*overflow: hidden; */
/*
  border-left: 1px solid rgba(100,255,100,0.9);                                  
  border-right: 1px solid rgba(100,255,100,0.9);                                  
  border-bottom: 1px solid rgba(100,255,100,0.9);                                 
  border-radius : .2em .2em 0em 0em;
*/
  margin-top: .5em;
  padding: 0;
  vertical-align: top;
}

.tab_widget >nav{

  display: block;
/*  max-width:95%;*/
  list-style-type: none;
  overflow-x : auto;
  overflow-y: auto;
  line-height: 1.5em;
  white-space : nowrap; 
/*  border-left : 2px solid rgba(20,25,25,0.8); 
  border-top : 2px solid rgba(20,25,25,0.8); 
  border-radius : 1em 0em 0em 0em;*/
  margin: 0;
}

.tab_section  {
/*  max-width:95%;*/
/*  max-width: calc(100% - 2em); */
  margin-top:0px;
  border : none;  /*2px solid rgba(20,25,35,0.8); */
  border : 2px solid rgba(100,255,100,0.9);                                  
  border-radius : .5em .5em .2em .2em;
}

.tab_section > div > div > div {
 /* background : rgba(200,250,200,0.2); */
  border-bottom: 2px solid rgba(10,20,20,0.9);                                  
  border-right: 2px solid rgba(10,20,20,0.9);                                  
  margin-top : .3em;
  margin-bottom : .3em;
/*  padding: .2em; */
}
   
.tab_widget> nav > li{
  /*text-shadow : 1px 1px 2px rgba(0,0,0,1.0);*/
  text-align:center;
  display: inline-block;
  /* padding-top: .1em;
  padding-bottom: .1em;
   background: rgba(180,20,244,0.1); */
  margin-right: 0.2em;
  border-radius : .3em .3em 0em 0em;
  cursor: pointer;
}

.tab_widget> nav > li .dbname{
/*  font-size: 1.1em; */
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: .5em;
  padding-right: .5em;

}

.tab_widget> nav > li.selected_tab{
  background: rgba(100,255,100,0.9);
  text-shadow: 0px 0px 2px black;
}

.tab_widget > nav > li:hover{
  background: rgba(200,255,200,0.9);
  text-shadow: 0px 0px 2px blue;
}

.colormap {
  height: 2em;
  min-width: 2em;
  position: relative;
  vertical-align: middle;
}

.colormap_select_div{
  position: absolute;
  pointer-events: none;
  top: 0px;
  height: 3.8em;
  box-shadow : 0px 0px 15px rgba(255,255,255,1.0);
}

.plot_container > svg { 
  display: inline-block;
}

.slide_button_h:hover{ 
  color: rgba(0,0,0,0);
  text-shadow: 0px 0px 3px springgreen;
}

.slide_button_v:hover{ 
  color: rgba(0,0,0,0);
  text-shadow: 0px 0px 3px springgreen;
}

.slide_button_h{ 
  color: rgba(0,0,0,0);
  text-shadow: 0px 0px 3px rgba(55,155,55,1.0);
  padding: .4em;
  cursor: pointer;
}


.slide_button_v{ 
  color: rgba(0,0,0,0);
  text-shadow: 0px 0px 3px rgba(55,155,55,1.0);
  padding: .4em;
  cursor: pointer;
}

.sliding{
  /*display: block;*/

  opacity:1;
  background: none;
  transition: opacity 1.0s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out, margin-top .4s ease-in-out, margin-bottom .4s ease-in-out;
  border-radius: .2em;
}

/*
.sliding .sliding{ 
  background: rgba(10,10,10,.9);
} 
.sliding .sliding .sliding{ 
  background: rgba(20,20,20,.9);
} 
.sliding .sliding .sliding .sliding{ 
  background: rgba(30,30,30,.9);
}

.sliding .sliding .sliding .sliding .sliding{ 
  background: rgba(20,20,20,.9);
}
.sliding .sliding .sliding .sliding .sliding .sliding{ 
  background: rgba(10,10,10,.9);
}

.sliding .sliding .sliding .sliding .sliding .sliding .sliding{ 
  background: rgba(0,0,0,.9);
}

.sliding .sliding .sliding .sliding .sliding .sliding .sliding .sliding{ 
  background: rgba(10,10,10,.9);
}

.sliding .sliding .sliding .sliding .sliding .sliding .sliding .sliding .sliding{ 
  background: rgba(20,20,20,.9);
}
*/


.axis path, .axis line {
    fill: none;
    stroke: white; 
    shape-rendering: crispEdges;
}

.axis text {
/*   color: white; */
font-size: .7em;
font-weight: normal;
stroke: white; 
}

.line {
  fill: rgba(20,250,70,.9);
  stroke: white;
  stroke-width: 1px;
}



.tline {
  stroke: red;
  stroke-width: 2px;
}

.brush rect.extent {
  fill: #afe;
  fill-opacity: .4;
}

.brush .resize path {
  fill: #eee;
  stroke: white;
}

.hscroll {
  white-space: nowrap;
  overflow-x:auto;
/*  width: 50%; */
}
.hscroll_item {
  white-space: normal;
}

.squeeze {
  margin: 0px;
  padding : 0px;
}

.db .squeeze .dbname{
  padding : 0px;
}

.db .squeeze .dbitem {
  margin: 0px;
  padding : 0px;
}


.clickable{
  cursor : pointer;
}
.clickable:hover{
  border : 2px dashed #333;
}