b0737d0e2a0c50dfcd9154f97db1d716fdcc8ce6
[WebKit-https.git] / Source / WebCore / Resources / calendarPicker.css
1 /*
2  * Copyright (C) 2012 Google Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions are
6  * met:
7  *
8  *     * Redistributions of source code must retain the above copyright
9  * notice, this list of conditions and the following disclaimer.
10  *     * Redistributions in binary form must reproduce the above
11  * copyright notice, this list of conditions and the following disclaimer
12  * in the documentation and/or other materials provided with the
13  * distribution.
14  *     * Neither the name of Google Inc. nor the names of its
15  * contributors may be used to endorse or promote products derived from
16  * this software without specific prior written permission.
17  *
18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29  */
30
31 body {
32     -webkit-user-select: none;
33     background-color: white;
34     font: -webkit-small-control;
35     margin: 0;
36     overflow: hidden;
37 }
38
39 .no-focus-ring :focus {
40     outline: none;
41 }
42
43 #main {
44     background-color: white;
45     border: solid 1px #8899aa;
46     box-shadow: inset 2px 2px 2px white,
47         inset -2px -2px 1px rgba(0,0,0,0.1);
48     padding: 6px;
49     whitespace: nowrap;
50     /* width and opacity are reset in the JS code. */
51     width: 500px;
52     opacity: 0;
53 }
54
55 .year-month-area {
56 }
57
58 .year-month-upper {
59     /* display:-webkit-box; is added in the JS code. */
60 }
61
62 .year-selector {
63     text-align: right;
64     width: 6em;
65 }
66
67 .month-selector-box {
68     display: inline-block;
69     text-align: center;
70     -webkit-box-flex: 2;
71 }
72
73 .month-selector {
74     background-color: white;
75     cursor: pointer;
76     display: inline-block;
77     padding: 3px 6px 3px 6px;
78 }
79 .month-selector:after {
80     content: " ▼";
81     font-size: smaller;
82 }
83
84 .month-selector-popup {
85     display: none;
86     outline: none;
87     z-index: 2;
88 }
89
90 .month-selector-wall {
91     display: none;
92     height: 100%;
93     left: 0px;
94     position: absolute;
95     top: 0px;
96     width: 100%;
97 }
98
99 /* FIXME: We'd like to use the standard button appearance for non-Mac. */
100 .year-month-button {
101     -webkit-appearance: none;
102     background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.4, #fff), color-stop(0.6, #dddddd), to(#eee));
103     border: solid 1px #444;
104     border-radius: 3px;
105     box-shadow: inset 1px 1px 1px rgba(255,255,255,0.4), inset -1px -1px 1px rgba(255,255,255,0.4);
106     padding-left: 3px;
107     padding-right: 3px;
108 }
109
110 .year-month-button:hover {
111     background: -webkit-gradient(linear, left top, left bottom, from(#e0f0ff), color-stop(0.4, #e0f0ff), color-stop(0.6, #b0e0ff), to(#b0e0ff));
112     border: solid 1px #448;
113 }
114
115 .year-month-button:active {
116     border: solid 1px black;
117     box-shadow: inset 1px 1px 1px rgba(0,0,0,0.3), inset -1px -1px 1px rgba(0,0,0,0.3);
118 }
119
120 .year-month-button:disabled {
121     color: #888;
122     background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.4, #fff), color-stop(0.6, #dddddd), to(#eee));
123     border: solid 1px #ccc;
124     box-shadow: inset 1px 1px 1px rgba(255,255,255,0.4), inset -1px -1px 1px rgba(255,255,255,0.4);
125 }
126
127 .year-month-button-left {
128     display: inline-block;
129 }
130
131 .year-month-button-right {
132     display: inline-block;
133 }
134
135 .days-area-container {
136     background-color: white;
137     border: solid 1px black;
138     margin-bottom: 4px;
139     margin-top: 4px;
140     overflow: hidden;
141 }
142
143 .days-area { /* <table> */
144     background-color: white;
145     border-collapse: separate;
146     border-spacing: 0px;
147     font: -webkit-small-control;
148     /* table-layout:fixed and width:100% are added in the JS code. */
149 }
150
151 .day-label { /* <th> */
152     -webkit-box-sizing: border-box;
153     background-color: #e3e9ff;
154     border-left-color: #f0f4ff;
155     border-top-color: #f0f4ff;
156     border: solid 1px #d0d4f0;
157     color: #20c;
158     font-weight: normal;
159     text-align: center;
160 }
161
162 .day { /* <td> */
163     padding: 1px;
164     text-align: center;
165     background-color: white;
166     border: 1px solid white;
167     -webkit-box-sizing: border-box;
168 }
169
170 .available {
171     cursor: default;
172     font-weight: 700;
173     background-color: white;
174     border: 1px solid white;
175     border-radius: 5px;
176     -webkit-transition: all 0.2s ease;
177 }
178
179 .not-this-month {
180     color: graytext;
181     font-weight: 400;
182     text-shadow: none;
183 }
184
185 .available.day-selected {
186     background-color: highlight;
187     color: highlighttext;
188     text-shadow: none;
189 }
190
191 .unavailable {
192     cursor: default;
193     color: graytext;
194     background-color: #eee;
195     border: 1px solid #eee;
196     -webkit-transition: border-color 0.2s ease;
197 }
198
199 .unavailable.day-selected {
200     border: 1px solid highlight;
201 }
202
203 .cancel-button {
204     float: right;
205 }