/**
* @file plugins/themes/default/styles/variables.less
*
* Copyright (c) 2014-2021 Simon Fraser University
* Copyright (c) 2003-2021 John Willinsky
* Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
*
* @brief Common variables used through the the theme styles. They provide a
* fully separated interface for defining variables, so that changes desired on
* the frontend won't impact the backend.
*/
//
// Colors
//
// Background
@bg: #fff;
@bg-shade: #ddd;
@bg-base: #1E6292; // Accent color used in the header
// Primary "anchor" color for links
@primary: #006798;
@primary-lift: lighten(@primary, 10%);
// Yes/no, success/error, on/off, go/stop, etc. Typically green and red.
@yes: #00b24e;
@no: #ff4040;
// Text
@text: rgba(0,0,0,0.87);
@text-light: rgba(0,0,0,0.54);
@text-bg-base: #fff;
// Border colors
@bg-border-color: @bg-shade;
@bg-base-border-color: rgba(255,255,255,0.1);
//
// Spacing
//
// The baseline size should be used to achieve consistent vertical rhythm. All
// vertical margins, padding, line-height and block heights should use a
// multiple of this baseline (or half). Where appropriate, horizontal
// spacings should also use this baseline. However, in some cases with inline
// elements it is more appropriate to use an `em` spacing.
//
@rem: 14px;
@base: 0.714rem;
@half: 0.357rem;
@double: 1.43rem;
@triple: 2.143rem;
@quadruple: 2.857rem;
//
// Typography
//
@font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
@font-heading: @font;
@font-site-title: @font-heading;
@font-sml: 0.93rem;
@line-sml: 1.43rem;
@font-base: 1rem;
@line-base: 1.43rem;
@line-base-large: 1.785rem; // large blocks of text
@font-bump: 1.143rem;
@line-bump: 1.43rem;
@font-lead: 1.285rem;
@line-lead: 2.143rem;
@font-header: 1.714rem;
@line-header: 2.143rem;
// Font weights
@normal: 400;
@bold: 700;
//
// Borders
//
@bg-border: 1px solid @bg-border-color;
@form-border: 1px solid rgba(0,0,0,0.4);
@radius: 3px;
//
// Screen width breakpoints
//
@screen-phone: 480px;
@screen-tablet: 768px;
@screen-tablet-container: @screen-tablet - 40px;
@screen-desktop: 992px;
@screen-desktop-container: @screen-desktop - 40px;
@screen-lg-desktop: 1200px;
@screen-lg-desktop-container: @screen-lg-desktop - 40px;
// Fixed widths and heights
@sidebar-width: 300px;
@logo-height: 8.571rem;
// Base URL
// The base URL is set appropriately before the LESS stylesheet is compiled and
// will point to the theme's base directory. The variable can be used to point
// to image and font assets.
@base-url: ''; // Leave empty
|