@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
1,890 lines (1,547 loc) • 61.7 kB
text/less
/*!
* Copyright 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// Widget
@widget-background-color: @background;
@widget-text-color: @normal-text-color;
@widget-border-color: darken(@background, 12%);
@widget-gradient: null;
@widget-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.2);
// Button
@button-text-color: lighten(@hover-text-color, 8%);
@button-background-color: @normal-background;
@button-border-color: lighten(@hover-text-color, 8%);
@button-gradient: null;
@button-shadow: null;
@button-hover-text-color: @button-text-color;
@button-hover-background-color: @hover-background;
@button-hover-border-color: @button-border-color;
@button-hover-gradient: null;
@button-hover-shadow: null;
@button-active-background: @accent-hover-background;
@button-active-text-color: @inversed-text-color;
@button-active-border-color: @selected-background;
@button-active-gradient: null;
@button-active-shadow: null;
@button-focused-border-color: @accent;
@button-focused-shadow: null;
@button-focused-active-shadow: null;
// Primary button
@primary-text-color: @inversed-text-color;
@primary-background-color: @accent;
@primary-border-color: @accent;
@primary-gradient: null;
@primary-shadow: null;
@primary-hover-text-color: @primary-text-color;
@primary-hover-background-color: lighten(@accent, 4%);
@primary-hover-border-color: @primary-hover-background-color;
@primary-hover-gradient: null;
@primary-hover-shadow: null;
@primary-active-text-color: @primary-text-color;
@primary-active-background-color: @accent-hover-background;
@primary-active-border-color: @accent-hover-background;
@primary-active-gradient: null;
@primary-active-shadow: null;
@primary-focused-border-color: multiply(@accent, #dbdbdb);
@primary-focused-shadow: null;
@primary-focused-active-shadow: null;
@primary-disabled-text-color: @selected-text-color;
@primary-disabled-background-color: lighten(@accent, 18%);
@primary-disabled-border-color: lighten(@accent, 18%);
@primary-disabled-gradient: null;
// Input
@input-text: @normal-text-color;
@input-bg: @background;
@input-border: darken(@normal-background, 12%);
@input-shadow: null;
@input-hovered-text: @input-text;
@input-hovered-bg: @input-bg;
@input-hovered-border: @input-border;
@input-hovered-shadow: null;
@input-focused-text: @input-text;
@input-focused-bg: @input-bg;
@input-focused-border: lighten(@hover-text-color, 8%);
@input-focused-shadow: null;
@sprite-image: url('@{image-folder}/sprite.png');
@inversed-text-color: contrast(@accent);
@accent-hover-background: multiply(@accent, #e5e5e5);
@link-text-color: #00acc1;
@popups-shadow: 0 0px 6px 1px rgba(0, 0, 0, 0.2);
@tabs-normal-bg: #081421;
@tabs-normal-gradient: "#303553 0%, #072138 100%";
@tabs-hover-bg: #081421;
@tabs-hover-gradient: "#202333 0%, #081421 100%";
@secondary-border-color: darken(@base, 12%);
@secondary-widget-background-color: darken(@widget-background-color, 2%);
@disabled-text-color: darken(@base, 23%);
@disabled-border-color: darken(@base, 6%);
@disabled-background-color: @widget-background-color;
@disabled-gradient: none;
@header-background-color: @accent;
@header-text-color: contrast(@accent);
@inputs-border-radius: 3px;
@input-validation-error: darken(@error, 25%);
@column-highlight-background-color: darken(@background, 4%);
@scheduler-nonwork-background-color: darken(@background, 2%);
@notification-border-radius: @border-radius;
@notification-info-bg: @info;
@notification-info-text: contrast(@info);
@notification-info-border: @info;
@notification-success-bg: @success;
@notification-success-text: contrast(@success);
@notification-success-border: @success;
@notification-warning-bg: @warning;
@notification-warning-text: contrast(@warning);
@notification-warning-border: @warning;
@notification-error-bg: @error;
@notification-error-text: contrast(@error);
@notification-error-border: @error;
@notification-gradient: null;
@cell-border-color: transparent;
@focused-shadow: none;
@default-icon-opacity: 1;
@hover-background-color: @hover-background;
@hover-border-color: @hover-background;
// Link
@link-text: @link-text-color;
@link-hovered-text: contrast(@base, darken(@link-text, 4), lighten(@link-text, 4), .5);
// component
@component-bg: @widget-background-color;
@component-text: @widget-text-color;
@component-border: @widget-border-color;
// Toolbar
@toolbar-bg: @widget-background-color;
@toolbar-text: @normal-text-color;
@toolbar-border: @widget-border-color;
@toolbar-gradient: @widget-gradient;
@toolbar-shadow: null;
// Cards
@card-bg: @component-bg;
@card-text: @component-text;
@card-border: @component-border;
@card-header-bg: @header-background-color;
@card-header-text: contrast(@card-header-bg);
@card-header-border: @card-border;
@card-footer-bg: @header-background-color;
@card-footer-text: @header-text-color;
@card-footer-border: @card-border;
@card-primary: @accent;
@card-primary-bg: mix( white, @card-primary, 70%);
@card-primary-text: mix(black, @card-primary);
@card-primary-border: mix(white, @card-primary);
@card-error: darken(@error, 30%);
@card-error-bg: mix( white, @card-error, 70%);
@card-error-text: mix(black, @card-error);
@card-error-border: mix(white, @card-error);
@card-warning: darken(@warning, 30%);
@card-warning-bg: mix( white, @card-warning, 70%);
@card-warning-text: mix(black, @card-warning);
@card-warning-border: mix(white, @card-warning);
@card-success: darken(@success, 30%);
@card-success-bg: mix( white, @card-success, 70%);
@card-success-text: mix(black, @card-success);
@card-success-border: mix(white, @card-success);
@card-info: darken(@info, 30%);
@card-info-bg: mix( white, @card-info, 70%);
@card-info-text: mix(black, @card-info);
@card-info-border: mix(white, @card-info);
//TileLayout
@tilelayout-bg: darken(@background, 4%);
@tilelayout-hint-bg: rgba(255, 255, 255, .2);
@tilelayout-hint-border: @component-border;
// Chat
@chat-bg: @component-bg;
@chat-text: @component-text;
@chat-border: @component-border;
@chat-bubble-bg: @button-background-color;
@chat-bubble-text: @button-text-color;
@chat-bubble-border: @chat-bubble-bg;
@chat-alt-bubble-bg: @accent;
@chat-alt-bubble-text: contrast(@accent);
@chat-alt-bubble-border: @chat-alt-bubble-bg;
@chat-quick-reply-color: @accent;
// Grid
@grid-bg: @component-bg;
@grid-text: @component-text;
@grid-border: @component-border;
@grid-header-bg: @secondary-widget-background-color;
@grid-header-text: lighten(@hover-text-color, 8%);
@grid-header-border: @grid-border;
@grid-header-gradient: null;
@grid-alt-bg: @grid-bg;
@grid-alt-text: @grid-text;
@grid-alt-border: @grid-border;
@grid-hover-bg: @hover-background;
@grid-hover-text: @grid-text;
@grid-hover-border: @grid-border;
@grid-hover-gradient: null;
@grid-selected-bg: lighten(@info, 22%);
@grid-selected-text: @grid-text;
@grid-selected-border: @grid-border;
@grid-selected-gradient: null;
// Calendar
@calendar-bg: @component-bg;
@calendar-text: @component-text;
@calendar-border: @component-border;
@calendar-header-bg: @header-background-color;
@calendar-header-text: @header-text-color;
@calendar-header-border: @calendar-border;
@calendar-header-gradient: none;
@calendar-header-cell-bg: @calendar-bg;
@calendar-header-cell-text: #9ca3a6;
@calendar-header-cell-border: @calendar-border;
@calendar-week-cell-bg: contrast(@calendar-bg, lighten(@calendar-bg, 4), darken(@calendar-bg, 4), .5);
@calendar-week-cell-text: @calendar-header-cell-text;
@calendar-week-cell-border: @calendar-header-cell-border;
@calendar-weekend-cell-bg: transparent;
@calendar-weekend-cell-text: null;
@calendar-weekend-cell-border: null;
@calendar-othermonth-cell-bg: null;
@calendar-othermonth-cell-text: @disabled-text-color;
@calendar-othermonth-cell-border: null;
@calendar-cell-hovered-bg: @button-hover-background-color;
@calendar-cell-hovered-text: @button-hover-text-color;
@calendar-cell-hovered-border: @button-hover-border-color;
@calendar-cell-selected-bg: lighten(@info, 22%);
@calendar-cell-selected-text: @link-text;
@calendar-cell-selected-border: lighten(@info, 22%);
@calendar-cell-focused-shadow: inset 0 0 0 1px lighten(@hover-text-color, 8%);
// Timepicker
@time-list-highlight-color: @widget-border-color;
@time-list-focused-bg: rgba(contrast(@background), .04);
@time-list-title-focus: contrast(@background);
// Window
@window-border-radius: @border-radius;
@window-action-border-radius: @border-radius;
@window-bg: @component-bg;
@window-text: @component-text;
@window-border: @component-border;
@window-shadow: 1px 1px 7px 1px rgba(contrast(@window-bg), .12);
@window-focus-shadow: 1px 1px 7px 1px rgba(contrast(@window-bg), .25);
@window-titlebar-bg: @header-background-color;
@window-titlebar-text: @header-text-color;
@window-titlebar-border: @secondary-border-color;
@window-titlebar-gradient: false;
// Dialog
// Tooltip
@tooltip-border-radius: @inputs-border-radius;
@tooltip-shadow: @widget-shadow;
@tooltip-bg: @widget-background-color;
@tooltip-text: @normal-text-color;
@tooltip-border: @widget-border-color;
// ScrollView
@scrollview-pagebutton-bg: @button-background-color;
@scrollview-pagebutton-border: @button-border-color;
@scrollview-pagebutton-primary-bg: @primary-background-color;
@scrollview-pagebutton-primary-border: @primary-border-color;
@scrollview-pagebutton-shadow: @button-shadow;
@scrollview-navigation-color: @selected-text-color;
@scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px;
@scrollview-navigation-background: rgba(0, 0, 0, 0);
@scrollview-navigation-default-opacity: .7;
@scrollview-navigation-hover-opacity: 1;
@scrollview-navigation-hover-span-bg: transparent;
// Switch
@switch-container-shadow: null;
@switch-container-hovered-shadow: null;
@switch-container-focused-shadow: null;
@switch-on-bg: @normal-background;
@switch-on-text: @primary-background-color;
@switch-on-border: darken(@base, 12%);
@switch-on-gradient: null;
@switch-on-shadow: null;
@switch-on-focused-shadow: null;
@switch-on-focused-bg: @switch-on-bg;
@switch-on-focused-text: @switch-on-text;
@switch-on-focused-border: @button-border-color;
@switch-on-focused-gradient: @switch-on-gradient;
@switch-on-hovered-bg: @switch-on-bg;
@switch-on-hovered-text: @switch-on-text;
@switch-on-hovered-border: @switch-on-border;
@switch-on-hovered-gradient: null;
@switch-on-handle-bg: @primary-background-color;
@switch-on-handle-text: @switch-on-text;
@switch-on-handle-border: @primary-border-color;
@switch-on-handle-gradient: @primary-gradient;
@switch-on-handle-shadow: null;
@switch-on-handle-focused-bg: @switch-on-handle-bg;
@switch-on-handle-focused-text: @switch-on-handle-text;
@switch-on-handle-focused-border: multiply(@primary-background-color, #e5e5e5);
@switch-on-handle-focused-gradient: @switch-on-handle-gradient;
@switch-on-handle-hovered-bg: @switch-on-handle-focused-border;
@switch-on-handle-hovered-text: @switch-on-text;
@switch-on-handle-hovered-border: @switch-on-handle-focused-border;
@switch-on-handle-hovered-gradient: @primary-hover-gradient;
@switch-off-bg: @switch-on-bg;
@switch-off-text: @normal-text-color;
@switch-off-border: @switch-on-border;
@switch-off-gradient: null;
@switch-off-shadow: null;
@switch-off-focused-shadow: @switch-on-focused-shadow;
@switch-off-focused-bg: @switch-off-bg;
@switch-off-focused-text: @switch-off-text;
@switch-off-focused-border: @button-border-color;
@switch-off-focused-gradient: @switch-off-gradient;
@switch-off-hovered-bg: @switch-off-bg;
@switch-off-hovered-text: @switch-off-text;
@switch-off-hovered-border: @switch-on-hovered-border;
@switch-off-hovered-gradient: null;
@switch-off-handle-bg: @button-background-color;
@switch-off-handle-text: @switch-off-text;
@switch-off-handle-border: @button-border-color;
@switch-off-handle-gradient: @button-gradient;
@switch-off-handle-shadow: null;
@switch-off-handle-focused-bg: @switch-off-handle-bg;
@switch-off-handle-focused-text: @switch-off-handle-text;
@switch-off-handle-focused-border: @button-focused-border-color;
@switch-off-handle-focused-gradient: @switch-off-handle-gradient;
@switch-off-handle-hovered-bg: @button-hover-background-color;
@switch-off-handle-hovered-text: @switch-off-text;
@switch-off-handle-hovered-border: @button-hover-border-color;
@switch-off-handle-hovered-gradient: @button-hover-gradient;
// PDF viewer
@pdf-viewer-bg: null;
@pdf-viewer-text: null;
@pdf-viewer-border: null;
@pdf-viewer-canvas-bg: @chat-bg;
@pdf-viewer-canvas-text: null;
@pdf-viewer-canvas-border: null;
@pdf-viewer-page-bg: white;
@pdf-viewer-page-text: @component-text;
@pdf-viewer-page-border: @component-border;
@pdf-viewer-page-shadow: 0 0 15px @pdf-viewer-page-border;
@pdf-viewer-toolbar-button-bg: @button-text-color;
@pdf-viewer-search-highlight-bg: darken(@background, 70%);
// Adaptive Common
@adaptive-content-bg: darken(@background, 2%);
@adaptive-content-text: @accent;
@adaptive-menu-bg: @accent;
@adaptive-menu-text: @selected-text-color;
@adaptive-menu-clear-text: @accent;
@adaptive-menu-item-border: darken(@background, 12%);
@adaptive-menu-title-text: @normal-text-color;
// Adaptive Grid
@adaptive-grid-sort-text: @accent;
// Adaptive Scheduler
@adaptive-scheduler-current-text: @normal-text-color;
@adaptive-scheduler-base-text: inherit;
// Drawer
@drawer-text: @widget-text-color;
@drawer-bg: @widget-background-color;
@drawer-border: @widget-border-color;
@drawer-scrollbar-color: rgba(156, 156, 156, 0.7);
@drawer-scrollbar-bg: #dedede;
@drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1);
@drawer-hovered-text: @hover-text-color;
@drawer-hovered-bg: @hover-background;
@drawer-hovered-gradient: @hover-gradient;
@drawer-focused-bg: @drawer-bg;
@drawer-focused-shadow: inset 0 0 0 1px @accent;
@drawer-selected-text: @selected-text-color;
@drawer-selected-bg: @selected-background;
@drawer-selected-hover-bg: contrast(@background, lighten(@selected-background, 5%), darken(@selected-background, 5%), 0.5);
@drawer-selected-hover-text: @selected-text-color;
// Rating
@rating-icon-text: @widget-border-color;
@rating-icon-selected-text: @accent;
@rating-icon-hover-text: @accent;
@rating-icon-focused-text: @accent;
@rating-icon-focused-shadow: 0 2px 3.6px rgba(0, 0, 0, .1);
@rating-icon-focused-selected-shadow: 0 2px 3.6px fade(@accent, 50);
// Spreadsheet
@spreadsheet-insert-image-dialog-preview-overlay: inset 0 0 0 2000px rgba(0,0,0, 0.5);
@spreadsheet-insert-image-dialog-hovered-text: #fff;
@spreadsheet-drawing-handle-bg: @spreadsheet-selection-border;
@spreadsheet-drawing-handle-border-color: #fff;
@spreadsheet-drawing-handle-border-radius: 50%;
@spreadsheet-drawing-handle-outline: @spreadsheet-selection-border;
@spreadsheet-drawing-anchor-bg: @spreadsheet-selection-background;
// Filter
@filter-preview-field-text: @accent;
// Timeline
@timeline-track-arrow-disabled-text: @disabled-text-color;
@timeline-track-arrow-disabled-bg: @disabled-background-color;
@timeline-track-arrow-disabled-border: @disabled-border-color;
@timeline-track-bg: @button-background-color;
@timeline-track-border-color: @button-border-color;
@timeline-flag-background: @accent;
@timeline-flag-text: contrast(@accent);
@timeline-circle-color: @accent;
// Breadcrumb
@breadcrumb-focused-shadow: @focused-shadow;
@breadcrumb-link-text: @link-text;
@breadcrumb-link-bg: transparent;
@breadcrumb-link-border: transparent;
@breadcrumb-link-hovered-text: @link-hovered-text;
@breadcrumb-link-hovered-bg: rgba(0,0,0, 0.08);
@breadcrumb-link-hovered-border: transparent;
@breadcrumb-link-focused-text: @link-text;
@breadcrumb-link-focused-bg: false;
@breadcrumb-link-focused-border: false;
@breadcrumb-link-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
@breadcrumb-root-link-text: @button-text-color;
@breadcrumb-root-link-bg: false;
@breadcrumb-root-link-border: false;
@breadcrumb-root-link-hovered-text: false;
@breadcrumb-root-link-hovered-bg: @breadcrumb-link-hovered-bg;
@breadcrumb-root-link-hovered-border: false;
@breadcrumb-root-link-focused-text: false;
@breadcrumb-root-link-focused-bg: false;
@breadcrumb-root-link-focused-border: false;
@breadcrumb-root-link-focused-shadow: @breadcrumb-link-focused-shadow;
// Listgroup
@listgroup-border-radius: @border-radius;
@listgroup-bg: @component-bg;
@listgroup-text: @component-text;
@listgroup-border: @component-border;
// Badge
@badge-secondary-bg: darken(@normal-background, 5%);
@badge-secondary-text: @normal-text-color;
@badge-secondary-border: @badge-secondary-bg;
@badge-primary-bg: @primary-background-color;
@badge-primary-text: @primary-text-color;
@badge-primary-border: @badge-primary-bg;
@badge-info-bg: darken(@info, 30%);
@badge-info-text: contrast( @badge-info-bg );
@badge-info-border: @badge-info-bg;
@badge-success-bg: darken(@success, 30%);
@badge-success-text: contrast( @badge-success-bg );
@badge-success-border: @badge-success-bg;
@badge-warning-bg: darken(@warning, 30%);
@badge-warning-text: contrast( @badge-warning-bg );
@badge-warning-border: @badge-warning-bg;
@badge-error-bg: darken(@error, 30%);
@badge-error-text: contrast( @badge-error-bg );
@badge-error-border: @badge-error-bg;
//Checkboxes
@checkbox-icon-size: 12px;
// @checkbox-size: @icon-size;
@checkbox-radius: @border-radius;
@checkbox-border-width: 1px;
// @checkbox-line-height: (@checkbox-size + @checkbox-border-width);
@checkbox-bg: @input-bg;
@checkbox-text: @input-text;
@checkbox-border: @input-border;
@checkbox-hovered-bg: @checkbox-bg;
@checkbox-hovered-text: @accent;
@checkbox-hovered-border: @input-hovered-border;
@checkbox-checked-bg: @accent;
@checkbox-checked-text: @checkbox-bg;
@checkbox-checked-border: @accent;
@checkbox-indeterminate-bg: @checkbox-bg;
@checkbox-indeterminate-text: @checkbox-checked-bg;
@checkbox-indeterminate-border: @checkbox-border;
@checkbox-focused-border: @checkbox-hovered-border;
@checkbox-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .06);
@checkbox-focused-checked-border: @checkbox-checked-border;
@checkbox-focused-checked-shadow: 0 0 0 2px rgba(@accent, .3);
@checkbox-disabled-bg: null;
@checkbox-disabled-text: null;
@checkbox-disabled-border: null;
@checkbox-disabled-checked-bg: null;
@checkbox-disabled-checked-text: null;
@checkbox-disabled-checked-border: null;
@checkbox-invalid-bg: null;
@checkbox-invalid-text: null;
@checkbox-invalid-border: @checkbox-border;
//Radio Buttons
@radio-icon-size: 12px;
// @radio-size: @icon-size;
@radio-radius: 50%;
@radio-border-width: 1px;
// @radio-line-height: calc(@radio-size + @radio-border-width);
@radio-bg: @checkbox-bg;
@radio-text: @checkbox-text;
@radio-border: @checkbox-border;
@radio-hovered-bg: @checkbox-hovered-bg;
@radio-hovered-text: @checkbox-hovered-text;
@radio-hovered-border: @checkbox-hovered-border;
@radio-checked-bg: @checkbox-checked-bg;
@radio-checked-text: @checkbox-checked-text;
@radio-checked-border: @checkbox-checked-border;
@radio-indeterminate-bg: @radio-checked-bg;
@radio-indeterminate-text: @radio-checked-text;
@radio-indeterminate-border: @radio-checked-border;
@radio-focused-border: @checkbox-hovered-border;
@radio-focused-shadow: @checkbox-focused-shadow;
@radio-focused-checked-border: @checkbox-checked-border;
@radio-focused-checked-shadow: @checkbox-focused-checked-shadow;
@radio-disabled-bg: null;
@radio-disabled-text: null;
@radio-disabled-border: null;
@radio-disabled-checked-bg: null;
@radio-disabled-checked-text: null;
@radio-disabled-checked-border: null;
// FileManager
@filemanager-bg: false;
@filemanager-text: false;
@filemanager-border: false;
@filemanager-toolbar-bg: false;
@filemanager-toolbar-text: false;
@filemanager-toolbar-border: @widget-border-color;
@filemanager-navigation-bg: false;
@filemanager-navigation-text: false;
@filemanager-navigation-border: @widget-border-color;
@filemanager-breadcrumb-bg: @base;
@filemanager-breadcrumb-text: false;
@filemanager-breadcrumb-border: @widget-border-color;
@filemanager-listview-bg: false;
@filemanager-listview-text: false;
@filemanager-listview-border: false;
@filemanager-listview-item-bg: false;
@filemanager-listview-item-text: false;
@filemanager-listview-item-border: false;
@filemanager-listview-item-icon-bg: false;
@filemanager-listview-item-icon-text: mix(@normal-text-color, @base, 41.5%);
@filemanager-listview-item-icon-border: false;
@filemanager-listview-item-icon-selected-bg: false;
@filemanager-listview-item-icon-selected-text: @widget-text-color;
@filemanager-listview-item-icon-selected-border: false;
@filemanager-grid-bg: false;
@filemanager-grid-text: false;
@filemanager-grid-border: false;
@filemanager-preview-bg: false;
@filemanager-preview-text: false;
@filemanager-preview-border: @widget-border-color;
@filemanager-preview-icon-bg: false;
@filemanager-preview-icon-text: mix(@normal-text-color, @base, 41.5%);
@filemanager-preview-icon-border: false;
@filemanager-drag-hint-bg: @accent;
@filemanager-drag-hint-text: contrast(@filemanager-drag-hint-bg);
@filemanager-drag-hint-border: false;
@filemanager-drag-hint-icon-bg: false;
@filemanager-drag-hint-icon-text: contrast(@filemanager-drag-hint-bg);
@filemanager-drag-hint-icon-border: false;
@filemanager-view-dropzone-hovered-text: inherit;
@filemanager-view-dropzone-hovered-bg: inherit;
@filemanager-view-dropzone-hovered-border: false;
// Stepper
@stepper-bg: false;
@stepper-text: false;
@stepper-border: false;
@stepper-indicator-bg: @component-bg;
@stepper-indicator-text: @component-text;
@stepper-indicator-border: @component-border;
@stepper-indicator-hover-bg: darken( @stepper-indicator-bg, 10% );
@stepper-indicator-hover-text: false;
@stepper-indicator-hover-border: false;
@stepper-indicator-disabled-bg: @stepper-indicator-bg;
@stepper-indicator-disabled-text: mix(@stepper-indicator-text, #ffffff, 60%);
@stepper-indicator-disabled-border: @stepper-indicator-border;
@stepper-indicator-done-bg: @accent;
@stepper-indicator-done-text: contrast( @stepper-indicator-done-bg );
@stepper-indicator-done-border: @stepper-indicator-done-bg;
@stepper-indicator-done-hover-bg: darken( @stepper-indicator-done-bg, 10% );
@stepper-indicator-done-hover-text: false;
@stepper-indicator-done-hover-border: false;
@stepper-indicator-done-disabled-bg: mix( @stepper-indicator-done-bg, @component-bg, 60%);
@stepper-indicator-done-disabled-text: contrast( @stepper-indicator-done-bg );
@stepper-indicator-done-disabled-border: @stepper-indicator-done-disabled-bg;
@stepper-indicator-current-bg: @stepper-indicator-done-bg;
@stepper-indicator-current-text: @stepper-indicator-done-text;
@stepper-indicator-current-border: @stepper-indicator-done-border;
@stepper-indicator-current-hover-bg: @stepper-indicator-done-hover-bg;
@stepper-indicator-current-hover-text: @stepper-indicator-done-hover-text;
@stepper-indicator-current-hover-border: @stepper-indicator-done-hover-border;
@stepper-indicator-current-disabled-bg: @stepper-indicator-done-disabled-bg;
@stepper-indicator-current-disabled-text: @stepper-indicator-done-disabled-text;
@stepper-indicator-current-disabled-border: @stepper-indicator-done-disabled-border;
@stepper-label-text: @component-text;
@stepper-label-success-text: darken(@success, 30%);
@stepper-label-error-text: darken(@error, 30%);
@stepper-label-disabled-text: mix(@component-text, #ffffff, 60%);
// Kendo skin
@theme-name: ~"nova";
@import "common/mixins.less";
@import "mixins/gradients.less";
@import "mixins/border-radius.less";
@import "themes/type.less";
@import "themes/button.less";
@import "Default/card/_theme.less";
@import "Default/tilelayout/_theme.less";
@import "Default/chat/_theme.less";
@import "Default/calendar/_theme.less";
@import "Default/multiviewcalendar/_theme.less";
@import "Default/pdf-viewer/_theme.less";
@import "Default/scrollview/_theme.less";
@import "Default/switch/_theme.less";
@import "common/adaptive/_theme.less";
@import "Default/filter/_theme.less";
@import "Default/drawer/_theme.less";
@import "Default/rating/_theme.less";
@import "Default/timeline/_theme.less";
@import "Default/breadcrumb/_theme.less";
@import "Default/listgroup/_theme.less";
@import "Default/messagebox/_theme.less";
@import "Default/badge/_theme.less";
@import "Default/checkbox/_theme.less";
@import "Default/radio/_theme.less";
@import "Default/filemanager/_theme.less";
@import "Default/toolbar/_theme.less";
@import "Default/window/_theme.less";
@import "Default/dialog/_theme.less";
@import "Default/stepper/_theme.less";
@import "Default/forms/_theme.less";
.k-text-error {
color: @error;
}
// Main colors
.k-splitbar .k-resize-handle {
background-color: @normal-text-color;
}
.k-in,
.k-item {
border-color: transparent;
}
.k-block,
.k-widget {
background-color: @background;
}
.k-block,
.k-widget,
.k-input,
.k-group,
.k-content,
.k-header,
.k-filter-row > th,
.k-separator,
.k-autocomplete,
.k-dropdown-wrap,
.k-toolbar,
.k-group-footer td,
.k-grid-footer,
.k-footer-template td,
.k-state-default,
.k-state-disabled,
.k-grid-header,
.k-grid-header-wrap,
.k-grid-header-locked,
.k-grid-footer-locked,
.k-grid-content-locked,
.k-grid td,
.k-grid td.k-state-selected,
.k-grid-footer-wrap,
.k-grouping-header,
.k-grouping-header .k-group-indicator,
.k-panelbar > .k-item > .k-link,
.k-panel > .k-item > .k-link,
.k-panelbar .k-panel,
.k-panelbar .k-content,
.k-treemap-tile,
.k-slider-track,
.k-splitbar,
.k-dropzone-active,
.k-upload-files,
.k-popup.k-align .k-list .k-item:last-child,
.k-maskedtextbox.k-state-disabled > .k-textbox:hover,
.k-dateinput.k-state-disabled > .k-textbox:hover {
border-color: @widget-border-color;
}
.k-group,
.k-toolbar,
.k-grouping-header,
.k-group-footer td,
.k-grid-footer,
.k-footer-template td,
.k-widget .k-status,
.k-dropzone-hovered,
.k-popup {
background-color: @widget-background-color;
}
.k-mediaplayer-toolbar {
background: fade(@widget-background-color, 85%);
}
.k-header,
.k-grid-header,
.k-grouping-header,
.k-state-highlight,
.k-panelbar .k-tabstrip-items .k-item {
background-color: @accent;
border-color: @accent;
}
.k-block,
.k-widget,
.k-popup,
.k-content,
.k-toolbar,
.k-dropdown .k-input {
color: @normal-text-color;
}
.k-popup,
.k-menu .k-menu-group,
.k-grid .k-filter-options,
.k-time-popup {
.box-shadow(@popups-shadow);
}
.k-content,
.k-panelbar > li.k-item,
.k-panel > li.k-item {
background-color: @background;
}
.k-alt,
.k-separator,
.k-resource.k-alt,
.k-pivot-layout > tbody > tr:first-child > td:first-child {
background-color: @background;
}
.k-input,
.k-textbox,
.k-textarea,
.k-textbox > input,
.k-textarea > textarea,
.k-multiselect-wrap {
color: @normal-text-color;
background-color: @background;
border-color: @widget-border-color;
}
.k-input-label {
color: @input-text;
}
.k-state-selected {
background-color: fadeout(@info, 75%);
}
.k-state-focused {
box-shadow: inset 0 0 0 1px darken(@widget-border-color, 35%);
}
.k-state-hover,
.k-splitbar-horizontal-hover,
.k-splitbar-vertical-hover,
.k-list>.k-state-hover,
.k-dropdown .k-state-focused,
.k-filebrowser-dropzone {
color: @hover-text-color;
background-color: @hover-background;
border-color: @hover-background;
}
.k-state-disabled,
.k-state-disabled .k-link,
.k-dropzone em,
.k-slider .k-draghandle {
color: @disabled-text-color;
}
// Border radius
.k-block,
.k-drag-clue,
.k-touch-scrollbar,
.k-inline-block,
.k-grid .k-filter-options,
.k-grouping-header .k-group-indicator,
.k-treeview .k-in,
.k-editor-inline,
.k-slider-track,
.k-slider-selection {
border-radius: @border-radius;
}
.k-textbox,
.k-textarea,
.k-autocomplete,
.k-autocomplete .k-input,
.k-multiselect,
.k-combobox,
.k-dropdown,
.k-dropdown-wrap,
.k-datepicker,
.k-timepicker,
.k-colorpicker,
.k-datetimepicker,
.k-numerictextbox,
.k-picker-wrap,
.k-numeric-wrap,
.k-upload {
border-radius: @inputs-border-radius;
}
.k-dropdown-wrap .k-input,
.k-picker-wrap .k-input,
.k-numeric-wrap .k-input {
border-radius: @inputs-border-radius 0 0 @inputs-border-radius;
}
.k-hr {
border-color: @widget-border-color;
}
.k-rtl .k-dropdown-wrap .k-input,
.k-rtl .k-picker-wrap .k-input,
.k-rtl .k-numeric-wrap .k-input {
border-radius: 0 @inputs-border-radius @inputs-border-radius 0;
}
// Default icons opacity
.k-button .k-image,
.k-panelbar > .k-state-active > .k-header > .k-icon,
.k-panelbar > .k-state-active > .k-header .k-state-default .k-icon
{
opacity: .4;
}
.k-primary .k-icon,
.k-state-active .k-icon,
.k-button:active .k-icon,
.k-numerictextbox .k-state-selected .k-icon,
.k-multiselect-wrap .k-icon,
.k-drag-clue .k-icon,
.k-group-indicator .k-icon,
.k-pivot-toolbar .k-icon,
.k-grid-content .k-button:active .k-icon,
.k-splitbar.k-state-focused .k-icon,
.k-gantt-toolbar .k-icon,
.k-panelbar > .k-state-active > .k-header .k-state-active .k-icon {
opacity: 1;
}
.k-state-disabled .k-icon,
.k-state-disabled .k-button .k-icon,
.k-button.k-state-disabled .k-icon {
opacity: .7;
}
// Loading indicator
.k-i-loading {
background-image: url('@{image-folder}/loading.gif');
}
.k-loading-image { background-image: url('@{image-folder}/loading-image.gif'); }
.k-loading-color { background-color: @background; }
// Button
.k-button {
border-radius: @inputs-border-radius;
}
.k-mediaplayer-toolbar .k-button.k-flat {
&:active,
&.k-state-active,
&.k-state-active:hover {
color: @accent;
&:before {
opacity: 0.24;
}
}
}
.k-slider.k-mediaplayer-seekbar {
top: -14px;
}
.k-quality-list {
margin-left: -25px !important;
}
// Menu
.k-menu {
background-color: @base;
border-color: @base;
}
.k-menu {
>.k-item.k-state-hover {
color: @normal-text-color;
}
.k-popup .k-item {
color: @link-text-color;
}
.k-item > .k-state-active {
color: @selected-text-color;
background-color: @selected-background;
}
.k-state-selected.k-state-hover,
.k-menu-scroll-button:hover {
background-color: lighten(@info, 11%);
}
.k-state-hover .k-link.k-state-active {
background-color: @accent-hover-background;
}
}
// Inputs
.k-list-container {
border-color: darken(@normal-background, 12%);
background-color: @normal-background;
}
.k-dropdown,
.k-combobox,
.k-datepicker,
.k-datetimepicker,
.k-colorpicker {
background-color: @widget-background-color;
}
.k-autocomplete,
.k-picker-wrap.k-state-default,
.k-numeric-wrap.k-state-default,
.k-dropdown-wrap.k-state-default {
background-color: @normal-background;
border-color: darken(@normal-background, 12%);
}
.k-multiselect-wrap,
.k-multiselect-wrap.k-state-hover {
background-color: @widget-background-color;
border-color: darken(@normal-background, 12%);
}
.k-autocomplete.k-state-hover,
.k-picker-wrap.k-state-hover,
.k-numeric-wrap.k-state-hover,
.k-dropdown-wrap.k-state-hover {
background-color: @hover-background;
}
.k-autocomplete.k-state-focused,
.k-picker-wrap.k-state-focused,
.k-numeric-wrap.k-state-focused,
.k-dropdown-wrap.k-state-focused {
background-color: @normal-background;
border-color: lighten(@hover-text-color, 8%);
box-shadow: none;
}
.k-multiselect-wrap.k-state-focused,
.k-state-focused > .k-multiselect-wrap {
background-color: @normal-background;
border-color: lighten(@hover-text-color, 8%);
box-shadow: none;
}
.k-autocomplete.k-state-active,
.k-picker-wrap.k-state-active,
.k-numeric-wrap.k-state-active,
.k-dropdown-wrap.k-state-active {
color: @selected-text-color;
background-color: @selected-background;
border-color: @selected-background;
}
.k-multiselect-wrap.k-state-active,
.k-state-active.k-multiselect-wrap {
color: @selected-text-color;
background-color: @selected-background;
border-color: @selected-background;
}
.k-multiselect-wrap.k-state-border-up,
.k-multiselect-wrap.k-state-border-down,
.k-state-border-up > .k-multiselect-wrap,
.k-state-border-down > .k-multiselect-wrap {
border-color: @selected-background;
}
.k-textbox.k-state-disabled,
.k-textarea.k-state-disabled,
.k-state-disabled .k-picker-wrap,
.k-autocomplete.k-state-disabled,
.k-dropdown-wrap.k-state-disabled,
.k-picker-wrap.k-state-disabled,
.k-numeric-wrap.k-state-disabled {
background-color: @widget-background-color;
border-color: @disabled-border-color;
}
.k-multiselect-wrap.k-state-disabled,
.k-state-disabled > .k-multiselect-wrap {
background-color: @widget-background-color;
border-color: @disabled-border-color;
}
.k-numerictextbox .k-select,
.k-combobox .k-select,
.k-picker-wrap .k-select {
border-color: @widget-background-color;
}
.k-autocomplete.k-state-border-up,
.k-autocomplete.k-state-border-down,
.k-picker-wrap.k-state-active .k-select,
.k-numeric-wrap.k-state-active .k-select,
.k-dropdown-wrap.k-state-active .k-select {
border-color: @selected-background;
}
.k-numeric-wrap .k-link.k-state-selected,
.k-grid .k-numeric-wrap .k-link.k-state-selected {
background-color: @selected-background;
}
.k-dropdown .k-state-active .k-input {
color: @selected-text-color;
}
.k-colorpicker .k-selected-color {
background-color: @widget-background-color;
}
input.k-textbox:focus,
.k-textbox.k-state-focused {
border-color: lighten(@hover-text-color, 8%);
box-shadow: none;
}
input.k-textbox:active {
border-color: @selected-background;
}
.k-popup > .k-group-header,
.k-popup > .k-virtual-wrap > .k-group-header {
background: @selected-background;
color: @selected-text-color;
}
.k-popup .k-list .k-item {
color: @link-text-color;
}
.k-group-header + div > .k-list > .k-item.k-first:before {
border-top-color: @selected-background;
}
.k-popup .k-list .k-state-selected.k-state-focused.k-first:before {
border-top-color: multiply(@accent, #9a9a9a);
}
.k-popup .k-list .k-item > .k-group {
background: @selected-background;
color: @selected-text-color;
}
.k-popup .k-list .k-state-selected {
color: @selected-text-color;
background-color: @selected-background;
border-color: @selected-background;
}
.k-popup .k-list .k-state-focused {
border-color: darken(@widget-border-color, 27%);
box-shadow: none;
}
.k-popup .k-list .k-state-selected.k-state-focused {
border-color: multiply(@accent, #9a9a9a);
}
.k-popup .k-list .k-state-selected.k-state-hover {
background-color: multiply(@accent, #cccccc);
}
.k-multiselect-wrap {
.k-button {
color: @inversed-text-color;
background-color: @accent;
border-color: @accent;
}
}
.k-multiselect.k-state-disabled {
.k-button {
color: @primary-disabled-text-color;
background-color: @primary-disabled-background-color;
border-color: @primary-disabled-border-color;
}
}
.k-list-optionlabel {
border-color: transparent;
}
.k-nodata {
color: @disabled-text-color;
}
// Notification
@import "themes/notification.less";
// Tooltip
.k-chart-crosshair-tooltip,
.k-chart-shared-tooltip {
color: @normal-text-color;
background-color: @widget-background-color;
border-color: @widget-border-color;
.box-shadow(@widget-shadow);
}
// TreeView
.k-treeview {
.k-state-hover {
color: @normal-text-color;
}
.k-state-selected {
color: @accent;
}
}
// Splitter
.k-splitbar {
background: @widget-background-color;
border-color: @widget-background-color;
}
.k-splitbar.k-state-focused {
background-color: @selected-background;
border-color: @selected-background;
}
// PanelBar
.k-panelbar {
color: @normal-text-color;
background-color: @widget-background-color;
border-color: @widget-border-color;
}
.k-panelbar {
> .k-item .k-panel > .k-item > .k-link,
> .k-item .k-panel > .k-item .k-panel > .k-item > .k-link,
.k-panel > .k-item .k-panel .k-item > .k-link {
color: @normal-text-color;
}
.k-item > .k-link.k-header {
color: @accent;
background-color: @widget-background-color;
}
> .k-item > .k-link.k-state-hover,
> .k-item .k-panel > .k-item > .k-link.k-state-hover {
background-color: @hover-background;
}
}
// TabStrip
.k-tabstrip.k-header {
background-color: @widget-background-color;
}
.k-tabstrip-items {
.composite-background(@tabs-normal-gradient);
background-color: @tabs-normal-bg;
}
.k-tabstrip-items {
.k-item {
color: @inversed-text-color;
border-color: transparent;
}
.k-item.k-state-hover,
.k-item.k-state-selected {
border-top-color: @normal-text-color;
.composite-background(@tabs-hover-gradient);
background-color: @tabs-hover-bg;
}
}
.k-tabstrip-left > .k-tabstrip-items > .k-item.k-state-active {
border-right-color: @selected-background;
}
.k-tabstrip-right > .k-tabstrip-items > .k-item.k-state-active {
border-left-color: @selected-background;
}
.k-tabstrip-top > .k-tabstrip-items .k-item.k-state-active {
.composite-background(@tabs-hover-gradient);
border-bottom-color: @selected-background;
}
.k-tabstrip-bottom > .k-tabstrip-items > .k-item.k-state-active {
border-top-color: @selected-background;
}
// ProgressbBar
.k-progressbar {
background: darken(@widget-background-color, 20%);
border-color: darken(@widget-background-color, 20%);
}
.k-progressbar {
.k-state-selected {
background-color: @selected-background;
}
}
.k-progressbar-horizontal {
.k-state-selected {
border-top-color: @selected-background;
border-bottom-color: @selected-background;
border-left-color: darken(@normal-background, 12%);
border-right-color: darken(@normal-background, 12%);
}
.k-state-selected.k-first {
border-left-color: @selected-background;
}
.k-state-selected.k-last {
border-right-color: @selected-background;
}
}
.k-progressbar-vertical {
.k-state-selected {
border-left-color: @selected-background;
border-right-color: @selected-background;
border-top-color: darken(@normal-background, 12%);
border-bottom-color: darken(@normal-background, 12%);
}
> .k-complete {
border-top-color: @selected-background;
border-bottom-color: @selected-background;
}
.k-state-selected.k-first {
border-top-color: @selected-background;
}
.k-state-selected.k-last {
border-bottom-color: @selected-background;
}
}
// Grid
.k-grid-header,
.k-grid-header .k-header,
.k-grid-footer,
.k-grid-footer td,
.k-scheduler-agenda .k-scheduler-header {
background-color: @secondary-widget-background-color;
border-color: @widget-border-color;
}
.k-grid-header .k-header .k-link,
.k-grid-header .k-header,
.k-grid-header .k-link,
.k-grid-header .k-link:link,
.k-scheduler-agenda .k-scheduler-header,
.k-scheduler-agendaview .k-scheduler-datecolumn {
color: lighten(@hover-text-color, 8%);
}
.k-grid .k-alt {
background-color: @widget-background-color;
}
.k-grid tr:hover {
background-color: @hover-background;
}
.k-grid-header th.k-state-focused,
.k-grid td.k-state-focused {
box-shadow: inset 0 0 0 1px darken(@widget-border-color, 27%);
}
.k-grid .k-button {
color: @accent;
border-color: transparent;
background-color: @normal-background;
}
.k-grid .k-button-icontext .k-icon,
.k-edit-form-container .k-edit-buttons .k-button-icontext .k-icon {
display: none;
}
.k-edit-form-container .k-edit-buttons {
background-color: @background;
}
.k-grid-toolbar .k-button:hover {
border-color: @hover-background;
}
.k-grid .k-button-icontext {
background-color: transparent;
}
.k-grid .k-primary {
color: @inversed-text-color;
background-color: @accent;
}
.k-grid .k-button:active,
.k-grid .k-button-icontext:active {
color: @inversed-text-color;
background-color: @selected-background;
border-color: @selected-background;
}
.k-header.k-grid-toolbar {
background-color: @widget-background-color;
border-color: @widget-border-color;
}
.k-grid .k-grouping-header {
color: rgba(256, 256, 256, 0.5);
}
.k-grouping-header .k-group-indicator{
color: @inversed-text-color;
background-color: @accent-hover-background;
border-color: @accent-hover-background;
}
.k-group-indicator .k-link {
color: @inversed-text-color;
}
.k-grouping-row {
background-color: @secondary-widget-background-color;
font-weight: bold;
}
.k-group-cell {
background-color: @secondary-widget-background-color;
}
.k-filter-menu .k-button,
.k-edit-form-container .k-button {
color: @normal-text-color;
background: transparent;
border-color: transparent;
}
.k-filter-menu .k-button:active {
color: @normal-text-color;
}
.k-filter-menu .k-primary,
.k-edit-form-container .k-primary {
color: @accent;
}
.k-filter-menu .k-primary {
border-left-color: @widget-border-color;
}
.k-filter-menu>div>div:last-child {
border-color: @widget-border-color;
}
.k-grid td.k-state-selected,
.k-grid tr.k-state-selected > td {
border-color: fadeout(@widget-border-color, 20%);
}
.k-grid tr.k-state-selected,
.k-grid td.k-state-selected,
.k-grid td.k-state-selected.k-state-focused {
background-color: lighten(@info, 22%);
}
.k-grid td.k-state-selected:hover,
.k-grid tr.k-state-selected:hover td {
background-color: lighten(@info, 17%);
}
.k-grid tr:hover .k-state-focused.k-state-selected,
.k-grid tr.k-state-selected:hover td.k-state-focused {
box-shadow: inset 0 0 0 1px darken(@widget-border-color, 35%);
}
.k-grid .k-state-selected:hover .k-group-cell {
background-color: @secondary-widget-background-color;
}
.k-grid .k-header .k-grid-search {
background: none;
background-color: @input-bg;
color: @input-text;
}
.k-marquee-color {
background-color: desaturate(@info, 8%);
}
// PivotGrid
.k-alt,
.k-grid.k-alt,
.k-fieldselector .k-item.k-header {
background-color: @secondary-widget-background-color;
border-color: @widget-border-color;
}
.k-pivot-toolbar .k-button {
color: @inversed-text-color;
background-color: @accent-hover-background;
border-color: @accent-hover-background;
}
.k-pivot-toolbar .k-empty {
color: rgba(256, 256, 256, 0.5);
}
.k-fieldselector .k-item.k-header.k-state-hover {
color: @normal-text-color;
}
.k-grid-footer td,
.k-pivot-rowheaders .k-grid-footer {
font-weight: bold;
}
.k-grid .k-filter-row:hover,
.k-pivot-rowheaders .k-grid tr:hover {
background: none;
}
// Pager
.k-pager-wrap {
border-color: @widget-border-color;
color: @normal-text-color;
background-color: @secondary-widget-background-color;
.k-link {
border-color: transparent;
background-color: transparent;
box-shadow: none;
}
.k-link:hover {
color: @hover-text-color;
}
.k-link.k-state-disabled {
color: inherit;
}
.k-pager-numbers .k-link {
color: @normal-text-color;
}
.k-pager-numbers .k-link:hover {
border-top-color: @widget-border-color;
}
.k-pager-numbers .k-state-selected,
.k-pager-numbers .k-state-selected:hover {
border-top-color: @selected-background;
color: @selected-background;
background: none;
}
.k-pager-info {
color: lighten(@hover-text-color, 8%);
}
}
// Scheduler
.k-scheduler th,
.k-scheduler tr,
.k-scheduler td {
border-color: @widget-border-color;
}
.k-scheduler-table td.k-state-selected {
background-color: lighten(@info, 22%);
}
.k-gantt > .k-header li {
border-color: @accent;
}
.k-event,
.k-task-complete {
color: @inversed-text-color;
background: darken(@info, 21%);
border-color: darken(@info, 21%);
}
.k-event.k-state-selected {
.box-shadow(0 0 0 2px @normal-text-color);
}
.k-scheduler-table .k-nonwork-hour,
.k-scheduler-dayview .k-today.k-nonwork-hour,
.k-scheduler-timelineview .k-today.k-nonwork-hour
{
background-color: @scheduler-nonwork-background-color;
}
.k-scheduler-table .k-today,
.k-today > .k-scheduler-datecolumn,
.k-today > .k-scheduler-groupcolumn
{
background-color: @column-highlight-background-color;
}
.k-scheduler-header .k-today {
background: transparent;
}
table:not(.k-scheduler-dayview) .k-scheduler-header-wrap .k-today {
color: @selected-background;
}
// Gantt
.k-gantt .k-treelist,
.k-gantt .k-treelist .k-alt,
.k-gantt .k-header.k-nonwork-hour,
.k-gantt .k-treelist .k-alt,
.k-gantt .k-header.k-nonwork-hour {
background-color: @secondary-widget-background-color;
}
.k-gantt .k-treelist .k-state-selected,
.k-gantt .k-treelist .k-state-selected td,
.k-gantt .k-treelist .k-alt.k-state-selected,
.k-gantt .k-treelist .k-alt.k-state-selected > td {
background-color: lighten(@info, 22%);
}
.k-gantt-toolbar {
border-color: @secondary-widget-background-color;
}
.k-gantt-toolbar .k-button {
background-color: @accent;
border-color: @accent;
}
.k-gantt>.k-header li,
.k-gantt>.k-header .k-link,
.k-gantt-toolbar .k-button {
color: @inversed-text-color;
}
.k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover,
.k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-hover .k-link,
.k-gantt .k-gantt-toolbar .k-button:hover {
background-color: @accent-hover-background;
border-color: @accent-hover-background;
}
.k-gantt-toolbar>.k-gantt-views>li.k-state-selected,
.k-gantt .k-gantt-toolbar .k-gantt-views li.k-state-selected.k-state-hover {
border-bottom-color: @widget-background-color;
}
.k-gantt-toolbar li:first-child,
.k-gantt-toolbar li:first-child>.k-link,
.k-gantt-toolbar li:last-child,
.k-gantt-toolbar li:last-child>.k-link {
border-radius: 0;
}
.k-gantt .k-task-draghandle {
border-color: darken(@info, 21%);
}
.k-task-dot:after {
background-color: lighten(@hover-text-color, 8%);
border-color: lighten(@hover-text-color, 8%);
}
.k-task-dot:hover:after {
background-color: @normal-text-color;
border-color: @normal-text-color;
}
.k-task-summary {
background: darken(@normal-background, 12%);
}
.k-task-milestone {
background-color: lighten(@success, 5%);
}
.k-task-summary-complete {
background: @normal-text-color;
}
.k-state-selected.k-task-summary {
background: lighten(@info, 4%);;
}
.k-state-selected.k-task-milestone,
.k-state-selected .k-task-summary-complete {
background-color: lighten(@info, 22%);
border-color: lighten(@info, 22%);
}
.k-task-single {
color: @inversed-text-color;
background-color: lighten(@info, 4%);
border-color: lighten(@info, 4%);
}
.k-state-selected.k-task-single {
border-color: @accent;
}
.k-gantt-line {
background-color: @normal-text-color;
color: @normal-text-color;
}
.k-state-selected.k-gantt-line {
background-color: @accent;
color: @accent;
}
.k-resource {
background-color: @widget-background-color;
}
// Editor
.k-filebrowser .k-header {
color: @widget-text-color;
background-color: @widget-background-color;
border-color: @widget-border-color;
}
// Upload
.k-file,
.k-upload {
background-color: @widget-background-color;
border-color: @widget-border-color;
}
.k-dropzone .k-upload-status {
color: lighten(@hover-text-color, 8%);
}
.k-file .k-upload-status {
color: @normal-text-color;
}
.k-file-progress .k-progress {
background-color: @info;
}
.k-file-success {
.k-file-validation-message,
.k-upload-pct {
color: @success;
}
.k-progress {
background-color: @success;
}
}
.k-file-error,
.k-file-invalid {
.k-file-validation-message,
.k-upload-pct {
color: @error;
}
.k-progress {
background-color: @accent;
}
}
.k-file-extension-wrapper,
.k-multiple-files-extension-wrapper,
.k-file-group-wrapper,
.k-multiple-files-group-wrapper,
.k-file-invalid-group-wrapper {
color: @disabled-text-color;
border-color: @disabled-text-color;
}
.k-file-extension-wrapper:before,
.k-multiple-files-extension-wrapper:before {
background-color: @widget-background-color;
border-color: transparent transparent @disabled-text-color @disabled-text-color;
}
.k-multiple-files-extension-wrapper:after {
border-top-color: @disabled-text-color;
border-left-color: @disabled-text-color;
}
.k-file-size,
.k-file-information,
.k-file-validation-message {
color: @disabled-text-color;
}
.k-upload .k-upload-selected {
border-color: @widget-border-color;
}
// Slider
.k-slider-track {
background-color: darken(@widget-background-color, 12%) ;
}
.k-slider-selection {
background-color: @selected-background;
}
.k-slider-horizontal .k-tick {
background-image:url('@{image-folder}/slider-h.gif');
}
.k-slider-vertical .k-tick {
background-image:url('@{image-folder}/slider-v.gif');
}
.k-draghandle {
background-color: @widget-background-color;
border-color: @widget-border-color;
.box-shadow(@popups-shadow);
border-radius: 50%;
}
.k-draghandle:hover {
background-color: @hover-background;
}
// ColorPicker
.k-flatcolorpicker .k-hue-slider .k-draghandle {
background-color: @widget-background-color;
border-color: @widget-background-color;
.box-shadow(@popups-shadow);
border-radius: 50%;
}
.k-flatcolorpicker .k-hue-slider .k-draghandle:hover,
.k-flatcolorpicker .k-transparency-slider .k-draghandle:hover,
.k-flatcolorpicker .k-hue-slider .k-draghandle:focus,
.k-flatcolorpicker .k-transparency-sl