summaryrefslogtreecommitdiffstats
path: root/dgbuilder/public/style.css
diff options
context:
space:
mode:
authorTimoney, Daniel (dt5972) <dtimoney@att.com>2017-02-15 10:37:53 -0500
committerTimoney, Daniel (dt5972) <dtimoney@att.com>2017-02-15 10:40:37 -0500
commit324ee36fe31763e507b422ab0a88e4230045e205 (patch)
treed0b04520f6657601c918ce63fd27575977624187 /dgbuilder/public/style.css
parentf0c97e8db427481e28c0a16b789bc73801b35e47 (diff)
Initial commit for OpenECOMP SDN-C OA&M
Change-Id: I7ab579fd0d206bf356f36d52dcdf4f71f1fa2680 Signed-off-by: Timoney, Daniel (dt5972) <dtimoney@att.com> Former-commit-id: 2a9f0edd09581f907e62ec4689b5ac94dd5382ba
Diffstat (limited to 'dgbuilder/public/style.css')
-rw-r--r--dgbuilder/public/style.css980
1 files changed, 980 insertions, 0 deletions
diff --git a/dgbuilder/public/style.css b/dgbuilder/public/style.css
new file mode 100644
index 00000000..3a1917b0
--- /dev/null
+++ b/dgbuilder/public/style.css
@@ -0,0 +1,980 @@
+/**
+ * Copyright 2013, 2014 IBM Corp.
+ *
+ * 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.
+ **/
+
+body {
+ font: 13px "Helvetica" !important;
+ padding-top: 100px;
+ background: url("pw_maze_white.png");
+}
+
+#header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ background: #000;
+ box-sizing: border-box;
+ padding: 5px 0px 5px 20px;
+}
+
+#dropTarget {
+ position: absolute;
+ top: 0; bottom: 0;
+ left: 0; right: 0;
+ background: rgba(100,100,100,0.5);
+ display:table;
+ width: 100%;
+ height: 100%;
+ display: none;
+}
+#dropTarget div {
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+ font-size: 40px;
+ color: #fff;
+}
+#dropTarget div i {
+ font-size: 80px;
+}
+div.btn-group, a.btn {
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+span.logo {
+ pointer-events: none;
+ float: left;
+ font-size: 30px;
+ line-height: 30px;
+ text-decoration: none;
+ color: #ccc;
+}
+span.logo span {
+ vertical-align: middle;
+ font-size: 16px !important;
+}
+span.logo img {
+ height: 18px;
+}
+#header .button {
+ line-height: 22px;
+ display: inline-block;
+ font-size: 14px;
+ padding: 4px 12px;
+ text-decoration: none;
+ border-radius: 3px;
+ color: #ccc;
+ margin: auto 10px;
+ vertical-align: middle;
+}
+#header .button:not(.disabled):hover {
+ box-shadow: 0 0 2px #fff;
+}
+#btn-deploy:not(.disabled):hover {
+ background: #ca3f39;
+}
+
+#btn-deploy {
+ color: #fff !important;
+ background: #d24741;
+ box-shadow: 0 0 2px #fff;
+}
+#btn-deploy:not(.disabled):active {
+ background: #aa1f19 !important;
+ color: #ccc !important;
+ box-shadow: 0 0 2px #999;
+}
+#btn-deploy.disabled {
+ cursor: default;
+ background: #444 ;
+ color: #999 !important;
+}
+
+#btn-sidemenu {
+ font-size: 20px !important;
+}
+#btn-sidemenu:active, #btn-sidemenu.active {
+ background: #333 ;
+}
+#header .button:focus {
+ outline: none;
+}
+
+
+
+#workspace {
+ margin-left: 160px;
+ overflow: hidden;
+}
+
+#chart {
+ overflow: auto;
+ background: #e3e3e3;
+ position: absolute;
+ bottom:0px;
+ top: 30px;
+ left:0px;
+ right:0px;
+}
+
+#workspace-toolbar {
+ display: none;
+ position: absolute;
+ top: 30px;
+ left:0;
+ right: 18px;
+ padding: 5px;
+ background: #f3f3f3;
+}
+
+#chart-zoom-controls {
+ padding-top: 3px;
+ text-align: right;
+ float: right;
+}
+
+#palette {
+ background: #f3f3f3;
+ width: 140px;
+ text-align: center;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.palette-scroll {
+ display: none;
+ position: absolute;
+ top: 0;
+ left:0;
+ right: 0;
+ bottom: 35px;
+ padding: 5px;
+ overflow-y: auto;
+ box-sizing:border-box;
+ -moz-box-sizing: border-box;
+}
+.palette-spinner {
+ padding-top: 40px;
+}
+#palette-search {
+ position: absolute;
+ display: none;
+ bottom: 0;
+ left:0;
+ right:0;
+ overflow: hidden;
+ background: #f3f3f3;
+ text-align: center;
+ height: 35px;
+ padding: 3px;
+ border-top: 1px solid #999;
+ box-sizing:border-box;
+ -moz-box-sizing: border-box;
+}
+#palette-search i.fa-search {
+ position: absolute;
+ pointer-events: none;
+ left: 4px;
+ top: 10px;
+}
+#palette-search i.fa-times {
+ position: absolute;
+ right: 6px;
+ top: 10px;
+}
+
+#palette-search-clear {
+ display: none;
+ color: #000;
+}
+
+#palette-search input {
+ border-radius: 0;
+ border: none;
+ width: 100%;
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ padding: 3px 17px;
+ margin: 0px;
+ height: 30px;
+ box-sizing:border-box;
+ -moz-box-sizing: border-box;
+
+}
+#palette-search input:focus {
+ border: none;
+ box-shadow: none;
+ -webkit-box-shadow: none;
+}
+
+.palette-category {
+ border: 1px solid #999;
+ border-radius: 3px;
+ margin-bottom: 5px;
+}
+.palette-content {
+ background: #fff;
+ border-top: 1px solid #aaa;
+ padding-bottom: 3px;
+}
+
+.palette-header {
+ background: #f3f3f3;
+ border-radius: 3px;
+ cursor: pointer;
+ text-align: left;
+ padding: 1px;
+}
+.palette-header i {
+ margin: 3px 4px 3px 3px;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+}
+.palette-header i.expanded {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+}
+.palette-header span {
+ clear: both;
+}
+.palette_label {
+ line-height: 25px;
+ text-align: center;
+
+}
+.palette_node {
+ cursor:move;
+ font-size:13px;
+ background: #ddd;
+ margin: 10px auto;
+ height: 25px;
+ border-radius: 6px;
+ border: 2px solid #999;
+ background-position: 5% 50%;
+ background-repeat: no-repeat;
+ width: 90px;
+ background-size: contain;
+ position: relative;
+}
+.palette_node:hover {
+ border-color: #ff7f0e;
+ background-color: #eee;
+}
+.palette_port {
+ position: absolute;
+ top:8px;
+ left: -5px;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ background:#d9d9d9;
+ border-radius: 3px;
+ width: 10px;
+ height: 10px;
+ border: 1px solid #999;
+}
+.palette_port_output {
+ left:85px;
+}
+
+.palette_node:hover .palette_port {
+ border-color: #999;
+ background-color: #eee;
+}
+
+#sidebar {
+ background: #fff;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+}
+#sidebar.closing {
+ background: #eee;
+ border-color: #900;
+ border-style: dashed;
+}
+
+/* ---------- Layout ---------- */
+#main-container {
+ position: absolute;
+ top:50px; left:0; bottom: 0; right:0;
+ overflow:hidden;
+}
+#palette {
+ position: absolute;
+ top: 5px; left:10px; bottom: 10px;
+}
+#workspace {
+ position: absolute;
+ margin: 0;
+ top:5px; left:160px; bottom: 10px; right: 330px;
+}
+#chart-zoom-controls {
+ position: absolute;
+ bottom:30px; right: 350px;
+}
+#sidebar {
+ width: 305px;
+ position: absolute;
+ right: 10px; top: 5px; bottom:10px;
+}
+#sidebar-separator {
+ width: 15px;
+ background: url(grip.png) no-repeat 50% 50%;
+ position: absolute;
+ right: 316px; top: 5px; bottom:10px;
+ cursor: col-resize;
+}
+
+.sidebar-closed > #sidebar { display: none; }
+.sidebar-closed > #sidebar-separator { right: 0px !important; }
+.sidebar-closed > #workspace { right: 15px !important; }
+.sidebar-closed > #chart-zoom-controls { right: 35px !important; }
+
+.palette-bar-closed > #palette { display: none; }
+.palette-bar-closed > #workspace { margin-left: -140px !important; }
+/* ---------- end layout ---------- */
+
+.lasso {
+ stroke-width: 2px;
+ stroke: #ff7f0e;
+ fill: rgba(20,125,255,0.1);
+ stroke-dasharray: 10 5;
+}
+
+.group-box {
+ stroke-width: 1px;
+ stroke: #aaaaaa;
+ fill: rgba(208, 211, 238, 0.1);
+ stroke-dasharray: 3 3;
+}
+.group-box-active {
+ fill: #fff;
+ stroke: #ff7f0e;
+}
+
+.group_label {
+ stroke-width: 0;
+ fill: #999;
+ font-size: 11px;
+ pointer-events: none;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.pull-right {
+ margin-left: 20px;
+}
+
+#workspace, #palette, #sidebar {
+ border: 1px solid #000;
+ border-radius: 3px;
+}
+#sidebar-content {
+ font-size: 1.2em;
+ overflow-y: auto;
+ position: absolute;
+ top: 30px; left: 0px; right: 0; bottom: 1px;
+}
+
+.node_label_italic {
+ font-style: italic;
+}
+.node_label_unknown {
+ font-style: italic;
+ fill: #e00 !important;
+}
+.node_label_white {
+ fill: #eee !important;
+}
+.node_label {
+ stroke-width: 0;
+ fill: #333;
+ font-size: 14px;
+ pointer-events: none;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.function_label {
+ font-size: 12px;
+}
+.node {
+ stroke: #999;
+ cursor: move;
+ stroke-width: 2;
+}
+.node_unknown {
+ stroke-dasharray:10,4;
+ stroke: #f33;
+}
+.tool_arrow {
+ stroke-width: 1;
+ stroke: #999;
+ fill: #999;
+ cursor: pointer;
+}
+.node_tools {
+ fill: #ddd;
+ stroke: #999;
+ cursor: move;
+ stroke-width: 1;
+ cursor: pointer;
+}
+.node_tools_hovered {
+ stroke: #ff7f0e;
+ fill: #eee;
+}
+
+.node_button {
+ fill: inherit;
+
+}
+.port {
+ fill: #ddd;
+ cursor: crosshair;
+}
+.node_error {
+ stroke: #ff0000;
+ stroke-width: 2;
+ fill: #ff7f0e;
+}
+
+.node_badge {
+ stroke: rgb(93, 114, 145);
+ stroke-width: 1;
+ fill: rgb(190, 209, 255);
+}
+.node_badge_label {
+ stroke-width:0;
+ fill: #fff;
+ font-size: 11px;
+ pointer-events: none;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+}
+.node_invalid {
+ stroke: #ff0000;
+}
+.node_selected {
+ stroke: #ff7f0e;
+}
+.node_found {
+ stroke:blue;
+ /*
+ stroke-width :3;
+ stroke-dasharray:5,1;
+*/
+}
+.text_found {
+ stroke:green;
+ stroke-width :3;
+ stroke-dasharray:5,1;
+}
+.node_highlighted {
+ stroke: #dd1616;
+ stroke-width: 3;
+ stroke-dasharray: 10, 4;
+}
+.node_hovered {
+}
+
+.port_hovered {
+ stroke: #ff7f0e;
+ fill: #ff7f0e;
+}
+
+.drag_line {
+ stroke: #ff7f0e;
+ stroke-width: 5;
+ fill: none;
+ pointer-events: none;
+}
+
+.drag_line_hidden {
+ stroke: #ff7f0e;
+ stroke-width: 0;
+ pointer-events: none;
+ fill: none;
+}
+
+.link_line {
+ stroke: #7f7f7f;
+ stroke-width: 4;
+ fill: none;
+ pointer-events: none;
+}
+
+.link_outline {
+ stroke: #fff;
+ stroke-width: 6;
+ cursor: crosshair;
+ fill: none;
+ pointer-events: none;
+}
+.link_background {
+ stroke: #fff;
+ opacity: 0;
+ stroke-width: 25;
+ cursor: crosshair;
+ fill: none;
+}
+
+g.link_selected path.link_line {
+ stroke: #ff7f0e;
+}
+g.link_unknown path.link_line {
+ stroke: #f00;
+ stroke-width: 2;
+ stroke-dasharray: 10, 4;
+}
+
+#shade {
+ position: absolute;
+ top:0;
+ left:0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.5);
+ text-align: center;
+ display: none;
+}
+
+#dialog {
+}
+
+.container {
+}
+
+.notification {
+ position: absolute;
+}
+#notifications {
+ z-index: 10000;
+ width: 500px;
+ margin-left: -250px;
+ left: 50%;
+ position: absolute;
+ top: 1px;
+}
+#notifications .alert {
+ box-shadow: 0 0 1px 1px;
+ margin-bottom: 5px;
+}
+
+.form-row {
+ clear: both;
+ margin-bottom: 7px;
+}
+.form-row label {
+ display: inline-block;
+ width: 100px;
+}
+.form-row input {
+ width:70%;
+}
+
+input.input-append-left {
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+}
+button.input-append-right {
+ border-top-left-radius: 0px !important;
+ border-bottom-left-radius: 0px !important;
+ border-top-right-radius: 4px !important;
+ border-bottom-right-radius: 4px !important;
+ margin-left: -1px !important;
+ padding-left: 4px !important;
+ padding-right: 4px !important;
+}
+
+.form-tips {
+ background: lightgoldenrodyellow;
+ font-size: 12px;
+ padding: 8px;
+ border-radius: 5px;
+ border: 1px solid #999;
+}
+.form-tips code {
+ border: none;
+ padding: auto;
+}
+
+.ui-tabs .ui-tabs-panel {
+ padding: 0px;
+}
+
+table.node-info {
+ margin: 5px;
+ width: 97%;
+}
+table.node-info tr {
+ border: 1px solid #ddd;
+}
+table.node-info tr.blank {
+ border: none;
+}
+table.node-info tr.blank td {
+ padding-top: 8px;
+ border: none;
+ font-weight: bold;
+ padding-left: 0px;
+}
+table.node-info td:first-child{
+ color: #000;
+ vertical-align: top;
+ width: 90px;
+ padding: 3px;
+ border-right: 1px solid #ddd;
+}
+table.node-info td:last-child{
+ padding-left: 5px;
+ color: #666;
+}
+
+div.node-info {
+ margin: 5px;
+}
+
+.input-error {
+ border-color: rgb(214, 97, 95) !important;
+}
+
+.hidden {
+ display: none;
+}
+/*
+.dropdown-menu {
+ font-size: 14px;
+ background: #000;
+}
+.dropdown-menu .divider {
+ background: #666;
+ border-bottom: #666;
+}
+.dropdown-menu>li>a {
+ color: #ddd;
+}
+.dropdown-submenu>ul {
+ border: 1px solid white;
+ border-radius: 6px !important;
+}
+.dropdown-menu li.disabled a {
+ color: #666;
+}
+.dropdown-menu li.disabled a:hover {
+ background: none;
+}
+*/
+.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
+ background: #999;
+}
+
+.dropdown-menu * .fa-check {
+ display: none;
+ margin-right: -15px;
+ margin-top: 3px;
+}
+.dropdown-menu * a.active > .fa-check {
+ display: inline-block;
+}
+.dropdown-menu>li.disabled>a:hover>[class^="icon-"] {
+ background-image: url("bootstrap/img/glyphicons-halflings.png") !important;
+}
+/** Fix for unreachable dropdown menu **/
+.dropdown-menu {
+ width: 200px !important;
+}
+.dropdown-menu > li > a > i {
+ width: 10px;
+ text-align: center;
+ margin-left: -8px;
+}
+.dropdown-menu > li > a {
+ padding-left: 38px ;
+ text-indent: -8px ;
+ white-space: normal !important;
+}
+
+.popover-title { display: none; }
+
+.ui-autocomplete {
+ max-height: 250px;
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+
+.leftButton {
+ margin-right: 200px !important;
+}
+#node-help {
+ width: 700px;
+}
+#node-help * td {
+ padding: 0.8em 0.5em;
+}
+#node-help * tr > td:first-child+td+td {
+ padding-left: 5em;
+}
+
+.help-key {
+ border: 1px solid #ddd;
+ padding: 4px;
+ border-radius: 3px;
+ background: #f6f6f6;
+ font-family: Courier, monospace;
+ box-shadow: #999 1px 1px 1px;
+}
+
+#helpcontent {
+ padding: 20px;
+ border: 1px solid #ddd;
+ border-radius: 10px;
+
+ background: #fff;
+}
+#helpnavigation {
+ overflow: hidden;
+ border: 1px solid #ddd;
+ border-radius: 10px;
+ background: #fff;
+}
+#helpnavigation li a{
+ font-size: 1.2em;
+ padding: 10px;
+ border-bottom: 1px solid #ddd;
+}
+
+#node-select-library {
+ overflow: hidden;
+}
+#node-select-library ul {
+ list-style: none;
+ padding: 0px;
+ margin: 2px;
+}
+#node-select-library li {
+ cursor: pointer;
+}
+#node-select-library li.list-selected {
+ background: #eee;
+}
+#node-select-library li.list-hover {
+ background: #ffffd0;
+}
+.node-text-editor {
+ border:1px solid #ccc;
+ border-radius:5px;
+ overflow: hidden;
+}
+#workspace-tabs {
+ margin-right: 28px;
+}
+#workspace-add-tab {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 29px;
+ width: 28px;
+ border-bottom: 1px solid #999;
+}
+#btn-workspace-add-tab {
+ display: inline-block;
+ width: 100%;
+ background: #e3e3e3;
+ height: 100%;
+ line-height: 30px;
+ text-align: center;
+ color: #000;
+}
+#btn-workspace-add-tab:hover {
+ background: #efefef;
+}
+
+ul.red-ui-tabs {
+ list-style-type: none;
+ padding:5px 2px 0px 5px;
+ margin: 0;
+ display: block;
+ height: 24px;
+ border-bottom: 1px solid #999;
+ background: #e3e3e3;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+ul.red-ui-tabs li {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ display: inline-block;
+ border-left: 1px solid #999;
+ border-top: 1px solid #999;
+ border-right: 1px solid #999;
+ border-bottom: 1px solid #999;
+ background: #e3e3e3;
+ margin: 0 5px 0 0;
+ height: 23px;
+ line-height: 17px;
+ max-width: 150px;
+ width: 14%;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+ul.red-ui-tabs li a.red-ui-tab-label {
+ display: block;
+ padding: 3px 16px;
+ color: #666;
+}
+ul.red-ui-tabs li {
+ position: relative;
+}
+
+ul.red-ui-tabs li a.red-ui-tab-close {
+ background: rgba(227,227,227,0.8);
+ position: absolute;
+ right: 2px;
+ top: 2px;
+ display: block;
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+ padding: 0px;
+ border-radius: 5px;
+ color: #666;
+}
+ul.red-ui-tabs li a.red-ui-tab-close:hover {
+ background: #bbb !important;
+}
+ul.red-ui-tabs li a:hover {
+ text-decoration: none;
+ background: #f0f0f0;
+}
+
+ul.red-ui-tabs li.active {
+ background: #fff;
+ border-bottom: 1px solid #fff;
+}
+ul.red-ui-tabs li.active a {
+ color: #333;
+}
+ul.red-ui-tabs li.active a.red-ui-tab-close {
+ background: rgba(255,255,255,0.8);
+}
+ul.red-ui-tabs li.active a.red-ui-tab-label:hover {
+ background: #fff;
+}
+ul.red-ui-tabs li.red-ui-add-tab {
+ width: 25px;
+ border-top-right-radius: 15px;
+ line-height: 22px;
+}
+ul.red-ui-tabs li.red-ui-add-tab a {
+ padding: 2px 4px;
+}
+
+ul.tab-config-list {
+ list-style-type: none;
+ padding: 3px;
+ margin: 0;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+ul.tab-config-list li {
+ max-width: 400px;
+ font-size: 13px;
+ background: #f3f3f3;
+ margin: 10px auto;
+ border-radius: 3px;
+ border: 1px solid #ccc;
+ padding: 3px 8px;
+}
+div.tab-config-list-type {
+}
+
+div.tab-config-list-entry {
+ position: relative;
+ margin: 4px 0;
+ padding: 8px 4px 8px 10px;
+ background: #fff;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ cursor: pointer;
+}
+div.tab-config-list-entry:hover {
+ background: #f6f6f6;
+}
+
+div.tab-config-list-label {
+}
+div.tab-config-list-users {
+ position: absolute;
+ right: 3px;
+ top: 3px;
+ bottom: 3px;
+ line-height: 27px;
+ font-size: 11px;
+ background: #f6f6f6;
+ float: right;
+ border: 1px solid #eee;
+ border-radius: 3px;
+ padding: 1px 5px;
+}
+
+i.spinner {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ line-height: 14px;
+ vertical-align: text-top;
+ margin-top: 0px;
+ background: url(spin.svg) no-repeat 50% 50%;
+ background-size: contain
+}
+
+
+