style.css 11 KB

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