gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updated flatly theme to 3.3.0 plus css cleanup

Browse Source
This commit is contained in:
Sahat Yalkabov
2014-11-08 20:27:32 -08:00
parent 001484ab45
commit 266c9ed3ee
3 changed files with 351 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/styles.less
View File

@ -1,8 +1,8 @@
@import "lib/bootstrap/bootstrap"; @import "lib/bootstrap/bootstrap";
@import "lib/bootstrap-social/bootstrap-social";
@import "lib/font-awesome/font-awesome"; @import "lib/font-awesome/font-awesome";
@import "lib/ionicons/ionicons"; @import "lib/ionicons/ionicons";
@import "lib/bootstrap-social"; @import "themes/default";
@import "themes/modern";
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@ -23,11 +23,6 @@ footer {
width: 100%; width: 100%;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
p,
ul {
margin-bottom: 0;
}
} }
// Navbar // Navbar
@ -59,6 +54,6 @@ footer {
// ------------------------- // -------------------------
.fa, .fa,
[class^='ion-'] { [class^="ion-"] {
margin-right: 6px; margin-right: 5px;
} }

514
public/css/themes/flatly.less
View File

@ -1,32 +1,28 @@
// Flatly 3.1.1 // Flatly 3.3.0
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
//== Colors //== Colors
// //
//## Gray and brand colors for use across Bootstrap. //## Gray and brand colors for use across Bootstrap.
@gray-darker: lighten(#000, 13.5%); // #222 @gray-base: #000;
@gray-dark: #7b8a8b; @gray-darker: lighten(@gray-base, 13.5%); // #222
// #333 @gray-dark: #7b8a8b; // #333
@gray: #95a5a6; @gray: #95a5a6; // #555
// #555 @gray-light: #b4bcc2; // #999
@gray-light: #b4bcc2; @gray-lighter: #ecf0f1; // #eee
// #999
@gray-lighter: #ecf0f1;
// #eee
@brand-primary: #2C3E50; @brand-primary: #2C3E50;
@brand-success: #18BC9C; @brand-success: #18BC9C;
@brand-info: #3498DB; @brand-info: #3498DB;
@brand-warning: #F39C12; @brand-warning: #F39C12;
@brand-danger: #E74C3C; @brand-danger: #E74C3C;
//== Scaffolding //== Scaffolding
// //
// ## Settings for some of the most global styles. //## Settings for some of the most global styles.
//** Background color for `<body>`. //** Background color for `<body>`.
@body-bg: #fff; @body-bg: #fff;
@ -37,6 +33,9 @@
@link-color: @brand-success; @link-color: @brand-success;
//** Link hover color set via `darken()` function. //** Link hover color set via `darken()` function.
@link-hover-color: @link-color; @link-hover-color: @link-color;
//** Link hover decoration.
@link-hover-decoration: underline;
//== Typography //== Typography
// //
@ -49,95 +48,94 @@
@font-family-base: @font-family-sans-serif; @font-family-base: @font-family-sans-serif;
@font-size-base: 15px; @font-size-base: 15px;
@font-size-large: ceil((@font-size-base * 1.25)); @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
// ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-small: ceil((@font-size-base * 0.85));
// ~12px
@font-size-h1: floor((@font-size-base * 2.6)); @font-size-h1: floor((@font-size-base * 2.6)); // ~36px
// ~36px @font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h2: floor((@font-size-base * 2.15)); @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
// ~30px @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h3: ceil((@font-size-base * 1.7));
// ~24px
@font-size-h4: ceil((@font-size-base * 1.25));
// ~18px
@font-size-h5: @font-size-base; @font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
// ~12px
//** Unit-less `line-height` for use in components like buttons. //** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14 @line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
// ~20px
//** By default, this inherits from the `<body>`. //** By default, this inherits from the `<body>`.
@headings-font-family: @font-family-base; @headings-font-family: @font-family-base;
@headings-font-weight: 400; @headings-font-weight: 400;
@headings-line-height: 1.1; @headings-line-height: 1.1;
@headings-color: inherit; @headings-color: inherit;
//-- Iconography
//
//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
@icon-font-path: "../fonts/"; @icon-font-path: "../fonts/";
//** File name for all font files.
@icon-font-name: "glyphicons-halflings-regular"; @icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular"; //** Element ID within SVG icon file.
@icon-font-svg-id: "glyphicons_halflingsregular";
//== Components //== Components
// //
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 10px; @padding-base-vertical: 10px;
@padding-base-horizontal: 15px; @padding-base-horizontal: 15px;
@padding-large-vertical: 18px; @padding-large-vertical: 18px;
@padding-large-horizontal: 27px; @padding-large-horizontal: 27px;
@padding-small-vertical: 6px; @padding-small-vertical: 6px;
@padding-small-horizontal: 9px; @padding-small-horizontal: 9px;
@padding-xs-vertical: 1px; @padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px; @padding-xs-horizontal: 5px;
@line-height-large: 1.33; @line-height-large: 1.33;
@line-height-small: 1.5; @line-height-small: 1.5;
@border-radius-base: 4px; @border-radius-base: 4px;
@border-radius-large: 6px; @border-radius-large: 6px;
@border-radius-small: 3px; @border-radius-small: 3px;
//** Global color for active items (e.g., navs or dropdowns). //** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff; @component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns). //** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary; @component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns. //** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base: 4px; @caret-width-base: 4px;
//** Carets increase slightly in size for larger components. //** Carets increase slightly in size for larger components.
@caret-width-large: 5px; @caret-width-large: 5px;
//== Tables //== Tables
// //
//## Customizes the `.table` component with basic values, each used across all table variations. //## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s. //** Padding for `<th>`s and `<td>`s.
@table-cell-padding: 8px; @table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`. //** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px; @table-condensed-cell-padding: 5px;
//** Default background color used for all tables. //** Default background color used for all tables.
@table-bg: transparent; @table-bg: transparent;
//** Background color used for `.table-striped`. //** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9; @table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`. //** Background color used for `.table-hover`.
@table-bg-hover: @gray-lighter; @table-bg-hover: @gray-lighter;
@table-bg-active: @table-bg-hover; @table-bg-active: @table-bg-hover;
//** Border color for table and cell borders. //** Border color for table and cell borders.
@table-border-color: @gray-lighter; @table-border-color: @gray-lighter;
//== Buttons //== Buttons
// //
@ -157,9 +155,9 @@
@btn-success-bg: @brand-success; @btn-success-bg: @brand-success;
@btn-success-border: @btn-success-bg; @btn-success-border: @btn-success-bg;
@btn-info-color: @btn-default-color; @btn-info-color: @btn-default-color;
@btn-info-bg: @brand-info; @btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg; @btn-info-border: @btn-info-bg;
@btn-warning-color: @btn-default-color; @btn-warning-color: @btn-default-color;
@btn-warning-bg: @brand-warning; @btn-warning-bg: @brand-warning;
@ -171,6 +169,7 @@
@btn-link-disabled-color: @gray-light; @btn-link-disabled-color: @gray-light;
//== Forms //== Forms
// //
//## //##
@ -184,10 +183,17 @@
@input-color: @text-color; @input-color: @text-color;
//** `<input>` border color //** `<input>` border color
@input-border: #dce4ec; @input-border: #dce4ec;
//** `<input>` border radius
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
@input-border-radius: @border-radius-base; @input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large: @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small: @border-radius-small;
//** Border color for inputs on focus //** Border color for inputs on focus
@input-border-focus: #1abc9c; @input-border-focus: @brand-primary;
//** Placeholder text color //** Placeholder text color
@input-color-placeholder: #acb6c0; @input-color-placeholder: #acb6c0;
@ -200,13 +206,17 @@
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @text-color; @legend-color: @text-color;
@legend-border-color: #e5e5e5; @legend-border-color: transparent;
//** Background color for textual input addons //** Background color for textual input addons
@input-group-addon-bg: @gray-lighter; @input-group-addon-bg: @gray-lighter;
//** Border color for textual input addons //** Border color for textual input addons
@input-group-addon-border-color: @input-border; @input-group-addon-border-color: @input-border;
//** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;
//== Dropdowns //== Dropdowns
// //
//## Dropdown menu container and contents. //## Dropdown menu container and contents.
@ -238,8 +248,9 @@
//** Text color for headers within dropdown menus. //** Text color for headers within dropdown menus.
@dropdown-header-color: @text-muted; @dropdown-header-color: @text-muted;
// Note: Deprecated @dropdown-caret-color as of v3.1.0 //** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color: #000; @dropdown-caret-color: #000;
//-- Z-index master list //-- Z-index master list
// //
@ -250,38 +261,43 @@
@zindex-navbar: 1000; @zindex-navbar: 1000;
@zindex-dropdown: 1000; @zindex-dropdown: 1000;
@zindex-popover: 1010; @zindex-popover: 1060;
@zindex-tooltip: 1030; @zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030; @zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040; @zindex-modal: 1040;
@zindex-modal: 1050;
//== Media queries breakpoints //== Media queries breakpoints
// //
//## Define the breakpoints at which your layout will change, adapting to different screen sizes. //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone // Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 //** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px; @screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs; @screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min; @screen-phone: @screen-xs-min;
// Small screen / tablet // Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 //** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px; @screen-sm: 768px;
@screen-sm-min: @screen-sm; @screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min; @screen-tablet: @screen-sm-min;
// Medium screen / desktop // Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 //** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px; @screen-md: 992px;
@screen-md-min: @screen-md; @screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min; @screen-desktop: @screen-md-min;
// Large screen / wide desktop // Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 //** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px; @screen-lg: 1200px;
@screen-lg-min: @screen-lg; @screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min; @screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum // So media queries don't overlap when required, provide a maximum
@ -289,6 +305,7 @@
@screen-sm-max: (@screen-md-min - 1); @screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1); @screen-md-max: (@screen-lg-min - 1);
//== Grid system //== Grid system
// //
//## Define your custom responsive grid. //## Define your custom responsive grid.
@ -303,24 +320,26 @@
//** Point at which the navbar begins collapsing. //** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
//== Container sizes //== Container sizes
// //
//## Define the maximum width of `.container` for different screen sizes. //## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet // Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width)); @container-tablet: (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up. //** For `@screen-sm-min` and up.
@container-sm: @container-tablet; @container-sm: @container-tablet;
// Medium screen / desktop // Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width)); @container-desktop: (940px + @grid-gutter-width);
//** For `@screen-md-min` and up. //** For `@screen-md-min` and up.
@container-md: @container-desktop; @container-md: @container-desktop;
// Large screen / wide desktop // Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width)); @container-large-desktop: (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up. //** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop; @container-lg: @container-large-desktop;
//== Navbar //== Navbar
// //
@ -330,13 +349,13 @@
@navbar-height: 60px; @navbar-height: 60px;
@navbar-margin-bottom: @line-height-computed; @navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base; @navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); @navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px; @navbar-collapse-max-height: 340px;
@navbar-default-color: #777; @navbar-default-color: #777;
@navbar-default-bg: @brand-primary; @navbar-default-bg: @brand-primary;
@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-default-border: transparent;
// Navbar links // Navbar links
@navbar-default-link-color: #fff; @navbar-default-link-color: #fff;
@ -362,7 +381,7 @@
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: #fff; @navbar-inverse-color: #fff;
@navbar-inverse-bg: @brand-success; @navbar-inverse-bg: @brand-success;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); @navbar-inverse-border: transparent;
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: #fff; @navbar-inverse-link-color: #fff;
@ -383,6 +402,7 @@
@navbar-inverse-toggle-icon-bar-bg: #fff; @navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%); @navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
//== Navs //== Navs
// //
//## //##
@ -394,8 +414,6 @@
@nav-disabled-link-color: @gray-light; @nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light; @nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
//== Tabs //== Tabs
@nav-tabs-border-color: @gray-lighter; @nav-tabs-border-color: @gray-lighter;
@ -413,42 +431,44 @@
@nav-pills-active-link-hover-bg: @component-active-bg; @nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color; @nav-pills-active-link-hover-color: @component-active-color;
//== Pagination //== Pagination
// //
//## //##
@pagination-color: #fff; @pagination-color: #fff;
@pagination-bg: @brand-success; @pagination-bg: @brand-success;
@pagination-border: transparent; @pagination-border: transparent;
@pagination-hover-color: #fff; @pagination-hover-color: #fff;
@pagination-hover-bg: darken(@brand-success, 15%); @pagination-hover-bg: darken(@brand-success, 15%);
@pagination-hover-border: transparent; @pagination-hover-border: transparent;
@pagination-active-color: #fff; @pagination-active-color: #fff;
@pagination-active-bg: darken(@brand-success, 15%); @pagination-active-bg: darken(@brand-success, 15%);
@pagination-active-border: transparent; @pagination-active-border: transparent;
@pagination-disabled-color: @gray-lighter; @pagination-disabled-color: @gray-lighter;
@pagination-disabled-bg: lighten(@brand-success, 15%); @pagination-disabled-bg: lighten(@brand-success, 15%);;
; @pagination-disabled-border: transparent;
@pagination-disabled-border: transparent;
//== Pager //== Pager
// //
//## //##
@pager-bg: @pagination-bg; @pager-bg: @pagination-bg;
@pager-border: @pagination-border; @pager-border: @pagination-border;
@pager-border-radius: 15px; @pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg; @pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg; @pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color; @pager-active-color: @pagination-active-color;
@pager-disabled-color: #fff; @pager-disabled-color: #fff;
//== Jumbotron //== Jumbotron
// //
//## //##
@ -457,7 +477,8 @@
@jumbotron-color: inherit; @jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter; @jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit; @jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5)); @jumbotron-font-size: ceil((@font-size-base * 1.5));
//== Form states and alerts //== Form states and alerts
// //
@ -479,6 +500,7 @@
@state-danger-bg: @brand-danger; @state-danger-bg: @brand-danger;
@state-danger-border: @brand-danger; @state-danger-border: @brand-danger;
//== Tooltips //== Tooltips
// //
//## //##
@ -489,13 +511,14 @@
@tooltip-color: #fff; @tooltip-color: #fff;
//** Tooltip background color //** Tooltip background color
@tooltip-bg: rgba(0,0,0,.9); @tooltip-bg: rgba(0,0,0,.9);
@tooltip-opacity: .9; @tooltip-opacity: .9;
//** Tooltip arrow width //** Tooltip arrow width
@tooltip-arrow-width: 5px; @tooltip-arrow-width: 5px;
//** Tooltip arrow color //** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg; @tooltip-arrow-color: @tooltip-bg;
//== Popovers //== Popovers
// //
//## //##
@ -515,14 +538,15 @@
//** Popover arrow width //** Popover arrow width
@popover-arrow-width: 10px; @popover-arrow-width: 10px;
//** Popover arrow color //** Popover arrow color
@popover-arrow-color: #fff; @popover-arrow-color: @popover-bg;
//** Popover outer arrow width //** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1); @popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color //** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%); @popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color //** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); @popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels //== Labels
// //
@ -546,6 +570,7 @@
//** Default text color of a linked label //** Default text color of a linked label
@label-link-hover-color: #fff; @label-link-hover-color: #fff;
//== Modals //== Modals
// //
//## //##
@ -568,15 +593,16 @@
//** Modal backdrop background color //** Modal backdrop background color
@modal-backdrop-bg: #000; @modal-backdrop-bg: #000;
//** Modal backdrop opacity //** Modal backdrop opacity
@modal-backdrop-opacity: .5; @modal-backdrop-opacity: .5;
//** Modal header border color //** Modal header border color
@modal-header-border-color: #e5e5e5; @modal-header-border-color: #e5e5e5;
//** Modal footer border color //** Modal footer border color
@modal-footer-border-color: @modal-header-border-color; @modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px; @modal-lg: 900px;
@modal-md: 600px; @modal-md: 600px;
@modal-sm: 300px; @modal-sm: 300px;
//== Alerts //== Alerts
// //
@ -602,6 +628,7 @@
@alert-danger-text: @state-danger-text; @alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border; @alert-danger-border: @state-danger-border;
//== Progress bars //== Progress bars
// //
//## //##
@ -610,6 +637,8 @@
@progress-bg: @gray-lighter; @progress-bg: @gray-lighter;
//** Progress bar text color //** Progress bar text color
@progress-bar-color: #fff; @progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
//** Default progress bar color //** Default progress bar color
@progress-bar-bg: @brand-primary; @progress-bar-bg: @brand-primary;
@ -622,40 +651,53 @@
//** Info progress bar color //** Info progress bar color
@progress-bar-info-bg: @brand-info; @progress-bar-info-bg: @brand-info;
//== List group //== List group
// //
//## //##
//** Background color on `.list-group-item` //** Background color on `.list-group-item`
@list-group-bg: #fff; @list-group-bg: #fff;
//** `.list-group-item` border color //** `.list-group-item` border color
@list-group-border: @gray-lighter; @list-group-border: @gray-lighter;
//** List group border radius //** List group border radius
@list-group-border-radius: @border-radius-base; @list-group-border-radius: @border-radius-base;
//** Background color of single list elements on hover //** Background color of single list items on hover
@list-group-hover-bg: @gray-lighter; @list-group-hover-bg: @gray-lighter;
//** Text color of active list elements //** Text color of active list items
@list-group-active-color: @component-active-color; @list-group-active-color: @component-active-color;
//** Background color of active list elements //** Background color of active list items
@list-group-active-bg: @component-active-bg; @list-group-active-bg: @component-active-bg;
//** Border color of active list elements //** Border color of active list elements
@list-group-active-border: @list-group-active-bg; @list-group-active-border: @list-group-active-bg;
@list-group-active-text-color: lighten(@list-group-active-bg, 40%); //** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
@list-group-link-color: #555; //** Text color of disabled list items
@list-group-disabled-color: @gray-light;
//** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter;
//** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;
@list-group-link-color: #555;
@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #333; @list-group-link-heading-color: #333;
//== Panels //== Panels
// //
//## //##
@panel-bg: #fff; @panel-bg: #fff;
@panel-body-padding: 15px; @panel-body-padding: 15px;
@panel-heading-padding: 10px 15px;
@panel-footer-padding: @panel-heading-padding;
@panel-border-radius: @border-radius-base; @panel-border-radius: @border-radius-base;
//** Border color for elements within panels //** Border color for elements within panels
@panel-inner-border: @gray-lighter; @panel-inner-border: @gray-lighter;
@panel-footer-bg: @gray-lighter; @panel-footer-bg: @gray-lighter;
@panel-default-text: @text-color; @panel-default-text: @text-color;
@ -670,9 +712,9 @@
@panel-success-border: @state-success-border; @panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg; @panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text; @panel-info-text: @state-info-text;
@panel-info-border: @state-info-border; @panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg; @panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text; @panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border; @panel-warning-border: @state-warning-border;
@ -682,6 +724,7 @@
@panel-danger-border: @state-danger-border; @panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg; @panel-danger-heading-bg: @state-danger-bg;
//== Thumbnails //== Thumbnails
// //
//## //##
@ -700,12 +743,14 @@
//** Padding around the thumbnail caption //** Padding around the thumbnail caption
@thumbnail-caption-padding: 9px; @thumbnail-caption-padding: 9px;
//== Wells //== Wells
// //
//## //##
@well-bg: @gray-lighter; @well-bg: @gray-lighter;
@well-border: transparent; @well-border: transparent;
//== Badges //== Badges
// //
@ -714,10 +759,10 @@
@badge-color: #fff; @badge-color: #fff;
//** Linked badge text color on hover //** Linked badge text color on hover
@badge-link-hover-color: #fff; @badge-link-hover-color: #fff;
@badge-bg: @gray; @badge-bg: @brand-primary;
//** Badge text color in active nav link //** Badge text color in active nav link
@badge-active-color: @link-color; @badge-active-color: @brand-primary;
//** Badge background color in active nav link //** Badge background color in active nav link
@badge-active-bg: #fff; @badge-active-bg: #fff;
@ -725,20 +770,22 @@
@badge-line-height: 1; @badge-line-height: 1;
@badge-border-radius: 10px; @badge-border-radius: 10px;
//== Breadcrumbs //== Breadcrumbs
// //
//## //##
@breadcrumb-padding-vertical: 8px; @breadcrumb-padding-vertical: 8px;
@breadcrumb-padding-horizontal: 15px; @breadcrumb-padding-horizontal: 15px;
//** Breadcrumb background color //** Breadcrumb background color
@breadcrumb-bg: @gray-lighter; @breadcrumb-bg: @gray-lighter;
//** Breadcrumb text color //** Breadcrumb text color
@breadcrumb-color: #ccc; @breadcrumb-color: #ccc;
//** Text color of current page in the breadcrumb //** Text color of current page in the breadcrumb
@breadcrumb-active-color: @gray; @breadcrumb-active-color: @gray;
//** Textual separator for between breadcrumb elements //** Textual separator for between breadcrumb elements
@breadcrumb-separator: "/"; @breadcrumb-separator: "/";
//== Carousel //== Carousel
// //
@ -756,13 +803,15 @@
@carousel-caption-color: #fff; @carousel-caption-color: #fff;
//== Close //== Close
// //
//## //##
@close-font-weight: bold; @close-font-weight: bold;
@close-color: #000; @close-color: #000;
@close-text-shadow: 0 1px 0 #fff; @close-text-shadow: none;
//== Code //== Code
// //
@ -771,18 +820,21 @@
@code-color: #c7254e; @code-color: #c7254e;
@code-bg: #f9f2f4; @code-bg: #f9f2f4;
@kbd-color: #fff; @kbd-color: #fff;
@kbd-bg: #333; @kbd-bg: #333;
@pre-bg: @gray-lighter; @pre-bg: @gray-lighter;
@pre-color: @gray-dark; @pre-color: @gray-dark;
@pre-border-color: #ccc; @pre-border-color: #ccc;
@pre-scrollable-max-height: 340px; @pre-scrollable-max-height: 340px;
//== Type //== Type
// //
//## //##
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color //** Text muted color
@text-muted: @gray-light; @text-muted: @gray-light;
//** Abbreviations and acronyms border color //** Abbreviations and acronyms border color
@ -792,26 +844,48 @@
//** Blockquote small color //** Blockquote small color
@blockquote-small-color: @gray-light; @blockquote-small-color: @gray-light;
//** Blockquote font size //** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25); @blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color //** Blockquote border color
@blockquote-border-color: @gray-lighter; @blockquote-border-color: @gray-lighter;
//** Page header border color //** Page header border color
@page-header-border-color: @gray-lighter; @page-header-border-color: transparent;
//** Width of horizontal description list titles
//== Miscellaneous @dl-horizontal-offset: @component-offset-horizontal;
//
//##
//** Horizontal line color. //** Horizontal line color.
@hr-border: @gray-lighter; @hr-border: @gray-lighter;
//** Horizontal offset for forms and lists. // Flatly 3.3.0
@component-offset-horizontal: 180px; // Bootswatch
// -----------------------------------------------------
@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic"); @import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
// Navbar ===================================================================== // Navbar =====================================================================
.navbar {
border-width: 0;
&-default {
.badge {
background-color: #fff;
color: @navbar-default-bg;
}
}
&-inverse {
.badge {
background-color: #fff;
color: @navbar-inverse-bg;
}
}
&-brand {
padding: 18.5px 15px 20.5px;
}
}
// Buttons ==================================================================== // Buttons ====================================================================
.btn:active { .btn:active {
@ -851,12 +925,26 @@
// Tables ===================================================================== // Tables =====================================================================
table,
.table { .table {
tr.success, a:not(.btn) {
tr.warning, text-decoration: underline;
tr.danger { }
.dropdown-menu a {
text-decoration: none;
}
.success,
.warning,
.danger,
.info {
color: #fff; color: #fff;
a {
color: #fff;
}
} }
> thead > tr > th, > thead > tr > th,
@ -880,22 +968,8 @@
// Forms ====================================================================== // Forms ======================================================================
.form-control,textarea.form-control, .form-control,
input[type="text"], input, {
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border-width: 2px; border-width: 2px;
.box-shadow(none); .box-shadow(none);
@ -906,7 +980,12 @@ input[type="color"],
.has-warning { .has-warning {
.help-block, .help-block,
.control-label { .control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
.form-control-feedback {
color: @brand-warning; color: @brand-warning;
} }
@ -914,11 +993,20 @@ input[type="color"],
.form-control:focus { .form-control:focus {
border: 2px solid @brand-warning; border: 2px solid @brand-warning;
} }
.input-group-addon {
border-color: @brand-warning;
}
} }
.has-error { .has-error {
.help-block, .help-block,
.control-label { .control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
.form-control-feedback {
color: @brand-danger; color: @brand-danger;
} }
@ -926,11 +1014,20 @@ input[type="color"],
.form-control:focus { .form-control:focus {
border: 2px solid @brand-danger; border: 2px solid @brand-danger;
} }
.input-group-addon {
border-color: @brand-danger;
}
} }
.has-success { .has-success {
.help-block, .help-block,
.control-label { .control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
.form-control-feedback {
color: @brand-success; color: @brand-success;
} }
@ -938,6 +1035,10 @@ input[type="color"],
.form-control:focus { .form-control:focus {
border: 2px solid @brand-success; border: 2px solid @brand-success;
} }
.input-group-addon {
border-color: @brand-success;
}
} }
// Navs ======================================================================= // Navs =======================================================================
@ -968,9 +1069,20 @@ input[type="color"],
// Indicators ================================================================= // Indicators =================================================================
.close {
color: #fff;
text-decoration: none;
opacity: 0.4;
&:hover,
&:focus {
color: #fff;
opacity: 1;
}
}
.alert { .alert {
a,
.alert-link { .alert-link {
color: #fff; color: #fff;
text-decoration: underline; text-decoration: underline;
@ -982,10 +1094,74 @@ input[type="color"],
.progress { .progress {
height: 10px; height: 10px;
.box-shadow(none); .box-shadow(none);
.progress-bar {
font-size: 10px;
line-height: 10px;
}
} }
// Containers ================================================================= // Containers =================================================================
.well { .well {
.box-shadow(none); .box-shadow(none);
}
a.list-group-item {
&.active,
&.active:hover,
&.active:focus {
border-color: @list-group-border;
}
&-success {
&.active {
background-color: @state-success-bg;
}
&.active:hover,
&.active:focus {
background-color: darken(@state-success-bg, 5%);
}
}
&-warning {
&.active {
background-color: @state-warning-bg;
}
&.active:hover,
&.active:focus {
background-color: darken(@state-warning-bg, 5%);
}
}
&-danger {
&.active {
background-color: @state-danger-bg;
}
&.active:hover,
&.active:focus {
background-color: darken(@state-danger-bg, 5%);
}
}
}
.panel {
&-default {
.close {
color: @text-color;
}
}
}
.modal {
.close {
color: @text-color;
}
}
.popover {
color: @text-color;
} }

4
public/css/themes/modern.less
View File

@ -1,5 +1,5 @@
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); @import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300); @import url("http://fonts.googleapis.com/css?family=Raleway:400,300");
// Colors // Colors
// ------------------------- // -------------------------