|
@@ -1,391 +1,87 @@
|
|
//
|
|
//
|
|
-// Misago Variables
|
|
|
|
|
|
+// Misago Default Theme Variables
|
|
// --------------------------------------------------
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
|
//== Colors
|
|
//== Colors
|
|
//
|
|
//
|
|
-//## Basic colors for use in this flavor
|
|
|
|
|
|
+//## Gray and brand colors for use across Bootstrap.
|
|
|
|
+
|
|
|
|
+@gray-base: #000;
|
|
|
|
+@gray-darker: lighten(@gray-base, 13.5%); // #222
|
|
|
|
+@gray-dark: lighten(@gray-base, 20%); // #333
|
|
|
|
+@gray: lighten(@gray-base, 33.5%); // #555
|
|
|
|
+@gray-light: lighten(@gray-base, 46.7%); // #777
|
|
|
|
+@gray-lighter: lighten(@gray-base, 93.5%); // #eee
|
|
|
|
|
|
@brand-primary: #3498db;
|
|
@brand-primary: #3498db;
|
|
-@brand-accent: #e74c3c;
|
|
|
|
-@brand-success: #2ecc71;
|
|
|
|
|
|
+@brand-success: #5cb85c;
|
|
@brand-info: #5bc0de;
|
|
@brand-info: #5bc0de;
|
|
-@brand-warning: #f0ad4e;
|
|
|
|
|
|
+@brand-warning: #d35400;
|
|
@brand-danger: #e74c3c;
|
|
@brand-danger: #e74c3c;
|
|
|
|
|
|
-@brand-follow: #EB5BCC;
|
|
|
|
-@brand-block: @brand-danger;
|
|
|
|
|
|
|
|
|
|
+//== Scaffolding
|
|
|
|
+//
|
|
|
|
+//## Settings for some of the most global styles.
|
|
|
|
|
|
-// Background color for `<body>`.
|
|
|
|
|
|
+//** Background color for `<body>`.
|
|
@body-bg: #fff;
|
|
@body-bg: #fff;
|
|
|
|
+//** Global text color on `<body>`.
|
|
|
|
+@text-color: @gray-dark;
|
|
|
|
|
|
-// 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.
|
|
|
|
|
|
+//** Global textual link color.
|
|
@link-color: @brand-primary;
|
|
@link-color: @brand-primary;
|
|
|
|
+//** Link hover color set via `darken()` function.
|
|
@link-hover-color: darken(@link-color, 15%);
|
|
@link-hover-color: darken(@link-color, 15%);
|
|
|
|
+//** Link hover decoration.
|
|
|
|
+@link-hover-decoration: underline;
|
|
|
|
|
|
-// Text muted color
|
|
|
|
-@text-muted: darken(@body-bg, 40%);
|
|
|
|
-
|
|
|
|
-@link-muted-color: @gray-darker;
|
|
|
|
-
|
|
|
|
-// Components
|
|
|
|
-@component-active-bg: @state-active;
|
|
|
|
-@component-active-color: #fff;
|
|
|
|
|
|
+//** In-site link state default
|
|
|
|
+@state-default: @gray-light;
|
|
|
|
+@state-hover: @gray-dark;
|
|
|
|
+@state-clicked: @link-color;
|
|
|
|
|
|
-@loader-color: @brand-accent;
|
|
|
|
-@loader-text-color: @text-muted;
|
|
|
|
|
|
|
|
//== Navbar
|
|
//== 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;
|
|
|
|
|
|
+// Basics of a navbar
|
|
|
|
+@navbar-height: 50px;
|
|
|
|
+@navbar-margin-bottom: @line-height-computed;
|
|
|
|
+@navbar-border-radius: @border-radius-base;
|
|
|
|
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
|
|
|
+@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
|
|
|
+@navbar-collapse-max-height: 340px;
|
|
|
|
|
|
-@nav-tabs-link-hover-border-color: darken(@nav-tabs-border-color, 40%);
|
|
|
|
-@nav-tabs-link-active-border-color: @state-active;
|
|
|
|
|
|
+@navbar-default-color: #777;
|
|
|
|
+@navbar-default-bg: @body-bg;
|
|
|
|
+@navbar-default-border: darken(@navbar-default-bg, 6.5%);
|
|
|
|
|
|
-@nav-tabs-link-clicked-bg: transparent;
|
|
|
|
-@nav-tabs-link-clicked-color: @state-clicked;
|
|
|
|
-@nav-tabs-link-clicked-border-color: @state-clicked;
|
|
|
|
|
|
+// Navbar links
|
|
|
|
+@navbar-default-link-color: darken(@gray-lighter, 20%);
|
|
|
|
+@navbar-default-link-hover-color: @gray-light;
|
|
|
|
+@navbar-default-link-hover-bg: transparent;
|
|
|
|
+@navbar-default-link-active-color: @gray-darker;
|
|
|
|
+@navbar-default-link-active-bg: transparent;
|
|
|
|
|
|
-@nav-tabs-active-link-bg: transparent;
|
|
|
|
-@nav-tabs-active-link-color: @state-hover;
|
|
|
|
-@nav-tabs-active-link-border-color: @state-active;
|
|
|
|
|
|
+// Navbar brand label
|
|
|
|
+@navbar-default-brand-color: @gray-dark;
|
|
|
|
+@navbar-default-brand-hover-color: @gray-dark;
|
|
|
|
|
|
-@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
|
|
|
|
|
|
+//== Site Footer
|
|
//
|
|
//
|
|
//##
|
|
//##
|
|
|
|
|
|
-@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%);
|
|
@footer-color: darken(@body-bg, 35%);
|
|
|
|
+@footer-noscript-color: #d35400;
|
|
|
|
|
|
// Size of Misago's branding in footer
|
|
// Size of Misago's branding in footer
|
|
-@misago-branding-size: @font-size-large * 1.6;
|
|
|
|
|
|
+@misago-branding-size: @font-size-large;
|
|
|
|
|
|
// Footer links
|
|
// Footer links
|
|
@footer-link-color: @state-default;
|
|
@footer-link-color: @state-default;
|
|
@footer-link-hover-color: @state-hover;
|
|
@footer-link-hover-color: @state-hover;
|
|
@footer-link-active-color: @state-clicked;
|
|
@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;
|
|
|