Calendar Picker: Add capability to add platform-specific style sheet
[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 .year-month-button-left {
100     display: inline-block;
101 }
102
103 .year-month-button-right {
104     display: inline-block;
105 }
106
107 .days-area-container {
108     background-color: white;
109     border: solid 1px black;
110     margin-bottom: 4px;
111     margin-top: 4px;
112     overflow: hidden;
113 }
114
115 .days-area { /* <table> */
116     background-color: white;
117     border-collapse: separate;
118     border-spacing: 0px;
119     font: -webkit-small-control;
120     /* table-layout:fixed and width:100% are added in the JS code. */
121 }
122
123 .day-label { /* <th> */
124     -webkit-box-sizing: border-box;
125     background-color: #e3e9ff;
126     border-left-color: #f0f4ff;
127     border-top-color: #f0f4ff;
128     border: solid 1px #d0d4f0;
129     color: #20c;
130     font-weight: normal;
131     text-align: center;
132 }
133
134 .day { /* <td> */
135     padding: 1px;
136     text-align: center;
137     background-color: white;
138     border: 1px solid white;
139     -webkit-box-sizing: border-box;
140 }
141
142 .available {
143     cursor: default;
144     font-weight: 700;
145     background-color: white;
146     border: 1px solid white;
147     border-radius: 5px;
148     -webkit-transition: all 0.2s ease;
149 }
150
151 .not-this-month {
152     color: graytext;
153     font-weight: 400;
154     text-shadow: none;
155 }
156
157 .available.day-selected {
158     background-color: highlight;
159     color: highlighttext;
160     text-shadow: none;
161 }
162
163 .unavailable {
164     cursor: default;
165     color: graytext;
166     background-color: #eee;
167     border: 1px solid #eee;
168     -webkit-transition: border-color 0.2s ease;
169 }
170
171 .unavailable.day-selected {
172     border: 1px solid highlight;
173 }
174
175 .cancel-button {
176     float: right;
177 }