git.fiddlerwoaroof.com
Raw Blame History
// 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;