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