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

   1 /*******************************************************************************
   2  * Copyright (c) 2012-2014 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  *******************************************************************************/
  13
  14 /** This CSS is shared between the Winery Repository and the Winery Topology Modeler **/
  15
  16 div.NodeTemplateShape {
  17         font-family: arial, verdana;
  18         font-size: 12px;
  19
  20         border: 1px solid black;
  21         border: 2px solid rgb(112, 152, 179);
  22         border-radius: 12px;
  23         width: 225px;
  24         z-index:20;
  25         position:absolute;
  26         box-shadow: 5px 5px 17px #aaa;
  27         background: #ffffff;
  28         cursor: move;
  29
  30         /* IE10 Consumer Preview */
  31         background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EBF2F7 100%);
  32
  33         /* Mozilla Firefox */
  34         background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EBF2F7 100%);
  35
  36         /* Opera */
  37         background-image: -o-linear-gradient(top, #FFFFFF 0%, #EBF2F7 100%);
  38
  39         /* Webkit (Safari/Chrome 10) */
  40         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EBF2F7));
  41
  42         /* Webkit (Chrome 11+) */
  43         background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EBF2F7 100%);
  44
  45         /* W3C Markup, IE10 Release Preview */
  46         background-image: linear-gradient(to bottom, #FFFFFF 0%, #EBF2F7 100%);
  47 }
  48
  49 div.NodeTemplateShape > div.headerContainer {
  50         height: 65px;
  51 }
  52
  53 div.NodeTemplateShape div.minMaxInstances {
  54 }
  55
  56 div.NodeTemplateShape div.minMaxInstances span.minInstances {
  57
  58 }
  59
  60 div.NodeTemplateShape div.minMaxInstances span.maxInstances {
  61
  62 }
  63
  64 div.NodeTemplateShape > .headerContainer > img.icon {
  65         float: left;
  66         height: 55px;
  67         margin: 10px 0px 10px 10px;
  68 }
  69 div.NodeTemplateShape > .headerContainer > div.id {
  70         position: absolute;
  71         left: 90px;
  72         top: 0px;
  73         height: 16px;
  74         width: 130px;
  75         text-overflow: ellipsis;
  76         overflow: hidden;
  77         text-decoration: underline;
  78         display: none;
  79 }
  80 div.NodeTemplateShape > .headerContainer > div.name {
  81         position: absolute;
  82         left: 90px;
  83         top: 20px;
  84         height: 16px;
  85         width: 130px;
  86         text-overflow: ellipsis;
  87         overflow: hidden;
  88 }
  89 div.NodeTemplateShape > .headerContainer > div.type {
  90         position: absolute;
  91         left: 90px;
  92         top: 40px;
  93         height: 16px;
  94         width: 130px;
  95         text-overflow: ellipsis;
  96         overflow: hidden;
  97 }
  98 div.NodeTemplateShape > .headerContainer > div.type:before {
  99         content: "(";
 100 }
 101 div.NodeTemplateShape > .headerContainer > div.type:after {
 102         content: ")";
 103 }
 104
 105 img.createAnnotation {
 106         width: 20px;
 107         position: absolute;
 108         top: 5px;
 109         right: 5px;
 110 }
 111
 112 a.KVPropertyValue {
 113         overflow: hidden;
 114         text-overflow: ellipsis;
 115 }
 116
 117 div.NodeTemplateShape > div.deploymentArtifactsContainer {
 118         border: 1px solid #aeaeae;
 119         background: #ffffff;
 120         margin: 7px;
 121         width: 198px;
 122         border-radius: 7px;
 123         padding: 5px;
 124         float: left;
 125         overflow-x: hidden;
 126         display: none;
 127 }
 128
 129 div.NodeTemplateShape > div.deploymentArtifactsContainer > div.header {
 130         border-bottom: 1px solid #aeaeae;
 131         float: left;
 132         width: 198px;
 133         padding: 5px;
 134         margin-top: -5px;
 135         margin-left: -5px;
 136         margin-bottom: 6px;
 137         background-image: -ms-linear-gradient(top, #FFFFFF 0%, rgb(209, 209, 209) 100%);
 138         background-image: -moz-linear-gradient(top, #FFFFFF 0%, rgb(209, 209, 209) 100%);
 139         background-image: -o-linear-gradient(top, #FFFFFF 0%, rgb(209, 209, 209) 100%);
 140         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, rgb(209, 209, 209)));
 141         background-image: -webkit-linear-gradient(top, #FFFFFF 0%, rgb(209, 209, 209) 100%);
 142         background-image: linear-gradient(to bottom, #FFFFFF 0%, rgb(209, 209, 209) 100%);
 143 }
 144
 145 div.NodeTemplateShape > div.deploymentArtifactsContainer > div.content > div.deploymentArtifact {
 146         background-color: #FFDADA;
 147         height: 20px;
 148 }
 149
 150 /* indicates editing possibility */
 151 div.NodeTemplateShape > div.deploymentArtifactsContainer > div.content > div.deploymentArtifact:hover {
 152         background-color: lightblue;
 153         cursor: pointer;
 154 }
 155
 156 div.NodeTemplateShape > div.deploymentArtifactsContainer > div.content > div.deploymentArtifact > div {
 157         height: 20px;
 158 }
 159
 160 div.NodeTemplateShape > div.deploymentArtifactsContainer > div.content > div.deploymentArtifact:first-child {
 161         border-top: 0px;
 162 }
 163
 164 div.NodeTemplateShape > div.deploymentArtifactsContainer > div.content > div.addDA {
 165         display: none;
 166 }
 167
 168 div.NodeTemplateShape > div.deploymentArtifactsContainer > div.content > div.addnewartifacttemplate {
 169         display: none;
 170         background-color: Silver;
 171         text-align: center;
 172 }
 173
 174 div.NodeTemplateShape > div.propertiesContainer {
 175         border: 1px solid #aeaeae;
 176         background: #ffffff;
 177         margin: 7px;
 178         width: 198px;
 179         border-radius: 7px;
 180         padding: 5px;
 181         float: left;
 182         overflow-x: hidden;
 183         display: none;
 184 }
 185
 186 div.NodeTemplateShape > div.propertiesContainer > div.header {
 187         background: rgb(241, 241, 241);
 188         border-bottom: 1px solid #aeaeae;
 189         float: left;
 190         width: 198px;
 191         padding: 5px;
 192         margin-top: -5px;
 193         margin-left: -5px;
 194         margin-bottom: 6px;
 195 }
 196
 197 div.NodeTemplateShape > div.propertiesContainer > div.header > a {
 198         float: right;
 199         height: 6px;
 200 }
 201
 202 div.NodeTemplateShape > div.propertiesContainer > div.content > span.namespace {
 203         display: none;
 204 }
 205
 206 div.NodeTemplateShape > div.propertiesContainer > div.content > span.elementName {
 207         display: none;
 208 }
 209
 210 div.NodeTemplateShape > div.propertiesContainer > div.content table {
 211         float: left;
 212 }
 213
 214 div.NodeTemplateShape div.reqorcap {
 215         cursor: pointer;
 216 }
 217
 218 div.NodeTemplateShape div.reqorcap.id {
 219 }
 220
 221 div.NodeTemplateShape div.reqorcap.name {
 222         overflow: hidden;
 223         text-overflow: ellipsis;
 224 }
 225
 226 div.NodeTemplateShape div.reqorcap.type {
 227         overflow: hidden;
 228         text-overflow: ellipsis;
 229 }
 230
 231 /* indicates editing possibility */
 232 div.NodeTemplateShape div.reqorcap:hover {
 233         background-color: lightgray;
 234 }
 235
 236 div.NodeTemplateShape > div.requirementsContainer {
 237         border: 1px solid #aeaeae;
 238         background: #ffffff;
 239         margin: 7px;
 240         width: 198px;
 241         border-radius: 7px;
 242         padding: 5px;
 243         float: left;
 244         overflow-x: hidden;
 245         display: none;
 246 }
 247
 248 div.NodeTemplateShape > div.requirementsContainer > div.header {
 249         background: rgb(241, 241, 241);
 250         border-bottom: 1px solid #aeaeae;
 251         float: left;
 252         width: 198px;
 253         padding: 5px;
 254         margin-top: -5px;
 255         margin-left: -5px;
 256         margin-bottom: 6px;
 257 }
 258
 259 div.NodeTemplateShape > div.requirementsContainer > div.content > div.reqorcap > div.propertiesContainer {
 260         display: none;
 261 }
 262
 263
 264 div.NodeTemplateShape > div.capabilitiesContainer {
 265         border: 1px solid #aeaeae;
 266         background: #ffffff;
 267         margin: 7px;
 268         width: 198px;
 269         border-radius: 7px;
 270         padding: 5px;
 271         float: left;
 272         overflow-x: hidden;
 273         display: none;
 274 }
 275
 276 div.NodeTemplateShape > div.capabilitiesContainer > div.header {
 277         background: rgb(241, 241, 241);
 278         border-bottom: 1px solid #aeaeae;
 279         float: left;
 280         width: 198px;
 281         padding: 5px;
 282         margin-top: -5px;
 283         margin-left: -5px;
 284         margin-bottom: 6px;
 285 }
 286
 287 div.NodeTemplateShape > div.capabilitiesContainer > div.content > div.reqorcap > div.propertiesContainer {
 288         display: none;
 289 }
 290
 291
 292 /** Policies **/
 293
 294 div.NodeTemplateShape > div.policiesContainer {
 295         border: 1px solid #aeaeae;
 296         background: #ffffff;
 297         margin: 7px;
 298         width: 198px;
 299         border-radius: 7px;
 300         padding: 5px;
 301         float: left;
 302         overflow-x: hidden;
 303         display: none;
 304 }
 305
 306 div.NodeTemplateShape > div.policiesContainer > div.header {
 307         background: rgb(241, 241, 241);
 308         border-bottom: 1px solid #aeaeae;
 309         float: left;
 310         width: 198px;
 311         padding: 5px;
 312         margin-top: -5px;
 313         margin-left: -5px;
 314         margin-bottom: 6px;
 315 }
 316
 317 /* indicates editing possibility */
 318 div.NodeTemplateShape > div.policiesContainer > div.content > div.policy:hover {
 319         background-color: lightgray;
 320 }
 321
 322 div.NodeTemplateShape > div.policiesContainer > div.content > div.policy > div {
 323         overflow: hidden;
 324         text-overflow: ellipsis;
 325 }
 326
 327 div.NodeTemplateShape > div.policiesContainer > div.content > div.policy > span {
 328         display: none;
 329 }
 330
 331 div.NodeTemplateShape > div.policiesContainer > div.content > div.policy > textarea.policy_xml {
 332         display: none;
 333 }
 334
 335
 336
 337 div.connectorBox {
 338         height: 15px;
 339         width: 15px;
 340         float: left;
 341 }
 342
 343 div.connectorLabel {
 344         height: 15px;
 345         width: 125px;
 346         overflow: hidden;
 347         margin-left: 20px;
 348         white-space: nowrap;
 349         line-height: 16px;
 350         overflow: hidden;
 351         text-overflow: ellipsis;
 352 }
 353
 354 div.connectorEndpoint {
 355         width: 140px;
 356         cursor: pointer;
 357 }
 358
 359 div.connectorEndpoint:hover {
 360         background: rgb(237, 242, 247);
 361 }
 362
 363 div.endpointContainer {
 364         background: #ffffff;
 365         box-shadow: 2px 2px 19px #aaa;
 366         border: 1px solid #aeaeae;
 367         width: 150px;
 368         position: absolute;
 369         left: 212px;
 370         padding: 5px;
 371         z-index: 20;
 372         display: none;
 373 }
 374
 375 ._jsPlumb_connector {
 376         z-index: 15;
 377 }
 378
 379 div#patternArea {
 380         position: absolute;
 381         z-index: 10000;
 382         right: 0px;
 383         top: 0px;
 384         height: 100%;
 385         width: 500px;
 386         background: rgb(250, 250, 250);
 387         padding: 5px;
 388 }
 389
 390 div.patternSuggestionContainer {
 391         border: 2px solid #aeaeae;
 392         padding: 5px 3px;
 393         margin-bottom: 5px;
 394 }
 395
 396 div.patternSuggestionContainer.focusedElement {
 397
 398 }
 399
 400 .pointer {
 401         cursor: pointer;
 402 }
 403
 404 div.relationshipTypeLabel {
 405         /* z-index of arrow is 14, therefore we use 15 */
 406         z-index: 15;
 407
 408         cursor: default;
 409         font-family: arial, verdana;
 410         font-size: 12px;
 411 }
 412
 413 .unselectable {
 414         /* disable text selection - source: http://stackoverflow.com/a/4407335/873282 */
 415         user-select: none;
 416         -khtml-user-select: none;
 417         -moz-user-select: none;
 418         -ms-user-select: none;
 419         -webkit-touch-callout: none;
 420         -webkit-user-select: none;
 421 }