NavigationHelpButton.css 2.0 KB

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