winery/org.eclipse.winery.topologymodeler/src/main/webapp/css/topologymodeler.css

   1 /*******************************************************************************
   2  * Copyright (c) 2012-2013 University of Stuttgart.
   3  * All rights reserved. This program and the accompanying materials
   4  * are made available under the terms of the Eclipse Public License v1.0
   5  * and the Apache License 2.0 which both accompany this distribution,
   6  * and are available at http://www.eclipse.org/legal/epl-v10.html
   7  * and http://www.apache.org/licenses/LICENSE-2.0
   8  *
   9  * Contributors:
  10  *    Uwe Breitenbücher - initial API and implementation and/or initial documentation
  11  *    Oliver Kopp - improvements
  12  *    Yves Schubert - switch to bootstrap 3
  13  *******************************************************************************/
  14
  15 /* used if elements should be hidden forever. Cannot be undone with $(...).show() */
  16 .hidden {
  17         display: none;
  18 }
  19
  20 .fileupload {
  21         display: none;
  22 }
  23
  24 .overflowhidden {
  25         overflow: hidden;
  26         text-overflow: ellipsis;
  27 }
  28
  29
  30 body {
  31         background-color: white;
  32         margin: 0px;
  33 }
  34
  35 #loading {
  36         position: absolute;
  37         top: 0px;
  38         left: 0px;
  39         height: 100%;
  40         width: 100%; z-index: 200;
  41         background-color: white;
  42         z-index: 2000;
  43 }
  44
  45 #topbar {
  46         padding: 5px;
  47         width: 100%;
  48         position: fixed;
  49         top: 0px;
  50         z-index: 600;
  51         background-color: white;
  52 }
  53
  54 /* override jquery-ui.css */
  55 .ui-widget {
  56         font-size: 1.0em;
  57         font-family: Arial, Helvetica, sans-serif;
  58 }
  59
  60 a:hover {
  61         color:#1b911b;
  62         background-color:#f0f0f0;
  63 }
  64
  65 #drawingarea {
  66         height: 80em;
  67         position: relative;
  68 }
  69
  70 #drawingarea.editview {
  71         background: rgb(240, 246, 255);
  72         background-image: -ms-linear-gradient(top, #FFFFFF 0%, rgb(243, 243, 243) 100%);
  73         background-image: -moz-linear-gradient(top, #FFFFFF 0%, rgb(243, 243, 243) 100%);
  74         background-image: -o-linear-gradient(top, #FFFFFF 0%, rgb(243, 243, 243) 100%);
  75         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, rgb(243, 243, 243)));
  76         background-image: -webkit-linear-gradient(top, #FFFFFF 0%, rgb(243, 243, 243) 100%);
  77         background-image: linear-gradient(to bottom, #FFFFFF 0%, rgb(243, 243, 243) 100%);
  78 }
  79
  80 #drawingarea.printview {
  81 }
  82
  83 /* currently not used */
  84 div.focusedElement {
  85         border: 3px dotted rgb(0, 152, 255);
  86
  87         /* IE10 Consumer Preview */
  88         background-image: -ms-linear-gradient(top, #FFFFFF 0%, rgb(153, 243, 255) 100%);
  89
  90         /* Mozilla Firefox */
  91         background-image: -moz-linear-gradient(top, #FFFFFF 0%, rgb(153, 243, 255) 100%);
  92
  93         /* Opera */
  94         background-image: -o-linear-gradient(top, #FFFFFF 0%, rgb(153, 243, 255) 100%);
  95
  96         /* Webkit (Safari/Chrome 10) */
  97         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, rgb(153, 243, 255)));
  98
  99         /* Webkit (Chrome 11+) */
 100         background-image: -webkit-linear-gradient(top, #FFFFFF 0%, rgb(153, 243, 255) 100%);
 101
 102         /* W3C Markup, IE10 Release Preview */
 103         background-image: linear-gradient(to bottom, #FFFFFF 0%, rgb(153, 243, 255) 100%);
 104 }
 105
 106
 107 div.NodeTemplateShape.selected {
 108         background: rgb(216, 238, 255);
 109         border: 2px solid rgb(255, 127, 26);
 110
 111
 112         /* IE10 Consumer Preview */
 113         background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFD391 100%);
 114
 115         /* Mozilla Firefox */
 116         background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFD391 100%);
 117
 118         /* Opera */
 119         background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFD391 100%);
 120
 121         /* Webkit (Safari/Chrome 10) */
 122         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #FFD391));
 123
 124         /* Webkit (Chrome 11+) */
 125         background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFD391 100%);
 126
 127         /* W3C Markup, IE10 Release Preview */
 128         background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFD391 100%);
 129 }
 130
 131 div.content {
 132         overflow: hidden;
 133         width: 100%;
 134 }
 135
 136 .renderMode.ui-draggable {
 137         display:none;
 138 }
 139
 140 div.menu {
 141         display:none;
 142 }
 143
 144 ._jsPlumb_overlay {
 145         z-index: 5000;
 146 }
 147
 148 /* overriding dimensions.css to overcome problems with non-standard fonts and breaking cells */
 149 .u-size3of5,
 150 .u-size6of10 {
 151         width: 59%;
 152 }
 153 .u-size4of5 {
 154         width: 79%;
 155 }
 156
 157 .breakword {
 158         overflow-wrap: break-word;
 159 }
 160
 161 a.topbutton {
 162         margin-right: 10px;
 163 }
 164
 165 #selectionbox {
 166         position: absolute;
 167         border-style: dashed;
 168         border-width: 3px;
 169         border-color: black;
 170         background-color: cyan;
 171         opacity: 0.15;
 172         z-index: 30;
 173         display: none;
 174 }
 175
 176 #editorArea {
 177         width: 100%;
 178         height: 100%;
 179         margin-top: 45px;
 180 }
 181
 182 #nodeTemplateInformationSection > label {
 183         display: inline-block;
 184         width: 47px;
 185 }
 186
 187 .form-horizontal .controls > span {
 188         margin-top: 5px;
 189         display: inline-block;
 190 }
 191
 192 /* reset editable style */
 193 .editable-click {
 194         border-bottom: none;
 195 }
 196
 197 a.editable-click {
 198         border-bottom: none;
 199 }
 200
 201 a.editable-click:hover {
 202         border-bottom: none;
 203 }
 204
 205
 206 /* adding a req/cap */
 207
 208 div.modal-body > form.addReqForm > div.propertiesContainer {
 209         border: 1px solid #aeaeae;
 210         background: #ffffff;
 211         margin: 7px;
 212         width: 198px;
 213         border-radius: 7px;
 214         padding: 5px;
 215         float: left;
 216         overflow-x: hidden;
 217         display: none;
 218 }
 219
 220 div.modal-body > form.addReqForm > div.propertiesContainer > div.header {
 221         background: rgb(241, 241, 241);
 222         border-bottom: 1px solid #aeaeae;
 223         float: left;
 224         width: 198px;
 225         padding: 5px;
 226         margin-top: -5px;
 227         margin-left: -5px;
 228         margin-bottom: 6px;
 229 }
 230
 231 div.modal-body > form.addReqForm > div.propertiesContainer > div.header > a {
 232         float: right;
 233         height: 6px;
 234 }
 235
 236 div.modal-body > form.addReqForm > div.propertiesContainer > div.content > span.namespace {
 237         display: none;
 238 }
 239
 240 div.modal-body > form.addReqForm > div.propertiesContainer > div.content > span.elementName {
 241         display: none;
 242 }
 243
 244 div.modal-body > form.addReqForm > div.propertiesContainer > div.content table {
 245         float: left;
 246 }
 247
 248 div.modal-body > form.addCapForm > div.propertiesContainer {
 249         border: 1px solid #aeaeae;
 250         background: #ffffff;
 251         margin: 7px;
 252         width: 198px;
 253         border-radius: 7px;
 254         padding: 5px;
 255         float: left;
 256         overflow-x: hidden;
 257         display: none;
 258 }
 259
 260 div.modal-body > form.addCapForm > div.propertiesContainer > div.header {
 261         background: rgb(241, 241, 241);
 262         border-bottom: 1px solid #aeaeae;
 263         float: left;
 264         width: 198px;
 265         padding: 5px;
 266         margin-top: -5px;
 267         margin-left: -5px;
 268         margin-bottom: 6px;
 269 }
 270
 271 div.modal-body > form.addCapForm > div.propertiesContainer > div.header > a {
 272         float: right;
 273         height: 6px;
 274 }
 275
 276 div.modal-body > form.addCapForm > div.propertiesContainer > div.content > span.namespace {
 277         display: none;
 278 }
 279
 280 div.modal-body > form.addCapForm > div.propertiesContainer > div.content > span.elementName {
 281         display: none;
 282 }
 283
 284 div.modal-body > form.addCapForm > div.propertiesContainer > div.content table {
 285         float: left;
 286 }