InfoBox.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. .cesium-infoBox {
  2. display: block;
  3. position: absolute;
  4. top: 50px;
  5. right: 0;
  6. width: 40%;
  7. max-width: 360px;
  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-in, -webkit-transform 0.2s ease-in;
  21. -moz-transition: visibility 0s 0.2s, opacity 0.2s ease-in, -moz-transform 0.2s ease-in;
  22. transition: visibility 0s 0.2s, opacity 0.2s ease-in, transform 0.2s ease-in;
  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-out, -webkit-transform 0.2s ease-out;
  31. -moz-transition: opacity 0.2s ease-out, -moz-transform 0.2s ease-out;
  32. transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  33. }
  34. .cesium-infoBox-title {
  35. display: block;
  36. height: 20px;
  37. padding: 5px 30px 5px 25px;
  38. background: rgba(84, 84, 84, 0.8);
  39. border-top-left-radius: 7px;
  40. text-align: center;
  41. text-overflow: ellipsis;
  42. white-space: nowrap;
  43. overflow: hidden;
  44. }
  45. .cesium-infoBox-bodyless .cesium-infoBox-title {
  46. border-bottom-left-radius: 7px;
  47. }
  48. button.cesium-infoBox-camera {
  49. display: block;
  50. position: absolute;
  51. top: 4px;
  52. left: 4px;
  53. width: 22px;
  54. height: 22px;
  55. background: transparent;
  56. border-color: transparent;
  57. border-radius: 3px;
  58. padding: 0 5px;
  59. margin: 0;
  60. }
  61. button.cesium-infoBox-close {
  62. display: block;
  63. position: absolute;
  64. top: 5px;
  65. right: 5px;
  66. height: 20px;
  67. background: transparent;
  68. border: none;
  69. border-radius: 2px;
  70. font-weight: bold;
  71. font-size:16px;
  72. padding: 0 5px;
  73. margin: 0;
  74. color: #edffff;
  75. }
  76. button.cesium-infoBox-close:focus {
  77. background: rgba(238, 136, 0, 0.44);
  78. outline: none;
  79. }
  80. button.cesium-infoBox-close:hover {
  81. background: #888;
  82. color: #000;
  83. }
  84. button.cesium-infoBox-close:active {
  85. background: #a00;
  86. color: #000;
  87. }
  88. .cesium-infoBox-body {
  89. padding: 4px 10px;
  90. margin-right: 4px;
  91. overflow: auto;
  92. }
  93. .cesium-infoBox-bodyless .cesium-infoBox-body {
  94. display: none;
  95. }
  96. .cesium-infoBox-loadingContainer {
  97. margin: 5px;
  98. text-align: center;
  99. }
  100. .cesium-infoBox-loading {
  101. display: inline-block;
  102. background-image: url(../Images/info-loading.gif);
  103. width: 16px;
  104. height: 11px;
  105. }
  106. .cesium-infoBox-description {
  107. font-size: 13px;
  108. }
  109. .cesium-infoBox-defaultTable {
  110. width: 100%;
  111. }
  112. .cesium-infoBox-defaultTable tr:nth-child(odd) {
  113. background-color: rgba(84, 84, 84, 0.8);
  114. }
  115. .cesium-infoBox-defaultTable tr:nth-child(even) {
  116. background-color: rgba(84, 84, 84, 0.25);
  117. }
  118. .cesium-infoBox-defaultTable th {
  119. font-weight: normal;
  120. padding: 3px;
  121. vertical-align: middle;
  122. text-align: center;
  123. }
  124. .cesium-infoBox-defaultTable td {
  125. padding: 3px;
  126. vertical-align: middle;
  127. text-align: left;
  128. }