le-player/source/less/vps-gray/theme.less

The best HTML5 video player made for Lectoriy.

// THEME COLOURS

@color-main: #0170bc;
@color-main-darker: #004B80;
@color-gray:  #f5f5f5;
@color-border: #dcdcdc;
@color-gray-darker: #4a4a4a;
@color-additional: #64398;
@color-semiblack: rgb(128, 128, 128);





// COMMON COLOURS

@color-primary: @color-main;
@color-active: white;
@color-dark: @color-gray-darker;

// background
@color-background: @color-gray;

// video line
@color-background-line: @color-border;
@color-background-line-active: @color-gray-darker;
@color-background-line-buffered: @color-border;

// play btn
@color-background-play: @color-main;
@color-background-play-hovered: @color-main-darker;

// disabled
@color-disabled: #e0e0e0;

//control
@color-control: lime;
@color-control-hovered: #c3c9ce;
@color-control-active: orange;

// dropdowns

// inner items
@color-inner-item: red;
@color-inner-item-hover: #c3c9ce;
@color-inner-item-active: @color-gray-darker;

// marker
@color-marker: @color-main;
@color-marker-border: @color-main;
@color-marker-shadow-border: @color-gray-darker;
@color-marker-shadow: @color-main;
@color-marker-shadow-time: @color-main;

// timeline
@color-timeline-section-even: @color-gray;
@color-timeline-section-odd: @color-border;

// text
@color-text: @color-gray-darker;
@color-text-hovered:  #011f33;
@color-text-checked: @color-gray;
@color-text-active: @color-gray;

// sections
@color-section: white;
@color-section-active: @color-disabled;
@color-section-hover: desaturate(lighten(@color-primary, 40%), 35%);
@color-section-2n: desaturate(lighten(@color-primary, 60%), 32%);





// FULLSCREEN COLOURS(FS)

@color-fs-active: white;
@color-fs-background: @color-gray;
@color-fs-background-hover: @color-gray-darker;

// video-line
@color-fs-background-line: @color-border;
@color-fs-background-line-active: @color-gray-darker;
@color-fs-background-line-buffered: orange;

// play btn
@color-fs-background-play: @color-main;
@color-fs-background-play-hovered: @color-main-darker;

//disabled
@color-fs-disabled: @color-disabled;

// control
@color-fs-control: @color-gray;
@color-fs-control-hovered: @color-control-hovered;

// dropdown
@color-fs-dropdown: @color-gray;

// inner-item
@color-fs-inner-item-hover: @color-inner-item-hover;
@color-fs-inner-item-active: @color-gray-darker;

// marker
@color-fs-marker: @color-main;
@color-fs-marker-border: @color-main;
@color-fs-marker-shadow: @color-gray-darker;
@color-fs-marker-shadow-border: @color-gray-darker;
@color-fs-marker-shadow-time: @color-main;

// text
@color-fs-text: @color-gray-darker;
@color-fs-text-hovered: @color-text-hovered;
@color-fs-text-active: @color-text-active;
@color-fs-text-checked: @color-text-checked;

// sections
@color-fs-section: fade(black, 70%);
@color-fs-section-active: black;
@color-fs-section-2n: rgba(47,52,63,.7);
@color-fs-section-2n-active: rgb(47,52,63);





// MINIPLAYER
@color-miniplayer-bg: #f5f8fa;





// SIZES
@control-font-size: 16px;
@control-text-font-size: 12px;
@control-height: 32px;
@control-width: 32px;
@control-play-width: 60px;
@divider-width: 10px;





// FONTS
@font-main: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;





// Z-INDEX
@z-index-base: 500;
@z-index-miniplayer: @z-index-base + 100;
@z-index-fullscreen: 1000;





//ANIMATION
@timeline-transition: 0s 0.1s ease-in-out;