// // 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-bg: #fff; // Global text color on ``. @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;