221V
/
Misago


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
							//
// Misago Default Theme Variables
// --------------------------------------------------


//== Colors
//
//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;
@gray-darker:            #212121;
@gray-dark:              #424242;
@gray:                   #616161;
@gray-light:             #bdbdbd;
@gray-lighter:           #eeeeee;

@brand-accent:           #e66a5d; // misago uses info state for accents

@brand-primary:          #1e88e5;
@brand-success:          #43a047;
@brand-warning:          #ef6c00;
@brand-danger:           #e53935;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
@body-bg:               #fff;
//** Global text color on `<body>`.
@text-color:            #111;

// Font weights
@weight-light:          300;

//** Global textual link color.
@link-color:            #2196f3;
//** Link hover color set via `darken()` function.
@link-hover-color:      #5c6bc0;
//** Link hover decoration.
@link-hover-decoration: underline;

//** In-site navs states
@state-default:         #9e9e9e;
@state-hover:           @text-color;
@state-clicked:         @text-color;
@state-active:          @brand-accent;

//** Site link styles
@site-link-color:            @state-default;
@site-link-hover-color:      @state-hover;
@site-link-active-color:     @state-clicked;

//** Avatar radius
@avatar-radius:             8px;
@avatar-radius-small:       4px;


//== Typography
//
//## headings

//** By default, this inherits from the `<body>`.
@headings-font-weight:    200;
@headings-color:          lighten(@text-color, 8%);;


//** Nav link font size base
@font-size-nav:           @font-size-base + 3px;

//== Shadows
//
//##
@shadow-key-umbra-opacity:          0.2;
@shadow-key-penumbra-opacity:       0.14;
@shadow-ambient-shadow-opacity:     0.12;


//== Badges
//
//##

@badge-color:                 #fff;
//** Linked badge text color on hover
@badge-link-hover-color:      #fff;
@badge-bg:                    @brand-danger;

//** Badge text color in active nav link
@badge-active-color:          @link-color;
//** Badge background color in active nav link
@badge-active-bg:             #fff;

@badge-font-weight:           @weight-light;


//== Navbar
//
//##

// Basics of a navbar
@navbar-height:                    46px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
@navbar-inner-margin:              12px;
@navbar-collapse-max-height:       340px;

@navbar-default-color:             #777;
@navbar-default-bg:                @body-bg;
@navbar-default-border:            @gray-lighter;

// Navbar links
@navbar-link-spacing:                      6px;
@navbar-link-radius:                       @border-radius-base;
@navbar-link-size:                         @font-size-large;
@navbar-link-weight:                       @weight-light;
@navbar-icon-size:                         28px;

@navbar-default-link-color:                @site-link-color;
@navbar-default-link-hover-color:          @site-link-hover-color;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         @site-link-hover-color;
@navbar-default-link-active-bg:            #eee;

@navbar-compact-link-active-color:         @site-link-hover-color;
@navbar-compact-link-active-bg:            #eee;

// Navbar buttons
@navbar-start-thread-color:                #81c784;
@navbar-start-thread-bg:                   transparent;
@navbar-start-thread-hover-color:          #4caf50;
@navbar-start-thread-hover-bg:             transparent;
@navbar-start-thread-active-color:         #4caf50;
@navbar-start-thread-active-bg:            #e8f5e9;

@navbar-sign-in-color:                     #757575;
@navbar-sign-in-bg:                        #eeeeee;
@navbar-sign-in-hover-color:               #757575;
@navbar-sign-in-hover-bg:                  #eeeeee;
@navbar-sign-in-active-color:              #757575;
@navbar-sign-in-active-bg:                 #bdbdbd;;

@navbar-join-color:                        @brand-accent;
@navbar-join-bg:                           lighten(@brand-accent, 33%);
@navbar-join-hover-color:                  @brand-accent;
@navbar-join-hover-bg:                     lighten(@brand-accent, 33%);
@navbar-join-active-color:                 @brand-accent;
@navbar-join-active-bg:                    lighten(@brand-accent, 20%);

// Navbar brand label
@navbar-default-brand-color:               @headings-color;
@navbar-default-brand-hover-color:         @headings-color;

@navbar-brand-height:                      30px;

// Avatar height
@navbar-avatar-height:                     32px;

// Compact navbar, used on mobiles
@navbar-compact-height:                    40px;
@navbar-compact-item-height:               30px;


//== Site Footer
//
//##

@footer-border-color:            @gray-lighter;

@footer-color:                   @gray;

// Footer links
@footer-link-color:              @site-link-hover-color;
@footer-link-hover-color:        @site-link-hover-color;
@footer-link-active-color:       @site-link-active-color;

// Misago's branding
@misago-branding-color:          @gray-light;
@misago-branding-size:           @font-size-small;


//== Loader
//
//##

@loader-color:                   darken(@gray-lighter, 12%);
@loader-compact-color:           darken(@gray-lighter, 12%);

@loading-overlay-bg:             fadeOut(@gray, 30%);
@loading-overlay-color:          fadeOut(#fff, 30%);


//== Modals
//
//##

//** Modal backdrop background color
@modal-backdrop-bg:           @body-bg;
//** Modal backdrop opacity
@modal-backdrop-opacity:      .85;


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

@alert-border-radius:         @border-radius-large;

@alert-success-bg:            #2ecc71;
@alert-success-border:        #2ecc71;
@alert-success-text:          #fff;

@alert-info-bg:               #42a5f5;
@alert-info-border:           #42a5f5;
@alert-info-text:             #fff;

@alert-warning-bg:            #ff9800;
@alert-warning-border:        #ff9800;
@alert-warning-text:          #fff;

@alert-danger-bg:             #ef5350;
@alert-danger-border:         #ef5350;
@alert-danger-text:           #fff;

//** Special non-dimissible alert used to make user refresh page
@alert-desync-bg:             fadeOut(@body-bg, 5%);
@alert-desync-text:           @text-color;


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

@state-success-text:             #2ecc71;
@state-success-bg:               #2ecc71;
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);

@state-danger-text:              #e74c3c;
@state-danger-bg:                #e74c3c;
@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);


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

@btn-font-weight:                300;
@btn-link-disabled-color:        @gray-light;

//** Flat buttons
@btn-default-color:              @gray-dark;
@btn-default-bg:                 @gray-light;

@btn-primary-color:              @brand-primary;
@btn-primary-bg:                 #64b5f6;

@btn-success-color:              @brand-success;
@btn-success-bg:                 #81c784;

@btn-warning-color:              @brand-warning;
@btn-warning-bg:                 #ffb74d;

@btn-danger-color:               @brand-danger;
@btn-danger-bg:                  #ff8a65;


//** Raised buttons
@btn-default-raised-color:              @gray-dark;
@btn-default-raised-bg:                 #fff;

@btn-primary-raised-color:              #fff;
@btn-primary-raised-bg:                 @brand-primary;

@btn-success-raised-color:              #fff;
@btn-success-raised-bg:                 @brand-success;

@btn-warning-raised-color:              #fff;
@btn-warning-raised-bg:                 @brand-warning;

@btn-danger-raised-color:               #fff;
@btn-danger-raised-bg:                  @brand-danger;


//== Form panel
//
//## Misago uses dedicated panel for forms

@panel-form-text:                   @text-color;
@panel-form-bg:                     darken(@body-bg, 4%);
@panel-form-border:                 @body-bg;

@panel-form-body-padding:           15px;
@panel-form-heading-padding:        15px;
@panel-form-footer-padding:         @panel-heading-padding;

@panel-form-inputs-only-gutter:     @padding-large-vertical;

@panel-form-heading-color:          @gray;
@panel-form-heading-bg:             transparent;
@panel-form-heading-border:         darken(@panel-form-bg, 5%);

@panel-form-footer-bg:              @panel-form-bg;
@panel-form-footer-border:          darken(@panel-form-bg, 10%);

@panel-form-well-bg:                darken(@panel-form-bg, 5%);
@panel-form-well-border:            @panel-form-well-bg;
@panel-form-well-label:             darken(@panel-form-bg, 40%);


//== Dropdowns
//
//** Dropdown radius and shadow
@dropdown-border-radius:         @border-radius-base;

//** Dropdown link text color.
@dropdown-link-color:            @site-link-color;
//** Hover color for dropdown links.
@dropdown-link-hover-color:      @site-link-hover-color;
//** Hover background for dropdown links.
@dropdown-link-hover-bg:         transparent;

//** Active dropdown menu item text color.
@dropdown-link-active-color:     @site-link-active-color;
//** Active dropdown menu item background color.
@dropdown-link-active-bg:        transparent;

//** Dropdown link bottom border
@dropdown-link-border:           darken(@dropdown-bg, 5%);

//** Dropdown footer bg and border
@dropdown-footer-border:         darken(@dropdown-bg, 10%);
@dropdown-footer-bg:             darken(@dropdown-bg, 3%);


//== Navs
//
//##

//== Side nav
@sidenav-color:                   @state-default;
@sidenav-border:                  @gray-lighter;
@sidenav-bg:                      transparent;

@sidenav-hover-color:             @state-hover;
@sidenav-hover-bg:                transparent;

@sidenav-active-color:            @state-active;
@sidenav-active-border:           @gray-lighter;
@sidenav-active-bg:               darken(@body-bg, 4%);

//== Tabs
@nav-tabs-border-width:           4px;
@nav-tabs-padding:                10px 15px 6px;

@nav-tab-color:                   @state-default;
@nav-tab-bg:                      transparent;
@nav-tab-border:                  transparent;

@nav-tab-hover-color:             @state-hover;
@nav-tab-hover-bg:                transparent;
@nav-tab-hover-border:            @state-default;

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


//== Editor
//
//** Container
@misago-editor-border:            @gray-lighter;
@misago-editor-bg:                #fff;

@misago-editor-loader-color:      @gray-light;


//== UI Preview
//
//** Animation
@ui-preview-bg:                   @gray-lighter;
@ui-preview-light:                darken(@ui-preview-bg, 10%);


//== User Card
//
//** Body
@user-card-border-radius:         @border-radius-large;
@user-card-bg:                    @body-bg;

@user-card-footer-border:         darken(@user-card-bg, 8%);
@user-card-footer-bg:             @user-card-bg;

@user-card-username-color:        @text-color;
@user-card-status-color:          @gray-light;