... | @@ -479,6 +479,12 @@ Install the [Tab Count in Window Title](https://addons.mozilla.org/addon/tab-cou |
... | @@ -479,6 +479,12 @@ Install the [Tab Count in Window Title](https://addons.mozilla.org/addon/tab-cou |
|
|
|
|
|
## Floating auto-shrinking sidebar [#103](https://github.com/eoger/tabcenter-redux/issues/103) ([video preview](https://youtu.be/Y_rTY8tTAO8))
|
|
## Floating auto-shrinking sidebar [#103](https://github.com/eoger/tabcenter-redux/issues/103) ([video preview](https://youtu.be/Y_rTY8tTAO8))
|
|
|
|
|
|
|
|
**Warning: this CSS may stop working correctly with major Firefox updates.**
|
|
|
|
|
|
|
|
If you’re using Firefox >= 72, you can’t have a floating sidebar (until somebody figures a trick to do it).
|
|
|
|
|
|
|
|
As a workaround, you can remove the `display: block;` instruction at the beginning, but then the sidebar doesn’t float above the webpage anymore, it pushes or pulls the webpage side when it grows or shrinks. It is also advised to remove the animation by removing the `transition: […]` line, to avoid the slowness of recomputing the page’s layout at each frame of the animation.
|
|
|
|
|
|
Please consider:
|
|
Please consider:
|
|
|
|
|
|
- [hiding the sidebar header](#hide-sidebar-header)
|
|
- [hiding the sidebar header](#hide-sidebar-header)
|
... | @@ -489,6 +495,7 @@ Please consider: |
... | @@ -489,6 +495,7 @@ Please consider: |
|
|
|
|
|
```css
|
|
```css
|
|
#sidebar-box {
|
|
#sidebar-box {
|
|
|
|
display: block;
|
|
position: fixed;
|
|
position: fixed;
|
|
min-width: 4vw;
|
|
min-width: 4vw;
|
|
max-width: 4vw;
|
|
max-width: 4vw;
|
... | @@ -518,18 +525,18 @@ Please consider: |
... | @@ -518,18 +525,18 @@ Please consider: |
|
* Tab bar | 33px | 29px | 41px
|
|
* Tab bar | 33px | 29px | 41px
|
|
* Toolbar | 40px | 32px | 40px
|
|
* Toolbar | 40px | 32px | 40px
|
|
* Bookmarks bar | 23px | 21px | 27px
|
|
* Bookmarks bar | 23px | 21px | 27px
|
|
* Sidebar header | 31px | 31px | 31px
|
|
* Sidebar header | 47px | 47px | 47px
|
|
*
|
|
*
|
|
* Ex: in compact mode:
|
|
* Ex: in compact mode:
|
|
* - menu bar, tab bar and sidebar header hidden (0px)
|
|
* - menu bar, tab bar and sidebar header hidden (0px)
|
|
* - nav bar (32px) + bookmarks bar (21px) = 53px
|
|
* - nav bar (32px) + bookmarks bar (21px) = 53px
|
|
*/
|
|
*/
|
|
#sidebar {
|
|
#sidebar {
|
|
height: calc(100vh - 53px);
|
|
height: calc(100vh - 120px);
|
|
}
|
|
}
|
|
|
|
|
|
#sidebar-box:not([hidden]) ~ #appcontent {
|
|
#sidebar-box:not([hidden]) ~ #appcontent {
|
|
margin-left: 4vw;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
|
|
#main-window[inFullscreen][inDOMFullscreen] #appcontent {
|
|
#main-window[inFullscreen][inDOMFullscreen] #appcontent {
|
... | | ... | |