/* BHL Style Search Top Box And User Account */
/* By Mercuresphere */
/* Based on BHL Theme */
:root, :root:lang(cn) {
--merc-light-color: var(--swatch-menutxt-light-color);
--merc-dark-color: var(--swatch-menubg-dark-color);
--user-account-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/user-circle.svg");
--search-top-box-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/search-top-box-mask.svg");
}
/* ===用户和搜索栏=== */
@media only screen and (max-width: 768px) {
#login-status {
right: unset;
font-size: unset;
}
#navi-bar, #navi-bar-shadow, #search-top-box-input {
display: unset;
}
#search-top-box-input {
min-width: unset;
}
#search-top-box {
top: unset;
right: unset;
height: unset;
}
#search-top-box:focus-within {
box-shadow: unset;
background: unset;
padding: unset;
}
#search-top-box:not(:focus-within):before {
-webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
-webkit-mask-position: center center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-image: var(--search-top-box-mask);
z-index: 14;
background-color: rgb(var(--merc-light-color));
color: rgb(var(--merc-dark-color));
text-align: center;
cursor: pointer;
mask-image: var(--search-top-box-mask);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
pointer-events: none;
position: absolute;
top: 0;
right: 0;
width: calc(0.9375rem * 1.8);
height: 100%;
content: " ";
}
#search-top-box form[id=search-top-box-form] {
visibility: unset;
height: unset;
}
#search-top-box form[id=search-top-box-form]:focus-within {
visibility: unset;
}
#search-top-box form[id=search-top-box-form] input {
-webkit-appearance: unset;
-moz-appearance: unset;
position: unset;
top: unset;
transform: unset;
appearance: unset;
height: unset;
}
#search-top-box form[id=search-top-box-form] input[type=text] {
visibility: unset;
transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1);
}
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
position: unset;
right: unset;
transform: unset;
cursor: unset;
border-width: unset;
width: unset;
height: unset;
color: unset;
}
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover {
background-color: unset;
}
#search-top-box form[id=search-top-box-form] input[type=submit] {
background: none;
transition: unset;
}
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] {
opacity: unset;
margin: unset;
padding: unset;
width: unset;
}
#header h1 a {
z-index: unset;
}
}
@media only screen and (max-width: 56.25rem) {
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
background-color: rgba(0, 0, 0, 0);
}
}
@media (min-width: 36rem) {
#login-status {
flex-grow: unset;
left: unset;
right: unset;
}
#login-status:not(:hover):not(:focus-within) {
visibility: hidden;
}
#login-status::before {
visibility: visible;
}
}
#search-top-box-input {
min-width: unset;
display: inline-block;
}
#search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
color: transparent;
}
#search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
border: none;
text-shadow: none;
}
#search-top-box-form input[type=submit], #search-top-box-input:focus, #search-top-box-input:hover {
border: none;
}
#search-top-box {
display: flex;
z-index: 12;
position: absolute;
top: 1.5em;
right: calc(3% - .25em);
align-items: center;
justify-content: center;
width: auto;
height: calc(0.9375rem * 1.8);
transform: translateY(-50%);
font-size: calc(0.9375rem * .86667);
}
#search-top-box, #search-top-box * {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1);
will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width;
}
#search-top-box:focus-within, #search-top-box:focus-within *, #search-top-box:focus-within :after, #search-top-box:focus-within :before {
margin: 0;
padding: 0;
transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1), max-width .3s cubic-bezier(.4, 0, .2, 1);
will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width;
}
#search-top-box:focus-within {
background: rgba(var(--merc-dark-color), .7);
box-shadow: calc(calc(0.9375rem * 1.8) / 2 * -1) 0 calc(calc(0.9375rem * 1.8) / 2) rgba(var(--merc-dark-color));
}
#search-top-box:after, #search-top-box:before {
position: absolute;
top: 0;
right: 0;
width: calc(0.9375rem * 1.8);
height: 100%;
content: " ";
}
#search-top-box:before {
-webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
-webkit-mask-position: center center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-image: var(--search-top-box-mask);
z-index: 14;
background-color: rgb(var(--merc-light-color));
color: rgb(var(--merc-dark-color));
text-align: center;
cursor: pointer;
mask-image: var(--search-top-box-mask);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
pointer-events: none;
}
#search-top-box:not(:focus-within):hover:before {
background-color: rgb(var(--merc-light-color));
}
#search-top-box:after {
--clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-clip-path: var(--clip-path);
z-index: 13;
clip-path: var(--clip-path);
pointer-events: none;
background-color: transparent;
}
#search-top-box:not(:focus-within):after {
--clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
background-color: rgb(var(--merc-light-color), 0);
}
#search-top-box form[id=search-top-box-form] {
display: flex;
visibility: visible;
position: relative;
right: 0;
max-width: 100%;
height: calc(0.9375rem * 1.8);
}
#search-top-box form[id=search-top-box-form]:not(:focus-within) {
max-width: calc(0.9375rem * 15);
}
#search-top-box form[id=search-top-box-form] input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
top: 0;
}
#search-top-box form[id=search-top-box-form] input[type=text] {
z-index: 13;
position: absolute;
right: 0;
width: calc(0.9375rem * 15);
max-width: calc(0.9375rem * 15);
height: 100%;
padding: 0 calc(0.9375rem * 1.8) 0 1em;
outline: 0 solid rgb(var(--merc-light-color));
background-color: rgb(var(--merc-dark-color), .7);
box-shadow: 0 0 0 .125rem rgb(var(--merc-light-color));
color: rgba(var(--merc-light-color));
}
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
max-width: calc(0.9375rem * 1.8);
padding: 0;
outline-width: 0;
background-color: rgba(var(--merc-dark-color), 0);
box-shadow: 0 0 0 0 rgb(var(--merc-light-color));
color: rgba(0, 0, 0, 0);
cursor: pointer;
}
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover {
background-color: rgba(var(--merc-dark-color), 1);
}
#search-top-box form[id=search-top-box-form] input[type=submit] {
visibility: visible;
z-index: 14;
position: absolute;
right: 0;
width: calc(0.9375rem * 1.8);
height: calc(0.9375rem * 1.8);
outline: 0 solid rgb(var(--merc-light-color));
background-color: transparent;
box-shadow: 0 0 0 .125rem rgb(var(--merc-light-color));
color: t;
font-size: calc(0.9375rem * .86667);
cursor: pointer;
pointer-events: all;
}
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] {
box-shadow: 0 0 0 0 rgb(var(--merc-light-color));
pointer-events: none;
}
#login-status {
--wght: var(--ui-wght);
display: flex;
z-index: 11;
position: absolute;
top: 1.5em;
right: calc(3% + calc(0.9375rem * 1.8) - .25em);
align-items: center;
justify-content: center;
height: 2em;
margin: 0 0 0 .5em;
transform: translateY(-50%);
color: rgb(var(--merc-light-color));
font-weight: var(--wght);
font-size: 1em;
font-family: var(--UI-font);
white-space: nowrap;
transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
}
#search-top-box:focus-within ~ #login-status {
opacity: 0;
}
#login-status span.printuser a:first-of-type {
width: 1.75em;
}
#login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in {
margin: 0 1em;
background-color: rgb(var(--pale-gray-monochrome));
color: rgb(var(--merc-dark-color));
padding: 0.1em 1em;
text-decoration: none;
}
#login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:focus-within, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:focus-within {
background-color: rgba(var(--merc-light-color), 1);
color: rgb(var(--merc-dark-color));
text-decoration: none;
}
#login-status span.printuser {
--wght: var(--ui-wght);
margin-right: .5em;
color: rgb(var(--merc-light-color));
font-weight: var(--wght);
}
#login-status a#my-account, #login-status a[href*="account/messages"] {
color: rgb(var(--merc-light-color));
}
#login-status a#my-account {
--wght: var(--ui-wght);
-webkit-text-decoration: underline rgb(var(--merc-dark-color)) .125em;
display: flex;
align-items: center;
padding: 0 .5em;
background-color: initial;
box-shadow: inset 0 0 0 0 rgb(var(--merc-dark-color));
font-weight: var(--wght);
text-decoration: underline rgb(var(--merc-dark-color)) .125em;
transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1);
}
#login-status a#my-account:active, #login-status a#my-account:hover {
--wght: var(--ui-hvr-wght);
-webkit-text-decoration: underline rgb(var(--merc-dark-color)) 0;
box-shadow: inset 0 -2em 0 0 rgb(var(--merc-dark-color));
color: rgb(var(--merc-light-color));
font-weight: var(--wght);
text-decoration: underline rgb(var(--merc-dark-color)) 0;
}
#login-status a#my-account:focus-within {
--wght: var(--ui-hvr-wght);
-webkit-text-decoration: underline rgb(var(--merc-dark-color)) 0;
box-shadow: inset 0 -2em 0 0 rgb(var(--merc-dark-color));
color: rgb(var(--merc-light-color));
font-weight: var(--wght);
text-decoration: underline rgb(var(--merc-dark-color)) 0;
}
#login-status #account-topbutton {
--clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
-webkit-clip-path: var(--clip-path);
position: relative;
width: var(--account-height);
height: var(--account-height);
margin: 0;
padding: 0;
background-color: rgb(var(--merc-light-color));
color: transparent;
clip-path: var(--clip-path);
transition: -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1);
transition: clip-path .1s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1);
}
#login-status #account-options {
display: block !important;
z-index: 12;
position: absolute;
top: 1.5rem;
right: 0;
width: 10em;
margin: .25em 0 0;
padding: 0;
overflow: hidden;
background-image: var(--gradient-header);
background-color: rgb(var(--merc-dark-color));
opacity: 0;
pointer-events: none;
transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}
#login-status #account-options:focus-within, #login-status #account-topbutton:active + #account-options, #login-status #account-topbutton:focus + #account-options {
opacity: 1;
pointer-events: all;
}
@media (pointer: coarse) {
#login-status #account-options:hover, #login-status #account-topbutton:hover + #account-options {
opacity: 1;
pointer-events: all;
}
}
#login-status #account-options * {
margin: 0;
padding: 0;
}
#login-status #account-options ul {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 2em;
flex-grow: 1;
align-items: center;
justify-content: center;
font-size: .85em;
}
#login-status #account-options ul li {
position: relative;
}
#login-status #account-options ul li, #login-status #account-options ul li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#login-status #account-options a {
--box-shadow: rgba(var(--merc-dark-color));
--wght: var(--ui-wght);
position: relative;
flex-grow: 1;
height: 100%;
max-height: 2em;
padding: 0 .25em;
box-shadow: inset 0 0 0 .0625rem var(--merc-dark-color);
font-weight: var(--wght);
transition: color .15s cubic-bezier(.4, 0, .2, 1), font-weight .15s cubic-bezier(.4, 0, .2, 1), font-variation-settings .15s cubic-bezier(.4, 0, .2, 1);
}
#login-status #account-options li > a, #login-status #account-options li > a:visited {
color: rgb(var(--merc-light-color));
}
#login-status #account-options li > a:active, #login-status #account-options li > a:hover {
--wght: var(--ui-hvr-wght);
color: rgb(var(--merc-dark-color));
font-weight: var(--wght);
text-decoration: none;
}
#login-status #account-options li > a:focus-within {
--wght: var(--ui-hvr-wght);
color: rgb(var(--merc-dark-color));
font-weight: var(--wght);
text-decoration: none;
}
#login-status #account-options li > a[href*="/messages"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100%;
font-size: 0;
}
#login-status #account-options li > a[href*="/messages"]:after {
position: absolute;
left: 50%;
transform: translateX(-50%);
content: "信息";
font-size: calc(0.9375rem * .765);
pointer-events: none;
}
#login-status #account-options li > a:before {
--clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
-webkit-clip-path: var(--clip-path);
z-index: -1;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(var(--merc-light-color));
content: " ";
clip-path: var(--clip-path);
pointer-events: none;
transition: -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
transition: clip-path .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
}
#login-status #account-options li > a:active:before, #login-status #account-options li > a:hover:before {
--clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}
#login-status #account-options li > a:focus-within:before {
--clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}
/* ===默认收起用户信息栏和搜索栏=== */
#search-top-box {
top: 23px;
right: calc(3%);
}
#login-status {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
top: 24px;
right: calc(3% + calc(0.9375rem * 1.8) + .25em);
color: transparent;
pointer-events: none;
transition: color .2s cubic-bezier(.4, 0, .2, 1);
user-select: none;
}
@media only screen and (min-width: 980px) {
#search-top-box {
right: calc(3% + (-100vw + var(--header-width-on-desktop, 61.25rem)) / 2);
}
#login-status {
right: calc(3% + calc(0.9375rem * 1.8) + .25em + (-100vw + var(--header-width-on-desktop, 61.25rem)) / 2);
}
}
#login-status:active, #login-status:hover {
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
color: rgb(var(--merc-light-color));
pointer-events: all;
user-select: auto;
}
#login-status:focus-within {
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
color: rgb(var(--merc-light-color));
pointer-events: all;
user-select: auto;
}
#login-status:active #account-options, #login-status:hover #account-options {
pointer-events: all;
}
#login-status:focus-within #account-options {
pointer-events: all;
}
#login-status > :not(#account-topbutton):not([href*="account/messages"]) {
--clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-webkit-clip-path: var(--clip-path);
clip-path: var(--clip-path);
opacity: 0;
transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), clip-path .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
}
#login-status:active > :not(#account-topbutton):not([href*="account/messages"]), #login-status:hover > :not(#account-topbutton):not([href*="account/messages"]) {
--clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-clip-path: var(--clip-path);
clip-path: var(--clip-path);
opacity: 1;
}
#login-status:focus-within > :not(#account-topbutton):not([href*="account/messages"]) {
--clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-clip-path: var(--clip-path);
clip-path: var(--clip-path);
opacity: 1;
}
#login-status #account-topbutton {
margin-left: 0;
background-color: initial;
pointer-events: all;
transition: clip-path .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .15s cubic-bezier(.4, 0, .2, 1);
}
#login-status:hover #account-topbutton {
background-color: rgb(var(--merc-light-color));
}
#login-status:before {
-webkit-mask-image: var(--user-account-mask);
-webkit-mask-size: calc(calc(0.9375rem * 1.8) - .5em);
-webkit-mask-position: center right;
-webkit-mask-repeat: no-repeat;
z-index: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--merc-light-color), 1);
content: "";
cursor: pointer;
mask-image: var(--user-account-mask);
mask-position: center right;
mask-repeat: no-repeat;
mask-size: calc(calc(0.9375rem * 1.8) - .5em);
pointer-events: all;
transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
#login-status:hover:before {
background-color: rgba(var(--search-icon-hover-color), 1);
}
#login-status:active:after, #login-status:active:before, #login-status:hover:after, #login-status:hover:before {
background-color: rgba(var(--search-icon-hover-bg-color), 0);
cursor: auto;
pointer-events: none;
}
#login-status:focus-within:after, #login-status:focus-within:before {
background-color: rgba(var(--search-icon-hover-bg-color), 0);
cursor: auto;
pointer-events: none;
}
#login-status #account-topbutton {
--clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-webkit-clip-path: var(--clip-path);
background-color: rgba(var(--merc-light-color), 0);
clip-path: var(--clip-path);
}
#login-status:active #account-topbutton, #login-status:hover #account-topbutton {
--clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
-webkit-clip-path: var(--clip-path);
background-color: rgb(var(--merc-light-color));
clip-path: var(--clip-path);
}
#login-status:focus-within #account-topbutton {
--clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
-webkit-clip-path: var(--clip-path);
background-color: rgb(var(--merc-light-color));
clip-path: var(--clip-path);
}
#login-status #account-options {
margin: 0;
}
#login-status a[href*="account/messages"] {
color: rgb(var(--merc-light-color));
pointer-events: all;
}
#account-topbutton {
border: none;
}
#account-options {
border: none;
}
