do_fhem/fhem/core/www/pgm2/f18style.css

@import url("dashboard_style.css");

body,input,select,textarea { font-family:Arial, sans-serif; font-size:16px;}
td {padding: 0;}
textarea, .ui-dialog.ui-widget textarea { font-family:Courier; }
input,textarea { border-style:ridge; }
input.maininput { margin-left:10px; }
#logo {
  position:absolute; top:6.5px; left:10px; width:32px; height:32px; z-index:10;
  background-image:url(../images/default/fhemicon.png);
  background-size: contain; background-repeat: no-repeat;
}
#menuBtn { position: absolute; top:6.5px; left:10px; width:32px; height:32px;
           display:none; }
#hdr     { position: absolute; top:10px; left:40px; }
#content { 
  position: absolute; top:50px; left:130px; bottom:0; right: 0; 
  padding-right: 10px; 
  padding-bottom: 10px;
}
#menu {
  top:50px; bottom:10px; left:10px;
  z-index:20;
  display:inline-block;
  padding:0 0.5em 0.5em 0;
  position: absolute;
}
#menu > table td { padding-top: 2px; }

#menu.hidden  { left:-120%!important; }
#console { width:100%; top:2em; bottom:0px; position:absolute; overflow-y:auto;}
#errmsg  { background-color: #000000; color: #FFFFFF;
           position:fixed; top:0px; left:40px; z-index: 10; }

.devType { padding-top:20px; }
a        { color:#278727; }
img      { border-style:none; vertical-align: top;}
.wide    { width:100%; }
table.readings td:nth-child(2) { word-break: break-all; }

table.block { border:1px solid gray; }
table { border-collapse: collapse; }
table.room { border:1px solid gray; width: 100%;  }
tr.column > td { vertical-align:top;}

.changed a, .changed { color:red; }
.fhemlog { color:#278727; }
.col2 { text-align:center; }

/* Documentation */
h2,h4 { color:#52865D; line-height:1.3;
           margin-top:1.5em; font-family:Arial,Sans-serif; }
h3 { margin-bottom:0; color:#52865D; line-height:1.3;
           margin-top:1.5em; font-family:Arial,Sans-serif; }
div.dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
#right { position:absolute; top:10px; left:10px; bottom:5px; right: 5px; }

.langLinks { font-size: 0.6em; }

/* Widgets */
.makeTable  { display:inline; float:left; clear:left; margin-bottom:20px; }
.makeTable:not(:first-child)  { margin-top:10px; }
.makeSelect { display:inline; float:left; clear:left; }
select      { margin-left:5px; margin-right:5px; }
.slider     { float:left; width:250px; height:26px; }
.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; }

/* sortable Widget */
ul.sortable-src, ul.sortable-dest {
  min-width: 130px; min-height:1.8em;
  list-style-type: none;border: 2px solid black;
  vertical-align:middle; border-radius: 3px; margin: 3px;
  background: #eee; 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:  #278727; } 
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; } 



.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px;
          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }
.set .set { margin-bottom:2px; margin-top:3px; }             /* timepicker */

pre { white-space: pre-wrap; }
svg { height:32px; width:32px; vertical-align:middle; margin:2px 0;}
svg:not([fill]):not(.jssvg) { fill:#278727; }

svg.on,svg.FS20_on { fill:orange!important; }

/* next lines are for remotecontrol */
.rc_body       { border-style:solid; border-color:gray;
                 border-width:2px; padding:5px;
                 background:#C8C8B0; 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; }

/* jQuery-UI mods */
div.ui-dialog { border:3px solid #278727; padding:0; }
div.ui-dialog-titlebar   { padding:0!important; border:none; background:#F0F0D8; }
button.ui-dialog-titlebar-close { display:none; }

div.ui-widget-content a {color:#278727!important;}
.ui-widget { font-family:Arial,sans-serif!important; }
.ui-button-text { font-weight:normal!important; color:#555!important; }

/* UZSU */
.ui-button-text-only.ui-state-active { background:#F0F0D8; }

#fwmenu {
  position: absolute; z-index:1005;
  text-align:left; max-width:600px;
  font-weight: normal; font-size: 100%; 
  border:1px solid #278727;
}
#fwmenu li a { color:#278727; }

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

div.detLink { display:inline-block; margin-right:0.5em; }

select [value^=l0] { color: red; }
select [value^=l1] { color: green; }
select [value^=l2] { color: blue; }
select [value^=l3] { color: pink; }
select [value^=l4] { color: brown; }
select [value^=l5] { color: black; }
select [value^=l6] { color: olive; }
select [value^=l7] { color: gray; }
select [value^=l8] { color: yellow; }

svg.zw_nr .zwBox    { stroke-width:2px; }
svg.zw_nr .zwDongle { stroke:red;     stroke-width:2px; }
svg.zw_nr .zwMargin { stroke-width:1px; fill:none; }
svg.zw_nr .zwLine   { stroke-width:1px; }
svg.zw_nr .zwArrowHead { stroke-width:1px; }
svg.zw_nr { height:auto; width:auto; margin:0; }

.col_fg      { color:#000000; }
.col_link    { color:#278727; stroke:#278727; }
.col_bg      { background: #FFFFE7; fill:#FFFFE7; }
.col_evenrow { background: #F8F8E0; fill:#F8F8E0; }
.col_oddrow  { background: #F0F0D8; fill:#F0F0D8; }
.col_header  { background: #E0E0C8; fill:#E0E0C8; }
.col_menu    { background: #D7FFFF; fill:#D7FFFF; }
.col_sel     { background: #A0FFFF; fill:#A0FFFF; }

/* end of defaultCommon.css */

table.room,table.block.wide,table.fileList {
  border:0;
  border-radius:0;
  border-spacing:0;
  border-top:1px solid gray;
  border-bottom:1px solid gray;
}
table.block.wide td > div, #menu td td { padding:2px 4px; }

#menuScrollArea { display:none; } /* commandref */
body[fw_id] #menuScrollArea { display:block; } /* not commandref */

input[type=submit] { border:none; background:none; }
select { background:none; }
#menu img.icon { width:18px; height:18px; }/* Firefox assumes 100px bef.load */

table.roomoverview  { border-spacing:0; }
div#menu > table { border-spacing:0; }
tr.devTypeTr td { padding:0px; }
tr.column > td { padding-right:10px; }

.animated  { transition: all .1s ease-in; }
a { text-decoration:none; }

div.dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
select,input[type=submit] { cursor:pointer; }

div.pin, div.dragger { float:right; width:1em; height:1em; margin-left:0.5em; }
div.pinHeader { height:1em; padding:2px; }

body.touch a { font-size: 20px; }
body.touch #menu { font-size: 20px; } /* for the menuTree icon */
body.touch div.col1, body.touch #menu table.room div { padding:0.25em 0; }



body.fixedInput #logo,
body.fixedInput #menu,
body.fixedInput #menuBtn,
body.fixedInput #content,
body.fixedInput #hdr {
	position: fixed;
	overflow: auto;
}

@media screen and (max-width: 480px) and (orientation: portrait) {
  #content > table { width: 100%; table-layout: fixed; }
  #content > table, table.block.wide { width: 100%; }
  table.block tr td:nth-child(2) { width: 0; }
  table.block tr td:nth-child(n+3) { width: 0px; display: none; }
 
  .SVGplot { overflow-x: auto;} 
  
  /* flex-collapsing table */
  .wrapcolumns, 
  .wrapcolumns thead, 
  .wrapcolumns tbody, 
  .wrapcolumns th, 
  .wrapcolumns td {
    display: block;
  }

  .wrapcolumns tr { 
    display: flex;
    flex-wrap: wrap;
  }

  .wrapcolumns td { 
    word-wrap: break-word; 
    align-self: center;
    max-width: 100%;
  }

  .wrapcolumns tr td:nth-child(1) { flex-grow: 1; }
  .wrapcolumns tr td:nth-child(2) { width: auto!important; }
}

body.pinnedMenu #menuBtn { display:none; }
body.pinnedMenu #menu { left:10px; }
body.pinnedMenu #logo { left:10px; }
body { background-repeat: no-repeat; background-size:cover; }

div.SVGlabel { display:inline-block; }