iobroker.smartcontrol/admin/style.css

Control devices smarter: by grouping, including triggers like motion, opening window, etc. and set target devices accordingly

/* ------------------- CSS style provided by ioBroker Adapter Creator ------------------- */
* { box-sizing: border-box; }
.m { overflow: initial; /* Don't cut off dropdowns! */ }
/* -------------------------------------------------------------------------------------- */

/* Required to avoid y-scrollbar. */
.modal { max-height:85% !important; }
.m .page {height: auto !important; min-height:75% !important; }

/* span */
.m span { font-size: 1.0em !important }  /* span is set to 0.9em for some unknown reason, we set back to 1.0em  */
.m .dialog-config-buttons span { font-size: 0.9em !important }  /* leave span at 0.9em for the save/cancel etc. buttons  */


/* Header section "Smart Control -- Controlling ioBroker smarter..." */
#header-area {margin-top: 5px; margin-bottom: 1px; background-color:#174475;}
#header-area #header-logo-title .logo {float:left; margin-right: 10px;}
#header-area #header-logo-title p {line-height: normal !important; margin: 0 !important; padding: 8px 0 0 8px;}
#header-area #header-logo-title p>span.h-title {font-size: 2em !important; color:white; }
#header-area #header-logo-title p>span.h-sub-title {font-size: 1.1em !important; color:white; font-style: italic; }


/* Tabs menu */
.m .tabs .tab a { color: rgba(13, 134, 231, 0.7); } /* Color */
.m .tabs .tab a { padding: 0 5px; } /* space of x px at beginning and end of text  */
.m .tabs .active { border-bottom: 2px solid #0d47a1; font-weight: bold;}
.m .tabs .tab a.active, .m .tabs .tab a:hover { color:#0d47a1; }
.m .tabs .tab a:hover { border-bottom: 2px solid #46a0e9 !important; }
.m .row .col.m1 { width: 14%; } 
#tab-area { padding-left:0;padding-right:0; margin-top: 0px; margin-bottom: 1px; background-color:#174475; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) }

/* Tabs menu react-dark */
.m.react-dark .tabs .tab a.active, .m .tabs .tab a:hover { color: #2196f3; }
.m.react-dark .tabs { background-color: #272727 !important;}
.m.react-dark .md-import { background-color: #E0EBF3; color:yellow !important;}

/* Tabs menu react-blue */
.m.react-blue .tabs .tab a.active, .m .tabs .tab a:hover { color: #2196f3; }
.m.react-blue .tabs { background-color: #272727 !important;}
.m.react-blue .md-import { background-color: #E0EBF3; color:yellow !important;}

/* Table header */
table.table-values th.header { background-color:#64BfF6; font-size:90%; text-align:center; line-height: 1em; padding:6px 2px;}

/* Table header -- Optional column */
table.table-values th.mOptional { color:#c9e7fa }

/* format second column of option tables */
table.table-values tr td:nth-child(2) input { font-weight:bold; }
/* but not tableZoneExecution */
#tableZoneExecution table.table-values tr td:nth-child(2) input { font-weight:normal; }


/* specific format of second column of tableCombinedDevices */
#tableCombinedDevices table.table-values tr td:nth-child(2) input { width: 40% !important; font-family: monospace; }
#tableCombinedDevices table.table-values tr td:nth-child(2)::before { content: "smartcontrol.x.combinedDevices."; font-size:1.1em; font-family: monospace; color:#585858;  }

/* to be able to adjust column width accordingly */
table.table-values { table-layout:fixed; }

/* Table Zones: Hide execution option rows */
#tableZones th:nth-of-type(14) { visibility: hidden; display: none; }
#tableZones td:nth-of-type(14) { visibility: hidden; display: none; }
#tableZones th:nth-of-type(15) { visibility: hidden; display: none; }
#tableZones td:nth-of-type(15) { visibility: hidden; display: none; }

/* add space at top/bottom */
.spaceTop3em {margin-top: 3em; }
.spaceBottom3em {margin-top: 3em; }

/* Introduction section */
.intro {font-size: 18px;}
.intro h5 {font-size: 1.5em;}
ol.instr li {font-size: .9em;}
ol.instr li:not(:last-child) { margin-bottom: .6em; }

/* Different format for h6 */
h6.hBlock { background-color: #184473 !important; padding:7px 0 7px 7px !important; border-radius: 3px; color:white; font-size:1.2em; }

/* Code */
code { padding: 2px 4px; font-size: 1.05em !important; color: #2696ef; background-color: rgba(101, 190, 246, 0.05); border-radius: 0; }

/* Links */
.page a:link, .page a:visited { color: #0d47a1;}      /* unvisited link */
.page a:visited { color:#616e83; } /* visited link */
.page a:visited { color:#2696ef; } /* visited link */
.page a:hover { text-decoration: underline; } /* mouse over link */
.page a:active { color: #0d47a1; } /* selected link */

/* ****** collapsible sections ****** */
/* collapsible: general ****** */
.collapsible-header { background-color: #c8e4fa69 !important;}
.collapsible-header { padding-top:3px !important; padding-bottom:5px !important;}
.collapsible-header i { padding-top:3px; }
.collapsible-header h5 { font-weight: bold; font-size:1.3em; margin-top:0.7em; }
.collapsible-body ol li {font-size: 1.1em;}
.collapsible-body ol li:not(:last-child) { margin-bottom: .6em; }
.collapsible-body p { font-size: 1.1em; }
.collapsible-body code { font-size: 1.1em !important }
.collapsible-body td:nth-child(1) { font-weight:normal; color: #0d47a1; width: 200px; } /* Format first column */
.collapsible-body table {font-size: 1.0em;}
.collapsible-body th {background-color: #c8e4fa69;}

/* collapsible: Config Table Header/Documentation ****** */
.collapsible-header.config-section    { background-color: #174475 !important; }
.collapsible-header.config-section i.material-icons { color:#fff; } /* icon color */
.collapsible-header.config-section h5 { color:#fff; }
.collapsible-header.config-section { display: flex; justify-content: space-between; } /* for right alignment of question mark icon */
.collapsible-header.config-section i.material-icons { padding-right: 0; margin-right: 0;}

/* collapsible: Documentation ****** */
.collapsible-body.instructions td { line-height: 1.7em; }

/* For selectID.js (node_modules/iobroker.admin/www/lib/js/) */
#dialog-select-member { z-index: 9999 !important; width:calc(100% - 150px) !important; max-height: 75% !important; }
#dialog-select-member .modal-footer { width:calc(100% - 20px) !important; }
#dialog-select-member .modal-content span {font-size:1.0em !important;}
#dialog-select-member .main-toolbar-table {height: 28px !important;}
#dialog-select-member .panel-button {height:28px !important; width:28px !important;}

/* Line hight for p */
.collapsible-body p {line-height: 1.6em !important;}

/* Filter for tables */
.table-filter input    { color:#2696ef !important; padding-left: 5px !important; font-weight:bold; width: 200px !important; margin:0 0 0 20px !important;  height: 2.5rem !important;}
.table-filter button   { left: -27px; width: 1.6em !important; height: 1.6em !important;}
.table-filter button i {font-size: .9rem !important; line-height: 1rem !important; }

/* FancyTree for Selecting Target Devices */

#dialog-select-settings { overflow-y: hidden !important ;}
#dialog-select-settings ul.fancytree-container { overflow-y: scroll; height: calc(100% - 250px); } /* prevent vertical scroll */
#dialog-select-settings input.fancy-filter { color:#2696ef !important; padding-left: 5px !important; width: 200px !important; margin:0 0 0 25px !important;  height: 2.5rem !important;}
#dialog-select-settings div#matches  { margin-left: -20px !important; display:inline-block !important; }
#dialog-select-settings button#btnResetSearch { left: 230px; width: 1.6em !important; height: 1.6em !important;}
#dialog-select-settings button#btnResetSearch i {font-size: .9rem !important; line-height: 1rem !important; }
#dialog-select-settings a#fancy-collapse-all, #dialog-select-settings a#fancy-expand-all {width: 2em !important; height: 2em !important;}
#dialog-select-settings a#fancy-collapse-all>i, #dialog-select-settings a#fancy-expand-all>i {font-size: .9rem !important; line-height: 1.8em !important; }
#dialog-select-settings .modal-content div.row>p {margin:0 !important;}
#dialog-select-settings ul.fancytree-container li { padding-left: 1.3em !important; }
#dialog-select-settings ul.fancytree-container>li { padding-left:0px !important; }
#dialog-select-settings ul.fancytree-container {padding: 10px 3px 10px 3px !important;}
#dialog-select-settings span.fancytree-node {margin-top: 5px; margin-bottom:5px;}
#dialog-select-settings span.fancytree-selected span.fancytree-title { background-color: #2696ef !important; color:white; font-style: normal !important; }
#dialog-select-settings .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title {background-color: #cbe8f6; color:black; font-style: normal;}
#dialog-select-settings .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-selected span.fancytree-title {background-color: #2696ef; color:white; font-style: normal;}
#dialog-select-settings span.fancytree-title {font-size:16px !important;}
/* #dialog-select-settings #fancy-explanation {font-size:.9em; font-style: italic; color:#21448f} */
#dialog-select-settings #fancytree-select-settings {display:inline !important}
#dialog-select-settings .modal-content {padding-bottom: 0 !important; padding-right: 0 !important; height: calc(100% - 50px)!important }

.m.react-dark #dialog-select-settings ul.fancytree-container {
    background-color: #272727;
}
.m.react-blue #dialog-select-settings ul.fancytree-container {
    background-color: #272727;
}

.m.react-dark #dialog-select-settings span.fancytree-title:hover {
    background-color: rgb(59, 59, 59);
}
.m.react-blue #dialog-select-settings span.fancytree-title:hover {
    background-color: rgb(59, 59, 59);
}
/* Dialog called once SAVE button clicked and verification failed */
#dialog-save-verification div.error-section { font-size: 1.3em; }
#dialog-save-verification div.error-section ol>li { color:#d92626; padding-bottom:0.5em !important; }
#dialog-save-verification { width: 50%  !important; height: 50% !important;}
#dialog-save-verification .further-info {font-size:.75em;}
#dialog-save-verification h6.title { background-color: #d92626 !important; }
#dialog-save-verification .modal-footer .btn { background-color: #d92626 !important;; }

/* Dialog for Zone Execution Config */
#dialog-configure-zone-execution { width: 90% !important; height: 80% !important}


#tableTriggerDevices td div.userstates {
    color:#21448f;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-style:italic;
    font-weight:bold;
    font-size:.8em !important;
    width:100% !important;
}

/* Translation required */
p.translation-required { font-style:italic; color:#21448f; font-size:14px !important; line-height: 14px !important;}