[Sommaire] [Imprimer]

   1  /* $Id: app.css 22136 2006-07-20 08:00:36Z lkneschke $ */
   2  
   3  /******************************************************************
   4   * CSS settings for the day, week and month view (timeGridWidget) *
   5   ******************************************************************/
   6  
   7  /*
   8  Names used in the "graphic" are the css classes from this file.
   9  The function names in class uiviews have the leading cal removed and a trailing Widget added:
  10  e.g. the div with class calTimeGrid is generated by the timeGridWidget method of uiviews.
  11  
  12  +++ calTimeGrid +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  13  +                #### calDayCols[12h|NoGrip] ###########################################################
  14  +                #... calDayCol ............................. ... calDayCol ..........................
  15  +                #.+- calDayColHeader ---------------------+. .+- calDayColHeader ------------------+.
  16  +                #.|                                       |. .|                                    |.
  17  +                #.+---------------------------------------+. .+------------------------------------+.
  18  +.calTimeRowTime.#.** calEventCol ***** ** calEventCol *****. .** calEventCol ***********************.
  19  +.              .#.*                  * *                  *. .*                                    *.
  20  +.              .#.*                  * *                  *. .*                                    *.
  21  +................#.*+- calEvent -----+* *                  *. .*                                    *.
  22  +.calTimeRowTime.#.*|                |* *                  *. .*+- calEvent[Private] --------------+*.
  23  +.              .#.*|                |* *+- calEvent -----+*. .*|                                  |*.
  24  +.              .#.*+----------------+* *|                |*. .*|                                  |*.
  25  +................#.*                  * *|                |*. .*|                                  |*.
  26  +.calTimeRowTime.#.*                  * *+----------------+*. .*|                                  |*.
  27  +.              .#.*                  * *                  *. .*+----------------------------------+*.
  28  
  29  */
  30  
  31  .redItalic { color: red; font-style: italic; }
  32  .size120b { font-size: 120%; font-weight: bold; }
  33  
  34  /* marks a day in the colum-header as today
  35   */
  36  .calToday{
  37      background: #ffffcc;
  38  }
  39  /* marks a day in the colum-header as holiday
  40   */
  41  .calHoliday{
  42      background: #dac0c0;
  43  }
  44  /* marks a day in the column-header additionaly as birthday of some contact,
  45   * it should work together with the backgrounds of calToday, calHoliday, th, row_on and row_off
  46   */
  47  .calBirthday,.calBirthday a{
  48      color: black;
  49      font-weight: bold;
  50      font-style: italic;
  51  }
  52  
  53  /* timeGridWidget, contains timeRow's and dayCol's
  54   */
  55  .calTimeGrid{
  56      position: relative;
  57      top: 0px;
  58      left: 0px;
  59      border:1px solid silver;
  60      width: 100%;
  61  /* set via inline style on runtime:
  62   *  height:
  63   */
  64  }
  65  
  66  /* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can
  67   */
  68  .calTimeRow,.calTimeRowOff{
  69      position: absolute;
  70      width: 100%;
  71  /* set via inline style on runtime:
  72   *  height:
  73   *  top:
  74   */
  75  }
  76  .calTimeRow{
  77  /*    background-color: silver; */
  78  }
  79  
  80  /* time in a timeRow
  81   */
  82  .calTimeRowTime{
  83      padding-left: 5px;
  84      height: 100%;
  85      line-height: 14px;
  86      font-size:8pt;
  87      text-align: left;
  88  }
  89  
  90  /* contains (multiple) dayCol's
  91   */
  92  .calDayCols,.calDayCols12h,.calDayColsNoGrid{
  93      position: absolute;
  94      top: 0px;
  95  /*    bottom: 0px; does NOT work in IE, IE needs height: 100%! */
  96      height: 100%;
  97      left: 45px;
  98      right: 0px; 
  99  }
 100  /* 12h timeformat with am/pm
 101   */
 102  .calDayCols12h{
 103      left: 65px;
 104  }
 105  /* no time grid --> no time column
 106   */
 107  .calDayColsNoTime{
 108      left: 0px;
 109  }
 110  
 111  /* contains (multiple) eventCol's
 112   */
 113  .calDayCol{
 114      position: absolute;
 115      top: 0px;
 116      height: 100%;
 117  /* set via inline style on runtime:
 118   *  left:
 119   *  width:
 120   */
 121      border-left: 1px solid silver;
 122  }
 123  
 124  /* header for the dayCol
 125   */
 126  .calDayColHeader,.calGridHeader{
 127      position: absolute;
 128      top: 0px;
 129      left: 0px;
 130      width: 100%;
 131      right: 0px;    /* does not work in IE, but looks better in other browsers then width:100% */
 132      text-align: center;
 133      font-size: 100%;
 134      white-space: nowrap;
 135      border-bottom: 1px solid silver;
 136      border-right: 1px solid silver;
 137      height: 16px;
 138      line-height: 16px;
 139      z-index: 30;
 140  }
 141  .calDayColHeader img {
 142      vertical-align: middle;
 143  }
 144  
 145  .calViewUserNameBox {
 146      position: absolute;
 147      top: -1px;
 148      width: 95%;
 149      text-align: left;
 150      font-size: 120%;
 151      white-space: nowrap;
 152      border: 1px solid gray;
 153      height: 17px;
 154      left: -1px;
 155      padding-top: 0px;
 156      padding-left: 10px;
 157      background: #dac0c0;
 158  }
 159  .calViewUserName {
 160      font-weight: normal;
 161  }
 162  .calViewUserName:first-letter {
 163      text-transform:uppercase;
 164  }
 165  .calViewUserNameFirst {
 166  }
 167  .calViewUserNameFirst:after {
 168      content: ", ";
 169  }
 170      
 171  /* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
 172   */
 173  .calGridHeader{
 174      text-align: left;
 175      padding-left: 3px;
 176  }
 177  
 178  /* contains (multiple) events's
 179   */
 180  .calEventCol{
 181      position: absolute;
 182      top: 0px;
 183  /*    bottom: 0px; does NOT work in IE, IE needs height: 100%! */
 184      height: 100%;
 185  /* set via inline style on runtime:
 186   *  left:
 187   *  width:
 188   */
 189  }
 190  
 191  /* contains one event: header-row & -body
 192   */
 193  .calEvent,.calEventPrivate{
 194      position: absolute;
 195      left: 0px;
 196      right: 0px;
 197      overflow: hidden;
 198      z-index: 20;
 199      border-width: 1px;
 200      border-style: solid;
 201      border-radius: 6px;
 202      -moz-border-radius: 6px;
 203  /* set via inline style on runtime:
 204   *  top: depending on startime
 205   *  height: depending on length
 206   *  border-color: depending on category
 207   *  background: depending on category (shade)
 208   */
 209  }
 210  .calEvent:hover{
 211      cursor: pointer;
 212      cursor: hand;
 213  }
 214  
 215  .calEventTooltip{
 216      border-width: 1px;
 217      border-style: solid;
 218      border-radius: 6px;
 219      -moz-border-radius: 6px;
 220  }
 221  
 222  .calAddEvent{
 223      position: absolute;
 224      width: 100%;
 225      z-index: 10;
 226  }
 227  
 228  .calAddEvent:hover{
 229      background-color: #D2D7FF;
 230      cursor: pointer;
 231      cursor: hand;
 232  }
 233  
 234  /* header-row of the event
 235   */
 236  .calEventHeader,.calEventHeaderSmall{
 237      position: relative;    /* as the calEventIcons use postion: absolute! */
 238      font-weight: bold;
 239      font-size: 9pt;
 240      color: white;
 241      text-align: left;
 242      left: 0px;
 243      right: 0px;
 244      padding-left: 2px;
 245  /* set via inline style on runtime
 246   *  background-color: depending on category
 247   */
 248  }
 249  .calEventHeaderSmall{
 250      font-size: 8pt;
 251      line-height: 10pt;
 252  }
 253  
 254  .calEventIcons{
 255      position: absolute;
 256      right: 0px;
 257      top: 0px;
 258  }
 259  .calEventHeaderSmall .calEventIcons img{ 
 260      height: 13px;
 261  }
 262  
 263  /* body of the event
 264   */
 265  .calEventBody,.calEventBodySmall{
 266      padding: 0px 3px 0px;
 267      left: 2px;
 268      right: 2px;
 269      height: 99%;
 270  }
 271  
 272  .calEventBodySmall{
 273      font-size: 95%;
 274  }
 275  
 276  .calEventLabel{
 277      font-weight: bold;
 278      font-size: 90%;
 279  }
 280  
 281  .calEventTitle{
 282      font-weight: bold;
 283      font-size: 110%;
 284  }
 285  
 286  /* table of the dayView containing 2 cols: 1) day-view, 2) todos
 287  */
 288  .calDayView{
 289      width: 100%;
 290  }
 291  /* calDayTods is the day-view's todo column, containing the calDayTodoHeader and the calDayTodoTable
 292   */
 293  .calDayTodos .calDayTodosHeader {
 294      margin: 0px; 
 295      padding: 2px;
 296      font-weight: bold;
 297  }
 298  .calDayTodos .calDayTodosTable {
 299      overflow: auto; 
 300      max-height: 400px;
 301  }
 302  .calDayTodos {
 303      width: 250px;
 304      margin-left: 10px;
 305      border: 1px solid silver;
 306  }
 307  .calDayTodosHeader {
 308      text-align: center;
 309  }
 310  
 311  /******************************************************
 312   * CSS settings for the planner views (plannerWidget) *
 313   ******************************************************/
 314   
 315  /* plannerWidget represents the whole planner, consiting of the plannerHeader and multiple plannerRowWidgets
 316   */
 317  .plannerWidget {
 318      position: relative;
 319      top: 0px;
 320      left: 0px;
 321      width: 99.5%;
 322      border: 1px solid gray;
 323      padding-right: 3px;
 324  }
 325  
 326  /* plannerHeader contains a plannerHeaderTitle and multiple plannerHeaderRows
 327   */
 328  .plannerHeader {
 329      position: relative;
 330      top: 0px;
 331      left: 0px;
 332      width: 100%;
 333  }
 334  
 335  /* plannerRowWidget contains a plannerRowHeader and multiple eventRowWidgets in an eventRows
 336   */
 337  .plannerRowWidget {
 338      position: relative;
 339      top: 0px;
 340      left: 0px;
 341      width: 100%;
 342  }
 343  
 344  /* plannerScale represents a scale-row of the plannerHeader, containing multiple planner{Day|Week|Month}Scales
 345   */
 346  .plannerScale,.plannerScaleDay{
 347      position: relative;
 348      top: 0px;
 349      left: 0%;
 350      width: 100%;
 351      height: 20px;
 352      line-height: 20px;
 353  }
 354  .plannerScaleDay {
 355      height: 28px;
 356      line-height: 14px;
 357  }
 358  .plannerDayScale,.plannerMonthScale,.plannerWeekScale,.plannerHourScale {
 359      position: absolute;
 360      top: 0px;
 361      /* left+width: is set by the code on runtime */
 362      text-align: center;
 363      height: 100%;
 364      border: 1px solid white;
 365  /* set via inline style on runtime:
 366   *  left: 
 367   *  width: 
 368   */
 369  }
 370  .plannerHourScale {
 371      font-size: 90%;
 372  }
 373  .plannerDayScale {
 374      font-size: 90%;
 375  }
 376  .plannerWeekScale {
 377      line-height: 20px;
 378  }
 379  .plannerMonthScale {
 380      font-weight: bold;
 381  }
 382  .plannerDayScale img,.plannerWeekScale img,.plannerMonthScale img {
 383      vertical-align: middle;
 384  }
 385  
 386  /* plannerRowHeader contains the user or category name of the plannerRowWidget
 387   */
 388  .plannerRowHeader, .plannerHeaderTitle {
 389      position: absolute;
 390      top: 0px;
 391      left: 0%;
 392      width: 15%;        /* need to be identical for plannerRowHeader and plannerHeaderTitle and match left of eventRows/plannerHeaderRows */
 393      height: 100%;
 394      line-height: 20px;
 395      border: 1px solid white;
 396  }
 397  
 398  /* eventRows contain multiple eventRowWidgets
 399   */
 400  .eventRows, .plannerHeaderRows {
 401      position: relative;
 402      top: 0px;
 403      left: 15%;    /* need to be identical for eventRows and plannerHeaderRows and match width of plannerRowHeader/plannerHeaderTitle */
 404      width: 85%;
 405  }
 406  
 407  /* eventRowWidget contains non-overlapping events
 408   */
 409  .eventRowWidget {
 410      position: relative;
 411      top: 0px;
 412      left: 0px;
 413      width: 100%;
 414      height: 20px;
 415      border: 1px solid white;
 416  }
 417  
 418  .plannerEvent,.plannerEventPrivate{
 419      position: absolute;
 420      top: 0px;
 421      height: 100%;
 422      overflow: hidden;
 423      z-index: 20;
 424      border: 1px solid black;
 425  /* set via inline style on runtime:
 426   *  left: depending on startime
 427   *  width: depending on length
 428   *  background-color: depending on category
 429   */
 430  }
 431  .plannerEvent img,.plannerEventPrivate img {
 432      padding-top: 2px;
 433  }
 434  .plannerEvent:hover{
 435      cursor: pointer;
 436      cursor: hand;
 437  }