显示出基岩系版式头像旁的下拉三角按钮（▼） 组件

这是什么？

众所周知，基岩系版式（包括玄武岩、平行）对UI做了极简化设计，隐藏了用户头像右侧的下拉菜单按钮，取而代之为靠鼠标悬停展开菜单。但这个方式在移动端有个致命的问题：因为触摸屏上没有“鼠标悬停”这一说，只有点击/按住事件，如果想点开这个菜单，你需要点一下头像，但点头像之后会先弹出用户信息框。除非点的动作够快，或者按住然后滑一下，模拟“悬停但不单击”，不然几乎没法打开。

本组件在用户头像右侧显示出了wikidot原装的三角按钮，不用再靠点头像打开菜单了。

在你的页面中插入下面这行代码以使用本组件：

[[include :area-cn-02:component:bedrock-mobile-account-options-fix]]

对于版头是暗色的版式（暗色玄武岩、平行等），可以用这个选项，让小三角显示成白色：

[[include :area-cn-02:component:bedrock-mobile-account-options-fix white=-]]]

未来可能会加入只在移动端显示的选项

---

+ 展开源代码

/* Make space for the button */
#search-top-box {
    right: 0.7rem;
}
 
#login-status span.printuser>a {
    right: 1.4rem;
    padding: 0;
    width: 28px;
}
 
#login-status>a[href*='account/messages'] {
    right: min(1.1rem, calc(var(--user-button-width) / 6) + 0.7rem);
}
 
/* Styling the button */
a#account-topbutton {
    display: inline-block;
    pointer-events: auto;
    position: absolute;
    top: 0;
    right: 0;
    height: calc(var(--base-header-height) * 0.25 + 1px);
    padding: calc(var(--base-header-height) * 0.38) 0.4rem;
    margin: 0;
    border: none;
    color: rgb(var(--basalt-overtone));
    font-size: 0.6rem;
}
 
/* Hide the original avatar hover background */
#login-status::after {
    display: none;
}
 
/* Hover background styling for the button */
a#account-topbutton::before, 
a#account-topbutton::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
a#account-topbutton::before {
    content: '';
    z-index: -1;
    background-color: rgb(var(--basalt-overtone));
    height: 0;
    transition: height var(--header-link-transition-1st);
}
 
a#account-topbutton::after {
    content: '▼';
    z-index: 2;
    color: transparent;
    background-color: rgb(254, 254, 254);
    background-clip: text;
    padding: calc(var(--base-header-height)* 0.38) 0.4rem;
    mask-image: linear-gradient(to bottom, black, black);
    mask-size: 100% 0;
    transition: mask-size var(--header-link-transition-1st);
}
 
a#account-topbutton:is(:hover, :focus-within)::before, 
a#account-topbutton:is(:hover, :focus-within)::after {
    height: 100%;
    mask-size: 100% 100%;
}

---

白色变体：

a#account-topbutton {
    color: rgb(254, 254, 254);
}
a#account-topbutton::after {
    display: none;
}