From 266c9ed3eee76133939d0afc661dc68fdabf46f5 Mon Sep 17 00:00:00 2001 From: Sahat Yalkabov Date: Sat, 8 Nov 2014 20:27:32 -0800 Subject: [PATCH] updated flatly theme to 3.3.0 plus css cleanup --- public/css/styles.less | 13 +- public/css/themes/flatly.less | 514 +++++++++++++++++++++++----------- public/css/themes/modern.less | 4 +- 3 files changed, 351 insertions(+), 180 deletions(-) diff --git a/public/css/styles.less b/public/css/styles.less index 483efbbe56..15bacdc4b4 100644 --- a/public/css/styles.less +++ b/public/css/styles.less @@ -1,8 +1,8 @@ @import "lib/bootstrap/bootstrap"; +@import "lib/bootstrap-social/bootstrap-social"; @import "lib/font-awesome/font-awesome"; @import "lib/ionicons/ionicons"; -@import "lib/bootstrap-social"; -@import "themes/modern"; +@import "themes/default"; // Scaffolding // ------------------------- @@ -23,11 +23,6 @@ footer { width: 100%; height: 45px; line-height: 45px; - - p, - ul { - margin-bottom: 0; - } } // Navbar @@ -59,6 +54,6 @@ footer { // ------------------------- .fa, -[class^='ion-'] { - margin-right: 6px; +[class^="ion-"] { + margin-right: 5px; } \ No newline at end of file diff --git a/public/css/themes/flatly.less b/public/css/themes/flatly.less index a0202438cc..92dcb8069b 100644 --- a/public/css/themes/flatly.less +++ b/public/css/themes/flatly.less @@ -1,32 +1,28 @@ -// Flatly 3.1.1 +// Flatly 3.3.0 // Variables // -------------------------------------------------- -@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic"); - //== Colors // //## Gray and brand colors for use across Bootstrap. -@gray-darker: lighten(#000, 13.5%); // #222 -@gray-dark: #7b8a8b; -// #333 -@gray: #95a5a6; -// #555 -@gray-light: #b4bcc2; -// #999 -@gray-lighter: #ecf0f1; -// #eee +@gray-base: #000; +@gray-darker: lighten(@gray-base, 13.5%); // #222 +@gray-dark: #7b8a8b; // #333 +@gray: #95a5a6; // #555 +@gray-light: #b4bcc2; // #999 +@gray-lighter: #ecf0f1; // #eee @brand-primary: #2C3E50; @brand-success: #18BC9C; -@brand-info: #3498DB; +@brand-info: #3498DB; @brand-warning: #F39C12; @brand-danger: #E74C3C; + //== Scaffolding // -// ## Settings for some of the most global styles. +//## Settings for some of the most global styles. //** Background color for ``. @body-bg: #fff; @@ -37,6 +33,9 @@ @link-color: @brand-success; //** Link hover color set via `darken()` function. @link-hover-color: @link-color; +//** Link hover decoration. +@link-hover-decoration: underline; + //== Typography // @@ -49,95 +48,94 @@ @font-family-base: @font-family-sans-serif; @font-size-base: 15px; -@font-size-large: ceil((@font-size-base * 1.25)); -// ~18px -@font-size-small: ceil((@font-size-base * 0.85)); -// ~12px +@font-size-large: ceil((@font-size-base * 1.25)); // ~18px +@font-size-small: ceil((@font-size-base * 0.85)); // ~12px -@font-size-h1: floor((@font-size-base * 2.6)); -// ~36px -@font-size-h2: floor((@font-size-base * 2.15)); -// ~30px -@font-size-h3: ceil((@font-size-base * 1.7)); -// ~24px -@font-size-h4: ceil((@font-size-base * 1.25)); -// ~18px +@font-size-h1: floor((@font-size-base * 2.6)); // ~36px +@font-size-h2: floor((@font-size-base * 2.15)); // ~30px +@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-h6: ceil((@font-size-base * 0.85)); -// ~12px +@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px //** Unit-less `line-height` for use in components like buttons. @line-height-base: 1.428571429; // 20/14 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. -@line-height-computed: floor((@font-size-base * @line-height-base)); -// ~20px +@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px //** By default, this inherits from the ``. @headings-font-family: @font-family-base; -@headings-font-weight: 400; +@headings-font-weight: 400; @headings-line-height: 1.1; @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/"; +//** File name for all font files. @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 // //## 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-horizontal: 15px; +@padding-base-vertical: 10px; +@padding-base-horizontal: 15px; -@padding-large-vertical: 18px; -@padding-large-horizontal: 27px; +@padding-large-vertical: 18px; +@padding-large-horizontal: 27px; -@padding-small-vertical: 6px; -@padding-small-horizontal: 9px; +@padding-small-vertical: 6px; +@padding-small-horizontal: 9px; -@padding-xs-vertical: 1px; -@padding-xs-horizontal: 5px; +@padding-xs-vertical: 1px; +@padding-xs-horizontal: 5px; -@line-height-large: 1.33; -@line-height-small: 1.5; +@line-height-large: 1.33; +@line-height-small: 1.5; -@border-radius-base: 4px; -@border-radius-large: 6px; -@border-radius-small: 3px; +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; //** 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). -@component-active-bg: @brand-primary; +@component-active-bg: @brand-primary; //** 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. -@caret-width-large: 5px; +@caret-width-large: 5px; + //== Tables // //## Customizes the `.table` component with basic values, each used across all table variations. //** Padding for ``s and ``s. -@table-cell-padding: 8px; +@table-cell-padding: 8px; //** Padding for cells in `.table-condensed`. -@table-condensed-cell-padding: 5px; +@table-condensed-cell-padding: 5px; //** Default background color used for all tables. -@table-bg: transparent; +@table-bg: transparent; //** Background color used for `.table-striped`. -@table-bg-accent: #f9f9f9; +@table-bg-accent: #f9f9f9; //** Background color used for `.table-hover`. -@table-bg-hover: @gray-lighter; -@table-bg-active: @table-bg-hover; +@table-bg-hover: @gray-lighter; +@table-bg-active: @table-bg-hover; //** Border color for table and cell borders. -@table-border-color: @gray-lighter; +@table-border-color: @gray-lighter; + //== Buttons // @@ -157,9 +155,9 @@ @btn-success-bg: @brand-success; @btn-success-border: @btn-success-bg; -@btn-info-color: @btn-default-color; -@btn-info-bg: @brand-info; -@btn-info-border: @btn-info-bg; +@btn-info-color: @btn-default-color; +@btn-info-bg: @brand-info; +@btn-info-border: @btn-info-bg; @btn-warning-color: @btn-default-color; @btn-warning-bg: @brand-warning; @@ -171,6 +169,7 @@ @btn-link-disabled-color: @gray-light; + //== Forms // //## @@ -184,10 +183,17 @@ @input-color: @text-color; //** `` border color @input-border: #dce4ec; -//** `` 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; +//** 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 -@input-border-focus: #1abc9c; +@input-border-focus: @brand-primary; //** Placeholder text color @input-color-placeholder: #acb6c0; @@ -200,13 +206,17 @@ @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @legend-color: @text-color; -@legend-border-color: #e5e5e5; +@legend-border-color: transparent; //** Background color for textual input addons @input-group-addon-bg: @gray-lighter; //** Border color for textual input addons @input-group-addon-border-color: @input-border; +//** Disabled cursor for form controls and buttons. +@cursor-disabled: not-allowed; + + //== Dropdowns // //## Dropdown menu container and contents. @@ -238,8 +248,9 @@ //** Text color for headers within dropdown menus. @dropdown-header-color: @text-muted; -// Note: Deprecated @dropdown-caret-color as of v3.1.0 -@dropdown-caret-color: #000; +//** Deprecated `@dropdown-caret-color` as of v3.1.0 +@dropdown-caret-color: #000; + //-- Z-index master list // @@ -250,38 +261,43 @@ @zindex-navbar: 1000; @zindex-dropdown: 1000; -@zindex-popover: 1010; -@zindex-tooltip: 1030; +@zindex-popover: 1060; +@zindex-tooltip: 1070; @zindex-navbar-fixed: 1030; -@zindex-modal-background: 1040; -@zindex-modal: 1050; +@zindex-modal: 1040; + //== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // 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; +//** Deprecated `@screen-xs-min` as of v3.2.0 @screen-xs-min: @screen-xs; +//** Deprecated `@screen-phone` as of v3.0.1 @screen-phone: @screen-xs-min; // 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-min: @screen-sm; +//** Deprecated `@screen-tablet` as of v3.0.1 @screen-tablet: @screen-sm-min; // 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-min: @screen-md; +//** Deprecated `@screen-desktop` as of v3.0.1 @screen-desktop: @screen-md-min; // 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-min: @screen-lg; +//** Deprecated `@screen-lg-desktop` as of v3.0.1 @screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum @@ -289,6 +305,7 @@ @screen-sm-max: (@screen-md-min - 1); @screen-md-max: (@screen-lg-min - 1); + //== Grid system // //## Define your custom responsive grid. @@ -303,24 +320,26 @@ //** Point at which the navbar begins collapsing. @grid-float-breakpoint-max: (@grid-float-breakpoint - 1); + //== Container sizes // //## Define the maximum width of `.container` for different screen sizes. // Small screen / tablet -@container-tablet: ((720px + @grid-gutter-width)); +@container-tablet: (720px + @grid-gutter-width); //** For `@screen-sm-min` and up. -@container-sm: @container-tablet; +@container-sm: @container-tablet; // Medium screen / desktop -@container-desktop: ((940px + @grid-gutter-width)); +@container-desktop: (940px + @grid-gutter-width); //** For `@screen-md-min` and up. -@container-md: @container-desktop; +@container-md: @container-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. -@container-lg: @container-large-desktop; +@container-lg: @container-large-desktop; + //== Navbar // @@ -330,13 +349,13 @@ @navbar-height: 60px; @navbar-margin-bottom: @line-height-computed; @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-collapse-max-height: 340px; +@navbar-collapse-max-height: 340px; @navbar-default-color: #777; @navbar-default-bg: @brand-primary; -@navbar-default-border: darken(@navbar-default-bg, 6.5%); +@navbar-default-border: transparent; // Navbar links @navbar-default-link-color: #fff; @@ -362,7 +381,7 @@ // Reset inverted navbar basics @navbar-inverse-color: #fff; @navbar-inverse-bg: @brand-success; -@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); +@navbar-inverse-border: transparent; // Inverted navbar links @navbar-inverse-link-color: #fff; @@ -383,6 +402,7 @@ @navbar-inverse-toggle-icon-bar-bg: #fff; @navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%); + //== Navs // //## @@ -394,8 +414,6 @@ @nav-disabled-link-color: @gray-light; @nav-disabled-link-hover-color: @gray-light; -@nav-open-link-hover-color: #fff; - //== Tabs @nav-tabs-border-color: @gray-lighter; @@ -413,42 +431,44 @@ @nav-pills-active-link-hover-bg: @component-active-bg; @nav-pills-active-link-hover-color: @component-active-color; + //== Pagination // //## -@pagination-color: #fff; +@pagination-color: #fff; @pagination-bg: @brand-success; @pagination-border: transparent; -@pagination-hover-color: #fff; +@pagination-hover-color: #fff; @pagination-hover-bg: darken(@brand-success, 15%); -@pagination-hover-border: transparent; +@pagination-hover-border: transparent; @pagination-active-color: #fff; -@pagination-active-bg: darken(@brand-success, 15%); -@pagination-active-border: transparent; +@pagination-active-bg: darken(@brand-success, 15%); +@pagination-active-border: transparent; @pagination-disabled-color: @gray-lighter; -@pagination-disabled-bg: lighten(@brand-success, 15%); -; -@pagination-disabled-border: transparent; +@pagination-disabled-bg: lighten(@brand-success, 15%);; +@pagination-disabled-border: transparent; + //== Pager // //## -@pager-bg: @pagination-bg; -@pager-border: @pagination-border; +@pager-bg: @pagination-bg; +@pager-border: @pagination-border; @pager-border-radius: 15px; -@pager-hover-bg: @pagination-hover-bg; +@pager-hover-bg: @pagination-hover-bg; -@pager-active-bg: @pagination-active-bg; -@pager-active-color: @pagination-active-color; +@pager-active-bg: @pagination-active-bg; +@pager-active-color: @pagination-active-color; @pager-disabled-color: #fff; + //== Jumbotron // //## @@ -457,7 +477,8 @@ @jumbotron-color: inherit; @jumbotron-bg: @gray-lighter; @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 // @@ -479,6 +500,7 @@ @state-danger-bg: @brand-danger; @state-danger-border: @brand-danger; + //== Tooltips // //## @@ -489,13 +511,14 @@ @tooltip-color: #fff; //** Tooltip background color @tooltip-bg: rgba(0,0,0,.9); -@tooltip-opacity: .9; +@tooltip-opacity: .9; //** Tooltip arrow width @tooltip-arrow-width: 5px; //** Tooltip arrow color @tooltip-arrow-color: @tooltip-bg; + //== Popovers // //## @@ -515,14 +538,15 @@ //** Popover arrow width @popover-arrow-width: 10px; //** Popover arrow color -@popover-arrow-color: #fff; +@popover-arrow-color: @popover-bg; //** Popover outer arrow width @popover-arrow-outer-width: (@popover-arrow-width + 1); //** 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-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); +@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); + //== Labels // @@ -546,6 +570,7 @@ //** Default text color of a linked label @label-link-hover-color: #fff; + //== Modals // //## @@ -568,15 +593,16 @@ //** Modal backdrop background color @modal-backdrop-bg: #000; //** Modal backdrop opacity -@modal-backdrop-opacity: .5; +@modal-backdrop-opacity: .5; //** Modal header border color @modal-header-border-color: #e5e5e5; //** Modal footer border color @modal-footer-border-color: @modal-header-border-color; -@modal-lg: 900px; -@modal-md: 600px; -@modal-sm: 300px; +@modal-lg: 900px; +@modal-md: 600px; +@modal-sm: 300px; + //== Alerts // @@ -602,6 +628,7 @@ @alert-danger-text: @state-danger-text; @alert-danger-border: @state-danger-border; + //== Progress bars // //## @@ -610,6 +637,8 @@ @progress-bg: @gray-lighter; //** Progress bar text color @progress-bar-color: #fff; +//** Variable for setting rounded corners on progress bar. +@progress-border-radius: @border-radius-base; //** Default progress bar color @progress-bar-bg: @brand-primary; @@ -622,40 +651,53 @@ //** Info progress bar color @progress-bar-info-bg: @brand-info; + //== List group // //## //** Background color on `.list-group-item` -@list-group-bg: #fff; +@list-group-bg: #fff; //** `.list-group-item` border color -@list-group-border: @gray-lighter; +@list-group-border: @gray-lighter; //** 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 -@list-group-hover-bg: @gray-lighter; -//** Text color of active list elements -@list-group-active-color: @component-active-color; -//** Background color of active list elements -@list-group-active-bg: @component-active-bg; +//** Background color of single list items on hover +@list-group-hover-bg: @gray-lighter; +//** Text color of active list items +@list-group-active-color: @component-active-color; +//** Background color of active list items +@list-group-active-bg: @component-active-bg; //** Border color of active list elements -@list-group-active-border: @list-group-active-bg; -@list-group-active-text-color: lighten(@list-group-active-bg, 40%); +@list-group-active-border: @list-group-active-bg; +//** 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; + //== Panels // //## @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; //** Border color for elements within panels -@panel-inner-border: @gray-lighter; +@panel-inner-border: @gray-lighter; @panel-footer-bg: @gray-lighter; @panel-default-text: @text-color; @@ -670,9 +712,9 @@ @panel-success-border: @state-success-border; @panel-success-heading-bg: @state-success-bg; -@panel-info-text: @state-info-text; -@panel-info-border: @state-info-border; -@panel-info-heading-bg: @state-info-bg; +@panel-info-text: @state-info-text; +@panel-info-border: @state-info-border; +@panel-info-heading-bg: @state-info-bg; @panel-warning-text: @state-warning-text; @panel-warning-border: @state-warning-border; @@ -682,6 +724,7 @@ @panel-danger-border: @state-danger-border; @panel-danger-heading-bg: @state-danger-bg; + //== Thumbnails // //## @@ -700,12 +743,14 @@ //** Padding around the thumbnail caption @thumbnail-caption-padding: 9px; + //== Wells // //## @well-bg: @gray-lighter; -@well-border: transparent; +@well-border: transparent; + //== Badges // @@ -714,10 +759,10 @@ @badge-color: #fff; //** Linked badge text color on hover @badge-link-hover-color: #fff; -@badge-bg: @gray; +@badge-bg: @brand-primary; //** 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-active-bg: #fff; @@ -725,20 +770,22 @@ @badge-line-height: 1; @badge-border-radius: 10px; + //== Breadcrumbs // //## -@breadcrumb-padding-vertical: 8px; +@breadcrumb-padding-vertical: 8px; @breadcrumb-padding-horizontal: 15px; //** Breadcrumb background color -@breadcrumb-bg: @gray-lighter; +@breadcrumb-bg: @gray-lighter; //** Breadcrumb text color -@breadcrumb-color: #ccc; +@breadcrumb-color: #ccc; //** Text color of current page in the breadcrumb -@breadcrumb-active-color: @gray; +@breadcrumb-active-color: @gray; //** Textual separator for between breadcrumb elements -@breadcrumb-separator: "/"; +@breadcrumb-separator: "/"; + //== Carousel // @@ -756,13 +803,15 @@ @carousel-caption-color: #fff; + //== Close // //## @close-font-weight: bold; @close-color: #000; -@close-text-shadow: 0 1px 0 #fff; +@close-text-shadow: none; + //== Code // @@ -771,18 +820,21 @@ @code-color: #c7254e; @code-bg: #f9f2f4; -@kbd-color: #fff; -@kbd-bg: #333; +@kbd-color: #fff; +@kbd-bg: #333; @pre-bg: @gray-lighter; @pre-color: @gray-dark; @pre-border-color: #ccc; @pre-scrollable-max-height: 340px; + //== Type // //## +//** Horizontal offset for forms and lists. +@component-offset-horizontal: 180px; //** Text muted color @text-muted: @gray-light; //** Abbreviations and acronyms border color @@ -792,26 +844,48 @@ //** Blockquote small color @blockquote-small-color: @gray-light; //** 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: @gray-lighter; //** Page header border color -@page-header-border-color: @gray-lighter; - -//== Miscellaneous -// -//## - +@page-header-border-color: transparent; +//** Width of horizontal description list titles +@dl-horizontal-offset: @component-offset-horizontal; //** Horizontal line color. @hr-border: @gray-lighter; -//** Horizontal offset for forms and lists. -@component-offset-horizontal: 180px; +// Flatly 3.3.0 +// Bootswatch +// ----------------------------------------------------- @import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic"); // 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 ==================================================================== .btn:active { @@ -851,12 +925,26 @@ // Tables ===================================================================== +table, .table { - tr.success, - tr.warning, - tr.danger { + a:not(.btn) { + text-decoration: underline; + } + + .dropdown-menu a { + text-decoration: none; + } + + .success, + .warning, + .danger, + .info { color: #fff; + + a { + color: #fff; + } } > thead > tr > th, @@ -880,22 +968,8 @@ // Forms ====================================================================== -.form-control,textarea.form-control, -input[type="text"], -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 { +.form-control, +input, { border-width: 2px; .box-shadow(none); @@ -906,7 +980,12 @@ input[type="color"], .has-warning { .help-block, - .control-label { + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline, + .form-control-feedback { color: @brand-warning; } @@ -914,11 +993,20 @@ input[type="color"], .form-control:focus { border: 2px solid @brand-warning; } + + .input-group-addon { + border-color: @brand-warning; + } } .has-error { .help-block, - .control-label { + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline, + .form-control-feedback { color: @brand-danger; } @@ -926,11 +1014,20 @@ input[type="color"], .form-control:focus { border: 2px solid @brand-danger; } + + .input-group-addon { + border-color: @brand-danger; + } } .has-success { .help-block, - .control-label { + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline, + .form-control-feedback { color: @brand-success; } @@ -938,6 +1035,10 @@ input[type="color"], .form-control:focus { border: 2px solid @brand-success; } + + .input-group-addon { + border-color: @brand-success; + } } // Navs ======================================================================= @@ -968,9 +1069,20 @@ input[type="color"], // Indicators ================================================================= +.close { + color: #fff; + text-decoration: none; + opacity: 0.4; + + &:hover, + &:focus { + color: #fff; + opacity: 1; + } +} + .alert { - a, .alert-link { color: #fff; text-decoration: underline; @@ -982,10 +1094,74 @@ input[type="color"], .progress { height: 10px; .box-shadow(none); + .progress-bar { + font-size: 10px; + line-height: 10px; + } } // Containers ================================================================= .well { .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; } \ No newline at end of file diff --git a/public/css/themes/modern.less b/public/css/themes/modern.less index 3773792a28..f9e6d8b25f 100644 --- a/public/css/themes/modern.less +++ b/public/css/themes/modern.less @@ -1,5 +1,5 @@ -@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=Montserrat:400,700"); +@import url("http://fonts.googleapis.com/css?family=Raleway:400,300"); // Colors // -------------------------