alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Styling on Timeline zoom buttons

Browse Source 
open #208
Fixed in both themes;
This commit is contained in:
Charles Hacskaylo
2015-11-20 15:42:08 -08:00
parent fc53dbd8a4
commit 3854df27d8
5 changed files with 40 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
platform/features/timeline/res/css/timeline-espresso.css
View File

@@ -252,48 +252,39 @@
background-repeat: repeat-x; } background-repeat: repeat-x; }
/* line 118, ../sass/_timeline-thematic.scss */ /* line 118, ../sass/_timeline-thematic.scss */
.s-timeline .s-hover-btns-holder { .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-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
background-image: -moz-linear-gradient(180deg, #404040, #404040 70%, rgba(64, 64, 64, 0) 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: -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%); } 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 { .s-timeline .s-hover-btns-holder .s-btn {
background-color: #404040; height: 16px;
-moz-border-radius: 3px; line-height: 16px; }
-webkit-border-radius: 3px; /* line 127, ../sass/_timeline-thematic.scss */
border-radius: 3px; .s-timeline .s-hover-btns-holder .s-btn .icon {
-moz-box-sizing: border-box; font-size: 0.7rem !important; }
-webkit-box-sizing: border-box; /* line 134, ../sass/_timeline-thematic.scss */
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 */
.s-timeline .l-timeline-resource-graph .l-graph { .s-timeline .l-timeline-resource-graph .l-graph {
background: rgba(0, 0, 0, 0.2); } 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 { .s-timeline .l-timeline-resource-graph .l-title {
color: #999; } color: #999; }
/* line 138, ../sass/_timeline-thematic.scss */ /* line 143, ../sass/_timeline-thematic.scss */
.edit-mode .s-swimlane { .edit-mode .s-swimlane {
cursor: pointer; } cursor: pointer; }
/* line 140, ../sass/_timeline-thematic.scss */ /* line 145, ../sass/_timeline-thematic.scss */
.edit-mode .s-swimlane .s-label { .edit-mode .s-swimlane .s-label {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
padding: 2px 5px; } padding: 2px 5px; }
/* line 143, ../sass/_timeline-thematic.scss */ /* line 148, ../sass/_timeline-thematic.scss */
.edit-mode .s-swimlane .s-label:hover { .edit-mode .s-swimlane .s-label:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: #fff; } color: #fff; }

32
platform/features/timeline/res/css/timeline-snow.css
View File

@@ -252,39 +252,39 @@
background-repeat: repeat-x; } background-repeat: repeat-x; }
/* line 118, ../sass/_timeline-thematic.scss */ /* line 118, ../sass/_timeline-thematic.scss */
.s-timeline .s-hover-btns-holder { .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-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZWZlZmVmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWZlZmVmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
background-image: -moz-linear-gradient(180deg, #efefef, #efefef 70%, rgba(239, 239, 239, 0) 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: -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%); } 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 { .s-timeline .s-hover-btns-holder .s-btn {
background-color: white; height: 16px;
-moz-border-radius: 4px; line-height: 16px; }
-webkit-border-radius: 4px; /* line 127, ../sass/_timeline-thematic.scss */
border-radius: 4px; .s-timeline .s-hover-btns-holder .s-btn .icon {
-moz-box-sizing: border-box; font-size: 0.7rem !important; }
-webkit-box-sizing: border-box; /* line 134, ../sass/_timeline-thematic.scss */
box-sizing: border-box;
color: #737373;
display: inline-block; }
/* line 129, ../sass/_timeline-thematic.scss */
.s-timeline .l-timeline-resource-graph .l-graph { .s-timeline .l-timeline-resource-graph .l-graph {
background: rgba(0, 0, 0, 0.1); } background: rgba(0, 0, 0, 0.05); }
/* line 132, ../sass/_timeline-thematic.scss */ /* line 137, ../sass/_timeline-thematic.scss */
.s-timeline .l-timeline-resource-graph .l-title { .s-timeline .l-timeline-resource-graph .l-title {
color: #666; } color: #666; }
/* line 138, ../sass/_timeline-thematic.scss */ /* line 143, ../sass/_timeline-thematic.scss */
.edit-mode .s-swimlane { .edit-mode .s-swimlane {
cursor: pointer; } cursor: pointer; }
/* line 140, ../sass/_timeline-thematic.scss */ /* line 145, ../sass/_timeline-thematic.scss */
.edit-mode .s-swimlane .s-label { .edit-mode .s-swimlane .s-label {
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
padding: 2px 5px; } padding: 2px 5px; }
/* line 143, ../sass/_timeline-thematic.scss */ /* line 148, ../sass/_timeline-thematic.scss */
.edit-mode .s-swimlane .s-label:hover { .edit-mode .s-swimlane .s-label:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: #fff; } color: #fff; }

4
platform/features/timeline/res/sass/_constants-espresso.scss
View File

@@ -21,8 +21,8 @@
*****************************************************************************/ *****************************************************************************/
// General // General
$timelineHeaderColorBg: lighten($colorBodyBg, 5%); $timelineHeaderColorBg: pullForward($colorBodyBg, 5%);
$timelineColorAlt1: lighten($timelineHeaderColorBg, 10%); $timelineColorAlt1: pullForward($timelineHeaderColorBg, 10%);
$colorGanttBarBg: #5555aa; $colorGanttBarBg: #5555aa;
$colorGanttBarFg: #fff; $colorGanttBarFg: #fff;
$colorGanttBarSelectedBg: #ccc; $colorGanttBarSelectedBg: #ccc;

2
platform/features/timeline/res/sass/_constants-snow.scss
View File

@@ -37,6 +37,6 @@ $colorGanttToggle: $colorKey;
$shdwGanttBar: rgba(black, 0.1) 0 1px 3px; $shdwGanttBar: rgba(black, 0.1) 0 1px 3px;
// Resource graphs // Resource graphs
$timelineResourceGraphBg: rgba(black, 0.1); $timelineResourceGraphBg: $colorPlotBg;
$timelineResourceGraphFg: $colorBodyFg; $timelineResourceGraphFg: $colorBodyFg;
$timelineResourceGraphLegendFg: $colorBodyFg; $timelineResourceGraphLegendFg: $colorBodyFg;

7
platform/features/timeline/res/sass/_timeline-thematic.scss
View File

@@ -119,9 +119,14 @@
$bg: $timelineHeaderColorBg; $bg: $timelineHeaderColorBg;
$bga: 1; $bga: 1;
$l: 5%; $l: 5%;
@include user-select(none);
@include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%)); @include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%));
.s-btn { .s-btn {
@include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true); height: 16px;
line-height: 16px;
.icon {
font-size: 0.7rem !important;
}
} }
} }