Skip to content
Snippets Groups Projects
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
_variables.less 16.13 KiB
/*
 * Copyright (c) 2018 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 *
 * SPDX-License-Identifier: EPL-2.0
*/

// Default variables

//== Colors
@import "~bootstrap/less/variables.less";

@brand-primary:         #2c2255; // Eclipse purple
@brand-secondary:       #868685; // Grey
@brand-tertiary:        #afbbdc; // Baby blue
@brand-quaternary:      #342343; // Dark purple
@brand-quinary:         #bed247; // lime green
@brand-info:            #afbbdc; // Baby blue
@brand-info-light:      #dbe3f8; // Light baby blue
@brand-warning:         #f7941e; // Orange

//== Links
//** Global textual link color.
@link-color:            #337ab7;
//** Link hover color set via `darken()` function.
@link-hover-color:      darken(@link-color, 10%);
//** Link hover decoration.
@link-hover-decoration: underline;
//** Link visited color
@link-visited-color: #9e55d2;


//== Static colors
// Only use when really necessary

@orange:                #f7941e;
@purple:                #2c2255;
@blue:           rgb(0, 0, 255);
@blue-dark:             #2c2255;
@blue-light:            #afbbdc;
@blue-lighter:          #dfe2ed;
@green-dark:            #5a6700;
@green-light:           #c0d050;
@green-lighter:         #faffd4;
@gray-mid-light:           #ccc;
@gray:                  #2f2f2f;
@white:                    #fff;
@black:                 #000000;
@red:                   #ff0000;

@eclipse-light-grey: #e8e8e8;
@eclipse-highlight-grey: #f5f5f5;

//== /template/header.less
@header-background:#fff;
@header-toolbar-background-color:@header-background;
@header-toolbar-color:#666;
@header-toolbar-color-hover:@brand-warning;

//==  Mobile menu colors

// Main colors for the menu
@mobile-menu-background: #2c2255;
@mobile-menu-nav-background: @brand-primary;
@mobile-menu-hover: @brand-warning;
@mobile-menu-color:#fff;

// Colors for active link
@mobile-menu-open-active-background: #efeef2;
@mobile-menu-open-active-color: #fff;

// Default Menu
@main-menu-link-color: #787878;
@main-menu-link-active-color: @brand-warning;
@main-menu-link-hover-color: @brand-warning;
@main-menu-link-hover-bg-color:transparent;
@main-menu-link-transform:uppercase;
@main-menu-link-size:1em;
@main-menu-dropdown-menu-background:@white;
@main-menu-dropdown-link-color: #787878;
@main-menu-dropdown-link-active-color: @brand-warning;
@main-menu-dropdown-link-hover-color: @brand-warning;

// Default dropdown link colors
@mobile-menu-background: #efeef2;
@navbar-toggle-icon-background: @brand-primary;
@mobile-main-menu-link-size:@main-menu-link-size;
@mobile-main-menu-link-padding:10px 15px;
@mobile-main-menu-link-border-bottom:none;
@mobile-menu-dropdown-menu-background: #2a2a2c;
@mobile-menu-dropdown-menu-color: #fff;
@mobile-menu-dropdown-menu-hover: #000;
@mobile-menu-dropdown-menu-hover-background: #f5f5f5;
@mobile-menu-dropdown-menu-active-background: @brand-warning;
@mobile-menu-dropdown-menu-active-color: #fff;
@mobile-menu-dropdown-menu-active-hover: #000;
@mobile-menu-dropdown-menu-active-hover-background: #f5f5f5;
@mobile-menu-dropdown-menu-border-bottom:none;
@mobile-menu-logo-max-width:130px;

//== Alternate styles
@alternate-header-background:@header-background;
@alternate-header-toolbar-background-color:@header-background;
@alternate-header-toolbar-color:@header-toolbar-color;
@alternate-header-toolbar-color-hover:@header-toolbar-color-hover;
@alternate-main-menu-link-size:@main-menu-link-size;
@alternate-main-menu-link-transform:@main-menu-link-transform;
@alternate-main-menu-link-color:@main-menu-link-color;
@alternate-main-menu-link-active-color:@main-menu-link-active-color;
@alternate-mobile-menu-background:@header-background;
@alternate-mobile-main-menu-link-size:@mobile-main-menu-link-size;

//== Bugzilla menu
@bugzilla-menu-link-color: @main-menu-link-color;

//== Typography
@font-family-sans-serif:  "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

@headings-font-weight:    300;
@headings-color:          @brand-primary;

//== Forms

//** Placeholder text color
@input-color-placeholder:        @gray-light;

//== Grid system

//** Number of columns in the grid.
@grid-columns:              24;

//== Panels

@panel-bg:                    @eclipse-highlight-grey;
@panel-border-radius:         0px;
@panel-default-heading-bg:    @blue-light;
@panel-default-text:          @white;

//== Projects Variables

@project-list-text: #333;
@project-list-icon-enabled: #666;
@project-list-icon-disabled: @blue-lighter;
@project-list-background-color: @blue-lighter;
@project-list-collapse-odd-background-color: #f5f3f4;

@project-build-border-color: #c8c8c8;
@project-build-header-background-color: black;


//== Breadcrumbs
@breadcrumb-padding-vertical:   20px;
@breadcrumb-padding-horizontal: 30px;

@breadcrumb-background: url('../images/template/breadcrumbs-large-bg.jpg') center #1b1732;
@breadcrumb-color: #ababab;
@breadcrumb-active-color: #fff;
@breadcrumb-hover: @brand-warning;
@breadcrumb-border-bottom: none;
@breadcrumb-border-top: @breadcrumb-border-bottom;
@breadcrumb-font-size:inherit;
@breadcrumb-font-weight:600;
@breadcrumb-text-transform: uppercase;
@breadcrumb-sharethis-padding: 15px 0 0 0;

//== Logo
@logo-eclipse-default-margin: 0;


//== Main
@main-background: transparent;

//== Sidebar

@solstice-sidebar-h2-background:@blue-light;

//== Footer

@footer-background: no-repeat center center #242426;
@footer-padding-top: 3.5em;
@footer-working-group-background: url('../images/template/footer-working-group-separator.png') center repeat-y;
@footer-color: #a8a7a9;
@footer-border-top: 1px solid @brand-warning;
@footer-h2-color: #fff;
@footer-h2-max-width: 80%;
@footer-h2-font-weight: 300;
@footer-h2-font-size: 21px;

@footer-link-color: #a8a7a9;
@footer-link-font-weight:400;
@footer-link-hover: @brand-warning;
@footer-nav-link-padding: 6px 15px 6px 20px;

@footer-offset-margin-bottom:-28px;

@footer-darker-background:#000000;
@footer-darker-color:#fff;
@footer-darker-link-color:#fff;
@footer-darker-link-hover:rgba(255, 255, 255, 0.788);

@view-footer-border-bottom:#efefef;
@view-footer-background:#e9eef4;
@view-footer-color:#a2a2a2;
//== Tabs

// Standard tabs variables
@solstice-tabs-background: lighten(@gray, 75%);
@solstice-tabs-color: @gray;
@solstice-tabs-font-weight: normal;
@solstice-tabs-hover: lighten(@gray, 65%);
@solstice-tabs-active-hover: @white;
@solstice-tabs-active-color:@gray;
@solstice-tabs-hover-color: @gray;
@solstice-tabs-active-font-weight: normal;
@solstice-tabs-border: 1px solid lighten(@gray, 75%);
@solstice-tabs-pane-background-color:transparent;

// Dark tabs variables
@solstice-tabs-dark-background:lighten(@gray, 70%);
@solstice-tabs-dark-hover: lighten(@gray, 60%);
@solstice-tabs-dark-border: 1px solid lighten(@gray, 70%);
@solstice-tabs-dark-pane-background-color:@white;

//== About Author

@about-author-h2-bg: @brand-warning;

//== IWG Members

@iwg-members-readmore-background-size:auto;
@iwg-members-readmore-background: @brand-primary;
@iwg-members-readmore-border: 1px solid #ccc;
@iwg-members-heading-border-color: #ccc;
@iwg-members-readmore-padding:35px 0;
@iwg-members-style-logo-box-shadow:0 10px 6px -6px #999;

//== News and Blogs

@news-blog-date-bg:#f4d920;
@news-blog-date-bg-outdated: darken(@white, 30%);
@news-blog-date-color:#fff;
@news-blog-date-font-weight:bold;
@news-h2-color:#787878;
@news-h2-border:1px solid #e5e5e5;
@news-h2-size:35px;

//== Layout A
@news-layout-a-field-name-field-event-date:#eee;
@news-layout-a-border-bottom:1px solid #eee;
@news-layout-a-h2-size:17px;
@news-layout-a-h2-color:#787878;
@news-layout-a-h2-border-bottom:1px solid #e5e5e5;

//== Layout B
@news-layout-b-h2-size:23px;
@news-layout-b-h2-color:@brand-primary;
@news-layout-b-h2-a-color:@brand-primary;
@news-layout-b-h2-a-hover-color: darken(@news-layout-b-h2-a-color, 20%);
@news-layout-b-text-color:#666666;
@news-layout-b-solstice-well-padding:30px;
@news-layout-b-odd-background-color:#f8f8f8;
@news-layout-b-odd-border-bottom:1px solid #c4c4c4;
@news-layout-b-solstice-submitted-margin-bottom:20px;
@news-layout-b-solstice-submitted-author-color:#a3a3a3;
@news-layout-b-margin-bottom:20px;

@feed-icon-position:absolute;
@feed-icon-top:4px;
@feed-icon-right:0;
@feed-icon-visited-color:@brand-warning;
@feed-icon-hover-color:@brand-primary;
@feed-icon-padding-right:15px;
//== Nav
@nav-list-link-color:@brand-primary;


//== Tables

@tables-background-color: @brand-tertiary;
@tables-color: @white;

//==  Slideshow
@slideshow-background-color: transparent;
@slideshow-background-image: none;
@slideshow-content-background: rgba(255, 255, 255, 0.85);
@slideshow-content-padding: 60px 40px 60px 40px;
@slideshow-link-color: @brand-secondary;
@slideshow-link-color-hover: darken(@slideshow-link-color, 20%);
@slideshow-text-color: @white;
@slideshow-h2-fw: 300;
@slideshow-h2-color:@brand-primary;
@slideshow-h2-link-color: @brand-primary;
@slideshow-h2-link-fw: 700;
@slideshow-h2-link-color-hover: darken(@slideshow-h2-link-color, 20%);
@slideshow-p-font-size: 1.25em;
@slideshow-secondary-background: @brand-primary;
@slideshow-secondary-text-color: @brand-primary;
@slideshow-secondary-link-color: @brand-primary;
@slideshow-secondary-link-color-hover: darken(@slideshow-secondary-link-color, 20%);
@slideshow-secondary-text-color: @brand-primary;
@slideshow-secondary-h2-fw: 300;
@slideshow-secondary-h2-color:@brand-primary;
@slideshow-secondary-h2-link-color: @brand-primary;
@slideshow-secondary-h2-link-fw: 700;
@slideshow-secondary-h2-link-color-hover: darken(@slideshow-secondary-h2-link-color, 20%);
@slideshow-secondary-p-font-size: 1.25em;
@slideshow-frontpage-border-top:none;
@slideshow-frontpage-border-bottom: none;
@slideshow-frontpage-padding:60px 0;
@slideshow-content-text-align:center;

//== IWG
@page-header-logo-border-top: 1px solid @gray-mid-light;
@page-header-logo-border-bottom:1px solid @gray-mid-light;

//== Button transparent
@btn-transparent-background:transparent;
@btn-transparent-border-color:@white;
@btn-transparent-color: @btn-transparent-border-color;
@btn-transparent-color-hover: @brand-primary;
@btn-transparent-color-hover-background:#ccc;
@btn-transparent-color-hover-border-color:@brand-primary;
@btn-transparent-font-size:11px;
@btn-transparent-padding:7px 15px;
@btn-font-weight: 700;
@btn-font-size: 18px;
@btn-text-transform: uppercase;
@btn-secondary-color:@white;
@btn-secondary-bg:@brand-secondary;
@btn-secondary-border:@brand-secondary;

//== Solstice Highlight
@highlight-background:@white;
@highlight-background-hover:darken(@white,5%);
@highlight-vertical-borders:1px solid #c7c9cf;
@highlight-border-top:1px solid #c7c9cf;
@highlight-border-bottom:1px solid #c7c9cf;
@highlight-mobile-border-bottom:1px solid #c7c9cf;
@highlight-margin-bottom:3em;
@highlight-text-align:center;
@highlight-icon-font-size:3.8em;
@highlight-icon-color:@brand-info;
@highlight-h3-font-size:24px;
@highlight-h3-color:inherit;
@highlight-h3-color-hover:@brand-info;
@highlight-items-padding:30px 15px;

//== Testimonials
@testimonials-quotes-color:#eaeaea;
@testimonials-quotes-font-size:24px;
@testimonials-job-title-color:#693703;

//== Sidebar
@sideitem-bg:#f6f6f6;
@sideitem-color:#202020;
@sideitem-border:none;
@sideitem-margin: 0 0 2em 0;
@sideitem-padding: 0 0 5px 0;
@sideitem-heading-bg:@brand-info;
@sideitem-heading-color:#fff;
@sideitem-heading-color-hover:#fff;
@sideitem-heading-margin:0 0 15px 0;
@sideitem-heading-padding:15px 20px;
@sideitem-heading-transform:uppercase;
@sideitem-heading-weight:700;
@sideitem-heading-size:15px;
@sideitem-p-padding:0 15px 15px;

//== Drupal/components/site-login-user-menu.less
@site-login-user-menu-color: #fff;
@site-login-user-menu-background: #8a7fb6;

@solstice-user-profile-h3-link-color:@brand-secondary;
@solstice-user-profile-h3-link-color-hover:darken(@brand-secondary, 10%);
@solstice-user-profile-social-link-color:@brand-secondary;
@solstice-user-profile-social-link-color-hover:lighten(@brand-secondary, 20%);

//== Drupal/components/block.less
@solstice-block-white-bg-title-color: #8a7fb6;
@solstice-block-white-bg-title-border-color:#d7d7d7;

//== Labels
@label-purple-bg: @brand-primary;

//== Jumbotron
@jumbotron-bg-color:@brand-secondary;
@jumbotron-color:#2c2255;
@jumbotron-text-align:center;
@jumbotron-h1-size:52px;
@jumbotron-h1-weight:bold;
@jumbotron-icon-size:60px;
@jumbotron-link-color:inherit;
@jumbotron-link-color-hover:inherit;
@jumbotron-link-color-visited:inherit;
// default font weight
@jumbotron-p-weight: 400;
// alternate font style
// example: /org/value
@jumbotron-alternate-text-align:left;
@jumbotron-alternate-h1-size:34px;
@jumbotron-alternate-h1-mobile-size:34px;
@jumbotron-alternate-h1-weight:400;
@jumbotron-alternate-p-size:52px;
@jumbotron-alternate-p-mobile-size:52px;
@jumbotron-alternate-p-weight:bold;

//== Featured background color
@featured-primary-bg-color:@brand-primary;
@featured-primary-text-color:@white;
@featured-secondary-bg-color:@brand-secondary;
@featured-secondary-text-color:@white;
//== Featured Footer
@featured-footer-padding:30px 0px;
@featured-footer-text-align:center;
@featured-footer-text-color:@white;
@featured-footer-icon-size:40px;
@featured-footer-input-color:#c7ccd1;
@featured-footer-margin-bottom:-30px;

// Featured Story
@featured-story-bg-color:@white;
@featured-story-h2-color:#6d6193;
@featured-story-p-size:21px;
@featured-story-ad-bg-color:#eaeaeb;
@featured-story-ad-shape:polygon(0 0, 100% 0, 100% 100%, 0 100%, 37% 51%);
@featured-story-ad-p-color:#9b9b9b;
@featured-story-ad-p-size:12px;

//== Featured
@featured-block-list-h2-color:@brand-tertiary;
@featured-block-list-icon-color:@brand-primary;
@featured-block-list-media-link-bg-color:@white;
@featured-block-list-media-link-bg-color-hover:lighten(@brand-primary, 30%);
@featured-block-list-media-link-color:#484848;
@featured-block-list-media-heading-size:19px;
@featured-block-list-media-heading-weight:bold;
@featured-block-list-media-heading-color:@featured-block-list-media-link-color;
@featured-block-list-media-text-color:@featured-block-list-media-link-color;
@featured-block-list-links-color:#c9cbcd;

//== Header highlight
@heading-underline-thickness: 4px;
@heading-underline-border: @heading-underline-thickness solid @brand-secondary;
@heading-underline-weight: 200;
@heading-underline-margin: 50px 0 20px;
@heading-underline-font-size: 2em;

//== Solstice loading
@solstice-loading-padding: 50px 0;
@solstice-loading-size: 96px;

//== Bordered box
@bordered-box-padding: 20px;
@bordered-box-heading-padding: 20px;
@bordered-box-logo-padding: 10px 0 10px 40px;
@bordered-box-border: 1px solid #ededed;
@light-bordered-box-border: 1px solid #ededed;
@light-bordered-box-bg-color: @white;

//== Body navigation
@content-nav-tab-active-tab-bg-color: @white;
@content-nav-tab-mobile-active-tab-bg-color: #f79422;
@content-nav-tab-mobile-active-tab-color: @white;
@content-nav-tab-mobile-tab-bg-color: fade(@content-nav-tab-mobile-active-tab-bg-color, 25%);
@content-nav-tab-mobile-tab-color: @black;
@content-nav-tab-mobile-tab-hover-bg-color: darken(@content-nav-tab-mobile-active-tab-bg-color, 10%);
@content-nav-tab-mobile-tab-hover-color: @white;
@content-nav-tab-mobile-toggle-bg-color: #404040;
@content-nav-tab-mobile-toggle-color: @white;
@content-nav-tab-mobile-toggle-font-size: 18px;


//== Adopters
@adopters-button-font-size: 12px;
@adopters-button-radius-base: 21px;
@adopters-title-border-bottom: 1px solid #999;
@adopters-image-max-height: 95px;
@adopters-image-min-width: 170px;
@adopters-image-max-width: 170px;

//== Badges
@badge-bg-color:transparent;
@badge-color:@text-color;
@badge-border:1px solid #ccc;
@badge-notifications-bg-color:#f42f2f;
@badge-notifications-color:#fff;
@badge-notifications-font-size:10px;
@badge-green-bg-color:#d6efd6;
@badge-green-border-color:#63b763;
@badge-red-bg-color:#efd6d6;
@badge-red-border-color:#b76363;
@badge-blue-bg-color:#c6dce8;
@badge-blue-border-color:#638cb7;

//== Coming Soon
@coming-soon-heading-color:#fff;
@coming-soon-heading-fw:700;
@coming-soon-container-bg: rgba(0, 0, 0, 0.666);
@coming-soon-container-color:#fff;
@coming-soon-container-link-color: @brand-primary;
@coming-soon-container-margin-top: 2rem;
@coming-soon-container-margin-bottom:8rem;
@coming-soon-container-padding: 2.2rem 2rem;