css/date.css
[roojs1] / css / date.css
1 /*** DATE AND COLOR PICKER **/
2
3
4
5 /* ------------------- DATE --------------------- */
6 x-date
7 {
8         background: white;
9         padding:2px;
10         border: 1px solid gray;
11         z-index:12001;
12         -moz-outline:none;
13         position:absolute;
14         display:none;
15         top:0;
16         left:0;
17 }
18 .x-date-shadow {
19         background: #dddddd;
20         filter: progid:DXImageTransform.Microsoft.Blur(MakeShadow=true,pixelradius=1) Alpha(opacity=35,style=1,startX=0,finishX=200,FinishOpacity=35);
21         padding: 0;
22         position:absolute;
23         z-index:12000;
24         display:none; 
25         top:0; 
26         left:0;
27 }
28 .x-date-head{
29         width:150px;
30         background: #93b5e4;
31 }
32 .x-date-head td{
33         padding:1px;
34 }
35 .x-date-month{
36         color: white;
37         font: bold 7pt verdana;
38         text-decoration: none;
39         text-align:center;
40 }
41 .x-date-head .x-date-arrow{
42         width:16px;
43         text-align:center;
44         cursor:pointer;
45         -moz-user-select: none;
46 }
47
48
49 .x-date-picker {
50         background: #ccc;
51     width: 190px;
52         /* border-bottom: 1px solid #cccccc; */
53 }
54 .x-date-picker tr{
55         
56 }
57 .x-date-picker td{
58         /*
59     box-sizing: border-box;
60         -moz-box-sizing: border-box;
61         border: 1px solid white;
62         */
63         color:#aaaaaa;
64         cursor:pointer;
65         font:normal 8pt arial;
66         /*
67         padding:1px 2px; */
68         /* width:12px;
69         height:12px;
70     */
71     
72 }
73
74 td.x-date-middle
75 {
76     background: url(../images/default/basic-dialog/hd-sprite.gif); 
77 }
78 td.x-date-middle td
79 {
80     background: none; 
81     color: #000;
82     font-weight: bold;
83 }
84 td.x-date-right ,
85 td.x-date-left
86 {
87     background: url(../images/default/basic-dialog/hd-sprite.gif) repeat-x 0 0;  
88     text-align: center;
89     width: 18px;
90 }
91
92 td.x-date-right a {
93         /* width:16px; */
94         background: url(../images/default/grid/arrow-right-white.gif) no-repeat right center;
95         cursor:pointer;
96     text-decoration: none;
97       width:26px;
98     height:26px;
99     display: block;
100 }
101 td.x-date-left a {
102         /* width:16px; */
103         background: url(../images/default/grid/arrow-left-white.gif)  no-repeat 0 center;
104         cursor:pointer;
105     text-decoration: none;
106 }
107 .x-date-inner {
108     background-color: white; 
109     /* width: 100%; */
110     position: relative;
111     text-align: center;
112     display: block;
113     overflow:hidden;
114     border-collapse:separate;
115
116 }
117 table.x-date-inner {
118     table-layout:fixed;
119     width: 100%;
120 }
121
122
123 .x-date-inner td {
124     width:26px;
125     height:26px;
126     border-collapse:separate;
127 }
128 .x-date-mp a,
129 .x-date-inner a 
130 {
131     text-decoration: none;
132     font-weight: bold;
133     color: #000;
134 }
135
136 .x-date-picker td.x-date-today {
137         border: 1px solid darkred;
138 }
139 .x-date-picker .x-date-inner th{
140         text-align:center !important;
141         border:0;
142         border-bottom: 1px solid #cccccc;
143         font-size: 8pt;
144         font-weight: normal;
145         text-align:right;
146         color:black;
147         cursor:default;
148 }
149 .x-date-picker td.active{
150         cursor:pointer;
151         color:black;
152 }
153 .x-date-picker td.x-date-disabled{
154         cursor:default;
155         background:#eeeeee;
156         border: 1px solid #eeeeee;
157         color:#bbbbbb;
158 }
159
160 .x-date-mp td.x-date-mp-sel,
161
162 .x-date-picker td.x-date-selected{
163         background: #ddecfe;
164         border: 1px solid #c3daf9;
165 }
166 .x-date-today{
167         color: black;
168         cursor: hand;
169         /* display: inline-block; */
170         font: normal 8pt arial;
171         /* margin-left: 2px;  */
172         text-decoration: none;
173     
174         /* margin-top:2px; */
175 }
176
177  
178 .x-date-prevday,
179 .x-date-nextday {
180     background-color: #eee;
181 }
182 /* the month/year pulldown */
183 .x-date-mp {
184     background-color: #ccc;
185     
186     display: none;
187     position: absolute;
188     top: 0;
189     left 0;
190      
191 }
192 .x-date-mp table {
193    text-align: center;
194     background-color: #fff;
195     
196 }
197 .x-date-picker td.x-date-middle td.x-btn-center button {
198     color: white;
199 }
200 .x-date-bottom .ytb-spacer 
201 {
202     display:none;
203    }
204
205
206 /* ------------------- COLOR PICKER --------------------- */
207
208
209 .x-menu-plain .x-color-palette,
210 .x-menu-plain .x-date-picker
211 {
212     border: none;
213     margin : 0px;
214 }
215
216
217 .x-menu .x-color-palette,
218 .x-menu .x-date-picker
219 {
220     margin-left: 32px;
221     margin-right: 4px;
222     
223 }
224 .x-color-palette
225 {
226     pointer: pointer;
227     width: 150px;
228     height: 92px;
229 }
230
231 .x-color-palette a
232 {
233     border: 1px solid white;
234     pointer: pointer;
235     float: left;
236     padding: 2px;
237     text-decoration: none;
238     outline: white none 0;
239 }
240
241 .x-color-palette em span
242 {
243     pointer: pointer;
244     display: block;
245     width: 10px;
246     height: 10px;
247     line-height: 10px;
248
249 }
250 .x-color-palette em
251 {
252     
253     display: block;
254     border: 1pt solid black;
255 }
256