hsvapalette.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. /*
  2. * Copyright 2008 The Closure Library Authors. All Rights Reserved.
  3. *
  4. * Use of this source code is governed by the Apache License, Version 2.0.
  5. * See the COPYING file for details.
  6. */
  7. /*
  8. * All Rights Reserved.
  9. *
  10. * Styles for the HSV color palette.
  11. *
  12. * @author smcbride@google.com (Sean McBride)
  13. * @author arv@google.com (Erik Arvidsson)
  14. * @author manucornet@google.com (Manu Cornet)
  15. */
  16. .goog-hsva-palette,
  17. .goog-hsva-palette-sm {
  18. position: relative;
  19. border: 1px solid #999;
  20. border-color: #ccc #999 #999 #ccc;
  21. width: 442px;
  22. height: 276px;
  23. }
  24. .goog-hsva-palette-sm {
  25. width: 205px;
  26. height: 185px;
  27. }
  28. .goog-hsva-palette label span,
  29. .goog-hsva-palette-sm label span {
  30. display: none;
  31. }
  32. .goog-hsva-palette-hs-backdrop,
  33. .goog-hsva-palette-sm-hs-backdrop,
  34. .goog-hsva-palette-hs-image,
  35. .goog-hsva-palette-sm-hs-image {
  36. position: absolute;
  37. top: 10px;
  38. left: 10px;
  39. width: 256px;
  40. height: 256px;
  41. border: 1px solid #999;
  42. }
  43. .goog-hsva-palette-sm-hs-backdrop,
  44. .goog-hsva-palette-sm-hs-image {
  45. top: 45px;
  46. width: 128px;
  47. height: 128px;
  48. }
  49. .goog-hsva-palette-hs-backdrop,
  50. .goog-hsva-palette-sm-hs-backdrop {
  51. background-color: #000;
  52. }
  53. .goog-hsva-palette-hs-image,
  54. .goog-hsva-palette-v-image,
  55. .goog-hsva-palette-a-image,
  56. .goog-hsva-palette-hs-handle,
  57. .goog-hsva-palette-v-handle,
  58. .goog-hsva-palette-a-handle,
  59. .goog-hsva-palette-swatch-backdrop {
  60. background-image: url(//ssl.gstatic.com/closure/hsva-sprite.png);
  61. }
  62. .goog-hsva-palette-noalpha .goog-hsva-palette-hs-image,
  63. .goog-hsva-palette-noalpha .goog-hsva-palette-v-image,
  64. .goog-hsva-palette-noalpha .goog-hsva-palette-a-image,
  65. .goog-hsva-palette-noalpha .goog-hsva-palette-hs-handle,
  66. .goog-hsva-palette-noalpha .goog-hsva-palette-v-handle,
  67. .goog-hsva-palette-noalpha .goog-hsva-palette-a-handle,
  68. .goog-hsva-palette-noalpha .goog-hsva-palette-swatch-backdrop {
  69. background-image: url(//ssl.gstatic.com/closure/hsva-sprite.gif);
  70. }
  71. .goog-hsva-palette-sm-hs-image,
  72. .goog-hsva-palette-sm-v-image,
  73. .goog-hsva-palette-sm-a-image,
  74. .goog-hsva-palette-sm-hs-handle,
  75. .goog-hsva-palette-sm-v-handle,
  76. .goog-hsva-palette-sm-a-handle,
  77. .goog-hsva-palette-sm-swatch-backdrop {
  78. background-image: url(//ssl.gstatic.com/closure/hsva-sprite-sm.png);
  79. }
  80. .goog-hsva-palette-noalpha .goog-hsva-palette-sm-hs-image,
  81. .goog-hsva-palette-noalpha .goog-hsva-palette-sm-v-image,
  82. .goog-hsva-palette-noalpha .goog-hsva-palette-sm-a-image,
  83. .goog-hsva-palette-noalpha .goog-hsva-palette-sm-hs-handle,
  84. .goog-hsva-palette-noalpha .goog-hsva-palette-sm-v-handle,
  85. .goog-hsva-palette-noalpha .goog-hsva-palette-sm-a-handle,
  86. .goog-hsva-palette-noalpha .goog-hsva-palette-swatch-backdrop {
  87. background-image: url(//ssl.gstatic.com/closure/hsva-sprite-sm.gif);
  88. }
  89. .goog-hsva-palette-hs-image,
  90. .goog-hsva-palette-sm-hs-image {
  91. background-position: 0 0;
  92. }
  93. .goog-hsva-palette-hs-handle,
  94. .goog-hsva-palette-sm-hs-handle {
  95. position: absolute;
  96. left: 5px;
  97. top: 5px;
  98. width: 11px;
  99. height: 11px;
  100. overflow: hidden;
  101. background-position: 0 -256px;
  102. }
  103. .goog-hsva-palette-sm-hs-handle {
  104. top: 40px;
  105. background-position: 0 -128px;
  106. }
  107. .goog-hsva-palette-v-image,
  108. .goog-hsva-palette-a-image,
  109. .goog-hsva-palette-sm-v-image,
  110. .goog-hsva-palette-sm-a-image {
  111. position: absolute;
  112. top: 10px;
  113. left: 286px;
  114. width: 19px;
  115. height: 256px;
  116. border: 1px solid #999;
  117. background-color: #fff;
  118. background-position: -256px 0;
  119. }
  120. .goog-hsva-palette-a-image {
  121. left: 325px;
  122. background-position: -275px 0;
  123. }
  124. .goog-hsva-palette-sm-v-image,
  125. .goog-hsva-palette-sm-a-image {
  126. top: 45px;
  127. left: 155px;
  128. width: 9px;
  129. height: 128px;
  130. background-position: -128px 0;
  131. }
  132. .goog-hsva-palette-sm-a-image {
  133. left: 182px;
  134. background-position: -137px 0;
  135. }
  136. .goog-hsva-palette-v-handle,
  137. .goog-hsva-palette-a-handle,
  138. .goog-hsva-palette-sm-v-handle,
  139. .goog-hsva-palette-sm-a-handle {
  140. position: absolute;
  141. top: 5px;
  142. left: 279px;
  143. width: 35px;
  144. height: 11px;
  145. background-position: -11px -256px;
  146. overflow: hidden;
  147. }
  148. .goog-hsva-palette-a-handle {
  149. left: 318px;
  150. }
  151. .goog-hsva-palette-sm-v-handle,
  152. .goog-hsva-palette-sm-a-handle {
  153. top: 40px;
  154. left: 148px;
  155. width: 25px;
  156. background-position: -11px -128px;
  157. }
  158. .goog-hsva-palette-sm-a-handle {
  159. left: 175px;
  160. }
  161. .goog-hsva-palette-swatch,
  162. .goog-hsva-palette-swatch-backdrop,
  163. .goog-hsva-palette-sm-swatch,
  164. .goog-hsva-palette-sm-swatch-backdrop {
  165. position: absolute;
  166. top: 10px;
  167. right: 10px;
  168. width: 65px;
  169. height: 65px;
  170. border: 1px solid #999;
  171. background-color: #fff;
  172. background-position: -294px 0;
  173. }
  174. .goog-hsva-palette-sm-swatch,
  175. .goog-hsva-palette-sm-swatch-backdrop {
  176. top: 10px;
  177. right: auto;
  178. left: 10px;
  179. width: 30px;
  180. height: 22px;
  181. background-position: -36px -128px;
  182. }
  183. .goog-hsva-palette-swatch,
  184. .goog-hsva-palette-sm-swatch {
  185. z-index: 5;
  186. }
  187. .goog-hsva-palette-swatch-backdrop,
  188. .goog-hsva-palette-sm-swatch-backdrop {
  189. z-index: 1;
  190. }
  191. .goog-hsva-palette-input,
  192. .goog-hsva-palette-sm-input {
  193. position: absolute;
  194. top: 85px;
  195. right: 10px;
  196. width: 65px;
  197. font-size: 80%;
  198. }
  199. .goog-hsva-palette-sm-input {
  200. top: 10px;
  201. right: auto;
  202. left: 50px;
  203. }