jPicker-1.1.6.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. .jPicker .Icon {
  2. display: inline-block;
  3. height: 16px; /* change this value if using a different sized color picker icon */
  4. position: relative; /* make this element an absolute positioning container */
  5. text-align: left; /* make the zero width children position to the left of container */
  6. width: 21px; /* change this value if using a different sized color picker icon */
  7. }
  8. .jPicker .Icon span.Color, .jPicker .Icon span.Alpha {
  9. background-position: 2px 2px;
  10. display: block;
  11. height: 100%;
  12. left: 0px;
  13. position: absolute;
  14. top: 0px;
  15. width: 100%;
  16. }
  17. .jPicker .Icon span.Image {
  18. background-repeat: no-repeat;
  19. cursor: pointer;
  20. display: block;
  21. height: 100%;
  22. left: 0px;
  23. position: absolute;
  24. top: 0px;
  25. width: 100%;
  26. }
  27. .jPicker.Container {
  28. color: #000;
  29. z-index: 10;
  30. }
  31. table.jPicker {
  32. background-color: #efefef;
  33. border: 1px outset #666;
  34. font-family: Arial, Helvetica, Sans-Serif;
  35. font-size: 12px !important;
  36. margin: 0px;
  37. padding: 5px;
  38. width: 545px;
  39. z-index: 20;
  40. }
  41. .jPicker .Move {
  42. background-color: #dddddd;
  43. border-color: #fff #666 #666 #fff;
  44. border-style: solid;
  45. border-width: 1px;
  46. cursor: move;
  47. height: 12px;
  48. padding: 0px;
  49. }
  50. .jPicker .Title {
  51. font-size: 11px !important;
  52. font-weight: bold;
  53. margin: -2px 0px 0px 0px;
  54. padding: 10px 0px 0px 0px;
  55. text-align: center;
  56. width: 100%;
  57. }
  58. .jPicker div.Map {
  59. border-bottom: 2px solid #fff;
  60. border-left: 2px solid #9a9a9a;
  61. border-right: 2px solid #fff;
  62. border-top: 2px solid #9a9a9a;
  63. cursor: crosshair;
  64. height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
  65. margin: 0px 10px 10px 10px;
  66. overflow: hidden; /* hide the overdraw of the Color Map icon when at edge of viewing box */
  67. padding: 0px;
  68. position: relative; /* make this element an absolute positioning container */
  69. width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
  70. }
  71. .jPicker div[class="Map"] {
  72. height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
  73. width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
  74. }
  75. .jPicker div.Bar {
  76. border-bottom: 2px solid #fff;
  77. border-left: 2px solid #9a9a9a;
  78. border-right: 2px solid #fff;
  79. border-top: 2px solid #9a9a9a;
  80. cursor: n-resize;
  81. height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
  82. margin: 12px 10px 0px 5px;
  83. overflow: hidden;
  84. padding: 0px;
  85. position: relative;
  86. width: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
  87. }
  88. .jPicker div[class="Bar"] {
  89. height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
  90. width: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
  91. }
  92. .jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3, .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4, .jPicker .Bar .Map5, .jPicker .Bar .Map6 {
  93. background-color: transparent;
  94. background-image: none;
  95. display: block;
  96. left: 0px;
  97. position: absolute;
  98. top: 0px;
  99. }
  100. .jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3 {
  101. height: 2596px;
  102. width: 256px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
  103. would not be drawn if its overflow is set to hidden. */
  104. }
  105. .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
  106. height: 3896px;
  107. width: 20px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
  108. would not be drawn if its overflow is set to hidden. */
  109. }
  110. .jPicker .Bar .Map5, .jPicker .Bar .Map6 {
  111. height: 256px;
  112. width: 20px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
  113. would not be drawn if its overflow is set to hidden. */
  114. }
  115. .jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Bar .Map6 {
  116. background-repeat: no-repeat;
  117. }
  118. .jPicker .Map .Map3, .jPicker .Bar .Map5 {
  119. background-repeat: repeat;
  120. }
  121. .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
  122. background-repeat: repeat-x;
  123. }
  124. .jPicker .Map .Arrow {
  125. display: block;
  126. position: absolute;
  127. }
  128. .jPicker .Bar .Arrow {
  129. display: block;
  130. left: 0px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
  131. position: absolute;
  132. }
  133. .jPicker .Preview {
  134. font-size: 9px;
  135. padding: 5px 0px 0px 0px;
  136. text-align: center;
  137. }
  138. .jPicker .Preview div {
  139. border: 2px inset #eee;
  140. height: 62px;
  141. margin: 0px auto;
  142. padding: 0px;
  143. width: 62px;
  144. }
  145. .jPicker .Preview div span {
  146. border: 1px solid #000;
  147. display: block;
  148. height: 30px;
  149. margin: 0px auto;
  150. padding: 0px;
  151. width: 60px;
  152. }
  153. .jPicker .Preview .Active {
  154. border-bottom-width: 0px;
  155. }
  156. .jPicker .Preview .Current {
  157. border-top-width: 0px;
  158. cursor: pointer;
  159. }
  160. .jPicker input {
  161. font-size: 13px;
  162. }
  163. .jPicker .Button {
  164. text-align: center;
  165. padding: 0px 4px;
  166. width: 115px;
  167. }
  168. .jPicker .Button input {
  169. padding: 2px 0px;
  170. width: 100px;
  171. }
  172. .jPicker .Button .Ok {
  173. margin: 12px 0px 5px 0px;
  174. }
  175. .jPicker td {
  176. margin: 0px;
  177. padding: 0px;
  178. }
  179. .jPicker td.Radio {
  180. margin: 0px;
  181. padding: 0px;
  182. width: 31px;
  183. }
  184. .jPicker td.Radio input {
  185. margin: 0px 5px 0px 0px;
  186. padding: 0px;
  187. }
  188. .jPicker td.Text {
  189. font-size: 12px !important;
  190. height: 22px;
  191. margin: 0px;
  192. padding: 0px;
  193. text-align: left;
  194. width: 70px;
  195. }
  196. .jPicker tr.Hex td.Text {
  197. width: 100px;
  198. }
  199. .jPicker td.Text input {
  200. background-color: #fff;
  201. border: 1px inset #aaa;
  202. height: 19px;
  203. margin: 0px 0px 0px 5px;
  204. text-align: left;
  205. width: 30px;
  206. }
  207. .jPicker td[class="Text"] input {
  208. height: 15px;
  209. }
  210. .jPicker tr.Hex td.Text input.Hex {
  211. width: 50px;
  212. }
  213. .jPicker tr.Hex td.Text input.AHex {
  214. width: 20px;
  215. }
  216. .jPicker .Grid {
  217. text-align: center;
  218. width: 114px;
  219. }
  220. .jPicker .Grid span.QuickColor {
  221. border: 1px inset #aaa;
  222. cursor: pointer;
  223. display: inline-block;
  224. height: 15px;
  225. line-height: 15px;
  226. margin: 0px;
  227. padding: 0px;
  228. width: 19px;
  229. }
  230. .jPicker .Grid span[class="QuickColor"] {
  231. width: 17px;
  232. }