panel recolor

recolor-top-bar.css

/* FIXME:
   - panel should be black and/or more subtle in :overview
   - bottom-border for panel seems transparent rather than the given color
   - white edge highlight with text-shadow and icon-shadow for panel-button
   - better shading of the panel (dark 5%) - impossible without multipoint gradients, image-bg is a hack
   - ON/OFF svg widgets. Can they be placed inside the extension dir?
   - bubble menus: separators
   - usermenu: online status dropdown still dark
   - network menu: bold labels still white
   - app menu spinner is white
   - volume slider
*/

#panel {
    background-color: #e9e9e9 !important;
    background-gradient-direction: vertical;
    background-gradient-end: #d0d0d0;
    border-bottom: 1px solid #ddd !important; /* FIXME */

/* hrm, still no multipoint gradients
    background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0)) !important;*/
}

  #panel:overview {
    background-color: #000 !important; /* FIXME */
  }

.panel-corner,
.panel-corner:active,
.panel-corner:overview,
.panel-corner:focus {
    -panel-corner-background-color: transparent !important;
    -panel-corner-border-color: transparent !important;
    -panel-corner-radius: 0 !important;
}

.panel-button {
    color: #555 !important;
    -natural-hpadding: 6px !important;
    -minimum-hpadding: 3px !important;
  }
  
  .panel-button:hover {
    color: #000 !important;
  }

  .panel-button > .system-status-icon {
    icon-shadow: #fff 0 1px 0 !important; /* FIXME */
  }

  .panel-button:hover,
  .panel-button:active,
  .panel-button:overview,
  .panel-button:focus {
    text-shadow: 0 0 0 transparent !important; /* FIXME: why can't I do none ? */
  }

  .panel-button:active,
  .panel-button:overview,
  .panel-button:focus {
     background-color: #4a90d9 !important; /* FIXME */
     color: #fff !important;
     border: none !important;
     border-image: none !important; 
     background-image: none !important; 
  }
  
  #panelUserMenu {
    padding: 0 10px 0 10px !important;
  }
  
  #appMenu {
    text-shadow: 0 0 0 transparent !important;
  }

  /* used for the app menu header only */
  .label-shadow {
      color: rgba(0,0,0,0.5);
  }

.label-shadow {
    color: rgba(255,255,255,.5) !important;
}
  .panel-button:active .label-shadow,
  .panel-button:focus .label-shadow {
    color: rgba(0,0,0,.5) !important;
  }

.popup-menu-boxpointer {
    -arrow-background-color: #e9e9e9 !important;
    -arrow-border-width: 1px !important;
    -arrow-border-color: #aaa !important;
    -arrow-border-radius: 3px !important;
    color: #000 !important;
    -arrow-base: 11px !important;
    -arrow-rise: 5px !important;
}
  .popup-menu-item:active {
    background-color: #4a90d9 !important;
    color: #fff !important;
  }

  .popup-menu-item:insensitive {
    color: #888;
  }
  
.calendar {}
  .calendar-month-label {
    color: #333 !important;
  }
  .datemenu-date-label,
  .events-day-header {
    color: #666 !important;
  }
  .calendar-day-base:active {
    color: #fff !important;
    background-color: #4a90d9 !important;
    background-image: none !important;
    border-image: none !important;
  }
  .calendar-today {
    background-color: #4a90d9 !important;
    background-image: none !important;
    border-image: none !important;
  }
  .calendar-day-base {
    color: #666 !important;
  }
    .calendar-day-base:hover {
      background-color: #666 !important;
      color: #fff !important;
    }
  .calendar-nonwork-day {
    color: #999 !important;
  }
  .events-day-dayname,
  .events-day-time {
    color: #666 !important;
  }