github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-26 10:14:16 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better LESS configuration/theme customisability

Browse Source
This commit is contained in:
Toby Zerner 2015-02-16 12:40:57 +10:30
parent 80cc910175
commit ed55ebf7da
9 changed files with 108 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
ember/app/styles/bootstrap/variables.less
View File

@ -1,4 +1,69 @@
@brand-primary: @fl-primary-color;
// ---------------------------------
// HELPERS
@fl-primary-hue: hue(@fl-primary-color);
@fl-primary-sat: saturation(@fl-primary-color);
@fl-secondary-hue: hue(@fl-secondary-color);
@fl-secondary-sat: saturation(@fl-secondary-color);
// ---------------------------------
// BODY
.define-body-variables(@fl-dark-mode);
.define-body-variables(false) {
@fl-body-primary-color: @fl-primary-color;
@fl-body-secondary-color: hsl(@fl-secondary-hue, min(50%, @fl-secondary-sat), 95%);
@fl-body-bg: #fff;
@fl-body-color: #444;
@fl-body-muted-color: hsl(@fl-secondary-hue, min(25%, @fl-secondary-sat), 65%);
@fl-body-muted-more-color: #bbb;
@fl-shadow-color: rgba(0, 0, 0, 0.25);
}
.define-body-variables(true) {
@fl-body-primary-color: mix(@fl-primary-color, #000);
@fl-body-secondary-color: hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 13%);
@fl-body-bg: hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 10%);
@fl-body-color: #ccc;
@fl-body-muted-color: hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 35%);
@fl-body-muted-more-color: hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 25%);
@fl-shadow-color: rgba(0, 0, 0, 0.5);
}
@fl-body-heading-color: @fl-body-color;
@fl-body-control-bg: @fl-body-secondary-color;
@fl-body-control-color: @fl-body-muted-color;
// ---------------------------------
// HEADER
.define-hdr-variables(@fl-colored-hdr);
.define-hdr-variables(false) {
@fl-hdr-bg: @fl-body-bg;
@fl-hdr-color: contrast(@fl-hdr-bg, #fff, @fl-body-primary-color);
@fl-hdr-muted-color: @fl-body-muted-color;
@fl-hdr-control-bg: @fl-body-control-bg;
@fl-hdr-control-color: @fl-body-control-color;
@fl-body-hero-bg: @fl-body-primary-color;
@fl-body-hero-color: #fff;
}
.define-hdr-variables(true) {
@fl-hdr-bg: @fl-body-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-body-control-bg;
@fl-body-hero-color: @fl-body-control-color;
}
// ---------------------------------
// BOOTSTRAP
@brand-primary: @fl-body-primary-color;
@body-bg: @fl-body-bg;
@text-color: @fl-body-color;
@ -21,3 +86,5 @@
@zindex-composer: @zindex-navbar-fixed + 4;
@zindex-pane: @zindex-navbar-fixed + 5;
@zindex-alerts: @zindex-modal + 10;
@link-hover-color: @link-color;

63
ember/app/styles/config.less
View File

@ -1,60 +1,11 @@
@fl-primary-color: #4d698e;
@fl-secondary-color: #edf2f7;
@fl-dark-body: false;
@fl-dark-hdr: false;
// ---------------------------------
// BODY
// CONFIG
.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;
// Color palette:
// #AB2C2C #E7562E #E99700 #E7D81D #92D32F #55A835 #3388A7 #355B8E #7F45A9 #A0346E #797979
@fl-body-control-bg: @fl-secondary-color;
@fl-body-control-color: @fl-body-muted-color;
@fl-primary-color: #355B8E;
@fl-secondary-color: #355B8E;
@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
.define-hdr-variables(@fl-dark-hdr);
.define-hdr-variables(false) {
@fl-hdr-bg: @fl-body-bg;
@fl-hdr-color: @fl-primary-color;
@fl-hdr-muted-color: @fl-body-muted-color;
@fl-hdr-control-bg: @fl-body-control-bg;
@fl-hdr-control-color: @fl-body-control-color;
@fl-body-hero-bg: @fl-primary-color;
@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, 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;
}
@fl-dark-mode: false;
@fl-colored-hdr: false;

2
ember/app/styles/flarum/alerts.less
View File

@ -6,7 +6,7 @@
& .alert {
display: inline-block;
.box-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
.box-shadow(0 2px 6px @fl-shadow-color);
margin-top: 20px;
}
}

11
ember/app/styles/flarum/components.less
View File

@ -169,14 +169,15 @@
border: 0;
padding: 8px 0;
margin-top: 7px;
.box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
.box-shadow(0 2px 6px @fl-shadow-color);
background: @fl-body-bg;
& > li > a {
padding: 8px 15px;
color: @fl-body-color;
&:hover, &:focus {
color: @fl-body-color;
background-color: @fl-secondary-color;
background-color: @fl-body-control-bg;
}
& .fa {
margin-right: 5px;
@ -185,7 +186,7 @@
}
& .divider {
margin: 10px 0;
background-color: darken(@fl-secondary-color, 2%);
background-color: @fl-body-control-bg;
}
}
.dropdown-split.item-count-1 {
@ -209,7 +210,7 @@
.loading-indicator {
position: relative;
color: @fl-primary-color;
color: @fl-body-primary-color;
}
.loading-indicator-block {
height: 100px;
@ -227,7 +228,7 @@
}
.avatar {
display: inline-block;
color: #fff;
color: @fl-body-bg;
font-weight: 300;
text-align: center;
vertical-align: top;

6
ember/app/styles/flarum/composer.less
View File

@ -18,9 +18,9 @@
pointer-events: auto;
margin-left: -20px;
margin-right: 180px;
.box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
.box-shadow(0 2px 6px @fl-shadow-color);
border-radius: @border-radius-base @border-radius-base 0 0;
background: rgba(255, 255, 255, 0.9);
background: fade(@fl-body-bg, 95%);
transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
position: relative;
height: 300px;
@ -31,7 +31,7 @@
margin-right: -20px;
}
&.active, &.fullscreen {
background: #fff;
background: @fl-body-bg;
}
&.minimized {
height: 50px;

6
ember/app/styles/flarum/discussion.less
View File

@ -277,7 +277,7 @@
position: relative;
}
.scrubber-before, .scrubber-after {
border-left: 1px solid darken(@fl-secondary-color, 2%);
border-left: 1px solid @fl-body-secondary-color;
}
.scrubber-slider {
position: relative;
@ -287,13 +287,13 @@
.scrubber-handle {
height: 100%;
width: 5px;
background: @fl-primary-color;
background: @fl-body-primary-color;
border-radius: 4px;
float: left;
margin-left: -2px;
transition: background 0.2s;
.disabled & {
background: @fl-secondary-color;
background: @fl-body-secondary-color;
}
}
.scrubber-info {

16
ember/app/styles/flarum/index.less
View File

@ -57,7 +57,7 @@
}
& > li.active > a {
background: none;
color: @fl-primary-color;
color: @fl-body-primary-color;
font-weight: bold;
}
}
@ -103,9 +103,9 @@
top: 56px;
bottom: 0;
width: @index-pane-width;
background: #fff;
background: @fl-body-bg;
padding-bottom: 200px;
.box-shadow(2px 2px 6px -2px rgba(0, 0, 0, 0.25));
.box-shadow(2px 2px 6px -2px @fl-shadow-color);
.transition(left 0.2s);
&.showing, .with-pane & {
@ -131,7 +131,7 @@
padding-left: 65px + 15px;
padding-right: 65px + 15px;
&.active {
background: @fl-secondary-color;
background: @fl-body-control-bg;
}
}
& .discussion-summary {
@ -191,6 +191,7 @@
&, & a {
color: @fl-body-muted-color;
text-decoration: none;
}
& .author {
float: left;
@ -206,12 +207,19 @@
&.active {
text-decoration: none;
}
&:hover .title {
text-decoration: underline;
}
}
& .title {
margin: 0 0 5px;
font-size: 15px;
line-height: 1.3;
}
&.unread .title {
color: @fl-body-heading-color;
font-weight: bold;
}
& .info {
list-style-type: none;
padding: 0;

13
ember/app/styles/flarum/layout.less
View File

@ -25,10 +25,10 @@ body {
.transition(box-shadow 0.2s);
.scrolled & {
.box-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
.box-shadow(0 2px 6px @fl-shadow-color);
}
& when (@fl-dark-hdr = true) {
& when (@fl-colored-hdr = true) {
&, & .btn-link {
color: @fl-hdr-control-color;
}
@ -121,7 +121,7 @@ body {
// Main
.global-main, .paned {
border-top: 1px solid @fl-secondary-color;
border-top: 1px solid @fl-body-control-bg;
}
// Hero
@ -143,10 +143,11 @@ body {
margin: 0;
font-size: 22px;
font-weight: normal;
// color: @fl-body-heading-color;
& when (@fl-dark-hdr = true) {
color: @fl-body-color;
}
// & when (@fl-colored-hdr = true) {
// color: @fl-body-color;
// }
}
.hero p {
margin: 10px 0 0;

2
ember/app/styles/flarum/modals.less
View File

@ -19,7 +19,7 @@
.modal-content {
border: 0;
border-radius: @border-radius-base;
.box-shadow(0 7px 15px rgba(0, 0, 0, 0.3));
.box-shadow(0 7px 15px @fl-shadow-color);
}
.modal-sm {
width: 375px;