diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 64454c7fc..e05843206 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -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; diff --git a/modules/backend/assets/less/controls/common.less b/modules/backend/assets/less/controls/common.less index 29c8137e6..24cc76537 100644 --- a/modules/backend/assets/less/controls/common.less +++ b/modules/backend/assets/less/controls/common.less @@ -26,6 +26,10 @@ } } +// +// Logos +// + .oc-logo-white { background-image: url(../images/october-logo-white.svg); background-position: 50% 50%; diff --git a/modules/backend/assets/less/controls/fancylayout.less b/modules/backend/assets/less/controls/fancylayout.less index da24c8e02..6585f5f95 100644 --- a/modules/backend/assets/less/controls/fancylayout.less +++ b/modules/backend/assets/less/controls/fancylayout.less @@ -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 { diff --git a/modules/backend/assets/less/controls/filelist.less b/modules/backend/assets/less/controls/filelist.less index eccaaeae7..a73255bb1 100644 --- a/modules/backend/assets/less/controls/filelist.less +++ b/modules/backend/assets/less/controls/filelist.less @@ -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; } } - } } } diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less index 355a56f7d..7263ee9aa 100644 --- a/modules/backend/assets/less/core/variables.less +++ b/modules/backend/assets/less/core/variables.less @@ -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; diff --git a/modules/backend/assets/less/layout/sidenav.less b/modules/backend/assets/less/layout/sidenav.less index 240e7a60a..8e14fd412 100644 --- a/modules/backend/assets/less/layout/sidenav.less +++ b/modules/backend/assets/less/layout/sidenav.less @@ -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 { diff --git a/modules/backend/models/BackendSettings.php b/modules/backend/models/BackendSettings.php index 70a899039..7c2813386 100644 --- a/modules/backend/models/BackendSettings.php +++ b/modules/backend/models/BackendSettings.php @@ -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')); diff --git a/modules/backend/models/backendsettings/custom.less b/modules/backend/models/backendsettings/custom.less index 728c9a429..12d230307 100644 --- a/modules/backend/models/backendsettings/custom.less +++ b/modules/backend/models/backendsettings/custom.less @@ -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(''); + +.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; + } } \ No newline at end of file diff --git a/modules/backend/models/backendsettings/fields.yaml b/modules/backend/models/backendsettings/fields.yaml index 7d15e1e0c..1d66c081b 100644 --- a/modules/backend/models/backendsettings/fields.yaml +++ b/modules/backend/models/backendsettings/fields.yaml @@ -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 + +