求助，如何把书签栏背景改成透明并缩小书签栏高度

楼主^#

更多发布于：2024-10-23 23:04

/*隐藏书签栏*/
#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;
}

喜欢0

intercfy 小狐狸 UID56418 注册日期2018-04-06 最后登录2024-10-30 发帖数5 经验7枚威望0点贡献值8点好评度0点加关注写私信	1楼^# 发布于：2024-10-29 21:15 alanfly：你是想要书签栏宽度自适应伸缩吗？这个的话用下面的，加了16-19行。 /隐藏书签栏/ #PersonalToolbar{ --uc-bm-height: 20px; /* Might need to adjust if...回到原帖谢谢
	回复(0) 喜欢(0)

alanfly

千年狐狸

UID31035
注册日期2009-11-10
最后登录2025-04-23
发帖数2783
经验595枚
威望1点
贡献值132点
好评度106点

加关注写私信

2楼^#

发布于：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 &gt; .bookmark-item,
#OtherBookmarks,
#PersonalToolbar &gt; #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 &gt; #PersonalToolbar{
  transition-delay: 100ms !important;
  transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
}
  
#navigator-toolbox:hover &gt; #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) 喜欢

intercfy

小狐狸

UID56418
注册日期2018-04-06
最后登录2024-10-30
发帖数5
经验7枚
威望0点
贡献值8点
好评度0点

加关注写私信

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;”应该怎么加上去？

回复喜欢

intercfy

小狐狸

UID56418
注册日期2018-04-06
最后登录2024-10-30
发帖数5
经验7枚
威望0点
贡献值8点
好评度0点

加关注写私信

4楼^#

发布于：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;”这个字段该如何加上去？

回复喜欢

alanfly

千年狐狸

UID31035
注册日期2009-11-10
最后登录2025-04-23
发帖数2783
经验595枚
威望1点
贡献值132点
好评度106点

加关注写私信

5楼^#

发布于：2024-10-24 13:05

就改第4行的“ --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */ ”，书签间距小了工具栏也变矮了。
透明比较麻烦，因为书签栏透明了下面还有一层导航栏，导航栏包括了标签栏地址栏之类的。所以单独把书签栏透明了没意义，就像眼睛蒙了两块布扯掉一块布还是一样。

回复(1) 喜欢

您需要登录后才可以回帖，登录或者注册

求助，如何把书签栏背景改成透明并缩小书签栏高度

最新喜欢：