From 5d83e51813030e3492c4d6eea6bbd36db965084b Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Sun, 8 Feb 2015 16:00:09 +1030 Subject: [PATCH] Improve LESS variable skinning (unfinished) --- framework/core/ember/app/styles/config.less | 49 +++++++++++++------ .../ember/app/styles/flarum/discussion.less | 12 ++++- .../core/ember/app/styles/flarum/index.less | 4 +- .../core/ember/app/styles/flarum/layout.less | 35 ++++++++++++- 4 files changed, 79 insertions(+), 21 deletions(-) diff --git a/framework/core/ember/app/styles/config.less b/framework/core/ember/app/styles/config.less index bc1b75392..984031551 100644 --- a/framework/core/ember/app/styles/config.less +++ b/framework/core/ember/app/styles/config.less @@ -1,21 +1,38 @@ -@fl-primary-color: #4d698e;//#E7562E; +@fl-primary-color: #4d698e; @fl-secondary-color: #edf2f7; +@fl-dark-body: false; @fl-dark-hdr: false; // --------------------------------- // BODY -@fl-body-bg: #fff; -@fl-body-color: #444; -@fl-body-muted-color: hsv(hue(@fl-secondary-color), 18%, 72%); // todo -@fl-body-muted-more-color: #bbb; -@fl-body-heading-color: @fl-body-color; +.define-body-variables(@fl-dark-body); +.define-body-variables(false) { + @fl-body-bg: #fff; + @fl-body-color: #444; + @fl-body-muted-color: hsv(hue(@fl-secondary-color), max(0, saturation(@fl-secondary-color) - 20%), 65%); // todo + @fl-body-muted-more-color: #bbb; + @fl-body-heading-color: @fl-body-color; -@fl-body-control-bg: @fl-secondary-color; -@fl-body-control-color: @fl-body-muted-color; + @fl-body-control-bg: @fl-secondary-color; + @fl-body-control-color: @fl-body-muted-color; -@fl-body-control-primary-bg: @fl-primary-color; -@fl-body-control-primary-color: #fff; + @fl-body-control-primary-bg: @fl-primary-color; + @fl-body-control-primary-color: #fff; +} +.define-body-variables(true) { + @fl-body-bg: #333; + @fl-body-color: #ccc; + @fl-body-muted-color: hsv(hue(@fl-secondary-color), max(0, saturation(@fl-secondary-color) - 20%), 65%); // todo + @fl-body-muted-more-color: #bbb; + @fl-body-heading-color: @fl-body-color; + + @fl-body-control-bg: @fl-secondary-color; + @fl-body-control-color: @fl-body-muted-color; + + @fl-body-control-primary-bg: @fl-primary-color; + @fl-body-control-primary-color: #fff; +} // --------------------------------- // HEADER @@ -32,12 +49,12 @@ @fl-body-hero-color: #fff; } .define-hdr-variables(true) { - @fl-hdr-bg: @fl-primary-color; - @fl-hdr-color: #fff; - @fl-hdr-muted-color: fade(#fff, 0.5); - @fl-hdr-control-bg: fade(#000, 0.1); - @fl-hdr-control-color: #fff; + @fl-hdr-bg: @fl-primary-color; + @fl-hdr-color: #fff; + @fl-hdr-muted-color: fade(#fff, 50%); + @fl-hdr-control-bg: fade(#000, 10%); + @fl-hdr-control-color: #fff; @fl-body-hero-bg: @fl-secondary-color; @fl-body-hero-color: @fl-body-muted-color; -} \ No newline at end of file +} diff --git a/framework/core/ember/app/styles/flarum/discussion.less b/framework/core/ember/app/styles/flarum/discussion.less index beb7cbf15..1ce4de4c4 100644 --- a/framework/core/ember/app/styles/flarum/discussion.less +++ b/framework/core/ember/app/styles/flarum/discussion.less @@ -118,11 +118,19 @@ margin-bottom: 10px; color: @fl-body-muted-color; + & > ul { + list-style-type: none; + padding: 0; + margin: 0; + & > li { + display: inline; + } + } & .user { margin: 0; display: inline; font-weight: bold; - font-size: 16px; + font-size: 15px; &, & a { color: @fl-body-heading-color; } @@ -229,4 +237,4 @@ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.5); opacity: 0.99; } -} \ No newline at end of file +} diff --git a/framework/core/ember/app/styles/flarum/index.less b/framework/core/ember/app/styles/flarum/index.less index 05f25d232..815631a55 100644 --- a/framework/core/ember/app/styles/flarum/index.less +++ b/framework/core/ember/app/styles/flarum/index.less @@ -136,7 +136,7 @@ } & .discussion-summary { & .title { - font-size: 15px; + font-size: 14px; } & .count strong { font-size: 18px; @@ -213,7 +213,7 @@ } & .title { margin: 0 0 5px; - font-size: 16px; + font-size: 15px; line-height: 1.3; &, & a { font-weight: normal; diff --git a/framework/core/ember/app/styles/flarum/layout.less b/framework/core/ember/app/styles/flarum/layout.less index ca2d35a82..2d7efdce6 100644 --- a/framework/core/ember/app/styles/flarum/layout.less +++ b/framework/core/ember/app/styles/flarum/layout.less @@ -27,6 +27,35 @@ body { .scrolled & { .box-shadow(0 2px 6px rgba(0, 0, 0, 0.15)); } + + & when (@fl-dark-hdr = true) { + &, & .btn-link { + color: @fl-hdr-control-color; + } + & .form-control { + background: @fl-hdr-control-bg; + border: 0; + color: @fl-hdr-control-color; + .placeholder(@fl-hdr-control-color); + + &:focus { + background: fadein(@fl-hdr-control-bg, 5%); + } + } + & .search-input:before { + color: @fl-hdr-control-color; + } + & .btn-default, & .btn-default:hover { + background: @fl-hdr-control-bg; + color: @fl-hdr-control-color; + } + & .btn-default.active, .open > .dropdown-toggle.btn-default { + background: fadein(@fl-hdr-control-bg, 5%); + } + & .btn-naked { + background: transparent; + } + } } .header-controls { margin: 0; @@ -113,6 +142,10 @@ body { margin: 0; font-size: 22px; font-weight: normal; + + & when (@fl-dark-hdr = true) { + color: @fl-body-color; + } } .hero p { margin: 10px 0 0; @@ -155,4 +188,4 @@ body { & > li { margin-left: 15px; } -} \ No newline at end of file +}