diff options
author | Timoney, Daniel (dt5972) <dtimoney@att.com> | 2017-02-15 10:37:53 -0500 |
---|---|---|
committer | Timoney, Daniel (dt5972) <dtimoney@att.com> | 2017-02-15 10:40:37 -0500 |
commit | 324ee36fe31763e507b422ab0a88e4230045e205 (patch) | |
tree | d0b04520f6657601c918ce63fd27575977624187 /dgbuilder/public/style.css | |
parent | f0c97e8db427481e28c0a16b789bc73801b35e47 (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.css | 980 |
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 +} + + + |