| /** |
| * 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; } |
| |
| /* ---------- 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_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 |
| } |
| |
| |
| |