.tree-root { margin-top: 0px; margin-bottom: 40px; } .tree-node.tree-node-header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .tree-node .module-action-buttons img { width: 16px; float: right; } .tree-node .node-content.node-service { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; } .tree-node img { padding: 10px; } .tree-node .node-icon { width: 40px; display: inline-block; box-sizing: border-box; border-right: 1px solid #eaeaea; } .tree-node .node-icon .node-icon-container { display: flex; align-items: center; justify-content: center; height: 32px; } .tree-node .node-icon .node-icon-container img { padding: 0; width: 16px; } .tree-node .node-status { box-sizing: border-box; position: absolute; border-radius: 8px; width: 18px; height: 20px; top: 5px; margin: 0; padding: 0; left: 6px; } .tree-node .node-name { position: relative; top: -15px; } .tree-group { margin-left: 40px; /*padding-top: 1px;*/ } .tree-node { white-space: nowrap; background-image: url(../../images/tree/straight@tree.svg); background-position: -1px -1px; background-repeat: repeat-y; background-size: 33px; min-height: 26px; margin-top: 1px; } div.tree-node { background: 0 0; } div.tree-node span { font-size: 1.2em; } .tree-node:last-child { background: 0 0; } .node-content { border: 1px solid #eaeaea; background-color: #fff; border-radius: 4px; width: calc(100% - 50px); box-sizing: border-box; height: 32px; font-size: 1.2em; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } .node-content > img { position: relative; /*top: -2px;*/ } .node-content:hover { background-color: #f5f5f5; } .node-content:active { background-color: #dddddd; } .leaf-icon { width: 32px; height: 32px; } .node-content, .leaf-icon { display: inline-block; } .node-content > img, .node-content > div { display: inline; } .tree-node.leaf-open > .leaf-icon { /*background-image: url(../../images/minus.svg);*/ background-image: url(../../images/tree/corner@tree.svg); background-repeat: no-repeat; background-size: 30px 30px; } .tree-node.leaf-closed > .leaf-icon { background-image: url(../../images/plus.svg); } .tree-node.leaf-open > .leaf-icon, .tree-node.tree-first.leaf-open > .leaf-icon, .tree-node.leaf-closed > .leaf-icon, .tree-node.tree-first.leaf-closed > .leaf-icon, .tree-node.leaf-loading > .leaf-icon, .tree-node.leaf-empty > .leaf-icon, .tree-node.tree-first.leaf-empty > .leaf-icon, .tree-node.leaf-error > .leaf-icon { cursor: pointer; } .tree-node.leaf-closed > .leaf-icon { background-image: url(../../images/tree/corner_straight_plus@tree.svg); } .tree-node.leaf-closed:last-of-type > .leaf-icon { background-image: url(../../images/tree/corner_plus@tree.svg); } .tree-node.leaf-open > .leaf-icon { background-image: url(../../images/tree/corner_straight_minus@tree.svg); } .tree-node.leaf-open:last-of-type > .leaf-icon { background-image: url(../../images/tree/corner_minus@tree.svg); } .tree-node > .leaf-icon { background-position: 0px 0px; background-repeat: no-repeat; float: left; /* margin-right: 10px; */ background-image: url(../../images/tree/corner_straight@tree.svg); background-repeat: no-repeat; background-size: 30px 30px; } .tree-node:last-of-type > .leaf-icon { background-image: url(../../images/tree/corner@tree.svg); } .tree-node > .node-content > img { max-height: 20px; /*max-width: 20px;*/ } .tree-node > .node-content > img.module-data, .tree-node > .node-content > img.module-graph { cursor: pointer; /*padding-right: 3px;*/ } .tree-node > .node-content > .agent-status.status_balls, .tree-node > .node-content > .status_small_balls { width: 1.5em; /*border-radius: 0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; height: 38px; position: relative; */ } .tree-node > .node-content > .agent-status.status_balls { top: -1px; } .tree-node > .node-content > .module-status.status_small_balls { /*top: -8px;*/ } .tree-node > .node-content > .module-name { margin: 0 0 0 1em; /*width: 250px;*/ width: 55%; /*display: inline-block;*/ flex: 1 1 80%; position: relative; font-weight: bold; font-size: 12px; } .tree-node > .node-content.module-only-caption > .module-name, .tree-node > .node-content > .module-name-parent.module-only-caption { top: 5px; } .node-service > .node-service-name { flex: 1 1 50%; font-size: 11pt; font-weight: bold; } .node-content.module:not(.module-only-caption) .module-name { margin-left: 2.5em; font-weight: normal; } .tree-node > .node-content > .status_balls, .tree-node > .node-content > .status_small_balls { width: 6px; border-radius: 4px; } .tree-node > .node-content > .module-name-alias { font-size: 14px; font-weight: normal; top: 4px; margin-left: 1.1em; } .tree-node > .node-content.module-only-caption > .module-name-alias { margin-left: 1em; } .tree-node > .node-content > .module-name-parent { font-size: 14px; margin-left: 0.5em; top: -4px; } .tree-node > .node-content > .module-value { /*width: 120px;*/ /*width: 130px;*/ display: inline-block; text-align: right; margin: 8px 1em; /*float: right;*/ } .tree-node > .node-content > .module-action-buttons { float: right; min-width: 120px; position: relative; /* top: 5px; */ } .tree-node > .node-content > img.module-server-type, .tree-node > .node-content > img.agent-status, .tree-node > .node-content > img.agent-alerts-fired, .tree-node > .node-content > img.agent-quiet, .tree-node > .node-content > img.module-status, .tree-node > .node-content > img.module-alerts { padding-right: 3px; } .tree-node > .node-content > .tree-node-counters, .tree-node > .node-content > .tree-node-counters > .tree-node-counter { display: inline; } .tree-node > .node-content > .tree-node-counters { font-size: 14px; float: right; position: relative; top: 5px; right: 10px; } .tree-node > .node-content > .tree-node-counters.tree-node-service-counters { top: 0; } .tree-node > .node-content > img { vertical-align: middle; } .tree-node > .node-content > .tree-node-counters > .tree-node-counter { font-weight: bold; font-size: 1em; cursor: default; } div#tree-controller-recipient { text-align: left; width: calc((100% - 30%) - 20px); } .tree-controller-recipient { text-align: left; width: 65%; /* width: 98%; */ margin-top: 10px; } .tree-node > .node-content > div + div:not(.tree-node-counters) { /*margin-left: 3px;*/ } .tree-node .node-service div.node-service-status { width: 6px; height: 20px; margin-left: 10px; border-radius: 5px; } .tree-node .disabled { filter: opacity(0.3); } .ipam-network { font-size: 9pt; } .tree-group .node-content { position: relative; /*top: -10px;*/ } .tree-group .node-content.module { /*top: -12px;*/ /* top: -35px; */ display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; width: calc(100% - 50px); margin: 1px 0 0 8px; } .node-content .module-button { padding: 6px; margin-top: 2px; } .node-content .module-button.module-alerts { margin: 6px; width: 16px; padding: 0; float: right; } .node-content .module-button:hover { /* width: 20px; */ background-color: #fff; border-radius: 8px; } .tree-group .node-content.module:last-child { margin-bottom: 15px; } .tree-node.leaf-open:last-child, .tree-node.leaf-closed:last-child, .tree-node.leaf-empty:last-child { margin-bottom: 1px; } .tree-root > .tree-node { margin-top: 0; margin-bottom: 2px; } .tree-node > .node-content > .agent-alerts-fired { float: left; position: relative; left: 13px; top: -5px; } .tree-node > .node-content > div.tree-service-status { width: 7px; height: 20px; margin-left: 0; border-radius: 5px; } .tree-node > .node-content.node-service > div.tree-service-status { width: 7px; height: 20px; margin-left: 5px; border-radius: 5px; } .tree-node .node-icon.node-status { border: 0; }