From 3854df27d8e89d3f577341416ec4e75c7f5d35d2 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 20 Nov 2015 15:42:08 -0800 Subject: [PATCH] [Frontend] Styling on Timeline zoom buttons open #208 Fixed in both themes; --- .../timeline/res/css/timeline-espresso.css | 39 +++++++------------ .../timeline/res/css/timeline-snow.css | 32 +++++++-------- .../res/sass/_constants-espresso.scss | 4 +- .../timeline/res/sass/_constants-snow.scss | 2 +- .../timeline/res/sass/_timeline-thematic.scss | 7 +++- 5 files changed, 40 insertions(+), 44 deletions(-) diff --git a/platform/features/timeline/res/css/timeline-espresso.css b/platform/features/timeline/res/css/timeline-espresso.css index 895fdb8294..eb2a6afab5 100644 --- a/platform/features/timeline/res/css/timeline-espresso.css +++ b/platform/features/timeline/res/css/timeline-espresso.css @@ -252,48 +252,39 @@ background-repeat: repeat-x; } /* line 118, ../sass/_timeline-thematic.scss */ .s-timeline .s-hover-btns-holder { + -moz-user-select: -moz-none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(180deg, #404040, #404040 70%, rgba(64, 64, 64, 0) 100%); background-image: -webkit-linear-gradient(180deg, #404040, #404040 70%, rgba(64, 64, 64, 0) 100%); background-image: linear-gradient(-90deg, #404040, #404040 70%, rgba(64, 64, 64, 0) 100%); } - /* line 123, ../sass/_timeline-thematic.scss */ + /* line 124, ../sass/_timeline-thematic.scss */ .s-timeline .s-hover-btns-holder .s-btn { - background-color: #404040; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: #a6a6a6; - display: inline-block; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040)); - background-image: -moz-linear-gradient(#4d4d4d, #404040); - background-image: -webkit-linear-gradient(#4d4d4d, #404040); - background-image: linear-gradient(#4d4d4d, #404040); - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; } - /* line 129, ../sass/_timeline-thematic.scss */ + height: 16px; + line-height: 16px; } + /* line 127, ../sass/_timeline-thematic.scss */ + .s-timeline .s-hover-btns-holder .s-btn .icon { + font-size: 0.7rem !important; } + /* line 134, ../sass/_timeline-thematic.scss */ .s-timeline .l-timeline-resource-graph .l-graph { background: rgba(0, 0, 0, 0.2); } - /* line 132, ../sass/_timeline-thematic.scss */ + /* line 137, ../sass/_timeline-thematic.scss */ .s-timeline .l-timeline-resource-graph .l-title { color: #999; } -/* line 138, ../sass/_timeline-thematic.scss */ +/* line 143, ../sass/_timeline-thematic.scss */ .edit-mode .s-swimlane { cursor: pointer; } - /* line 140, ../sass/_timeline-thematic.scss */ + /* line 145, ../sass/_timeline-thematic.scss */ .edit-mode .s-swimlane .s-label { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 2px 5px; } - /* line 143, ../sass/_timeline-thematic.scss */ + /* line 148, ../sass/_timeline-thematic.scss */ .edit-mode .s-swimlane .s-label:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } diff --git a/platform/features/timeline/res/css/timeline-snow.css b/platform/features/timeline/res/css/timeline-snow.css index 6d5190ae8f..344c2beb9a 100644 --- a/platform/features/timeline/res/css/timeline-snow.css +++ b/platform/features/timeline/res/css/timeline-snow.css @@ -252,39 +252,39 @@ background-repeat: repeat-x; } /* line 118, ../sass/_timeline-thematic.scss */ .s-timeline .s-hover-btns-holder { + -moz-user-select: -moz-none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZWZlZmVmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWZlZmVmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(180deg, #efefef, #efefef 70%, rgba(239, 239, 239, 0) 100%); background-image: -webkit-linear-gradient(180deg, #efefef, #efefef 70%, rgba(239, 239, 239, 0) 100%); background-image: linear-gradient(-90deg, #efefef, #efefef 70%, rgba(239, 239, 239, 0) 100%); } - /* line 123, ../sass/_timeline-thematic.scss */ + /* line 124, ../sass/_timeline-thematic.scss */ .s-timeline .s-hover-btns-holder .s-btn { - background-color: white; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: #737373; - display: inline-block; } - /* line 129, ../sass/_timeline-thematic.scss */ + height: 16px; + line-height: 16px; } + /* line 127, ../sass/_timeline-thematic.scss */ + .s-timeline .s-hover-btns-holder .s-btn .icon { + font-size: 0.7rem !important; } + /* line 134, ../sass/_timeline-thematic.scss */ .s-timeline .l-timeline-resource-graph .l-graph { - background: rgba(0, 0, 0, 0.1); } - /* line 132, ../sass/_timeline-thematic.scss */ + background: rgba(0, 0, 0, 0.05); } + /* line 137, ../sass/_timeline-thematic.scss */ .s-timeline .l-timeline-resource-graph .l-title { color: #666; } -/* line 138, ../sass/_timeline-thematic.scss */ +/* line 143, ../sass/_timeline-thematic.scss */ .edit-mode .s-swimlane { cursor: pointer; } - /* line 140, ../sass/_timeline-thematic.scss */ + /* line 145, ../sass/_timeline-thematic.scss */ .edit-mode .s-swimlane .s-label { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 2px 5px; } - /* line 143, ../sass/_timeline-thematic.scss */ + /* line 148, ../sass/_timeline-thematic.scss */ .edit-mode .s-swimlane .s-label:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } diff --git a/platform/features/timeline/res/sass/_constants-espresso.scss b/platform/features/timeline/res/sass/_constants-espresso.scss index 107a0eadc4..51a671c37a 100644 --- a/platform/features/timeline/res/sass/_constants-espresso.scss +++ b/platform/features/timeline/res/sass/_constants-espresso.scss @@ -21,8 +21,8 @@ *****************************************************************************/ // General -$timelineHeaderColorBg: lighten($colorBodyBg, 5%); -$timelineColorAlt1: lighten($timelineHeaderColorBg, 10%); +$timelineHeaderColorBg: pullForward($colorBodyBg, 5%); +$timelineColorAlt1: pullForward($timelineHeaderColorBg, 10%); $colorGanttBarBg: #5555aa; $colorGanttBarFg: #fff; $colorGanttBarSelectedBg: #ccc; diff --git a/platform/features/timeline/res/sass/_constants-snow.scss b/platform/features/timeline/res/sass/_constants-snow.scss index b055cf3019..1d33a2793c 100644 --- a/platform/features/timeline/res/sass/_constants-snow.scss +++ b/platform/features/timeline/res/sass/_constants-snow.scss @@ -37,6 +37,6 @@ $colorGanttToggle: $colorKey; $shdwGanttBar: rgba(black, 0.1) 0 1px 3px; // Resource graphs -$timelineResourceGraphBg: rgba(black, 0.1); +$timelineResourceGraphBg: $colorPlotBg; $timelineResourceGraphFg: $colorBodyFg; $timelineResourceGraphLegendFg: $colorBodyFg; \ No newline at end of file diff --git a/platform/features/timeline/res/sass/_timeline-thematic.scss b/platform/features/timeline/res/sass/_timeline-thematic.scss index cee4021ae9..4a252957f0 100644 --- a/platform/features/timeline/res/sass/_timeline-thematic.scss +++ b/platform/features/timeline/res/sass/_timeline-thematic.scss @@ -119,9 +119,14 @@ $bg: $timelineHeaderColorBg; $bga: 1; $l: 5%; + @include user-select(none); @include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%)); .s-btn { - @include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true); + height: 16px; + line-height: 16px; + .icon { + font-size: 0.7rem !important; + } } }