diff --git a/browser/main/Components/HomeNavigator.jsx b/browser/main/Components/HomeNavigator.jsx index 18e72b3a..c4ba5ca5 100644 --- a/browser/main/Components/HomeNavigator.jsx +++ b/browser/main/Components/HomeNavigator.jsx @@ -137,7 +137,7 @@ module.exports = React.createClass({ ) diff --git a/browser/main/Components/PlanetArticleDetail.jsx b/browser/main/Components/PlanetArticleDetail.jsx index d483c0f2..d147f8e2 100644 --- a/browser/main/Components/PlanetArticleDetail.jsx +++ b/browser/main/Components/PlanetArticleDetail.jsx @@ -76,8 +76,14 @@ module.exports = React.createClass({ - - + +
@@ -101,8 +107,14 @@ module.exports = React.createClass({
- - + +
diff --git a/browser/main/Components/PlanetHeader.jsx b/browser/main/Components/PlanetHeader.jsx index a524bbd1..101b2a3b 100644 --- a/browser/main/Components/PlanetHeader.jsx +++ b/browser/main/Components/PlanetHeader.jsx @@ -56,12 +56,13 @@ module.exports = React.createClass({ {this.props.currentPlanet.public ? null : (
-
Private planet
+
Private planet
)} -
@@ -69,9 +70,13 @@ module.exports = React.createClass({
- + +
Boost official page
diff --git a/browser/main/Containers/MainContainer.jsx b/browser/main/Containers/MainContainer.jsx index 45743e7a..1db5af61 100644 --- a/browser/main/Containers/MainContainer.jsx +++ b/browser/main/Containers/MainContainer.jsx @@ -96,7 +96,10 @@ module.exports = React.createClass({ {this.state.updateAvailable ? ( ) : null} - + ) diff --git a/browser/styles/main/containers/PlanetContainer.styl b/browser/styles/main/containers/PlanetContainer.styl index 9bf89ba7..663afd8a 100644 --- a/browser/styles/main/containers/PlanetContainer.styl +++ b/browser/styles/main/containers/PlanetContainer.styl @@ -64,40 +64,35 @@ articleListWidth= 275px color inactiveColor &:hover color textColor - .privateTooltip - position fixed - z-index popupZIndex - background-color transparentify(invBackgroundColor, 80%) - color invTextColor - padding 10px - font-size 0.9em - line-height 0.9em - border-radius 5px - white-space nowrap - opacity 0 - transition 0.1s - pointer-events none + .tooltip + tooltip() margin-left -30px - &:hover .privateTooltip + &:hover .tooltip opacity 1 - .menuBtn + .planetSettingButton position absolute - top 12px + top 15px right 5px - font-size 1em + font-size 0.8em btnDefault() box-sizing border-box circle() - width 33px - height 33px + width 26px + height 26px text-align center cursor pointer transition 0.1s - transform scale(0.8) &:focus, &.focus outline none + .tooltip + tooltip() + margin-top 11px + margin-left -36px + &:hover .tooltip + opacity 1 + .headerControl noSelect() absolute top bottom right @@ -118,10 +113,11 @@ articleListWidth= 275px .refreshButton display block position absolute - top 12px + top 15px right 55px - width 28px - height 28px + width 26px + height 26px + font-size 0.8em btnDefault() circle() text-align center @@ -129,16 +125,28 @@ articleListWidth= 275px transition 0.1s &:focus, &.focus outline none + .tooltip + tooltip() + margin-top 11px + margin-left -39px + &:hover .tooltip + opacity 1 .logo display block position absolute top 4px right 10px cursor pointer - transition 0.1s - opacity 0.9 - &:hover, &.hover + img + transition 0.1s + opacity 0.9 + &:hover img, &:hover .tooltip opacity 1 + .tooltip + tooltip() + margin-top -5px + margin-left -67px + .PlanetNavigator absolute bottom left @@ -283,6 +291,23 @@ articleListWidth= 275px z-index 1 top 2px right 2px + .deleteButton, .editButton + btnDefault() + text-align center + width 33px + height 33px + border-radius 16.5px + font-size 15px + margin 0 3px + .tooltip + tooltip() + margin-top 10px + &:hover .tooltip + opacity 1 + .editButton .tooltip + margin-left -12px + .deleteButton .tooltip + margin-left -26px .detailBody absolute left right bottom top 105px diff --git a/browser/styles/main/containers/UserContainer.styl b/browser/styles/main/containers/UserContainer.styl index 14dcb7ea..b19832f7 100644 --- a/browser/styles/main/containers/UserContainer.styl +++ b/browser/styles/main/containers/UserContainer.styl @@ -159,22 +159,11 @@ border-color darken(brandBorderColor, 10%) background-color brandColor color white - .newPlanetTooltip - position fixed - z-index 500 - background-color transparentify(invBackgroundColor, 80%) - color invTextColor - padding 10px - line-height 1em - border-radius 5px - margin-top -23px + .tooltip + tooltip() + margin-top -22px margin-left 33px - white-space nowrap - font-size 1.1em - opacity 0 - transition 0.1s - pointer-events none - &:hover .newPlanetTooltip + &:hover .tooltip opacity 1 .UserContainer absolute top bottom right diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl index a5cb7a2a..6ce582db 100644 --- a/browser/styles/main/index.styl +++ b/browser/styles/main/index.styl @@ -16,6 +16,8 @@ body color textColor font-size fontSize font-weight 400 +button + font-family "Lato" div, span, a, button, input, textarea box-sizing border-box @@ -118,3 +120,9 @@ textarea.block-input padding 10px 15px border-radius 5px background-color backgroundColor + .tooltip + tooltip() + margin-top -22px + margin-left -97px + &:hover .tooltip + opacity 1 diff --git a/browser/styles/mixins/tooltip.styl b/browser/styles/mixins/tooltip.styl new file mode 100644 index 00000000..13baf992 --- /dev/null +++ b/browser/styles/mixins/tooltip.styl @@ -0,0 +1,13 @@ +tooltip() + position fixed + z-index popupZIndex + background-color transparentify(invBackgroundColor, 80%) + color invTextColor + padding 10px + font-size 12px + line-height 12px + border-radius 5px + white-space nowrap + opacity 0 + transition 0.1s + pointer-events none