mirror of https://github.com/flarum/flarum
229 lines
6.8 KiB
Plaintext
229 lines
6.8 KiB
Plaintext
// ---------------------------------
|
|
// CONFIG
|
|
|
|
@config-primary-color: #4EA1CA;
|
|
@config-secondary-color: #4EA1CA;
|
|
@config-dark-mode: false;
|
|
@config-colored-header: false;
|
|
|
|
// ---------------------------------
|
|
// COLORS
|
|
|
|
@primary-hue: hue(@primary-color);
|
|
@primary-sat: saturation(@primary-color);
|
|
|
|
@secondary-hue: hue(@secondary-color);
|
|
@secondary-sat: saturation(@secondary-color);
|
|
|
|
// Derive the primary/secondary colors from the config variables. In dark mode,
|
|
// we make the user-set colors a bit darker, otherwise they will stand out too
|
|
// much.
|
|
.define-colors(@config-dark-mode);
|
|
.define-colors(false) {
|
|
@primary-color: @config-primary-color;
|
|
@secondary-color: @config-secondary-color;
|
|
|
|
@body-bg: #fff;
|
|
@text-color: #111;
|
|
@link-color: saturate(@primary-color, 10%);
|
|
@heading-color: @text-color;
|
|
@muted-color: hsl(@secondary-hue, min(20%, @secondary-sat), 50%);
|
|
@muted-more-color: #aaa;
|
|
@shadow-color: rgba(0, 0, 0, 0.35);
|
|
|
|
@control-bg: #F2F3F3;
|
|
@control-color: @muted-color;
|
|
@control-danger-bg: #fdd;
|
|
@control-danger-color: #d66;
|
|
|
|
@overlay-bg: fade(@secondary-color, 90%);
|
|
|
|
@code-bg: darken(@body-bg, 3%);
|
|
@code-color: lighten(@text-color, 30%);
|
|
}
|
|
.define-colors(true) {
|
|
@primary-color: @config-primary-color;
|
|
@secondary-color: @config-secondary-color;
|
|
|
|
@body-bg: hsl(@secondary-hue, min(20%, @secondary-sat), 10%);
|
|
@text-color: #ddd;
|
|
@link-color: saturate(@primary-color, 10%);
|
|
@heading-color: @text-color;
|
|
@muted-color: hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
|
|
@muted-more-color: hsl(@secondary-hue, min(10%, @secondary-sat), 40%);
|
|
@shadow-color: rgba(0, 0, 0, 0.5);
|
|
|
|
@control-bg: #F2F3F3;
|
|
@control-color: @muted-color;
|
|
@control-danger-bg: #411;
|
|
@control-danger-color: #a88;
|
|
|
|
@overlay-bg: fade(darken(@body-bg, 5%), 90%);
|
|
|
|
@code-bg: darken(@body-bg, 3%);
|
|
@code-color: #fff;
|
|
}
|
|
|
|
@hero-bg: @control-bg;
|
|
@hero-color: @control-color;
|
|
@hero-muted-color: @control-color;
|
|
|
|
@alert-bg: #fff2ae;
|
|
@alert-color: #ad6c00;
|
|
|
|
@alert-error-bg: #d83e3e;
|
|
@alert-error-color: #fff;
|
|
|
|
@alert-success-bg: #B4F1AF;
|
|
@alert-success-color: #33722D;
|
|
|
|
.define-header(@config-colored-header);
|
|
.define-header(false) {
|
|
@header-bg: #4FA4CE;
|
|
@header-color: @body-bg;
|
|
@header-control-bg: hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
|
|
@header-control-color: #000;
|
|
}
|
|
.define-header(true) {
|
|
@header-bg: #4FA4CE;
|
|
@header-color: @body-bg;
|
|
@header-control-bg: hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
|
|
@header-control-color: @control-bg;
|
|
}
|
|
|
|
// ---------------------------------
|
|
// LAYOUT
|
|
|
|
@drawer-width: 270px;
|
|
@pane-width: 400px;
|
|
@header-height: 66px;
|
|
@header-height-phone: 46px;
|
|
|
|
@border-radius: 0px;
|
|
|
|
@zindex-header: 1000;
|
|
@zindex-pane: 1010;
|
|
@zindex-composer: 1020;
|
|
@zindex-dropdown: 1030;
|
|
@zindex-modal-background: 1040;
|
|
@zindex-modal: 1050;
|
|
@zindex-alerts: 1060;
|
|
@zindex-tooltip: 1070;
|
|
|
|
// ---------------------------------
|
|
// BREAKPOINTS
|
|
|
|
@screen-phone-max: (@screen-tablet - 1);
|
|
|
|
@screen-tablet: 768px;
|
|
@screen-tablet-max: (@screen-desktop - 1);
|
|
|
|
@screen-desktop: 992px;
|
|
@screen-desktop-max: (@screen-desktop-hd - 1);
|
|
|
|
@screen-desktop-hd: 1100px;
|
|
|
|
@phone: ~"(max-width: @{screen-phone-max})";
|
|
@tablet: ~"(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})";
|
|
@desktop: ~"(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})";
|
|
@desktop-hd: ~"(min-width: @{screen-desktop-hd})";
|
|
|
|
@tablet-up: ~"(min-width: @{screen-tablet})";
|
|
@desktop-up: ~"(min-width: @{screen-desktop})";
|
|
|
|
// ---------------------------------
|
|
// COMPONENTS
|
|
|
|
@tooltip-bg: rgba(0, 0, 0, 0.9);
|
|
@tooltip-color: #fff;
|
|
|
|
@online-user-circle-color: #7FBA00;
|
|
|
|
// ---- end vars --- start mixinis
|
|
|
|
.header-background() {
|
|
box-shadow: 0px 0px 25px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
// --------
|
|
|
|
.Button {
|
|
text-transform: uppercase;
|
|
font-weight: 300;
|
|
}
|
|
.Header-title {
|
|
padding: 0px;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
text-align: center;
|
|
|
|
> img {
|
|
min-width: 200px;
|
|
height: auto;
|
|
}
|
|
.Header-logo {
|
|
max-height: none;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.Header-navigation {
|
|
float: left;
|
|
margin-right: 25px;
|
|
margin-top: 8px;
|
|
}
|
|
.Header-controls {
|
|
margin: 4px;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
li.TagTile.bgImg {
|
|
color: #fff !important;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
|
|
> a {
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
font-weight: 300;
|
|
> h3 {
|
|
color: #fff;
|
|
}
|
|
.TagTile-children a {
|
|
color: #fff;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
li.TagTile.bgImg.photography {
|
|
background-image: url('https://dt9ph4xofvj87.cloudfront.net/user/sites/shawacademy.com/themes/mytheme/images/courses/photography/slider-card.png');
|
|
}
|
|
li.TagTile.bgImg.marketing {
|
|
background-image: url('https://dt9ph4xofvj87.cloudfront.net/user/sites/shawacademy.com/themes/mytheme/images/courses/marketing/slider-card.png');
|
|
}
|
|
li.TagTile.bgImg.nutrition {
|
|
background-image: url('https://dt9ph4xofvj87.cloudfront.net/user/sites/shawacademy.com/themes/mytheme/images/courses/nutrition/slider-card.png');
|
|
}
|
|
body .SessionDropdown .Dropdown-toggle {
|
|
border-radius: 18px;
|
|
|
|
.Avatar {
|
|
margin: -8px -15px -5px 10px;
|
|
.Avatar--size(43px);
|
|
}
|
|
.Button-label .username {
|
|
margin-top: 5px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.viewNavInline {
|
|
.listInline {
|
|
padding: 0px;
|
|
list-style: none;
|
|
> li {
|
|
display: inline-block;
|
|
margin: 0px 5px 5px 0px;
|
|
}
|
|
}
|
|
}
|