Event box rounding CSS - Sunbird 0.3: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
m (reorg calendar pages: category Calendar subsumes Sunbird and Lightning)
m (reorg calendar tips as category)
Line 13: Line 13:
       @import url("CalendarEventBoxRounded.css");
       @import url("CalendarEventBoxRounded.css");
   
   
     Tested on Sunbird 0.3a2, Sunbird 0.3.   
     Tested on Sunbird 0.3a2 - Sunbird 0.3.1.   
     (Does not work on Lightning 0.3 on Thunderbird2b1).*/
     (Does not work on Lightning).*/
   
   
  /* Use calendar-event-box border and background
  /* Use calendar-event-box border and background
Line 90: Line 90:
   cursor: ne-resize ! important;
   cursor: ne-resize ! important;
  }
  }
[[Category:Calendar 0.3]]
[[Category:Calendar 0.3]][[Category:Tips - Calendar 0.3]]

Revision as of 14:44, 8 July 2007

/* CalendarEventBoxRounded.css

   To give your event boxes rounded corners in Week view and Day View, 
   save this css in your profile [1] chrome directory,
   and import this CSS in your userChrome.css [2].

   For Sunbird, the userChrome.css path may be something like the following
   w2k: c:\Documents and Settings\USER\Application Data\Mozilla\Sunbird\Profiles\NNNNN.default\chrome\userChrome.css
   gnu/linux: ~/.mozilla/sunbird/NNNNNN.default/chrome/userChrome.css
 
   1. Save this file in your profile as chrome/CalendarEventBoxRounded.css
   2. Add the following to profile file chrome/userChrome.css (create if none):
     @import url("CalendarEventBoxRounded.css");

   Tested on Sunbird 0.3a2 - Sunbird 0.3.1.  
   (Does not work on Lightning).*/

/* Use calendar-event-box border and background
   (instead of nested .calendar-event-box-container box)
   so edge will line up with outside of gripbars.
   (Layout Bug: as of Sunbird 0.3a2, gaps may appear between some
    rounded event boxes with the same time. (Maybe bug285821)*/
calendar-event-box { 
  -moz-border-radius: 1em;
}
calendar-event-box[orient="vertical"] { 
  border-top: none !important;
  border-bottom: none !important;
  border-left: 1px solid #2e4e73;
  border-right: 1px solid #2e4e73;
}
calendar-event-box[orient="horizontal"] { 
  border-top: 1px solid #2e4e73;
  border-bottom: 1px solid #2e4e73;
  border-left: none !important;
  border-right: none !important;
}
calendar-event-box[selected="true"] { 
  background: #ffdb67 ! important;
}

/* remove old nested box border/background */
calendar-event-box .calendar-event-box-container,
calendar-event-box[selected="true"] .calendar-event-box-container 
{
  border: none ! important;  
  background: transparent !important;
}

/* Reduce appearance of gripbar */
calendar-event-gripbar {
  background: transparent ! important;
}

/* Add space on ends of calendar-event-box gripbar to expose rounded corner. */
calendar-event-gripbar[parentorient="vertical"] {
  margin-left:  1ex ! important;
  margin-right: 1ex ! important;
}
calendar-event-gripbar[parentorient="horizontal"] {
  margin-top:    1ex ! important;
  margin-bottom: 1ex ! important;
}

/* Use gripbar to display border so border is grippable at edge.
   (If border was on calendar-event-box, it would be outside gripbar, so
   edge of event box would not be grippable.) */
calendar-event-gripbar[parentorient="vertical"][whichside="start"] {
  border-top: 1px solid #2e4e73;
}
calendar-event-gripbar[parentorient="vertical"][whichside="end"] {
  border-bottom: 1px solid #2e4e73;
}
calendar-event-gripbar[parentorient="horizontal"][whichside="start"] {
  border-left: 1px solid #2e4e73;
}
calendar-event-gripbar[parentorient="horizontal"][whichside="end"] {
  border-right: 1px solid #2e4e73;
}

/* Distinguish pointer at end of event from pointer at start of
   immediately following event.  On windows, there is just one
   vertical resize cursor so use two diagonal resize cursors instead.
   (Also just one horizontal resize cursor, so use the same two
   diagonal resize cursors for both vertical and horizontal orientation).  */
calendar-event-box calendar-event-gripbar[whichside="start"] {
  cursor: nw-resize ! important;
}
calendar-event-box calendar-event-gripbar[whichside="end"] {
  cursor: ne-resize ! important;
}