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

Begin the process of refitting brand settings 

Introduce secondary and accent colors
Switch some CSS to use the new storm utils
Other minor improvements
This commit is contained in:
Samuel Georges 2016-04-05 20:04:11 +10:00
parent 03c7cbbeed
commit c5362652c1
42 changed files with 221 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modules/backend/ServiceProvider.php
View File

@ -193,7 +193,8 @@ class ServiceProvider extends ModuleServiceProvider
'icon' => 'icon-paint-brush', 'icon' => 'icon-paint-brush',
'class' => 'Backend\Models\BrandSettings', 'class' => 'Backend\Models\BrandSettings',
'permissions' => ['backend.manage_branding'], 'permissions' => ['backend.manage_branding'],
'order' => 500 'order' => 500,
'keywords' => 'brand style'
], ],
'myaccount' => [ 'myaccount' => [
'label' => 'backend::lang.myaccount.menu_label', 'label' => 'backend::lang.myaccount.menu_label',

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

@ -402,22 +402,23 @@
.control-treeview ol > li.drop-target > div:before{background-position:0px -129px} .control-treeview ol > li.drop-target > div:before{background-position:0px -129px}
.control-treeview ol > li.drop-target.has-subitems > div:before{background-position:0px -102px} .control-treeview ol > li.drop-target.has-subitems > div:before{background-position:0px -102px}
} }
.sidenav-tree{width:300px;background:#31495f} .sidenav-tree{width:300px}
.sidenav-tree .control-toolbar{padding:0} .sidenav-tree .control-toolbar{padding:0}
.sidenav-tree .control-toolbar .toolbar-item{display:block} .sidenav-tree .control-toolbar .toolbar-item{display:block}
.sidenav-tree .control-toolbar input.form-control{border:none;outline:none;padding:12px 13px 13px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)} .sidenav-tree .control-toolbar input.form-control{border:none;outline:none;padding:12px 13px 13px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)}
.sidenav-tree .control-toolbar input.form-control.search{background-position:right -78px} .sidenav-tree .control-toolbar input.form-control.search{background-position:right -78px}
.sidenav-tree ul{padding:0;margin:0;list-style:none} .sidenav-tree ul{padding:0;margin:0;list-style:none}
.sidenav-tree div.scrollbar-thumb{background:#2b3e50 !important} .sidenav-tree div.scrollbar-thumb{background:rgba(0,0,0,0.2) !important}
.sidenav-tree ul.top-level > li[data-status=collapsed] > div.group h3:before{-webkit-transform:rotate(0deg) translate(2px,-2px);-ms-transform:rotate(0deg) translate(2px,-2px);transform:rotate(0deg) translate(2px,-2px)} .sidenav-tree ul.top-level > li[data-status=collapsed] > div.group h3:before{-webkit-transform:rotate(0deg) translate(2px,-2px);-ms-transform:rotate(0deg) translate(2px,-2px);transform:rotate(0deg) translate(2px,-2px)}
.sidenav-tree ul.top-level > li[data-status=collapsed] > div.group h3:after{display:none} .sidenav-tree ul.top-level > li[data-status=collapsed] > div.group:before,.sidenav-tree ul.top-level > li[data-status=collapsed] > div.group:after{display:none}
.sidenav-tree ul.top-level > li[data-status=collapsed] ul{display:none} .sidenav-tree ul.top-level > li[data-status=collapsed] ul{display:none}
.sidenav-tree ul.top-level > li > div.group{position:relative} .sidenav-tree ul.top-level > li > div.group{position:relative}
.sidenav-tree ul.top-level > li > div.group:after{content:'';position:absolute;top:0;right:0;width:10px;height:100%;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)} .sidenav-tree ul.top-level > li > div.group h3{background:rgba(0,0,0,0.15);color:#ecf0f1;text-transform:uppercase;font-size:15px;padding:15px 15px 15px 40px;margin:0;position:relative;cursor:pointer}
.sidenav-tree ul.top-level > li > div.group h3{background:#2a3e51;color:#ecf0f1;text-transform:uppercase;font-size:15px;padding:15px 15px 15px 40px;margin:0;position:relative;cursor:pointer}
.sidenav-tree ul.top-level > li > div.group h3:before{display:block;position:absolute;width:10px;height:10px;left:16px;top:15px;color:#cfcfcf;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105";-webkit-transform:rotate(90deg) translate(5px,-3px);-ms-transform:rotate(90deg) translate(5px,-3px);transform:rotate(90deg) translate(5px,-3px);-webkit-transition:all 0.1s ease;transition:all 0.1s ease;font-size:16px} .sidenav-tree ul.top-level > li > div.group h3:before{display:block;position:absolute;width:10px;height:10px;left:16px;top:15px;color:#cfcfcf;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105";-webkit-transform:rotate(90deg) translate(5px,-3px);-ms-transform:rotate(90deg) translate(5px,-3px);transform:rotate(90deg) translate(5px,-3px);-webkit-transition:all 0.1s ease;transition:all 0.1s ease;font-size:16px}
.sidenav-tree ul.top-level > li > div.group h3:after{content:'';display:block;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-top:8px solid #2a3e51;border-bottom-width:0;position:absolute;left:15px;bottom:-8px;z-index:101} .sidenav-tree ul.top-level > li > div.group h3:after{content:'';position:absolute;top:0;right:0;width:10px;height:100%;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)}
.sidenav-tree ul.top-level > li > ul li a{display:block;position:relative;padding:18px 25px 18px 55px;background:transparent;border-bottom:1px solid #2a3e51;color:#ffffff;text-decoration:none !important;opacity:0.65;filter:alpha(opacity=65)} .sidenav-tree ul.top-level > li > div.group:before,.sidenav-tree ul.top-level > li > div.group:after{content:'';display:block;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-top:8px solid #34495e;border-bottom-width:0;position:absolute;left:15px;bottom:-8px;z-index:101}
.sidenav-tree ul.top-level > li > div.group:after{content:'';display:block;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-top:8px solid rgba(0,0,0,0.15);border-bottom-width:0}
.sidenav-tree ul.top-level > li > ul li a{display:block;position:relative;padding:18px 25px 18px 55px;background:transparent;border-bottom:1px solid rgba(0,0,0,0.15);color:#ffffff;text-decoration:none !important;opacity:0.65;filter:alpha(opacity=65)}
.sidenav-tree ul.top-level > li > ul li a:after{content:'';position:absolute;top:0;right:0;width:10px;height:100%;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)} .sidenav-tree ul.top-level > li > ul li a:after{content:'';position:absolute;top:0;right:0;width:10px;height:100%;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)}
.sidenav-tree ul.top-level > li > ul li a:hover{text-decoration:none} .sidenav-tree ul.top-level > li > ul li a:hover{text-decoration:none}
.sidenav-tree ul.top-level > li > ul li a i{position:absolute;left:16px;top:18px;font-size:22px} .sidenav-tree ul.top-level > li > ul li a i{position:absolute;left:16px;top:18px;font-size:22px}
@ -425,7 +426,7 @@
.sidenav-tree ul.top-level > li > ul li a span.header{color:#ffffff;font-size:15px;margin-bottom:5px} .sidenav-tree ul.top-level > li > ul li a span.header{color:#ffffff;font-size:15px;margin-bottom:5px}
.sidenav-tree ul.top-level > li > ul li a span.description{color:#bdc3c7;font-size:13px} .sidenav-tree ul.top-level > li > ul li a span.description{color:#bdc3c7;font-size:13px}
.sidenav-tree ul.top-level > li > ul li:hover a,.sidenav-tree ul.top-level > li > ul li.active a{opacity:1;filter:alpha(opacity=100)} .sidenav-tree ul.top-level > li > ul li:hover a,.sidenav-tree ul.top-level > li > ul li.active a{opacity:1;filter:alpha(opacity=100)}
.sidenav-tree ul.top-level > li > ul li.active a{background:#1f99dc;color:rgba(255,255,255,0.91)} .sidenav-tree ul.top-level > li > ul li.active a{color:rgba(255,255,255,0.91)}
.sidenav-tree ul.top-level > li > ul li.active a span.header{color:#ffffff} .sidenav-tree ul.top-level > li > ul li.active a span.header{color:#ffffff}
.sidenav-tree ul.top-level > li > ul li.active a span.description{color:rgba(255,255,255,0.91)} .sidenav-tree ul.top-level > li > ul li.active a span.description{color:rgba(255,255,255,0.91)}
.sidenav-tree ul.top-level > li > ul li:last-child a{border-bottom:none} .sidenav-tree ul.top-level > li > ul li:last-child a{border-bottom:none}
@ -709,19 +710,19 @@ nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li a .nav-icon i,nav#layo
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li a .nav-label{line-height:30px} nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li a .nav-label{line-height:30px}
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li:first-child{margin-left:2px} nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li:first-child{margin-left:2px}
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li:last-child{margin-right:0} nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li:last-child{margin-right:0}
nav#layout-mainmenu.navbar-mode-tiles{height:78px} nav#layout-mainmenu.navbar-mode-tile{height:78px}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-toolbar li.mainmenu-preview a{height:62px;line-height:62px} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-toolbar li.mainmenu-preview a{height:62px;line-height:62px}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-toolbar li.mainmenu-account > a{height:78px;line-height:78px} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-toolbar li.mainmenu-account > a{height:78px;line-height:78px}
nav#layout-mainmenu.navbar-mode-tiles ul li .mainmenu-accountmenu{top:78px} nav#layout-mainmenu.navbar-mode-tile ul li .mainmenu-accountmenu{top:78px}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a{position:relative;width:65px;height:65px} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li a{position:relative;width:65px;height:65px}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a .nav-icon{text-align:center;display:block;position:absolute;top:50%;left:50%;margin-left:-15px;margin-top:-22.5px;width:30px;height:30px} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li a .nav-icon{text-align:center;display:block;position:absolute;top:50%;left:50%;margin-left:-15px;margin-top:-22.5px;width:30px;height:30px}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a .nav-icon i,nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a .nav-icon img{margin:0} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li a .nav-icon i,nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li a .nav-icon img{margin:0}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a .nav-label{display:block;width:100px;height:20px;line-height:20px;position:absolute;bottom:0;left:50%;padding:0 5px;margin-left:-50px;overflow:hidden;text-overflow:ellipsis;text-align:center} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li a .nav-label{display:block;width:100px;height:20px;line-height:20px;position:absolute;bottom:0;left:50%;padding:0 5px;margin-left:-50px;overflow:hidden;text-overflow:ellipsis;text-align:center}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li{padding:3px 0} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li{padding:3px 0}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li:first-child{margin-left:8px} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li:first-child{margin-left:8px}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li:last-child{margin-right:0} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li:last-child{margin-right:0}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li.active a .nav-label{text-shadow:1px 1px 0 rgba(255,255,255,0.3)} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li.active a .nav-label{text-shadow:1px 1px 0 rgba(255,255,255,0.3)}
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li:hover .nav-label{width:auto;min-width:100px;text-overflow:all;overflow:visible;background-color:#111111;z-index:2} nav#layout-mainmenu.navbar-mode-tile ul.mainmenu-nav li:hover .nav-label{width:auto;min-width:100px;text-overflow:all;overflow:visible;background-color:#111111;z-index:2}
nav#layout-mainmenu .menu-toggle{height:45px;line-height:45px;font-size:16px;display:none} nav#layout-mainmenu .menu-toggle{height:45px;line-height:45px;font-size:16px;display:none}
nav#layout-mainmenu .menu-toggle .menu-toggle-icon{background:#333;display:inline-block;height:45px;line-height:45px;width:45px;text-align:center} nav#layout-mainmenu .menu-toggle .menu-toggle-icon{background:#333;display:inline-block;height:45px;line-height:45px;width:45px;text-align:center}
nav#layout-mainmenu .menu-toggle .menu-toggle-icon i{line-height:1;font-size:30px;vertical-align:middle} nav#layout-mainmenu .menu-toggle .menu-toggle-icon i{line-height:1;font-size:30px;vertical-align:middle}
@ -776,7 +777,7 @@ nav#layout-mainmenu.navbar ul li.active,.mainmenu-collapsed li.active,nav#layout
nav#layout-mainmenu.navbar ul li.active a,.mainmenu-collapsed li.active a,nav#layout-mainmenu.navbar ul li.highlight a,.mainmenu-collapsed li.highlight a{color:#ffffff !important} nav#layout-mainmenu.navbar ul li.active a,.mainmenu-collapsed li.active a,nav#layout-mainmenu.navbar ul li.highlight a,.mainmenu-collapsed li.highlight a{color:#ffffff !important}
nav#layout-mainmenu.navbar ul li:hover,.mainmenu-collapsed li:hover{color:#ffffff;background:transparent} nav#layout-mainmenu.navbar ul li:hover,.mainmenu-collapsed li:hover{color:#ffffff;background:transparent}
body.drag nav#layout-mainmenu.navbar ul.nav li:hover,body.drag .mainmenu-collapsed ul li:hover{color:#555555} body.drag nav#layout-mainmenu.navbar ul.nav li:hover,body.drag .mainmenu-collapsed ul li:hover{color:#555555}
#layout-sidenav{background-color:#31495f;position:absolute;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} #layout-sidenav{position:absolute;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#layout-sidenav ul{position:relative;margin:0;padding:0;height:100%;overflow:hidden} #layout-sidenav ul{position:relative;margin:0;padding:0;height:100%;overflow:hidden}
#layout-sidenav ul,#layout-sidenav ul li:first-child a{-webkit-box-shadow:inset 0 6px 3px -3px rgba(0,0,0,0.1);box-shadow:inset 0 6px 3px -3px rgba(0,0,0,0.1)} #layout-sidenav ul,#layout-sidenav ul li:first-child a{-webkit-box-shadow:inset 0 6px 3px -3px rgba(0,0,0,0.1);box-shadow:inset 0 6px 3px -3px rgba(0,0,0,0.1)}
#layout-sidenav ul:after{content:'';position:absolute;height:100%;top:0;right:0;width:10px;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)} #layout-sidenav ul:after{content:'';position:absolute;height:100%;top:0;right:0;width:10px;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1)}
@ -787,7 +788,7 @@ body.drag nav#layout-mainmenu.navbar ul.nav li:hover,body.drag .mainmenu-collaps
#layout-sidenav ul li a i{color:rgba(255,255,255,0.35);display:block;margin-bottom:5px;font-size:28px} #layout-sidenav ul li a i{color:rgba(255,255,255,0.35);display:block;margin-bottom:5px;font-size:28px}
#layout-sidenav ul li.active a,#layout-sidenav ul li a:hover{color:#ffffff} #layout-sidenav ul li.active a,#layout-sidenav ul li a:hover{color:#ffffff}
#layout-sidenav ul li.active a i,#layout-sidenav ul li a:hover i{color:#ffffff} #layout-sidenav ul li.active a i,#layout-sidenav ul li a:hover i{color:#ffffff}
#layout-sidenav ul li.active a{background:#1f99dc;text-shadow:1px 1px 0 rgba(0,0,0,0.2)} #layout-sidenav ul li.active a{text-shadow:1px 1px 0 rgba(0,0,0,0.2)}
#layout-sidenav ul li.active a > i{text-shadow:none} #layout-sidenav ul li.active a > i{text-shadow:none}
#layout-sidenav ul li span.counter{display:block;position:absolute;top:15px;right:15px;padding:2px 6px 3px 4px;background-color:#d9350f;color:#ffffff;font-size:11px;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s} #layout-sidenav ul li span.counter{display:block;position:absolute;top:15px;right:15px;padding:2px 6px 3px 4px;background-color:#d9350f;color:#ffffff;font-size:11px;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s}
#layout-sidenav ul li span.counter.empty{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0,);-ms-transform:scale(0,);transform:scale(0,)} #layout-sidenav ul li span.counter.empty{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0,);-ms-transform:scale(0,);transform:scale(0,)}

42
modules/backend/assets/less/controls/sidenav-tree.less
View File

@ -11,7 +11,6 @@
.sidenav-tree { .sidenav-tree {
width: 300px; width: 300px;
background: @color-sidebarnav-bg;
.control-toolbar { .control-toolbar {
padding: 0; padding: 0;
@ -40,20 +39,19 @@
} }
div.scrollbar-thumb { div.scrollbar-thumb {
background: #2b3e50!important; background: rgba(0,0,0,.2) !important;
} }
ul.top-level > li { ul.top-level > li {
&[data-status=collapsed] { &[data-status=collapsed] {
> div.group { > div.group {
h3 { h3:before {
&:before { .transform(~'rotate(0deg) translate(2px, -2px)');
.transform(~'rotate(0deg) translate(2px, -2px)'); }
}
&:after { // Hide triangle
display: none; &:before, &:after {
} display: none;
} }
} }
@ -65,10 +63,6 @@
> div.group { > div.group {
position: relative; position: relative;
&:after {
.sidenav-tree-shadow-element();
}
h3 { h3 {
background: @color-sidebarnav-tree-group-bg; background: @color-sidebarnav-tree-group-bg;
color: @color-sidebarnav-tree-group; color: @color-sidebarnav-tree-group;
@ -94,13 +88,23 @@
} }
&:after { &:after {
.triangle(down, 15px, 8px, @color-sidebarnav-tree-group-bg); .sidenav-tree-shadow-element();
position: absolute;
left: 15px;
bottom: -8px;
z-index: 101;
} }
} }
// Use two triangles to achieve the darkening effect
&:before,
&:after {
.triangle(down, 15px, 8px, @brand-secondary);
position: absolute;
left: 15px;
bottom: -8px;
z-index: 101;
}
&:after {
.triangle(down, 15px, 8px, @color-sidebarnav-tree-group-bg);
}
} }
> ul { > ul {
@ -154,7 +158,7 @@
} }
&.active a { &.active a {
background: @color-sidebarnav-tree-active-bg; //background: @color-sidebarnav-tree-active-bg;
color: @color-sidebarnav-tree-active-text; color: @color-sidebarnav-tree-active-text;
span.header { span.header {

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

@ -29,9 +29,8 @@
@color-footer-border: #dfdfdf; @color-footer-border: #dfdfdf;
@color-footer-text: #666666; @color-footer-text: #666666;
@color-sidebarnav-bg: #31495F;
@color-sidebarnav-active-text: #ffffff; @color-sidebarnav-active-text: #ffffff;
@color-sidebarnav-active-bg: #1f99dc; //@color-sidebarnav-active-bg: #1f99dc;
@color-sidebarnav-active-icon: #ffffff; @color-sidebarnav-active-icon: #ffffff;
@color-sidebarnav-inactive-text: rgba(255,255,255,.35); @color-sidebarnav-inactive-text: rgba(255,255,255,.35);
@color-sidebarnav-inactive-icon: rgba(255,255,255,.35); @color-sidebarnav-inactive-icon: rgba(255,255,255,.35);
@ -39,13 +38,13 @@
@color-sidebarnav-counter-text: #ffffff; @color-sidebarnav-counter-text: #ffffff;
@color-sidebarnav-tree-group: #ecf0f1; @color-sidebarnav-tree-group: #ecf0f1;
@color-sidebarnav-tree-group-bg: #2A3E51; @color-sidebarnav-tree-group-bg: rgba(0,0,0,.15);
@color-sidebarnav-tree-inactive-header: #ffffff; @color-sidebarnav-tree-inactive-header: #ffffff;
@color-sidebarnav-tree-inactive-desc: #BDC3C7; @color-sidebarnav-tree-inactive-desc: #BDC3C7;
@color-sidebarnav-tree-inactive-text: #ffffff; @color-sidebarnav-tree-inactive-text: #ffffff;
@color-sidebarnav-tree-active-header: #ffffff; @color-sidebarnav-tree-active-header: #ffffff;
@color-sidebarnav-tree-inactive-bg: transparent; @color-sidebarnav-tree-inactive-bg: transparent;
@color-sidebarnav-tree-active-bg: #1F99DC; //@color-sidebarnav-tree-active-bg: #1F99DC;
@color-sidebarnav-tree-active-text: rgba(255,255,255,.91); @color-sidebarnav-tree-active-text: rgba(255,255,255,.91);
@color-sidebarnav-tree-active-marker: #e67e22; @color-sidebarnav-tree-active-marker: #e67e22;
@color-sidebarnav-back-link-bg: #2b3e50; @color-sidebarnav-back-link-bg: #2b3e50;

3
modules/backend/assets/less/layout/flexlayout.less
View File

@ -27,7 +27,7 @@
.flex-layout-column, .flex-layout-row { .flex-layout-column, .flex-layout-row {
&.justify-center {.justify-content(center);} &.justify-center {.justify-content(center);}
&.align-center { &.align-center {
.align-items(center); .align-items(center);
.align-content(center); .align-content(center);
} }
@ -48,6 +48,7 @@
&.layout-container {max-width: none;} &.layout-container {max-width: none;}
// @deprecated Remove if year >= 2017 (3 lines below)
&.width-100 {width: 100px;} &.width-100 {width: 100px;}
&.width-200 {width: 200px;} &.width-200 {width: 200px;}
&.width-300 {width: 300px;} &.width-300 {width: 300px;}

1
modules/backend/assets/less/layout/layout.less
View File

@ -72,6 +72,7 @@ body {
vertical-align: top; vertical-align: top;
height: 100%; height: 100%;
// @deprecated Remove if year >= 2017 (7 lines below)
&.width-100 { width: 100px; } &.width-100 { width: 100px; }
&.width-120 { width: 120px; } &.width-120 { width: 120px; }
&.width-130 { width: 130px; } &.width-130 { width: 130px; }

6
modules/backend/assets/less/layout/mainmenu.less
View File

@ -2,7 +2,7 @@
// Top navigation bar // Top navigation bar
// -------------------------------------------------- // --------------------------------------------------
@mainmenu-mode-tiles-height: 78px; @mainmenu-mode-tile-height: 78px;
@mainmenu-mode-inline-height: 60px; @mainmenu-mode-inline-height: 60px;
@mainmenu-mode-collapse-height: 45px; @mainmenu-mode-collapse-height: 45px;
@ -316,8 +316,8 @@ nav#layout-mainmenu.navbar-mode-inline {
// Navbar (Tiles mode) // Navbar (Tiles mode)
// //
nav#layout-mainmenu.navbar-mode-tiles { nav#layout-mainmenu.navbar-mode-tile {
.mainmenu-set-height(@mainmenu-mode-tiles-height); .mainmenu-set-height(@mainmenu-mode-tile-height);
.mainmenu-navbar-tiles(); .mainmenu-navbar-tiles();
} }

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

@ -3,8 +3,6 @@
// -------------------------------------------------- // --------------------------------------------------
#layout-sidenav { #layout-sidenav {
background-color: @color-sidebarnav-bg;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -71,7 +69,7 @@
} }
&.active a { &.active a {
background: @color-sidebarnav-active-bg; //background: @color-sidebarnav-active-bg;
text-shadow: 1px 1px 0 rgba(0,0,0,.2); text-shadow: 1px 1px 0 rgba(0,0,0,.2);
> i { > i {
text-shadow: none; text-shadow: none;

7
modules/backend/lang/cs/lang.php
View File

@ -292,10 +292,9 @@ return [
'app_tagline' => 'Motto aplikace', 'app_tagline' => 'Motto aplikace',
'app_tagline_description' => 'Toto motto se zobrazí na přihlašovací stránce administrace.', 'app_tagline_description' => 'Toto motto se zobrazí na přihlašovací stránce administrace.',
'colors' => 'Barvy', 'colors' => 'Barvy',
'primary_light' => 'Primární (světlá)', 'primary_color' => 'Primární color',
'primary_dark' => 'Primární (tmavá)', 'secondary_color' => 'Sekundární color',
'secondary_light' => 'Sekundární (světlá)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Sekundární (tmavá)',
'styles' => 'Styly', 'styles' => 'Styly',
'custom_stylesheet' => 'Vlastní kaskádové styly' 'custom_stylesheet' => 'Vlastní kaskádové styly'
], ],

7
modules/backend/lang/el/lang.php
View File

@ -292,10 +292,9 @@ return [
'app_tagline' => 'Ετικέτα Εφαρμογής', 'app_tagline' => 'Ετικέτα Εφαρμογής',
'app_tagline_description' => 'Αυτό το όνομα εμφανίζεται στην οθόνη σύνδεσης στο back-end.', 'app_tagline_description' => 'Αυτό το όνομα εμφανίζεται στην οθόνη σύνδεσης στο back-end.',
'colors' => 'Χρώματα', 'colors' => 'Χρώματα',
'primary_light' => 'Πρωτεύων (Ανοιχτό)', 'primary_color' => 'Πρωτεύων color',
'primary_dark' => 'Πρωτεύων (Σκούρο)', 'secondary_color' => 'Δευτερεύων color',
'secondary_light' => 'Δευτερεύων (Ανοιχτό)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Δευτερεύων (Σκούρο)',
'styles' => 'Στυλ', 'styles' => 'Στυλ',
'custom_stylesheet' => 'Προσαρμοσμένα στυλ', 'custom_stylesheet' => 'Προσαρμοσμένα στυλ',
], ],

7
modules/backend/lang/en/lang.php
View File

@ -306,10 +306,9 @@ return [
'app_tagline' => 'App Tagline', 'app_tagline' => 'App Tagline',
'app_tagline_description' => 'This name is shown on the sign in screen for the back-end.', 'app_tagline_description' => 'This name is shown on the sign in screen for the back-end.',
'colors' => 'Colors', 'colors' => 'Colors',
'primary_light' => 'Primary (Light)', 'primary_color' => 'Primary color',
'primary_dark' => 'Primary (Dark)', 'secondary_color' => 'Secondary color',
'secondary_light' => 'Secondary (Light)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Secondary (Dark)',
'styles' => 'Styles', 'styles' => 'Styles',
'custom_stylesheet' => 'Custom stylesheet' 'custom_stylesheet' => 'Custom stylesheet'
], ],

7
modules/backend/lang/es/lang.php
View File

@ -295,10 +295,9 @@ return [
'app_tagline' => 'Eslogan', 'app_tagline' => 'Eslogan',
'app_tagline_description' => 'Se mostrará en la página de inicio de sesión del back-end.', 'app_tagline_description' => 'Se mostrará en la página de inicio de sesión del back-end.',
'colors' => 'Colores', 'colors' => 'Colores',
'primary_light' => 'Primario (Claro)', 'primary_color' => 'Primario color',
'primary_dark' => 'Primario (Oscuro)', 'secondary_color' => 'Secundario color',
'secondary_light' => 'Secundario (Claro)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Secundario (Oscuro)',
'styles' => 'Estilos', 'styles' => 'Estilos',
'custom_stylesheet' => 'Hoja de estilo personalizada' 'custom_stylesheet' => 'Hoja de estilo personalizada'
], ],

7
modules/backend/lang/fa/lang.php
View File

@ -303,10 +303,9 @@ return [
'app_tagline' => 'شعار برنامه', 'app_tagline' => 'شعار برنامه',
'app_tagline_description' => 'این شعار در قسمت ورود به بخش مدیریت نمایش داده می شود.', 'app_tagline_description' => 'این شعار در قسمت ورود به بخش مدیریت نمایش داده می شود.',
'colors' => 'رنگ ها', 'colors' => 'رنگ ها',
'primary_light' => 'اصلی (روشن)', 'primary_color' => 'اصلی color',
'primary_dark' => 'اصلی (تیره)', 'secondary_color' => 'ثانویه color',
'secondary_light' => 'ثانویه (روشن)', 'accent_color' => 'Accent color',
'secondary_dark' => 'ثانویه (تیره)',
'styles' => 'شیوه نامه ها', 'styles' => 'شیوه نامه ها',
'custom_stylesheet' => 'شیوه نامه های سفارشی' 'custom_stylesheet' => 'شیوه نامه های سفارشی'
], ],

7
modules/backend/lang/fr/lang.php
View File

@ -290,10 +290,9 @@ return [
'app_tagline' => 'Slogan de l’application', 'app_tagline' => 'Slogan de l’application',
'app_tagline_description' => 'Ce slogan est affiché sur la page d’inscription à l’interface d’administration.', 'app_tagline_description' => 'Ce slogan est affiché sur la page d’inscription à l’interface d’administration.',
'colors' => 'Couleurs', 'colors' => 'Couleurs',
'primary_light' => 'Primaire (Claire)', 'primary_color' => 'Primaire color',
'primary_dark' => 'Primaire (Foncée)', 'secondary_color' => 'Secondaire color',
'secondary_light' => 'Secondaire (Claire)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Secondaire (Foncée)',
'styles' => 'Styles', 'styles' => 'Styles',
'custom_stylesheet' => 'Feuille de style personnalisée (CSS)' 'custom_stylesheet' => 'Feuille de style personnalisée (CSS)'
], ],

7
modules/backend/lang/hu/lang.php
View File

@ -292,10 +292,9 @@ return [
'app_tagline' => 'Weboldal szlogenje', 'app_tagline' => 'Weboldal szlogenje',
'app_tagline_description' => 'Ez a mondat látható a bejelentkező oldalon.', 'app_tagline_description' => 'Ez a mondat látható a bejelentkező oldalon.',
'colors' => 'Színek', 'colors' => 'Színek',
'primary_light' => 'Alap (világos)', 'primary_color' => 'Alap color',
'primary_dark' => 'Alap (sötét)', 'secondary_color' => 'Másodlagos color',
'secondary_light' => 'Másodlagos (világos)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Másodlagos (sötét)',
'styles' => 'Stílusok', 'styles' => 'Stílusok',
'custom_stylesheet' => 'Egyéni megjelenés' 'custom_stylesheet' => 'Egyéni megjelenés'
], ],

7
modules/backend/lang/id/lang.php
View File

@ -274,10 +274,9 @@ return [
'app_tagline' => 'Slogan Apl', 'app_tagline' => 'Slogan Apl',
'app_tagline_description' => 'Nama ini akan ditampilkan pada layar masuk back-end.', 'app_tagline_description' => 'Nama ini akan ditampilkan pada layar masuk back-end.',
'colors' => 'Warna', 'colors' => 'Warna',
'primary_light' => 'Primer (Terang)', 'primary_color' => 'Primer color',
'primary_dark' => 'Primer (Gelap)', 'secondary_color' => 'Sekunder color',
'secondary_light' => 'Sekunder (Terang)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Sekunder (Gelap)',
'styles' => 'Gaya', 'styles' => 'Gaya',
'custom_stylesheet' => 'Lembar gaya ubah suai' 'custom_stylesheet' => 'Lembar gaya ubah suai'
], ],

7
modules/backend/lang/it/lang.php
View File

@ -287,10 +287,9 @@ return [
'app_tagline' => 'Slogan dell\'applicazione', 'app_tagline' => 'Slogan dell\'applicazione',
'app_tagline_description' => 'Questo campo verrà visualizzato nella schermata di login del pannello di controllo.', 'app_tagline_description' => 'Questo campo verrà visualizzato nella schermata di login del pannello di controllo.',
'colors' => 'Colori', 'colors' => 'Colori',
'primary_light' => 'Principale (Chiaro)', 'primary_color' => 'Principale color',
'primary_dark' => 'Principale (Scuro)', 'secondary_color' => 'Secondario color',
'secondary_light' => 'Secondario (Chiaro)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Secondario (Scuro)',
'styles' => 'Stili', 'styles' => 'Stili',
'custom_stylesheet' => 'Foglio di stile personalizzato' 'custom_stylesheet' => 'Foglio di stile personalizzato'
], ],

7
modules/backend/lang/ja/lang.php
View File

@ -270,10 +270,9 @@ return [
'app_tagline' => 'アプリタグライン', 'app_tagline' => 'アプリタグライン',
'app_tagline_description' => 'この名前はバックエンドのサインインページに表示されます。', 'app_tagline_description' => 'この名前はバックエンドのサインインページに表示されます。',
'colors' => '配色', 'colors' => '配色',
'primary_light' => 'プライマリ (明るい)', 'primary_color' => 'プライマリ color',
'primary_dark' => 'プライマリ (暗い)', 'secondary_color' => 'セカンダリ color',
'secondary_light' => 'セカンダリ (明るい)', 'accent_color' => 'Accent color',
'secondary_dark' => 'セカンダリ (暗い)',
'styles' => 'スタイル', 'styles' => 'スタイル',
'custom_stylesheet' => 'カスタムスタイルシート' 'custom_stylesheet' => 'カスタムスタイルシート'
], ],

7
modules/backend/lang/lv/lang.php
View File

@ -292,10 +292,9 @@ return [
'app_tagline' => 'Apraksts', 'app_tagline' => 'Apraksts',
'app_tagline_description' => 'Šis apraksts tiek rādīts back-end auteintificēšanās lapā.', 'app_tagline_description' => 'Šis apraksts tiek rādīts back-end auteintificēšanās lapā.',
'colors' => 'Krāsas', 'colors' => 'Krāsas',
'primary_light' => 'Primārā (Gaiša)', 'primary_color' => 'Primārā color',
'primary_dark' => 'Primārā (Tumša)', 'secondary_color' => 'Sekundārā color',
'secondary_light' => 'Sekundārā (Gaiša)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Sekundārā (Tumša)',
'styles' => 'Stili', 'styles' => 'Stili',
'custom_stylesheet' => 'Pielāgots css' 'custom_stylesheet' => 'Pielāgots css'
], ],

7
modules/backend/lang/nb-no/lang.php
View File

@ -275,10 +275,9 @@ return [
'app_tagline' => 'App Tagline', 'app_tagline' => 'App Tagline',
'app_tagline_description' => 'Denne teksten vises på innloggingssiden backend.', 'app_tagline_description' => 'Denne teksten vises på innloggingssiden backend.',
'colors' => 'Farger', 'colors' => 'Farger',
'primary_light' => 'Primær (Lys)', 'primary_color' => 'Primær color',
'primary_dark' => 'Primær (Mørk)', 'secondary_color' => 'Sekundær color',
'secondary_light' => 'Sekundær (Lys)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Sekundær (Mørk)',
'styles' => 'Stilsett', 'styles' => 'Stilsett',
'custom_stylesheet' => 'Eget stilsett' 'custom_stylesheet' => 'Eget stilsett'
], ],

7
modules/backend/lang/nl/lang.php
View File

@ -303,10 +303,9 @@ return [
'app_tagline' => 'Applicatie slogan', 'app_tagline' => 'Applicatie slogan',
'app_tagline_description' => 'Deze slogan wordt weergegeven in het aanmeldvenster van de beheeromgeving.', 'app_tagline_description' => 'Deze slogan wordt weergegeven in het aanmeldvenster van de beheeromgeving.',
'colors' => 'Kleuren', 'colors' => 'Kleuren',
'primary_light' => 'Primair (Licht)', 'primary_color' => 'Primair color',
'primary_dark' => 'Primair (Donker)', 'secondary_color' => 'Secundair color',
'secondary_light' => 'Secundair (Licht)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Secundair (Donker)',
'styles' => 'Stijlen', 'styles' => 'Stijlen',
'custom_stylesheet' => 'Aangepaste stylesheet', 'custom_stylesheet' => 'Aangepaste stylesheet',
], ],

7
modules/backend/lang/pl/lang.php
View File

@ -289,10 +289,9 @@ return [
'app_tagline' => 'Podpis aplikacji', 'app_tagline' => 'Podpis aplikacji',
'app_tagline_description' => 'Ten podpis jest wyświetlany na ekranie logowania do back-endu', 'app_tagline_description' => 'Ten podpis jest wyświetlany na ekranie logowania do back-endu',
'colors' => 'Kolory', 'colors' => 'Kolory',
'primary_light' => 'Podstawowy (Jasny)', 'primary_color' => 'Podstawowy color',
'primary_dark' => 'Podstawowy (Ciemny)', 'secondary_color' => 'Dodatkowy color',
'secondary_light' => 'Dodatkowy (Jasny)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Dodatkowy (Ciemny)',
'styles' => 'Style', 'styles' => 'Style',
'custom_stylesheet' => 'Własne style' 'custom_stylesheet' => 'Własne style'
], ],

7
modules/backend/lang/pt-br/lang.php
View File

@ -303,10 +303,9 @@ return [
'app_tagline' => 'Slogan do Aplicativo', 'app_tagline' => 'Slogan do Aplicativo',
'app_tagline_description' => 'Esta frase é mostrada na tela de login administrativo.', 'app_tagline_description' => 'Esta frase é mostrada na tela de login administrativo.',
'colors' => 'Cores', 'colors' => 'Cores',
'primary_light' => 'Primária (Clara)', 'primary_color' => 'Primária color',
'primary_dark' => 'Primária (Escura)', 'secondary_color' => 'Secundária color',
'secondary_light' => 'Secundária (Clara)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Secundária (Escura)',
'styles' => 'Estilos', 'styles' => 'Estilos',
'custom_stylesheet' => 'CSS customizado', 'custom_stylesheet' => 'CSS customizado',
], ],

7
modules/backend/lang/ru/lang.php
View File

@ -303,10 +303,9 @@ return [
'app_tagline' => 'Слоган приложения', 'app_tagline' => 'Слоган приложения',
'app_tagline_description' => 'Слоган будет отображаться на экране входа в панель управления.', 'app_tagline_description' => 'Слоган будет отображаться на экране входа в панель управления.',
'colors' => 'Цвета', 'colors' => 'Цвета',
'primary_light' => 'Первичный (Светлый)', 'primary_color' => 'Первичный color',
'primary_dark' => 'Первичный (Тёмный)', 'secondary_color' => 'Вторичный color',
'secondary_light' => 'Вторичный (Светлый)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Вторичный (Тёмный)',
'styles' => 'Стили', 'styles' => 'Стили',
'custom_stylesheet' => 'Пользовательские стили' 'custom_stylesheet' => 'Пользовательские стили'
], ],

7
modules/backend/lang/sv/lang.php
View File

@ -292,10 +292,9 @@ return [
'app_tagline' => 'Applikationstaggning', 'app_tagline' => 'Applikationstaggning',
'app_tagline_description' => 'Detta namn visas på inloggningsskärmen för back-end.', 'app_tagline_description' => 'Detta namn visas på inloggningsskärmen för back-end.',
'colors' => 'Färger', 'colors' => 'Färger',
'primary_light' => 'Primär (Ljus)', 'primary_color' => 'Primär color',
'primary_dark' => 'Primär (Mörk)', 'secondary_color' => 'Sekundär color',
'secondary_light' => 'Sekundär (Ljus)', 'accent_color' => 'Accent color',
'secondary_dark' => 'Sekundär (Mörk)',
'styles' => 'Formatmallar', 'styles' => 'Formatmallar',
'custom_stylesheet' => 'Anpassad formatmall' 'custom_stylesheet' => 'Anpassad formatmall'
], ],

7
modules/backend/lang/tr/lang.php
View File

@ -303,10 +303,9 @@ return [
'app_tagline' => 'Site Mottosu', 'app_tagline' => 'Site Mottosu',
'app_tagline_description' => 'Bu motto Yönetim Paneli giriş ekranında görüntülenecektir.', 'app_tagline_description' => 'Bu motto Yönetim Paneli giriş ekranında görüntülenecektir.',
'colors' => 'Renkler', 'colors' => 'Renkler',
'primary_light' => 'Ana Renk (Açık Ton)', 'primary_color' => 'Ana Renk color',
'primary_dark' => 'Ana Renk (Koyu Ton)', 'secondary_color' => 'İkincil Renk color',
'secondary_light' => 'İkincil Renk (Açık Ton)', 'accent_color' => 'Accent color',
'secondary_dark' => 'İkincil Renk (Koyu Ton)',
'styles' => 'Stiller', 'styles' => 'Stiller',
'custom_stylesheet' => 'Özel stil - CSS' 'custom_stylesheet' => 'Özel stil - CSS'
], ],

7
modules/backend/lang/zh-cn/lang.php
View File

@ -286,10 +286,9 @@ return [
'app_tagline' => '站点标语', 'app_tagline' => '站点标语',
'app_tagline_description' => '标语显示在后台的登录界面.', 'app_tagline_description' => '标语显示在后台的登录界面.',
'colors' => '颜色', 'colors' => '颜色',
'primary_light' => '主要 (Light)', 'primary_color' => '主要 color',
'primary_dark' => '主要 (Dark)', 'secondary_color' => '次要 color',
'secondary_light' => '次要 (Light)', 'accent_color' => 'Accent color',
'secondary_dark' => '次要 (Dark)',
'styles' => '样式', 'styles' => '样式',
'custom_stylesheet' => '自定义样式' 'custom_stylesheet' => '自定义样式'
], ],

7
modules/backend/lang/zh-tw/lang.php
View File

@ -275,10 +275,9 @@ return [
'app_tagline' => '網站標語', 'app_tagline' => '網站標語',
'app_tagline_description' => '標語顯示在管理介面的登入介面', 'app_tagline_description' => '標語顯示在管理介面的登入介面',
'colors' => '顏色', 'colors' => '顏色',
'primary_light' => '主要 (Light)', 'primary_color' => '主要 color',
'primary_dark' => '主要 (Dark)', 'secondary_color' => '次要 color',
'secondary_light' => '次要 (Light)', 'accent_color' => 'Accent color',
'secondary_dark' => '次要 (Dark)',
'styles' => '樣式', 'styles' => '樣式',
'custom_stylesheet' => '自訂樣式' 'custom_stylesheet' => '自訂樣式'
], ],

2
modules/backend/layouts/_mainmenu.htm
View File

@ -1,7 +1,7 @@
<?php <?php
$activeItem = BackendMenu::getActiveMainMenuItem(); $activeItem = BackendMenu::getActiveMainMenuItem();
$mySettings = System\Classes\SettingsManager::instance()->listItems('mysettings'); $mySettings = System\Classes\SettingsManager::instance()->listItems('mysettings');
$navbarMode = 'navbar-mode-inline'; // Supported: inline, tiles, collapse. $navbarMode = 'navbar-mode-inline'; // Supported: inline, tile, collapse.
?> ?>
<nav class="navbar control-toolbar <?= $navbarMode ?>" id="layout-mainmenu" role="navigation"> <nav class="navbar control-toolbar <?= $navbarMode ?>" id="layout-mainmenu" role="navigation">
<div class="toolbar-item toolbar-primary"> <div class="toolbar-item toolbar-primary">

10
modules/backend/layouts/_sidenav.htm
View File

@ -7,13 +7,17 @@
$sideMenuItems = BackendMenu::listSideMenuItems(); $sideMenuItems = BackendMenu::listSideMenuItems();
?> ?>
<?php if ($sideMenuItems): ?> <?php if ($sideMenuItems): ?>
<div class="layout-cell width-120"> <div class="layout-cell w-120">
<div class="layout-relative"> <div class="layout-relative">
<nav class="layout-sidenav" id="layout-sidenav" data-control="sidenav"> <nav
id="layout-sidenav"
class="layout-sidenav bg-s"
data-active-class="active bg-p"
data-control="sidenav">
<ul class="nav"> <ul class="nav">
<?php foreach ($sideMenuItems as $sideItemCode => $item): ?> <?php foreach ($sideMenuItems as $sideItemCode => $item): ?>
<li <li
class="<?= BackendMenu::isSideMenuItemActive($item) ? 'active' : null ?>" class="<?= BackendMenu::isSideMenuItemActive($item) ? 'active bg-p' : null ?>"
<?= HTML::attributes($item->attributes) ?> <?= HTML::attributes($item->attributes) ?>
> >
<a href="<?= $item->url ?>"> <a href="<?= $item->url ?>">

4
modules/backend/layouts/default.htm
View File

@ -15,7 +15,7 @@
<?php $flyoutContent = Block::placeholder('sidepanel-flyout') ?> <?php $flyoutContent = Block::placeholder('sidepanel-flyout') ?>
<div class="layout-row"> <div class="layout-row">
<div class="layout flyout-container" <div class="layout flyout-container"
<?php if ($flyoutContent): ?> <?php if ($flyoutContent): ?>
data-control="flyout" data-control="flyout"
data-flyout-width="400" data-flyout-width="400"
@ -31,7 +31,7 @@
<!-- Side panel --> <!-- Side panel -->
<?php if ($sidePanelContent = Block::placeholder('sidepanel')): ?> <?php if ($sidePanelContent = Block::placeholder('sidepanel')): ?>
<div class="layout-cell width-350 hide-on-small" id="layout-side-panel" data-control="layout-sidepanel"> <div class="layout-cell w-350 hide-on-small" id="layout-side-panel" data-control="layout-sidepanel">
<?= $sidePanelContent ?> <?= $sidePanelContent ?>
</div> </div>
<?php endif ?> <?php endif ?>

2
modules/backend/layouts/form-with-sidebar.htm
View File

@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<div class="layout-cell width-300 form-sidebar control-scrollpanel"> <div class="layout-cell w-300 form-sidebar control-scrollpanel">
<div class="layout-relative"> <div class="layout-relative">
<div class="layout-absolute"> <div class="layout-absolute">
<div class="control-scrollbar" data-control="scrollbar"> <div class="control-scrollbar" data-control="scrollbar">

100
modules/backend/models/BrandSettings.php
View File

@ -30,17 +30,13 @@ class BrandSettings extends Model
const CACHE_KEY = 'backend::brand.custom_css'; const CACHE_KEY = 'backend::brand.custom_css';
// Pumpkin const PRIMARY_COLOR = '#3498db'; // Peter River
const PRIMARY_LIGHT = '#e67e22'; const SECONDARY_COLOR = '#34495e'; // Wet Asphalt
const ACCENT_COLOR = '#e67e22'; // Pumpkin
// Carrot const INLINE_MENU = 'inline';
const PRIMARY_DARK = '#d35400'; const TILE_MENU = 'tile';
const COLLAPSE_MENU = 'collapse';
// Wet Asphalt
const SECONDARY_LIGHT = '#34495e';
// Midnight Blue
const SECONDARY_DARK = '#2b3e50';
/** /**
* Validation rules * Validation rules
@ -55,10 +51,11 @@ class BrandSettings extends Model
$this->app_name = Lang::get('system::lang.app.name'); $this->app_name = Lang::get('system::lang.app.name');
$this->app_tagline = Lang::get('system::lang.app.tagline'); $this->app_tagline = Lang::get('system::lang.app.tagline');
$this->primary_color_light = self::PRIMARY_LIGHT; $this->primary_color = self::PRIMARY_COLOR;
$this->primary_color_dark = self::PRIMARY_DARK; $this->secondary_color = self::SECONDARY_COLOR;
$this->secondary_color_light = self::SECONDARY_LIGHT; $this->accent_color = self::ACCENT_COLOR;
$this->secondary_color_dark = self::SECONDARY_DARK;
$this->menu_mode = self::INLINE_MENU;
} }
public function afterSave() public function afterSave()
@ -97,17 +94,15 @@ class BrandSettings extends Model
{ {
$parser = new Less_Parser(['compress' => true]); $parser = new Less_Parser(['compress' => true]);
$primaryColorLight = self::get('primary_color_light', self::PRIMARY_LIGHT); $primaryColor = self::get('primary_color', self::PRIMARY_COLOR);
$primaryColorDark = self::get('primary_color_dark', self::PRIMARY_DARK); $secondaryColor = self::get('secondary_color', self::PRIMARY_COLOR);
$secondaryColorLight = self::get('secondary_color_light', self::SECONDARY_LIGHT); $accentColor = self::get('accent_color', self::ACCENT_COLOR);
$secondaryColorDark = self::get('secondary_color_dark', self::SECONDARY_DARK);
$vars = [ $vars = [
'logo-image' => "'".self::getLogo()."'", 'logo-image' => "'".self::getLogo()."'",
'primary-color-light' => $primaryColorLight, 'brand-primary' => $primaryColor,
'primary-color-dark' => $primaryColorDark, 'brand-secondary' => $secondaryColor,
'secondary-color-light' => $secondaryColorLight, 'brand-accent' => $accentColor,
'secondary-color-dark' => $secondaryColorDark,
]; ];
$parser->ModifyVars($vars); $parser->ModifyVars($vars);
@ -118,65 +113,6 @@ class BrandSettings extends Model
); );
$css = $parser->getCss(); $css = $parser->getCss();
$css .= self::makeTabSvg($primaryColorLight, $primaryColorDark);
return $css;
}
/**
* The PHP LESS parser dies trying to dynamically generate
* the tab SVG CSS, so process it manually instead.
* @param string $light
* @param string $dark
* @return string
*/
protected static function makeTabSvg($light, $dark)
{
/*
* Desaturate and darken the dark color
*/
$dark = substr($dark, 1); // Remove the #
$func = new \Less_Functions(null);
$value = new \Less_Tree_Dimension('14.5', '%');
$color = new \Less_Tree_Color($dark);
$color = $func->desaturate($color, $value);
$value = new \Less_Tree_Dimension('5', '%');
$black = new \Less_Tree_Color('000000');
$color = $func->mix($black, $color, $value);
$dark = $color->toRGB();
/*
* SVG Definition
*/
$svg = '';
$svg .= '<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">';
$svg .= '<path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/>';
$svg .= '<path fill="'.$light.'" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/>';
$svg .= '<path fill="'.$light.'" d="M100,70c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>';
$svg .= '<path fill="'.$dark.'" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/>';
$svg .= '<path fill="'.$dark.'" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>';
$svg .= '</svg>';
/*
* Escape CSS
*/
$revert = ['%21'=>'!', '%2A'=>'*', '%27'=>"'",'%3F'=>'?','%26'=>'&','%2C'=>',','%2F'=>'/','%40'=>'@','%2B'=>'+','%24'=>'$'];
$svg = strtr(rawurlencode($svg), $revert);
/*
* Add header
*/
$svg = 'data:image/svg+xml;charset=UTF-8,' . $svg;
/*
* Compile CSS
*/
$css = '';
$css .= '.fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,';
$css .= '.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,';
$css .= '.fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:after,';
$css .= '.fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:after {';
$css .= "background-image: url('".$svg."')}";
return $css; return $css;
} }

39
modules/backend/models/brandsettings/custom.less
View File

@ -2,12 +2,40 @@
// Coded variables // Coded variables
// //
// @logo-image // @logo-image
// @primary-color-light - #e67e22 // @brand-primary
// @primary-color-dark - #d35400 // @brand-secondary
// @secondary-color-light - #34495e // @brand-accent
// @secondary-color-dark - #2b3e50
// //
.br-p { color: @brand-primary; }
.br-s { color: @brand-secondary; }
.br-a { color: @brand-accent; }
.br-p-s10 { color: saturate(@brand-primary, 10%); }
.br-s-s10 { color: saturate(@brand-secondary, 10%); }
.br-a-s10 { color: saturate(@brand-accent, 10%); }
.br-p-s20 { color: saturate(@brand-primary, 20%); }
.br-s-s20 { color: saturate(@brand-secondary, 20%); }
.br-a-s20 { color: saturate(@brand-accent, 20%); }
.bg-p { background-color: @brand-primary; }
.bg-s { background-color: @brand-secondary; }
.bg-a { background-color: @brand-accent; }
.bg-p-s10 { background-color: saturate(@brand-primary, 10%); }
.bg-s-s10 { background-color: saturate(@brand-secondary, 10%); }
.bg-a-s10 { background-color: saturate(@brand-accent, 10%); }
.bg-p-s20 { background-color: saturate(@brand-primary, 20%); }
.bg-s-s20 { background-color: saturate(@brand-secondary, 20%); }
.bg-a-s20 { background-color: saturate(@brand-accent, 20%); }
//
// Edge cases
//
.sidenav-tree ul.top-level > li > div.group:before {
border-top-color: @brand-secondary;
}
/*
// //
// Logos // Logos
// //
@ -279,4 +307,5 @@ div.control-componentlist {
} }
} }
} }
} }
*/

28
modules/backend/models/brandsettings/fields.yaml
View File

@ -1,7 +1,9 @@
# =================================== # ===================================
# Field Definitions # Field Definitions
# =================================== # ===================================
# Light palette: [#1abc9c, #2ecc71, #3498db, #9b59b6, #34495e, #f1c40f, #e67e22, #e74c3c, #ecf0f1, #95a5a6]
# Dark palette: [#16a085, #27ae60, #2980b9, #8e44ad, #2b3e50, #f39c12, #d35400, #c0392b, #bdc3c7, #7f8c8d]
#
tabs: tabs:
fields: fields:
@ -23,29 +25,23 @@ tabs:
commentAbove: backend::lang.branding.app_tagline_description commentAbove: backend::lang.branding.app_tagline_description
tab: backend::lang.branding.brand tab: backend::lang.branding.brand
primary_color_light: primary_color:
label: backend::lang.branding.primary_light label: backend::lang.branding.primary_color
type: colorpicker type: colorpicker
tab: backend::lang.branding.colors tab: backend::lang.branding.colors
availableColors: [#1abc9c, #2ecc71, #3498db, #9b59b6, #34495e, #f1c40f, #e67e22, #e74c3c, #ecf0f1, #95a5a6] availableColors: [#16a085, #27ae60, #3498db, #9b59b6, #34495e, #f1c40f, #e67e22, #e74c3c, #ecf0f1, #95a5a6]
primary_color_dark: secondary_color:
label: backend::lang.branding.primary_dark label: backend::lang.branding.secondary_color
type: colorpicker type: colorpicker
tab: backend::lang.branding.colors tab: backend::lang.branding.colors
availableColors: [#16a085, #27ae60, #2980b9, #8e44ad, #2b3e50, #f39c12, #d35400, #c0392b, #bdc3c7, #7f8c8d] availableColors: [#16a085, #27ae60, #2980b9, #8e44ad, #34495e, #f39c12, #d35400, #c0392b, #bdc3c7, #7f8c8d]
secondary_color_light: accent_color:
label: backend::lang.branding.secondary_light label: backend::lang.branding.accent_color
type: colorpicker type: colorpicker
tab: backend::lang.branding.colors tab: backend::lang.branding.colors
availableColors: [#1abc9c, #2ecc71, #3498db, #9b59b6, #34495e, #f1c40f, #e67e22, #e74c3c, #ecf0f1, #95a5a6] availableColors: [#16a085, #27ae60, #3498db, #9b59b6, #34495e, #f1c40f, #e67e22, #e74c3c, #ecf0f1, #95a5a6]
secondary_color_dark:
label: backend::lang.branding.secondary_dark
type: colorpicker
tab: backend::lang.branding.colors
availableColors: [#16a085, #27ae60, #2980b9, #8e44ad, #2b3e50, #f39c12, #d35400, #c0392b, #bdc3c7, #7f8c8d]
custom_css: custom_css:
label: backend::lang.branding.custom_stylesheet label: backend::lang.branding.custom_stylesheet

4
modules/cms/widgets/mediamanager/partials/_body.htm
View File

@ -19,7 +19,7 @@
<div class="layout-row whiteboard"> <div class="layout-row whiteboard">
<div class="layout"> <div class="layout">
<div class="layout-row"> <div class="layout-row">
<div class="layout-cell width-200 panel border-right" data-control="left-sidebar"> <div class="layout-cell panel w-200 border-right" data-control="left-sidebar">
<?= $this->makePartial('left-sidebar') ?> <?= $this->makePartial('left-sidebar') ?>
</div> </div>
<div class="layout-cell"> <div class="layout-cell">
@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<div class="layout-cell width-300 panel border-left no-padding <?= !$sidebarVisible ? 'hide' : null ?>" data-control="preview-sidebar"> <div class="layout-cell w-300 panel border-left no-padding <?= !$sidebarVisible ? 'hide' : null ?>" data-control="preview-sidebar">
<!-- Right sidebar --> <!-- Right sidebar -->
<?= $this->makePartial('right-sidebar') ?> <?= $this->makePartial('right-sidebar') ?>
</div> </div>

6
modules/cms/widgets/mediamanager/partials/_crop-toolbar.htm
View File

@ -22,17 +22,17 @@
</div> </div>
<label for="mmcropimagewidth"><?= e(trans('cms::lang.media.selection_mode')) ?></label> <label for="mmcropimagewidth"><?= e(trans('cms::lang.media.selection_mode')) ?></label>
<select name="selectionMode" class="form-control custom-select width-150" data-control="selection-mode"> <select name="selectionMode" class="form-control custom-select w-150" data-control="selection-mode">
<?php foreach ($selectionModes as $mode=>$name): ?> <?php foreach ($selectionModes as $mode=>$name): ?>
<option <?= $mode == $currentSelectionMode ? 'selected="selected"' : null ?> value="<?= $mode ?>"><?= e($name) ?></option> <option <?= $mode == $currentSelectionMode ? 'selected="selected"' : null ?> value="<?= $mode ?>"><?= e($name) ?></option>
<?php endforeach ?> <?php endforeach ?>
</select> </select>
<label for="mmcropimagewidth"><?= e(trans('cms::lang.media.width')) ?></label> <label for="mmcropimagewidth"><?= e(trans('cms::lang.media.width')) ?></label>
<input id="mmcropimagewidth" type="text" class="form-control width-50" data-control="crop-width-input" name="selectionWidth" value="<?= e($currentSelectionWidth) ?>" <?= $sizeDisabledAttr ?>/> <input id="mmcropimagewidth" type="text" class="form-control w-50" data-control="crop-width-input" name="selectionWidth" value="<?= e($currentSelectionWidth) ?>" <?= $sizeDisabledAttr ?>/>
<label for="mmcropimageheight"><?= e(trans('cms::lang.media.height')) ?></label> <label for="mmcropimageheight"><?= e(trans('cms::lang.media.height')) ?></label>
<input id="mmcropimageheight" type="text" class="form-control width-50" data-control="crop-height-input" name="selectionHeight" value="<?= e($currentSelectionHeight) ?>" <?= $sizeDisabledAttr ?>/> <input id="mmcropimageheight" type="text" class="form-control w-50" data-control="crop-height-input" name="selectionHeight" value="<?= e($currentSelectionHeight) ?>" <?= $sizeDisabledAttr ?>/>
<label class="standalone hide" data-label="selection-size"><?= e(trans('cms::lang.media.selected_size')) ?> <span data-label="selection-width"></span> x <span data-label="selection-height"></span></label> <label class="standalone hide" data-label="selection-size"><?= e(trans('cms::lang.media.selected_size')) ?> <span data-label="selection-width"></span> x <span data-label="selection-height"></span></label>

8
modules/system/assets/css/styles.css
View File

@ -366,8 +366,8 @@ cite{font-style:normal}
.text-center{text-align:center} .text-center{text-align:center}
.text-justify{text-align:justify} .text-justify{text-align:justify}
.text-muted{color:#999999} .text-muted{color:#999999}
.text-primary{color:#4da7e8} .text-primary{color:#3498db}
a.text-primary:hover{color:#2091e2} a.text-primary:hover{color:#217dbb}
.text-success{color:#3c763d} .text-success{color:#3c763d}
a.text-success:hover{color:#2b542c} a.text-success:hover{color:#2b542c}
.text-info{color:#31708f} .text-info{color:#31708f}
@ -376,8 +376,8 @@ a.text-info:hover{color:#245269}
a.text-warning:hover{color:#66512c} a.text-warning:hover{color:#66512c}
.text-danger{color:#a94442} .text-danger{color:#a94442}
a.text-danger:hover{color:#843534} a.text-danger:hover{color:#843534}
.bg-primary{color:#fff;background-color:#4da7e8} .bg-primary{color:#fff;background-color:#3498db}
a.bg-primary:hover{background-color:#2091e2} a.bg-primary:hover{background-color:#217dbb}
.bg-success{background-color:#dff0d8} .bg-success{background-color:#dff0d8}
a.bg-success:hover{background-color:#c1e2b3} a.bg-success:hover{background-color:#c1e2b3}
.bg-info{background-color:#d9edf7} .bg-info{background-color:#d9edf7}

15
modules/system/assets/ui/less/form.less
View File

@ -409,17 +409,10 @@ body.slim-container {
display: inline-block; display: inline-block;
margin-right: 15px; margin-right: 15px;
&.width-50 { // @deprecated Remove if year >= 2017 (3 lines below)
width: 50px; &.width-50 { width: 50px; }
} &.width-100 { width: 100px; }
&.width-150 { width: 150px;}
&.width-100 {
width: 100px;
}
&.width-150 {
width: 150px;
}
} }
input[type=text].form-control, label { input[type=text].form-control, label {

21
modules/system/assets/ui/less/global.variables.less
View File

@ -6,13 +6,8 @@
@body-bg: #f9f9f9; @body-bg: #f9f9f9;
@text-color: @gray-dark; @text-color: @gray-dark;
@link-color: #0181b9;
// Old @link-hover-color: darken(@link-color, 30%);
// @link-color: darken(@brand-primary, 15%);
// @link-hover-color: darken(@link-color, 30%);
@link-color: #0181b9;
@link-hover-color: darken(@link-color, 30%);
@link-hover-decoration: underline; @link-hover-decoration: underline;
@ -115,10 +110,12 @@
// //
// Colors // Colors
// -------------------------------------------------- // --------------------------------------------------
@brand-primary: #4da7e8; // Original was #5fb6f5 -sg @brand-primary: #3498db;
@brand-secondary: #34495e;
@brand-accent: #e67e22;
@brand-success: #31ac5f; @brand-success: #31ac5f;
@brand-info: #5bc0de; // @todo Find a non-BS color @brand-info: #5bc0de;
@brand-warning: #f0ad4e; // @todo Find a non-BS color @brand-warning: #f0ad4e;
@brand-danger: #ab2a1c; @brand-danger: #ab2a1c;
@color-text-title: #405261; @color-text-title: #405261;
@ -179,3 +176,7 @@
@caret-width-base: 4px; @caret-width-base: 4px;
@caret-width-large: 5px; @caret-width-large: 5px;
@spacer: @padding-standard;
@spacer-y: @spacer;
@spacer-x: @spacer;

2
modules/system/partials/_settings_menu_items.htm
View File

@ -17,7 +17,7 @@
<ul> <ul>
<?php foreach ($items as $item): ?> <?php foreach ($items as $item): ?>
<li class="<?= strtolower($item->owner) == $context->owner && strtolower($item->code) == $context->itemCode ? 'active' : false ?>" data-keywords="<?= e(trans($item->keywords)) ?>"> <li class="<?= strtolower($item->owner) == $context->owner && strtolower($item->code) == $context->itemCode ? 'active bg-p' : false ?>" data-keywords="<?= e(trans($item->keywords)) ?>">
<a href="<?= $item->url ?>"> <a href="<?= $item->url ?>">
<i class="<?= $item->icon ?>"></i> <i class="<?= $item->icon ?>"></i>
<span class="header"><?= e(trans($item->label)) ?></span> <span class="header"><?= e(trans($item->label)) ?></span>

4
modules/system/partials/_system_sidebar.htm
View File

@ -1,4 +1,4 @@
<div class="layout-cell sidenav-tree" data-control="sidenav-tree" data-search-input="#settings-search-input"> <div class="layout-cell sidenav-tree bg-s" data-control="sidenav-tree" data-search-input="#settings-search-input">
<a class="back-link" href="<?= Backend::url('system/settings') ?>"><i class="icon-angle-left"></i><?= e(trans('system::lang.settings.menu_label')) ?></a> <a class="back-link" href="<?= Backend::url('system/settings') ?>"><i class="icon-angle-left"></i><?= e(trans('system::lang.settings.menu_label')) ?></a>
<div class="layout"> <div class="layout">
@ -20,4 +20,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>