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     
98 }
99 td.x-date-left a {
100         /* width:16px; */
101         background: url(../images/default/grid/arrow-left-white.gif)  no-repeat 0 center;
102         cursor:pointer;
103     text-decoration: none;
104 }
105 .x-date-inner {
106     background-color: white; 
107     /* width: 100%; */
108     position: relative;
109     text-align: center;
110     display: block;
111     overflow:hidden;
112     border-collapse:separate;
113
114 }
115 table.x-date-inner {
116     table-layout:fixed;
117     width: 100%;
118 }
119
120
121 .x-date-inner td  a{
122     width:26px;
123     height:26px;
124     border-collapse:separate;
125     display: block;
126 }
127 .x-date-mp a,
128 .x-date-inner a 
129 {
130     text-decoration: none;
131     font-weight: bold;
132     color: #000;
133 }
134
135 .x-date-picker td.x-date-today {
136         border: 1px solid darkred;
137 }
138 .x-date-picker .x-date-inner th{
139         text-align:center !important;
140         border:0;
141         border-bottom: 1px solid #cccccc;
142         font-size: 8pt;
143         font-weight: normal;
144         text-align:right;
145         color:black;
146         cursor:default;
147 }
148 .x-date-picker td.active{
149         cursor:pointer;
150         color:black;
151 }
152 .x-date-picker td.x-date-disabled{
153         cursor:default;
154         background:#eeeeee;
155         border: 1px solid #eeeeee;
156         color:#bbbbbb;
157 }
158
159 .x-date-mp td.x-date-mp-sel,
160
161 .x-date-picker td.x-date-selected{
162         background: #ddecfe;
163         border: 1px solid #c3daf9;
164 }
165 .x-date-today{
166         color: black;
167         cursor: hand;
168         /* display: inline-block; */
169         font: normal 8pt arial;
170         /* margin-left: 2px;  */
171         text-decoration: none;
172     
173         /* margin-top:2px; */
174 }
175
176  
177 .x-date-prevday,
178 .x-date-nextday {
179     background-color: #eee;
180 }
181 /* the month/year pulldown */
182 .x-date-mp {
183     background-color: #ccc;
184     
185     display: none;
186     position: absolute;
187     top: 0;
188     left 0;
189      
190 }
191 .x-date-mp table {
192    text-align: center;
193     background-color: #fff;
194     
195 }
196 .x-date-picker td.x-date-middle td.x-btn-center button {
197     color: white;
198 }
199 .x-date-bottom .ytb-spacer 
200 {
201     display:none;
202    }
203
204
205 /* ------------------- COLOR PICKER --------------------- */
206
207
208 .x-menu-plain .x-color-palette,
209 .x-menu-plain .x-date-picker
210 {
211     border: none;
212     margin : 0px;
213 }
214
215
216 .x-menu .x-color-palette,
217 .x-menu .x-date-picker
218 {
219     margin-left: 32px;
220     margin-right: 4px;
221     
222 }
223 .x-color-palette
224 {
225     pointer: pointer;
226     width: 150px;
227     height: 92px;
228 }
229
230 .x-color-palette a
231 {
232     border: 1px solid white;
233     pointer: pointer;
234     float: left;
235     padding: 2px;
236     text-decoration: none;
237     outline: white none 0;
238 }
239
240 .x-color-palette em span
241 {
242     pointer: pointer;
243     display: block;
244     width: 10px;
245     height: 10px;
246     line-height: 10px;
247
248 }
249 .x-color-palette em
250 {
251     
252     display: block;
253     border: 1pt solid black;
254 }
255