gui.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. #guidat {
  2. position: fixed;
  3. top: 0;
  4. right: 0;
  5. width: auto;
  6. z-index: 1001;
  7. text-align: right;
  8. }
  9. .guidat {
  10. color: #fff;
  11. opacity: 0.97;
  12. text-align: left;
  13. float: right;
  14. margin-right: 20px;
  15. margin-bottom: 20px;
  16. background-color: #fff;
  17. }
  18. .guidat,
  19. .guidat input {
  20. font: 9.5px Lucida Grande, sans-serif;
  21. }
  22. .guidat-controllers {
  23. height: 300px;
  24. overflow-y: auto;
  25. overflow-x: hidden;
  26. background-color: rgba(0,0,0,0.1);
  27. /*
  28. -moz-transition: height .2s ease-out;
  29. -webkit-transition: height .2s ease-out;
  30. transition: height .2s ease-out;
  31. */
  32. }
  33. a.guidat-toggle {
  34. text-decoration: none;
  35. cursor: pointer;
  36. color: #fff;
  37. background-color: #222;
  38. text-align: center;
  39. display: block;
  40. padding: 5px;
  41. }
  42. a.guidat-toggle:hover {
  43. background-color: #000;
  44. }
  45. .guidat-controller {
  46. padding: 3px;
  47. height: 25px;
  48. clear: left;
  49. border-bottom: 1px solid #222;
  50. background-color: #111;
  51. }
  52. .guidat-controller,
  53. .guidat-controller input,
  54. .guidat-slider-bg,
  55. .guidat-slider-fg {
  56. -moz-transition: background-color 0.15s linear;
  57. -webkit-transition: background-color 0.15s linear;
  58. transition: background-color 0.15s linear;
  59. }
  60. .guidat-controller.boolean:hover,
  61. .guidat-controller.function:hover {
  62. background-color: #000;
  63. }
  64. .guidat-controller input {
  65. float: right;
  66. outline: none;
  67. border: 0;
  68. padding: 4px;
  69. margin-top: 2px;
  70. background-color: #222;
  71. }
  72. .guidat-controller select {
  73. margin-top: 4px;
  74. float: right;
  75. }
  76. .guidat-controller input:hover {
  77. background-color: #444;
  78. }
  79. .guidat-controller input:focus {
  80. background-color: #555;
  81. }
  82. .guidat-controller.number {
  83. border-left: 5px solid #00aeff ;
  84. }
  85. .guidat-controller.string {
  86. border-left: 5px solid #1ed36f;
  87. }
  88. .guidat-controller.string input {
  89. border: 0;
  90. color: #1ed36f;
  91. margin-right: 2px;
  92. width: 148px;
  93. }
  94. .guidat-controller.boolean {
  95. border-left: 5px solid #54396e;
  96. }
  97. .guidat-controller.function {
  98. border-left: 5px solid #e61d5f;
  99. }
  100. .guidat-controller.number input[type=text] {
  101. width: 35px;
  102. margin-left: 5px;
  103. margin-right: 2px;
  104. color: #00aeff;
  105. }
  106. .guidat .guidat-controller.boolean input {
  107. margin-top: 6px;
  108. margin-right: 2px;
  109. font-size: 20px;
  110. }
  111. .guidat-controller:last-child {
  112. border-bottom: none;
  113. -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
  114. -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
  115. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
  116. }
  117. .guidat-propertyname {
  118. padding: 5px;
  119. padding-top: 7px;
  120. cursor: default;
  121. display: inline-block;
  122. }
  123. .guidat-slider-bg:hover,
  124. .guidat-slider-bg.active {
  125. background-color: #444;
  126. }
  127. .guidat-slider-bg:hover .guidat-slider-fg,
  128. .guidat-slider-bg.active .guidat-slider-fg {
  129. background-color: #52c8ff;
  130. }
  131. .guidat-slider-bg {
  132. background-color: #222;
  133. cursor: ew-resize;
  134. width: 40%;
  135. margin-top: 2px;
  136. float: right;
  137. height: 21px;
  138. }
  139. .guidat-slider-fg {
  140. background-color: #00aeff;
  141. height: 20px;
  142. }