TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add light/dark variations of primary/secondary colors

This commit is contained in:
Sam Georges 2014-10-15 08:10:38 +11:00
parent 57ec5c7261
commit 82192c3e55
9 changed files with 184 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/backend/assets/css/october.css
View File

@ -12694,7 +12694,7 @@ div.popover-overlay {
top: 4px;
right: 1px;
color: rgba(255, 255, 255, 0.3) !important;
font: 14px bold "Helvetica Neue", Helvetica, Arial, sans-seri8;
font: 14px bold "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i:hover,
.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i:hover {
@ -13130,7 +13130,7 @@ div.popover-overlay {
filter: alpha(opacity=100);
}
.fancy-layout .field-codeeditor {
border: none!important;
border: none !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;

4
modules/backend/assets/less/controls/common.less
View File

@ -26,6 +26,10 @@
}
}
//
// Logos
//
.oc-logo-white {
background-image: url(../images/october-logo-white.svg);
background-position: 50% 50%;

24
modules/backend/assets/less/controls/fancylayout.less
View File

@ -41,10 +41,10 @@
font-size: 14px;
color: @color-fancy-master-tabs-inactive-text;
}
&:before {left: 8px;}
&:after {right: 8px;}
&.scroll-before:before {color: @color-fancy-master-tabs-active-text;}
&.scroll-after:after {color: @color-fancy-master-tabs-active-text;}
&:before { left: 8px; }
&:after { right: 8px; }
&.scroll-before:before { color: @color-fancy-master-tabs-active-text; }
&.scroll-after:after { color: @color-fancy-master-tabs-active-text; }
> div > div.tabs-container {
background: @color-fancy-master-tabs-bg;
@ -65,12 +65,12 @@
i {
top: 4px;
right: 1px;
color: rgba(255, 255, 255, 0.3)!important;
font: 14px bold "Helvetica Neue", Helvetica, Arial, sans-seri8;
&:hover {color: @color-fancy-master-tabs-active-text!important;}
color: rgba(255, 255, 255, 0.3) !important;
font: 14px bold "Helvetica Neue", Helvetica, Arial, sans-serif;
&:hover { color: @color-fancy-master-tabs-active-text !important; }
}
}
a {
@ -126,7 +126,7 @@
z-index: 107;
color: @color-fancy-master-tabs-active-text;
}
span.tab-close i {color: @color-fancy-master-tabs-active-text;}
span.tab-close i { color: @color-fancy-master-tabs-active-text; }
a > span.title {
background-color: @color-fancy-form-tabless-fields-bg;
@ -437,8 +437,8 @@
// Code editor
//
.field-codeeditor {
border: none!important;
.field-codeeditor {
border: none !important;
.border-radius(0);
.editor-code {

14
modules/backend/assets/less/controls/filelist.less
View File

@ -42,6 +42,7 @@
a:hover {
background: @color-list-hover;
}
&.active a {
background: @color-list-active;
position: relative;
@ -100,7 +101,7 @@
position: relative;
outline: none;
&:hover {background: transparent;}
&:hover { background: transparent; }
&:before, &:after {
width: 10px;
@ -134,14 +135,16 @@
padding-left: 52px;
}
> li.group {padding-left: 20px;}
> li.group {
padding-left: 20px;
}
.listPaddings(10);
}
&[data-status=collapsed] {
> h4 a:before, > div.group > h4 a:before {
.transform( ~'rotate(0deg) translate(3px, 0)' );
.transform(~'rotate(0deg) translate(3px, 0)');
}
& > ul, & > div.subitems {
@ -214,11 +217,10 @@
background-color: @color-list-active;
}
&:before {top: -1px;}
&:after {bottom: -1px;}
&:before { top: -1px; }
&:after { bottom: -1px; }
}
}
}
}

6
modules/backend/assets/less/core/variables.less
View File

@ -15,7 +15,7 @@
@btn-default-bg: #e3e3e3;
@btn-default-border: #e3e3e3;
@tooltip-bg: #34495E;
@tooltip-bg: #34495e;
@link-color: darken(@brand-primary, 15%);
@link-hover-color: darken(@link-color, 30%);
@ -68,7 +68,7 @@
@color-footer-border: #dfdfdf;
@color-footer-text: #666666;
@color-sidebarnav-bg: #34495E;
@color-sidebarnav-bg: #34495e;
@color-sidebarnav-inactive-text: #808b93;
@color-sidebarnav-inactive-icon: #808b93;
@color-sidebarnav-active-text: #ffffff;
@ -95,7 +95,7 @@
@color-list-arrow: #cfcfcf;
@color-list-icon: #a1aab1;
@color-list-parent-bg: #ffffff;
@color-list-nav-arrow: #34495E;
@color-list-nav-arrow: #34495e;
@color-list-header-bg: transparent;
@color-list-head-bg: #ffffff;
@color-list-progress-bg: #0181b9;

2
modules/backend/assets/less/layout/sidenav.less
View File

@ -56,7 +56,7 @@
&.active a, a:hover {
color: @color-sidebarnav-active-text;
i {color: @color-sidebarnav-active-icon;}
i { color: @color-sidebarnav-active-icon; }
}
span.counter {

16
modules/backend/models/BackendSettings.php
View File

@ -40,10 +40,16 @@ class BackendSettings extends Model
$this->app_motto = Lang::get('system::lang.app.motto');
// Carrot
$this->primary_color = '#e67e22';
$this->primary_color_dark = '#d35400';
// Pumpkin
$this->primary_color_light = '#e67e22';
// Midnight Blue
$this->secondary_color = '#2b3e50';
$this->secondary_color_dark = '#2b3e50';
// Wet Asphalt
$this->secondary_color_light = '#34495e';
}
public static function getLogo()
@ -60,7 +66,11 @@ class BackendSettings extends Model
$parser = new Less_Parser(['compress' => true]);
$parser->ModifyVars([
'logo' => "'".self::getLogo()."'"
'logo-image' => "'".self::getLogo()."'",
'primary-color-light' => $this->primary_color_light,
'primary-color-dark' => $this->primary_color_dark,
'secondary-color-light' => $this->secondary_color_light,
'secondary-color-dark' => $this->secondary_color_dark,
]);
$parser->parse(File::get(__DIR__.'/backendsettings/custom.less'));

128
modules/backend/models/backendsettings/custom.less
View File

@ -1,7 +1,131 @@
//
// Coded variables
//
// @logo-image
// @primary-color-light - #e67e22
// @primary-color-dark - #d35400
// @secondary-color-light - #34495e
// @secondary-color-dark - #2b3e50
//
//
// Logos
//
.oc-bg-logo {
background-image: linear-gradient(to bottom, rgba(249,249,249,0.7) 0%,rgba(249,249,249,0.7) 100%), url('@{logo}');
background-image: linear-gradient(to bottom, rgba(249,249,249,0.7) 0%,rgba(249,249,249,0.7) 100%), url('@{logo-image}');
}
.oc-logo-white {
background-image: url('@{logo}');
background-image: url('@{logo-image}');
height: 170px !important;
}
//
// Outside Layout
//
@color-outer-bg: @secondary-color-dark;
@color-outer-header: mix(black, saturate(@secondary-color-dark, 5%), 27%);
body.outer {
background: @color-outer-bg;
}
body.outer .layout > .layout-row.layout-head {
background: @color-outer-header;
}
//
// Side navigation bar
//
//color-sidebarnav-bg: mix(white, saturate(@secondary-color, 6.25%), 5.75%);
@color-sidebarnav-bg: @secondary-color-light;
#layout-sidenav {
background-color: @color-sidebarnav-bg;
ul li a {
&, i { color: rgba(255, 255, 255, .35); }
}
}
//
// Fancy layout
//
//color-fancy-master-tabs-bg: mix(black, saturate(spin(@primary-color, -5.5), 100%), 17.25%);
//color-fancy-form-inactive-tab: mix(black, saturate(spin(@primary-color-light, -4.25), 11.25%), 24%);
@color-fancy-form-tabless-fields-bg: @primary-color-light;
@color-fancy-master-tabs-bg: @primary-color-dark;
@color-fancy-form-inactive-tab: mix(black, desaturate(@primary-color-dark, 14.5%), 5%);
@tab-svg: escape('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="100px" height="110px" viewBox="0 0 100 110" enable-background="new 0 0 100 110" xml:space="preserve"><path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/><path fill="@{color-fancy-form-tabless-fields-bg}" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/><path fill="@{color-fancy-form-tabless-fields-bg}" d="M100,70c-5,0-10-30-20-30c0,10,0,15,0,15v15"/><path fill="@{color-fancy-form-inactive-tab}" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/><path fill="@{color-fancy-form-inactive-tab}" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/></svg>');
.fancy-layout {
.control-tabs, &.control-tabs {
&.master {
> div > div.tabs-container {
background: @color-fancy-master-tabs-bg;
}
}
&.primary {
> div > ul.nav-tabs {
&.master-area {
background: @color-fancy-form-tabless-fields-bg;
}
}
}
&.master {
> div > div.tabs-container > ul.nav-tabs > li {
a { color: rgba(255, 255, 255, .35); }
a > span.title {
background-color: @color-fancy-form-inactive-tab;
&:before, &:after {
background-image: url(~'data:image/svg+xml;charset=UTF-8,@{tab-svg}');
}
}
&.active {
a { color: #fff; }
a > span.title {
background-color: @color-fancy-form-tabless-fields-bg;
}
}
}
}
}
.form-tabless-fields {
background: @color-fancy-form-tabless-fields-bg;
label {
color: rgba(255, 255, 255, .5);
}
}
}
//
// Component List
//
@color-component-list-bg: @secondary-color-dark;
div.control-componentlist {
background-color: @color-component-list-bg;
&.droppable {
background-color: lighten(@color-component-list-bg, 20%);
}
}
//
// File List
//
.control-filelist {
ul li.active a:after {
background: @primary-color-light;
}
}

19
modules/backend/models/backendsettings/fields.yaml
View File

@ -20,13 +20,24 @@ fields:
label: App Motto
commentAbove: This name is shown on the sign in screen for the back-end.
primary_color:
label: Primary color
primary_color_light:
label: Primary color light
type: colorpicker
span: auto
secondary_color:
label: Secondary color
primary_color_dark:
label: Primary color dark
type: colorpicker
span: auto
secondary_color_light:
label: Secondary color light
type: colorpicker
span: auto
secondary_color_dark:
label: Secondary color dark
type: colorpicker
span: auto