Can't Access Top of Page with Top_Tab_Bar_hidden and autohide Nav_bar and Bookmark_bar #503
Comments
|
Also this is happening in Tablisis Extension , The |
|
Do you use last commit? |
My bad i missed the release . It worked . Thank you. Anyidea about this #503 (comment) |
black7375
added
Env::Windows
|
|
|
ThankYou. |
|
Is there a special advantage of rannex42/FirefoxSidebar? https://github.com/black7375/Firefox-UI-Fix/wiki/Show-Off-Your-Config#vertical-tab |
|
It's strange. It looks normally in my environment. |
finally figured it out .. tried to switch on/off options in user.js and this is what was causing the problem. |
|
Surprisingly, it occurs if the
Using |
really sorry for not replying to this, i did not receive any notification for this message, also checked my notifications of github and this was not logged there. Here are the recordings -->
firefox_ryCRM3KAdb.mp4
firefox_TFAXSbazQU.mp4
firefox_GysAHdXIWy.mp4
firefox_jfH9tPPMyG.mp4Here is the `css` provided by the FirefoxSidebar dev to put into Sideberry settings To make it look little and behave little nicer#root {
--nav-btn-height: 34.5px !Important;
--tabs-height: 38px !Important;
--tabs-spacing: 4px; */ Spacing between the tabs, be sure to change the tab height for it to look right!) */
--tabs-indent: 10px !important;
--tabs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
@media (prefers-color-scheme:light) {
#root {
--bg: #f7f6f6 !important; /* Sideberry background color (follow instruction in userChrome.css):: default: #fff */
--tabs-fg: #323232 !important; /* Font color :: default: #323232 */
--tabs-bg-hover: #dedddaff !important; /* Tab background on hover :: default: #dedddaff */
--tabs-activated-bg: transparent !important; /* Active tab :: default :: transparent */
--tabs-activated-shadow: 0px 5px 10px rgba(0,0,0,0.15); !important; /* Active tab shadow :: default: 0px 5px 10px rgba(0,0,0,0.15); */
--btn-fg: #555 !important; /* Button main color :: default: #555; */
--nav-btn-fg: var(--btn-fg) !important; /* Nav Button main color :: default: var(--btn-fg); */
--border-color: rgba(0,0,0,0.1);
}
}
@media (prefers-color-scheme:dark) {
#root {
--bg: #2b2a33 !important; /* Sideberry background color (follow instruction in userChrome.css):: default: #2b2a33 */
--tabs-fg: #fff !important; /* Font color :: default: #323232 */
--tabs-bg-hover: rgba(255,255,255,0.135) !important; /* Tab background on hover :: default: rgba(255,255,255,0.1) */
--tabs-activated-bg: var(--tabs-bg-hover) !important; /* Active tab :: default: var(--tabs-bg-hover) */
--tabs-activated-shadow: none; !important; /* Active tab shadow :: default: none */
--btn-fg: #fff !important; /* Button main color :: default: #fff; */
--nav-btn-fg: var(--btn-fg) !important; /* Nav Button main color :: default: var(--btn-fg); */
--border-color: rgba(0,0,0,0.15);
}
/* These exist for the bookmarks panel, not changed for light schemes */
#root {
--bookmarks-folder-expanded-fg: #fff !important;
--bookmarks-node-title-fg: #fff !important;
--favicons-placeholder-bg: #fff !important;
--bookmarks-folder-closed-fg: #fff !important;
--bookmarks-folder-expanded-fg-hover: #ccc !important;
--bookmarks-node-title-fg-hover: #ccc !important;
--favicons-placeholder-bg-hover: #ccc !important;
--bookmarks-folder-closed-fg-hover: #ccc !important;
}
}
@media screen and (max-width: 60px) {
#root {
--tabs-indent: unset !important;
}
.container {
max-width: 60px;
}
.Tab .audio {
margin-left: -15px;
transform: scale(.80);
z-index: 99 !important;
}
.Tab[data-lvl] , .PinnedTab[data-lvl] {
max-width: 30px;
float: left;
}
.container {
margin: 0px !important;
max-width: 50px;
}
.Tab[data-lvl] , .PinnedTab[data-lvl] {
max-width: 30px;
float: left;
}
.panel-btn[data-active="true"] {
display: ;
display: flex !important;
position: absolute !important;
background: none !important;
}
.panel-btn {
display: none !important;
}
.Sidebar .settings-btn {
display: none;
}
.container::after {
margin-left: 16px;
}
}
.Sidebar .panel-box {
border-bottom: 2px solid var(--border-color) !important;
}
.Sidebar {
font-family: var(--tabs-font);
}
.container {
padding-top: 2.5px !important;
margin: 0 auto !important;
max-width: calc(100% - 20px);
}
.NavigationBar {
padding-left: 8px;
}
.Sidebar .settings-btn {
}
/* Reset default styles */
.Tab[data-active], .Tab:hover, .PinnedTab[data-active], .PinnedTab:hover {
background-color: transparent;
box-shadow: none !Important;
}
.Tab[data-active] .lvl-wrapper:after, .PinnedTab[data-active] {
background-color: var(--tabs-activated-bg);
}
/* Style for Tabs and Pinned Tabs */
.Tab .lvl-wrapper:after, .PinnedTab {
border-radius: 5px;
border: 1px solid transparent !important;
border-radius: 5px;
text-align: left;
transition: width 0.1s !Important;
}
/* Background layer for tabs */
.Tab .lvl-wrapper:after {
content: '';
position: absolute;
top: 0px;
left: 2px;
margin: var(--tabs-spacing) 0;
width: calc(100% - 4px);
height: calc(100% - calc(var(--tabs-spacing) * 2));
z-index: -1;
}
/* Style for pinned tabs */
.PinnedTab {
height: calc(var(--tabs-height) - calc(var(--tabs-spacing) * 2)) !important;
margin: var(--tabs-spacing) 10px;
}
.Tab {
border-radius: 5px;
}
.Tab[data-active] .lvl-wrapper:after, .PinnedTab[data-active] {
box-shadow: var(--tabs-activated-shadow) !important;
}
.Tab:hover .lvl-wrapper:after, .PinnedTab:hover {
background: var(--tabs-bg-hover);
}
.Tab[data-active]:hover .lvl-wrapper:after {
box-shadow: none !Important;
}
/* Favicon Settings */
.Tab .fav, .PinnedTab .fav {
position: relative;
width: 18px;
height: 18px;
flex-shrink: 0;
margin: 0 6px 0 7px;
opacity: 1 !important;
}
.Tab .placeholder > svg {
width: 18px;
height: 18px;
fill: var(--btn-fg);
;}
.PinnedTab .fav {
margin-left: 4px;
}
.Tab:hover .fav, .PinnedTab:hover fav {
opacity: 1 !important;
}
.Tab .placeholder, .PinnedTab . placeholder {
}
/* Internal Tab Settings */
.Tab .t-box, .PinnedTab .title {
mask: linear-gradient(-90deg,transparent,#000 25px,#000);
/*! display: none; */
}
.Tab .t-box .title, .PinnedTab .title {
padding-left: 4px;
font-family: var(--tabs-font) !important;
color: var(--tabs-fg);
}
/* Tab Close and Context Buttons */
.Tab .close {
fill: var(--btn-fg);
}
.Tab .close > svg {
fill: var(--btn-fg);
background: none;
opacity: 1;
height: 18px !important;
width: 18px !important;
}
.Tab .close > svg:hover {
background: rgba(0,0,0,0.075);
border-radius: 4px;
}
.PinnedTab .close {
display: none !important;
}
.Tab .ctx,
.PinnedTab .ctx {
top: 4px;
right: auto;
left: -11px;
width: 4px;
height: calc(100% - 5px);
}
.Sidebar {
margin-top: -2.5px;
}
.PinnedDock {
padding-top: 2.5px !important;
padding-bottom: 0 !important;
margin-bottom: -2.5px;
}
.PinnedDock::after {
display: none !important;
}
.Sidebar .panel-btn > svg, .Sidebar .panel-btn > img, .HiddenPanelsBar .hidden-panel > img, .HiddenPanelsBar .hidden-panel > svg {
fill: var(--nav-btn-fg) !important;
}
.Sidebar .panel-btn .len {
top: 6px !important;
}
.audio {
position: absolute;
margin-left: -14px;
margin-top: 7px;
z-index: 10;
}
.audio svg {
padding: 3px;
height: 14px !important;
width: 14px !important;
background: #fff;
border-radius: 50%;
box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
}
.Tab[data-audible] .t-box, .Tab[data-muted] .t-box {
transform: none !important;
}If you can add inbuilt support for Sideberry , It will be awesome. I like the sliding animation provided by leptop for sidebars. ( Should i create a new issue for sideberry support ?) Optional Additional Request --> it would be cool that if sidebar can adapt or merge ( color/apearance/effects) in some way with the wallpaper on the right side. |
i Don't know |
Describe the bug
A little bit area of Top is not accessible. i have some buttons on Top there and when my mouse goes there, Nav_bar Opens up.
Expected behavior
Able to access Top portion of Screen with autohide feature enabled.
Screenshots
Environment:
user.jssetupAdditional context
I am using these things alongside -- >
The text was updated successfully, but these errors were encountered: