Web UI Branding support

[controller.git] / opendaylight / web / brandfragment / src / main / resources / css / custommain.less

diff --git a/opendaylight/web/brandfragment/src/main/resources/css/custommain.less b/opendaylight/web/brandfragment/src/main/resources/css/custommain.less
new file mode 100644 (file)
index 0000000..cb6fbc5
--- /dev/null
+++ b/opendaylight/web/brandfragment/src/main/resources/css/custommain.less
@@ -0,0 +1,260 @@
+// properties
+@mainTop: 43px;
+@mainBottom: 41px;
+
+@minWidth: 640px;
+@minHeight: 480px;
+
+@topologyOffset: -4px; // ensure calibration
+
+// mixins
+.dash-size (@width, @height) {
+       width: @width;
+       height: @height;
+}
+.position (@type, @top, @right, @bottom, @left) {
+       position: @type;
+       top: @top;
+       right: @right;
+       bottom: @bottom;
+       left: @left;
+}
+.dash-position (@top, @right, @bottom, @left) {
+       .position(absolute, @top, @right, @bottom, @left);
+}
+.icon {
+       width: 22px;
+       height: 16px;
+       background-position: left center;
+       background-repeat: no-repeat;
+}
+.dashlet-elements {
+       width: 98%;
+       margin: 5px auto;
+}
+
+// header
+#menu {
+       .navbar-inner {
+               .brand {
+                       font-size: 1.4em;
+                       font-variant: small-caps;
+                       margin: 0 12px;
+                       padding: 10px 0 10px 45px;
+                       background-image: url('../img/logo.png');
+                       background-position: left center;
+                       background-repeat: no-repeat;
+               }
+               ul {
+                       margin-top: 10px;
+                       border-bottom: transparent;
+                       li {
+                               a {
+                                       padding: 5px 15px;
+                                       &:hover {
+                                               border-color: transparent;
+                                       }
+                               }
+                       }
+                       .active {
+                               a {
+                                       border-radius: 1px;
+                                       background: #f6f6f6;
+                                       &:hover {
+                                               border-top: 1px solid #ddd;
+                                               border-right: 1px solid #ddd;
+                                               border-left: 1px solid #ddd;
+                                       }
+                               }
+                       }
+               }
+               #toolbar {
+                       position: absolute;
+                       right: 10px;
+                       .dropdown-menu {
+                               right: 0;
+                               left: auto;
+                               min-width: 120px;
+                       }
+                       .icon-user {
+                               .icon;
+                               background-image: url('../img/user_0020_16.png');
+                       }
+                       .icon-users {
+                               .icon;
+                               background-image: url('../img/user_group_0107_16.png');
+                       }
+                       .icon-save {
+                               .icon;
+                               background-image: url('../img/save_as_0106_16.png');
+                       }
+                       .icon-logout {
+                               .icon;
+                               background-image: url('../img/open_1054_16.png');
+                       }
+               }
+       }
+}
+
+// footer
+#footer {
+       #alert {
+               margin: 0;
+               p {
+                       padding: 0;
+                       margin: 0;
+               }
+       }
+}
+
+// main
+#main {
+       position: fixed;
+       top: @mainTop;
+       right: 0;
+       bottom: @mainBottom;
+       left: 0;
+       min-width: @minWidth;
+       min-height: @minHeight;
+
+       // topology
+       #topology {
+               position: absolute;
+               top: @topologyOffset;
+               right: 0;
+               bottom: @topologyOffset;
+               left: 0;
+               background: #ddd;
+       }
+
+       // left
+       #left {
+               .dash-size(30%, 100%);
+               float: left;
+
+               #left-top {
+                       .dash-size(100%, 60%);
+
+                       .dash { 
+                               .dash-position(5px, 5px, 5px, 5px);
+                       }
+               }
+
+               #left-bottom {
+                       .dash-size(100%, 40%);
+
+                       .dash {
+                               .dash-position(0, 5px, 5px, 5px);
+                       }
+               }
+       }
+
+       // right
+       #right {
+               .dash-size(70%, 100%);
+               float: right;
+
+               #right-top {
+                       .dash-size(100%, 60%);
+
+                       .dash {
+                               .dash-position(5px, 5px, 5px, 0);
+                       }
+               }
+
+               #right-bottom {
+                       .dash-size(100%, 40%);
+
+                       .dash {
+                               .dash-position(0, 5px, 5px, 0);
+                       }
+               }
+       }
+
+       #left-top, #left-bottom,
+       #right-top, #right-bottom {
+               position: relative;
+       }
+
+       // dashentries
+       .dash {
+               border-radius: 1px;
+               background: #fff;
+               border: 1px solid #ddd;
+
+               .nav {
+                       padding: 2px;
+                       padding-bottom: 0;
+                       margin: 0;
+               }
+
+               .nav-tabs {
+                       background: #eee;
+                       li {
+                               a {
+                                       background: #ddd;
+                                       padding: 4px 8px;
+                                       margin-right: 3px;
+                                       border-radius: 1px;
+                                       &:hover {
+                                               border-color: transparent;
+                                       }
+                               }
+                       }
+                       .active {
+                               a {
+                                       background: #fff;
+                                       border-radius: 1px;
+                                       &:hover {
+                                               border-top: 1px solid #ddd;
+                                               border-left: 1px solid #ddd;
+                                               border-right: 1px solid #ddd;
+                                       }
+                               }
+                       }
+               }
+
+               .dashlet {
+                       overflow: auto;
+                       .dash-position(45px,0,0,0);
+
+                       h4 {
+                               .dashlet-elements;
+                       }
+
+                       p {
+                               .dashlet-elements;
+                       }
+
+                       table {
+                               .dashlet-elements;
+                       }
+                       
+                       .btn-group {
+                               margin: 5px;
+                       }
+                       
+                       .none {
+                               margin: 0 auto;
+                               padding-top: 128px;
+                               background-position: center;
+                               background-repeat: no-repeat;
+                               background-image: url('../img/alert_unreachable_2008_128.png');
+                               text-align: center;
+                               p {
+                                       cursor: default;
+                               }
+                       }
+               }
+       }
+
+       // defaults for visual topology
+       #right-top .dash {
+               background: #ddd;
+               overflow: hidden;
+       }
+}
+
+.table-cursor tr:hover {
+       cursor: pointer;
+}