diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 1e705cec9..8ccbe68d4 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -232,15 +232,19 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch} .control-filelist.filelist-hero ul li > a span.title{font-size:14px;font-weight:normal;color:#2b3e50} .control-filelist.filelist-hero ul li > a span.description{font-size:13px} .control-filelist.filelist-hero ul li > a .list-icon{position:absolute;left:14px;top:15px;font-size:22px;color:#b7c0c2} -.control-filelist.filelist-hero ul li > a:hover{background:#58b6f7;border-bottom:1px solid #58b6f7 !important} +.control-filelist.filelist-hero ul li > a:hover{background:#4ea5e0;border-bottom:1px solid #4ea5e0 !important} .control-filelist.filelist-hero ul li > a:hover span.title,.control-filelist.filelist-hero ul li > a:hover span.description{color:#ffffff !important} .control-filelist.filelist-hero ul li > a:hover .list-icon{color:#ffffff !important} +.control-filelist.filelist-hero ul li > a:active{background:#3498db;border-bottom:1px solid #3498db !important} +.control-filelist.filelist-hero ul li > a:active span.title,.control-filelist.filelist-hero ul li > a:active span.description{color:#ffffff !important} +.control-filelist.filelist-hero ul li > a:active .list-icon{color:#ffffff !important} .control-filelist.filelist-hero ul li .checkbox{top:-2px;right:0} .control-filelist.filelist-hero ul li.active > a{border-bottom:1px solid #dddddd} .control-filelist.filelist-hero ul li.active > a:after{top:-1px;bottom:-1px;height:auto} .control-filelist.filelist-hero ul li.active > a > span.borders:before{content:' ';position:absolute;width:100%;height:1px;display:block;left:0;background-color:#dddddd} .control-filelist.filelist-hero ul li.active > a > span.borders:before{top:-1px} -.control-filelist.filelist-hero ul li.active > a:hover > span.borders:before{background-color:#58b6f7} +.control-filelist.filelist-hero ul li.active > a:hover > span.borders:before{background-color:#4ea5e0} +.control-filelist.filelist-hero ul li.active > a:active > span.borders:before{background-color:#3498db} .control-filelist.filelist-hero ul li > h4{padding-top:7px;padding-bottom:6px;border-bottom:1px solid #ecf0f1} .control-filelist.filelist-hero ul li > div.controls{display:none;position:absolute;right:16px;top:15px} .control-filelist.filelist-hero ul li > div.controls > a.control{width:16px;height:23px;background:transparent;overflow:hidden;display:inline-block;color:#ffffff !important;padding:0} @@ -251,10 +255,14 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch} .control-filelist.filelist-hero ul li.separator:after{z-index:30;content:'';display:block;width:0;height:0;border-left:8.5px solid transparent;border-right:8.5px solid transparent;border-top:9px solid #95a5a6;border-bottom-width:0;position:absolute;left:14px;bottom:-9px} .control-filelist.filelist-hero ul li.separator h5{color:#2b3e50;font-size:14px;margin:0;font-weight:normal;padding:0} .control-filelist.filelist-hero ul > li.group > ul > li > a{padding-left:66px} -.control-filelist.filelist-hero.single-level ul li:hover{background:#58b6f7} -.control-filelist.filelist-hero.single-level ul li:hover > a{background:#58b6f7;border-bottom:1px solid #58b6f7 !important} +.control-filelist.filelist-hero.single-level ul li:hover{background:#4ea5e0} +.control-filelist.filelist-hero.single-level ul li:hover > a{background:#4ea5e0;border-bottom:1px solid #4ea5e0 !important} .control-filelist.filelist-hero.single-level ul li:hover > a span.title,.control-filelist.filelist-hero.single-level ul li:hover > a span.description{color:#ffffff !important} .control-filelist.filelist-hero.single-level ul li:hover > a .list-icon{color:#ffffff !important} +.control-filelist.filelist-hero.single-level ul li:active{background:#3498db} +.control-filelist.filelist-hero.single-level ul li:active > a{background:#3498db;border-bottom:1px solid #3498db !important} +.control-filelist.filelist-hero.single-level ul li:active > a span.title,.control-filelist.filelist-hero.single-level ul li:active > a span.description{color:#ffffff !important} +.control-filelist.filelist-hero.single-level ul li:active > a .list-icon{color:#ffffff !important} .touch .control-filelist li:not(.active) a:hover{background:transparent} .control-scrollpanel{position:relative;background:#ecf0f1} .control-scrollpanel .control-scrollbar.vertical > .scrollbar-scrollbar{right:0} @@ -316,6 +324,9 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch} .control-treeview ol > li > div > ul.submenu li a{display:block;padding:4px 3px 0 3px;color:#ffffff;text-decoration:none;outline:none} .control-treeview ol > li > div > ul.submenu li a i{margin-right:5px} .control-treeview ol > li > div:hover > ul.submenu{display:block} +.control-treeview ol > li > div:active > ul.submenu{background-position:left -116px} +.control-treeview ol > li > div:active > ul.submenu:before{background-position:left -77px} +.control-treeview ol > li > div:active > ul.submenu:after{background-position:-100px -77px} .control-treeview ol > li > div .checkbox{position:absolute;top:-2px;right:0} .control-treeview ol > li > div .checkbox label{margin-right:0} .control-treeview ol > li > div .checkbox label:before{border-color:#cccccc} diff --git a/modules/backend/assets/images/treeview-submenu-tabs.png b/modules/backend/assets/images/treeview-submenu-tabs.png index 4260a5ae8..6c39867ba 100644 Binary files a/modules/backend/assets/images/treeview-submenu-tabs.png and b/modules/backend/assets/images/treeview-submenu-tabs.png differ diff --git a/modules/backend/assets/less/controls/filelist.less b/modules/backend/assets/less/controls/filelist.less index cc9b3de89..0a18f932d 100644 --- a/modules/backend/assets/less/controls/filelist.less +++ b/modules/backend/assets/less/controls/filelist.less @@ -239,13 +239,25 @@ &.filelist-hero { .a-hover() { background: @color-filelist-hero-hover-bg; - border-bottom: 1px solid @color-filelist-hero-hover-bg!important; + border-bottom: 1px solid @color-filelist-hero-hover-bg !important; span.title, span.description { - color: @color-filelist-hero-hover-text!important; + color: @color-filelist-hero-hover-text !important; } .list-icon { - color: @color-filelist-hero-hover-text!important; + color: @color-filelist-hero-hover-text !important; + } + } + + .a-active() { + background: @color-filelist-hero-active-bg; + border-bottom: 1px solid @color-filelist-hero-active-bg !important; + span.title, span.description { + color: @color-filelist-hero-active-text !important; + } + + .list-icon { + color: @color-filelist-hero-active-text !important; } } @@ -280,6 +292,10 @@ &:hover { .a-hover(); } + + &:active { + .a-active(); + } } .checkbox { @@ -314,6 +330,10 @@ &:hover > span.borders:before { background-color: @color-filelist-hero-hover-bg; } + + &:active > span.borders:before { + background-color: @color-filelist-hero-active-bg; + } } } @@ -394,10 +414,17 @@ .a-hover(); } } + ul li:active { + background: @color-filelist-hero-active-bg; + + > a { + .a-active(); + } + } } } } .touch .control-filelist li:not(.active) a:hover { background: transparent; -} \ No newline at end of file +} diff --git a/modules/backend/assets/less/controls/treeview.less b/modules/backend/assets/less/controls/treeview.less index 47494ef01..07f270282 100644 --- a/modules/backend/assets/less/controls/treeview.less +++ b/modules/backend/assets/less/controls/treeview.less @@ -160,6 +160,19 @@ } } + &:active { + > ul.submenu { + background-position: left -116px; + + &:before { + background-position: left -77px; + } + &:after { + background-position: -100px -77px; + } + } + } + .checkbox { position: absolute; top: -2px; diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less index 05544ab84..cf36e5986 100644 --- a/modules/backend/assets/less/core/variables.less +++ b/modules/backend/assets/less/core/variables.less @@ -88,8 +88,10 @@ @color-filelist-cb-border: #cccccc; @color-filelist-title-hero: #2b3e50; @color-filelist-hero-item-bg: #ffffff; -@color-filelist-hero-hover-bg: #58b6f7; -@color-filelist-hero-hover-text: #ffffff; +@color-filelist-hero-hover-bg: @highlight-hover-bg; +@color-filelist-hero-hover-text: @highlight-hover-text; +@color-filelist-hero-active-bg: @highlight-active-bg; +@color-filelist-hero-active-text: @highlight-active-text; @color-fancy-master-tabs-bg: #d35400; @color-fancy-master-tabs-active-text: #ffffff;