diff --git a/sass/_content.scss b/sass/_content.scss index 2fab8d6..1fbb0a7 100644 --- a/sass/_content.scss +++ b/sass/_content.scss @@ -186,12 +186,12 @@ border: 1px $primary-color solid; border-radius: 0; color: $primary-color; - font-size: 16px; + font-size: $large-fontsize; line-height: 20px; height: 24px; margin-left: 5px; margin-right: 5px; - padding: 0 10px; + padding: 0 20px 0 10px; min-width: 200px; } @@ -247,6 +247,13 @@ border-collapse: collapse; max-width: $maxWidthContent; + th { + font-weight: bold; + color: $secondary-color; + padding: 10px 2px; + border-bottom: 1px $secondary-color solid; + } + &.wide, &.roomoverview { width: 100%; @@ -300,7 +307,7 @@ color: $primary-color; font-size: 100%; line-height: 20px; - padding: 0 0px 0 10px; + padding: 0 20px 0 10px; min-width: 90px; max-width: 400px; } @@ -453,7 +460,7 @@ letter-spacing: normal !important; h3 { - font-size: 16px; + font-size: $large-fontsize; letter-spacing: 10px; text-transform: uppercase; font-weight: bold; diff --git a/sass/_devicetypes.scss b/sass/_devicetypes.scss index bbcadaf..a7dbb10 100644 --- a/sass/_devicetypes.scss +++ b/sass/_devicetypes.scss @@ -87,7 +87,7 @@ border-right: 5px $primary-color solid; box-sizing: border-box; padding: 5px; - + > input[type="text"] { border: 1px $primary-color solid; color: #555; @@ -129,4 +129,26 @@ background: transparent; } } + + // Floorplan + #fpmenu { + input[type=submit] { + border: 1px $primary-color solid; + border-radius: 0; + color: $primary-color; + font-size: $large-fontsize; + margin: 5px; + background: transparent; + } + + input[type="text"] { + border: 1px $primary-color solid; + color: #555; + background: transparent; + font-size: $large-fontsize; + height: 20px; + margin-left: 5px; + margin-right: 5px; + } + } } \ No newline at end of file diff --git a/sass/hausautomatisierung_comfloorplanstyle.scss b/sass/hausautomatisierung_comfloorplanstyle.scss index 90047a7..533cf67 100644 --- a/sass/hausautomatisierung_comfloorplanstyle.scss +++ b/sass/hausautomatisierung_comfloorplanstyle.scss @@ -4,58 +4,25 @@ @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro); @import 'vars'; - -#logo { - color: $primary-color; - background: url(../hausautomatisierung-com/images/haus_automatisierung.png) no-repeat; - height: 120px; - margin-left: 40px; - margin-top: 10px; - position: fixed; - width: 220px; - top: 0; - left: 0; - - .theme-version { - opacity: 0.7; - font-weight: bold; - } - - #clock { - opacity: 0.7; - position: absolute; - font-weight: bold; - right: 0; - top: 0; - } -} +@import 'base'; body { - background: #354d69 url(../hausautomatisierung-com/images/bg_wrapper.jpg) no-repeat center 0 fixed; - background-size: cover; - background-position: top center; - color: #fff; - font-family: 'Open Sans', sans-serif; - font-size: $default-fontsize; - margin: 0 auto; - padding: 0; - tab-size: 4; + color: $primary-color; } -body[id~=Media] { - background-color: #A5A5A5; - font-family: Arial, sans-serif; - font-size: 9px; - background-image: url(../icons/Media.bak); - background-repeat: no-repeat; +#logo { + top: 0; + right: 40px; } #menu { - margin-left: 20px; + position: absolute; + top: 0; + right: 0; + margin-right: 20px; margin-top: 140px; width: 260px; z-index: 9999; - height: 100%; table { border-collapse: collapse; @@ -64,7 +31,7 @@ body[id~=Media] { } a { - background: #fff; + background: $brightest-background; color: $secondary-color; display: block; padding: 10px 15px; @@ -75,78 +42,76 @@ body[id~=Media] { } #backimg { + background: $brightest-background; position: absolute; - top: 15px; - left: 320px; + top: 10px; + left: 10px; + width: auto !important; + height: auto !important; } #fpmenu.fp_arrange { + line-height: 35px; + background: $brightest-background; + padding: 10px; position: absolute; bottom: 20px; - left: 20px; - min-width: 310px; - font-size: 9px; - border: 1px solid gray; -} - -#startcontent { - position: absolute; - top: 20px; - left: 180px; - text-align: left; - font-size: 16px; -} - -#hdr { - position: absolute; - top: 10px; - left: 180px; - border: 1px solid gray; -} - -#content { - position: absolute; - top: 50px; - left: 180px; - bottom: 10px; - right: 10px; - text-align: center -} - -#errmsg { - background-color: #000000; - color: #FFFFFF; - position: absolute; - top: 0px; - left: 40px; - z-index: 10; -} + right: 20px; + z-index: 9999; -a { - color: $primary-color; - text-decoration: none; -} + input[type=submit] { + border: 1px $primary-color solid; + border-radius: 0; + color: $primary-color; + padding: 1px 10px; + background: transparent; + font-size: $large-fontsize; + height: 24px; + } + + input[disabled] { + background: #ccc !important; + } -img { - border-style: none; -} + input[type="text"] { + border: 1px $primary-color solid; + color: #555; + background: transparent; + font-size: $large-fontsize; + height: 20px; + margin-left: 5px; + margin-right: 5px; + } -table { - -moz-border-radius: 8px; - border-radius: 8px; + select { + background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); + background-position: calc(100% - 20px) calc(0.5em),calc(100% - 15px) calc(0.5em),calc(100% - 2.5em) 0.2em; + background-size: 5px 5px, 5px 5px, 1px 0.9em; + background-repeat: no-repeat; - &.dummy { - min-width: 100px; + border: 1px $primary-color solid; + border-radius: 0; + color: $primary-color; + font-size: $large-fontsize; + line-height: 20px; + height: 24px; + margin-left: 5px; + margin-right: 5px; + padding: 0 20px 0 10px; + min-width: 200px; } } .devicename { - font-size: 11px; - text-align: center; + > td { + font-weight: bold; + } } .devicestate { - text-align: center; + > td { + text-align: center; + } } .devicecommands { @@ -159,150 +124,8 @@ table { text-align: center; } -#sz_Rollo.devicename { - font-size: 14px; -} - -#sz_Rollo.devicecommands { - font-size: 12px; - text-align: center; -} - -#ez_Aussensensor.devicestate { - color: green; - font-size: 30px; -} - -#HomeStatus.devicestate { - color: green; - font-size: 30px; -} - -#wakeup.devicestate { - color: green; - font-size: 11px; -} - -#ez_FHT.devicestate { - color: green; - font-size: 30px; -} - -#Home.fp_Grundriss { - font-size: 14px; - width: 100px; -} - -#Home.fp_Media { - font-size: 14px; - text-align: left; -} - -#Media { - font-size: 14px; -} - -#Grundriss { - font-size: 14px; - text-align: left; -} - -.fp_tempvalue { - color: red; - font-size: 20px; -} - -.fp_humvalue { - color: blue; - font-size: 20px; -} - -h2, h3, h4 { - color: #52865D; - line-height: 1.3; - margin-top: 1.5em; - font-family: Arial, Sans-serif; -} - -/* detail-selector & slider */ -select { - margin-left: 5px; - margin-right: 5px; -} - -.set, .attr { - margin-bottom: 5px; - float: left; -} - -.slider { - float: left; - width: 140px; - height: 26px; - border: 2px solid; - color: grey; -} - -.set .slider { - background: #F0F0D8; - border-radius: 8px; -} - -/* timepicker */ -.set .set { - margin-bottom: 2px; - margin-top: 3px; -} - -.handle { - position: relative; - cursor: pointer; - width: 50px; - height: 20px; - line-height: 20px; - user-select: none; - border: 3px solid; - color: #278727; - text-align: center; -} - -.downText { - margin-top: 2px; -} - -/* next lines are for openautomation-svg */ svg { height: 32px; width: 32px; - fill: #fff; - vertical-align: middle; - margin: 2px 0; -} - -g.on { - fill: red; -} - -/* 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; + margin: 5px; } \ No newline at end of file diff --git a/www/pgm2/hausautomatisierung_comfloorplanstyle.css b/www/pgm2/hausautomatisierung_comfloorplanstyle.css index 6a75b86..b781c33 100644 --- a/www/pgm2/hausautomatisierung_comfloorplanstyle.css +++ b/www/pgm2/hausautomatisierung_comfloorplanstyle.css @@ -17,97 +17,65 @@ a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } -#logo { color: #e56524; background: url(../hausautomatisierung-com/images/haus_automatisierung.png) no-repeat; height: 120px; margin-left: 40px; margin-top: 10px; position: fixed; width: 220px; top: 0; left: 0; } -#logo .theme-version { opacity: 0.7; font-weight: bold; } -#logo #clock { opacity: 0.7; position: absolute; font-weight: bold; right: 0; top: 0; } - body { background: #354d69 url(../hausautomatisierung-com/images/bg_wrapper.jpg) no-repeat center 0 fixed; background-size: cover; background-position: top center; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 13px; margin: 0 auto; padding: 0; tab-size: 4; } -body[id~=Media] { background-color: #A5A5A5; font-family: Arial, sans-serif; font-size: 9px; background-image: url(../icons/Media.bak); background-repeat: no-repeat; } - -#menu { margin-left: 20px; margin-top: 140px; width: 260px; z-index: 9999; height: 100%; } -#menu table { border-collapse: collapse; border-radius: 0; width: 100%; } -#menu a { background: #fff; color: #676f7a; display: block; padding: 10px 15px; position: relative; z-index: 9999; line-height: 15px; } - -#backimg { position: absolute; top: 15px; left: 320px; } - -#fpmenu.fp_arrange { position: absolute; bottom: 20px; left: 20px; min-width: 310px; font-size: 9px; border: 1px solid gray; } +div { font-family: 'Open Sans', sans-serif !important; font-size: 13px !important; } -#startcontent { position: absolute; top: 20px; left: 180px; text-align: left; font-size: 16px; } +body.dashboard_fullsize #content { border: none !important; float: none !important; height: 100% !important; overflow: visible !important; padding: 0 !important; position: inherit !important; width: 100% !important; } -#hdr { position: absolute; top: 10px; left: 180px; border: 1px solid gray; } - -#content { position: absolute; top: 50px; left: 180px; bottom: 10px; right: 10px; text-align: center; } - -#errmsg { background-color: #000000; color: #FFFFFF; position: absolute; top: 0px; left: 40px; z-index: 10; } +body.dashboard_fullsize #menuScrollArea, body.dashboard_fullsize #hdr, div.ui-dialog div.ui-dialog-titlebar { display: none; } a { color: #e56524; text-decoration: none; } -img { border-style: none; } - -table { -moz-border-radius: 8px; border-radius: 8px; } -table.dummy { min-width: 100px; } - -.devicename { font-size: 11px; text-align: center; } +button.dist { border: 0; cursor: pointer; margin: 10px; } -.devicestate { text-align: center; } - -.devicecommands { font-size: 14px; text-align: center; } - -.devicetimestamp { font-size: 10px; text-align: center; } - -#sz_Rollo.devicename { font-size: 14px; } - -#sz_Rollo.devicecommands { font-size: 12px; text-align: center; } - -#ez_Aussensensor.devicestate { color: green; font-size: 30px; } - -#HomeStatus.devicestate { color: green; font-size: 30px; } - -#wakeup.devicestate { color: green; font-size: 11px; } - -#ez_FHT.devicestate { color: green; font-size: 30px; } - -#Home.fp_Grundriss { font-size: 14px; width: 100px; } - -#Home.fp_Media { font-size: 14px; text-align: left; } - -#Media { font-size: 14px; } +#logo { background: url(../hausautomatisierung-com/images/haus_automatisierung.png) no-repeat; height: 120px; margin-left: 40px; margin-top: 10px; position: fixed; width: 220px; } +#logo .theme-version { opacity: 0.7; font-weight: bold; } +#logo #clock { opacity: 0.7; position: absolute; font-weight: bold; right: 0; top: 0; } -#Grundriss { font-size: 14px; text-align: left; } +#content, #right { bottom: 20px; position: absolute; right: 10px; top: 50px; } -.fp_tempvalue { color: red; font-size: 20px; } +#content, #hdr, #right { left: 320px; } -.fp_humvalue { color: blue; font-size: 20px; } +input[type="text"] { border: 1px #e56524 solid; background: none; } -h2, h3, h4 { color: #52865D; line-height: 1.3; margin-top: 1.5em; font-family: Arial, Sans-serif; } +#hdr { left: 310px; position: fixed; top: 0px; background: #fffffff0; padding: 10px; z-index: 99; border-radius: 0 0 4px 4px; box-shadow: 0 3px 3px #11111130; } +#hdr .header { display: inline-block; } +#hdr input.maininput { color: #e56524; font-size: 16px; box-sizing: border-box; } +#hdr input.maininput:focus { outline: none; } +#hdr .maininputPopupLink { background-image: url('data:image/svg+xml;utf8,'); cursor: pointer; width: 22px; height: 22px; display: inline-block; } +#hdr.header--hidden { -webkit-transform: translateY(-110%); -ms-transform: translateY(-110%); transform: translateY(-110%); } -/* detail-selector & slider */ -select { margin-left: 5px; margin-right: 5px; } +#errmsg { background: #e56524; border-bottom: 3px #fff solid; border-top: 3px #fff solid; color: #fff; font-size: 16px !important; font-weight: 700; left: 0; padding: 20px; position: fixed; top: 10px; width: 100%; z-index: 99999; opacity: 0.8; } +#errmsg:after { content: ' !!!!'; } +#errmsg:before { content: '!!!! '; } -.set, .attr { margin-bottom: 5px; float: left; } +embed { margin-bottom: 10px; } -.slider { float: left; width: 140px; height: 26px; border: 2px solid; color: grey; } +select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; } -.set .slider { background: #F0F0D8; border-radius: 8px; } +body { color: #e56524; } -/* timepicker */ -.set .set { margin-bottom: 2px; margin-top: 3px; } +#logo { top: 0; right: 40px; } -.handle { position: relative; cursor: pointer; width: 50px; height: 20px; line-height: 20px; user-select: none; border: 3px solid; color: #278727; text-align: center; } +#menu { position: absolute; top: 0; right: 0; margin-right: 20px; margin-top: 140px; width: 260px; z-index: 9999; } +#menu table { border-collapse: collapse; border-radius: 0; width: 100%; } +#menu a { background: #fff; color: #676f7a; display: block; padding: 10px 15px; position: relative; z-index: 9999; line-height: 15px; } -.downText { margin-top: 2px; } +#backimg { background: #fff; position: absolute; top: 10px; left: 10px; width: auto !important; height: auto !important; } -/* next lines are for openautomation-svg */ -svg { height: 32px; width: 32px; fill: #fff; vertical-align: middle; margin: 2px 0; } +#fpmenu.fp_arrange { line-height: 35px; background: #fff; padding: 10px; position: absolute; bottom: 20px; right: 20px; z-index: 9999; } +#fpmenu.fp_arrange input[type=submit] { border: 1px #e56524 solid; border-radius: 0; color: #e56524; padding: 1px 10px; background: transparent; font-size: 16px; height: 24px; } +#fpmenu.fp_arrange input[disabled] { background: #ccc !important; } +#fpmenu.fp_arrange input[type="text"] { border: 1px #e56524 solid; color: #555; background: transparent; font-size: 16px; height: 20px; margin-left: 5px; margin-right: 5px; } +#fpmenu.fp_arrange select { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 20px) calc(0.5em), calc(100% - 15px) calc(0.5em), calc(100% - 2.5em) 0.2em; background-size: 5px 5px, 5px 5px, 1px 0.9em; background-repeat: no-repeat; border: 1px #e56524 solid; border-radius: 0; color: #e56524; font-size: 16px; line-height: 20px; height: 24px; margin-left: 5px; margin-right: 5px; padding: 0 20px 0 10px; min-width: 200px; } -g.on { fill: red; } +.devicename > td { font-weight: bold; } -/* next lines are for remotecontrol */ -.rc_body { border-style: solid; border-color: gray; border-width: 2px; padding: 5px; background: #C8C8B0; font-size: 6px; } +.devicestate > td { text-align: center; } -.rc_button { padding: 5px 7px; } +.devicecommands { font-size: 14px; text-align: center; } -.rc_button img { border-style: solid; border-width: 1px; border-color: transparent; } +.devicetimestamp { font-size: 10px; text-align: center; } -.rc_button img:active { border-color: gray; } +svg { height: 32px; width: 32px; margin: 5px; } diff --git a/www/pgm2/hausautomatisierung_comstyle.css b/www/pgm2/hausautomatisierung_comstyle.css index 6c6d0cc..7eb7ef8 100644 --- a/www/pgm2/hausautomatisierung_comstyle.css +++ b/www/pgm2/hausautomatisierung_comstyle.css @@ -85,7 +85,7 @@ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; back #content .dval input { border: 1px #e56524 solid; border-radius: 0; color: #e56524; padding: 1px 10px; background: transparent; font-size: 16px; } #content .makeSelect { background: #fff; border-left: 5px #e56524 solid; border-right: 5px #e56524 solid; box-sizing: border-box; clear: left; color: #676f7a; display: inline; float: left; padding: 5px; width: 100%; } #content .makeSelect .downText { line-height: 24px; font-family: 'Source Code Pro', monospace !important; } -#content .makeSelect select { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 20px) calc(0.5em), calc(100% - 15px) calc(0.5em), calc(100% - 2.5em) 0.2em; background-size: 5px 5px, 5px 5px, 1px 0.9em; background-repeat: no-repeat; border: 1px #e56524 solid; border-radius: 0; color: #e56524; font-size: 16px; line-height: 20px; height: 24px; margin-left: 5px; margin-right: 5px; padding: 0 10px; min-width: 200px; } +#content .makeSelect select { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 20px) calc(0.5em), calc(100% - 15px) calc(0.5em), calc(100% - 2.5em) 0.2em; background-size: 5px 5px, 5px 5px, 1px 0.9em; background-repeat: no-repeat; border: 1px #e56524 solid; border-radius: 0; color: #e56524; font-size: 16px; line-height: 20px; height: 24px; margin-left: 5px; margin-right: 5px; padding: 0 20px 0 10px; min-width: 200px; } #content .makeSelect input[type="submit"] { border: 1px #e56524 solid; border-radius: 0; color: #e56524; padding: 1px 10px; background: transparent; font-size: 16px; height: 24px; } #content .makeSelect input[type="text"] { border: 1px #e56524 solid; color: #555; background: transparent; font-size: 16px; height: 20px; margin-left: 5px; margin-right: 5px; } #content .makeSelect[cmd="attr"] select.select_widget, #content .makeSelect[cmd="attr"] input[type="text"] { width: 300px; } @@ -94,6 +94,7 @@ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; back #content .makeSelect .slider .handle { height: 22px; line-height: 22px; } #content > table { width: 100%; } #content table { border-collapse: collapse; max-width: 1000px; } +#content table th { font-weight: bold; color: #676f7a; padding: 10px 2px; border-bottom: 1px #676f7a solid; } #content table.wide, #content table.roomoverview { width: 100%; } #content table.wide tr.column, #content table.roomoverview tr.column { /* one item */ /* two items */ /* three items */ /* four items */ } #content table.wide tr.column table.column, #content table.roomoverview tr.column table.column { width: 100%; } @@ -102,7 +103,7 @@ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; back #content table.wide tr.column > td:first-child:nth-last-child(2), #content table.wide tr.column > td:first-child:nth-last-child(2) ~ td, #content table.roomoverview tr.column > td:first-child:nth-last-child(2), #content table.roomoverview tr.column > td:first-child:nth-last-child(2) ~ td { width: 50%; } #content table.wide tr.column > td:first-child:nth-last-child(3), #content table.wide tr.column > td:first-child:nth-last-child(3) ~ td, #content table.roomoverview tr.column > td:first-child:nth-last-child(3), #content table.roomoverview tr.column > td:first-child:nth-last-child(3) ~ td { width: 33.3333%; } #content table.wide tr.column > td:first-child:nth-last-child(4), #content table.wide tr.column > td:first-child:nth-last-child(4) ~ td, #content table.roomoverview tr.column > td:first-child:nth-last-child(4), #content table.roomoverview tr.column > td:first-child:nth-last-child(4) ~ td { width: 25%; } -#content table select { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 15px) calc(0.5em + 1px), calc(100% - 10px) calc(0.5em + 1px), calc(100% - 2em) 0.4em; background-size: 5px 5px, 5px 5px, 1px 0.9em; background-repeat: no-repeat; border: 1px #e56524 solid; border-radius: 0; color: #e56524; font-size: 100%; line-height: 20px; padding: 0 0px 0 10px; min-width: 90px; max-width: 400px; } +#content table select { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 15px) calc(0.5em + 1px), calc(100% - 10px) calc(0.5em + 1px), calc(100% - 2em) 0.4em; background-size: 5px 5px, 5px 5px, 1px 0.9em; background-repeat: no-repeat; border: 1px #e56524 solid; border-radius: 0; color: #e56524; font-size: 100%; line-height: 20px; padding: 0 20px 0 10px; min-width: 90px; max-width: 400px; } #content table .slider { width: 150px; } #content table.block { background: #fff; border: none; color: #676f7a; } #content table.block.readings .changed { color: #e56524; } @@ -165,6 +166,8 @@ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; back #content .remotecontrol .rc_body .rc_button { padding: 5px; } #content #dashboardtoolbar td { padding: 5px; } #content #dashboardtoolbar button { border: 1px #e56524 solid; border-radius: 0; color: #e56524; font-size: 16px; margin: 5px; background: transparent; } +#content #fpmenu input[type=submit] { border: 1px #e56524 solid; border-radius: 0; color: #e56524; font-size: 16px; margin: 5px; background: transparent; } +#content #fpmenu input[type="text"] { border: 1px #e56524 solid; color: #555; background: transparent; font-size: 16px; height: 20px; margin-left: 5px; margin-right: 5px; } #console { bottom: 0; overflow: auto; white-space: nowrap; position: absolute; top: 2em; width: 100%; }