Event box rounding CSS - Sunbird 0.5: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(new version for Sunbird 0.5)
 
(No difference)

Revision as of 11:17, 19 October 2008

Preview: Image:Sunbird-0.5-dayview-with-events-rounded.png

/* 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: %APPDATA%\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.5. */

/* (Layout Bug: as of Sunbird 0.5, gaps may appear between some
    rounded event boxes and right or bottom shadows. (Maybe bug285821)*/

/* Day View, Week View */
calendar-event-box .calendar-item, 
calendar-event-box .calendar-event-selection { 
  -moz-border-radius: 1em;
}
/* reduce shadow in lower corners, avoid 'tombstone' look */
calendar-event-box .calendar-event-box-shadow-bottom {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
calendar-event-box[orient="vertical"] .calendar-event-box-shadow-right {
  margin-top: 0.5em;
}
calendar-event-box[orient="horizontal"] .calendar-event-box-shadow-right {
  margin-bottom: 0.7em;
}
calendar-event-box[orient="vertical"] .calendar-event-box-shadow-edge-right {
  margin-bottom: 0.7em; /* when vertical, this is below right shadow */
}
calendar-event-box[orient="horizontal"] .calendar-event-box-shadow-edge-right {
  display: none; /* when horizontal, this is right of bottom shadow */
}
/* eliminate left shadow to save space */
.calendar-event-box-shadow-left,
.calendar-event-box-shadow-edge-left {
  display: none
}

/* Month View, Multiweek View, Day View All Day, Week View All Day */
calendar-month-day-box-item .calendar-item, 
calendar-month-day-box-item .calendar-event-selection,
calendar-header-container .calendar-item,
calendar-header-container .calendar-event-selection { 
  -moz-border-radius: 4px;
}
/* reduce shadow in lower corners, avoid 'tombstone' look */
calendar-month-day-box-item .calendar-event-box-shadow-bottom,
calendar-header-container .calendar-event-box-shadow-bottom {
  margin-left: 4px;
  margin-right: 4px;
}
/* reduce margin, no longer needed because shadow is included in box */
calendar-month-day-box-item { 
  margin: 0px ! important; 
}

/* This file is at
     http://kb.mozillazine.org/Event_box_rounding_CSS_-_Sunbird
*/