阅读:779回复:5
求助,如何把书签栏背景改成透明并缩小书签栏高度
/*隐藏书签栏*/
#PersonalToolbar{ --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */ --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */ --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ /* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */ --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */ --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */ } :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px } #PersonalToolbar:not([customizing]){ position: relative; margin-bottom: calc(-1px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)); transform: rotateX(90deg); transform-origin: top; transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important; z-index: 1; /* The following properties should allow the themes with trasparent toolbars to work */ background-color: transparent !important; background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling); /* y position will be wrong if menubar is enabled... */ --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 24px - var(--bookmark-block-padding)); background-position: top left,top left,var(--lwt-background-alignment,top left); background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y); background-image: var(--toolbar-bgimage,linear-gradient(transparent,transparent)), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important; } :root[uidensity="compact"] #PersonalToolbar{ --toolbarbutton-outer-padding: 1px !important; } #PlacesToolbarItems > .bookmark-item, #OtherBookmarks, #PersonalToolbar > #import-button{ padding-block: var(--uc-bm-padding) !important; } #nav-bar:focus-within + #PersonalToolbar{ transition-delay: 100ms !important; transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0)); } #navigator-toolbox:is(:hover,:focus-within){ border-bottom-color: transparent !important; } #navigator-toolbox:hover > #PersonalToolbar{ transition-delay: 100ms !important; transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0)); } #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar { transform: rotateX(0); } /* Uncomment to enable compatibility for multi-row_bookmarks.css */ /* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup */ /* #PersonalToolbar:not([customizing]){ min-height: 0 !important; margin-bottom: 0; height: 0; overflow-y: visible !important; z-index: 2; padding-inline: 0 !important; } #personal-bookmarks{ background: inherit; height: min-content; } #PlacesToolbarDropIndicatorHolder{ pointer-events: none !important; } |
|
1楼#
发布于:2024-10-24 13:05
就改第4行的“ --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */ ”,书签间距小了工具栏也变矮了。
透明比较麻烦,因为书签栏透明了下面还有一层导航栏,导航栏包括了标签栏地址栏之类的。所以单独把书签栏透明了没意义,就像眼睛蒙了两块布扯掉一块布还是一样。 |
|
2楼#
发布于:2024-10-24 21:12
alanfly:就改第4行的“ --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */ ”,书签间距小了工具栏也变矮了。/*书签栏自动隐藏样式<一>*/ #PersonalToolbar { display: block; z-index: 1; margin: 0 !important; } #PersonalToolbar { margin-top: 1px !important; max-height: 0 !important; min-height: 0 !important; padding: 0 !important; position: fixed !important; width: auto !important; -moz-transition: .2s ease-in !important; -moz-transition-delay: .2s !important; } #navigator-toolbox:hover>#PersonalToolbar { max-height: 20px !important; min-height: 20px !important; -moz-transition: .2s ease-out !important; -moz-transition-delay: .2s !important; } 麻烦再问下,89版本隐藏书签样式中“width: auto !important;”这个字段该如何加上去? |
|
3楼#
发布于:2024-10-24 21:13
/*书签栏自动隐藏样式<一>*/
#PersonalToolbar { display: block; z-index: 1; margin: 0 !important; } #PersonalToolbar { margin-top: 1px !important; max-height: 0 !important; min-height: 0 !important; padding: 0 !important; position: fixed !important; width: auto !important; -moz-transition: .2s ease-in !important; -moz-transition-delay: .2s !important; } #navigator-toolbox:hover>#PersonalToolbar { max-height: 20px !important; min-height: 20px !important; -moz-transition: .2s ease-out !important; -moz-transition-delay: .2s !important; } 麻烦再问下,89版隐藏书签样式里这个字段“width: auto !important;”应该怎么加上去? |
|
4楼#
发布于:2024-10-24 22:50
你是想要书签栏宽度自适应伸缩吗?
这个的话用下面的,加了16-19行。 /*隐藏书签栏*/ #PersonalToolbar{ --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */ --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */ --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ /* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */ --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */ --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */ } :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px } #PersonalToolbar:not([customizing]){ position: relative; /*长度伸缩*/ max-width: fit-content !important; /*位置居中*/ align-self: center !important; margin-bottom: calc(-1px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)); transform: rotateX(90deg); transform-origin: top; transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important; z-index: 1; /* The following properties should allow the themes with trasparent toolbars to work */ background-color: transparent !important; background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling); /* y position will be wrong if menubar is enabled... */ --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 24px - var(--bookmark-block-padding)); background-position: top left,top left,var(--lwt-background-alignment,top left); background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y); background-image: var(--toolbar-bgimage,linear-gradient(transparent,transparent)), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important; } :root[uidensity="compact"] #PersonalToolbar{ --toolbarbutton-outer-padding: 1px !important; } #PlacesToolbarItems > .bookmark-item, #OtherBookmarks, #PersonalToolbar > #import-button{ padding-block: var(--uc-bm-padding) !important; } #nav-bar:focus-within + #PersonalToolbar{ transition-delay: 100ms !important; transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0)); } #navigator-toolbox:is(:hover,:focus-within){ border-bottom-color: transparent !important; } #navigator-toolbox:hover > #PersonalToolbar{ transition-delay: 100ms !important; transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0)); } #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar { transform: rotateX(0); } /* Uncomment to enable compatibility for multi-row_bookmarks.css */ /* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup */ /* #PersonalToolbar:not([customizing]){ min-height: 0 !important; margin-bottom: 0; height: 0; overflow-y: visible !important; z-index: 2; padding-inline: 0 !important; } #personal-bookmarks{ background: inherit; height: min-content; } #PlacesToolbarDropIndicatorHolder{ pointer-events: none !important; } |
|
5楼#
发布于:2024-10-29 21:15
|
|