UNPKG

@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
/*! * 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