diff --git a/src/app/app.less b/src/app/app.less index b54c3b5c..c2049e49 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -52,6 +52,16 @@ svg.icon { } } +.hover-effect-base:hover { + cursor: pointer; + + .hover-effect-target { + box-shadow: 0px 2px 2px 0 rgba(255, 255, 255, 0.1), 0px 4px 5px 0 rgba(255, 255, 255, 0.2), + 0px 0px 5px 2.5px rgba(255, 255, 255, 0.5); + transition: box-shadow 0.2s ease; + } +} + .hideScrollbarUntillHover { overflow: hidden; &:hover, diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less index 7f34016d..0c358e15 100644 --- a/src/app/workspace/screen/tabs.less +++ b/src/app/workspace/screen/tabs.less @@ -141,13 +141,15 @@ .new-screen { width: 3em; min-width: 3em; - margin-left: 1em; + padding-left: 1em; cursor: pointer; - + height: 36px; + .icon { width: 1.1em; height: 1.1em; border-radius: 50%; + margin-top: 9px; } } } diff --git a/src/app/workspace/screen/tabs.tsx b/src/app/workspace/screen/tabs.tsx index 4390c8dd..29490c97 100644 --- a/src/app/workspace/screen/tabs.tsx +++ b/src/app/workspace/screen/tabs.tsx @@ -187,8 +187,8 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> { {this.renderTab(screen, activeScreenId, index)} -
- +
+
{/**