style update

src/main/webapp/content/css/documentation.css

@@ -2,51 +2,62 @@
  * Your CSS files will be generated in this directory by "gulp sass"
  */
 
-.layout{
+.layout {
     height: 100%;
 }
-.layout .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left{
+
+.layout .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
     border: none;
 }
+
 .layout .ant-menu,
-.layout .ant-menu-submenu > .ant-menu{
+.layout .ant-menu-submenu > .ant-menu {
     background-color: #001529;
     color: #ffffff;
 }
-.logo{
+
+.logo {
     color: #ffffff;
     text-align: center;
     font-size: 15px;
     font-weight: 500;
     padding: 17px 0;
 }
-.breadcrumbs{
+
+.breadcrumbs {
     padding: 10px 0;
 }
-.search-form{
+
+.search-form {
     padding: 15px 0;
     border-top: 1px solid #dddddd;
 }
-.search-form .ant-input{
+
+.search-form .ant-input {
     width: 100%;
 }
-.search-input .ant-input{
+
+.search-input .ant-input {
     width: 60%;
 }
-.releative{
+
+.releative {
     position: relative;
 }
-.posiabsolutStr{
+
+.posiabsolutStr {
     position: absolute;
     width: 100%;
     text-align: center;
     bottom: 25%;
     left: 0;
 }
-.posiabsolutStr p{
+
+.posiabsolutStr p {
     margin: 0;
 }
-.ant-modal-body{
+
+.ant-modal-body {
     max-height: 520px;
     overflow-y: auto;
     overflow-x: hidden;
@@ -54,144 +65,228 @@
 }
 
 /*操作按钮*/
-.handle span{
+.handle span {
     cursor: pointer;
 }
-.handle span:not(last-child){
+
+.handle span:not(last-child) {
     margin-right: 10px;
 }
 
-.modal-footer-btn{
+.modal-footer-btn {
     margin-top: 20px;
     text-align: right;
 }
-.modal-footer-btn button{
+
+.modal-footer-btn button {
     margin-right: 20px;
 }
-.form-select nz-select{
+
+.form-select nz-select {
     width: 100%;
 }
 
-.tabset{
+.tabset {
     position: relative;
 }
-.tabset-btn{
+
+.tabset-btn {
     position: absolute;
     right: 0;
     top: 5px;
     z-index: 1;
 }
-.round-tag .ant-tag{
+
+.round-tag .ant-tag {
     border-radius: 50%;
 
 }
-.default .ant-tag{
+
+.default .ant-tag {
     cursor: default;
 }
 
 
 /*时间轴*/
-.ant-table-tbody > tr > td.table-timeline{
+.ant-table-tbody > tr > td.table-timeline {
     border-bottom: none;
     padding-top: 40px;
 }
-.table-timeline .ant-timeline-item-head{
+
+.table-timeline .ant-timeline-item-head {
     right: 20px;
 }
-.table-timeline .ant-timeline-item-tail{
+
+.table-timeline .ant-timeline-item-tail {
     right: 24px;
     left: auto;
     height: 220%;
 }
 
-.ant-checkbox-group label:first-child{
+.ant-checkbox-group label:first-child {
     margin-left: 8px;
 }
 
-.main-font-color{
-    color:#1890ff;
+.main-font-color {
+    color: #1890ff;
 }
 
-.layout .ant-menu, .layout .ant-menu-submenu > .ant-menu{
+.layout .ant-menu, .layout .ant-menu-submenu > .ant-menu {
     background-color: #414852;
 }
-.ant-layout-sider{
+
+.ant-layout-sider {
     background: #414852;
 }
-.ant-menu-inline .ant-menu-submenu-title{
+
+.ant-menu-inline .ant-menu-submenu-title {
     color: #bcc9d8;
 }
-.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
+
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
     background-color: #353c45;
 }
-.layout .ant-menu, .layout .ant-menu-submenu > .ant-menu{
+
+.layout .ant-menu, .layout .ant-menu-submenu > .ant-menu {
     color: #bcc9d8;
 }
-.ant-menu-item-selected{
+
+.ant-menu-item-selected {
     color: #fff;
 }
-.ant-layout{
+
+.ant-layout {
     background-color: #fff;
 }
-.ant-table-thead > tr > th{
+
+.ant-table-thead > tr > th {
     color: #4d4d4d;
     font-weight: bold;
 }
-.ant-table-thead > tr > th{
+
+.ant-table-thead > tr > th {
     background-color: #F7F7F7;
 }
-.ant-table-tbody > tr > td{
+
+.ant-table-tbody > tr > td {
     border-bottom: 1px solid #e5e5e5;
 }
-.ant-btn .anticon{
+
+.ant-btn .anticon {
     color: #6097b7;
 }
-.color-fff{
+
+.color-fff {
     color: #ffffff !important;
 }
-.color-666{
+
+.color-666 {
     color: #666666 !important;
 }
-.breadcrumbs .ant-btn-primary{
+
+.breadcrumbs .ant-btn-primary {
     background-color: #6097b7;
     border-color: #6097b7;
 }
-.breadcrumbs .ant-btn .anticon{
+
+.breadcrumbs .ant-btn .anticon {
     color: #ffffff;
 }
-.ant-timeline-item-content{
+
+.ant-timeline-item-content {
     left: -25px;
 }
-.color-red{
+
+.color-red {
     color: red;
 }
-.color-yellow{
+
+.color-yellow {
     color: #ffc029;
 }
-.color-green{
+
+.color-green {
     color: green;
 }
-.padding-10{
+
+.padding-10 {
     padding: 10px;
 }
-.main-color{
-    color:#6097b7;
+
+.main-color {
+    color: #6097b7;
 }
-.margin-right-5{
+
+.margin-right-5 {
     margin-right: 5px;
 }
-.margin-right-10{
+
+.margin-right-10 {
     margin-right: 10px;
 }
-.margin-left-5{
+
+.margin-left-5 {
     margin-left: 5px;
 }
-.margin-left-10{
+
+.margin-left-10 {
     margin-left: 10px;
 }
-.spanBorder span{
+
+.spanBorder span {
     border: 1px solid #666;
     border-radius: 4px;
     padding: 2px 5px;
     cursor: pointer;
 }
+
+.topology-context {
+    overflow: auto;
+    position: relative;
+    background: #fff;
+}
+
+
+/********** 右键菜单 **********/
+.menu-item {
+    padding-left: 5px;
+    width: 100%;
+    font-size: 18px;
+    height: 24px;
+    line-height: 24px;
+    text-align: left;
+    border-bottom: 1px dotted #cccccc;
+}
+
+.menu-item span {
+    margin-left: 5px;
+    font-size: 16px;
+}
+
+/********** 节点悬浮信息 **********/
+.node-infobox {
+    font-size: 12px;
+    width: 130px;
+    border: 1px solid #dddddd;
+    text-align: left;
+    position: absolute;
+    background-color: #ffffff;
+    padding: 6px;
+    box-shadow: 2px 2px 2px #888888, -1px -1px 2px #888888, 1px -1px 2px #888888, 1px 2px 2px #888888;
+    z-index: 999;
+    opacity: 0.8;
+}
+
+.node-infobox span {
+    display: block;
+    margin-bottom: 4px;
+}
+
+.node-infobox span label {
+    margin-right: 4px;
+    font-size: 12px;
+}
+
+.line-height-32 {
+    line-height: 32px;
+}