4 /* @selector-size should be an odd number, in order to pixel-perfectly center on a given colour */
5 @colorpicker-selector-size: 72 * @unit_base;
6 @colorpicker-selector-border-width: 5 * @unit_base;
7 @colorpicker-clrchannel-hs-width: 256 * @unit_base;
8 @colorpicker-clrchannel-hs-height: 256 * @unit_base;
9 @colorpicker-clrchannel-l-width: 18 * @unit_base;
10 @colorpicker-clrchannel-l-height: 256 * @unit_base;
12 @colorpicker-selector-total-size: @colorpicker-selector-size + 2 * @colorpicker-selector-border-width;
13 @colorpicker-clrchannel-hs-padding: @colorpicker-selector-total-size / 2;
14 @colorpicker-clrchannel-l-hpadding:
16 parseInt("@{colorpicker-selector-total-size}") -
17 parseInt("@{colorpicker-clrchannel-l-width}")) / 2 + "px"`;
18 @colorpicker-clrchannel-l-selector-left:
20 parseInt("@{colorpicker-clrchannel-l-width}") -
21 parseInt("@{colorpicker-selector-total-size}")) / 2 + "px"`;
26 .colorpicker-hs-container {
31 width: @colorpicker-clrchannel-hs-width;
32 height: @colorpicker-clrchannel-hs-height;
33 padding: @colorpicker-clrchannel-hs-padding;
35 .colorpicker-hs-mask {
37 width: @colorpicker-clrchannel-hs-width;
38 height: @colorpicker-clrchannel-hs-height;
41 .colorpicker-hs-selector {
43 width: @colorpicker-selector-size;
44 height: @colorpicker-selector-size;
45 border: @colorpicker-selector-border-width solid black;
49 .colorpicker-l-container {
53 width: @colorpicker-clrchannel-l-width;
54 height: @colorpicker-clrchannel-l-height;
55 padding-left: @colorpicker-clrchannel-l-hpadding;
56 padding-right: @colorpicker-clrchannel-l-hpadding;
57 padding-top: @colorpicker-clrchannel-hs-padding;
58 padding-bottom: @colorpicker-clrchannel-hs-padding;
62 width: @colorpicker-clrchannel-l-width;
63 height: @colorpicker-clrchannel-l-height;
64 left: ( @colorpicker-selector-size + ( @colorpicker-selector-border-width * 2 ) - @colorpicker-clrchannel-l-width ) / 2;
67 .colorpicker-l-selector {
68 left: @colorpicker-clrchannel-l-selector-left;
70 width: @colorpicker-selector-size;
71 height: @colorpicker-selector-size;
72 border: @colorpicker-selector-border-width solid black;
77 .ui-colorpicker .colorpicker-hs-container .sat-gradient {
78 background: none; /* Old browsers */
79 background: -webkit-gradient(linear, left top, left bottom,
80 color-stop(0%,rgba(128,128,128,0)),
81 color-stop(100%,rgba(128,128,128,1))); /* Chrome,Safari4+ */
82 background: -moz-linear-gradient(top,
83 rgba(128,128,128,0) 0%,
84 rgba(128,128,128,1) 100%); /* FF3.6+ */
85 background: -webkit-linear-gradient(top,
86 rgba(128,128,128,0) 0%,
87 rgba(128,128,128,1) 100%); /* Chrome10+,Safari5.1+ */
88 background: -o-linear-gradient(top,
89 rgba(128,128,128,0) 0%,
90 rgba(128,128,128,1) 100%); /* Opera11.10+ */
91 background: -ms-linear-gradient(top,
92 rgba(128,128,128,0) 0%,
93 rgba(128,128,128,1) 100%); /* IE10+ */
94 background: linear-gradient(top,
95 rgba(128,128,128,0) 0%,
96 rgba(128,128,128,1) 100%); /* W3C */
97 /* filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#00808080', endColorstr="#808080", GradientType = 0); */
100 .ui-colorpicker .colorpicker-l-container .l-gradient {
101 background: none; /* Old browsers */
102 background: -webkit-gradient(linear, left top, left bottom,
103 color-stop(0%,rgba(0,0,0,1)),
104 color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
105 background: -moz-linear-gradient(top,
107 rgba(255,255,255,1) 100%); /* FF3.6+ */
108 background: -webkit-linear-gradient(top,
110 rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
111 background: -o-linear-gradient(top,
113 rgba(255,255,255,1) 100%); /* Opera11.10+ */
114 background: -ms-linear-gradient(top,
116 rgba(255,255,255,1) 100%); /* IE10+ */
117 background: linear-gradient(top,
119 rgba(255,255,255,1) 100%); /* W3C */
120 /* filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#000000', endColorstr="#ffffff", GradientType = 0); */