cesium-navigation.css 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486
  1. /*html {
  2. height: 100%;
  3. -webkit-font-smoothing: antialiased;
  4. }
  5. body {
  6. height: 100%;
  7. width: 100%;
  8. margin: 0;
  9. overflow: hidden;
  10. padding: 0;
  11. background: #000;
  12. font-size: 15px;
  13. font-family: @default-font;
  14. }*/
  15. .full-window {
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. right: 0;
  20. bottom: 0;
  21. margin: 0;
  22. overflow: hidden;
  23. padding: 0;
  24. -webkit-transition: left 0.25s ease-out;
  25. -moz-transition: left 0.25s ease-out;
  26. -ms-transition: left 0.25s ease-out;
  27. -o-transition: left 0.25s ease-out;
  28. transition: left 0.25s ease-out;
  29. }
  30. .transparent-to-input {
  31. pointer-events: none;
  32. }
  33. .opaque-to-input {
  34. pointer-events: auto;
  35. }
  36. .clickable {
  37. cursor: pointer;
  38. }
  39. /*a {
  40. text-decoration: none;
  41. color: @highlight-color;
  42. }*/
  43. a:hover {
  44. text-decoration: underline;
  45. }
  46. /*
  47. @modal-background-color: @panel-background-color;
  48. @modal-text-color: @panel-emphasized-text-color;
  49. @modal-header-background-color: rgba(0,0,0,0.2);
  50. @modal-header-text-color: @panel-emphasized-text-color;*/
  51. /*.modal-background {
  52. .opaque-to-input;
  53. position: fixed;
  54. left: 0;
  55. right: 0;
  56. top: 0;
  57. bottom: 0;
  58. background-color: rgba(0,0,0,0.5);
  59. z-index: 1000; required for IE9
  60. }*/
  61. /*
  62. .modal {
  63. position: absolute;
  64. margin: auto;
  65. background-color: @modal-background-color;
  66. top: 0;
  67. left: 0;
  68. bottom: 0;
  69. right: 0;
  70. max-height: 100%;
  71. max-width: 100%;
  72. font-family: @default-font;
  73. color: @modal-text-color;
  74. }
  75. .modal-header {
  76. background-color: @modal-header-background-color;
  77. border-bottom: @panel-element-border;
  78. font-size: 15px;
  79. line-height: 40px;
  80. margin: 0;
  81. }
  82. .modal-header h1 {
  83. font-size: 15px;
  84. color: @modal-header-text-color;
  85. margin-left: 15px;
  86. }*/
  87. /* Commented out due to conflicts with client apps.
  88. .modal-content {
  89. margin-left: 15px;
  90. margin-right: 15px;
  91. margin-bottom: 15px;
  92. padding-top: 15px;
  93. overflow: auto;
  94. }*/
  95. /*.modal-close-button {
  96. position: absolute;
  97. right: 15px;
  98. cursor: pointer;
  99. font-size: 18px;
  100. color: @modal-header-text-color;
  101. }*/
  102. #ui {
  103. z-index: 2100;
  104. }
  105. @media print {
  106. .full-window {
  107. position: initial;
  108. }
  109. }
  110. /* input[type=text] {
  111. height: 38px;
  112. background-color: #eeeeee;
  113. color: @input-text-color;
  114. font-size: 14px;
  115. }
  116. ::-webkit-input-placeholder {
  117. color: fade(@input-text-color, 75%);
  118. font-style: italic;
  119. }
  120. :-moz-placeholder { /* Firefox 18-
  121. color: fade(@input-text-color, 75%);
  122. font-style: italic;
  123. }
  124. ::-moz-placeholder { /* Firefox 19+
  125. color: fade(@input-text-color, 75%);
  126. font-style: italic;
  127. }
  128. :-ms-input-placeholder {
  129. color: fade(@input-text-color, 75%);
  130. font-style: italic;
  131. }
  132. input:focus {
  133. outline-color: #FFFFFF;
  134. }
  135. */
  136. /*select {
  137. display: block;
  138. background-color: @panel-form-input-background-color;
  139. color: @panel-form-input-text-color;
  140. height: 40px;
  141. border: 0;
  142. margin-top: 10px;
  143. font-size: 14px;
  144. padding-left: 5px;
  145. }*/
  146. .markdown img {
  147. max-width: 100%;
  148. }
  149. .markdown svg {
  150. max-height: 100%;
  151. }
  152. .markdown input,
  153. .markdown select,
  154. .markdown textarea,
  155. .markdown fieldset {
  156. font-family: inherit;
  157. font-size: 1rem;
  158. box-sizing: border-box;
  159. margin-top: 0;
  160. margin-bottom: 0;
  161. }
  162. .markdown label {
  163. vertical-align: middle;
  164. }
  165. .markdown h1,
  166. .markdown h2,
  167. .markdown h3,
  168. .markdown h4,
  169. .markdown h5,
  170. .markdown h6 {
  171. font-family: inherit;
  172. font-weight: bold;
  173. line-height: 1.25;
  174. margin-top: 1em;
  175. margin-bottom: .5em;
  176. }
  177. .markdown h1 {
  178. font-size: 2rem;
  179. }
  180. .markdown h2 {
  181. font-size: 1.5rem;
  182. }
  183. .markdown h3 {
  184. font-size: 1.25rem;
  185. }
  186. .markdown h4 {
  187. font-size: 1rem;
  188. }
  189. .markdown h5 {
  190. font-size: 0.875rem;
  191. }
  192. .markdown h6 {
  193. font-size: 0.75rem;
  194. }
  195. .markdown p {
  196. margin-top: 0;
  197. margin-bottom: 1rem;
  198. }
  199. .markdown strong {
  200. font-weight: bold;
  201. }
  202. .markdown em {
  203. font-style: italic;
  204. }
  205. .markdown small {
  206. font-size: 80%;
  207. }
  208. .markdown mark {
  209. color: #000;
  210. background: #ff0;
  211. }
  212. .markdown u {
  213. text-decoration: underline;
  214. }
  215. .markdown s {
  216. text-decoration: line-through;
  217. }
  218. .markdown dl,
  219. .markdown ol,
  220. .markdown ul {
  221. margin-top: 0;
  222. margin-bottom: 1rem;
  223. }
  224. .markdown ol {
  225. list-style: decimal inside;
  226. }
  227. .markdown ul {
  228. list-style: disc inside;
  229. }
  230. .markdown pre,
  231. .markdown code,
  232. .markdown samp {
  233. font-family: monospace;
  234. font-size: inherit;
  235. }
  236. .markdown pre {
  237. margin-top: 0;
  238. margin-bottom: 1rem;
  239. overflow-x: scroll;
  240. }
  241. .markdown a {
  242. color: #68ADFE;
  243. text-decoration: none;
  244. }
  245. .markdown a:hover {
  246. text-decoration: underline;
  247. }
  248. .markdown pre,
  249. .markdown code {
  250. background-color: transparent;
  251. border-radius: 3px;
  252. }
  253. .markdown hr {
  254. border: 0;
  255. border-bottom-style: solid;
  256. border-bottom-width: 1px;
  257. border-bottom-color: rgba(0, 0, 0, 0.125);
  258. }
  259. .markdown .left-align {
  260. text-align: left;
  261. }
  262. .markdown .center {
  263. text-align: center;
  264. }
  265. .markdown .right-align {
  266. text-align: right;
  267. }
  268. .markdown .justify {
  269. text-align: justify;
  270. }
  271. .markdown .truncate {
  272. max-width: 100%;
  273. overflow: hidden;
  274. text-overflow: ellipsis;
  275. white-space: nowrap;
  276. }
  277. .markdown ol.upper-roman {
  278. list-style-type: upper-roman;
  279. }
  280. .markdown ol.lower-alpha {
  281. list-style-type: lower-alpha;
  282. }
  283. .markdown ul.circle {
  284. list-style-type: circle;
  285. }
  286. .markdown ul.square {
  287. list-style-type: square;
  288. }
  289. .markdown .list-reset {
  290. list-style: none;
  291. padding-left: 0;
  292. }
  293. .floating {
  294. pointer-events: auto;
  295. position: absolute;
  296. border-radius: 15px;
  297. }
  298. .floating-horizontal {
  299. pointer-events: auto;
  300. position: absolute;
  301. border-radius: 15px;
  302. padding-left: 5px;
  303. padding-right: 5px;
  304. }
  305. .floating-vertical {
  306. pointer-events: auto;
  307. position: absolute;
  308. border-radius: 15px;
  309. padding-top: 5px;
  310. padding-bottom: 5px;
  311. }
  312. @media print {
  313. .floating {
  314. display: none;
  315. }
  316. }
  317. .distance-legend {
  318. pointer-events: auto;
  319. position: absolute;
  320. border-radius: 15px;
  321. padding-left: 5px;
  322. padding-right: 5px;
  323. bottom: 30px;
  324. height: 30px;
  325. width: 125px;
  326. box-sizing: content-box;
  327. }
  328. .distance-legend-label {
  329. display: inline-block;
  330. font-family: 'Roboto', sans-serif;
  331. font-size: 14px;
  332. font-weight: lighter;
  333. line-height: 30px;
  334. color: #FFFFFF;
  335. width: 125px;
  336. text-align: center;
  337. }
  338. .distance-legend-scale-bar {
  339. border-left: 1px solid #FFFFFF;
  340. border-right: 1px solid #FFFFFF;
  341. border-bottom: 1px solid #FFFFFF;
  342. position: absolute;
  343. height: 10px;
  344. top: 15px;
  345. }
  346. @media print {
  347. .distance-legend {
  348. display: none;
  349. }
  350. }
  351. @media screen and (max-width: 700px), screen and (max-height: 420px) {
  352. .distance-legend {
  353. display: none;
  354. }
  355. }
  356. .navigation-controls {
  357. position: absolute;
  358. right: 30px;
  359. top: 210px;
  360. width: 30px;
  361. border: 1px solid rgba(255, 255, 255, 0.1);
  362. font-weight: 300;
  363. -webkit-touch-callout: none;
  364. -webkit-user-select: none;
  365. -khtml-user-select: none;
  366. -moz-user-select: none;
  367. -ms-user-select: none;
  368. user-select: none;
  369. }
  370. .navigation-control {
  371. cursor: pointer;
  372. border-bottom: 1px solid #555555;
  373. }
  374. .naviagation-control:active {
  375. color: #FFF;
  376. }
  377. .navigation-control-last {
  378. cursor: pointer;
  379. border-bottom: 1px solid #555555;
  380. border-bottom: 0;
  381. }
  382. .navigation-control-icon-zoom-in {
  383. position: relative;
  384. text-align: center;
  385. font-size: 20px;
  386. color: #FFFFFF;
  387. padding-bottom: 4px;
  388. }
  389. .navigation-control-icon-zoom-out {
  390. position: relative;
  391. text-align: center;
  392. font-size: 20px;
  393. color: #FFFFFF;
  394. }
  395. .navigation-control-icon-reset {
  396. position: relative;
  397. left: 10px;
  398. width: 10px;
  399. height: 10px;
  400. fill: rgba(255, 255, 255, 0.8);
  401. padding-top: 6px;
  402. padding-bottom: 6px;
  403. box-sizing: content-box;
  404. }
  405. .compass {
  406. pointer-events: auto;
  407. position: absolute;
  408. right: 0px;
  409. top: 100px;
  410. width: 95px;
  411. height: 95px;
  412. overflow: hidden;
  413. }
  414. .compass-outer-ring {
  415. position: absolute;
  416. top: 0;
  417. width: 95px;
  418. height: 95px;
  419. fill: rgba(255, 255, 255, 0.5);
  420. }
  421. .compass-outer-ring-background {
  422. position: absolute;
  423. top: 14px;
  424. left: 14px;
  425. width: 44px;
  426. height: 44px;
  427. border-radius: 44px;
  428. border: 12px solid rgba(47, 53, 60, 0.8);
  429. box-sizing: content-box;
  430. }
  431. .compass-gyro {
  432. pointer-events: none;
  433. position: absolute;
  434. top: 0;
  435. width: 95px;
  436. height: 95px;
  437. fill: #CCC;
  438. }
  439. .compass-gyro-active {
  440. fill: #68ADFE;
  441. }
  442. .compass-gyro-background {
  443. position: absolute;
  444. top: 30px;
  445. left: 30px;
  446. width: 33px;
  447. height: 33px;
  448. border-radius: 33px;
  449. background-color: rgba(47, 53, 60, 0.8);
  450. border: 1px solid rgba(255, 255, 255, 0.2);
  451. box-sizing: content-box;
  452. }
  453. .compass-gyro-background:hover + .compass-gyro {
  454. fill: #68ADFE;
  455. }
  456. .compass-rotation-marker {
  457. position: absolute;
  458. top: 0;
  459. width: 95px;
  460. height: 95px;
  461. fill: #68ADFE;
  462. }
  463. @media screen and (max-width: 700px), screen and (max-height: 420px) {
  464. .navigation-controls {
  465. display: none;
  466. }
  467. .compass {
  468. display: none;
  469. }
  470. }
  471. @media print {
  472. .navigation-controls {
  473. display: none;
  474. }
  475. .compass {
  476. display: none;
  477. }
  478. }