Divide the MSB source codes into two repos
[msb/apigateway.git] / apiroute / apiroute-service / src / main / resources / iui-route / css / newRoute.css
-/**
- * Copyright 2016 2015-2016 ZTE, Inc. and others. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- *     Author: Zhaoxing Meng
- *     email: meng.zhaoxing1@zte.com.cn
- */
-body {
-    background-color: #4d5b69!important;
-    font-family: "microsoft yahei";
-}
-
-.header.navbar {
-    width: 100%;
-    padding: 0 20px 0 20px;
-    margin: 0;
-    border: 0px;
-    padding: 0px;
-    box-shadow: none;
-    height: 42px;
-    min-height: 42px;
-}
-
-.header {
-    filter: none !important;
-    background-image: none !important;
-    background-color: #fff !important;
-}
-
-.header.navbar .navbar-brand {
-    display: inline-block;
-    margin-right: 0;
-    padding: 0;
-     width: 135px !important;
-    height: 42px !important;
-     background-color: #238dfa !important;
-    margin-top: 0 !important;
-}
-
-.page-sidebar-closed .header.navbar .navbar-brand {
-    width: 35px !important;
-}
-
-.header.navbar .navbar-brand img {
-    margin-left: 10px !important;
-    width: 80%;
-    margin-top: 7px;
-}
-
-.page-sidebar-closed .header.navbar .navbar-brand img {
-    display: none !important;
-}
-
-.page-sidebar{
-       float:left;
-       width: 135px ;
-       background-color: #4d5b69;
-}
-
-.page-sidebar-closed  .page-sidebar{
-       width: 35px  !important;
-
-}
-
-.page-container {
-    margin: 0px;
-    padding: 0px;
-    position: relative;
-}
-
-.sideBar {
-    width: 132px;
-    background-color: #4D5B69;
-}
-
-.page-sidebar-closed  .sideBar{
-width: 35px  !important;
-background-color: #4d5b69!important;
-
-}
-
-.sideBar .menu {
-    width: 100%;
-    height: 128px;
-    color: #aaa;
-    font-size: 16px;
-    text-align: center;
-    /* border-bottom: 2px solid #536372; */
-    border-top: 1px solid #536372;
-    /* border-bottom-style: groove; */
-}
-.page-sidebar-closed  .sideBar .menu {
-height: 35px  !important;
-border-bottom:0px;
-}
-
-.sideBar .menu i.icon.fa{
-    font-size: 32px;
-    margin-bottom: 7px
-}
-
-
-
-.page-sidebar-closed  .sideBar .menu i.icon.fa{
-    font-size: 18px;
-}
-
-
-
-
-
-.sideBar .menu i.icon {
-    width: 36px;
-    height: 36px;
-}
-
-.page-sidebar-closed .sideBar .menu i.icon {
-    width: 18px;
-    height: 18px;
-} 
-.sideBar .menu i {
-    margin-top: 25%;
-}
-
-.sideBar a.router-link-active .menu {
-    color: #fff;
-    background-color: #424e57;
-    width: 132px;
-}
-
-.page-sidebar-closed .sideBar a.router-link-active .menu{
-width: 35px  !important;
-height: 35px;
-}
-
-.page-sidebar-closed  .sideBar a label{
-  display:none
-}
-
-.sideBar a{
-text-decoration: none;
-cursor:pointer ;
-}
-
-.sideBar a:hover .menu {
-    color: #fff;
-    background-color: #424e57;
-    width: 132px;
-
-}
-
-.page-sidebar-closed  .sideBar a:hover .menu{
-width: 35px  !important;
-}
-
-.sideBar a.router-link-active .menu .menu-left {
-    width: 2px;
-    height: 126px;
-    float: left;
-    background-color: #238ff9;
-}
-
-.page-sidebar-closed .sideBar a.router-link-active .menu .menu-left {
-
-    height: 33px;
-
-}
-
-
-.sidebar-toggler {
-    background-image: url(../img/sidebar-toggler-grey.jpg);
-    background-color: #0f5179;
-     margin-top: 15px;
-         margin-left: 95px;
-      margin-bottom: 5px;
-      cursor: pointer;
-    opacity: 0.5;
-    filter: alpha(opacity=50);
-    width: 29px;
-    height: 29px;
-    background-repeat: no-repeat;
-}
-
-.page-sidebar-closed .sidebar-toggler{
- margin-left: 3px;
-}
-
-.sideBar  a  .selected{
-display:none;
-       }
-
-.sideBar  a.router-link-active  .selected{
-           display: block;
-    float: right;
-    margin-top: -25px;
-    background: none;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-top: 12px double transparent;
-    border-bottom: 12px double transparent;
-    border-left: 0;
-    border-right: 8px solid #F1F3FA;  
-
-}
-
-.chineseTitle{
-    margin: 0;
-    float: left;
-    margin-left: 20px;
-    font-weight: bold;
-    padding-top: 8px;
-    letter-spacing: 2px;
-    font-size: 20px;
-    font-family: 'Microsoft Yahei', sans-serif;
-    /* text-shadow: -1px 1px rgba(221, 221, 221, 1); */
-}
-
-.englishTitle{
-           margin: 0;
-           float: left;
-           margin-left: 10px;
-           font-family: Arial;
-           font-size: 14px;
-           padding-top: 15px;
-}
-
-.page-content {
-       margin-top: 0px;
-       padding: 0px;
-       background-color: #9C5A5A !important;
-       margin-left: 135px;
-}
-
-.page-sidebar-closed .page-content{
-
-  margin-left: 35px;
-}
-
-.page-content-body {
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 8px;
-    float:left;
-    width: 100%;
-    background-color: #f1f3fa;
-}
-
-.page-sidebar-closed  .page-content-body {
-    padding-left: 0px;
-    padding-right: 5px;
-    padding-top: 5px;
-
-}
-
-label {
-
-    font-weight: normal; 
-}
+/*\r
+ * Copyright (C) 2016 ZTE, Inc. and others. All rights reserved. (ZTE)\r
+ *\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ *\r
+ *         http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ */\r
+body {\r
+    background-color: #4d5b69!important;\r
+    font-family: "microsoft yahei";\r
+}\r
+\r
+.header.navbar {\r
+    width: 100%;\r
+    padding: 0 20px 0 20px;\r
+    margin: 0;\r
+    border: 0px;\r
+    padding: 0px;\r
+    box-shadow: none;\r
+    height: 42px;\r
+    min-height: 42px;\r
+}\r
+\r
+.header {\r
+    filter: none !important;\r
+    background-image: none !important;\r
+    background-color: #fff !important;\r
+}\r
+\r
+.header.navbar .navbar-brand {\r
+    display: inline-block;\r
+    margin-right: 0;\r
+    padding: 0;\r
+     width: 135px !important;\r
+    height: 42px !important;\r
+     background-color: #238dfa !important;\r
+    margin-top: 0 !important;\r
+}\r
+\r
+.page-sidebar-closed .header.navbar .navbar-brand {\r
+    width: 35px !important;\r
+}\r
+\r
+.header.navbar .navbar-brand img {\r
+    margin-left: 10px !important;\r
+    width: 80%;\r
+    margin-top: 7px;\r
+}\r
+\r
+.page-sidebar-closed .header.navbar .navbar-brand img {\r
+    display: none !important;\r
+}\r
+\r
+.page-sidebar{\r
+       float:left;\r
+       width: 135px ;\r
+       background-color: #4d5b69;\r
+}\r
+\r
+.page-sidebar-closed  .page-sidebar{\r
\r
+       width: 35px  !important;\r
+\r
+}\r
+\r
+.page-container {\r
+    margin: 0px;\r
+    padding: 0px;\r
+    position: relative;\r
+}\r
+\r
+.sideBar {\r
+    width: 135px;\r
+    background-color: #4D5B69;\r
+}\r
+\r
+.page-sidebar-closed  .sideBar{\r
+width: 35px  !important;\r
+background-color: #4d5b69!important;\r
+\r
+}\r
+\r
+.sideBar .menu {\r
+    width: 100%;\r
+    height: 128px;\r
+    color: #aaa;\r
+    font-size: 16px;\r
+    text-align: center;\r
+    /* border-bottom: 2px solid #536372; */\r
+    border-top: 1px solid #536372;\r
+    /* border-bottom-style: groove; */\r
+}\r
+.page-sidebar-closed  .sideBar .menu {\r
+height: 35px  !important;\r
+border-bottom:0px;\r
+}\r
+\r
+.sideBar .menu i.icon.fa{\r
+    font-size: 32px;\r
+    margin-bottom: 7px\r
+}\r
+\r
+\r
+\r
+.page-sidebar-closed  .sideBar .menu i.icon.fa{\r
+    font-size: 18px;\r
\r
+}\r
+\r
+\r
+\r
+\r
+\r
+.sideBar .menu i.icon {\r
+    width: 36px;\r
+    height: 36px;\r
+}\r
+\r
+.page-sidebar-closed .sideBar .menu i.icon {\r
+    width: 18px;\r
+    height: 18px;\r
+} \r
+.sideBar .menu i.icon {\r
+    margin-top: 25%;\r
+}\r
+\r
+.sideBar a.router-link-active .menu {\r
+    color: #fff;\r
+    background-color: #424e57;\r
+}\r
+\r
+.page-sidebar-closed .sideBar a.router-link-active .menu{\r
+width: 35px  !important;\r
+height: 35px;\r
+}\r
+\r
+.page-sidebar-closed  .sideBar a label{\r
+  display:none\r
\r
+}\r
+\r
+.sideBar a{\r
+text-decoration: none;\r
+cursor:pointer ;\r
+}\r
+\r
+.sideBar a:hover .menu {\r
+    color: #fff;\r
+    background-color: #424e57;\r
+\r
+\r
+}\r
+\r
+.page-sidebar-closed  .sideBar a:hover .menu{\r
+width: 35px  !important;\r
+}\r
+\r
+.sideBar a.router-link-active .menu .menu-left {\r
+    width: 2px;\r
+    height: 126px;\r
+    float: left;\r
+    background-color: #238ff9;\r
+}\r
+\r
+.page-sidebar-closed .sideBar a.router-link-active .menu .menu-left {\r
+\r
+    height: 33px;\r
+\r
+}\r
+\r
+\r
+.sidebar-toggler {\r
+    background-image: url(../img/sidebar-toggler-grey.jpg);\r
+    background-color: #0f5179;\r
+     margin-top: 15px;\r
+         margin-left: 95px;\r
+      margin-bottom: 5px;\r
+      cursor: pointer;\r
+    opacity: 0.5;\r
+    filter: alpha(opacity=50);\r
+    width: 29px;\r
+    height: 29px;\r
+    background-repeat: no-repeat;\r
+}\r
+\r
+.page-sidebar-closed .sidebar-toggler{\r
+ margin-left: 3px;\r
+}\r
+\r
+.sideBar  a  .selected{\r
+display:none;\r
+       }\r
+\r
+.sideBar  a.router-link-active  .selected{\r
+           display: block;\r
+    float: right;\r
+    margin-top: -25px;\r
+    background: none;\r
+    width: 0;\r
+    height: 0;\r
+    border-style: solid;\r
+    border-top: 12px double transparent;\r
+    border-bottom: 12px double transparent;\r
+    border-left: 0;\r
+    border-right: 8px solid #F1F3FA;  \r
+\r
+}\r
+\r
+.chineseTitle{\r
+    margin: 0;\r
+    float: left;\r
+    margin-left: 20px;\r
+    font-weight: bold;\r
+    padding-top: 8px;\r
+    letter-spacing: 2px;\r
+    font-size: 20px;\r
+    font-family: 'Microsoft Yahei', sans-serif;\r
+    /* text-shadow: -1px 1px rgba(221, 221, 221, 1); */\r
+}\r
+\r
+.englishTitle{\r
+           margin: 0;\r
+           float: left;\r
+           margin-left: 10px;\r
+           font-family: Arial;\r
+           font-size: 14px;\r
+           padding-top: 15px;\r
+}\r
+\r
+.page-content {\r
+       margin-top: 0px;\r
+       padding: 0px;\r
+       background-color: #9C5A5A !important;\r
+       margin-left: 135px;\r
+}\r
+\r
+.page-sidebar-closed .page-content{\r
+\r
+  margin-left: 35px;\r
+}\r
+\r
+.page-content-body {\r
+    padding-left: 10px;\r
+    padding-right: 10px;\r
+    padding-top: 8px;\r
+    float:left;\r
+    width: 100%;\r
+    background-color: #f1f3fa;\r
+}\r
+\r
+.page-sidebar-closed  .page-content-body {\r
+    padding-left: 0px;\r
+    padding-right: 5px;\r
+    padding-top: 5px;\r
+\r
+}\r
+\r
+label {\r
+\r
+    font-weight: normal; \r
+}\r
+\r
+.sideBar ul{\r
+    list-style: none;\r
+    padding: 0; \r
+}\r
+\r
+\r
+\r
+.sub-menu {\r
+    list-style: none;\r
+    padding: 0;\r
+    margin: 8px 0;\r
+     box-shadow: 5px 5px rgba(140,178,198,.2);\r
+     display: none;\r
+}\r
+\r
+.sub-menu {\r
+    width: 150px;\r
+    position: absolute;\r
+    left: 135px;\r
+    margin-top: 0;\r
+    top: 5px;\r
+    background-color: #4d5b69;\r
+}\r
+\r
+.page-sidebar-closed  .sub-menu {\r
+  \r
+    left: 35px;\r
+    top: 0px;\r
+\r
+}\r
+\r
+.sideBarUl li{\r
+   position:relative; \r
+}\r
+.sideBarUl li:hover .sub-menu\r
+ {\r
+    display: block;\r
+}\r
+\r
+.sub-menu li{\r
+    background: 0 0;\r
+    margin: 0;\r
+    padding: 0;\r
+    margin-top: 1px!important;\r
+}\r
+\r
+\r
+.sub-menu li>a {\r
+     color: #aaa;\r
+    display: block;\r
+    margin: 0;\r
+    padding: 12px 14px 12px 30px;\r
+    text-decoration: none;\r
+    font-size: 14px;\r
+    font-weight: 400;\r
+    background: 0 0;\r
+}\r
+\r
+.sub-menu li>a:hover {\r
+    color: #fff;\r
+    background-color: #424e57;\r
+\r
+\r
+}\r
+\r
+.subicon.fa{\r
+    font-size: 18px;\r
+    margin-top:0px;\r
+\r
+}\r