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