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 }