├── .gitignore ├── preview.png ├── www ├── images │ └── hausautomatisierung_com │ │ ├── favicon.ico │ │ ├── power.svg │ │ ├── tv.svg │ │ ├── smartphone.svg │ │ ├── doorhandle.svg │ │ ├── plug.svg │ │ ├── off.svg │ │ ├── on.svg │ │ ├── heater.svg │ │ ├── router.svg │ │ └── weather.svg ├── hausautomatisierung-com │ └── images │ │ ├── bg_wrapper.jpg │ │ └── haus_automatisierung.png └── pgm2 │ ├── hausautomatisierung_comsvg_defs.svg │ ├── hausautomatisierung_comsvg_style.css │ ├── hausautomatisierung_comfloorplanstyle.css │ ├── hausautomatisierung_com.js │ └── hausautomatisierung_comstyle.css ├── CHANGED ├── sass ├── hausautomatisierung_comstyle.scss ├── _console.scss ├── _vars.scss ├── _svg.scss ├── _commandref.scss ├── hausautomatisierung_comfloorplanstyle.scss ├── _devicetypes.scss ├── _base.scss ├── _menu.scss ├── _ui.scss ├── hausautomatisierung_comsvg_style.scss ├── unsorted.old ├── _dashboard.scss └── _content.scss ├── prepare_update.sh ├── config.rb ├── LICENSE ├── controls_ha_theme.txt └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .idea -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klein0r/fhem-style-haus-automatisierung/HEAD/preview.png -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klein0r/fhem-style-haus-automatisierung/HEAD/www/images/hausautomatisierung_com/favicon.ico -------------------------------------------------------------------------------- /www/hausautomatisierung-com/images/bg_wrapper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klein0r/fhem-style-haus-automatisierung/HEAD/www/hausautomatisierung-com/images/bg_wrapper.jpg -------------------------------------------------------------------------------- /www/hausautomatisierung-com/images/haus_automatisierung.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/klein0r/fhem-style-haus-automatisierung/HEAD/www/hausautomatisierung-com/images/haus_automatisierung.png -------------------------------------------------------------------------------- /CHANGED: -------------------------------------------------------------------------------- 1 | FHEM haus-automatisierung.com custom theme last changes: 2 | 2021-03-10 3 | - Compass raus 4 | - Revert "added mobile preview image" 5 | - Revert "Compass is not necessary needed" 6 | - Revert "Not sure about the indention of window scroll event. Lets keep things visible" 7 | - Revert "Responsive design" 8 | - Revert "Compass raus" 9 | - 2.18 10 | - Back to 2.16 style 11 | - Version 2.18 12 | - Removed attribute groups (since fhemweb adopted that feature) -------------------------------------------------------------------------------- /sass/hausautomatisierung_comstyle.scss: -------------------------------------------------------------------------------- 1 | @import "compass/reset"; 2 | 3 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); 4 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro); 5 | 6 | /* Author: Matthias Kleine */ 7 | 8 | @import 'vars'; 9 | 10 | @import 'base'; 11 | @import 'content'; 12 | @import 'devicetypes'; 13 | @import 'console'; 14 | @import 'dashboard'; 15 | @import 'menu'; 16 | @import 'svg'; 17 | @import 'ui'; 18 | @import 'commandref' -------------------------------------------------------------------------------- /prepare_update.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | #compass compile --force 4 | 5 | rm controls_ha_theme.txt 6 | 7 | echo "MOV ./www/hausautomatisierung-com/custom.js unused" >> controls_ha_theme.txt 8 | 9 | find ./www -type f \( ! -iname ".*" \) -print0 | while IFS= read -r -d '' f; 10 | do 11 | out="UPD "$(stat -f "%Sm" -t "%Y-%m-%d_%T" $f)" "$(stat -f%z $f)" ${f}" 12 | echo ${out//.\//} >> controls_ha_theme.txt 13 | done 14 | 15 | # CHANGED file 16 | echo "FHEM haus-automatisierung.com custom theme last changes:" > CHANGED 17 | echo $(date +"%Y-%m-%d") >> CHANGED 18 | git log -n 10 --reverse --pretty="format:- %s" >> CHANGED 19 | -------------------------------------------------------------------------------- /sass/_console.scss: -------------------------------------------------------------------------------- 1 | #content { 2 | > button#eventReset, 3 | > button#addRegexpPart { 4 | @include button 5 | } 6 | } 7 | 8 | #console { 9 | bottom: 0; 10 | overflow: auto; 11 | //overflow-x: scroll; 12 | white-space: nowrap; 13 | position: absolute; 14 | top: 2em; 15 | width: 100%; 16 | } 17 | 18 | // Doif-Tools 19 | textarea#console { 20 | white-space: normal; 21 | margin-top: 10px; 22 | margin-bottom: 10px; 23 | border-left: 5px $primary-color solid; 24 | font-size: 100%; 25 | } 26 | 27 | #console, .fhemlog { 28 | color: #fff; 29 | font-family: 'Source Code Pro', monospace; 30 | background: none; 31 | border: none; 32 | } -------------------------------------------------------------------------------- /sass/_vars.scss: -------------------------------------------------------------------------------- 1 | $version: '2.19'; 2 | 3 | $menuWidth: 300px; 4 | $maxWidthContent: 1000px; 5 | 6 | $brightest-background: #fff; 7 | 8 | $primary-color: #e56524; 9 | $primary-color-lt: #676f7a; 10 | $primary-color-dk: #25689e; 11 | 12 | $secondary-color: #676f7a; 13 | $odd-color: #f5f6f9; 14 | 15 | $default-fontsize: 13px; 16 | $large-fontsize: 16px; 17 | 18 | @mixin button { 19 | border: 1px $primary-color solid; 20 | border-radius: 0; 21 | color: $primary-color; 22 | padding: 1px 10px; 23 | background: transparent; 24 | font-size: $large-fontsize; 25 | } 26 | 27 | @mixin button-large { 28 | @include button; 29 | height: 24px; 30 | } 31 | 32 | @mixin textfield { 33 | border: 1px $primary-color solid; 34 | color: #555; 35 | background: transparent; 36 | font-size: $large-fontsize; 37 | height: 20px; 38 | margin-left: 5px; 39 | margin-right: 5px; 40 | } -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | # Require any additional compass plugins here. 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = "www/pgm2" 7 | sass_dir = "sass" 8 | images_dir = "www/hausautomatisierung-com/images" 9 | javascripts_dir = "javascripts" 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | # output_style = :expanded or :nested or :compact or :compressed 13 | output_style = :compact 14 | 15 | # To enable relative paths to assets via compass helper functions. Uncomment: 16 | # relative_assets = true 17 | 18 | # To disable debugging comments that display the original location of your selectors. Uncomment: 19 | line_comments = false 20 | 21 | # If you prefer the indented syntax, you might want to regenerate this 22 | # project again passing --syntax sass, or you can uncomment this: 23 | # preferred_syntax = :sass 24 | # and then run: 25 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Matthias Kleine 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /sass/_svg.scss: -------------------------------------------------------------------------------- 1 | svg { 2 | width: 32px; 3 | height: 32px; 4 | vertical-align: middle; 5 | 6 | text.title { 7 | text-transform: none !important; 8 | letter-spacing: 2px !important; 9 | } 10 | } 11 | 12 | svg.on, svg.FS20_on { 13 | fill: $primary-color !important; 14 | } 15 | 16 | // Z-Wave Neighbor-Map 17 | #ZWDongleNrSVG { 18 | background: $odd-color; 19 | margin-bottom: 10px; 20 | margin-top: 10px; 21 | border-left: 5px $primary-color solid; 22 | border-right: 5px $primary-color solid; 23 | box-sizing: border-box; 24 | width: 1000px !important; 25 | } 26 | 27 | svg.zw_nr { 28 | fill: transparent !important; 29 | 30 | height: auto; 31 | width: auto; 32 | 33 | text { 34 | fill: $primary-color; 35 | } 36 | 37 | .col_link { 38 | color: $primary-color; 39 | stroke: $primary-color; 40 | } 41 | 42 | .zwMargin { 43 | stroke: transparent; 44 | color: transparent; 45 | } 46 | 47 | .zwLine { 48 | stroke-width: 1px; 49 | } 50 | 51 | .zwBox { 52 | stroke-width: 2px; 53 | } 54 | 55 | .zwDongle { 56 | stroke-width: 3px; 57 | } 58 | } 59 | 60 | svg:not([fill]):not(.jssvg) { 61 | fill: $secondary-color; 62 | } -------------------------------------------------------------------------------- /controls_ha_theme.txt: -------------------------------------------------------------------------------- 1 | MOV ./www/hausautomatisierung-com/custom.js unused 2 | UPD 2017-08-17_20:17:57 6623 www/images/hausautomatisierung_com/weather.svg 3 | UPD 2017-10-14_09:47:39 15086 www/images/hausautomatisierung_com/favicon.ico 4 | UPD 2017-08-17_20:17:57 2329 www/images/hausautomatisierung_com/smartphone.svg 5 | UPD 2017-08-17_20:17:57 1802 www/images/hausautomatisierung_com/power.svg 6 | UPD 2017-08-17_20:17:57 3199 www/images/hausautomatisierung_com/off.svg 7 | UPD 2017-08-17_20:17:57 2274 www/images/hausautomatisierung_com/tv.svg 8 | UPD 2017-08-17_20:17:57 4911 www/images/hausautomatisierung_com/heater.svg 9 | UPD 2017-08-17_20:17:57 2727 www/images/hausautomatisierung_com/plug.svg 10 | UPD 2017-08-17_20:17:57 3199 www/images/hausautomatisierung_com/on.svg 11 | UPD 2017-08-17_20:17:57 6250 www/images/hausautomatisierung_com/router.svg 12 | UPD 2017-08-17_20:17:57 2398 www/images/hausautomatisierung_com/doorhandle.svg 13 | UPD 2021-03-10_21:55:46 36573 www/pgm2/hausautomatisierung_comstyle.css 14 | UPD 2021-03-10_21:55:46 6074 www/pgm2/hausautomatisierung_comfloorplanstyle.css 15 | UPD 2019-05-15_08:23:27 2996 www/pgm2/hausautomatisierung_comsvg_defs.svg 16 | UPD 2021-03-10_21:55:51 8504 www/pgm2/hausautomatisierung_com.js 17 | UPD 2021-03-10_21:55:46 5143 www/pgm2/hausautomatisierung_comsvg_style.css 18 | UPD 2017-07-04_22:17:20 20144 www/hausautomatisierung-com/images/haus_automatisierung.png 19 | UPD 2017-07-04_22:17:20 81828 www/hausautomatisierung-com/images/bg_wrapper.jpg 20 | -------------------------------------------------------------------------------- /sass/_commandref.scss: -------------------------------------------------------------------------------- 1 | #right { 2 | 3 | max-width: 1000px; 4 | width: 100%; 5 | 6 | > h3, > h4 { 7 | font-size: 20px; 8 | text-transform: uppercase; 9 | letter-spacing: 10px; 10 | margin-top: 10px; 11 | } 12 | 13 | > ul, > div, > div > ul, > p { 14 | color: $secondary-color; 15 | background: $brightest-background; 16 | border-collapse: collapse; 17 | border-left: 5px $primary-color solid; 18 | font-family: 'Source Code Pro', monospace !important; 19 | max-width: 995px; 20 | padding: 5px; 21 | width: 100%; 22 | 23 | h3 { 24 | font-size: 16px; 25 | letter-spacing: 10px; 26 | text-transform: uppercase; 27 | font-weight: bold; 28 | } 29 | 30 | dd { 31 | margin-left: 50px; 32 | } 33 | 34 | dt { 35 | margin-left: 25px; 36 | } 37 | 38 | b, strong { 39 | font-weight: bold; 40 | text-transform: uppercase; 41 | } 42 | 43 | p { 44 | margin: 5px 0; 45 | } 46 | 47 | code { 48 | font-family: 'Source Code Pro', monospace; 49 | } 50 | 51 | ul { 52 | list-style-type: square; 53 | margin-left: 20px; 54 | 55 | li { 56 | margin: 10px 0; 57 | } 58 | } 59 | 60 | table { 61 | td { 62 | padding: 5px; 63 | } 64 | } 65 | } 66 | 67 | } -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/power.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | power 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/tv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | tv 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/smartphone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | smartphone 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/doorhandle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | door handle 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/plug.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | plug 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | bulb 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/on.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | bulb 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /www/pgm2/hausautomatisierung_comsvg_defs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 55 | 56 | 57 | 58 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /sass/hausautomatisierung_comfloorplanstyle.scss: -------------------------------------------------------------------------------- 1 | @import "compass/reset"; 2 | 3 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); 4 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro); 5 | 6 | @import 'vars'; 7 | @import 'base'; 8 | 9 | body { 10 | color: $primary-color; 11 | } 12 | 13 | #logo { 14 | top: 0; 15 | right: 40px; 16 | } 17 | 18 | #menu { 19 | position: absolute; 20 | top: 0; 21 | right: 0; 22 | margin-right: 20px; 23 | margin-top: 140px; 24 | width: 260px; 25 | z-index: 9999; 26 | 27 | table { 28 | border-collapse: collapse; 29 | border-radius: 0; 30 | width: 100%; 31 | } 32 | 33 | a { 34 | background: $brightest-background; 35 | color: $secondary-color; 36 | display: block; 37 | padding: 10px 15px; 38 | position: relative; 39 | z-index: 9999; 40 | line-height: 15px; 41 | } 42 | } 43 | 44 | #backimg { 45 | background: $brightest-background; 46 | position: absolute; 47 | top: 10px; 48 | left: 10px; 49 | width: auto !important; 50 | height: auto !important; 51 | } 52 | 53 | #fpmenu.fp_arrange { 54 | line-height: 35px; 55 | background: $brightest-background; 56 | padding: 10px; 57 | position: absolute; 58 | bottom: 20px; 59 | right: 20px; 60 | z-index: 9999; 61 | 62 | input[type=submit] { 63 | border: 1px $primary-color solid; 64 | border-radius: 0; 65 | color: $primary-color; 66 | padding: 1px 10px; 67 | background: transparent; 68 | font-size: $large-fontsize; 69 | height: 24px; 70 | } 71 | 72 | input[disabled] { 73 | background: #ccc !important; 74 | } 75 | 76 | input[type="text"] { 77 | border: 1px $primary-color solid; 78 | color: #555; 79 | background: transparent; 80 | font-size: $large-fontsize; 81 | height: 20px; 82 | margin-left: 5px; 83 | margin-right: 5px; 84 | } 85 | 86 | select { 87 | background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); 88 | background-position: calc(100% - 20px) calc(0.5em),calc(100% - 15px) calc(0.5em),calc(100% - 2.5em) 0.2em; 89 | background-size: 5px 5px, 5px 5px, 1px 0.9em; 90 | background-repeat: no-repeat; 91 | 92 | border: 1px $primary-color solid; 93 | border-radius: 0; 94 | color: $primary-color; 95 | font-size: $large-fontsize; 96 | line-height: 20px; 97 | height: 24px; 98 | margin-left: 5px; 99 | margin-right: 5px; 100 | padding: 0 20px 0 10px; 101 | min-width: 200px; 102 | } 103 | } 104 | 105 | .devicename { 106 | > td { 107 | font-weight: bold; 108 | } 109 | } 110 | 111 | .devicestate { 112 | > td { 113 | text-align: center; 114 | } 115 | } 116 | 117 | .devicecommands { 118 | font-size: 14px; 119 | text-align: center; 120 | } 121 | 122 | .devicetimestamp { 123 | font-size: 10px; 124 | text-align: center; 125 | } 126 | 127 | svg { 128 | height: 32px; 129 | width: 32px; 130 | margin: 5px; 131 | } -------------------------------------------------------------------------------- /sass/_devicetypes.scss: -------------------------------------------------------------------------------- 1 | #content { 2 | 3 | // abstracttable 4 | .abstract-table { 5 | margin: 10px 0; 6 | 7 | th { 8 | font-weight: bold; 9 | color: $secondary-color; 10 | padding: 10px 2px; 11 | border-bottom: 1px $secondary-color solid; 12 | } 13 | } 14 | 15 | // Zwave 16 | #ZWHelp { 17 | font-size: $default-fontsize !important; 18 | text-transform: none !important; 19 | letter-spacing: normal !important; 20 | background: $brightest-background; 21 | color: $secondary-color; 22 | padding: 5px; 23 | box-sizing: border-box; 24 | 25 | &.makeTable.help:empty { 26 | display: none; 27 | } 28 | } 29 | 30 | // FB_CALLLIST 31 | .fbcalllist.header { 32 | td { 33 | font-weight: bold; 34 | color: $secondary-color; 35 | padding: 10px 2px; 36 | border-bottom: 1px $secondary-color solid; 37 | } 38 | } 39 | 40 | // SONOS 41 | .rc_body { 42 | margin-top: 10px; 43 | } 44 | 45 | // weekdayprofile 46 | div[id^=weekprofile] { 47 | background: $brightest-background; 48 | padding: 5px; 49 | 50 | button { 51 | @include button-large; 52 | } 53 | } 54 | 55 | // ToDoist 56 | .todoist_container { 57 | .col_header { 58 | background: $brightest-background; 59 | } 60 | } 61 | 62 | // calendar 63 | table.calendar { 64 | background: $brightest-background; 65 | 66 | td { 67 | color: $primary-color-lt; 68 | padding: 10px 10px; 69 | } 70 | 71 | tr:nth-child(2n) { 72 | background: $odd-color; 73 | } 74 | } 75 | 76 | // SVG 77 | a#pdisp { 78 | background: #00000061; 79 | color: $primary-color; 80 | border: 1px $primary-color solid; 81 | padding: 2px 10px; 82 | display: inline-block; 83 | margin-top: 10px; 84 | line-height: 20px; 85 | margin-right: 10px; 86 | margin-bottom: 10px; 87 | vertical-align: top; 88 | } 89 | 90 | // search command 91 | #fhemsearch { 92 | color: $primary-color-lt; 93 | margin-top: 10px; 94 | background: $brightest-background; 95 | border-left: 5px $primary-color solid; 96 | border-right: 5px $primary-color solid; 97 | box-sizing: border-box; 98 | padding: 5px; 99 | 100 | > input[type="text"] { 101 | @include textfield; 102 | } 103 | } 104 | 105 | // remotecontrol 106 | .remotecontrol { 107 | .rc_body { 108 | border: 1px $primary-color solid; 109 | background: $primary-color-lt; 110 | margin-bottom: 10px; 111 | 112 | .rc_button { 113 | padding: 5px; 114 | } 115 | } 116 | } 117 | 118 | // Dashboard 119 | #dashboardtoolbar { 120 | 121 | // Text: "Helper:" 122 | td { 123 | padding: 5px; 124 | } 125 | 126 | button { 127 | border: 1px $primary-color solid; 128 | border-radius: 0; 129 | color: $primary-color; 130 | font-size: $large-fontsize; 131 | margin: 5px; 132 | background: transparent; 133 | } 134 | } 135 | 136 | // Floorplan 137 | #fpmenu { 138 | input[type=submit] { 139 | @include button; 140 | } 141 | 142 | input[type="text"] { 143 | @include textfield; 144 | } 145 | } 146 | } -------------------------------------------------------------------------------- /sass/_base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: #354d69 url(../hausautomatisierung-com/images/bg_wrapper.jpg) no-repeat center 0 fixed; 3 | background-size: cover; 4 | background-position: top center; 5 | color: #fff; 6 | font-family: 'Open Sans', sans-serif; 7 | font-size: $default-fontsize; 8 | margin: 0 auto; 9 | padding: 0; 10 | tab-size: 4; 11 | } 12 | 13 | div { 14 | font-family: 'Open Sans', sans-serif !important; 15 | font-size: $default-fontsize !important; 16 | } 17 | 18 | body.dashboard_fullsize #content { 19 | border: none !important; 20 | float: none !important; 21 | height: 100% !important; 22 | overflow: visible !important; 23 | padding: 0 !important; 24 | position: inherit !important; 25 | width: 100% !important; 26 | } 27 | 28 | body.dashboard_fullsize #menuScrollArea, 29 | body.dashboard_fullsize #hdr, 30 | div.ui-dialog div.ui-dialog-titlebar { 31 | display: none; 32 | } 33 | 34 | a { 35 | color: $primary-color; 36 | text-decoration: none; 37 | } 38 | 39 | button.dist { 40 | border: 0; 41 | cursor: pointer; 42 | margin: 10px; 43 | } 44 | 45 | #logo { 46 | background: url(../hausautomatisierung-com/images/haus_automatisierung.png) no-repeat; 47 | height: 120px; 48 | margin-left: 40px; 49 | margin-top: 10px; 50 | position: fixed; 51 | width: 220px; 52 | 53 | .theme-version { 54 | opacity: 0.7; 55 | font-weight: bold; 56 | } 57 | 58 | #clock { 59 | opacity: 0.7; 60 | position: absolute; 61 | font-weight: bold; 62 | right: 0; 63 | top: 0; 64 | } 65 | } 66 | 67 | #content, #right { 68 | bottom: 20px; 69 | position: absolute; 70 | right: 10px; 71 | top: 50px; 72 | } 73 | 74 | #content, #hdr, #right { 75 | left: 320px; 76 | } 77 | 78 | input[type="text"] { 79 | border: 1px #e56524 solid; 80 | background: none; 81 | } 82 | 83 | #hdr { 84 | left: 310px; 85 | position: fixed; 86 | top: 0px; 87 | background: #fffffff0; 88 | padding: 10px; 89 | z-index: 99; 90 | border-radius: 0 0 4px 4px; 91 | box-shadow: 0 3px 3px #11111130; 92 | 93 | .header { 94 | display: inline-block; 95 | } 96 | 97 | input.maininput { 98 | color: $primary-color; 99 | font-size: $large-fontsize; 100 | box-sizing: border-box; 101 | 102 | &:focus { 103 | outline: none; 104 | } 105 | } 106 | 107 | .maininputPopupLink { 108 | background-image: url('data:image/svg+xml;utf8,'); 109 | cursor: pointer; 110 | width: 22px; 111 | height: 22px; 112 | display: inline-block; 113 | } 114 | 115 | &.header--hidden{ 116 | -webkit-transform: translateY(-110%); 117 | -ms-transform: translateY(-110%); 118 | transform: translateY(-110%); 119 | } 120 | } 121 | 122 | #errmsg { 123 | background: $primary-color; 124 | border-bottom: 3px #fff solid; 125 | border-top: 3px #fff solid; 126 | color: #fff; 127 | font-size: $large-fontsize !important; 128 | font-weight: 700; 129 | left: 0; 130 | padding: 20px; 131 | position: fixed; 132 | top: 10px; 133 | width: 100%; 134 | z-index: 99999; 135 | opacity: 0.8; 136 | 137 | &:after { 138 | content: ' !!!!'; 139 | } 140 | 141 | &:before { 142 | content: '!!!! '; 143 | } 144 | } 145 | 146 | embed { 147 | margin-bottom: 10px; 148 | } 149 | 150 | select { 151 | -webkit-appearance: none; 152 | -moz-appearance: none; 153 | appearance: none; 154 | background-color: transparent; 155 | } 156 | -------------------------------------------------------------------------------- /sass/_menu.scss: -------------------------------------------------------------------------------- 1 | #menu { 2 | margin-left: 20px; 3 | margin-top: 140px; 4 | width: $menuWidth - 40px; 5 | z-index: 9999; 6 | 7 | table { 8 | border-collapse: collapse; 9 | border-radius: 0; 10 | width: 100%; 11 | } 12 | 13 | a { 14 | background: $brightest-background; 15 | color: $secondary-color; 16 | display: block; 17 | padding: 10px 15px; 18 | position: relative; 19 | } 20 | 21 | .menuTree { 22 | 23 | position: relative; 24 | 25 | &.level0 { 26 | 27 | &.closed > td > div > a:after { 28 | width: 35px; 29 | height: 35px; 30 | content: ' '; 31 | position: absolute; 32 | top: 0; 33 | right: 0; 34 | background-image: url('data:image/svg+xml;utf8,') !important; 35 | } 36 | 37 | &.open > td > div > a:after { 38 | width: 35px; 39 | height: 35px; 40 | content: ' '; 41 | position: absolute; 42 | top: 0; 43 | right: 0; 44 | background-image: url('data:image/svg+xml;utf8,') !important; 45 | } 46 | 47 | } 48 | 49 | &.level1 > td > div { 50 | margin-left: 0 !important; 51 | border-left: 5px $primary-color solid; 52 | } 53 | 54 | // Original-Element verstecken. 55 | > td > div > div { 56 | display: none; 57 | } 58 | 59 | } 60 | 61 | table.room { 62 | border: none; 63 | border-spacing: 0; 64 | margin-bottom: 10px; 65 | 66 | .menu_Save_config { 67 | font-weight: bold; 68 | } 69 | 70 | .custom-menu-entry { 71 | color: $primary-color; 72 | } 73 | 74 | img.icon, 75 | svg.icon { 76 | width: 20px; 77 | height: 20px; 78 | margin: 0; 79 | position: absolute; 80 | right: 10px; 81 | top: 7px; 82 | } 83 | 84 | #saveCheck { 85 | margin-top: -33px; 86 | background: transparent; 87 | border-right: 5px $primary-color solid; 88 | border-left: 5px $primary-color solid; 89 | text-indent: -9999px; 90 | margin-left: 220px; 91 | } 92 | 93 | tr.sel { 94 | a { 95 | background: $primary-color; 96 | color: #fff; 97 | } 98 | 99 | svg.icon { 100 | fill: #fff; 101 | } 102 | 103 | td a:after { 104 | border-bottom: 17px solid transparent; 105 | border-left: 13px solid $primary-color; 106 | border-top: 17px solid transparent; 107 | content: " "; 108 | height: 0; 109 | margin-top: -17px; 110 | position: absolute; 111 | right: -13px; 112 | top: 50%; 113 | width: 0; 114 | } 115 | } 116 | } 117 | } 118 | 119 | #menuScrollArea { 120 | height: 100%; 121 | top: 0; 122 | left: 0; 123 | overflow: auto; 124 | position: relative; 125 | width: $menuWidth; 126 | } 127 | 128 | #haToolbar { 129 | color: $secondary-color; 130 | font-family: 'Source Code Pro', monospace !important; 131 | background-color: $brightest-background; 132 | position: fixed; 133 | box-sizing: border-box; 134 | padding: 5px 15px; 135 | bottom: 0; 136 | left: 20px; 137 | min-width: $menuWidth - 40px; 138 | border: 1px $primary-color dashed; 139 | border-bottom: none; 140 | line-height: 25px; 141 | 142 | .toHdr { 143 | cursor: pointer; 144 | } 145 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FHEM Style: haus-automatisierung.com (v2) 2 | 3 | Mit diesem Style wird die FHEM-Oberfläche etwas anschaulicher - "Look and Feel" sind dabei an das Webdesign der Seite [haus-automatisierung.com](https://haus-automatisierung.com/) angelehnt. 4 | 5 | ## Installation 6 | 7 | 1. Hinzufügen des neuen Themes in Version 2 8 | 9 | ``` 10 | update add https://raw.githubusercontent.com/klein0r/fhem-style-haus-automatisierung/version-2/controls_ha_theme.txt 11 | update check ha_theme 12 | update all ha_theme 13 | ``` 14 | 15 | 2. Select Style -> hausautomatisierung_com 16 | 17 | 3. Ein paar Anpassungen am Web-Device: 18 | 19 | ``` 20 | attr WEB JavaScripts codemirror/fhem_codemirror.js 21 | attr WEB codemirrorParam { "theme": "blackboard", "lineNumbers":true, "lineWrapping": true, "height": "auto", "autocomplete": true } 22 | attr WEB roomIcons Save.config:message_attention 23 | ``` 24 | 25 | Einmal speichern und neu laden - fertig. 26 | 27 | ## Entwicklungsumgebung aufsetzen 28 | 29 | **Bitte keine Pull-Requests für CSS-Dateien einreichen, diese werden per SASS generiert.** 30 | 31 | Der Style basiert auf [SASS](https://sass-lang.com/) / [Compass](http://compass-style.org/). So können die einzelnen Bereiche unterteilt werden und der Style wird viel übersichtlicher und leichter zu warten / erweitern. 32 | 33 | Du brauchst: 34 | 35 | - git [Doku](https://git-scm.com/book/de/v1/Los-geht%E2%80%99s-Git-installieren) 36 | - SASS [Doku](https://sass-lang.com/install) 37 | - Compass [Doku](http://compass-style.org/install/) 38 | 39 | Dann die aktuellen Dateien von GitHub holen (oder aus einem eigenen Fork): 40 | 41 | ``` 42 | cd /opt/fhem/ 43 | git clone -b version-2 git@github.com:klein0r/fhem-style-haus-automatisierung.git 44 | ``` 45 | 46 | Dann ein paar Symlinks erstellen: 47 | 48 | ``` 49 | ln -s /opt/fhem/fhem-style-haus-automatisierung/www/hausautomatisierung-com /opt/fhem/www/hausautomatisierung-com 50 | ln -s /opt/fhem/fhem-style-haus-automatisierung/www/images/hausautomatisierung_com /opt/fhem/www/images/hausautomatisierung_com 51 | ln -s /opt/fhem/fhem-style-haus-automatisierung/www/pgm2/hausautomatisierung_comfloorplanstyle.css /opt/fhem/www/pgm2/hausautomatisierung_comfloorplanstyle.css 52 | ln -s /opt/fhem/fhem-style-haus-automatisierung/www/pgm2/hausautomatisierung_com.js /opt/fhem/www/pgm2/hausautomatisierung_com.js 53 | ln -s /opt/fhem/fhem-style-haus-automatisierung/www/pgm2/hausautomatisierung_comstyle.css /opt/fhem/www/pgm2/hausautomatisierung_comstyle.css 54 | ln -s /opt/fhem/fhem-style-haus-automatisierung/www/pgm2/hausautomatisierung_comsvg_style.css /opt/fhem/www/pgm2/hausautomatisierung_comsvg_style.css 55 | ``` 56 | 57 | SASS wartet auf Änderungen und baut bei Bedarf das CSS neu: 58 | 59 | ``` 60 | cd /opt/fhem/fhem-style-haus-automatisierung 61 | compass watch 62 | ``` 63 | 64 | Dann einfach die SCSS-Dateien bearbeiten. 65 | 66 | ## Fehler melden 67 | 68 | Bitte [hier](https://github.com/klein0r/fhem-style-haus-automatisierung/issues) einen Issue erstellen 69 | 70 | ## Vorschau 71 | 72 | ![FHEM Style](https://raw.githubusercontent.com/klein0r/fhem-style-haus-automatisierung/version-2/preview.png) 73 | 74 | ## Smart-Home-Icons: 75 | 76 | Thanks @ https://dribbble.com/shots/2084609-Smart-House-Icon-Set-Free 77 | 78 | ## License 79 | 80 | MIT License 81 | 82 | Copyright (c) 2021 Matthias Kleine 83 | 84 | Permission is hereby granted, free of charge, to any person obtaining a copy 85 | of this software and associated documentation files (the "Software"), to deal 86 | in the Software without restriction, including without limitation the rights 87 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 88 | copies of the Software, and to permit persons to whom the Software is 89 | furnished to do so, subject to the following conditions: 90 | 91 | The above copyright notice and this permission notice shall be included in all 92 | copies or substantial portions of the Software. 93 | 94 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 95 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 96 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 97 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 98 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 99 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 100 | SOFTWARE. 101 | -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/heater.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | heater 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /sass/_ui.scss: -------------------------------------------------------------------------------- 1 | .ui-dialog { 2 | background: $brightest-background !important; 3 | border: 2px solid $primary-color !important; 4 | padding: .2em !important; 5 | border-radius: 0 !important; 6 | color: $secondary-color !important; 7 | padding: 0 !important; 8 | 9 | .ui-widget-header { 10 | color: $primary-color-lt; 11 | } 12 | 13 | .CodeMirror { 14 | width: auto; 15 | } 16 | 17 | .slider { 18 | width: 350px; 19 | border: 1px $primary-color solid; 20 | height: 22px; 21 | 22 | .handle { 23 | -webkit-user-select: none; /* Safari 3.1+ */ 24 | -moz-user-select: none; /* Firefox 2+ */ 25 | -ms-user-select: none; /* IE 10+ */ 26 | user-select: none; /* Standard syntax */ 27 | background: $primary-color; 28 | color: $odd-color; 29 | cursor: pointer; 30 | position: relative; 31 | text-align: center; 32 | width: 40px; 33 | height: 22px; 34 | line-height: 22px; 35 | } 36 | } 37 | 38 | .colorpicker { 39 | line-height: 30px; 40 | } 41 | 42 | .colorpicker_ct .slider { 43 | background: url(../jscolor/ct_background.svg); background-size: 150px; 44 | } 45 | .colorpicker_ct_mired .slider { 46 | background: url(../jscolor/ct_mired_background.svg); background-size: 150px; 47 | } 48 | .colorpicker_hue .slider { 49 | background: url(../jscolor/hue_background.svg); background-size: 150px; 50 | } 51 | } 52 | 53 | .ui-widget-content { 54 | background: $brightest-background !important; 55 | 56 | &#fwmenu { 57 | background: $brightest-background; 58 | border: 1px $primary-color solid; 59 | font-size: 100%; 60 | font-weight: 400; 61 | max-width: 600px; 62 | position: absolute; 63 | text-align: left; 64 | z-index: 1005; 65 | } 66 | 67 | pre { 68 | font-family: 'Source Code Pro', monospace !important; 69 | } 70 | 71 | a { 72 | color: $primary-color !important; 73 | text-decoration: none; 74 | } 75 | 76 | caption, .mkTitle { 77 | text-transform: uppercase; 78 | font-size: $large-fontsize !important; 79 | letter-spacing: 10px; 80 | margin: 10px 0; 81 | } 82 | 83 | .makeTable { 84 | margin-bottom: 10px; 85 | 86 | table { 87 | width: 100%; 88 | } 89 | 90 | thead th { 91 | font-weight: bold; 92 | color: $secondary-color; 93 | padding: 10px 2px; 94 | border-bottom: 1px $secondary-color solid; 95 | } 96 | 97 | tbody { 98 | th { 99 | padding-top: 5px; 100 | } 101 | } 102 | 103 | tfoot { 104 | color: $primary-color-lt; 105 | 106 | td { 107 | padding-top: 5px; 108 | } 109 | } 110 | 111 | tr.odd > td, 112 | tr.even > td { 113 | padding: 5px; 114 | } 115 | 116 | .block tr.odd { 117 | background: $odd-color; 118 | } 119 | } 120 | 121 | .detLink { 122 | border: 1px $primary-color solid; 123 | padding: 2px 10px; 124 | display: inline-block; 125 | line-height: 20px; 126 | vertical-align: top; 127 | float: initial !important; 128 | 129 | a { 130 | color: $primary-color; 131 | } 132 | } 133 | 134 | input[type="text"] { 135 | border: 1px $primary-color solid; 136 | color: #555; 137 | background: $brightest-background; 138 | font-size: $large-fontsize; 139 | height: 20px; 140 | margin-left: 5px; 141 | margin-right: 5px; 142 | } 143 | } 144 | 145 | .ui-button { 146 | border-radius: 0 !important; 147 | color: $primary-color !important; 148 | } 149 | 150 | .ui-dialog-titlebar { 151 | display: block !important; 152 | border: none !important; 153 | border-radius: 0 !important; 154 | background: $odd-color !important; 155 | } 156 | 157 | #dashboard { 158 | .ui-widget-content a, 159 | .fhemlog, 160 | #fwmenu li a { 161 | color: $primary-color !important; 162 | } 163 | 164 | .ui-corner-all, 165 | .ui-corner-top, 166 | .ui-corner-right, 167 | .ui-corner-left, 168 | .ui-corner-bottom, 169 | 170 | .ui-corner-bl, 171 | .ui-corner-br, 172 | .ui-corner-tl, 173 | .ui-corner-tr { 174 | border-radius: 0 !important; 175 | border-bottom-right-radius: 0 !important; 176 | border-bottom-left-radius: 0 !important; 177 | border-top-right-radius: 0 !important; 178 | border-top-left-radius: 0 !important; 179 | } 180 | } -------------------------------------------------------------------------------- /sass/hausautomatisierung_comsvg_style.scss: -------------------------------------------------------------------------------- 1 | @import "compass/reset"; 2 | 3 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); 4 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro); 5 | 6 | @import 'vars'; 7 | 8 | $grid-color: gray; 9 | $plotTextColor: $secondary-color; 10 | $backgroundColor: #fff; 11 | 12 | $svg-color-1: rgba(114,147,203,1); 13 | $svg-color-2: rgba(255,151,76,1); 14 | $svg-color-3: rgba(132,186,91,1); 15 | $svg-color-4: rgba(211,94,96,1); 16 | $svg-color-5: rgba(128,133,133,1); 17 | $svg-color-6: rgba(144,103,167,1); 18 | $svg-color-7: rgba(153,89,89,1); 19 | $svg-color-8: rgba(204,194,16,1); 20 | $svg-color-9: rgba(212,60,158,1); 21 | 22 | svg { 23 | font-family: 'Open Sans', sans-serif; 24 | 25 | .background { 26 | fill: #000; 27 | } 28 | 29 | circle#svgmarker { 30 | color: #278727; 31 | opacity: 0.5; 32 | } 33 | 34 | path.SVGplot { 35 | stroke: black; 36 | fill: none; 37 | } 38 | 39 | rect.SVGplot { 40 | stroke: black; 41 | fill: none; 42 | } 43 | 44 | polyline.SVGplot { 45 | stroke: gray; 46 | fill: none; 47 | } 48 | 49 | .border { 50 | stroke: $primary-color; 51 | fill: $backgroundColor; 52 | } 53 | 54 | .vgrid { 55 | stroke: $grid-color; 56 | stroke-dasharray: 2, 6; 57 | } 58 | 59 | .hgrid { 60 | stroke: $grid-color; 61 | stroke-dasharray: 2, 6; 62 | } 63 | 64 | .pasted { 65 | stroke: black; 66 | stroke-dasharray: 1, 1; 67 | } 68 | 69 | text { 70 | stroke: none !important; 71 | fill: $plotTextColor; 72 | font-size: 11px; 73 | 74 | &.title { 75 | fill: $plotTextColor; 76 | font-size: 16px; 77 | text-transform: uppercase; 78 | letter-spacing: 10px; 79 | } 80 | 81 | &.legend { 82 | cursor: pointer; 83 | } 84 | } 85 | } 86 | 87 | .SVGplot.l0 { stroke: $svg-color-1; } 88 | .SVGplot.l1 { stroke: $svg-color-2; } 89 | .SVGplot.l2 { stroke: $svg-color-3; } 90 | .SVGplot.l3 { stroke: $svg-color-4; } 91 | .SVGplot.l4 { stroke: $svg-color-5; } 92 | .SVGplot.l5 { stroke: $svg-color-6; } 93 | .SVGplot.l6 { stroke: $svg-color-7; } 94 | .SVGplot.l7 { stroke: $svg-color-8; } 95 | .SVGplot.l8 { stroke: $svg-color-9; } 96 | .SVGplot.l0fill { stroke: $svg-color-1; fill: rgba(114,147,203,0.3); } 97 | .SVGplot.l1fill { stroke: $svg-color-2; fill: rgba(255,151,76,0.3); } 98 | .SVGplot.l2fill { stroke: $svg-color-3; fill: rgba(132,186,91,0.3); } 99 | .SVGplot.l3fill { stroke: $svg-color-4; fill: rgba(211,94,96,0.3); } 100 | .SVGplot.l4fill { stroke: $svg-color-5; fill: rgba(128,133,133,0.3); } 101 | .SVGplot.l5fill { stroke: $svg-color-6; fill: rgba(144,103,167,0.3); } 102 | .SVGplot.l6fill { stroke: $svg-color-7; fill: rgba(153,89,89,0.3); } 103 | .SVGplot.l7fill { stroke: $svg-color-8; fill: rgba(204,194,16,0.3); } 104 | .SVGplot.l8fill { stroke: $svg-color-9; fill: rgba(212,60,158,0.3); } 105 | .SVGplot.l0dot { stroke: $svg-color-1; stroke-dasharray: 2,4; } 106 | .SVGplot.l1dot { stroke: $svg-color-2; stroke-dasharray: 2,4; } 107 | .SVGplot.l2dot { stroke: $svg-color-3; stroke-dasharray: 2,4; } 108 | .SVGplot.l3dot { stroke: $svg-color-4; stroke-dasharray: 2,4; } 109 | .SVGplot.l4dot { stroke: $svg-color-5; stroke-dasharray: 2,4; } 110 | .SVGplot.l5dot { stroke: $svg-color-6; stroke-dasharray: 2,4; } 111 | .SVGplot.l6dot { stroke: $svg-color-7; stroke-dasharray: 2,4; } 112 | .SVGplot.l7dot { stroke: $svg-color-8; stroke-dasharray: 2,4; } 113 | .SVGplot.l8dot { stroke: $svg-color-9; stroke-dasharray: 2,4; } 114 | .SVGplot.l0fill_stripe { stroke: $svg-color-1; fill: url(#gr0_stripe); } 115 | .SVGplot.l1fill_stripe { stroke: $svg-color-2; fill: url(#gr1_stripe); } 116 | .SVGplot.l0fill_gyr { stroke: $svg-color-1; fill: url(#gr0_gyr); } 117 | 118 | text.SVGplot.l0 { stroke: none; fill: $svg-color-1; } 119 | text.SVGplot.l1 { stroke: none; fill: $svg-color-2; } 120 | text.SVGplot.l2 { stroke: none; fill: $svg-color-3; } 121 | text.SVGplot.l3 { stroke: none; fill: $svg-color-4; } 122 | text.SVGplot.l4 { stroke: none; fill: $svg-color-5; } 123 | text.SVGplot.l5 { stroke: none; fill: $svg-color-6; } 124 | text.SVGplot.l6 { stroke: none; fill: $svg-color-7; } 125 | text.SVGplot.l7 { stroke: none; fill: $svg-color-8; } 126 | text.SVGplot.l8 { stroke: none; fill: $svg-color-9; } 127 | text.SVGplot.l0fill { stroke: none; fill: $svg-color-1; } 128 | text.SVGplot.l1fill { stroke: none; fill: $svg-color-2; } 129 | text.SVGplot.l2fill { stroke: none; fill: $svg-color-3; } 130 | text.SVGplot.l3fill { stroke: none; fill: $svg-color-4; } 131 | text.SVGplot.l4fill { stroke: none; fill: $svg-color-5; } 132 | text.SVGplot.l5fill { stroke: none; fill: $svg-color-6; } 133 | text.SVGplot.l6fill { stroke: none; fill: $svg-color-7; } 134 | text.SVGplot.l7fill { stroke: none; fill: $svg-color-8; } 135 | text.SVGplot.l8fill { stroke: none; fill: $svg-color-9; } 136 | text.SVGplot.l0dot { stroke: none; fill: $svg-color-1; } 137 | text.SVGplot.l1dot { stroke: none; fill: $svg-color-2; } 138 | text.SVGplot.l2dot { stroke: none; fill: $svg-color-3; } 139 | text.SVGplot.l3dot { stroke: none; fill: $svg-color-4; } 140 | text.SVGplot.l4dot { stroke: none; fill: $svg-color-5; } 141 | text.SVGplot.l5dot { stroke: none; fill: $svg-color-6; } 142 | text.SVGplot.l6dot { stroke: none; fill: $svg-color-7; } 143 | text.SVGplot.l7dot { stroke: none; fill: $svg-color-8; } 144 | text.SVGplot.l8dot { stroke: none; fill: $svg-color-9; } 145 | text.SVGplot.l0fill_stripe {stroke: none; fill: $svg-color-1; } 146 | text.SVGplot.l1fill_stripe {stroke: none; fill: $svg-color-2; } 147 | text.SVGplot.l0fill_gyr {stroke: none; fill: $svg-color-1; } 148 | -------------------------------------------------------------------------------- /www/pgm2/hausautomatisierung_comsvg_style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); 2 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro); 3 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } 4 | 5 | html { line-height: 1; } 6 | 7 | ol, ul { list-style: none; } 8 | 9 | table { border-collapse: collapse; border-spacing: 0; } 10 | 11 | caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } 12 | 13 | q, blockquote { quotes: none; } 14 | q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } 15 | 16 | a img { border: none; } 17 | 18 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } 19 | 20 | svg { font-family: 'Open Sans', sans-serif; } 21 | svg .background { fill: #000; } 22 | svg circle#svgmarker { color: #278727; opacity: 0.5; } 23 | svg path.SVGplot { stroke: black; fill: none; } 24 | svg rect.SVGplot { stroke: black; fill: none; } 25 | svg polyline.SVGplot { stroke: gray; fill: none; } 26 | svg .border { stroke: #e56524; fill: #fff; } 27 | svg .vgrid { stroke: gray; stroke-dasharray: 2, 6; } 28 | svg .hgrid { stroke: gray; stroke-dasharray: 2, 6; } 29 | svg .pasted { stroke: black; stroke-dasharray: 1, 1; } 30 | svg text { stroke: none !important; fill: #676f7a; font-size: 11px; } 31 | svg text.title { fill: #676f7a; font-size: 16px; text-transform: uppercase; letter-spacing: 10px; } 32 | svg text.legend { cursor: pointer; } 33 | 34 | .SVGplot.l0 { stroke: #7293cb; } 35 | 36 | .SVGplot.l1 { stroke: #ff974c; } 37 | 38 | .SVGplot.l2 { stroke: #84ba5b; } 39 | 40 | .SVGplot.l3 { stroke: #d35e60; } 41 | 42 | .SVGplot.l4 { stroke: #808585; } 43 | 44 | .SVGplot.l5 { stroke: #9067a7; } 45 | 46 | .SVGplot.l6 { stroke: #995959; } 47 | 48 | .SVGplot.l7 { stroke: #ccc210; } 49 | 50 | .SVGplot.l8 { stroke: #d43c9e; } 51 | 52 | .SVGplot.l0fill { stroke: #7293cb; fill: rgba(114, 147, 203, 0.3); } 53 | 54 | .SVGplot.l1fill { stroke: #ff974c; fill: rgba(255, 151, 76, 0.3); } 55 | 56 | .SVGplot.l2fill { stroke: #84ba5b; fill: rgba(132, 186, 91, 0.3); } 57 | 58 | .SVGplot.l3fill { stroke: #d35e60; fill: rgba(211, 94, 96, 0.3); } 59 | 60 | .SVGplot.l4fill { stroke: #808585; fill: rgba(128, 133, 133, 0.3); } 61 | 62 | .SVGplot.l5fill { stroke: #9067a7; fill: rgba(144, 103, 167, 0.3); } 63 | 64 | .SVGplot.l6fill { stroke: #995959; fill: rgba(153, 89, 89, 0.3); } 65 | 66 | .SVGplot.l7fill { stroke: #ccc210; fill: rgba(204, 194, 16, 0.3); } 67 | 68 | .SVGplot.l8fill { stroke: #d43c9e; fill: rgba(212, 60, 158, 0.3); } 69 | 70 | .SVGplot.l0dot { stroke: #7293cb; stroke-dasharray: 2,4; } 71 | 72 | .SVGplot.l1dot { stroke: #ff974c; stroke-dasharray: 2,4; } 73 | 74 | .SVGplot.l2dot { stroke: #84ba5b; stroke-dasharray: 2,4; } 75 | 76 | .SVGplot.l3dot { stroke: #d35e60; stroke-dasharray: 2,4; } 77 | 78 | .SVGplot.l4dot { stroke: #808585; stroke-dasharray: 2,4; } 79 | 80 | .SVGplot.l5dot { stroke: #9067a7; stroke-dasharray: 2,4; } 81 | 82 | .SVGplot.l6dot { stroke: #995959; stroke-dasharray: 2,4; } 83 | 84 | .SVGplot.l7dot { stroke: #ccc210; stroke-dasharray: 2,4; } 85 | 86 | .SVGplot.l8dot { stroke: #d43c9e; stroke-dasharray: 2,4; } 87 | 88 | .SVGplot.l0fill_stripe { stroke: #7293cb; fill: url(#gr0_stripe); } 89 | 90 | .SVGplot.l1fill_stripe { stroke: #ff974c; fill: url(#gr1_stripe); } 91 | 92 | .SVGplot.l0fill_gyr { stroke: #7293cb; fill: url(#gr0_gyr); } 93 | 94 | text.SVGplot.l0 { stroke: none; fill: #7293cb; } 95 | 96 | text.SVGplot.l1 { stroke: none; fill: #ff974c; } 97 | 98 | text.SVGplot.l2 { stroke: none; fill: #84ba5b; } 99 | 100 | text.SVGplot.l3 { stroke: none; fill: #d35e60; } 101 | 102 | text.SVGplot.l4 { stroke: none; fill: #808585; } 103 | 104 | text.SVGplot.l5 { stroke: none; fill: #9067a7; } 105 | 106 | text.SVGplot.l6 { stroke: none; fill: #995959; } 107 | 108 | text.SVGplot.l7 { stroke: none; fill: #ccc210; } 109 | 110 | text.SVGplot.l8 { stroke: none; fill: #d43c9e; } 111 | 112 | text.SVGplot.l0fill { stroke: none; fill: #7293cb; } 113 | 114 | text.SVGplot.l1fill { stroke: none; fill: #ff974c; } 115 | 116 | text.SVGplot.l2fill { stroke: none; fill: #84ba5b; } 117 | 118 | text.SVGplot.l3fill { stroke: none; fill: #d35e60; } 119 | 120 | text.SVGplot.l4fill { stroke: none; fill: #808585; } 121 | 122 | text.SVGplot.l5fill { stroke: none; fill: #9067a7; } 123 | 124 | text.SVGplot.l6fill { stroke: none; fill: #995959; } 125 | 126 | text.SVGplot.l7fill { stroke: none; fill: #ccc210; } 127 | 128 | text.SVGplot.l8fill { stroke: none; fill: #d43c9e; } 129 | 130 | text.SVGplot.l0dot { stroke: none; fill: #7293cb; } 131 | 132 | text.SVGplot.l1dot { stroke: none; fill: #ff974c; } 133 | 134 | text.SVGplot.l2dot { stroke: none; fill: #84ba5b; } 135 | 136 | text.SVGplot.l3dot { stroke: none; fill: #d35e60; } 137 | 138 | text.SVGplot.l4dot { stroke: none; fill: #808585; } 139 | 140 | text.SVGplot.l5dot { stroke: none; fill: #9067a7; } 141 | 142 | text.SVGplot.l6dot { stroke: none; fill: #995959; } 143 | 144 | text.SVGplot.l7dot { stroke: none; fill: #ccc210; } 145 | 146 | text.SVGplot.l8dot { stroke: none; fill: #d43c9e; } 147 | 148 | text.SVGplot.l0fill_stripe { stroke: none; fill: #7293cb; } 149 | 150 | text.SVGplot.l1fill_stripe { stroke: none; fill: #ff974c; } 151 | 152 | text.SVGplot.l0fill_gyr { stroke: none; fill: #7293cb; } 153 | -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/router.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | router 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /www/pgm2/hausautomatisierung_comfloorplanstyle.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); 2 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro); 3 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } 4 | 5 | html { line-height: 1; } 6 | 7 | ol, ul { list-style: none; } 8 | 9 | table { border-collapse: collapse; border-spacing: 0; } 10 | 11 | caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } 12 | 13 | q, blockquote { quotes: none; } 14 | q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } 15 | 16 | a img { border: none; } 17 | 18 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } 19 | 20 | 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; } 21 | 22 | div { font-family: 'Open Sans', sans-serif !important; font-size: 13px !important; } 23 | 24 | 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; } 25 | 26 | body.dashboard_fullsize #menuScrollArea, body.dashboard_fullsize #hdr, div.ui-dialog div.ui-dialog-titlebar { display: none; } 27 | 28 | a { color: #e56524; text-decoration: none; } 29 | 30 | button.dist { border: 0; cursor: pointer; margin: 10px; } 31 | 32 | #logo { background: url(../hausautomatisierung-com/images/haus_automatisierung.png) no-repeat; height: 120px; margin-left: 40px; margin-top: 10px; position: fixed; width: 220px; } 33 | #logo .theme-version { opacity: 0.7; font-weight: bold; } 34 | #logo #clock { opacity: 0.7; position: absolute; font-weight: bold; right: 0; top: 0; } 35 | 36 | #content, #right { bottom: 20px; position: absolute; right: 10px; top: 50px; } 37 | 38 | #content, #hdr, #right { left: 320px; } 39 | 40 | input[type="text"] { border: 1px #e56524 solid; background: none; } 41 | 42 | #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; } 43 | #hdr .header { display: inline-block; } 44 | #hdr input.maininput { color: #e56524; font-size: 16px; box-sizing: border-box; } 45 | #hdr input.maininput:focus { outline: none; } 46 | #hdr .maininputPopupLink { background-image: url('data:image/svg+xml;utf8,'); cursor: pointer; width: 22px; height: 22px; display: inline-block; } 47 | #hdr.header--hidden { -webkit-transform: translateY(-110%); -ms-transform: translateY(-110%); transform: translateY(-110%); } 48 | 49 | #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; } 50 | #errmsg:after { content: ' !!!!'; } 51 | #errmsg:before { content: '!!!! '; } 52 | 53 | embed { margin-bottom: 10px; } 54 | 55 | select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; } 56 | 57 | body { color: #e56524; } 58 | 59 | #logo { top: 0; right: 40px; } 60 | 61 | #menu { position: absolute; top: 0; right: 0; margin-right: 20px; margin-top: 140px; width: 260px; z-index: 9999; } 62 | #menu table { border-collapse: collapse; border-radius: 0; width: 100%; } 63 | #menu a { background: #fff; color: #676f7a; display: block; padding: 10px 15px; position: relative; z-index: 9999; line-height: 15px; } 64 | 65 | #backimg { background: #fff; position: absolute; top: 10px; left: 10px; width: auto !important; height: auto !important; } 66 | 67 | #fpmenu.fp_arrange { line-height: 35px; background: #fff; padding: 10px; position: absolute; bottom: 20px; right: 20px; z-index: 9999; } 68 | #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; } 69 | #fpmenu.fp_arrange input[disabled] { background: #ccc !important; } 70 | #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; } 71 | #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; } 72 | 73 | .devicename > td { font-weight: bold; } 74 | 75 | .devicestate > td { text-align: center; } 76 | 77 | .devicecommands { font-size: 14px; text-align: center; } 78 | 79 | .devicetimestamp { font-size: 10px; text-align: center; } 80 | 81 | svg { height: 32px; width: 32px; margin: 5px; } 82 | -------------------------------------------------------------------------------- /www/images/hausautomatisierung_com/weather.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | weather 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /sass/unsorted.old: -------------------------------------------------------------------------------- 1 | 2 | 3 | #fpmenu input[type="submit"] { 4 | width: 80px; 5 | } 6 | 7 | #fpmenu select { 8 | margin: 5px 10px; 9 | width: 500px; 10 | } 11 | 12 | #fpmenu select:last-child { 13 | margin-bottom: 0; 14 | } 15 | 16 | #right { 17 | bottom: 5px; 18 | left: 180px; 19 | position: absolute; 20 | right: 5px; 21 | top: 20px; 22 | } 23 | 24 | .col2 { 25 | text-align: center; 26 | } 27 | 28 | .colorpicker_ct .slider { 29 | background: url(../jscolor/ct_background.svg); 30 | } 31 | 32 | .colorpicker_ct_mired .slider { 33 | background: url(../jscolor/ct_mired_background.svg); 34 | } 35 | 36 | .colorpicker_hue .slider { 37 | background: url(../jscolor/hue_background.svg); 38 | } 39 | 40 | .dashboard_widgetheader svg { 41 | margin-right: 5px; 42 | } 43 | 44 | .devType { 45 | padding-top: 20px; 46 | } 47 | 48 | .downText { 49 | margin-top: 2px; 50 | } 51 | 52 | .evo-cHist { 53 | padding: 3px; 54 | } 55 | 56 | .evo-cHist div { 57 | border: solid 1px silver; 58 | cursor: pointer; 59 | float: left; 60 | height: 10px; 61 | margin: 5px; 62 | padding: 3px; 63 | width: 10px; 64 | } 65 | 66 | .evo-color { 67 | padding: 1px 3px 0 4px; 68 | width: 94px; 69 | } 70 | 71 | .evo-color div { 72 | border: solid 1px gray; 73 | border-bottom: solid 1px silver; 74 | border-right: solid 1px silver; 75 | float: left; 76 | height: 10px; 77 | margin-bottom: 5px; 78 | padding: 3px; 79 | width: 10px; 80 | } 81 | 82 | .evo-color span { 83 | float: left; 84 | font-size: 15px; 85 | margin: 1px 0 4px 3px; 86 | } 87 | 88 | .evo-colorbox-ie { 89 | font-size: 8px; 90 | padding: 3px 9px !important; 91 | } 92 | 93 | .evo-colorind { 94 | position: relative; 95 | top: 2px; 96 | } 97 | 98 | .evo-colorind, .evo-colorind-ie, .evo-colorind-ff { 99 | border: solid 1px #c3c3c3; 100 | float: right; 101 | height: 20px; 102 | margin-top: 3px; 103 | width: 20px; 104 | } 105 | 106 | .evo-colorind-ie { 107 | position: relative; 108 | top: -23px; 109 | } 110 | 111 | .evo-colortxt-ie { 112 | position: relative; 113 | top: -6px; 114 | } 115 | 116 | .evo-more { 117 | font-size: smaller; 118 | padding: 4px 5px; 119 | } 120 | 121 | .evo-palcenter { 122 | padding: 5px; 123 | text-align: center; 124 | } 125 | 126 | .evo-palette div.sep { 127 | height: 3px; 128 | } 129 | 130 | .evo-palette td, .evo-palette-ie td { 131 | border: solid 1px silver; 132 | cursor: pointer; 133 | font-size: 1px; 134 | padding: 7px; 135 | } 136 | 137 | .evo-palette th, .evo-palette-ie th { 138 | border: 0; 139 | font-weight: 400; 140 | padding: 5px 3px; 141 | text-align: left; 142 | } 143 | 144 | .evo-palette tr.bottom td { 145 | border-top: 0; 146 | } 147 | 148 | .evo-palette tr.in td { 149 | border-bottom: 0; 150 | border-top: 0; 151 | } 152 | 153 | .evo-palette tr.top td { 154 | border-bottom: 0; 155 | } 156 | 157 | .evo-palette, .evo-palette-ie { 158 | border-collapse: expression(separate',cellSpacing='2px); 159 | border-spacing: 4px 0; 160 | } 161 | 162 | .evo-palette2 td { 163 | padding: 6px 7px; 164 | } 165 | 166 | .evo-palette2 td, .evo-palette2-ie td { 167 | cursor: pointer; 168 | font-size: 1px; 169 | } 170 | 171 | .evo-palette2, .evo-palette2-ie { 172 | border-collapse: collapse; 173 | margin: auto; 174 | } 175 | 176 | .evo-palette2-ie td, table.block td > div, table.block td > a { 177 | padding: 5px; 178 | } 179 | 180 | .evo-pointer { 181 | cursor: pointer; 182 | position: absolute; 183 | visibility: hidden; 184 | } 185 | 186 | .evo-pop { 187 | -index: 10000; 188 | border: 1px solid; 189 | padding: 3px 3px 0; 190 | width: 204px; 191 | } 192 | 193 | .evo-pop-ie { 194 | padding: 3px; 195 | width: 212px; 196 | z-index: 10000; 197 | } 198 | 199 | .evo-pop:after, .evo-pop-ie:after, .evo-colorind:after, .evo-colorind-ie:after, .evo-colorind-ff:after, .evo-color span:after, .evo-cHist:after { 200 | clear: both; 201 | content: "."; 202 | display: block; 203 | font-size: 0; 204 | height: 0; 205 | visibility: hidden; 206 | } 207 | 208 | .evo-sep { 209 | font-size: 0; 210 | height: 10px; 211 | } 212 | 213 | .rc_body { 214 | background: #C8C8B0; 215 | border-color: gray; 216 | border-style: solid; 217 | border-width: 2px; 218 | font-size: 6px; 219 | padding: 5px; 220 | } 221 | 222 | .rc_button { 223 | padding: 5px 7px; 224 | } 225 | 226 | .rc_button img { 227 | border-color: transparent; 228 | border-style: solid; 229 | border-width: 1px; 230 | } 231 | 232 | .rc_button img:active { 233 | border-color: gray; 234 | } 235 | 236 | .set .set { 237 | margin-bottom: 2px; 238 | margin-top: 3px; 239 | } 240 | 241 | 242 | 243 | .ui-button-text { 244 | color: #555 !important; 245 | font-weight: 400 !important; 246 | } 247 | 248 | .ui-corner-bottom, .ui-corner-top, .ui-corner-left, .ui-corner-right, .ui-corner-all, #dashboard .block.wide { 249 | border-radius: 0 !important; 250 | } 251 | 252 | .ui-state-highlight { 253 | height: 1.1em; 254 | line-height: 1.1em; 255 | } 256 | 257 | .ui-state-hover { 258 | background: #fff !important; 259 | border: 1px solid $primary-color !important; 260 | cursor: pointer; 261 | } 262 | 263 | .ui-widget { 264 | font-family: Arial, sans-serif !important; 265 | } 266 | 267 | .ui-widget-overlay { 268 | filter: Alpha(Opacity=30); 269 | height: 100%; 270 | left: 0; 271 | opacity: .7; 272 | position: fixed; 273 | top: 0; 274 | width: 100%; 275 | } 276 | 277 | a.evo-hist { 278 | margin-left: 6px; 279 | } 280 | 281 | div#svgmarker { 282 | background: #FFFFE7; 283 | border: 2px solid #278727; 284 | border-radius: 4px; 285 | color: #278727; 286 | max-width: 600px; 287 | padding: 6px 10px; 288 | position: absolute; 289 | text-align: left; 290 | z-index: 1005; 291 | } 292 | 293 | div.block { 294 | background: #F8F8E0; 295 | border: 1px solid gray; 296 | padding: .7em; 297 | } 298 | 299 | div.dist { 300 | padding-top: .3em; 301 | } 302 | 303 | div.ui-widget-content { 304 | background: #fff; 305 | } 306 | 307 | div.ui-widget-content a { 308 | color: #555 !important; 309 | } 310 | 311 | h2, h3, h4 { 312 | color: $primary-color; 313 | font-family: Arial, Sans-serif; 314 | line-height: 1.3; 315 | margin-top: 0; 316 | } 317 | 318 | img { 319 | border-style: none; 320 | } 321 | 322 | input { 323 | font-family: Arial, sans-serif; 324 | font-size: 16px; 325 | } 326 | 327 | pre { 328 | white-space: pre-wrap; 329 | } 330 | 331 | pre.log { 332 | background: #fff; 333 | color: #000; 334 | padding: 10px; 335 | } 336 | 337 | select [value^=l1] { 338 | color: green; 339 | } 340 | 341 | select [value^=l2] { 342 | color: blue; 343 | } 344 | 345 | select [value^=l3] { 346 | color: #FFC0CB; 347 | } 348 | 349 | select [value^=l4] { 350 | color: #A52A2A; 351 | } 352 | 353 | select [value^=l5] { 354 | color: #000; 355 | } 356 | 357 | select [value^=l6] { 358 | color: olive; 359 | } 360 | 361 | select [value^=l7] { 362 | color: gray; 363 | } 364 | 365 | select [value^=l8] { 366 | color: #FF0; 367 | } 368 | 369 | select.svgColumn { 370 | width: 50px; 371 | } 372 | 373 | select.svgRegexp { 374 | width: 120px; 375 | } 376 | 377 | select.svgSrc { 378 | width: 100px; 379 | } 380 | 381 | span.sort-item-delete-link { 382 | float: right; 383 | margin: 0 0 0 3px; 384 | padding: 0; 385 | vertical-align: middle; 386 | } 387 | 388 | 389 | ul.sortable-src li, ul.sortable-dest li { 390 | border-radius: 3px; 391 | color: #000 !important; 392 | font-size: .8em; 393 | line-height: 1.6em; 394 | margin: 3px; 395 | min-width: 120px; 396 | padding: 2px 2px 2px 4px; 397 | text-align: left; 398 | vertical-align: middle; 399 | } 400 | 401 | ul.sortable-src, ul.sortable-dest { 402 | background: #eee; 403 | border: 2px solid #000; 404 | border-radius: 3px; 405 | list-style-type: none; 406 | margin: 3px; 407 | min-height: 1.8em; 408 | min-width: 130px; 409 | padding: 2px; 410 | vertical-align: middle; 411 | } -------------------------------------------------------------------------------- /www/pgm2/hausautomatisierung_com.js: -------------------------------------------------------------------------------- 1 | 2 | function getClock() { 3 | var d = new Date(); 4 | nhour = d.getHours(); 5 | nmin = d.getMinutes(); 6 | 7 | if (nhour <= 9) { 8 | nhour = '0' + nhour; 9 | } 10 | 11 | if (nmin <= 9) { 12 | nmin = '0' + nmin; 13 | } 14 | 15 | document.getElementById('clock').innerHTML = nhour + ':' + nmin + ' Uhr'; 16 | 17 | setTimeout(getClock, 1000); 18 | } 19 | 20 | jQuery(document).ready(function ($) { 21 | 22 | var themeVersion = '2.19'; 23 | 24 | // attr WEB hiddenroom input -> Ansicht anpassen 25 | if ($('#hdr .maininput').length == 0) { 26 | $('#hdr').hide(); 27 | $('#content').css({top: '10px'}); 28 | } else { 29 | // Link mit Popup Button 30 | $('
') 31 | .appendTo("#hdr") 32 | .click(function () { 33 | var hasCodeMirror = typeof AddCodeMirror == 'function'; 34 | 35 | var textArea = $('