Text Styles CSS - Sunbird

Preview: Image:Sunbird-0.9-dayview-with-text-styles.png

/* CalendarItemTextStyles.css
 *
 * To show event/task status and priority with CSS text styling,
 * 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("CalendarItemTextStyles.css");
 *
 * Tested on Sunbird 0.9.
 *
 * Known issues: 
 * - Privacy
 *   - privacy attributes are not yet added to events, so it is
 *     impossible to style private events based on CSS alone.
 * - Status
 *   - In DayView and WeekView, <xul:description> does not implement
 *     CSS text-decorations: underline, line-through.
 *     - Instead of underline, this version uses a workaround using
 *       border-bottom, but the bottom may be far from the text.
 *     - Instead of line-through, cancelled/completed items are faded.
 *       Completed items have solid line; cancelled items have broken line.
 *   - There is no css text-decoration for dashed underline.
 *     Instead, dashed underline is simulated with border-bottom
 *     with border-style: dashed.
 *   - In the event list and task list, <xul:tree> does not implement
 *     CSS opacity.  Instead of opacity, GrayText color is used.
 *
 * References:
 * - SVG color keywords (http://www.w3.org/TR/css3-color/#svg-color)
 * - System color keywords (http://www.w3.org/TR/css3-color/#css-system)
 * - bug 202360 added attributes to make state styling possible.
 * - bug 393748 (not in 0.9) changes default task colors in task table
 * - bug 351145 (not in 0.9) fixes unfocused selected text color in tables
 */
/*
 * PRIORITY (high, normal, low): font-weight, font-size
 */
#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(highpriority),
tree.calendar-task-tree > treechildren::-moz-tree-cell-text(highpriority),
calendar-event-box[priority="high"] description,
calendar-editable-item[priority="high"] label,
calendar-month-day-box-item[priority="high"] label {
  font-weight: bolder;
}
#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(lowpriority),
tree.calendar-task-tree > treechildren::-moz-tree-cell-text(lowpriority),
calendar-event-box[priority="low"] description,
calendar-editable-item[priority="low"] label,
calendar-month-day-box-item[priority="low"] label {
  font-size: smaller;
}

/*
 * PRIVACY (private): font-style
 */
/* NOT YET IMPLEMENTED
#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(privacy-private),

calendar-event-box[privacy="private"] description,
calendar-editable-item[privacy="private"] label,
calendar-month-day-box-item[privacy="private"] label {
  font-style: italic;
}
*/

/*
 * STATUS: text decoration
 *   event:tentative/task:needs-action,
 *   event:confirmed/task:in-process,
 *   task:completed,
 *   event:cancelled/task:cancelled
 * (note: xul description doesn't implement text-decorations, 
 *  so can't use underline or line-through for DayView and WeekView
 *  calendar-event-box description.)
 */
#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(status-tentative),
tree.calendar-task-tree > treechildren::-moz-tree-cell-text(status-needs-action),
calendar-editable-item[status="tentative"] label,
calendar-editable-item[status="needs-action"] label,
calendar-month-day-box-item[status="tentative"] label,
calendar-month-day-box-item[status="needs-action"] label {
  border-bottom-width: 1px;
  border-bottom-style: dashed;
}
calendar-event-box[status="tentative"] description,
calendar-event-box[status="needs-action"] description {
  border-bottom-width: 1px;
  border-bottom-style: dashed;
}

#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(status-confirmed),
tree.calendar-task-tree > treechildren::-moz-tree-cell-text(status-in-process),
calendar-editable-item[status="confirmed"] label,
calendar-editable-item[status="in-process"] label,
calendar-month-day-box-item[status="confirmed"] label,
calendar-month-day-box-item[status="in-process"] label {
  text-decoration: underline;
}
calendar-event-box[status="confirmed"] description,
calendar-event-box[status="in-process"] description {
  text-decoration: underline; /* fails in 0.9 */
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

tree.calendar-task-tree > treechildren::-moz-tree-cell-text(status-completed) {
  text-decoration: line-through;
}
calendar-editable-item[status="completed"] label,
calendar-month-day-box-item[status="completed"] label {
  text-decoration: line-through;
  opacity: 0.25; /* dim */
}

calendar-event-box[status="completed"] description {
  text-decoration: line-through; /* fails in 0.9 */
  opacity: 0.25; /* dim */
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(status-cancelled),
tree.calendar-task-tree > treechildren::-moz-tree-cell-text(status-cancelled) {
  text-decoration: line-through;
}
calendar-editable-item[status="cancelled"] label,
calendar-month-day-box-item[status="cancelled"] label {
  text-decoration: line-through;
  opacity: 0.25; /* dim */
}
calendar-event-box[status="cancelled"] description {
  text-decoration: line-through; /* fails in 0.9 */
  opacity: 0.25; /* dim */
  border-bottom-width: 1px;
  border-bottom-style: dashed;
}

/*
 * Progress: color text red if task overdue
 */
calendar-editable-item[progress="overdue"] label,
calendar-month-day-box-item[progress="overdue"] label,
calendar-event-box[progress="overdue"] description {
  color: red;
}


/*
 * Task table default text colors
 * (bug 393748 -- future:InfoText,completed/canceled:GrayText)
 */
/* overdue: past due date */
.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue) {
  color: red ! important;
}
/* duetoday: due date is today, not overdue */
.calendar-task-tree > treechildren::-moz-tree-cell-text(duetoday) {
  color: mediumblue ! important;
}
/* inprogress: started, not due today or overdue */
.calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress) {
  color: green ! important;
}
/* future: before start date, not due today */
.calendar-task-tree > treechildren::-moz-tree-cell-text(future) {
  color: WindowText ! important;
}
/* Status completed or cancelled */
.calendar-task-tree > treechildren::-moz-tree-cell-text(status-cancelled),
.calendar-task-tree > treechildren::-moz-tree-cell-text(status-completed) {
  color: GrayText ! important;
}
/*
 * Table unfocused and focused selected text color (bug 351145)
 */
#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(selected) {
  color: WindowText ! important;
}
#unifinder-search-results-tree > treechildren::-moz-tree-cell-text(selected, focus) {
  color: HighlightText ! important;
}

.calendar-task-tree > treechildren::-moz-tree-cell-text(selected) {
  color: WindowText ! important;
}
.calendar-task-tree > treechildren::-moz-tree-cell-text(selected, focus) {
  color: HighlightText ! important;
}

.calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress, selected) {
  color: green ! important;
}
.calendar-task-tree > treechildren::-moz-tree-row(inprogress, selected, focus) {
  background-color: green ! important;
}
.calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress, selected, focus) {
  color: HighlightText ! important;
}

.calendar-task-tree > treechildren::-moz-tree-cell-text(duetoday, selected) {
  color: mediumblue ! important;
}
.calendar-task-tree > treechildren::-moz-tree-row(duetoday, selected, focus) {
  background-color: mediumblue ! important;
}
.calendar-task-tree > treechildren::-moz-tree-cell-text(duetoday, selected, focus) {
  color: HighlightText ! important;
}

.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue, selected) {
  color: red ! important;
}
.calendar-task-tree > treechildren::-moz-tree-row(overdue, selected, focus) {
  background-color: red ! important;
}
.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue, selected, focus) {
  color: HighlightText ! important;
}

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