InfoBox.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. .cesium-infoBox {
  2. display: block;
  3. position: absolute;
  4. top: 50px;
  5. right: 0;
  6. width: 40%;
  7. max-width: 480px;
  8. background: rgba(38, 38, 38, 0.95);
  9. color: #edffff;
  10. border: 1px solid #444;
  11. border-right: none;
  12. border-top-left-radius: 7px;
  13. border-bottom-left-radius: 7px;
  14. box-shadow: 0 0 10px 1px #000;
  15. -webkit-transform: translate(-100%, 0);
  16. -moz-transform: translate(-100%, 0);
  17. transform: translate(-100%, 0);
  18. visibility: hidden;
  19. opacity: 0;
  20. -webkit-transition: visibility 0s 0.2s, opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
  21. -moz-transition: visibility 0s 0.2s, opacity 0.2s ease-out, -moz-transform 0.2s ease-out;
  22. transition: visibility 0s 0.2s, opacity 0.2s ease-out, transform 0.2s ease-out;
  23. }
  24. .cesium-infoBox-visible {
  25. -webkit-transform: translate(0, 0);
  26. -moz-transform: translate(0, 0);
  27. transform: translate(0, 0);
  28. visibility: visible;
  29. opacity: 1;
  30. -webkit-transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in;
  31. -moz-transition: opacity 0.2s ease-in, -moz-transform 0.2s ease-in;
  32. transition: opacity 0.2s ease-in, transform 0.2s ease-in;
  33. }
  34. .cesium-infoBox-title {
  35. display: block;
  36. height: 20px;
  37. padding: 5px 30px 5px 25px;
  38. background: rgba(84, 84, 84, 1.0);
  39. border-top-left-radius: 7px;
  40. text-align: center;
  41. text-overflow: ellipsis;
  42. white-space: nowrap;
  43. overflow: hidden;
  44. -moz-box-sizing: content-box;
  45. -webkit-box-sizing: content-box;
  46. box-sizing: content-box;
  47. }
  48. .cesium-infoBox-bodyless .cesium-infoBox-title {
  49. border-bottom-left-radius: 7px;
  50. }
  51. button.cesium-infoBox-camera {
  52. display: block;
  53. position: absolute;
  54. top: 4px;
  55. left: 4px;
  56. width: 22px;
  57. height: 22px;
  58. background: transparent;
  59. border-color: transparent;
  60. border-radius: 3px;
  61. padding: 0 5px;
  62. margin: 0;
  63. }
  64. button.cesium-infoBox-close {
  65. display: block;
  66. position: absolute;
  67. top: 5px;
  68. right: 5px;
  69. height: 20px;
  70. background: transparent;
  71. border: none;
  72. border-radius: 2px;
  73. font-weight: bold;
  74. font-size: 16px;
  75. padding: 0 5px;
  76. margin: 0;
  77. color: #edffff;
  78. }
  79. button.cesium-infoBox-close:focus {
  80. background: rgba(238, 136, 0, 0.44);
  81. outline: none;
  82. }
  83. button.cesium-infoBox-close:hover {
  84. background: #888;
  85. color: #000;
  86. }
  87. button.cesium-infoBox-close:active {
  88. background: #a00;
  89. color: #000;
  90. }
  91. .cesium-infoBox-bodyless .cesium-infoBox-iframe {
  92. display: none;
  93. }
  94. .cesium-infoBox-iframe {
  95. border: none;
  96. width: 100%; /* Fallback */
  97. width: calc(100% - 2px);
  98. }