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 }