NavigationHelpButton.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. .cesium-navigationHelpButton-wrapper {
  2. position: relative;
  3. display: inline-block;
  4. }
  5. .cesium-navigation-help {
  6. visibility: hidden;
  7. position: absolute;
  8. top: 38px;
  9. right: 2px;
  10. width: 250px;
  11. border-radius: 10px;
  12. -webkit-transform: scale(0.01);
  13. -moz-transform: scale(0.01);
  14. -ms-transform: scale(0.01);
  15. -o-transform: scale(0.01);
  16. transform: scale(0.01);
  17. -webkit-transform-origin: 234px -10px;
  18. -moz-transform-origin: 234px -10px;
  19. -ms-transform-origin: 234px -10px;
  20. -o-transform-origin: 234px -10px;
  21. transform-origin: 234px -10px;
  22. -webkit-transition: visibility 0s 0.25s, -webkit-transform 0.25s ease-in;
  23. -moz-transition: visibility 0s 0.25s, -moz-transform 0.25s ease-in;
  24. -ms-transition: visibility 0s 0.25s, -ms-transform 0.25s ease-in;
  25. -o-transition: visibility 0s 0.25s, -o-transform 0.25s ease-in;
  26. transition: visibility 0s 0.25s, transform 0.25s ease-in;
  27. }
  28. .cesium-navigation-help-visible {
  29. visibility: visible;
  30. -webkit-transform: scale(1);
  31. -moz-transform: scale(1);
  32. -ms-transform: scale(1);
  33. -o-transform: scale(1);
  34. transform: scale(1);
  35. transition: transform 0.25s ease-out;
  36. -webkit-transition: -webkit-transform 0.25s ease-out;
  37. -moz-transition: -moz-transform 0.25s ease-out;
  38. -ms-transition: -ms-transform 0.25s ease-out;
  39. -o-transition: -o-transform 0.25s ease-out;
  40. }
  41. .cesium-navigation-help-instructions {
  42. border: 1px solid #444;
  43. background-color: rgba(38, 38, 38, 0.75);
  44. padding-bottom: 5px;
  45. border-radius: 0 0 10px 10px;
  46. }
  47. .cesium-click-navigation-help {
  48. display: none;
  49. }
  50. .cesium-touch-navigation-help {
  51. display: none;
  52. padding-top: 5px;
  53. }
  54. .cesium-click-navigation-help-visible {
  55. display: block;
  56. }
  57. .cesium-touch-navigation-help-visible {
  58. display: block;
  59. }
  60. .cesium-navigation-help-pan {
  61. color: #66ccff;
  62. font-weight: bold;
  63. }
  64. .cesium-navigation-help-zoom {
  65. color: #65fd00;
  66. font-weight: bold;
  67. }
  68. .cesium-navigation-help-rotate {
  69. color: #ffd800;
  70. font-weight: bold;
  71. }
  72. .cesium-navigation-help-tilt {
  73. color: #d800d8;
  74. font-weight: bold;
  75. }
  76. .cesium-navigation-help-details {
  77. color: #ffffff;
  78. }
  79. .cesium-navigation-button {
  80. color: #fff;
  81. background-color: transparent;
  82. border-bottom: none;
  83. border-top: 1px solid #444;
  84. border-right: 1px solid #444;
  85. margin: 0;
  86. width: 50%;
  87. cursor: pointer;
  88. }
  89. .cesium-navigation-button-icon {
  90. vertical-align: middle;
  91. padding: 5px 1px;
  92. }
  93. .cesium-navigation-button:focus {
  94. outline: none;
  95. }
  96. .cesium-navigation-button-left {
  97. border-radius: 10px 0 0 0;
  98. border-left: 1px solid #444;
  99. }
  100. .cesium-navigation-button-right {
  101. border-radius: 0 10px 0 0;
  102. border-left: none;
  103. }
  104. .cesium-navigation-button-selected {
  105. background-color: rgba(38, 38, 38, 0.75);
  106. }
  107. .cesium-navigation-button-unselected {
  108. background-color: rgba(0, 0, 0, 0.75);
  109. }
  110. .cesium-navigation-button-unselected:hover {
  111. background-color: rgba(76, 76, 76, 0.75);
  112. }