diff --git a/app/assets/less/base/typography.less b/app/assets/less/base/typography.less index a1790c3..e5ea78a 100644 --- a/app/assets/less/base/typography.less +++ b/app/assets/less/base/typography.less @@ -2,7 +2,6 @@ // Section header (part of .section) .hdr-center { - //&:extend(.text-center); display: inline-block; padding: 20px 80px; margin: 30px auto; diff --git a/app/assets/less/components/badge.less b/app/assets/less/components/badge.less index 913fd0f..ddbf146 100644 --- a/app/assets/less/components/badge.less +++ b/app/assets/less/components/badge.less @@ -10,9 +10,9 @@ &:empty { display:none; } -} -.badge-primary { - color: white; - background-color: @brand-color; + &-primary { + color: white; + background-color: @brand-color; + } } diff --git a/app/assets/less/components/callback-list.less b/app/assets/less/components/callback-list.less index 023c773..2c9197e 100644 --- a/app/assets/less/components/callback-list.less +++ b/app/assets/less/components/callback-list.less @@ -7,7 +7,7 @@ padding: .6em 1em; &:hover { - background: @lightest-gray; + background: @gray-lightest; } // Borders. @@ -67,7 +67,7 @@ } &-arrow { - color: #bcbcbc; + color: @callback-list-arrow-color; position: absolute; right: .8em; top: 50%; diff --git a/app/assets/less/components/pagination.less b/app/assets/less/components/pagination.less index 9e28227..97ed4a0 100644 --- a/app/assets/less/components/pagination.less +++ b/app/assets/less/components/pagination.less @@ -20,10 +20,12 @@ &:hover { color: @pagination-color; + background-color: @pagination-hover; } } &.active a { + color: @pagination-active-color; background: @pagination-active-bg; border-color: @pagination-active-border; } diff --git a/app/assets/less/components/request-item.less b/app/assets/less/components/request-item.less index 2278374..cffff6d 100644 --- a/app/assets/less/components/request-item.less +++ b/app/assets/less/components/request-item.less @@ -58,7 +58,7 @@ &-timestamp, &-size, &-ip { - color: @request-item-light-color; + color: @request-item-secondary-color; font-size: @font-size-small; } diff --git a/app/assets/less/components/section.less b/app/assets/less/components/section.less index eaac662..5d89cf0 100644 --- a/app/assets/less/components/section.less +++ b/app/assets/less/components/section.less @@ -9,7 +9,7 @@ padding: @section-padding; margin-bottom: 60px; border-radius: 2px; - .box-shadow(@block-shadow-third); + .box-shadow(@block-shadow-3); &-header { text-align: center; diff --git a/app/assets/less/variables.less b/app/assets/less/variables.less index e55c4bf..eb58e5e 100644 --- a/app/assets/less/variables.less +++ b/app/assets/less/variables.less @@ -6,32 +6,29 @@ @image-path: '@{base-path}/img'; // ---------------------------------- -// General colors. +// Colors // ---------------------------------- -@blue: #0000ff; -@lightest-gray: #f9f9f9; -@light-grey: #dcdcdc; -@dark-grey: #444; -@darker-grey: #202020; +@gray-lightest: #f9f9f9; +@gray-light: #dcdcdc; +@gray-dark: #444; +@gray-darker: #202020; @black: #000; @white: #fff; -// ---------------------------------- -// Global colors. -// ---------------------------------- - -@brand-color: #03a9f4; -@brand-info: hsl(210, 70%, 50%); -@foreground-color: white; -//@body-bg: #f3f6fc; -@body-bg: #f5f5f6; -@border-color: @light-grey; - -@text-color: #353535; -@text-secondary-color: #757575; +// Text +@text-color: #333; +@text-secondary-color: #666; @text-light-color: #f1f1f1; -// Branding colors +// Layout +@foreground-color: @white; +@body-bg: #f5f5f8; +@hover-color: @gray-lightest; +@border-color: @gray-light; + +// Brand +@brand-color: #03a9f4; +@brand-info: hsl(210, 70%, 50%); @google-color: #db4437; @github-color: #4183c4; @@ -81,8 +78,8 @@ @footer-height: 80px; @footer-border-color: @border-color; @footer-text-color: @text-secondary-color; -@footer-link-color: @text-secondary-color; -@footer-link-hover-color: darken(@text-secondary-color, 10%); +@footer-link-color: @footer-text-color; +@footer-link-hover-color: darken(@footer-link-color, 10%); // ---------------------------------- // Buttons @@ -115,17 +112,17 @@ // Shadows // ---------------------------------- -@block-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -@block-shadow-raised: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12); -@block-shadow-third: 0 3px 3px 0 rgba(0, 0, 0, 0.16); +@block-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); +@block-shadow-2: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12); +@block-shadow-3: 0 3px 3px 0 rgba(0, 0, 0, 0.16); // ---------------------------------- // Blankslate // ---------------------------------- -@blankslate-bg: @well-bg; +@blankslate-bg: @gray-lightest; @blankslate-color: @text-secondary-color; -@blankslate-border: @well-border; +@blankslate-border: @border-color; @blankslate-spacing: 25px 10px; @blankslate-spacing-sm: 15px 5px; @@ -135,7 +132,9 @@ @pagination-color: @text-color; @pagination-border: @border-color; -@pagination-hover-color: lighten(@text-color, 25%); +@pagination-hover: @hover-color; + +@pagination-active-color: @white; @pagination-active-bg: @brand-color; @pagination-active-border: darken(@brand-color, 5%); @@ -143,7 +142,7 @@ // Section // ---------------------------------- -@section-bg: white; +@section-bg: @foreground-color; @section-border: rgb(200, 200, 200); @section-padding: 20px; @@ -151,24 +150,31 @@ // Callback list // ---------------------------------- +@callback-list-hover-color: @gray-lightest; +@callback-list-info-color: @text-secondary-color; + @callback-list-border-size: 1px; -@callback-list-border-color: @light-grey; +@callback-list-border-color: @gray-light; @callback-list-border-radius: 3px; + @callback-list-name-text-size: @font-size-h4; @callback-list-name-color: @text-color; @callback-list-name-hover-color: @link-color; -@callback-list-info-color: @text-secondary-color; + +@callback-list-arrow-color: @callback-list-border-color; // ---------------------------------- // Request list // ---------------------------------- -@request-item-color: @dark-grey; -@request-item-light-color: #666; +@request-item-color: @text-color; +@request-item-secondary-color: @text-secondary-color; @request-item-background: transparent; -@request-item-border-color: @light-grey; -@request-item-active-color: @dark-grey; -@request-item-active-background: @lightest-gray; -@request-item-active-border-color: darken(@request-item-active-background, 10%); +@request-item-border-color: @gray-light; @request-item-hover-background: @request-item-active-background; + +@request-item-active-color: @request-item-color; +@request-item-active-background: @gray-lightest; +@request-item-active-border-color: @request-item-border-color; + @request-detail-background: lighten(@brand-color, 45%);