// Variables.less // Variables to customize the look and feel of Bootstrap // ----------------------------------------------------- // GLOBAL VALUES // -------------------------------------------------- :root { --zenburn-fg-plus-2: #FFFFEF; --zenburn-fg-plus-1: #F5F5D6; --zenburn-fg: #DCDCCC; --zenburn-fg-1: #A6A689; --zenburn-fg-2: #656555; --zenburn-black: #000000; --zenburn-bg-2: #000000; --zenburn-bg-1: #111112; --zenburn-bg-05: #383838; --zenburn-bg: #2A2B2E; --zenburn-bg-plus-05: #494949; --zenburn-bg-plus-1: #4F4F4F; --zenburn-bg-plus-2: #5F5F5F; --zenburn-bg-plus-3: #6F6F6F; --zenburn-red-plus-2: #ECB3B3; --zenburn-red-plus-1: #DCA3A3; --zenburn-red: #CC9393; --zenburn-red-1: #BC8383; --zenburn-red-2: #AC7373; --zenburn-red-3: #9C6363; --zenburn-red-4: #8C5353; --zenburn-red-5: #7C4343; --zenburn-red-6: #6C3333; --zenburn-orange: #DFAF8F; --zenburn-yellow: #F0DFAF; --zenburn-yellow-1: #E0CF9F; --zenburn-yellow-2: #D0BF8F; --zenburn-green-5: #2F4F2F; --zenburn-green-4: #3F5F3F; --zenburn-green-3: #4F6F4F; --zenburn-green-2: #5F7F5F; --zenburn-green-1: #6F8F6F; --zenburn-green: #7F9F7F; --zenburn-green-plus-1: #8FB28F; --zenburn-green-plus-2: #9FC59F; --zenburn-green-plus-3: #AFD8AF; --zenburn-green-plus-4: #BFEBBF; --zenburn-cyan: #93E0E3; --zenburn-blue-plus-3: #BDE0F3; --zenburn-blue-plus-2: #ACE0E3; --zenburn-blue-plus-1: #94BFF3; --zenburn-blue: #8CD0D3; --zenburn-blue-1: #7CB8BB; --zenburn-blue-2: #6CA0A3; --zenburn-blue-3: #5C888B; --zenburn-blue-4: #4C7073; --zenburn-blue-5: #366060; --zenburn-magenta: #DC8CC3; } @zenburnFgPlus2: #FFFFEF; @zenburnFgPlus1: #F5F5D6; @zenburnFg: #DCDCCC; @zenburnFg1: #A6A689; @zenburnFg2: #656555; @zenburnBlack: #000000; @zenburnBg2: #000000; @zenburnBg1: #111112; @zenburnBg05: #383838; @zenburnBg: #2A2B2E; @zenburnBgPlus05: #494949; @zenburnBgPlus1: #4F4F4F; @zenburnBgPlus2: #5F5F5F; @zenburnBgPlus3: #6F6F6F; @zenburnRedPlus2: #ECB3B3; @zenburnRedPlus1: #DCA3A3; @zenburnRed: #CC9393; @zenburnRed1: #BC8383; @zenburnRed2: #AC7373; @zenburnRed3: #9C6363; @zenburnRed4: #8C5353; @zenburnRed5: #7C4343; @zenburnRed6: #6C3333; @zenburnOrange: #DFAF8F; @zenburnYellow: #F0DFAF; @zenburnYellow1: #E0CF9F; @zenburnYellow2: #D0BF8F; @zenburnGreen5: #2F4F2F; @zenburnGreen4: #3F5F3F; @zenburnGreen3: #4F6F4F; @zenburnGreen2: #5F7F5F; @zenburnGreen1: #6F8F6F; @zenburnGreen: #7F9F7F; @zenburnGreenPlus1: #8FB28F; @zenburnGreenPlus2: #9FC59F; @zenburnGreenPlus3: #AFD8AF; @zenburnGreenPlus4: #BFEBBF; @zenburnCyan: #93E0E3; @zenburnBluePlus3: #BDE0F3; @zenburnBluePlus2: #ACE0E3; @zenburnBluePlus1: #94BFF3; @zenburnBlue: #8CD0D3; @zenburnBlue1: #7CB8BB; @zenburnBlue2: #6CA0A3; @zenburnBlue3: #5C888B; @zenburnBlue4: #4C7073; @zenburnBlue5: #366060; @zenburnMagenta: #DC8CC3; // Scaffolding // ------------------------- @bodyBackgroundLight: @zenburnBgPlus1; @bodyBackground: @zenburnBg; @bodyBackgroundDark: @zenburnBg1; @zenburnFgLight: @zenburnFgPlus1; @zenburnFgDark: @zenburnFg1; @textColor: @zenburnFg; // Grays // ------------------------- @black: @bodyBackgroundDark; @grayDarker: @bodyBackground; @grayDark: @bodyBackgroundLight; @gray: @zenburnBgPlus3; @grayLight: @zenburnBgPlus2; @grayLighter: @zenburnFg2; @white: @zenburnFgPlus1; // Accent colors // ------------------------- @blue: @zenburnBlue; @blueDark: @zenburnBlue1; @green: @zenburnGreen; @red: @zenburnRed; @yellow: @zenburnYellow; @orange: @zenburnOrange; @pink: @zenburnRedPlus1; @purple: @zenburnMagenta; // Links // ------------------------- @linkColor: @blueDark; @linkColorHover: @blue; // Typography // ------------------------- @import url('https://fonts.googleapis.com/css?family=Alegreya:400,400i,500,500i,700,700i,800,800i,900,900i&subset=greek,greek-ext,latin-ext'); @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:100,100i,300,300i,400,400i,500,500i,700,700i,800,800i,900,900i&subset=greek,greek-ext,latin-ext'); @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400,500,600,700,900&subset=latin-ext'); @sansFontFamily: "Alegreya Sans", Helvetica, Arial, sans-serif; @serifFontFamily: "Alegreya", Georgia, "Times New Roman", Times, serif; @monoFontFamily: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace; @baseFontSize: 13pt; @baseFontFamily: @sansFontFamily; @baseLineHeight: 16pt; @altFontFamily: @serifFontFamily; @headingsFontFamily: @serifFontFamily; // empty to use BS default, @baseFontFamily @headingsFontWeight: bold; // instead of browser default, bold @headingsColor: @textColor; // empty to use BS default, @textColor // Tables // ------------------------- @tableBackground: transparent; // overall background-color @tableBackgroundAccent: @bodyBackgroundLight; // for striping @tableBackgroundHover: var(--zenburn-bg-plus-05); // for hover @tableBorder: @grayDarker; // table and cell border // Buttons // ------------------------- @btnBackground: @zenburnBg2; @btnBackgroundHighlight: @zenburnBg1; @btnBorder: @grayDarker; @btnPrimaryBackground: @linkColor; @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 10%); @btnInfoBackground: @blueDark; @btnInfoBackgroundHighlight: @blue; @btnSuccessBackground: @green; @btnSuccessBackgroundHighlight: @zenburnGreenPlus1; @btnWarningBackground: @orange; @btnWarningBackgroundHighlight: @zenburnYellow; @btnDangerBackground: @red; @btnDangerBackgroundHighlight: @zenburnRedPlus1; @btnInverseBackground: @gray; @btnInverseBackgroundHighlight: @grayDarker; // Forms // ------------------------- @inputBackground: @grayDark; @inputBorder: @grayDarker; @inputBorderRadius: 2pt; @inputDisabledBackground: @grayLighter; @formActionsBackground: @zenburnFgLight; // Dropdowns // ------------------------- @dropdownBackground: @grayDark; @dropdownBorder: @grayDarker; @dropdownLinkColor: @zenburnFg; @dropdownLinkColorHover: @zenburnFgLight; @dropdownLinkBackgroundHover: @linkColor; // COMPONENT VARIABLES // -------------------------------------------------- // Z-index master list // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) @zindexDropdown: 1000; @zindexPopover: 1010; @zindexTooltip: 1020; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; // Sprite icons path // ------------------------- @iconSpritePath: "../img/glyphicons-halflings.png"; @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; @rssIconPath: "../img/feed.png"; @ajaxLoaderPath: "../img/ajax-loader.gif"; // Input placeholder text color // ------------------------- @placeholderText: @zenburnFgDark; // Hr border color // ------------------------- @hrBorder: @grayDarker; // Navbar // ------------------------- @navbarHeight: 40pt; @navbarBackground: @bodyBackgroundLight; @navbarBackgroundHighlight: var(--zenburn-bg-plus-05); @navbarBorderColor: @grayDarker; @navbarText: @zenburnFgDark; @navbarLinkColor: @zenburnFgLight; @navbarLinkColorHover: @linkColor; @navbarLinkColorActive: @navbarLinkColorHover; @navbarSearchBackground: var(--zenburn-bg-plus-2); @navbarSearchBackgroundFocus: @white; @navbarSearchBorder: @grayDarker; @navbarSearchPlaceholderColor: #ccc; @navbarBrandColor: @navbarLinkColor; // Form states and alerts // ------------------------- @warningText: #c09853; @warningBackground: #fcf8e3; @warningBorder: @grayDarker; @errorText: #b94a48; @errorBackground: #f2dede; @errorBorder: @grayDarker; @successText: #468847; @successBackground: #dff0d8; @successBorder: @grayDarker; @infoText: #3a87ad; @infoBackground: #d9edf7; @infoBorder: @grayDarker; // GRID // -------------------------------------------------- // Default 480pt grid // ------------------------- @gridColumns: 12; @gridColumnWidth: 40pt; @gridGutterWidth: 20pt; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Fluid grid // ------------------------- @fluidGridColumnWidth: 6.382978723%; @fluidGridGutterWidth: 2.127659574%; // Tree @treeHeader: @navbarBackground; @treeHeaderHighlight: @navbarBackgroundHighlight; @treeHeaderBorder: @grayDarker;