Updating 0.3 Feathers to be 0.4 Compatible

Changes

The playlist element has been renamed to sb-playlist. You'll need to make this change in the Window Chrome and Playlist section. Be careful with find and replace though, as the .sb-playlist-tree class hasn't changed.

playlist,
sb-playlist,

New Styles

The most important addition in 0.4 is the display pane functionality. Add rules similar to those below to make sure display panes look good in your feathers.

listheader,
tree treecol
tree treecol,
.sb-displaypane-header
{
     background-color: #313131 !important;
     border-right: 1px solid #202220 !important; /** Button Shadow */

	 .
	 .
	 .

treecolpicker
treecolpicker,
.sb-displaypane-menubutton
{
     border-top: 1px solid #474948; /** Rubber Highlight */
     background-color: #313131 !important; /* same as the main window */
  
	 .
	 .
	 .

/*********************************************************************************
 DISPLAY PANE
 ********************************************************************************/
  
  .sb-displaypane-header,
  .sb-displaypane-menubutton
  {
	  border-bottom: 1px solid #202220; /** Button Shadow */
  }
  
  #displaypane_right_sidebar
  {
	  border-top: 1px solid #0f100f; /** Groove */
	  border-left: 1px solid #202220; /** Button Shadow */
	  border-right: 1px solid #202220; /** Button Shadow */
	  border-bottom: 1px solid #474948; /** Rubber Highlight */
  }

We've also added some popup blocker styles that you may want to copy.

/* popup blocker icon in the status bar */
#page-report-button[blocked] > image {
	border:1px solid transparent;
	-moz-border-radius:2px;
}
#page-report-button[blocked]:hover > image {
	border-top:1px solid #797f76; /** Button Highlight */
	border-right:1px solid #202220; /** Button Shadow */
	border-bottom:1px solid #202220; /** Button Shadow */
	border-left:1px solid #202220; /** Button Shadow */
}
#page-report-button[blocked]:active > image {
	border-top:1px solid #202220; /** Button Shadow */
	border-right:1px solid #797f76; /** Button Highlight */
	border-bottom:1px solid #797f76; /** Button Highlight */
	border-left:1px solid #797f76; /** Button Highlight */
}

As well as some new rules to make bottom tabs look decent.

/** Bottom tabs **/
.tab-bottom {
	border-top: 1px solid #313131 !important;
	border-right: 1px solid #474948 !important; /** Rubber Highlight */
	border-bottom: 1px solid #474948 !important; /** Rubber Highlight */
	border-left: 1px solid #474948 !important; /** Rubber Highlight */
	background-color: #313131;
}
.tab-bottom:not([selected="true"]) {
	border-top: 1px solid #313131 !important;
	border-right: 1px solid #474948 !important; /** Rubber Highlight */
	border-bottom: 1px solid #474948 !important; /** Rubber Highlight */
	border-left: 1px solid #474948 !important; /** Rubber Highlight */
	background-color: #313131;
}
.tab-bottom:hover:not([selected="true"]) {
	border-top: 1px solid #313131 !important;
	border-right: 1px solid #202220 !important; /** Button Shadow */
	border-bottom: 1px solid #202220 !important; /** Button Shadow */
	border-left: 1px solid #202220 !important; /** Button Shadow */
	background-color: #313131;
}
.tab-bottom[selected="true"] {
	border-top: 1px solid #313131 !important;
	border-right: 1px solid #797f76 !important; /** Button Highlight */
	border-bottom: 1px solid #474948 !important; /** Rubber Highlight */
	border-left: 1px solid #797f76 !important; /** Button Highlight */
	background-color: #313131;
}

/** General tab styles **/

Keisuke added some new rules to better style the preferences window. You don't have to copy them, but if you are unhappy with the way the prefs look give it a try.

#viewGroup
#viewGroup,
#progressBox
{
	background-color: #0f100f !important; /** Groove */
	border: 1px solid !important;
	.
	.
	.
}
  
#viewGroup radio:hover {
	background-color: #B3BAAC !important; /** Light Color 1 */
	background:transparent !important;
}
   
#viewGroup radio:hover > label {
	color: #feffff !important;
}

#viewGroup radio[selected="true"] {
	background-color: #8A8F84 !important; /** Light Color 2 */
	color: #B3BAAC !important; 
}

#viewGroup radio[selected="true"] > label /** In Preferences this inverts the selected label color under Add-ons */
{
	color: #0f100f !important; /** Groove */
}

.
.
.

/* Pane Selector */

prefwindow > .paneSelector,
#viewGroup
{
	background-color: #1b1d1b; /** Rubber Shadow*/
	border-bottom: 2px solid !important;
	-moz-border-bottom-colors: #474948 /** Rubber Highlight */
					#1b1d1b /** Rubber Shadow */
					!important;
}
prefwindow > .paneSelector > radio,
#viewGroup > radio
{
	border-top:1px solid #1b1d1b !important; /** Rubber Shadow */
}
prefwindow > .paneSelector > radio[selected="true"],
#viewGroup > radio[selected="true"]
{
	background-color:#313131 !important; /** color of the Main Window*/
	border-top:1px solid #474948 !important;  /** Rubber Highlight */
}
prefwindow > .paneSelector > radio > .paneButtonLabel,
#viewGroup > radio > .viewButtonLabel
{
	color: #B3BAAC !important; /** Light Color 1 */
}
prefwindow > .paneSelector > radio[selected="true"] > .paneButtonLabel,
#viewGroup > radio[selected="true"] > .viewButtonLabel
{
	color: #feffff !important; /** Light Color Brightest */
}