NavigationHelpButton.css 2.7 KB

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