github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-29 04:33:47 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity
ca343edf00
framework/less/lib/variables.less

121 lines
4.1 KiB
Plaintext
Raw Normal View History

Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
// ---------------------------------
// 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;
Slightly increase contrast between primary/muted text
2015-05-18 09:06:04 +08:00
@fl-body-muted-color: hsl(@fl-secondary-hue, min(25%, @fl-secondary-sat), 68%);
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
@fl-body-muted-more-color: #bbb;
Darken drop shadows a bit
2015-03-23 09:37:10 +08:00
@fl-shadow-color: rgba(0, 0, 0, 0.35);
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
}
.define-body-variables(true) {
@fl-body-primary-color: mix(@fl-primary-color, #000);
Skin colour tweaks
2015-05-02 06:59:43 +08:00
@fl-body-secondary-color: hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 13%);
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
Skin colour tweaks
2015-05-02 06:59:43 +08:00
@fl-body-bg: hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 10%);
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
@fl-body-color: #ccc;
Skin colour tweaks
2015-05-02 06:59:43 +08:00
@fl-body-muted-color: hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 35%);
@fl-body-muted-more-color: hsl(@fl-secondary-hue, min(10%, @fl-secondary-sat), 25%);
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
@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;
Responsive design baby! Mobile responsive design with a very native feel, all in pure CSS (no templating differences between versions — even though some things are in very different positions.) I’ve been working on this whole thing in my head for a while now, planning out how certain components will be laid out on the mobile version, and how to reason about them in the templates so that a substantially different layout can still be achieved by only using CSS. Today I finally wrote the CSS and it’s come together pretty damn perfectly. Still to come: - Swiping left or right on discussions to reveal controls - Tablet version
2015-03-03 18:00:52 +08:00
// ---------------------------------
// DRAWER
@fl-drawer-bg: @fl-body-primary-color;
@fl-drawer-color: #fff;
@fl-drawer-muted-color: fade(#fff, 50%);
@fl-drawer-control-bg: fade(#000, 10%);
@fl-drawer-control-color: #fff;
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
// ---------------------------------
// 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;
Skin colour tweaks
2015-05-02 06:59:43 +08:00
@fl-body-hero-muted-color: rgba(255, 255, 255, 0.6);
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
}
.define-hdr-variables(true) {
Responsive design baby! Mobile responsive design with a very native feel, all in pure CSS (no templating differences between versions — even though some things are in very different positions.) I’ve been working on this whole thing in my head for a while now, planning out how certain components will be laid out on the mobile version, and how to reason about them in the templates so that a substantially different layout can still be achieved by only using CSS. Today I finally wrote the CSS and it’s come together pretty damn perfectly. Still to come: - Swiping left or right on discussions to reveal controls - Tablet version
2015-03-03 18:00:52 +08:00
@fl-hdr-bg: @fl-drawer-bg;
@fl-hdr-color: @fl-drawer-color;
@fl-hdr-muted-color: @fl-drawer-muted-color;
@fl-hdr-control-bg: @fl-drawer-control-bg;
@fl-hdr-control-color: @fl-drawer-control-color;
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
@fl-body-hero-bg: @fl-body-control-bg;
Skin colour tweaks
2015-05-02 06:59:43 +08:00
@fl-body-hero-color: @fl-body-primary-color;
@fl-body-hero-muted-color: @fl-body-control-color;
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
}
Responsive design baby! Mobile responsive design with a very native feel, all in pure CSS (no templating differences between versions — even though some things are in very different positions.) I’ve been working on this whole thing in my head for a while now, planning out how certain components will be laid out on the mobile version, and how to reason about them in the templates so that a substantially different layout can still be achieved by only using CSS. Today I finally wrote the CSS and it’s come together pretty damn perfectly. Still to come: - Swiping left or right on discussions to reveal controls - Tablet version
2015-03-03 18:00:52 +08:00
// ---------------------------------
// LAYOUT
@drawer-width: 270px;
@index-pane-width: 400px;
Make mobile header smaller
2015-03-04 07:18:56 +08:00
@header-height: 56px;
@mobile-header-height: 46px;
Responsive design baby! Mobile responsive design with a very native feel, all in pure CSS (no templating differences between versions — even though some things are in very different positions.) I’ve been working on this whole thing in my head for a while now, planning out how certain components will be laid out on the mobile version, and how to reason about them in the templates so that a substantially different layout can still be achieved by only using CSS. Today I finally wrote the CSS and it’s come together pretty damn perfectly. Still to come: - Swiping left or right on discussions to reveal controls - Tablet version
2015-03-03 18:00:52 +08:00
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
// ---------------------------------
// BOOTSTRAP
@brand-primary: @fl-body-primary-color;
Implement redesign, refactor everything - Write CSS for everything, update templates. - Refactor discussion view. Stream is split into two components (content and scrubber) which have their own responsibilities. - Extract pane functionality into a mixin. - Implement global “back button” system. You give a “paneable” target to the application controller, the back button will modulate its pane-related properties as necessary, and call an action when the button is clicked. - Extract welcome-hero into its own component. - Lots of other general improvements/refactoring. The code is quite well-commented so take a look!
2015-01-16 14:56:10 +08:00
@body-bg: @fl-body-bg;
@text-color: @fl-body-color;
User settings GUI, including some new components
2015-03-28 09:03:18 +08:00
@legend-color: @fl-body-color;
Implement redesign, refactor everything - Write CSS for everything, update templates. - Refactor discussion view. Stream is split into two components (content and scrubber) which have their own responsibilities. - Extract pane functionality into a mixin. - Implement global “back button” system. You give a “paneable” target to the application controller, the back button will modulate its pane-related properties as necessary, and call an action when the button is clicked. - Extract welcome-hero into its own component. - Lots of other general improvements/refactoring. The code is quite well-commented so take a look!
2015-01-16 14:56:10 +08:00
@font-size-base: 13px;
Tweak heading line height
2015-05-07 05:08:01 +08:00
@headings-line-height: 1.428571429;
Implement redesign, refactor everything - Write CSS for everything, update templates. - Refactor discussion view. Stream is split into two components (content and scrubber) which have their own responsibilities. - Extract pane functionality into a mixin. - Implement global “back button” system. You give a “paneable” target to the application controller, the back button will modulate its pane-related properties as necessary, and call an action when the button is clicked. - Extract welcome-hero into its own component. - Lots of other general improvements/refactoring. The code is quite well-commented so take a look!
2015-01-16 14:56:10 +08:00
@font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@padding-base-vertical: 8px;
@padding-base-horizontal: 13px;
@btn-default-bg: @fl-body-control-bg;
@btn-default-color: @fl-body-control-color;
@input-bg: @fl-body-control-bg;
@input-border: @fl-body-control-bg;
Tweak some styles - Rename btn-blend to btn-naked - Tweak input focus style - Other stuff
2015-01-30 09:47:55 +08:00
@input-border-focus: @fl-body-control-bg;
Implement redesign, refactor everything - Write CSS for everything, update templates. - Refactor discussion view. Stream is split into two components (content and scrubber) which have their own responsibilities. - Extract pane functionality into a mixin. - Implement global “back button” system. You give a “paneable” target to the application controller, the back button will modulate its pane-related properties as necessary, and call an action when the button is clicked. - Extract welcome-hero into its own component. - Lots of other general improvements/refactoring. The code is quite well-commented so take a look!
2015-01-16 14:56:10 +08:00
@input-color: @fl-body-control-color;
Fix up z-indexes
2015-02-06 08:04:41 +08:00
@input-color-placeholder: @fl-body-control-color;
@zindex-composer: @zindex-navbar-fixed + 4;
@zindex-pane: @zindex-navbar-fixed + 5;
@zindex-alerts: @zindex-modal + 10;
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
Make link styles more obvious
2015-05-11 10:41:38 +08:00
@link-color: saturate(@fl-primary-color, 10%);
Better LESS configuration/theme customisability
2015-02-16 10:10:57 +08:00
@link-hover-color: @link-color;
Responsive design baby! Mobile responsive design with a very native feel, all in pure CSS (no templating differences between versions — even though some things are in very different positions.) I’ve been working on this whole thing in my head for a while now, planning out how certain components will be laid out on the mobile version, and how to reason about them in the templates so that a substantially different layout can still be achieved by only using CSS. Today I finally wrote the CSS and it’s come together pretty damn perfectly. Still to come: - Swiping left or right on discussions to reveal controls - Tablet version
2015-03-03 18:00:52 +08:00
// ---------------------------------
// MEDIA SHORTCODES
@phone: ~"(max-width: @{screen-xs-max})";
@tablet: ~"(min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@desktop: ~"(min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";
@desktop-hd: ~"(min-width: @{screen-lg-min})";
Reference in New Issue Copy Permalink