variables.less

@import (reference) "upstream_bootstrap/variables";

// Common color palette. These are the only colors that should be used!
@ytp-brand-primary:    #1467b6; //#266ab9; // Primary navigation/interaction/focus color
@ytp-brand-decorative: #00519b; // Decorative secondary color
@ytp-brand-complementary: #3F3D37;
@ytp-brand-gray:       darken(#908B7C, 20%); //#88827A; // Neutral grayish elements
@ytp-brand-dark:       #333333; // Secondary background color
@ytp-brand-success:    #5cb85c; // Interaction color, successful positive color
@ytp-brand-info:       #5bc0de; // Notification color, important but not critical
@ytp-brand-warning:    #f0ad4e; // Slightly dangerous and important element
@ytp-brand-danger:     #d9534f; // Very dangerous, error information and destructive interaction
@brand-primary: @ytp-brand-primary;
@brand-info: @ytp-brand-decorative;

@font-family-sans-serif: 'Open Sans', sans-serif;

// Button colors
@btn-default-color:    #333;
@btn-default-bg:       #FFF;
@btn-default-border:   #e8e7e6;

// For very 'extra' information, meant for small text on white/light backgrounds
@nonimportant-text-color: lighten(@ytp-brand-gray, 0%);

// Light background to emphasize a subarea in main content, gives a "post-it note" feeling
//@background-hilight: lighten(#D3CDB5, 10%);
@background-hilight-primary: lighten(#D3CDC5, 16%);
@background-hilight: lighten(#D3CDC5, 16%);

// Bootstrap: Grid
@grid-gutter-width: 50px;

// Bootstrap: Alerts
@alert-padding: 8px;
@alert-info-bg: @ytp-brand-decorative; //lighten(@ytp-brand-primary, 30%);
@alert-info-border: @ytp-brand-decorative;
@alert-info-text: lighten(@ytp-brand-decorative, 54%); //@ytp-brand-primary;
@alert-link-font-weight: 500;

//Color and background for FAVORITE datasets
@popularTextColor: white;
@popularBackgroundColor: #FFBB44;

// Light border lines that separate UI areas
@section-border-color: lighten(@ytp-brand-gray, 60%);

// Borders for content: input fields, comments etc. on areas with gray background
@content-border: lighten(@ytp-brand-gray, 25%);

// Text color that is on a colored background (labels, buttons, carousel)
@button-inverse-text-color: white;

// Search box, carousel etc.
@block-color-background: @ytp-brand-primary;
@block-color: @button-inverse-text-color;
@block-color-hilight: lighten(@ytp-brand-primary, 0%);
@block-color-light: #FFF;

// Tweak Bootstrap brand colors (label, button etc.)
@label-default-bg: @ytp-brand-gray;
@label-primary-bg: lighten(@ytp-brand-primary, 0%);

@link-color: @ytp-brand-primary;
@link-hilight: darken(@ytp-brand-primary, 10%);

// Name label for input fields and for showing the key/value-pairs
@field-label-color: darken(@ytp-brand-gray, 30%);

// Help text inside input fields
@input-color-placeholder: lighten(@ytp-brand-gray, 35%);
@input-color: #222;
@input-readonly: #555;

// Vertical side menu and horizontal main menu
@menu-active-color: #fff;
@menu-link-active-color: @ytp-brand-complementary;
@menu-link-color: #eee;
@menu-link-background: @ytp-brand-primary;
@menu-link-hover-color: #fff;
@menu-hover-color: @ytp-brand-decorative;

@body-color-background: white;

// Footer colors
@footer-background: @ytp-brand-dark;
@footer-text-color:      #fff;

// Drupal article tags
// TODO where is this used
@node-meta-submitted: #cccccc;

@select-border-color: #cccccc;
@select-background: white;

// Rest of the variables
@navbar-inverse-link-color: @ytp-brand-decorative;
@navbar-color-background: @ytp-brand-complementary;
@navbar-color-text: #ffffff;
@navbar-color-darker: #999999;
@navbar-height: 40px;
@navbar-responsive-toggle-background: #000;

@infowell-color-dark: #175971;
@infowell-color-medium: #258bb1;
@infowell-color-light: #27b0dc;

@main-hilight-color: #1f7994;

// Breadcrumbs: TODO these colors do not seem to affect the whole breadcrumb
@breadcrumbTextColor: darken(@ytp-brand-gray, 0%);
@breadcrumb-color: darken(@ytp-brand-gray, 0%);

// TODO workaround for having buttons with both 'a' and 'button' tags
@button-background: #999999;
@button-hilight: #747474;
@button-primary-background: @ytp-brand-primary;
@button-primary-hilight: #0f54a2;
@button-primary-border: #7CA9CC;
@button-border: #9a9d9e;

// TODO remove if there is no footer
@footer-color: @nonimportant-text-color;
@footer-border: @section-border-color;

// Responsive layout widths
@secondary-width: 280px;
@container-horizontal-padding: 40px;
@grid-float-breakpoint: @screen-md-min;

@button-border-radius: 8px;
@border-radius-large: 0px;