221V
/
Misago


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
							//
// Misago Variables
// --------------------------------------------------


//== Colors
//
//## Basic colors for use in this flavor

@brand-primary:         #3498db;
@brand-accent:          #e74c3c;
@brand-success:         #2ecc71;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #e74c3c;

@brand-follow:          #EB5BCC;
@brand-block:           @brand-danger;


// Background color for `<body>`.
@body-bg:               #fff;

// Global text color on `<body>`.
@text-color:            #333;

// Global state colors
@state-default:         @gray-light;
@state-hover:           @text-color;
@state-clicked:         @brand-primary;
@state-active:          @brand-accent;

@state-online:                #2ecc71;
@state-offline:               #95a5a6;
@state-banned:                #e74c3c;


// Headings color
@headings-small-color:  darken(@body-bg, 30%);

// Global textual link color.
@link-color:            @brand-primary;
@link-hover-color:      darken(@link-color, 15%);

// Text muted color
@text-muted:            darken(@body-bg, 40%);

@link-muted-color:            @gray-darker;

// Components
@component-active-bg:         @state-active;
@component-active-color:      #fff;

@loader-color:                @brand-accent;
@loader-text-color:           @text-muted;

//== Navbar
//
//## Navbar style

@navbar-default-bg:                lighten(#ecf0f1, 3%);
@navbar-default-border:            #ecf0f1;


// Navbar brand
@navbar-brand-size:                        @font-size-large * 1.6;

@navbar-default-brand-color:               #555;
@navbar-default-brand-hover-color:         #555;


// Navbar icon-based menu
@navbar-icon-size:                      @navbar-height / 2.5;
@navbar-icon-link-bg:                   transparent;
@navbar-icon-link-border:               transparent;
@navbar-icon-link-color:                @state-default;

@navbar-icon-link-hover-bg:             darken(@navbar-default-border, 2%);
@navbar-icon-link-hover-border:         darken(@navbar-default-border, 2%);
@navbar-icon-link-hover-color:          @state-hover;

@navbar-icon-link-active-bg:            darken(@navbar-default-border, 2%);
@navbar-icon-link-active-border:        darken(@navbar-default-border, 2%);
@navbar-icon-link-active-color:         @state-clicked;

@navbar-icon-link-open-bg:              @state-active;
@navbar-icon-link-open-border:          @state-active;
@navbar-icon-link-open-color:           #fff;


// Only User dropdown switch uses those colors
@navbar-user-name-color:                @gray;
@navbar-user-name-hover-color:          @navbar-user-name-color;
@navbar-user-name-active-color:         @state-clicked;

@navbar-user-caret-color:              @state-default;
@navbar-user-caret-hover-color:        @state-hover;
@navbar-user-caret-active-color:       @state-clicked;


// Guest Sign in button
@btn-sign-in-color:                    @brand-primary;
@btn-sign-in-bg:                       @navbar-default-bg;
@btn-sign-in-border:                   transparent;

@btn-sign-in-hover-color:              @brand-primary;
@btn-sign-in-hover-bg:                 fadeOut(@brand-primary, 90%);
@btn-sign-in-hover-border:             transparent;

@btn-sign-in-active-color:             #fff;
@btn-sign-in-active-bg:                @brand-primary;
@btn-sign-in-active-border:            @brand-primary;


// Guest Register button
@btn-register-color:                   fadeOut(@brand-accent, 30%);
@btn-register-bg:                      @navbar-default-bg;
@btn-register-border:                  fadeOut(@brand-accent, 70%);

@btn-register-hover-color:             @brand-accent;
@btn-register-hover-bg:                fadeOut(@brand-accent, 90%);
@btn-register-hover-border:            transparent;

@btn-register-active-color:            #fff;
@btn-register-active-bg:               @brand-accent;
@btn-register-active-border:           @brand-accent;


//== Dropdowns
//
//## Misago dropdowns flavor

// Dropdown title
@dropdown-title-color:           @text-color;
@dropdown-title-bg:              @navbar-default-bg;
@dropdown-title-border:          darken(@navbar-default-border, 5%);

// Dropdown link text color.
@dropdown-link-color:            @text-color;

@dropdown-link-hover-color:      #fff;
@dropdown-link-hover-bg:         lighten(@state-hover, 15%);

@dropdown-link-active-color:     #fff;
@dropdown-link-active-bg:        @state-clicked;

// Open dropdown shadow color.
@dropdown-shadow:                fadeOut(#333, 50%);


//== Navs
//
//##

//=== Shared nav styles
@nav-link-hover-bg:                         transparent;

@nav-link-color:                            @gray-light;
@nav-link-hover-color:                      @text-color;

//== Tabs
@nav-tabs-padding:                          10px 12px;
@nav-tabs-border-color:                     #ddd;

@nav-tabs-link-hover-border-color:          darken(@nav-tabs-border-color, 40%);
@nav-tabs-link-active-border-color:         @state-active;

@nav-tabs-link-clicked-bg:                  transparent;
@nav-tabs-link-clicked-color:               @state-clicked;
@nav-tabs-link-clicked-border-color:        @state-clicked;

@nav-tabs-active-link-bg:                   transparent;
@nav-tabs-active-link-color:                @state-hover;
@nav-tabs-active-link-border-color:         @state-active;

@nav-tabs-justified-link-border-color:            #ddd;
@nav-tabs-justified-active-link-border-color:     @body-bg;

//== Pills
@nav-pills-padding:                         6px 7px;
@nav-pills-border-radius:                   @border-radius-base;
@nav-pills-active-link-hover-bg:            #666;
@nav-pills-active-link-hover-color:         #fff;

//==Sidenav
@nav-side-border:                           @gray-lighter;
@nav-side-padding:                          6px 10px;

@nav-side-color:                            @gray-light;
@nav-side-hover-color:                      @text-color;
@nav-side-active-color:                     @brand-primary;

@nav-side-active-bg:                        @gray-dark;
@nav-side-active-text-color:                #fff;

//== Page header
@page-header-border-color:       darken(@body-bg, 9%);


//== Breadcrumbs
//
//##

@breadcrumb-padding-vertical:   8px;
@breadcrumb-padding-horizontal: 0px;

@breadcrumb-bg:                 transparent;
@breadcrumb-color:              darken(@body-bg, 40%);
@breadcrumb-active-color:       @text-color;


//== Page footer
//
//## Footer appearance

@footer-color:                   darken(@body-bg, 35%);

// Size of Misago's branding in footer
@misago-branding-size:           @font-size-large * 1.6;

// Footer links
@footer-link-color:              @state-default;
@footer-link-hover-color:        @state-hover;
@footer-link-active-color:       @state-clicked;


//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.

@btn-font-weight:                normal;


@btn-default-color:              #777;
@btn-default-bg:                 darken(@body-bg, 5%);
@btn-default-border:             darken(@btn-default-bg, 10%);

@btn-default-hover-color:        @text-color;
@btn-default-hover-bg:           darken(@body-bg, 2%);
@btn-default-hover-border:       #999;

@btn-default-active-color:       @text-color;
@btn-default-active-bg:          darken(@body-bg, 6%);
@btn-default-active-border:      #999;

@btn-primary-color:              #fff;
@btn-primary-bg:                 @brand-primary;
@btn-primary-border:             darken(@btn-primary-bg, 15%);

@btn-success-color:              #fff;
@btn-success-bg:                 @brand-success;
@btn-success-border:             darken(@btn-success-bg, 15%);

@btn-warning-color:              #fff;
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             darken(@btn-warning-bg, 15%);

@btn-danger-color:               #fff;
@btn-danger-bg:                  @brand-danger;
@btn-danger-border:              darken(@btn-danger-bg, 15%);


//== Forms
//
@legend-color:                          darken(@body-bg, 40%);
@field-help-block-color:                darken(@body-bg, 50%);

//## Misago wraps forms into panels
@form-panel-bg:                         #fff;
@form-panel-border:                     darken(@body-bg, 15%);
@form-panel-shadow:                     darken(@body-bg, 5%);
@form-panel-footer-bg:                  darken(@body-bg, 1%);
@form-panel-padding-vertical:           (@padding-large-vertical * 1.5);
@form-panel-padding-horizontal:         @padding-large-horizontal;
@form-panel-padding:                    @form-panel-padding-vertical @form-panel-padding-horizontal;

//## Misago Yes-No switch
@yesno-switch-default:                  lighten(@gray-light, 25%);
@yesno-switch-active:                   @brand-primary;


//== Panels
//
//##

@panel-bg:                    #fff;
@panel-shadow:                darken(@body-bg, 5%);
@panel-body-padding:          15px;

@panel-default-border:        darken(@body-bg, 15%);

//** Border color for elements within panels
@panel-inner-border:          darken(@body-bg, 8%);
@panel-footer-bg:             @panel-bg;

//** Table panels
@table-panel-bg:                        @panel-bg;
@table-panel-border:                    @panel-default-border;
@table-panel-shadow:                    @panel-shadow;

@table-row-highlight:                   fadeOut(@brand-warning, 90%);

@table-header-color:                    @gray;
@table-header-bg:                       darken(@body-bg, 5%);
@table-header-border:                   darken(@body-bg, 15%);

//** User cards
@user-card-bg:                         @body-bg;
@user-card-border:                     darken(@body-bg, 15%);
@user-card-shadow:                     darken(@body-bg, 15%);

@user-card-hover-border:               fadeOut(@state-hover, 50%);
@user-card-hover-shadow:               fadeOut(@state-hover, 50%);

@user-card-active-border:              @state-clicked;
@user-card-active-shadow:              @state-clicked;

//** Post panels
@post-panel-bg:                        @panel-bg;
@post-panel-border:                    @panel-default-border;

@post-active-panel-bg:                 lighten(#3498db, 44%);
@post-active-panel-border:             lighten(#3498db, 38%);


//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

@state-success-text:             #27ae60;
@state-success-text-contrast:    #fff;
@state-success-bg:               #2ecc71;

@state-info-text:                @brand-primary;
@state-info-text-contrast:       #fff;
@state-info-bg:                  @brand-primary;

@state-warning-text:             #e67e22;
@state-warning-text-contrast:    #fff;
@state-warning-bg:               #e67e22;

@state-danger-text:              #c0392b;
@state-danger-text-contrast:     #fff;
@state-danger-bg:                darken(#e74c3c, 12%);


//== Alerts
//
//## Define alert colors, border radius, and padding.

@alert-padding:               14px;
@alert-border-radius:         @border-radius-large;

@alert-success-bg:            @state-success-bg;
@alert-success-text:          @state-success-text-contrast;

@alert-info-bg:               @state-info-bg;
@alert-info-text:             @state-info-text-contrast;

@alert-warning-bg:            @state-warning-bg;
@alert-warning-text:          @state-warning-text-contrast;

@alert-danger-bg:             @state-danger-bg;
@alert-danger-text:           @state-danger-text-contrast;

@alert-default-bg:            @gray-lighter;
@alert-default-text:          @gray;


//== Modals
//
//##

@modal-title-color:                  @gray;

@modal-header-bg-color:              darken(@body-bg, 1%);
@modal-header-border-color:          darken(@modal-header-bg-color, 5%);

@modal-footer-bg-color:              darken(@body-bg, 2%);
@modal-footer-border-color:          darken(@modal-footer-bg-color, 5%);


//== Miscellaneous
//
//##

//** Horizontal line color.
@hr-border:                   darken(@body-bg, 10%);

//** Badge radius
@badge-border-radius:         @border-radius-small;