le-player/source/less/unti-origin/variables.less

The best HTML5 video player made for Lectoriy.

// COLOURS COMMON

// rgb(26, 74, 126)
@color-primary: hsl(211, 65%, 30%);
@color-active: white;
@color-dark: black;

// hsl(211,30%,90%)
// rgb(225, 232, 239)
@color-background: desaturate(lighten(@color-primary, 60%), 35%);

// video-line
// hsl(211,22%,56%)
// rgb(118, 142, 167)
@color-background-line: desaturate(lighten(@control-bg, 25%), 45%);
@color-background-line-active: fade(@control-bg, 60%);;
@color-background-line-buffered: fade(@control-bg, 40%);

// play
// hsl(211, 30%, 54%)
// rgb(103, 139, 174)
@color-background-play: desaturate(lighten(@color-primary, 25%), 35%);
@color-background-play-hovered: @color-text;

// disabled
// hsl(211,23%,66%)
// rgb(148, 165, 188)
@color-disabled: desaturate(lighten(@color-primary, 35%), 45%);

// control
@color-control: lime;
@color-control-hovered: @color-text;
@color-control-active: orange;
@color-control-checked: @color-text;

// dropdown

// inner items
@color-inner-item: @color-text;
@color-inner-item-hover: lighten(@color-primary, 5%);
@color-inner-item-active: @color-background-play;

// marker
@color-marker: @color-primary;
// hsla(211, 30%, 90%, 0.5)
// rgba(225, 232, 239, 0.5)
@color-marker-border: fade(desaturate(lighten(@color-primary, 60%), 35%), 50%);
@color-marker-shadow-border: @color-marker-border;
@color-marker-shadow: fade(@color-primary, 80%);
// hsla(211, 20, 55, 0.5)
// rgba(118, 138, 167, 0.8)
@color-marker-shadow-time: fade(desaturate(lighten(@color-primary, 25%), 45%), 80%);

// timeline
// hsl(211, 25, 25)
// rgb(48, 63, 80)
@color-timeline-section-even: desaturate(darken(@timeline-bg, 5%), 40%);
// hsl(211, 22, 56)
// rgb(118, 142, 167)
@color-timeline-section-odd: desaturate(lighten(@timeline-bg, 25%), 45%);

// text
@color-text: @color-primary;
@color-text-hovered: black;
@color-text-checked: @color-background;
@color-text-active: @color-background;
@control-text: #ffffff;
@control-bg: #8B8D97;
@timeline-bg: #505050;

@color-info-text: black;

@color-fs-active: white;
@color-fs-primary: #8B8D97;
// #465264;
@color-fs-background: @color-fs-primary;
@color-fs-background-hover: darken(@color-fs-background, 10%);

// video-line
// #768496
//hsl(215, 20%, 55%)
@color-fs-background-line: lighten(@color-fs-primary, 20%);
@color-fs-background-line-active: rgba(0, 0, 0, 0.25);
@color-fs-background-line-buffered: fade(red, 40%);

// play btn
// #384150;
@color-fs-background-play: darken(@color-fs-background, 15%);
@color-fs-background-play-hovered: @color-fs-background-hover;

// disabled
// #4b6b9b;
// hsl(215, 35%, 45%);
@color-fs-disabled: desaturate(lighten(@color-fs-primary, 10%), 15%);

// control
@color-fs-control: @color-fs-background;
@color-fs-control-hovered: @color-fs-background-hover;
@color-fs-control-checked: @color-fs-control-hovered;

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

// inner item
@color-fs-inner-item-hover: rgba(0, 0, 0, 0.15);
@color-fs-inner-item-active: @color-fs-background-play;

// marker
// #2a313c;
@color-fs-marker: darken(@color-fs-primary, 15%);

// rgba(225, 232, 239, 0.7);
// hsl(215, 30%, 90%)
@color-fs-marker-border: fade(desaturate(lighten(@color-fs-primary, 55%), 10%), 70%);

// rgba(26, 74, 126, 0.8);
// hsla(215, 30%, 65%, 0.8)
@color-fs-marker-shadow: fade(desaturate(lighten(@color-fs-primary, 30%), 10%), 70%);

// rgba(225, 232, 239, 0.5);
// hsla(215, 30%, 95%, 0.5)
@color-fs-marker-shadow-border: fade(desaturate(lighten(@color-fs-primary, 60%), 10%), 50%);


//rgba(118, 138, 167, 0.8);
//hsla(215, 20%, 56%, 0.8)
@color-fs-marker-shadow-time: fade(lighten(@color-fs-primary, 20%), 80%);

// text
//#e1e8ef;
//hsl(215, 30%, 91%)
@color-fs-text: desaturate(lighten(@color-primary, 55%), 10%);
@color-fs-text-hovered: @color-fs-text;
@color-fs-text-active: @color-fs-background;
@color-fs-text-checked: @color-fs-background;

// sections
@radius: 8px;
@color-section: white;
@color-green: #148C88;
@color-description: #786c7f;
@color-section-active: #E7EFEF;
@color-section-hover: #E7EFEF;
@color-section-2n: #F3F5F5;
@color-section-muted: #555;
@color-section-text: #342F37;

@color-fs-section: fade(@color-fs-section-active, 70%);
@color-fs-section-active: darken(@color-fs-primary, 20%);
@color-fs-section-hover: darken(@color-fs-primary, 25%);
// hsl(215, 20%, 22%);
@color-fs-section-2n: fade(@color-fs-section-2n-active, 70%);
@color-fs-section-2n-active: darken(@color-fs-primary, 10%);
@color-fs-section-2n-hover: darken(@color-fs-primary, 15%);
@color-fs-section-text: @color-fs-text;

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

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

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

@divider-width: 10px;
@timeline-transition: 0s 0.1s ease-in-out;

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

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