Newer
Older
www-root / lib / leaflet-0.7.3 / leaflet.css
@hayashi hayashi on 5 Nov 2017 9 KB leaflet Vector Tile (tileFuel)
  1. /* required styles */
  2.  
  3. .leaflet-map-pane,
  4. .leaflet-tile,
  5. .leaflet-marker-icon,
  6. .leaflet-marker-shadow,
  7. .leaflet-tile-pane,
  8. .leaflet-tile-container,
  9. .leaflet-overlay-pane,
  10. .leaflet-shadow-pane,
  11. .leaflet-marker-pane,
  12. .leaflet-popup-pane,
  13. .leaflet-overlay-pane svg,
  14. .leaflet-zoom-box,
  15. .leaflet-image-layer,
  16. .leaflet-layer {
  17. position: absolute;
  18. left: 0;
  19. top: 0;
  20. }
  21. .leaflet-container {
  22. overflow: hidden;
  23. -ms-touch-action: none;
  24. }
  25. .leaflet-tile,
  26. .leaflet-marker-icon,
  27. .leaflet-marker-shadow {
  28. -webkit-user-select: none;
  29. -moz-user-select: none;
  30. user-select: none;
  31. -webkit-user-drag: none;
  32. }
  33. .leaflet-marker-icon,
  34. .leaflet-marker-shadow {
  35. display: block;
  36. }
  37. /* map is broken in FF if you have max-width: 100% on tiles */
  38. .leaflet-container img {
  39. max-width: none !important;
  40. }
  41. /* stupid Android 2 doesn't understand "max-width: none" properly */
  42. .leaflet-container img.leaflet-image-layer {
  43. max-width: 15000px !important;
  44. }
  45. .leaflet-tile {
  46. filter: inherit;
  47. visibility: hidden;
  48. }
  49. .leaflet-tile-loaded {
  50. visibility: inherit;
  51. }
  52. .leaflet-zoom-box {
  53. width: 0;
  54. height: 0;
  55. }
  56. /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
  57. .leaflet-overlay-pane svg {
  58. -moz-user-select: none;
  59. }
  60.  
  61. .leaflet-tile-pane { z-index: 2; }
  62. .leaflet-objects-pane { z-index: 3; }
  63. .leaflet-overlay-pane { z-index: 4; }
  64. .leaflet-shadow-pane { z-index: 5; }
  65. .leaflet-marker-pane { z-index: 6; }
  66. .leaflet-popup-pane { z-index: 7; }
  67.  
  68. .leaflet-vml-shape {
  69. width: 1px;
  70. height: 1px;
  71. }
  72. .lvml {
  73. behavior: url(#default#VML);
  74. display: inline-block;
  75. position: absolute;
  76. }
  77.  
  78.  
  79. /* control positioning */
  80.  
  81. .leaflet-control {
  82. position: relative;
  83. z-index: 7;
  84. pointer-events: auto;
  85. }
  86. .leaflet-top,
  87. .leaflet-bottom {
  88. position: absolute;
  89. z-index: 1000;
  90. pointer-events: none;
  91. }
  92. .leaflet-top {
  93. top: 0;
  94. }
  95. .leaflet-right {
  96. right: 0;
  97. }
  98. .leaflet-bottom {
  99. bottom: 0;
  100. }
  101. .leaflet-left {
  102. left: 0;
  103. }
  104. .leaflet-control {
  105. float: left;
  106. clear: both;
  107. }
  108. .leaflet-right .leaflet-control {
  109. float: right;
  110. }
  111. .leaflet-top .leaflet-control {
  112. margin-top: 10px;
  113. }
  114. .leaflet-bottom .leaflet-control {
  115. margin-bottom: 10px;
  116. }
  117. .leaflet-left .leaflet-control {
  118. margin-left: 10px;
  119. }
  120. .leaflet-right .leaflet-control {
  121. margin-right: 10px;
  122. }
  123.  
  124.  
  125. /* zoom and fade animations */
  126.  
  127. .leaflet-fade-anim .leaflet-tile,
  128. .leaflet-fade-anim .leaflet-popup {
  129. opacity: 0;
  130. -webkit-transition: opacity 0.2s linear;
  131. -moz-transition: opacity 0.2s linear;
  132. -o-transition: opacity 0.2s linear;
  133. transition: opacity 0.2s linear;
  134. }
  135. .leaflet-fade-anim .leaflet-tile-loaded,
  136. .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  137. opacity: 1;
  138. }
  139.  
  140. .leaflet-zoom-anim .leaflet-zoom-animated {
  141. -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
  142. -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
  143. -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
  144. transition: transform 0.25s cubic-bezier(0,0,0.25,1);
  145. }
  146. .leaflet-zoom-anim .leaflet-tile,
  147. .leaflet-pan-anim .leaflet-tile,
  148. .leaflet-touching .leaflet-zoom-animated {
  149. -webkit-transition: none;
  150. -moz-transition: none;
  151. -o-transition: none;
  152. transition: none;
  153. }
  154.  
  155. .leaflet-zoom-anim .leaflet-zoom-hide {
  156. visibility: hidden;
  157. }
  158.  
  159.  
  160. /* cursors */
  161.  
  162. .leaflet-clickable {
  163. cursor: pointer;
  164. }
  165. .leaflet-container {
  166. cursor: -webkit-grab;
  167. cursor: -moz-grab;
  168. }
  169. .leaflet-popup-pane,
  170. .leaflet-control {
  171. cursor: auto;
  172. }
  173. .leaflet-dragging .leaflet-container,
  174. .leaflet-dragging .leaflet-clickable {
  175. cursor: move;
  176. cursor: -webkit-grabbing;
  177. cursor: -moz-grabbing;
  178. }
  179.  
  180.  
  181. /* visual tweaks */
  182.  
  183. .leaflet-container {
  184. background: #ddd;
  185. outline: 0;
  186. }
  187. .leaflet-container a {
  188. color: #0078A8;
  189. }
  190. .leaflet-container a.leaflet-active {
  191. outline: 2px solid orange;
  192. }
  193. .leaflet-zoom-box {
  194. border: 2px dotted #38f;
  195. background: rgba(255,255,255,0.5);
  196. }
  197.  
  198.  
  199. /* general typography */
  200. .leaflet-container {
  201. font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
  202. }
  203.  
  204.  
  205. /* general toolbar styles */
  206.  
  207. .leaflet-bar {
  208. box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  209. border-radius: 4px;
  210. }
  211. .leaflet-bar a,
  212. .leaflet-bar a:hover {
  213. background-color: #fff;
  214. border-bottom: 1px solid #ccc;
  215. width: 26px;
  216. height: 26px;
  217. line-height: 26px;
  218. display: block;
  219. text-align: center;
  220. text-decoration: none;
  221. color: black;
  222. }
  223. .leaflet-bar a,
  224. .leaflet-control-layers-toggle {
  225. background-position: 50% 50%;
  226. background-repeat: no-repeat;
  227. display: block;
  228. }
  229. .leaflet-bar a:hover {
  230. background-color: #f4f4f4;
  231. }
  232. .leaflet-bar a:first-child {
  233. border-top-left-radius: 4px;
  234. border-top-right-radius: 4px;
  235. }
  236. .leaflet-bar a:last-child {
  237. border-bottom-left-radius: 4px;
  238. border-bottom-right-radius: 4px;
  239. border-bottom: none;
  240. }
  241. .leaflet-bar a.leaflet-disabled {
  242. cursor: default;
  243. background-color: #f4f4f4;
  244. color: #bbb;
  245. }
  246.  
  247. .leaflet-touch .leaflet-bar a {
  248. width: 30px;
  249. height: 30px;
  250. line-height: 30px;
  251. }
  252.  
  253.  
  254. /* zoom control */
  255.  
  256. .leaflet-control-zoom-in,
  257. .leaflet-control-zoom-out {
  258. font: bold 18px 'Lucida Console', Monaco, monospace;
  259. text-indent: 1px;
  260. }
  261. .leaflet-control-zoom-out {
  262. font-size: 20px;
  263. }
  264.  
  265. .leaflet-touch .leaflet-control-zoom-in {
  266. font-size: 22px;
  267. }
  268. .leaflet-touch .leaflet-control-zoom-out {
  269. font-size: 24px;
  270. }
  271.  
  272.  
  273. /* layers control */
  274.  
  275. .leaflet-control-layers {
  276. box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  277. background: #fff;
  278. border-radius: 5px;
  279. }
  280. .leaflet-control-layers-toggle {
  281. background-image: url(images/layers.png);
  282. width: 36px;
  283. height: 36px;
  284. }
  285. .leaflet-retina .leaflet-control-layers-toggle {
  286. background-image: url(images/layers-2x.png);
  287. background-size: 26px 26px;
  288. }
  289. .leaflet-touch .leaflet-control-layers-toggle {
  290. width: 44px;
  291. height: 44px;
  292. }
  293. .leaflet-control-layers .leaflet-control-layers-list,
  294. .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  295. display: none;
  296. }
  297. .leaflet-control-layers-expanded .leaflet-control-layers-list {
  298. display: block;
  299. position: relative;
  300. }
  301. .leaflet-control-layers-expanded {
  302. padding: 6px 10px 6px 6px;
  303. color: #333;
  304. background: #fff;
  305. }
  306. .leaflet-control-layers-selector {
  307. margin-top: 2px;
  308. position: relative;
  309. top: 1px;
  310. }
  311. .leaflet-control-layers label {
  312. display: block;
  313. }
  314. .leaflet-control-layers-separator {
  315. height: 0;
  316. border-top: 1px solid #ddd;
  317. margin: 5px -10px 5px -6px;
  318. }
  319.  
  320.  
  321. /* attribution and scale controls */
  322.  
  323. .leaflet-container .leaflet-control-attribution {
  324. background: #fff;
  325. background: rgba(255, 255, 255, 0.7);
  326. margin: 0;
  327. }
  328. .leaflet-control-attribution,
  329. .leaflet-control-scale-line {
  330. padding: 0 5px;
  331. color: #333;
  332. }
  333. .leaflet-control-attribution a {
  334. text-decoration: none;
  335. }
  336. .leaflet-control-attribution a:hover {
  337. text-decoration: underline;
  338. }
  339. .leaflet-container .leaflet-control-attribution,
  340. .leaflet-container .leaflet-control-scale {
  341. font-size: 11px;
  342. }
  343. .leaflet-left .leaflet-control-scale {
  344. margin-left: 5px;
  345. }
  346. .leaflet-bottom .leaflet-control-scale {
  347. margin-bottom: 5px;
  348. }
  349. .leaflet-control-scale-line {
  350. border: 2px solid #777;
  351. border-top: none;
  352. line-height: 1.1;
  353. padding: 2px 5px 1px;
  354. font-size: 11px;
  355. white-space: nowrap;
  356. overflow: hidden;
  357. -moz-box-sizing: content-box;
  358. box-sizing: content-box;
  359.  
  360. background: #fff;
  361. background: rgba(255, 255, 255, 0.5);
  362. }
  363. .leaflet-control-scale-line:not(:first-child) {
  364. border-top: 2px solid #777;
  365. border-bottom: none;
  366. margin-top: -2px;
  367. }
  368. .leaflet-control-scale-line:not(:first-child):not(:last-child) {
  369. border-bottom: 2px solid #777;
  370. }
  371.  
  372. .leaflet-touch .leaflet-control-attribution,
  373. .leaflet-touch .leaflet-control-layers,
  374. .leaflet-touch .leaflet-bar {
  375. box-shadow: none;
  376. }
  377. .leaflet-touch .leaflet-control-layers,
  378. .leaflet-touch .leaflet-bar {
  379. border: 2px solid rgba(0,0,0,0.2);
  380. background-clip: padding-box;
  381. }
  382.  
  383.  
  384. /* popup */
  385.  
  386. .leaflet-popup {
  387. position: absolute;
  388. text-align: center;
  389. }
  390. .leaflet-popup-content-wrapper {
  391. padding: 1px;
  392. text-align: left;
  393. border-radius: 12px;
  394. }
  395. .leaflet-popup-content {
  396. margin: 13px 19px;
  397. line-height: 1.4;
  398. }
  399. .leaflet-popup-content p {
  400. margin: 18px 0;
  401. }
  402. .leaflet-popup-tip-container {
  403. margin: 0 auto;
  404. width: 40px;
  405. height: 20px;
  406. position: relative;
  407. overflow: hidden;
  408. }
  409. .leaflet-popup-tip {
  410. width: 17px;
  411. height: 17px;
  412. padding: 1px;
  413.  
  414. margin: -10px auto 0;
  415.  
  416. -webkit-transform: rotate(45deg);
  417. -moz-transform: rotate(45deg);
  418. -ms-transform: rotate(45deg);
  419. -o-transform: rotate(45deg);
  420. transform: rotate(45deg);
  421. }
  422. .leaflet-popup-content-wrapper,
  423. .leaflet-popup-tip {
  424. background: white;
  425.  
  426. box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  427. }
  428. .leaflet-container a.leaflet-popup-close-button {
  429. position: absolute;
  430. top: 0;
  431. right: 0;
  432. padding: 4px 4px 0 0;
  433. text-align: center;
  434. width: 18px;
  435. height: 14px;
  436. font: 16px/14px Tahoma, Verdana, sans-serif;
  437. color: #c3c3c3;
  438. text-decoration: none;
  439. font-weight: bold;
  440. background: transparent;
  441. }
  442. .leaflet-container a.leaflet-popup-close-button:hover {
  443. color: #999;
  444. }
  445. .leaflet-popup-scrolled {
  446. overflow: auto;
  447. border-bottom: 1px solid #ddd;
  448. border-top: 1px solid #ddd;
  449. }
  450.  
  451. .leaflet-oldie .leaflet-popup-content-wrapper {
  452. zoom: 1;
  453. }
  454. .leaflet-oldie .leaflet-popup-tip {
  455. width: 24px;
  456. margin: 0 auto;
  457.  
  458. -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  459. filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
  460. }
  461. .leaflet-oldie .leaflet-popup-tip-container {
  462. margin-top: -1px;
  463. }
  464.  
  465. .leaflet-oldie .leaflet-control-zoom,
  466. .leaflet-oldie .leaflet-control-layers,
  467. .leaflet-oldie .leaflet-popup-content-wrapper,
  468. .leaflet-oldie .leaflet-popup-tip {
  469. border: 1px solid #999;
  470. }
  471.  
  472.  
  473. /* div icon */
  474.  
  475. .leaflet-div-icon {
  476. background: #fff;
  477. border: 1px solid #666;
  478. }