fhem-mirror/fhem/www/pgm2/darkstyle.css

@import url("darkCommon.css");

/* Author: Till */
body     { background-color: #444444; background-image:url(../images/default/fhemicon_dark.png); background-repeat:no-repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#logo    { position:absolute; top:10px; left:20px; width:140px; height:150px; }
#menu    { position:absolute; top:170px;left:20px; width:140px; }
#console { width:100%; top:2em; bottom:0px; position:absolute; overflow-y:auto;}
#hdr     { position:absolute; top:10px; left:180px; }
#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
a { color: #CCCCCC; text-decoration: none;}
a:hover { color: #ffffff; }
.wide { width:100%; }

table.block { border:1px solid #ffffff; width: 100%;
              background: #333333; box-shadow:5px 5px 5px #000;}
table.block tr.odd { background: #111111; }
table.block tr.sel { background: red; }
table { border-radius:8px; border-spacing: 0px;
       padding-bottom: 6px; padding-top: 6px; }

table.room { background: #111111; width: 140px; border:1px solid #CCCCCC; box-shadow:5px 5px 5px #000;}
table.room a { color: #CCCCCC; text-decoration: none; }
table.room a:hover { color: #ffffff; }        
table.room tr.sel { background: red; }
th {color:red; text-align: left; padding-left: 10px; font-weight: bold;}
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
input {outline:none; background-color: #111111; 
       border: 1px solid #ffffff; color: #cccccc; padding:5px;
       margin-left: 10px; border-radius:8px; box-shadow: 5px 5px 5px #000000;}
input:focus {border: 1px solid red;}
input:disabled {color: #808080; }
input[type="submit"] { background-color: #353535; border-style:outset; border-width:2px }

textarea {min-width:1000px; background-color: #111111;
          border: 1px solid #ffffff; color: #cccccc;
          padding:5px; margin-left: 10px;
          border-radius:8px; box-shadow: 5px 5px 5px #000000;}

/*
next lines are for commandref and faq
*/
#left  { position:absolute; top:140px; left:60px; width:140px; }
#right { position:absolute; top:20px; left:200px; bottom:20px;
right:10px; }
body>div#left { position:fixed; }
div#block { border:1px solid gray; background: #101010; padding:0.7em; }
div#dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
h2,h3,h4 { color:#EEE; line-height:1.3; margin-top:1.5em; font-family:Verdana; }

a img { border-style:none; }
.col2 { text-align:center; }
tr.column > td {
  padding-top:5px; padding-right:5px; padding-left:8px;
  vertical-align:top;
}

/* detail-selector & slider */
.makeTable { display:inline; float:left; clear:left;
             margin-top:10px; margin-bottom:20px;}
.makeSelect { display:inline; float:left; clear:left; vertical-align:middle; }

select {  margin-left:5px; margin-right:5px; }
.get,.set,.attr { margin-bottom:5px; float:left; }
.slider { margin-left:10px; float:left; width:250px; height:26px; }
.get .slider,.set .slider,.attr .slider {
        background:#101010; border-radius:8px; }

/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.slider { margin-left:10px; float:left; width:250px; height:26px;
          border-style:solid; border-width:2px; border-color:#555555 }

.handle { position:relative; cursor:pointer; width:50px; 
          height:20px; line-height:20px;
          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
          border:2px solid; color:white; text-align:center; }
.downText,.makeSelect select { margin:0.7em; }

/* sortable Widget */
ul.sortable-src, ul.sortable-dest {
  min-width: 130px; min-height:1.8em;
  list-style-type: none; border: 2px solid white;
  vertical-align:middle; border-radius: 3px;
  margin: 3px; background: #aaa; padding: 2px;
} 
ul.sortable-src li, ul.sortable-dest li { 
  color: black!important; font-size: 0.8em;
  line-height: 1.6em; vertical-align:middle;
  text-align:left; border-radius: 3px;
  margin: 3px; padding: 2px; padding-left:4px;
  min-width: 120px;
} 
ul.sortable-dest { background:  #101010; } 
span.sort-item-delete-link { 
  float:right; margin:0px;
  vertical-align:middle; margin-left:3px;
  padding:0px;
} 
.ui-state-highlight { height: 1.1em; line-height: 1.1em; } 


svg { height:32px; width:32px; vertical-align:middle; margin:2px 0; }
svg:not([fill]) { fill:#fff; }
svg.on,svg.FS20_on { fill:orange!important; }
g.on { fill:red; }

/* next lines are for remotecontrol */
.rc_body        { border-style: solid; border-color: gray; border-width: 2px; 
                  padding: 5px; background: #101010; font-size:6px;}
.rc_button      { padding: 5px 7px;}
.rc_button img  { border-style: solid; border-width: 1px;
                  border-color: transparent; }
.rc_button img:active { border-color: gray; }

.changed a, .changed { color:red!important; }


.colorpicker_ct .slider { background: url(../jscolor/ct_background.svg); }
.colorpicker_ct_mired .slider { background: url(../jscolor/ct_mired_background.svg); }
.colorpicker_hue .slider { background: url(../jscolor/hue_background.svg); }
.get,.set,.attr { margin-bottom:5px; float:left; }
select.svgSrc     { width:100px; }
select.svgColumn  { width:50px;  }
select.svgRegexp  { width:120px; }

/* jQuery-UI mods */
#fwmenu {
  position: absolute; z-index:1005;
  text-align:left; max-width:600px;
  font-weight: normal; font-size: 100%; 
  background:black; border:1px solid white;
}
#fwmenu li a { color:white; }

div#svgmarker {
  position: absolute; z-index:1005; padding: 6px 10px;
  text-align:left; max-width:600px;
  color:white; background:black;
  border:2px solid white; border-radius:4px;
}