Variables deprecated

Content of ui/apps/themes/definitions.less

/*
 * - Variables containing the word 'background' will always refer to the background color.
 * - Variables containing 'color' will refer to the foreground color of an element, like color of a font.
 * - Hover in most cases means 'hovered' elements.
 * - Selected relates to the currently selected item.
 * - The most significant visual change is achieved by changing the following variables:
 *   - @brand-primary
 *   - @link-color
 */

/*
 * 1. GLOBALS
 */

/*
 * 1.1 Base colors
 */

@brand-primary:                         #283f73;    /* was #3c73aa;*/    /* Bootstrap overwrite */
@brand-success:                         #008500;    /* Bootstrap overwrite */
// e.g. used for window-content
@background:                            @white;


/*
 * 1.2 Accent colors
 */

@white:                                 #fff;
@black:                                 #000;
@gray:                                  #555555;    /* Bootstrap overwrite */
@blue:                                  #017fb3;
@blue-dark:                             #0064cd;
@blue-light:                            lighten(#049cdb, 25%);
@green:                                 #198819;
@green-light:                           #92d050;
@red:                                   #cc0000;
@yellow:                                #f8e400;
@orange:                                #f89406;
@pink:                                  #e01cd9;
@purple:                                #7e16cf;
@dark-silver:                           #aaa;
@silver:                                #bbb;
@light-silver:                          #ccc;

/*
 * 1.2.1 Application colors
 */
@app-color-standard:                    #7a7a7a;
// not used for 7.10
@app-color-mail:                        #4c68ac;
@app-color-addressbook:                 #43a047;
@app-color-calendar:                    #c62828;
@app-color-drive:                       #444444;
@app-color-tasks:                       #f57c00;
@app-color-portal:                      #999;
@app-color-text:                        #2c569a; // text processor
@app-color-spreadsheet:                 #227643; // spreadsheet editor
@app-color-presentation:                #d24727; // presentation editor

/*
 * 1.3 High contrast colors
 */

@hc-gray:                               #767676;
@hc-green:                              #198919;

@hc-link-color:                         #3774a8;
@hc-border-color:                       @hc-gray;

/*
 * 1.4 Typographie
 */

@light-font-family:                     -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
@normal-font-family:                    @light-font-family;
@font-family-sans-serif:                @light-font-family;     /* Bootstrap overwrite */

@font-size-touch:                       16px;
@topbar-font-size:                      13px;
@vgrid-font-size:                       13px;
@inline-link-font-size:                 14px;
@sm-mail-detail-font-size:              15px;

/*
 * 1.5 Base layout
 */

@padding-base-vertical:                  4px;    /* Bootstrap overwrite */
@padding-base-horizontal:               12px;    /* Bootstrap overwrite */
@modal-inner-padding:                   13px;    /* Bootstrap overwrite */

@base-padding:                          4px;
@default-padding:                       @base-padding * 4;
@list-view-padding:                     @default-padding;

/*
 * 1.6 Links
 */

@link-color:                            #3c61aa;    /* Bootstrap overwrite */
@link-on-dark:                          #3bf;
@person-link-color:                     @link-color;
@inline-link-color:                     @link-color;
@inline-link-border-color:              #eee;
@inline-links-margin:                   18px 0;

/*
 * 1.7 Icons
 */

@fa-font-path:                          "apps/3rd.party/font-awesome/fonts";

@trash-icon-hover-background:           @red;
@trash-icon-hover-color:                @white;

/*
 * 1.8 Images
 */

@theme:                                 'default';
@fallback-image-contact:                'apps/themes/@{theme}/fallback-image-contact.png';
@fallback-image-group:                  'apps/themes/@{theme}/fallback-image-group.png';
@fallback-image-resource:               'apps/themes/@{theme}/fallback-image-resource.png';

@onboarding-mailapp:                    'apps/themes/icons/default/apps/mailapp.png';
@onboarding-driveapp-googleplay:                   'apps/themes/icons/default/apps/Android_Drive_App_Icon.png';
@onboarding-driveapp-appstore:                   'apps/themes/icons/default/apps/iOS_Drive_App_Icon.png';

/*
 * 1.9 Border radius
 */

@border-radius-large:                   3px;    /* Bootstrap overwrite */
@border-radius-base:                    3px;    /* Bootstrap overwrite */
@border-radius-small:                   3px;    /* Bootstrap overwrite */

@contact-picture-radius:                50%;

/*
 * 1.10 Devices
 */

@container-desktop:                     (870px + @grid-gutter-width);    /* Bootstrap overwrite */
@container-large-desktop:               @container-desktop;              /* Bootstrap overwrite */

// matches smartphone detection threshold in browser.js
@smartphone-breakpoint:                 540px;
@pagecontroller-animation-duration:     400ms;
// size of the menu launcher in the top left
@mobile-launcher-icon-size:             18px;
//toolbar height
@mobile-toolbar-height:                 50px;

/*
 * 1.11 Misc
 */

@default-border-color:                  #ddd;
@error-text-color:                      #a94442;
@outline-color:                         @brand-primary;
@ui-disabled-color:                     @light-silver;

// session expired blur class
@bluriness: 4px;


/*
 * 2. COMMONS
 */

/*
 * 2.1 Alerts
 */

@alert-info-text:                       #396ca0;    /* Bootstrap overwrite */

/*
 * 2.2 Badges
 * f.e. unread messages count in folder tree
 */

@badge-color:                           @white;       /* Bootstrap overwrite */
@badge-bg:                              @dark-silver;  /* Bootstrap overwrite */

/*
 * 2.3 Buttons
 */

@btn-primary-bg:                        @link-color;  /* Bootstrap overwrite */
@btn-info-bg:                           #5bc0de;      /* Bootstrap overwrite */
@btn-success-bg:                        #198819;      /* Bootstrap overwrite */
@btn-warning-bg:                        #fbb450;      /* Bootstrap overwrite */
@btn-warning-color:                     #764500;      /* Bootstrap overwrite */
@btn-danger-bg:                         #df332e;      /* Bootstrap overwrite */
@btn-inverse-bg:                        #444;         /* Bootstrap overwrite */

/*
 * 2.4 Labels
 */

@label-info-bg:                         #3a87ad;    /* Bootstrap overwrite */
@label-default-bg:                      #666;       /* Bootstrap overwrite */

/*
 * 2.5 Selection
 */

@selected-color:                        #f0faff;
@selected-unfocussed-background:        #ddd;
@selected-focussed-background:          @brand-primary;
@selected-background:                   @brand-primary;

/*
 * 2.6 Wallpaper
 * - use for gradiant
 * - unused?
 */
@wallpaper-color-1:                     rgba(255, 255, 255, 1);
@wallpaper-color-2:                     rgba(246, 246, 246, 1);
@wallpaper-color-3:                     rgba(168, 168, 168, 1);

/*
 * 3. COMPONENTS
 */

/*
 * 3.1 Window
 */

// window head (e.g used as button bar in mail compose or contacts edit)
@window-header-color:                   #f5f5f5;
@window-title-color:                    @white;

/*
 * 3.2 Topbar
 */

@topbar-background:                     @brand-primary; //obsolete
@topbar-icon-color:                     @white;
@topbar-launcher-color:                 @white; //rgba(255, 255, 255, 0.95);
@topbar-launcher-color-hover:           rgba(0,0,0,.4);//@white;
@topbar-launcher-color-active:          @white;
@topbar-launcher-background-hover:      rgba(0, 0, 0, 0.15);
@topbar-launcher-background-active:     rgba(0, 0, 0, 0.25);

/*
 * 3.3 Notification
 */

@notification-icon-color:               rgba(255, 255, 255, 1);
@notification-icon-background:          rgba(200, 0, 0, 1);
@notification-icon-color-active:        #333;
@notification-icon-background-active:   @white;
@notification-pane-background:          rgba(255, 255, 255, 1);
@notification-pane-item-background:     rgba(0, 0, 0, 0.10);

/*
 * 3.4 Folder tree
 */

@foldertree-badge-background:                   @badge-bg;
@foldertree-badge-color:                        @badge-color;
@foldertree-badge-focus-background:             #006597;

@foldertree-selected-label-color:               #333;
@foldertree-focused-label-color:                @white;
@foldertree-active-label-color:                 #333;
@foldertree-passive-label-color:                @hc-gray;

@foldertree-selected-background:                rgba(0, 0, 0, 0.10);
@foldertree-selected-focus-background:          @selected-background;
@foldertree-selected-focus-counter-color:       rgba(255, 255, 255, 0.95);
@foldertree-selected-focus-options-background:  rgba(0, 0, 0, 0.20);

@foldertree-account-link-color:                 #333;
@foldertree-counter-color:                      @link-color;
@foldertree-sidepanel-background:               #f5f5f5;
@foldertree-section-title-color:                #888;
@foldertree-hover-background:                   rgba(0, 0, 0, 0.05);

/*
 * 3.5 Toolbar
 */

@toolbar:                               @brand-primary;
@toolbar-button-accent:                 lighten(@link-color, 0%);
@toolbar-button-color:                  @silver;

@toolbar-link-color:                    lighten(@toolbar, 25%);
@toolbar-link-disabled-color:           @link-disabled-color;

@toolbar-background:                    #333;
@toolbar-background-alt:                lighten(@toolbar-background, 10%);

@toolbar-focus-color:                   @brand-primary;
@toolbar-line-height:                   24px;
@toolbar-vertical-padding:              8px;
@toolbar-height:                        @toolbar-line-height + 2 * @toolbar-vertical-padding;

@link-disabled-color:                   @dark-silver;
@link-accent-color:                     #ffad00;

/*
 * 3.6 Premium toolbar
 */

@premium-toolbar-background:            darken(@brand-primary, 10%);
@premium-toolbar-header-background:     lighten(@premium-toolbar-background, 10%);
@premium-toolbar-link-color:            @white;
@premium-toolbar-header-color:          lighten(@premium-toolbar-header-background, 50%);

/*
 * 3.7 Custom controls
 */

@control-color:                         @white;
@control-background:                    @brand-primary;
@control-border-color:                  @dark-silver;
@control-border-color-checked:          transparent;
@control-focus:                         #03a9f4;
@checkbox-radius:                       3px;
@switch-background:                     #558B2F; /* apple-green */

/*
 * 3.8 Grid
 */

@grid-color:                            #676767;
@grid-checkbox-color:                   #626262;
@grid-selected-color:                   @white;
@grid-selected-checkbox-color:          @grid-selected-color;

/*
 * 3.9 Wizard & tours
 */

@wizard-backdrop-color:                 rgba(0, 0, 0, 0.15);

// hotspot (e.g. used as visual marker in guided tours)
@hotspot-color:                         #FD057C;
@pulse-color:                           fade(@hotspot-color, 70%);
@pulse-border-color:                    @hotspot-color;


/*
 * 4. OX APPS
 */

/*
 * 4.1 mail
 */

@mail-priority:                         #ff4700;
@mail-priority-low:                     lighten(#08c, 10%);

@mail-attachment-link-color:            #333;
@mail-attachment-link-color-hover:      #000;

@mail-thread-size-color:                darken(@brand-primary, 20%);
@mail-thread-size-background:           rgba(0, 0, 0, 0.05);

@mail-unseen-icon:                      "\f111";    /* fa-circle */
@mail-unseen-icon-seen:                 "\f1db";    /* fa-circle-thin */

/*
 * 4.2 calendar
 */

@appointment-reserved:                  #3774a8;    /* blue */
@appointment-free:                      #8eb360;    /* green */
@appointment-private:                   #555;       /* dark gray */
@appointment-unconfirmed-font:          #555;       /* dark gray */
@appointment-declined-font:             #686868;    /* gray */
@appointment-unconfirmed:               #f0f0f0;
@appointment-declined:                  #e8e8e8;

// Percentage increase of the dark pigment content on hover effect
@appointment-hover-pct:                 15%;

@weekview-appointment-lasso:            #d0eaff;    /* light blue */
@weekview-background:                   @white;
@weekview-border:                       #c0c0c0;
@weekview-border-light:                 #e6e6e6;
@weekview-time-width:                   80px;
@weekview-footer-height:                34px;
@weekview-working-time-border:          #333;

@monthview-border:                      #ddd;
// not in focus
@monthview-appointment-out:             @dark-silver;
@monthview-cw-width:                    80px;

@calendar-today-background:             #f5f5f5;    /* gray */
@calendar-today:                        #cf3239;    /* red */
@calendar-toolbar-height:               35px;
@calendar-toolbar-top-padding:          14px;

// calender custom colors (ordered by spectrum)
// used in a a LESS loop by color-label-bg-@{counter}
@color-label-bg-1:                      #cee7ff;    /* light blue */
@color-label-bg-2:                      #96bbe8;    /* blue */
@color-label-bg-3:                      #c4afe3;    /* purple */
@color-label-bg-4:                      #f0d8f0;    /* pink */
@color-label-bg-5:                      #f2d1d2;    /* red */
@color-label-bg-6:                      #ffd1a3;    /* orange */
@color-label-bg-7:                      #f7ebb6;    /* yellow */
@color-label-bg-8:                      #d4dea7;    /* light green */
@color-label-bg-9:                      #99af6e;    /* green */
@color-label-bg-10:                     #666666;    /* dark gray */

// used in a a LESS loop by color-label-fg-@{counter}
@color-label-fg-1:                      #2a4b6c;    /* for light blue bg */
@color-label-fg-2:                      #0b1624;    /* for blue bg */
@color-label-fg-3:                      #3f0e84;    /* for purple bg */
@color-label-fg-4:                      #8a1c8c;    /* for pink bg */
@color-label-fg-5:                      #a83336;    /* for red bg */
@color-label-fg-6:                      #622906;    /* for orange bg */
@color-label-fg-7:                      #5c4209;    /* for yellow bg */
@color-label-fg-8:                      #526107;    /* for light green bg */
@color-label-fg-9:                      #28350f;    /* for green bg */
@color-label-fg-10:                     @white;     /* for dark gray bg */

// used as 'amount' param for 'darken'
@custom-color-hover-pct:                10%;
@custom-color-pattern-pct:              3%;

/*
 * 4.3 Tasks
 */

@task-priority:                         #ff4700;

@badge-deferred-bg:                     #767676;
@badge-deferred-color:                  @white;

@badge-inprogress-bg:                   #767676;
@badge-inprogress-color:                @white;

@badge-notstarted-bg:                   #767676;
@badge-notstarted-color:                @white;

@badge-done-bg:                         @green;
@badge-done-color:                      @white;

@badge-waiting-bg:                      #767676;
@badge-waiting-color:                   @white;
@badge-overdue-bg:                      @blue;
@badge-overdue-color:                   @white;