koha-tmpl/intranet-tmpl/prog/en/includes_npl/calendar/calendar-system.css

   1 /* The main calendar widget.  DIV containing a table. */
   2
   3 .calendar {
   4   position: relative;
   5   display: none;
   6   border: 1px solid;
   7   border-color: #fff #000 #000 #fff;
   8   font-size: 11px;
   9   cursor: default;
  10   background: Window;
  11   color: WindowText;
  12   font-family: tahoma,verdana,sans-serif;
  13   width:250px;
  14 }
  15
  16 .calendar table {
  17   border: 1px solid;
  18   border-color: #fff #000 #000 #fff;
  19   font-size: 11px;
  20   cursor: default;
  21   background: Window;
  22   color: WindowText;
  23   font-family: tahoma,verdana,sans-serif;
  24   border-collapse:separate;
  25 }
  26
  27 /* Header part -- contains navigation buttons and day names. */
  28
  29 .calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  30   text-align: center;
  31   padding: 1px;
  32   border: 1px solid;
  33   display: table-cell;
  34   -moz-border-radius: 0px;
  35   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
  36   background: ButtonFace;
  37 }
  38
  39 .calendar .nav {
  40   background: ButtonFace url('menuarrow.gif') no-repeat 100% 100%;
  41 }
  42
  43 .calendar thead .title { /* This holds the current "month, year" */
  44   font-weight: bold;
  45   padding: 1px;
  46   border: 1px solid #000;
  47   background: ActiveCaption;
  48   color: CaptionText;
  49   text-align: center;
  50 }
  51
  52 .calendar thead .headrow { /* Row <TR> containing navigation buttons */
  53 }
  54
  55 .calendar thead .daynames { /* Row <TR> containing the day names */
  56 }
  57
  58 .calendar thead .name { /* Cells <TD> containing the day names */
  59   border-bottom: 1px solid ButtonShadow;
  60   padding: 2px;
  61   text-align: center;
  62   background: ButtonFace;
  63   color: ButtonText;
  64 }
  65
  66 .calendar thead .weekend { /* How a weekend day name shows in header */
  67 //  color: #f00;
  68 }
  69
  70 .calendar thead .hilite { /* How do the buttons in header appear when hover */
  71   border: 2px solid;
  72   padding: 0px;
  73   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
  74 }
  75
  76 .calendar thead .active { /* Active (pressed) buttons in header */
  77   border-width: 1px;
  78   padding: 2px 0px 0px 2px;
  79   border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
  80 }
  81
  82 /* The body part -- contains all the days in month. */
  83
  84 .calendar tbody .day { /* Cells <TD> containing month days dates */
  85   width: 2em;
  86   text-align: right;
  87   padding: 2px 4px 2px 2px;
  88 }
  89 .calendar tbody .day.othermonth {
  90   font-size: 80%;
  91   color: #aaa;
  92 }
  93 .calendar tbody .day.othermonth.oweekend {
  94   color: #faa;
  95 }
  96
  97 .calendar table .wn {
  98   padding: 2px 3px 2px 2px;
  99   border-right: 1px solid ButtonShadow;
 100   background: ButtonFace;
 101   color: ButtonText;
 102 }
 103
 104 .calendar tbody .rowhilite td {
 105 //  background: Highlight;
 106 //  color: HighlightText;
 107 }
 108
 109 .calendar tbody td.hilite { /* Hovered cells <TD> */
 110   padding: 1px 3px 1px 1px;
 111   border-top: 1px solid #fff;
 112   border-right: 1px solid #000;
 113   border-bottom: 1px solid #000;
 114   border-left: 1px solid #fff;
 115 }
 116
 117 .calendar tbody td.active { /* Active (pressed) cells <TD> */
 118 //  padding: 2px 2px 0px 2px;
 119 //  border: 1px solid;
 120 //  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
 121 }
 122
 123 .calendar tbody td.selected { /* Cell showing selected date */
 124   font-weight: bold;
 125   border: 1px solid;
 126   border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
 127   padding: 2px 2px 0px 2px;
 128   background: ButtonFace;
 129   color: ButtonText;
 130 }
 131
 132 .calendar tbody td.weekend { /* Cells showing weekend days */
 133 //  color: #f00;
 134 }
 135
 136 .calendar tbody td.today { /* Cell showing today date */
 137   font-weight: bold;
 138   color: #00f;
 139 }
 140
 141 .calendar tbody td.disabled { color: GrayText; }
 142
 143 .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
 144   visibility: hidden;
 145 }
 146
 147 .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
 148   display: none;
 149 }
 150
 151 /* The footer part -- status bar and "Close" button */
 152
 153 .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
 154 }
 155
 156 .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
 157   background: ButtonFace;
 158   padding: 1px;
 159   border: 1px solid;
 160   border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
 161   color: ButtonText;
 162   text-align: center;
 163 }
 164
 165 .calendar tfoot .hilite { /* Hover style for buttons in footer */
 166   border-top: 1px solid #fff;
 167   border-right: 1px solid #000;
 168   border-bottom: 1px solid #000;
 169   border-left: 1px solid #fff;
 170   padding: 1px;
 171   background: #e4e0d8;
 172 }
 173
 174 .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
 175   padding: 2px 0px 0px 2px;
 176   border-top: 1px solid #000;
 177   border-right: 1px solid #fff;
 178   border-bottom: 1px solid #fff;
 179   border-left: 1px solid #000;
 180 }
 181
 182 /* Combo boxes (menus that display months/years for direct selection) */
 183
 184 .calendar .combo {
 185   position: absolute;
 186   display: none;
 187   width: 4em;
 188   top: 0px;
 189   left: 0px;
 190   cursor: default;
 191   border: 1px solid;
 192   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
 193   background: Menu;
 194   color: MenuText;
 195   font-size: 90%;
 196   padding: 1px;
 197 }
 198
 199 .calendar .combo .label,
 200 .calendar .combo .label-IEfix {
 201   text-align: center;
 202   padding: 1px;
 203 }
 204
 205 .calendar .combo .label-IEfix {
 206   width: 4em;
 207 }
 208
 209 .calendar .combo .active {
 210   padding: 0px;
 211   border: 1px solid #000;
 212 }
 213
 214 .calendar .combo .hilite {
 215   background: Highlight;
 216   color: HighlightText;
 217 }
 218
 219 .calendar td.time {
 220   border-top: 1px solid ButtonShadow;
 221   padding: 1px 0px;
 222   text-align: center;
 223   background-color: ButtonFace;
 224 }
 225
 226 .calendar td.time .hour,
 227 .calendar td.time .minute,
 228 .calendar td.time .ampm {
 229   padding: 0px 3px 0px 4px;
 230   border: 1px solid #889;
 231   font-weight: bold;
 232   background-color: Menu;
 233 }
 234
 235 .calendar td.time .ampm {
 236   text-align: center;
 237 }
 238
 239 .calendar td.time .colon {
 240   padding: 0px 2px 0px 3px;
 241   font-weight: bold;
 242 }
 243
 244 .calendar td.time span.hilite {
 245   border-color: #000;
 246   background-color: Highlight;
 247   color: HighlightText;
 248 }
 249
 250 .calendar td.time span.active {
 251   border-color: #f00;
 252   background-color: #000;
 253   color: #0f0;
 254 }