Variables
Content of src/themes/definitions.scss
/*
* - 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
*/
@import 'temp-vars';
@import 'temp-mixins';
/*
* 1.1 Base colors
*/
$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.3 High contrast colors
*/
$hc-gray: #767676;
$hc-green: #198919;
$hc-link-color: #3774a8;
$hc-border-color: $hc-gray;
/*
* 1.4 Typography
*/
$light-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$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-on-dark: #3bf;
$inline-link-border-color: #eee;
$inline-links-margin: 18px 0;
/*
* 1.7 Icons
*/
$trash-icon-hover-background: $red;
$trash-icon-hover-color: $white;
// only used for some upsell items as default yet (therefore not documented)
$upsell-icon-color: #ffc107;
/*
* 1.8 Images
*/
$theme: 'default';
$fallback-image-contact: '@/themes/#{$theme}/assets/fallback-image-contact.png';
$fallback-image-group: '@/themes/#{$theme}/assets/fallback-image-group.png';
$fallback-image-resource: '@/themes/#{$theme}/assets/fallback-image-resource.png';
$onboarding-mailapp-appstore: '@/themes/default/assets/mobileapps/mailapp_ios.png';
$onboarding-mailapp-googleplay: '@/themes/default/assets/mobileapps/mailapp_android.png';
$onboarding-driveapp-googleplay: '@/themes/default/assets/mobileapps/driveapp_android.png';
$onboarding-driveapp-appstore: '@/themes/default/assets/mobileapps/driveapp_ios.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%;
// 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: blue;
$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-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 */
/*
* 3. COMPONENTS
*/
/*
* 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.5 Toolbar
*/
$toolbar: blue;
$toolbar-vertical-padding: 8px;
$toolbar-height: 24px + 2 * $toolbar-vertical-padding;
$link-disabled-color: $dark-silver;
$link-accent-color: #ffad00;
/*
* 3.6 Premium toolbar
*/
$premium-toolbar-background: blue;
$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.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.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%;
/* light blue */
$weekview-time-width: 80px;
$weekview-footer-height: 34px;
$weekview-working-time-border: #aaa;
/*
* Presence
*/
$presence-color-online: #7CB342;
$presence-color-busy: #d00;
$presence-color-absent: #ffa500;