hsvpalette.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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-hsv-palette,
  17. .goog-hsv-palette-sm {
  18. position: relative;
  19. border: 1px solid #999;
  20. border-color: #ccc #999 #999 #ccc;
  21. width: 400px;
  22. height: 276px;
  23. }
  24. .goog-hsv-palette-sm {
  25. width: 182px;
  26. height: 185px;
  27. }
  28. .goog-hsv-palette label span,
  29. .goog-hsv-palette-sm label span {
  30. display: none;
  31. }
  32. .goog-hsv-palette-hs-backdrop,
  33. .goog-hsv-palette-sm-hs-backdrop,
  34. .goog-hsv-palette-hs-image,
  35. .goog-hsv-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-hsv-palette-sm-hs-backdrop,
  44. .goog-hsv-palette-sm-hs-image {
  45. top: 45px;
  46. width: 128px;
  47. height: 128px;
  48. }
  49. .goog-hsv-palette-hs-backdrop,
  50. .goog-hsv-palette-sm-hs-backdrop {
  51. background-color: #000;
  52. }
  53. .goog-hsv-palette-hs-image,
  54. .goog-hsv-palette-v-image,
  55. .goog-hsv-palette-hs-handle,
  56. .goog-hsv-palette-v-handle {
  57. background-image: url(//ssl.gstatic.com/closure/hsv-sprite.png);
  58. }
  59. .goog-hsv-palette-noalpha .goog-hsv-palette-hs-image,
  60. .goog-hsv-palette-noalpha .goog-hsv-palette-v-image,
  61. .goog-hsv-palette-noalpha .goog-hsv-palette-hs-handle,
  62. .goog-hsv-palette-noalpha .goog-hsv-palette-v-handle {
  63. background-image: url(//ssl.gstatic.com/closure/hsv-sprite.gif);
  64. }
  65. .goog-hsv-palette-sm-hs-image,
  66. .goog-hsv-palette-sm-v-image,
  67. .goog-hsv-palette-sm-hs-handle,
  68. .goog-hsv-palette-sm-v-handle {
  69. background-image: url(//ssl.gstatic.com/closure/hsv-sprite-sm.png);
  70. }
  71. .goog-hsv-palette-noalpha .goog-hsv-palette-sm-hs-image,
  72. .goog-hsv-palette-noalpha .goog-hsv-palette-sm-v-image,
  73. .goog-hsv-palette-noalpha .goog-hsv-palette-sm-hs-handle,
  74. .goog-hsv-palette-noalpha .goog-hsv-palette-sm-v-handle {
  75. background-image: url(//ssl.gstatic.com/closure/hsv-sprite-sm.gif);
  76. }
  77. .goog-hsv-palette-hs-image,
  78. .goog-hsv-palette-sm-hs-image {
  79. background-position: 0 0;
  80. }
  81. .goog-hsv-palette-hs-handle,
  82. .goog-hsv-palette-sm-hs-handle {
  83. position: absolute;
  84. left: 5px;
  85. top: 5px;
  86. width: 11px;
  87. height: 11px;
  88. overflow: hidden;
  89. background-position: 0 -256px;
  90. }
  91. .goog-hsv-palette-sm-hs-handle {
  92. top: 40px;
  93. background-position: 0 -128px;
  94. }
  95. .goog-hsv-palette-v-image,
  96. .goog-hsv-palette-sm-v-image {
  97. position: absolute;
  98. top: 10px;
  99. left: 286px;
  100. width: 19px;
  101. height: 256px;
  102. border: 1px solid #999;
  103. background-color: #fff;
  104. background-position: -256px 0;
  105. }
  106. .goog-hsv-palette-sm-v-image {
  107. top: 45px;
  108. left: 155px;
  109. width: 9px;
  110. height: 128px;
  111. background-position: -128px 0;
  112. }
  113. .goog-hsv-palette-v-handle,
  114. .goog-hsv-palette-sm-v-handle {
  115. position: absolute;
  116. top: 5px;
  117. left: 279px;
  118. width: 35px;
  119. height: 11px;
  120. background-position: -11px -256px;
  121. overflow: hidden;
  122. }
  123. .goog-hsv-palette-sm-v-handle {
  124. top: 40px;
  125. left: 148px;
  126. width: 25px;
  127. background-position: -11px -128px;
  128. }
  129. .goog-hsv-palette-swatch,
  130. .goog-hsv-palette-sm-swatch {
  131. position: absolute;
  132. top: 10px;
  133. right: 10px;
  134. width: 65px;
  135. height: 65px;
  136. border: 1px solid #999;
  137. background-color: #fff;
  138. }
  139. .goog-hsv-palette-sm-swatch {
  140. top: 10px;
  141. right: auto;
  142. left: 10px;
  143. width: 30px;
  144. height: 22px;
  145. }
  146. .goog-hsv-palette-input,
  147. .goog-hsv-palette-sm-input {
  148. position: absolute;
  149. top: 85px;
  150. right: 10px;
  151. width: 65px;
  152. }
  153. .goog-hsv-palette-sm-input {
  154. top: 10px;
  155. right: auto;
  156. left: 50px;
  157. }