/*
 * Default theme values for claroline vars
 */

// Import bootstrap vars
@import "variables.bootstrap.less";


// -
// Base & utilities
// ---

@brand-secondary:         #C51162;

@enable-box-shadow:       true;
@enable-border-radius:    true;
@enable-border:           true;

@font-size-modifier:      1;

@box-shadow-base:               0 0 2px rgba(0, 0, 0, 0.15);
@component-margin-bottom:       @line-height-computed; // ~20px
@component-margin-bottom-small: floor(@line-height-computed / 2); // ~10px

// react strips whitespaces, so we need to move icons to avoid from text
@icon-text-spacer:     7px;
@icon-dropdown-spacer: 15px;

@images-path: "images/";

// a color to use on background which is considered 'dark' by tinycolor2
// @see https://www.npmjs.com/package/tinycolor2#isdark
@text-light-color: #FDFDFD; // todo : adjust

// a color to use on background which is considered 'light' by tinycolor2
// @see https://www.npmjs.com/package/tinycolor2#islight
@text-dark-color:  @gray-darker; // todo : adjust


// -
// Z-indexes
// ---

@zindex-sidebar:       @zindex-navbar-fixed - 1;
// z-index for full screen pages.
// we want to pass over navbars but under tooltips, popovers and modals
// modify with caution !
@zindex-fullscreen:    1035;
@zindex-list-search:   1040;
@zindex-flying-alerts: @zindex-modal + 10;


// -
// States
// ---

@state-selected-text:   @state-info-text;
@state-selected-border: @state-info-border;
@state-selected-bg:      @state-info-bg;


// -
// Application
// ---

@app-max-width: 1200px; // max width for the app content


// -
// Login
// ---

@login-bg-image:  "@{images-path}login-bg.jpg"; // will fallback on @body-bg if theme has no image
@login-max-width: 740px;


// -
// Header
// ---

@top-bar-max-width:           100%; // max width for the top bar content (do not affect top bar container)
@top-bar-height:              60px + @top-bar-border-bottom-size;
@top-bar-font-size:           @font-size-base;
@top-bar-color:               lighten(@top-bar-bg, 35%);
@top-bar-bg:                  @navbar-inverse-bg;
@top-bar-border-bottom-size:  0;
@top-bar-border-bottom-color: @brand-primary;
@top-bar-border-bottom:       @top-bar-border-bottom-size solid @top-bar-border-bottom-color;
@top-bar-box-shadow:          0 0 5px 1px rgba(0, 0, 0, 0.5);

@top-bar-brand-color:         #FFFFFF;
@top-bar-brand-font-size:     24px;

@top-bar-link-color:          lighten(@top-bar-bg, 60%);
@top-bar-link-bg:             @top-bar-bg;
@top-bar-link-hover-color:    lighten(@top-bar-bg, 70%);
@top-bar-link-hover-bg:       darken(@top-bar-bg, 5%);
@top-bar-link-active-color:   lighten(@top-bar-bg, 80%);
@top-bar-link-active-bg:      @top-bar-link-hover-bg;
@top-bar-link-disabled-color: lighten(@top-bar-bg, 30%);
@top-bar-link-disabled-bg:    transparent;


// -
// Loader (aka hourglass)
// ---

@loader-primary:   lighten(@brand-primary, 35%);
@loader-secondary: lighten(@brand-secondary, 35%);
@loader-color:     #585858;
@loader-bg:        @gray-lighter;


// -
// Breadcrumb
// ---

@breadcrumb-margin-vertical:    0;
@breadcrumb-margin-horizontal:  0;
@breadcrumb-border-radius:      0;
@breadcrumb-box-shadow:         none;
@breadcrumb-font-size:          @font-size-small;
@breadcrumb-line-height:        @line-height-base;
@breadcrumb-text-transform:     inherit;
@breadcrumb-inner-border-size:  1;
@breadcrumb-inner-border-color: #bbb;

@breadcrumb-link-color:         #777;
@breadcrumb-link-hover-color:   #333;


// -
// Toolbars
// By default it reuses some of the styles from the app header.
// ---

@toolbar-size:           360px;
@toolbar-font-size:      22px; // size for icons
@toolbar-bg:             @top-bar-bg;
@toolbar-color:          white;
@toolbar-active-color:   @brand-primary;

// links
@toolbar-link-color:          @top-bar-link-color;
@toolbar-link-bg:             @top-bar-link-bg;
@toolbar-link-hover-color:    @top-bar-link-hover-color;
@toolbar-link-hover-bg:       @top-bar-link-hover-bg;
@toolbar-link-active-color:   @top-bar-link-active-color;
@toolbar-link-active-bg:      @top-bar-link-active-bg;
@toolbar-link-disabled-color: @top-bar-link-disabled-color;
@toolbar-link-disabled-bg:    @top-bar-link-disabled-bg;


// -
// Page
// ---

@page-header-bg:               white;
@page-header-padding:          0;
@page-header-font-size:        @font-size-h1;
@page-header-weight:           700;
@page-header-link-color:       @gray; // todo : should be #666 for WCAG AA or #555 for AAA
@page-header-link-hover-color: @gray-darker;


// -
// Flying alerts
// ---

@flying-alert-opacity:        .8; // becomes 1 on alert hover
@flying-alert-width:          400px;
@flying-alert-padding:        5px;
@flying-alert-border-radius:  0;
@flying-alert-box-shadow:     0 0 3px rgba(0,0,0,.5); // same as topbar
@flying-alert-margin-bottom:  10px;
@flying-alert-icon-size:      32px;

// variants
@flying-alert-primary-color:  white;
@flying-alert-primary-bg:     @brand-primary;
@flying-alert-primary-border: @flying-alert-primary-bg;

@flying-alert-success-color:  white;
@flying-alert-success-bg:     @brand-success;
@flying-alert-success-border: @flying-alert-success-bg;

@flying-alert-warning-color:  white;
@flying-alert-warning-bg:     @brand-warning;
@flying-alert-warning-border: @flying-alert-warning-bg;

@flying-alert-error-color:    white;
@flying-alert-error-bg:       @brand-danger;
@flying-alert-error-border:   @flying-alert-error-bg;

@flying-alert-info-color:     white;
@flying-alert-info-bg:        @brand-info;
@flying-alert-info-border:    @flying-alert-info-bg;

@flying-alert-pending-color:  white;
@flying-alert-pending-bg:     #666;
@flying-alert-pending-border: @flying-alert-pending-bg;


// -
// Summaries
//
// As summaries can have very different forms and usages (eg. path, quiz)
// there is no default implementation in the base layout
// but each UI component intended to be used as a summary MUST use this vars
// and adapt to the use case in order to keep common look & feel between all summary implementations
// ---

@summary-font:              @font-size-base;
@summary-font-style:        italic;
@summary-color:             white;
@summary-lvl-indent:        20px; // indent children of a step in the summary

// deprecated (? still required by PDF player)
@summary-padding:           15px;
@summary-bg:                @gray-darker;
@summary-border-radius:     0;
@summary-box-shadow:        0 0 4px 0 rgba(0, 0, 0, 0.4);
@summary-box-shadow-v:      2px 0 4px 0 rgba(0, 0, 0, 0.4); // box shadow for vertical summaries
@summary-box-shadow-h:      0 2px 4px 0 rgba(0, 0, 0, 0.4); // box shadow for horizontal summaries

// Links
@summary-link-bg:             @toolbar-link-bg;
@summary-link-color:          @toolbar-link-color;
@summary-link-hover-bg:       @toolbar-link-hover-bg;
@summary-link-hover-color:    @toolbar-link-hover-color;
@summary-link-active-bg:      @toolbar-link-active-bg;
@summary-link-active-color:   @toolbar-link-active-color;
@summary-link-disabled-bg:    @toolbar-link-disabled-bg;
@summary-link-disabled-color: @toolbar-link-disabled-color;


// -
// Footer
// ---

@footer-max-width:          none; // max width for the footer content (do not affect footer container)
@footer-bg:                 #F3F3F3;
@footer-color:              @gray-light;
@footer-border-color:       transparent;
@footer-inner-border-color: #E0E0E0;
@footer-box-shadow:         @box-shadow-base;

// Links
@footer-link-color:        @gray;
@footer-link-hover-color:  @gray-dark;
@footer-link-active-color: @gray-darker;


// -
// Forms
// ---

@help-block-color:          @brand-info;
@help-block-font-size:      12px;

// Controls
@input-box-shadow:          inset 0 1px 1px rgba(0,0,0,.075);
@input-transition:          "border-color ease-in-out .15s, box-shadow ease-in-out .15s";
@input-padding:             @padding-base-vertical @padding-base-horizontal;

// Labels
@input-label-color:         @text-color;
@input-success-label-color: @text-color; // default bootstrap behavior : @state-success-text
@input-warning-label-color: @text-color; // default bootstrap behavior : @state-warning-text
@input-error-label-color:   @text-color; // default bootstrap behavior : @state-error-text


// -
// Lists
// ---

@list-controls-bg:             @gray-lighter;
@list-controls-color:          @gray-dark;
@list-controls-border:         #E1E1E1;
@list-controls-disabled-bg:    #F4F4F4;
@list-controls-disabled-color: #666666;
@list-controls-active-bg:      #E4E4E4;
@list-controls-active-color:   @gray-darker;


// -
// Headings
// ---

@heading-numbering-padding:       2px 6px;
@heading-numbering-bg:            @brand-secondary;
@heading-numbering-color:         white;
@heading-numbering-font:          100%;
@heading-numbering-weight:        bold;
@heading-numbering-border-radius: 0;
@heading-numbering-box-shadow:    @box-shadow-base;
@heading-numbering-separator:     "."; // separator between numbering levels


// -
// Panels
// ---

@panel-heading-padding-v:  15px;
@panel-heading-padding-h:  15px;
@panel-box-shadow:         @box-shadow-base;
@panel-margin-bottom:      @component-margin-bottom;

// Groups
@panel-group-panel-margin: 5px;


// -
// List groups
// ---

@list-group-margin-bottom:  @component-margin-bottom;
@list-group-item-padding-v: 10px;
@list-group-item-padding-h: 15px;


// -
// Navs
// ---

@nav-spacing:            5px; // margin between 2 tabs

@nav-tabs-link-color:    @gray;
@nav-tabs-border-radius: @border-radius-base @border-radius-base 0 0;

@nav-pills-link-color:   @brand-primary;
@nav-pills-link-bg:      transparent;


// -
// Carousel
// ---

@carousel-indicator-size:        10px;
@carousel-indicator-active-size: 12px;


// -
// Dropdown
// ---

@dropdown-menu-padding-v:     5px;
@dropdown-menu-padding-h:     0;
@dropdown-menu-box-shadow:    0 1px 2px rgba(0, 0, 0, 0.2);
@dropdown-menu-border-radius: 0;

@dropdown-link-padding-v:     5px;
@dropdown-link-padding-h:     15px;


// -
// Labels
// ---

@label-border-radius: .25em;
@label-font-size:     75%;


// -
// Modal
// ---

@modal-content-box-shadow:    0 0 10px rgba(0, 0, 0, 0.5);
@modal-content-border-radius: 0;
@modal-footer-bg:             @gray-lightest;


// -
// Popover
// ---

@popover-box-shadow:         0 1px 2px rgba(0, 0, 0, 0.25);
@popover-border-radius:      @border-radius-base;
@popover-title-padding:      10px;
@popover-title-border-color: @modal-header-border-color;
@popover-content-padding:    10px;


// -
// Tooltip
// ---

@tooltip-font-size:     @font-size-small;
@tooltip-border-radius: 0;
@tooltip-padding:       5px 10px;
@tooltip-box-shadow:    none;


// -
// Placeholders
// ---

@placeholder-bg:                 #F0F0F0;
@placeholder-color:              @text-muted;
@placeholder-hover-color:        @brand-primary;
@placeholder-border-color:       #ccc;
@placeholder-hover-border-color: @placeholder-hover-color;

// default variant
@placeholder-font-size:        @font-size-base;
@placeholder-border-size:      1px;
@placeholder-border-radius:    @border-radius-base;
@placeholder-padding:          @padding-base-vertical @padding-base-horizontal;

// small variant
@placeholder-sm-font-size:     @font-size-small;
@placeholder-sm-border-size:   1px;
@placeholder-sm-border-radius: @border-radius-small;
@placeholder-sm-padding:       @padding-small-vertical @padding-small-horizontal;

// large variant
@placeholder-lg-font-size:     @font-size-large;
@placeholder-lg-border-size:   2px;
@placeholder-lg-border-radius: @border-radius-large;
@placeholder-lg-padding:       @padding-large-vertical @padding-large-horizontal;


// -
// User
// ---

@user-message-bg:            @panel-bg;
@user-message-border:        @panel-default-border;
@user-message-inner-border:  @panel-default-border;
@user-message-border-radius: @border-radius-large;


// -
// Thumbnails
// ---

@thumbnail-box-shadow:   0 0 4px rgba(0, 0, 0, 0.5);
@thumbnail-border-width: 0;


// -
// Data grid
// ---

@data-grid-gutter: 10px;


// -
// Data card
// ---

@data-card-font:              @font-size-base;
@data-card-content-font:      @font-size-small;
@data-card-padding:           @panel-body-padding;
@data-card-border:            @panel-default-border;
@data-card-inner-border:      @panel-inner-border;
@data-card-color:             @text-color;
@data-card-color-muted:       @text-muted;
@data-card-bg:                @panel-bg;
@data-card-border-radius:     @panel-border-radius;
@data-card-box-shadow:        @box-shadow-base;
@data-card-header-bg:         @panel-default-heading-bg;

// sizing
@data-card-icon-sm-size:      60px;
@data-card-title-sm-font:     @font-size-base;
@data-card-icon-lg-size:      100px;
@data-card-title-lg-font:     16px;

// states
@data-card-active-color:        @text-color;
@data-card-active-bg:           @table-bg-hover;
@data-card-active-box-shadow:   0 0 4px rgba(0,0,0,.25);
@data-card-active-header-bg:    #ededed;
@data-card-active-border:       @data-card-border;
@data-card-active-inner-border: @data-card-inner-border;

@data-card-muted-color:         @gray-light;
@data-card-muted-bg:            @gray-lightest;
@data-card-muted-box-shadow:    0 0 2px rgba(0,0,0,.1);
@data-card-muted-header-bg:     @gray-lighter;
@data-card-muted-border:        #ededed;
@data-card-muted-inner-border:  #ededed;


// -
// Progress bars
// ---

@progress-box-shadow:     inset 0 1px 2px rgba(0,0,0,.1);
@progress-bar-box-shadow: none; // bootstrap default : inset 0 -1px 0 rgba(0,0,0,.15)


// -
// Scores
// ---

@score-border-radius:    @border-radius-base;
@score-bg:               @brand-secondary;
@score-color:            white;
@score-border:           none;
@score-font-size:        @font-size-base;
@score-padding-v:        5px;
@score-padding-h:        10px;

// small box variant
@score-border-radius-sm: @border-radius-small;
@score-font-size-sm:     @font-size-small;
@score-padding-v-sm:     3px;
@score-padding-h-sm:     6px;

// large box variant
@score-border-radius-lg: @border-radius-large;
@score-font-size-lg:     @font-size-large;
@score-padding-v-lg:     6px;
@score-padding-h-lg:     12px;
