Bookmarks panel à la Firefox antique



  • As I have no use of the side panel I managed to disable it.
    And reduced the width of the scroll bar.
    Besides managed to set the buttons Search, + -, folder
    to opacity: 0.2 and :hover opacity: 1.0. As well as 'Sort manually'.
    Important! To make this mod work install potmeklecbohdan mod (a .js file copy in folder C:\Program Files\Vivaldi \Application\3.3.2022.45\resources\vivaldivivaldi/hooks) before:

    //file description
    
    vivaldi.jdhooks.hookClass("panels_panel", oldClass => {
        return class extends oldClass {
            constructor(...e) {
                super(...e) //pass constructor arguments to parent's constructor
    
                this.limitPanelWidth = width => {
                    const newLimit = 100
                    return Math.min(Math.max(width, newLimit), .618 * window.innerWidth) || newLimit
                }
            }
        }
    })
    

    Update:
    *Disabled area above 'Sort manually'. No searchfield (an option to toggle the searchfield would be desirable).
    *Added discrete mouseover hover effect to bookmarkstree and 'search manually'.
    *Added a discrete transient slow fade out effect on mouse leave.

    Updated. Re-inserted slightly modified Searchfield without the buttons. To disable searchfield acitivate switch at the bottom of the code.
    *aligned all centered bookmarks folders in the tree to the left.
    *added transient hover effect on searchfield.

    .button.button-toolbar.reload {
        display: none;
    }
    
    .toolbar-tabbar.sync-and-trash-container {display: none;}
    
    #switch {
        display: none !important;
    }
    
    ///right useless bookmark panel strip//
    ::-webkit-scrollbar {
        width: 10px !important;
    }
    
    .sortselector.sortselector-compact .sortselector-dropdown {
        flex: 1;
        padding: 0 0 0 12px;
        opacity: 0.1;
        transition: 5s 0s !important;
    }
    
    .sortselector.sortselector-compact .sortselector-dropdown:hover {
      opacity: 1.0 !important;
       transition: 1s 0s !important;
    }
    
    .toolbar-default:not(.no-top-padding) {
        padding-top: 3px;
    }
    
    .vivaldi-tree .tree-row .expand-icon {
        width: 0px;
        height: 11px;
        display: inline-flex;
        flex: 0 0 auto;
        margin: auto 0;
    }
    
    .toolbar-default > *:last-child, .toolbar-default > *:not(.toolbar-nowrap), .toolbar-default > .toolbar-group > *:last-child, .toolbar-default > .toolbar-nowrap > .toolbar-group:not(:last-child) > *:last-child {
        margin-right: -1px;
        margin-bottom: 2px;
    
    }
    
    .panel > header {
        padding-top: 4px !important;
        padding-left: 4px;
        padding-right: 6px;
        padding-bottom: 2px !important;
        min-height: 32px;
        flex: 0 0 auto;
        
    }
    
    .panel > header:hover {
             opacity: 1.0;
             transition: 1s 0s !important;
    }
    
    .toolbar-wrap {
           opacity: 0.1;
           transition: 5s 0s !important;
    
    }
    .toolbar-wrap:hover {
      opacity: 1.0 !important;
      transition: 1s 0s !important;
    }
    
    .panel-collapse-guard {
        max-width: unset !important;
    }
    
    
    .vivaldi-tree {
            opacity: 0.1;
            transition: 5s 0s !important;
    }
    
    .vivaldi-tree:hover {
             opacity: 1.0;
             transition: 1s 0s !important;
            
    }
    
    ---
    .panel > header {
           display: none !important;
    }
    --->
    
    

    As a collateral damage the bookmarks panel got a broader strip at the right side. How can I get rid of that strip and the clickable switch at the utmost left?

    bookmarksbarbroader.PNG

    My aim is to adjust the width of the panel to the bookmarks. No padding around just the pure panel panel-bookmarks including the scroll bar.
    Update:
    Special thanks to potmeklecbohdanpotmeklecbohdan.
    The right strip has vanished.

    vivaldiforum1.JPG
    Hover:
    vivaldiforum.JPG



  • Why not just hide it and leave it hidden? No collateral damage done.



  • @BoneTone
    Because I'm addicted to the ancient firefox.

    bookmarksfirefox.PNG



  • I'm not understanding. So you do want to use the panel, just only the bookmarks panel?



  • @BoneTone
    Exactly.



  • You gotta remove the max-width restriction from .panel-collapse-guard:

    .panel-collapse-guard {
        max-width: unset !important;
    }
    


  • @potmeklecbohdan
    Thank you very much again. I appreciate your help so much. This is the solution.
    I've added a hover effect with mouse over now so the search field is less intrusive. But it stills looks distracting and a bit clumsy.

    reduced opacity to 0.1

    boomarkspanelsolution2.PNG

    Is there a way to set all the bookmarks to a low opacity and a hover effect?



  • @maximwaldow Just a suggestion:

    .panel.panel-bookmarks > header > h1,
    .panel.panel-bookmarks > header .toolbar-nowrap {
        display: none;
    }
    

    Actions of all the three buttons are available via the context menu. If you don’t use the search at all & don’t have the strange habit of keeping things you don’t need, the selector can be just .panel.panel-bookmarks > header.

    I’ll add a reply to your low-opacity question in a moment.



  • @maximwaldow said in Side panel disabled results in Bookmarks panel broader:

    Is there a way to set all the bookmarks to a low opacity and a hover effect?

    .panel.panel-bookmarks .vivaldi-tree .tree-item:not(:hover):not([data-selected]) {
        opacity: .5;
    }
    

    I’ve added :not([data-selected]) to keep selected bookmarks fully opaque, remove that if you don’t want it.

    Oh, & I’ve noticed you usually have very general selectors (when I consider the use), such as

    • ::-webkit-scrollbar
    • .sortselector.sortselector-compact .sortselector-dropdown
    • .toolbar-wrap


  • @potmeklecbohdan

    Great.
    Just found a trick by myself. And added the hover.
    I've tried your code and could not find a difference. Have test more.

    .vivaldi-tree {
            opacity: 0.2;
    }
    .vivaldi-tree:hover {
            opacity: 1.0;
    }
    
    

    So the toolbar-wrap is the searchfield

    .toolbar-wrap {
            opacity: 0.1;
    }
    .toolbar-wrap:hover {
      opacity: 1.0 !important;
    }
    
    

    I wonder if there is a way to auto collapse the whole field above 'Sort Manually'.



  • Ah, the first sentence confused me. There are several threads about autohiding the panel, which I believe at least one of them has a working show on mouse over mod that you could grab the code from that and modify to suit your needs.



  • @potmeklecbohdan

    Now the search field is away. But sometimes I use it. So I'd like to make the field smaller.

    .panel > header {
           display: none !important;
    }
    

    boomarkspanelsolution3.PNG

    Changed Search field padding:
    Searchfield.PNG

    Added a nice transition effect. Are there other ways to realize this? Fast highlight when mouseover, last some seconds when mouseleave.

    .vivaldi-tree {
            opacity: 0.1;
            transition: 5s 0s !important;
    
    }
    .vivaldi-tree:hover {
             opacity: 1.0;
             transition: 0s 0s !important;
            
    }
    
    

    @BoneTone
    Tried some of the Autohide Panel mods today but they didn't really work for me. I like the minimalist style.



  • @potmeklecbohdan said in ...

    .panel.panel-bookmarks .vivaldi-tree .tree-item:not(:hover):not([data-selected]) {
        opacity: .5;
    }
    

    I’ve added :not([data-selected]) to keep selected bookmarks fully opaque, remove that if you don’t want it.

    Now I understand your code: The difference is that a selected single bookmark is highlighted.
    My simple code just highlights the whole tree like a christmas tree.



  • I'm not satisfied with the faded background color of the whole panelgroup left. Too dark and heavy. Is it possible to merge the picture of the main window with the bookmarks panel row?
    So which controls the backgound color? I'm not talking about themes edit background.

    Seems have to do with:

    .panel-group {
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    overflow: hidden;
    contain: strict;
    background-color: var(--colorBgLightIntense: #1295abb5);
    color: var(--colorFg);
    fill: var(--colorFg);
    }

    Changed this value with the inspector and a little window opened and the color changed, But I'd like an aero glasslike transparent look with with white text.

    Style attribute {
    background-color: rgb(33,48,42);
    }


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.