app/assets/openlayers/theme/default/style.css.scss

   1 /*
   2  *= require theme/default/SimpleLayerSwitcher
   3  */
   4
   5 div.olMap {
   6     z-index: 0;
   7     padding: 0 !important;
   8     margin: 0 !important;
   9     cursor: default;
  10 }
  11
  12 div.olMapViewport {
  13     text-align: left;
  14 }
  15
  16 div.olLayerDiv {
  17    -moz-user-select: none;
  18    -khtml-user-select: none;
  19 }
  20
  21 .olLayerGoogleCopyright {
  22     left: 2px;
  23     bottom: 2px;
  24 }
  25 .olLayerGoogleV3.olLayerGoogleCopyright {
  26     right: auto !important;
  27 }
  28 .olLayerGooglePoweredBy {
  29     left: 2px;
  30     bottom: 15px;
  31 }
  32 .olLayerGoogleV3.olLayerGooglePoweredBy {
  33     bottom: 15px !important;
  34 }
  35 .olControlAttribution {
  36     font-size: smaller;
  37     right: 3px;
  38     bottom: 4.5em;
  39     position: absolute;
  40     display: block;
  41 }
  42 .olControlScale {
  43     right: 3px;
  44     bottom: 3em;
  45     display: block;
  46     position: absolute;
  47     font-size: smaller;
  48 }
  49 .olControlScaleLine {
  50    display: block;
  51    position: absolute;
  52    left: 10px;
  53    bottom: 15px;
  54    font-size: xx-small;
  55 }
  56 .olControlScaleLineBottom {
  57    border: solid 2px black;
  58    border-bottom: none;
  59    margin-top:-2px;
  60    text-align: center;
  61 }
  62 .olControlScaleLineTop {
  63    border: solid 2px black;
  64    border-top: none;
  65    text-align: center;
  66 }
  67
  68 .olControlPermalink {
  69     right: 3px;
  70     bottom: 1.5em;
  71     display: block;
  72     position: absolute;
  73     font-size: smaller;
  74 }
  75
  76 div.olControlMousePosition {
  77     bottom: 0;
  78     right: 3px;
  79     display: block;
  80     position: absolute;
  81     font-family: Arial;
  82     font-size: smaller;
  83 }
  84
  85 .olControlOverviewMapContainer {
  86     position: absolute;
  87     bottom: 0;
  88     right: 0;
  89 }
  90
  91 .olControlOverviewMapElement {
  92     padding: 10px 18px 10px 10px;
  93     background-color: #00008B;
  94     -moz-border-radius: 1em 0 0 0;
  95 }
  96
  97 .olControlOverviewMapMinimizeButton,
  98 .olControlOverviewMapMaximizeButton {
  99     height: 18px;
 100     width: 18px;
 101     right: 0;
 102     bottom: 80px;
 103     cursor: pointer;
 104 }
 105
 106 .olControlOverviewMapExtentRectangle {
 107     overflow: hidden;
 108     background-image: image-url("theme/default/img/blank.gif");
 109     cursor: move;
 110     border: 2px dotted red;
 111 }
 112 .olControlOverviewMapRectReplacement {
 113     overflow: hidden;
 114     cursor: move;
 115     background-image: image-url("theme/default/img/overview_replacement.gif");
 116     background-repeat: no-repeat;
 117     background-position: center;
 118 }
 119
 120 .olLayerGeoRSSDescription {
 121     float:left;
 122     width:100%;
 123     overflow:auto;
 124     font-size:1.0em;
 125 }
 126 .olLayerGeoRSSClose {
 127     float:right;
 128     color:gray;
 129     font-size:1.2em;
 130     margin-right:6px;
 131     font-family:sans-serif;
 132 }
 133 .olLayerGeoRSSTitle {
 134     float:left;font-size:1.2em;
 135 }
 136
 137 .olPopupContent {
 138     padding:5px;
 139     overflow: auto;
 140 }
 141
 142 .olControlNavigationHistory {
 143    background-image: image-url("theme/default/img/navigation_history.png");
 144    background-repeat: no-repeat;
 145    width:  24px;
 146    height: 24px;
 147
 148 }
 149 .olControlNavigationHistoryPreviousItemActive {
 150   background-position: 0 0;
 151 }
 152 .olControlNavigationHistoryPreviousItemInactive {
 153    background-position: 0 -24px;
 154 }
 155 .olControlNavigationHistoryNextItemActive {
 156    background-position: -24px 0;
 157 }
 158 .olControlNavigationHistoryNextItemInactive {
 159    background-position: -24px -24px;
 160 }
 161
 162 div.olControlSaveFeaturesItemActive {
 163     background-image: image-url("theme/default/img/save_features_on.png");
 164     background-repeat: no-repeat;
 165     background-position: 0 1px;
 166 }
 167 div.olControlSaveFeaturesItemInactive {
 168     background-image: image-url("theme/default/img/save_features_off.png");
 169     background-repeat: no-repeat;
 170     background-position: 0 1px;
 171 }
 172
 173 .olHandlerBoxZoomBox {
 174     border: 2px solid red;
 175     position: absolute;
 176     background-color: white;
 177     opacity: 0.50;
 178     font-size: 1px;
 179     filter: alpha(opacity=50);
 180 }
 181 .olHandlerBoxSelectFeature {
 182     border: 2px solid blue;
 183     position: absolute;
 184     background-color: white;
 185     opacity: 0.50;
 186     font-size: 1px;
 187     filter: alpha(opacity=50);
 188 }
 189
 190 .olControlPanPanel {
 191     top: 10px;
 192     left: 5px;
 193 }
 194
 195 .olControlPanPanel div {
 196     background-image: image-url("theme/default/img/pan-panel.png");
 197     height: 18px;
 198     width: 18px;
 199     cursor: pointer;
 200     position: absolute;
 201 }
 202
 203 .olControlPanPanel .olControlPanNorthItemInactive {
 204     top: 0;
 205     left: 9px;
 206     background-position: 0 0;
 207 }
 208 .olControlPanPanel .olControlPanSouthItemInactive {
 209     top: 36px;
 210     left: 9px;
 211     background-position: 18px 0;
 212 }
 213 .olControlPanPanel .olControlPanWestItemInactive {
 214     position: absolute;
 215     top: 18px;
 216     left: 0;
 217     background-position: 0 18px;
 218 }
 219 .olControlPanPanel .olControlPanEastItemInactive {
 220     top: 18px;
 221     left: 18px;
 222     background-position: 18px 18px;
 223 }
 224
 225 .olControlZoomPanel {
 226     top: 71px;
 227     left: 14px;
 228 }
 229
 230 .olControlZoomPanel div {
 231     background-image: image-url("theme/default/img/zoom-panel.png");
 232     position: absolute;
 233     height: 18px;
 234     width: 18px;
 235     cursor: pointer;
 236 }
 237
 238 .olControlZoomPanel .olControlZoomInItemInactive {
 239     top: 0;
 240     left: 0;
 241     background-position: 0 0;
 242 }
 243
 244 .olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
 245     top: 18px;
 246     left: 0;
 247     background-position: 0 -18px;
 248 }
 249
 250 .olControlZoomPanel .olControlZoomOutItemInactive {
 251     top: 36px;
 252     left: 0;
 253     background-position: 0 18px;
 254 }
 255
 256 /*
 257  * When a potential text is bigger than the image it move the image
 258  * with some headers (closes #3154)
 259  */
 260 .olControlPanZoomBar div {
 261     font-size: 1px;
 262 }
 263
 264 .olPopupCloseBox {
 265   background: image-url("theme/default/img/close.gif") no-repeat;
 266   cursor: pointer;
 267 }
 268
 269 .olFramedCloudPopupContent {
 270     padding: 5px;
 271     overflow: auto;
 272 }
 273
 274 .olControlNoSelect {
 275  -moz-user-select: none;
 276  -khtml-user-select: none;
 277 }
 278
 279 .olImageLoadError {
 280     background: image-url("theme/default/img/missing-tile.png") no-repeat;
 281 }
 282
 283 /**
 284  * Cursor styles
 285  */
 286
 287 .olCursorWait {
 288     cursor: wait;
 289 }
 290 .olDragDown {
 291     cursor: move;
 292 }
 293 .olDrawBox {
 294     cursor: crosshair;
 295 }
 296 .olControlDragFeatureOver {
 297     cursor: move;
 298 }
 299 .olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
 300     cursor: -moz-grabbing;
 301 }
 302
 303 /**
 304  * Layer switcher
 305  */
 306 .olControlLayerSwitcher {
 307     position: absolute;
 308     top: 25px;
 309     right: 0;
 310     width: 20em;
 311     font-family: sans-serif;
 312     font-weight: bold;
 313     margin-top: 3px;
 314     margin-left: 3px;
 315     margin-bottom: 3px;
 316     font-size: smaller;
 317     color: white;
 318     background-color: transparent;
 319 }
 320
 321 .olControlLayerSwitcher .layersDiv {
 322     padding-top: 5px;
 323     padding-left: 10px;
 324     padding-bottom: 5px;
 325     padding-right: 10px;
 326     background-color: darkblue;
 327 }
 328
 329 .olControlLayerSwitcher .layersDiv .baseLbl,
 330 .olControlLayerSwitcher .layersDiv .dataLbl {
 331     margin-top: 3px;
 332     margin-left: 3px;
 333     margin-bottom: 3px;
 334 }
 335
 336 .olControlLayerSwitcher .layersDiv .baseLayersDiv,
 337 .olControlLayerSwitcher .layersDiv .dataLayersDiv {
 338     padding-left: 10px;
 339 }
 340
 341 .olControlLayerSwitcher .maximizeDiv,
 342 .olControlLayerSwitcher .minimizeDiv {
 343     width: 18px;
 344     height: 18px;
 345     top: 5px;
 346     right: 0;
 347     cursor: pointer;
 348 }
 349
 350 .olBingAttribution {
 351     color: #DDD;
 352 }
 353 .olBingAttribution.road {
 354     color: #333;
 355 }
 356
 357 .olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
 358     color: #EEE;
 359 }
 360 .olGoogleAttribution {
 361     color: #333;
 362 }
 363 span.olGoogleAttribution a {
 364     color: #77C;
 365 }
 366 span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
 367     color: #EEE;
 368 }
 369
 370 /**
 371  * Editing and navigation icons.
 372  * (using the editing_tool_bar.png sprint image)
 373  */
 374 .olControlNavToolbar ,
 375 .olControlEditingToolbar {
 376     margin: 5px 5px 0 0;
 377 }
 378 .olControlNavToolbar div,
 379 .olControlEditingToolbar div {
 380     background-image: image-url("theme/default/img/editing_tool_bar.png");
 381     background-repeat: no-repeat;
 382     margin: 0 0 5px 5px;
 383     width: 24px;
 384     height: 22px;
 385     cursor: pointer
 386 }
 387 /* positions */
 388 .olControlEditingToolbar {
 389     right: 0;
 390     top: 0;
 391 }
 392 .olControlNavToolbar {
 393     top: 295px;
 394     left: 9px;
 395 }
 396 /* layouts */
 397 .olControlEditingToolbar div {
 398     float: right;
 399 }
 400 /* individual controls */
 401 .olControlNavToolbar .olControlNavigationItemInactive,
 402 .olControlEditingToolbar .olControlNavigationItemInactive {
 403     background-position: -103px -1px;
 404 }
 405 .olControlNavToolbar .olControlNavigationItemActive ,
 406 .olControlEditingToolbar .olControlNavigationItemActive  {
 407     background-position: -103px -24px;
 408 }
 409 .olControlNavToolbar .olControlZoomBoxItemInactive {
 410     background-position: -128px -1px;
 411 }
 412 .olControlNavToolbar .olControlZoomBoxItemActive  {
 413     background-position: -128px -24px;
 414 }
 415 .olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
 416     background-position: -77px -1px;
 417 }
 418 .olControlEditingToolbar .olControlDrawFeaturePointItemActive {
 419     background-position: -77px -24px;
 420 }
 421 .olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
 422     background-position: -51px -1px;
 423 }
 424 .olControlEditingToolbar .olControlDrawFeaturePathItemActive {
 425     background-position: -51px -24px;
 426 }
 427 .olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{
 428     background-position: -26px -1px;
 429 }
 430 .olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
 431     background-position: -26px -24px;
 432 }
 433
 434 div.olControlZoom {
 435     position: absolute;
 436     top: 8px;
 437     left: 8px;
 438     background: rgba(255,255,255,0.4);
 439     border-radius: 4px;
 440     padding: 2px;
 441 }
 442 div.olControlZoom a {
 443     display: block;
 444     margin: 1px;
 445     padding: 0;
 446     color: white;
 447     font-size: 18px;
 448     font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
 449     font-weight: bold;
 450     text-decoration: none;
 451     text-align: center;
 452     height: 22px;
 453     width:22px;
 454     line-height: 19px;
 455     background: #130085; /* fallback for IE - IE6 requires background shorthand*/
 456     background: rgba(0, 60, 136, 0.5);
 457     filter: alpha(opacity=80);
 458 }
 459 div.olControlZoom a:hover {
 460     background: #130085; /* fallback for IE */
 461     background: rgba(0, 60, 136, 0.7);
 462     filter: alpha(opacity=100);
 463 }
 464 @media only screen and (max-width: 600px) {
 465     div.olControlZoom a:hover {
 466         background: rgba(0, 60, 136, 0.5);
 467     }
 468 }
 469 a.olControlZoomIn {
 470     border-radius: 4px 4px 0 0;
 471 }
 472 a.olControlZoomOut {
 473     border-radius: 0 0 4px 4px;
 474 }
 475
 476
 477 /**
 478  * Animations
 479  */
 480
 481 .olLayerGrid .olTileImage {
 482     -webkit-transition: opacity 0.2s linear;
 483     -moz-transition: opacity 0.2s linear;
 484     -o-transition: opacity 0.2s linear;
 485     transition: opacity 0.2s linear;
 486 }