diff --git a/fonts/kitematic.eot b/fonts/kitematic.eot
index b31399dd8f..29b7a10466 100644
Binary files a/fonts/kitematic.eot and b/fonts/kitematic.eot differ
diff --git a/fonts/kitematic.svg b/fonts/kitematic.svg
index 6d6a89b1dc..0eb4c9c371 100644
--- a/fonts/kitematic.svg
+++ b/fonts/kitematic.svg
@@ -18,9 +18,10 @@
-
+
+
diff --git a/fonts/kitematic.ttf b/fonts/kitematic.ttf
index 84d2f048c8..fed09b3609 100644
Binary files a/fonts/kitematic.ttf and b/fonts/kitematic.ttf differ
diff --git a/fonts/kitematic.woff b/fonts/kitematic.woff
index 9d2678cf43..cec78819b3 100644
Binary files a/fonts/kitematic.woff and b/fonts/kitematic.woff differ
diff --git a/src/components/ContainerDetailsSubheader.react.js b/src/components/ContainerDetailsSubheader.react.js
index bc9d4a348d..73d86cbd3b 100644
--- a/src/components/ContainerDetailsSubheader.react.js
+++ b/src/components/ContainerDetailsSubheader.react.js
@@ -117,46 +117,6 @@ var ContainerDetailsSubheader = React.createClass({
});
}
},
- handleItemMouseEnterView: function () {
- var $action = $(this.getDOMNode()).find('.action .view');
- $action.css("visibility", "visible");
- },
- handleItemMouseLeaveView: function () {
- var $action = $(this.getDOMNode()).find('.action .view');
- $action.css("visibility", "hidden");
- },
- handleItemMouseEnterRestart: function () {
- var $action = $(this.getDOMNode()).find('.action .restart');
- $action.css("visibility", "visible");
- },
- handleItemMouseLeaveRestart: function () {
- var $action = $(this.getDOMNode()).find('.action .restart');
- $action.css("visibility", "hidden");
- },
- handleItemMouseEnterStop: function () {
- var $action = $(this.getDOMNode()).find('.action .stop');
- $action.css("visibility", "visible");
- },
- handleItemMouseLeaveStop: function () {
- var $action = $(this.getDOMNode()).find('.action .stop');
- $action.css("visibility", "hidden");
- },
- handleItemMouseEnterStart: function () {
- var $action = $(this.getDOMNode()).find('.action .start');
- $action.css("visibility", "visible");
- },
- handleItemMouseLeaveStart: function () {
- var $action = $(this.getDOMNode()).find('.action .start');
- $action.css("visibility", "hidden");
- },
- handleItemMouseEnterTerminal: function () {
- var $action = $(this.getDOMNode()).find('.action .terminal');
- $action.css("visibility", "visible");
- },
- handleItemMouseLeaveTerminal: function () {
- var $action = $(this.getDOMNode()).find('.action .terminal');
- $action.css("visibility", "hidden");
- },
render: function () {
var runActionClass = classNames({
action: true,
@@ -200,16 +160,16 @@ var ContainerDetailsSubheader = React.createClass({
var startStopToggle;
if (this.disableStop()) {
startStopToggle = (
-
-
-
Start
+
);
} else {
startStopToggle = (
-
-
-
Stop
+
);
}
@@ -217,17 +177,17 @@ var ContainerDetailsSubheader = React.createClass({
{startStopToggle}
-
-
-
Restart
+
-
-
-
Terminal
+
-
diff --git a/styles/icons.less b/styles/icons.less
index 59405421b3..433502efa6 100644
--- a/styles/icons.less
+++ b/styles/icons.less
@@ -22,8 +22,8 @@
speak: none;
line-height: 1;
//-webkit-font-smoothing: subpixel-antialiased;
- /*-webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;*/
+ //-webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
@@ -36,8 +36,8 @@
speak: none;
line-height: 1;
//-webkit-font-smoothing: subpixel-antialiased;
- /*-webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;*/
+ //-webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
.icon-add:before {
@@ -73,9 +73,6 @@
.icon-restart:before {
content: "n";
}
-.icon-stop:before {
- content: "o";
-}
.icon-docker-cli:before {
content: "a";
}
@@ -88,3 +85,9 @@
.icon-search:before {
content: "p";
}
+.icon-start:before {
+ content: "o";
+}
+.icon-stop:before {
+ content: "q";
+}
diff --git a/styles/right-panel.less b/styles/right-panel.less
index d1ebdcfc0a..a9687ffb30 100644
--- a/styles/right-panel.less
+++ b/styles/right-panel.less
@@ -43,56 +43,53 @@
background-color: white;
height: 45px;
font-size: 10px;
- color: @gray-normal;
.details-header-actions {
flex: 1 auto;
text-align: left;
.action {
display: inline-block;
position: relative;
- img {
- width: 35px;
- height: 35px;
- }
+ width: 60px;
+ height: 44px;
+ padding-top: 0.2rem;
+ .box-button();
+ border-right: 1px solid @color-divider;
&.disabled {
opacity: 0.3;
&:active {
- img, .btn-label {
- -webkit-filter: brightness(1);
- }
}
}
&:active {
- img, .btn-label {
- -webkit-filter: brightness(0.8);
- }
}
.action-icon {
- color: @gray-normal;
- margin-right: 15px;
- }
- .btn-label {
- position: absolute;
- color: @brand-action;
- font-size: 10px;
- width: 200px;
- top: 38px;
- &.view {
- left: 8px;
- }
- &.restart {
- left: 3px;
+ text-align: center;
+ height: 44px;
+ .icon {
+ font-size: 24px;
+ margin-left: 0.6rem;
}
&.stop {
- left: 8px;
+ position: relative;
+ top: 0.3rem;
+ .icon {
+ font-size: 20px;
+ margin-top: 1rem;
+ }
}
&.start {
- left: 8px;
+ position: relative;
+ top: 0.3rem;
+ .icon {
+ font-size: 20px;
+ margin-top: 1rem;
+ }
}
- &.terminal {
- left: 1px;
- }
- visibility: hidden;
+ }
+ .btn-label {
+ text-align: center;
+ font-size: 8px;
+ position: relative;
+ top: -1.5rem;
}
}
}