search

eoger / tabcenter-redux

Vertical Tabs extension for Firefox
Mozilla Public License 2.0
381 stars 67 forks source link

Add a drop shadow after pinned tabs if not scrolled to top. #308

Closed thomcc closed 6 years ago

thomcc commented 6 years ago

Also, fixes that there's no visible border between pinned and normal tabs in compact mode (in general, but especially when scrolled to top).

Fixes #240

eoger commented 6 years ago

Great idea! However I'm seeing a weird curving on the shadow which is most probably caused by the .tab-title-wrapper::after rule.

screen shot 2018-02-17 at 1 14 09 pm
eoger commented 6 years ago

I've been fiddling a little bit with CSS and finally found a solution that seems to work: https://github.com/eoger/tabcenter-redux/commit/c5df16f6a9fe29c5500f38799de1ab160f9df8d1. Does it cover all the edge cases you may have found when you implemented your first version?

Keith94 commented 6 years ago

Can you add a brief animation for the drop shadow? Or what code can I use?

eoger commented 6 years ago

Good suggestion, try this and tell me what you think:

#topshadow {
  transition: box-shadow 0.3s ease-in-out;
}
Keith94 commented 6 years ago

@eoger Looks good to me :+1:

eoger commented 6 years ago

We could also follow the Photon design principles and use cubic-bezier(.07,.95,0,1).

eoger commented 6 years ago

Merged in https://github.com/eoger/tabcenter-redux/commit/45558bbd933aaab7230688a76ddbd24c1eeb7894, thanks @thomcc and @Keith94 !