tests/org.eclipse.rap.rwt.themes.test/src/org/eclipse/rap/rwt/themes/test/fancy/DateTime.test.css

/*******************************************************************************
 * Copyright (c) 2010, 2012 EclipseSource and others.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *    EclipseSource - initial API and implementation
 ******************************************************************************/

/* DateTime */

DateTime {
  border: none;
  padding: 1px 2px;
  font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
  color: #4a4a4a;
  background-color: #fcfcfc;
  background-image: none;
  box-shadow: none;
}

DateTime[BORDER] {
  background-image: gradient(
    linear, left top, left bottom,
    from( #e2e2e2 ),
    color-stop( 15%, #f8f8f8 ),
    to( #fbfbfb )
  );
  box-shadow: none;
}

DateTime[BORDER]:focused {
  box-shadow: none;
}

DateTime-Calendar-Day:hover {
  background-color: #e9f3d2;
}

DateTime-Calendar-Navbar {
  background-color: #abe033;
  color: white;
  font: bold 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
  background-image: none;
}

DateTime-Calendar-PreviousMonthButton {
  background-image: url( theme/fancy/icons/lastMonth.png );
}

DateTime-Calendar-PreviousMonthButton:hover {
  background-image: url( theme/fancy/icons/lastMonth-hover.png );
}

DateTime-Calendar-NextMonthButton {
  background-image: url( theme/fancy/icons/nextMonth.png );
}

DateTime-Calendar-NextMonthButton:hover {
  background-image: url( theme/fancy/icons/nextMonth-hover.png );
}

DateTime-Calendar-PreviousYearButton {
  background-image: url( theme/fancy/icons/lastYear.png );
}

DateTime-Calendar-PreviousYearButton:hover {
  background-image: url( theme/fancy/icons/lastYear-hover.png );
}

DateTime-Calendar-NextYearButton {
  background-image: url( theme/fancy/icons/nextYear.png );
}

DateTime-Calendar-NextYearButton:hover {
  background-image: url( theme/fancy/icons/nextYear-hover.png );
}

DateTime-DownButton-Icon {
  background-image: url( theme/fancy/icons/down.png );
}

DateTime-DownButton-Icon:hover {
  background-image: url( theme/fancy/icons/down-hover.png );
}

DateTime-DownButton {
  background-color: transparent;
  background-image: gradient(
    linear, left top, left bottom,
    from( #e0e0e0 ),
    to( #ffffff )
  );
  width: 18px;
  border: none;
  border-radius: 0px 0px 2px 0px;
}

DateTime-DownButton:pressed {
  background-image: gradient(
    linear, left top, left bottom,
    from( #b0b0b0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #ffffff )
  );
}

DateTime-UpButton-Icon {
  background-image: url( theme/fancy/icons/up.png );
}

DateTime-UpButton-Icon:hover {
  background-image: url( theme/fancy/icons/up-hover.png );
}

DateTime-UpButton {
  background-color: transparent;
  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    to( #e0e0e0 )
  );
  width: 18px;
  border: none;
  border-radius: 0px 2px 0px 0px;
}

DateTime-UpButton:pressed {
  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 52%, #e0e0e0 ),
    to( #b0b0b0 )
  );
}

DateTime-DropDownButton-Icon {
  background-image: url( theme/fancy/icons/down.png );
}

DateTime-DropDownButton-Icon:hover {
  background-image: url( theme/fancy/icons/down-hover.png );
}

DateTime-DropDownButton {
  background-color: transparent;
  border: none;
  border-radius: 0px 2px 2px 0px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 48%, #f0f0f0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #cccccc )
  );
  width: 18px;
}

DateTime-Field:selected, DateTime-Calendar-Day:selected {
  background-color: #D2D2D2;
  color: #4a4a4a;
}

DateTime-Calendar-Day:selected:hover {
  background-color: #abe033;
  color: white;
}

DateTime-Calendar-Day:otherMonth {
  background-color: transparent;
  color: #808080;
}