Mercurial > dive4elements > gnv-client
comparison gnv/src/main/webapp/styles/calendar-blue.css @ 14:9719cbd1a23f
Import of MainLayout, Styles, images and Scripts from old System Revision: 3101 Does not compile
gnv/trunk@97 c6561f87-3c4e-4783-a992-168aeb5c3f6f
| author | Tim Englich <tim.englich@intevation.de> |
|---|---|
| date | Wed, 16 Sep 2009 13:03:38 +0000 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| 13:2535158e2687 | 14:9719cbd1a23f |
|---|---|
| 1 /* The main calendar widget. DIV containing a table. */ | |
| 2 | |
| 3 div.calendar { position: relative; } | |
| 4 | |
| 5 .calendar, .calendar table { | |
| 6 border: 1px solid #556; | |
| 7 font-size: 11px; | |
| 8 color: #000; | |
| 9 cursor: default; | |
| 10 background: #eef; | |
| 11 font-family: tahoma,verdana,sans-serif; | |
| 12 } | |
| 13 | |
| 14 /* Header part -- contains navigation buttons and day names. */ | |
| 15 | |
| 16 .calendar .button { /* "<<", "<", ">", ">>" buttons have this class */ | |
| 17 text-align: center; /* They are the navigation buttons */ | |
| 18 padding: 2px; /* Make the buttons seem like they're pressing */ | |
| 19 } | |
| 20 | |
| 21 .calendar .nav { | |
| 22 background: #778 url(menuarrow.gif) no-repeat 100% 100%; | |
| 23 } | |
| 24 | |
| 25 .calendar thead .title { /* This holds the current "month, year" */ | |
| 26 font-weight: bold; /* Pressing it will take you to the current date */ | |
| 27 text-align: center; | |
| 28 background: #fff; | |
| 29 color: #000; | |
| 30 padding: 2px; | |
| 31 } | |
| 32 | |
| 33 .calendar thead .headrow { /* Row <TR> containing navigation buttons */ | |
| 34 background: #778; | |
| 35 color: #fff; | |
| 36 } | |
| 37 | |
| 38 .calendar thead .daynames { /* Row <TR> containing the day names */ | |
| 39 background: #bdf; | |
| 40 } | |
| 41 | |
| 42 .calendar thead .name { /* Cells <TD> containing the day names */ | |
| 43 border-bottom: 1px solid #556; | |
| 44 padding: 2px; | |
| 45 text-align: center; | |
| 46 color: #000; | |
| 47 } | |
| 48 | |
| 49 .calendar thead .weekend { /* How a weekend day name shows in header */ | |
| 50 color: #a66; | |
| 51 } | |
| 52 | |
| 53 .calendar thead .hilite { /* How do the buttons in header appear when hover */ | |
| 54 background-color: #aaf; | |
| 55 color: #000; | |
| 56 border: 1px solid #04f; | |
| 57 padding: 1px; | |
| 58 } | |
| 59 | |
| 60 .calendar thead .active { /* Active (pressed) buttons in header */ | |
| 61 background-color: #77c; | |
| 62 padding: 2px 0px 0px 2px; | |
| 63 } | |
| 64 | |
| 65 /* The body part -- contains all the days in month. */ | |
| 66 | |
| 67 .calendar tbody .day { /* Cells <TD> containing month days dates */ | |
| 68 width: 2em; | |
| 69 color: #456; | |
| 70 text-align: right; | |
| 71 padding: 2px 4px 2px 2px; | |
| 72 } | |
| 73 .calendar tbody .day.othermonth { | |
| 74 font-size: 80%; | |
| 75 color: #bbb; | |
| 76 } | |
| 77 .calendar tbody .day.othermonth.oweekend { | |
| 78 color: #fbb; | |
| 79 } | |
| 80 | |
| 81 .calendar table .wn { | |
| 82 padding: 2px 3px 2px 2px; | |
| 83 border-right: 1px solid #000; | |
| 84 background: #bdf; | |
| 85 } | |
| 86 | |
| 87 .calendar tbody .rowhilite td { | |
| 88 background: #def; | |
| 89 } | |
| 90 | |
| 91 .calendar tbody .rowhilite td.wn { | |
| 92 background: #eef; | |
| 93 } | |
| 94 | |
| 95 .calendar tbody td.hilite { /* Hovered cells <TD> */ | |
| 96 background: #def; | |
| 97 padding: 1px 3px 1px 1px; | |
| 98 border: 1px solid #bbb; | |
| 99 } | |
| 100 | |
| 101 .calendar tbody td.active { /* Active (pressed) cells <TD> */ | |
| 102 background: #cde; | |
| 103 padding: 2px 2px 0px 2px; | |
| 104 } | |
| 105 | |
| 106 .calendar tbody td.selected { /* Cell showing today date */ | |
| 107 font-weight: bold; | |
| 108 border: 1px solid #000; | |
| 109 padding: 1px 3px 1px 1px; | |
| 110 background: #fff; | |
| 111 color: #000; | |
| 112 } | |
| 113 | |
| 114 .calendar tbody td.weekend { /* Cells showing weekend days */ | |
| 115 color: #a66; | |
| 116 } | |
| 117 | |
| 118 .calendar tbody td.today { /* Cell showing selected date */ | |
| 119 font-weight: bold; | |
| 120 color: #00f; | |
| 121 } | |
| 122 | |
| 123 .calendar tbody .disabled { color: #999; } | |
| 124 | |
| 125 .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */ | |
| 126 visibility: hidden; | |
| 127 } | |
| 128 | |
| 129 .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */ | |
| 130 display: none; | |
| 131 } | |
| 132 | |
| 133 /* The footer part -- status bar and "Close" button */ | |
| 134 | |
| 135 .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */ | |
| 136 text-align: center; | |
| 137 background: #556; | |
| 138 color: #fff; | |
| 139 } | |
| 140 | |
| 141 .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */ | |
| 142 background: #fff; | |
| 143 color: #445; | |
| 144 border-top: 1px solid #556; | |
| 145 padding: 1px; | |
| 146 } | |
| 147 | |
| 148 .calendar tfoot .hilite { /* Hover style for buttons in footer */ | |
| 149 background: #aaf; | |
| 150 border: 1px solid #04f; | |
| 151 color: #000; | |
| 152 padding: 1px; | |
| 153 } | |
| 154 | |
| 155 .calendar tfoot .active { /* Active (pressed) style for buttons in footer */ | |
| 156 background: #77c; | |
| 157 padding: 2px 0px 0px 2px; | |
| 158 } | |
| 159 | |
| 160 /* Combo boxes (menus that display months/years for direct selection) */ | |
| 161 | |
| 162 .calendar .combo { | |
| 163 position: absolute; | |
| 164 display: none; | |
| 165 top: 0px; | |
| 166 left: 0px; | |
| 167 width: 4em; | |
| 168 cursor: default; | |
| 169 border: 1px solid #655; | |
| 170 background: #def; | |
| 171 color: #000; | |
| 172 font-size: 90%; | |
| 173 z-index: 100; | |
| 174 } | |
| 175 | |
| 176 .calendar .combo .label, | |
| 177 .calendar .combo .label-IEfix { | |
| 178 text-align: center; | |
| 179 padding: 1px; | |
| 180 } | |
| 181 | |
| 182 .calendar .combo .label-IEfix { | |
| 183 width: 4em; | |
| 184 } | |
| 185 | |
| 186 .calendar .combo .hilite { | |
| 187 background: #acf; | |
| 188 } | |
| 189 | |
| 190 .calendar .combo .active { | |
| 191 border-top: 1px solid #46a; | |
| 192 border-bottom: 1px solid #46a; | |
| 193 background: #eef; | |
| 194 font-weight: bold; | |
| 195 } | |
| 196 | |
| 197 .calendar td.time { | |
| 198 border-top: 1px solid #000; | |
| 199 padding: 1px 0px; | |
| 200 text-align: center; | |
| 201 background-color: #f4f0e8; | |
| 202 } | |
| 203 | |
| 204 .calendar td.time .hour, | |
| 205 .calendar td.time .minute, | |
| 206 .calendar td.time .ampm { | |
| 207 padding: 0px 3px 0px 4px; | |
| 208 border: 1px solid #889; | |
| 209 font-weight: bold; | |
| 210 background-color: #fff; | |
| 211 } | |
| 212 | |
| 213 .calendar td.time .ampm { | |
| 214 text-align: center; | |
| 215 } | |
| 216 | |
| 217 .calendar td.time .colon { | |
| 218 padding: 0px 2px 0px 3px; | |
| 219 font-weight: bold; | |
| 220 } | |
| 221 | |
| 222 .calendar td.time span.hilite { | |
| 223 border-color: #000; | |
| 224 background-color: #667; | |
| 225 color: #fff; | |
| 226 } | |
| 227 | |
| 228 .calendar td.time span.active { | |
| 229 border-color: #f00; | |
| 230 background-color: #000; | |
| 231 color: #0f0; | |
| 232 } |