Kendo UI Beta 1 LESS CSS Theme

kendo.lessy.css.less

/* LESS Powered Kendo theme*/

@activeColor: black;
@hoverColor: yellow;
@selectedColor: white;
@errorColor: red;
@disabledColor: gray;

@borderColor: red;
@activeBorderColor: blue;
@hoverBorderColor: orange;
@selectedBorderColor: lime;
@errorBorderColor: red;

@backColor: green;
@activeBackColor: purple;
@hoverBackColor:pink;
@selectedBackColor: tan;
@errorBackColor: brick;
@groupBackColor: violet;

@linkColor: blue;
@tooltipColor: white;

.t-widget,
.t-input
{
    border-color: @borderColor;
    background-color: #fff;
}

.t-header,
.t-grid-header,
.t-toolbar,
.t-dropdown-wrap,
.t-grouping-header,
.t-tooltip,
.t-grid-pager
{
    border-color: @borderColor;
    background:@backColor;
}

*>.t-header,
*>.t-grid-header,
*>.t-toolbar,
*>.t-dropdown-wrap,
*>.t-grouping-header,
*>.t-tooltip,
*>.t-grid-pager
{
    background: @backColor url('Kendo/gradient.png') repeat-x 0 center;
}

.t-tabstrip,
.t-tabstrip-items .t-item,
.t-menu-vertical,
.t-editor,
.t-tooltip,
.t-state-hover
{
    background-position:0 -248px;
}

*>.t-link.t-state-hover,
*>.t-dropdown-wrap .t-input,
*>.t-dropdown-wrap .t-select,
*>.t-tabstrip-items .t-item,
*>.t-tabstrip-items .t-state-hover .t-link
{
    background-image: url('Kendo/gradient.png');
    background-repeat: repeat-x;
}

.t-icon { background-image: url('Kendo/sprite.png'); }
.t-editor .t-tool-icon { background-image: url('Kendo/editor.png'); }

.t-loading,
.t-widget .t-loading { background: transparent url('Kendo/loading.gif') no-repeat 0 0; }

.t-loading-image { background-image: url('Kendo/loading-image.gif'); }
.t-loading-color { background-color: #fff; }

.t-widget,
.t-link:link,
.t-link:active,
.t-link:visited,
.t-popup,
.t-grid .t-header,
.t-tabstrip .t-content
{
    color: @linkColor;
}

.t-group
{
    background-color:@groupBackColor;
    border-color:@borderColor;
}

.t-content,
.t-editable-area
{
    border-color: @borderColor;
    background-color: #fff;
}

.t-colorpicker .t-arrow-down
{
    border-color: @borderColor;
}

.t-separator
{
    border-color: @borderColor;
    background-color: #f5f5f5;
}

.t-alt
{
    background-color: #f5f5f5;
}

.t-dropdown-wrap,
.t-toolbar,
.t-grouping-header,
.t-grid-pager,
.t-group-footer td,
.t-grid-footer,
.t-footer-template td,
.t-widget .t-status
{
    border-color: @borderColor;
    background-color: @groupBackColor;
}

.t-state-default,
.t-state-default .t-select,
.t-panelbar .t-link
{
    border-color: @borderColor;
}

.t-active-filter
{
    background-color: @activeBackColor;
}

.t-state-active,
.t-state-active:hover,
.t-header .t-state-active
{
    color: @activeColor;
    background-color: @activeBackColor;
    border-color: @activeBorderColor;
}

.t-state-active .t-select
{
    border-color: @borderColor;
}

.t-state-hover,
.t-state-hover:hover,
.t-state-focused,
.t-marquee
{
    color: @hoverColor;
    background-color: @hoverBackColor;
    border-color: @hoverBorderColor;
}

.t-state-hover .t-select
{
    border-color: @hoverBorderColor;
}

.t-button:hover
{
    border-color:@hoverBorderColor;
    background-color: @hoverBackColor;
}

.t-state-selected,
.t-button:active,
.t-panelbar .t-state-selected
{
    color: @selectedColor;
    background-color: @selectedBackColor;
    border-color: @selectedBorderColor;
}

.t-state-error
{
    border-color: @errorBorderColor;
    background-color: @errorBackColor;
    color:@errorColor;
}

.t-button
{
    outline: 0;
    color: @linkColor;
    padding: 0 6px 1px;
}

.t-button,
button.t-button.t-state-disabled:hover,
a.t-button.t-state-disabled:hover,
.t-state-disabled .t-button:hover
{
    border-color: @borderColor;
    background: @backColor;
}

*>.t-button,
*>button.t-button.t-state-disabled:hover,
*>a.t-button.t-state-disabled:hover,
*>.t-state-disabled .t-button:hover
{
    background: @backColor url('Kendo/gradient.png') repeat-x 0 center;
}

.t-state-disabled,
.t-state-disabled .t-link,
.t-state-disabled .t-button
{
    color: @disabledColor;
}

.t-widget .t-status
{
    background-color:transparent;
}

.t-grid-header-wrap,
.t-grid-footer-wrap
{
    border-color: @borderColor;
}

.t-grid td
{
    border-color: @borderColor;
}

.t-grouping-row td,
td.t-group-cell
{
    background:@groupBackColor;
}

.t-grouping-header .t-group-indicator
{
    border-color: @borderColor;
}

.t-grouping-dropclue
{
    background: url('Kendo/sprite.png') no-repeat -48px -288px;
}

.t-treeview .t-drop-hint
{
    background-image: url('Kendo/sprite.png');
    background-position: 0 -358px;
}

.t-panelbar .t-link,
.t-panelbar .t-group,
.t-panelbar .t-content
{
    border-color: @borderColor;
}

.t-calendar th
{
    border-color: @borderColor;
    background-color:@groupBackColor;
}

.t-other-month .t-link
{
    color: #8b9097;
}

/* DropDown */

.t-combobox,
.t-dropdown
{
    background: none;
}

.t-button,
.t-dropdown-wrap
{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.t-dropdown-wrap .t-input
{
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.t-dropdown-wrap .t-select
{
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

.t-dropdown-wrap .t-input,
.t-dropdown-wrap .t-select,
.t-tabstrip-items .t-state-hover .t-link
{
    background-position: 0 -539px;
}

.t-tabstrip-items .t-state-hover .t-link
{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

/* Slider */

.t-slider .t-draghandle
{
	background-image: url('Kendo/sprite.png');
	color: #8b9097;
}

.t-slider .t-slider-track .t-state-active
{
	background-position: 0 -432px;
    background-color: transparent;
    border: 0;
}

.t-slider-track
{
	border-color:@borderColor;
}

.t-slider-horizontal .t-slider-track,
.t-slider-horizontal .t-slider-selection
{
	background-image: url('Kendo/sprite.png');
}

.t-slider-vertical .t-slider-track,
.t-slider-vertical .t-slider-selection
{
	background-image: url('Kendo/sprite-vertical.png');
}

.t-slider-horizontal .t-tick
{
    background-image:url('Kendo/slider-h.gif');
}

.t-slider-vertical .t-tick
{
    background-image:url('Kendo/slider-v.gif');
}

/* Tooltip */

.t-tooltip
{
    border-width:2px;
    border-color:@selectedBackColor;
    background-color:@selectedBackColor;
    color:@tooltipColor;
}

.t-callout
{
	background-image: url('Kendo/sprite.png');
}

.t-callout-n,
.t-callout-s
{
	width: 10px;
	height: 5px;
}

.t-callout-w,
.t-callout-e
{
	width: 5px;
	height: 10px;
}

.t-callout-n
{
	top: -7px;
	left: 50%;
	margin-left: -5px;
	background-position: -64px -368px;
}

.t-callout-w
{
	left: -7px;
	top: 50%;
	margin-top: -5px;
	background-position: -64px -384px;
}

.t-callout-s
{
	top: 100%;
	left: 50%;
	margin-left: -5px;
	margin-top: 2px;
	background-position: -64px -400px;
}

.t-callout-e
{
	left: 100%;
	top: 50%;
	margin-top: -5px;
	margin-left: 2px;
	background-position: -64px -416px;
}

/* Splitter */

.t-splitbar
{
    border-color: @borderColor;
    background-color: @backColor;
}

.t-splitbar-vertical,
.t-ghost-splitbar-vertical
{
    background-image: url('Kendo/sprite.png');
}

.t-splitbar-horizontal,
.t-ghost-splitbar-horizontal
{
    background-image: url('Kendo/sprite-vertical.png');
}

/* Upload */

.t-dropzone-active,
.t-upload-files
{
    border-color: @borderColor;
}

.t-dropzone-hovered,
.t-upload-files
{
    background-color: @groupBackColor;    
}

.t-dropzone em
{
    color: #878787;
}

.t-progress,
.t-progress-status
{
    background-image: url('Kendo/sprite.png');
}

.t-progress
{
    background-position: 0 -464px;
    border-color: @borderColor;
}

.t-progress-status
{
    background-position: 0 -472px;
    border-color: @hoverBorderColor transparent;
}

/* ImageBrowser */

.t-tiles
{
    border-color: @borderColor;
    background: #fff;
}

.t-tile
{
    border-color: #fff;
    background-position:0 100px;
    background-repeat:repeat-x;
}

*>.t-tile
{
    background-image:url('Kendo/gradient.png');
}

.t-tiles li.t-state-hover
{
    border-color: @hoverBorderColor;
    background-position: 0 0;
}

.t-tiles li.t-state-selected
{
    border-color: @selectedBorderColor;
    background-position: 0 0;
}

.t-tile .t-folder
{
    background-image: url('Kendo/imagebrowser.png');
}

.t-tile-empty strong
{
    color: #aaa;
}