diff options
author | Alexander Shubin <aleksandrs.subins@zabbix.com> | 2022-07-05 17:42:43 +0300 |
---|---|---|
committer | Alexander Shubin <aleksandrs.subins@zabbix.com> | 2022-07-05 17:42:43 +0300 |
commit | bf2ee5b9cc17afa80f960e2931f3cc4251bbd98a (patch) | |
tree | 1bb77efd7c4312fbc3b16be94c1ab66b278616f5 /ui | |
parent | 4661449db9dad9f3566128e181aa4b67298aa252 (diff) |
..F....... [ZBX-20908] fixed interface type labels in host edit form
Diffstat (limited to 'ui')
-rw-r--r-- | ui/app/partials/configuration.host.edit.html.php | 8 | ||||
-rw-r--r-- | ui/assets/styles/blue-theme.css | 102 | ||||
-rw-r--r-- | ui/assets/styles/dark-theme.css | 102 | ||||
-rw-r--r-- | ui/assets/styles/hc-dark.css | 115 | ||||
-rw-r--r-- | ui/assets/styles/hc-light.css | 115 | ||||
-rw-r--r-- | ui/include/defines.inc.php | 1 | ||||
-rw-r--r-- | ui/include/views/configuration.host.prototype.edit.php | 3 | ||||
-rw-r--r-- | ui/js/hostinterfacemanager.js | 7 |
8 files changed, 246 insertions, 207 deletions
diff --git a/ui/app/partials/configuration.host.edit.html.php b/ui/app/partials/configuration.host.edit.html.php index a1a2f97df3d..19f5cc1b093 100644 --- a/ui/app/partials/configuration.host.edit.html.php +++ b/ui/app/partials/configuration.host.edit.html.php @@ -251,7 +251,13 @@ $host_tab ->addItem([ new CLabel(_('Interfaces')), new CFormField([ - new CDiv([renderInterfaceHeaders(), $agent_interfaces, $snmp_interfaces, $jmx_interfaces, $ipmi_interfaces]), + (new CDiv([ + renderInterfaceHeaders(), + $agent_interfaces, + $snmp_interfaces, + $jmx_interfaces, + $ipmi_interfaces + ]))->addClass(ZBX_STYLE_HOST_INTERFACES), $host_is_discovered ? null : new CDiv( diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css index a013ca1d3b4..4c21e63bb6d 100644 --- a/ui/assets/styles/blue-theme.css +++ b/ui/assets/styles/blue-theme.css @@ -3831,7 +3831,7 @@ button { background-color: #e8f5ff; border-color: #02659f; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { position: relative; background-color: transparent; border: 0; @@ -3841,14 +3841,14 @@ button { font-size: inherit; padding: 0; min-height: inherit; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { outline: none; margin-bottom: -2px !important; border-bottom: 2px solid rgba(2, 117, 184, 0.5); box-shadow: 0 0 0 0 !important; } - .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle { + .btn-link[disabled] { background-color: transparent; } - .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover { + .btn-link[disabled]:hover { background-color: transparent; } .btn-kiosk { @@ -3893,10 +3893,10 @@ button { .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; } .btn-widget-edit { @@ -4176,7 +4176,7 @@ button { .btn-dashboard-normal { box-shadow: 1px 1px 2px rgba(118, 141, 153, 0.5); } -.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { +.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock { width: 24px; height: 24px; margin: 2px 2px 0 0; } @@ -4185,13 +4185,13 @@ button { width: 24px; height: 24px; } -.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf { +.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle { border: 0; min-height: 0; padding: 0; opacity: .5; transition: opacity .2s ease-out; } - .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active { + .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active { background-color: transparent; opacity: .25; } @@ -4220,7 +4220,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .inaccessible .subfilter-enabled { color: #bfbfbf; } -.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active { +.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active { background-color: transparent; opacity: 1; } @@ -5944,7 +5944,7 @@ svg { .preprocessing-list select { width: 100%; min-width: 0; } - .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) { + .preprocessing-list .btn-link:not(:last-of-type) { margin-right: 10px; } .preprocessing-list .preprocessing-list-head, .preprocessing-list .preprocessing-list-foot, @@ -6746,44 +6746,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu /* for IE11 only. Fixed cell height if table has 100% height */ .host-avail-widget td { height: 100%; } } -.interface-container { - width: fit-content; - width: -moz-fit-content; - padding-left: 0; } - .interface-container:not(.interface-container-header):not(:empty) { - margin-bottom: 5px; } - .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) { - border-top: 1px solid #acbbc2; - padding-top: 10px; } - .interface-container:empty { - display: none; } - .interface-container .interface-row { - display: grid; - grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr; - grid-template-rows: 24px 1fr; - gap: 5px; } - .interface-container .interface-row:not(:first-of-type) { - margin-top: 5px; } - .interface-container .interface-row[data-type] .interface-cell-details { - display: none; - grid-column: 1/-1; } - .interface-container .interface-row .interface-cell { - align-self: center; } - .interface-container .interface-row .interface-cell .interface-btn-toggle { - display: none; } - .interface-container .interface-row .interface-cell.interface-cell-header { - color: #768d99; - text-align: left; } - .interface-container .interface-row .interface-cell .table-forms-td-left, - .interface-container .interface-row .interface-cell .table-forms-td-right { - padding-bottom: 0; } +.table-forms-td-right .interfaces { + margin-top: 5px; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body { - display: none; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body { - display: block; } -.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { - display: inline-block; } +.interfaces { + display: grid; + grid-template-columns: 26px repeat(7, max-content); + margin-bottom: 5px; + line-height: 24px; } + .interfaces .interface-container { + display: contents; } + .interfaces .interface-container.interface-container-header .interface-cell { + padding: 0 5px 0 0; + color: #768d99; } + .interfaces .interface-container.interface-container-header .interface-cell-action { + grid-column: span 2; } + .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) { + padding-top: 10px; + margin-top: 5px; + border-top: 1px solid #acbbc2; } + .interfaces .interface-row { + display: contents; } + .interfaces .interface-row[data-type="2"] .interface-btn-toggle { + display: inline-block; + width: 24px; + height: 24px; + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; } + .interfaces .interface-row[data-type="2"] .list-accordion-item-body { + display: none; + padding-top: 0; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body { + display: block; } + .interfaces .interface-cell { + padding: 5px 5px 5px 0; } + .interfaces .interface-cell.interface-cell-details { + display: none; + grid-column: 1 / -1; } + .interfaces .interface-btn-toggle { + display: none; + vertical-align: top; } + .interfaces .no-interface { + grid-column: 1 / -1; + color: #768d99; } .debug-modal.overlay-dialogue.modal .overlay-dialogue-body { overflow-x: auto; } diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css index 23984b4c79e..4763e28b245 100644 --- a/ui/assets/styles/dark-theme.css +++ b/ui/assets/styles/dark-theme.css @@ -3842,7 +3842,7 @@ button { background-color: #414141; border-color: #768d99; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { position: relative; background-color: transparent; border: 0; @@ -3852,14 +3852,14 @@ button { font-size: inherit; padding: 0; min-height: inherit; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { outline: none; margin-bottom: -2px !important; border-bottom: 2px solid rgba(71, 150, 196, 0.5); box-shadow: 0 0 0 0 !important; } - .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle { + .btn-link[disabled] { background-color: transparent; } - .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover { + .btn-link[disabled]:hover { background-color: transparent; } .btn-kiosk { @@ -3904,10 +3904,10 @@ button { .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; } .btn-widget-edit { @@ -4187,7 +4187,7 @@ button { .btn-dashboard-normal { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } -.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { +.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock { width: 24px; height: 24px; margin: 2px 2px 0 0; } @@ -4196,13 +4196,13 @@ button { width: 24px; height: 24px; } -.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf { +.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle { border: 0; min-height: 0; padding: 0; opacity: .5; transition: opacity .2s ease-out; } - .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active { + .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active { background-color: transparent; opacity: .25; } @@ -4231,7 +4231,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .inaccessible .subfilter-enabled { color: #b2b2b2; } -.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active { +.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active { background-color: transparent; opacity: 1; } @@ -5955,7 +5955,7 @@ svg { .preprocessing-list select { width: 100%; min-width: 0; } - .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) { + .preprocessing-list .btn-link:not(:last-of-type) { margin-right: 10px; } .preprocessing-list .preprocessing-list-head, .preprocessing-list .preprocessing-list-foot, @@ -6757,44 +6757,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu /* for IE11 only. Fixed cell height if table has 100% height */ .host-avail-widget td { height: 100%; } } -.interface-container { - width: fit-content; - width: -moz-fit-content; - padding-left: 0; } - .interface-container:not(.interface-container-header):not(:empty) { - margin-bottom: 5px; } - .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) { - border-top: 1px solid #4f4f4f; - padding-top: 10px; } - .interface-container:empty { - display: none; } - .interface-container .interface-row { - display: grid; - grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr; - grid-template-rows: 24px 1fr; - gap: 5px; } - .interface-container .interface-row:not(:first-of-type) { - margin-top: 5px; } - .interface-container .interface-row[data-type] .interface-cell-details { - display: none; - grid-column: 1/-1; } - .interface-container .interface-row .interface-cell { - align-self: center; } - .interface-container .interface-row .interface-cell .interface-btn-toggle { - display: none; } - .interface-container .interface-row .interface-cell.interface-cell-header { - color: #737373; - text-align: left; } - .interface-container .interface-row .interface-cell .table-forms-td-left, - .interface-container .interface-row .interface-cell .table-forms-td-right { - padding-bottom: 0; } +.table-forms-td-right .interfaces { + margin-top: 5px; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body { - display: none; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body { - display: block; } -.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { - display: inline-block; } +.interfaces { + display: grid; + grid-template-columns: 26px repeat(7, max-content); + margin-bottom: 5px; + line-height: 24px; } + .interfaces .interface-container { + display: contents; } + .interfaces .interface-container.interface-container-header .interface-cell { + padding: 0 5px 0 0; + color: #737373; } + .interfaces .interface-container.interface-container-header .interface-cell-action { + grid-column: span 2; } + .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) { + padding-top: 10px; + margin-top: 5px; + border-top: 1px solid #4f4f4f; } + .interfaces .interface-row { + display: contents; } + .interfaces .interface-row[data-type="2"] .interface-btn-toggle { + display: inline-block; + width: 24px; + height: 24px; + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; } + .interfaces .interface-row[data-type="2"] .list-accordion-item-body { + display: none; + padding-top: 0; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body { + display: block; } + .interfaces .interface-cell { + padding: 5px 5px 5px 0; } + .interfaces .interface-cell.interface-cell-details { + display: none; + grid-column: 1 / -1; } + .interfaces .interface-btn-toggle { + display: none; + vertical-align: top; } + .interfaces .no-interface { + grid-column: 1 / -1; + color: #737373; } .debug-modal.overlay-dialogue.modal .overlay-dialogue-body { overflow-x: auto; } diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css index 2bf689d47b8..17e5c4287c2 100644 --- a/ui/assets/styles/hc-dark.css +++ b/ui/assets/styles/hc-dark.css @@ -3797,7 +3797,7 @@ button { background-color: #414141; border-color: #bbbbbb; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { position: relative; background-color: transparent; border: 0; @@ -3807,14 +3807,14 @@ button { font-size: inherit; padding: 0; min-height: inherit; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { outline: none; margin-bottom: -2px !important; border-bottom: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0 !important; } - .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle { + .btn-link[disabled] { background-color: transparent; } - .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover { + .btn-link[disabled]:hover { background-color: transparent; } .btn-kiosk { @@ -3859,10 +3859,10 @@ button { .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; } .btn-widget-edit { @@ -4142,7 +4142,7 @@ button { .btn-dashboard-normal { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } -.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { +.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock { width: 24px; height: 24px; margin: 2px 2px 0 0; } @@ -4151,13 +4151,13 @@ button { width: 24px; height: 24px; } -.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf { +.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle { border: 0; min-height: 0; padding: 0; opacity: .5; transition: opacity .2s ease-out; } - .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active { + .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active { background-color: transparent; opacity: .25; } @@ -4186,7 +4186,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .inaccessible .subfilter-enabled { color: #bfbfbf; } -.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active { +.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active { background-color: transparent; opacity: 1; } @@ -5901,7 +5901,7 @@ svg { .preprocessing-list select { width: 100%; min-width: 0; } - .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) { + .preprocessing-list .btn-link:not(:last-of-type) { margin-right: 10px; } .preprocessing-list .preprocessing-list-head, .preprocessing-list .preprocessing-list-foot, @@ -6703,44 +6703,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu /* for IE11 only. Fixed cell height if table has 100% height */ .host-avail-widget td { height: 100%; } } -.interface-container { - width: fit-content; - width: -moz-fit-content; - padding-left: 0; } - .interface-container:not(.interface-container-header):not(:empty) { - margin-bottom: 5px; } - .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) { - border-top: 1px solid #666666; - padding-top: 10px; } - .interface-container:empty { - display: none; } - .interface-container .interface-row { - display: grid; - grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr; - grid-template-rows: 24px 1fr; - gap: 5px; } - .interface-container .interface-row:not(:first-of-type) { - margin-top: 5px; } - .interface-container .interface-row[data-type] .interface-cell-details { - display: none; - grid-column: 1/-1; } - .interface-container .interface-row .interface-cell { - align-self: center; } - .interface-container .interface-row .interface-cell .interface-btn-toggle { - display: none; } - .interface-container .interface-row .interface-cell.interface-cell-header { - color: #cacaca; - text-align: left; } - .interface-container .interface-row .interface-cell .table-forms-td-left, - .interface-container .interface-row .interface-cell .table-forms-td-right { - padding-bottom: 0; } +.table-forms-td-right .interfaces { + margin-top: 5px; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body { - display: none; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body { - display: block; } -.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { - display: inline-block; } +.interfaces { + display: grid; + grid-template-columns: 26px repeat(7, max-content); + margin-bottom: 5px; + line-height: 24px; } + .interfaces .interface-container { + display: contents; } + .interfaces .interface-container.interface-container-header .interface-cell { + padding: 0 5px 0 0; + color: #cacaca; } + .interfaces .interface-container.interface-container-header .interface-cell-action { + grid-column: span 2; } + .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) { + padding-top: 10px; + margin-top: 5px; + border-top: 1px solid #666666; } + .interfaces .interface-row { + display: contents; } + .interfaces .interface-row[data-type="2"] .interface-btn-toggle { + display: inline-block; + width: 24px; + height: 24px; + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; } + .interfaces .interface-row[data-type="2"] .list-accordion-item-body { + display: none; + padding-top: 0; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body { + display: block; } + .interfaces .interface-cell { + padding: 5px 5px 5px 0; } + .interfaces .interface-cell.interface-cell-details { + display: none; + grid-column: 1 / -1; } + .interfaces .interface-btn-toggle { + display: none; + vertical-align: top; } + .interfaces .no-interface { + grid-column: 1 / -1; + color: #cacaca; } .debug-modal.overlay-dialogue.modal .overlay-dialogue-body { overflow-x: auto; } @@ -7114,10 +7120,10 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -318px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -318px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -318px -690px; } .btn-widget-edit { @@ -7266,10 +7272,10 @@ a.link-action { border: none !important; background-color: #666666 !important; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { font-weight: bold !important; color: #ffffff !important; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { margin-bottom: -3px !important; border-bottom: 3px solid #ffffff !important; } @@ -7778,3 +7784,8 @@ td.inactive-bg { content: " /"; } .breadcrumbs > :last-child::after { content: ""; } + +.interfaces .interface-row[data-type="2"] .interface-btn-toggle { + background-position: -318px -690px; } +.interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background-position: -318px -655px; } diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css index ef53c2a23e9..efc7f4d8206 100644 --- a/ui/assets/styles/hc-light.css +++ b/ui/assets/styles/hc-light.css @@ -3797,7 +3797,7 @@ button { background-color: #f4f4f4; border-color: #000000; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { position: relative; background-color: transparent; border: 0; @@ -3807,14 +3807,14 @@ button { font-size: inherit; padding: 0; min-height: inherit; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { outline: none; margin-bottom: -2px !important; border-bottom: 2px solid rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 0 !important; } - .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle { + .btn-link[disabled] { background-color: transparent; } - .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover { + .btn-link[disabled]:hover { background-color: transparent; } .btn-kiosk { @@ -3859,10 +3859,10 @@ button { .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; } .btn-widget-edit { @@ -4142,7 +4142,7 @@ button { .btn-dashboard-normal { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } -.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { +.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock { width: 24px; height: 24px; margin: 2px 2px 0 0; } @@ -4151,13 +4151,13 @@ button { width: 24px; height: 24px; } -.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf { +.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle { border: 0; min-height: 0; padding: 0; opacity: .5; transition: opacity .2s ease-out; } - .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active { + .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active { background-color: transparent; opacity: .25; } @@ -4186,7 +4186,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .inaccessible .subfilter-enabled { color: #bfbfbf; } -.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active { +.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active { background-color: transparent; opacity: 1; } @@ -5901,7 +5901,7 @@ svg { .preprocessing-list select { width: 100%; min-width: 0; } - .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) { + .preprocessing-list .btn-link:not(:last-of-type) { margin-right: 10px; } .preprocessing-list .preprocessing-list-head, .preprocessing-list .preprocessing-list-foot, @@ -6703,44 +6703,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu /* for IE11 only. Fixed cell height if table has 100% height */ .host-avail-widget td { height: 100%; } } -.interface-container { - width: fit-content; - width: -moz-fit-content; - padding-left: 0; } - .interface-container:not(.interface-container-header):not(:empty) { - margin-bottom: 5px; } - .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) { - border-top: 1px solid #888888; - padding-top: 10px; } - .interface-container:empty { - display: none; } - .interface-container .interface-row { - display: grid; - grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr; - grid-template-rows: 24px 1fr; - gap: 5px; } - .interface-container .interface-row:not(:first-of-type) { - margin-top: 5px; } - .interface-container .interface-row[data-type] .interface-cell-details { - display: none; - grid-column: 1/-1; } - .interface-container .interface-row .interface-cell { - align-self: center; } - .interface-container .interface-row .interface-cell .interface-btn-toggle { - display: none; } - .interface-container .interface-row .interface-cell.interface-cell-header { - color: #333333; - text-align: left; } - .interface-container .interface-row .interface-cell .table-forms-td-left, - .interface-container .interface-row .interface-cell .table-forms-td-right { - padding-bottom: 0; } +.table-forms-td-right .interfaces { + margin-top: 5px; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body { - display: none; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body { - display: block; } -.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { - display: inline-block; } +.interfaces { + display: grid; + grid-template-columns: 26px repeat(7, max-content); + margin-bottom: 5px; + line-height: 24px; } + .interfaces .interface-container { + display: contents; } + .interfaces .interface-container.interface-container-header .interface-cell { + padding: 0 5px 0 0; + color: #333333; } + .interfaces .interface-container.interface-container-header .interface-cell-action { + grid-column: span 2; } + .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) { + padding-top: 10px; + margin-top: 5px; + border-top: 1px solid #888888; } + .interfaces .interface-row { + display: contents; } + .interfaces .interface-row[data-type="2"] .interface-btn-toggle { + display: inline-block; + width: 24px; + height: 24px; + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; } + .interfaces .interface-row[data-type="2"] .list-accordion-item-body { + display: none; + padding-top: 0; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body { + display: block; } + .interfaces .interface-cell { + padding: 5px 5px 5px 0; } + .interfaces .interface-cell.interface-cell-details { + display: none; + grid-column: 1 / -1; } + .interfaces .interface-btn-toggle { + display: none; + vertical-align: top; } + .interfaces .no-interface { + grid-column: 1 / -1; + color: #333333; } .debug-modal.overlay-dialogue.modal .overlay-dialogue-body { overflow-x: auto; } @@ -7059,10 +7065,10 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -165px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -165px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -165px -690px; } .btn-widget-edit { @@ -7206,10 +7212,10 @@ a.link-action { border: none !important; background-color: #666666 !important; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { font-weight: bold !important; color: #000000 !important; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { margin-bottom: -3px !important; border-bottom: 3px solid #000000 !important; } @@ -7691,3 +7697,8 @@ td.inactive-bg { content: " /"; } .breadcrumbs > :last-child::after { content: ""; } + +.interfaces .interface-row[data-type="2"] .interface-btn-toggle { + background-position: -165px -690px; } +.interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background-position: -165px -655px; } diff --git a/ui/include/defines.inc.php b/ui/include/defines.inc.php index f0a7b70b05a..f8c58aecb61 100644 --- a/ui/include/defines.inc.php +++ b/ui/include/defines.inc.php @@ -2096,6 +2096,7 @@ define('ZBX_STYLE_ICON_SECRET_TEXT', 'icon-secret'); define('ZBX_STYLE_ICON_HELP_HINT', 'icon-help-hint'); // Host interface styles. +define('ZBX_STYLE_HOST_INTERFACES', 'interfaces'); define('ZBX_STYLE_HOST_INTERFACE_CONTAINER', 'interface-container'); define('ZBX_STYLE_HOST_INTERFACE_CONTAINER_HEADER', 'interface-container-header'); define('ZBX_STYLE_HOST_INTERFACE_ROW', 'interface-row'); diff --git a/ui/include/views/configuration.host.prototype.edit.php b/ui/include/views/configuration.host.prototype.edit.php index 20f241ddcd5..30239ce5795 100644 --- a/ui/include/views/configuration.host.prototype.edit.php +++ b/ui/include/views/configuration.host.prototype.edit.php @@ -253,7 +253,8 @@ $host_tab->addRow( ->setModern(true) ->setReadonly($host_prototype['templateid'] != 0), (new CDiv([$interface_header, $agent_interfaces, $snmp_interfaces, $jmx_interfaces, $ipmi_interfaces])) - ->setId('interfaces-table'), + ->setId('interfaces-table') + ->addClass(ZBX_STYLE_HOST_INTERFACES), new CDiv( (new CButton('interface-add', _('Add'))) ->addClass(ZBX_STYLE_BTN_LINK) diff --git a/ui/js/hostinterfacemanager.js b/ui/js/hostinterfacemanager.js index 12200a7921f..61ca41115c1 100644 --- a/ui/js/hostinterfacemanager.js +++ b/ui/js/hostinterfacemanager.js @@ -46,7 +46,7 @@ class HostInterfaceManager { static ZBX_STYLE_HOST_INTERFACE_CONTAINER_HEADER = 'interface-container-header'; static ZBX_STYLE_HOST_INTERFACE_INPUT_EXPAND = 'interface-input-expand'; static ZBX_STYLE_HOST_INTERFACE_ROW = 'interface-row'; - static ZBX_STYLE_GREY = 'grey'; + static ZBX_STYLE_HOST_NO_INTERFACE = 'no-interface'; static ZBX_STYLE_LIST_ACCORDION_ITEM = 'list-accordion-item'; static ZBX_STYLE_LIST_ACCORDION_ITEM_OPENED = 'list-accordion-item-opened'; @@ -82,10 +82,7 @@ class HostInterfaceManager { this.$noInterfacesMsg = jQuery('<div>', { html: t('No interfaces are defined.'), - class: HostInterfaceManager.ZBX_STYLE_GREY, - css: { - 'padding': '5px 0px' - } + class: HostInterfaceManager.ZBX_STYLE_HOST_NO_INTERFACE }) .insertAfter(jQuery('.' + HostInterfaceManager.ZBX_STYLE_HOST_INTERFACE_CONTAINER_HEADER)); |