User:Ssitter/UserChrome

New 'old' look for Sunbird 0.3a1+ and Lightning 0.1

I have played around a litte bit with my userChrome.css file to see what is possible. The result brings back the 'old' Sunbird look to Sunbird 0.3a1+ and Lightning 0.1. It is not finished yet and I'm not happe with every detail. But maybe someone has a good idea?

Preview: Month View | Week View

How to use it? Go to the "chrome" folder in your Sunbird or Thunderbird profile folder and find the "userChrome.css" file. Put the following code into that file:

/*
 * Do not remove the @namespace line -- 
 * it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*
==================================================
 MAIN view deck - contains nav buttons and views
==================================================
*/
#view-deck {
  background: #FFFFFF;
  padding: 0px;
}

/*
==================================================
 NAVIGATION buttons
==================================================
*/

calendar-navigation-buttons { 
  background: #FFFFFF;
  padding: 0px 0px 2px 0px;
}
.title-label-box button {
  background-color: transparent !important;
  font-size: 2em !important;
  font-weight:bold !important;
}

.title-label-box .title0 { /* current day/week/month button */
}
.title-label-box .title1 { /* +1/-1 day/week/month button  */
  display: none !important;
}
.title-label-box .title2 { /* +2/-2 day/week/month button  */
  display: none !important;
}

.nav-buttons[direction="next"] {/* next day/week/month arrow */
  /* display: none !important; */
}
.nav-buttons[direction="prev"] {/* prev day/week/month arrow */
  /* display: none !important; */
}

/*
==================================================
 MULTIWEEK and MONTH view 
==================================================
*/

calendar-month-view {
  background: #FFFFFF;
  padding: 2px 2px 2px 2px;
}

calendar-month-view-column-header {
  color: #3F7D91;
  background: #E7EEEC;
  font-size: 1.2em !important;
  font-weight:bold !important;
  border-left: 1px solid #3F7D91;
  border-right: 1px solid #3F7D91;
  border-top: 1px solid #3F7D91;
}

calendar-month-day-box {
  border: 1px solid #3F7D91 !important;
}
.calendar-month-day-box-even {
  background: #FFFFFF !important;
}
.calendar-month-day-box-weekend {
  background: #FFF9E7 !important;
}
.calendar-month-day-box-odd {
  background: #E7EEEC !important;
}
.calendar-month-day-box-even[selected="true"],
.calendar-month-day-box-weekend[selected="true"],
.calendar-month-day-box-odd[selected="true"] {
  background: #D5E3F2 !important;
  border: 1px solid #1D7AB5 !important;
}

calendar-month-day-box-item {
  font-size: 1.2em !important;
  padding: 1px !important;
  border: 1px solid #000000 !important;
}
.calendar-month-day-box-date-label { 
  color: #3F7D91 !important;
}

/*
==================================================
 DAY and WEEK view 
==================================================
*/

calendar-multiday-view {
  background: #FFFFFF;
  padding: 2px 2px 2px 2px;
}

/* ========== Day columns ========== */
calendar-event-column,
calendar-header-container { 
  background: #FFFFFF !important;
  border-left: 1px solid #3F7D91 !important;
  border-top: 1px solid #3F7D91 !important;
}
calendar-event-column[selected="true"],
calendar-header-container[selected="true"] { 
  background: #D5E3F2 !important;
}

/* ========== Header row (top) ========== */
.calendar-day-label-box { 
  color: #3F7D91;
  background: #E7EEEC !important;
  border-top: 1px solid #3F7D91 !important;
  border-left: 1px solid #3F7D91 !important;
}
.calendar-day-label-date {
  font-size: 1em !important;
}
.calendar-day-label-name {
  font-size: 1.4em !important;
}

/* ========== Time column (left) ========== */
.calendar-time-bar-box-odd,
.calendar-time-bar-box-even {
  color: #3F7D91;
  background: #E7EEEC !important;
  text-align: right;
  border-top: 1px solid #3F7D91 !important;
  border-left: 1px solid #3F7D91 !important;
}