first pass at increasing new-screen click target

This commit is contained in:
sawka 2023-10-13 16:40:34 -07:00
parent bde909d43c
commit e561a8b280
3 changed files with 16 additions and 4 deletions

View File

@ -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,

View File

@ -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;
}
}
}

View File

@ -187,8 +187,8 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
<For each="screen" index="index" of={showingScreens}>
{this.renderTab(screen, activeScreenId, index)}
</For>
<div key="new-screen" className="new-screen" onClick={this.handleNewScreen}>
<AddIcon className="icon hoverEffect" />
<div key="new-screen" className="new-screen hover-effect-base" onClick={this.handleNewScreen}>
<AddIcon className="icon hover-effect-target" />
</div>
</div>
{/**<div className="cmd-hints">