body { font-family: "Consolas", "SimSun", /* Windows */ "STSongti-SC", /* macOS */ "Songti SC", /* macOS新版本 */ "宋体", /* 中文环境备用 */ "Noto Serif CJK SC", /* Android备选 */ serif !important; /* 强制覆盖 */ color: #222; line-height: 1.5; margin: auto; max-width: 750px; height: 100%; } time { margin: 0; line-height: 1px; } .post-content h1::before { content: "# "; } .post-content h2::before { content: "## "; } .post-content h3::before { content: "### "; } .post-content h4::before { content: "#### "; } .post-content h5::before { content: "##### "; } .post-content h6::before { content: "###### "; } .simplified-pagination nav ul { display: flex; list-style: none; padding: 0; margin: 0; } .simplified-pagination a, .simplified-pagination span { display: block; text-decoration: none; min-width: 40px; text-align: center; } .simplified-pagination .current-page span { font-weight: bold; } header { border-bottom: #d3d3d3 1px solid; border-width: 0.1px; } @media screen and (max-width: 750px) { body { padding-left: 10px; padding-right: 10px; } } blockquote { margin: 0; max-width: 100%; border-left: 5px#000 solid; } blockquote p { padding-left: 10px; } nav { text-align: right; margin-bottom: 0px; } nav a { color: #333; } img { max-width: 100%; } .not-by-ai { margin-top: 5px; width: 15%; } .footer-a-link { color: #222; } .footer-a-link:hover { color: #0732a5; } .title { margin-top: 0; line-height: 20px; } h1.title { padding-top: 30px; } .subtitle { line-height: 0px; } .menu-item { display: inline; margin-right: 4px; } .rel-permalink .post-date { padding-right: 5px; display: inline; } hr { color: #d3d3d3; } pre { padding: 5px 10px 5px 15px; } code { background-color: #f8f8f8; } pre, code { font-family: "Consolas", "SF Mono", "DejaVu Sans Mono", "Liberation Mono"; overflow-y: auto; /* 垂直溢出时显示滚动条 */ } .post-title { font-size: 17px; margin-bottom: 3px; } .rel-permalink { color: #333333; } .label { margin-right: 3px; } ._ { margin: 0; padding: 0; } .post-title strong { font-weight: 410; } header { margin-bottom: 1rem; } footer p{ margin: 0; line-height: 20px; } a { color: #2c2cff; text-decoration: none; } :root { --waline-font-size: 1rem; --waline-white: #fff; --waline-light-grey: #999; --waline-dark-grey: #666; --waline-theme-color: #222; --waline-active-color: #222; --waline-color: #444; --waline-bg-color: #fff; --waline-bg-color-light: #f8f8f8; --waline-bg-color-hover: #f0f0f0; --waline-border-color: #ddd; --waline-disable-bg-color: #f8f8f8; --waline-disable-color: #000; --waline-code-bg-color: #282c34; --waline-bq-color: #f0f0f0; --waline-avatar-size: 3.25rem; --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13); --waline-badge-color: #3498db; --waline-badge-font-size: 0.75em; --waline-info-bg-color: #f8f8f8; --waline-info-color: #999; --waline-info-font-size: 0.625em; --waline-border: 1px solid var(--waline-border-color); --waline-avatar-radius: 50%; --waline-box-shadow: none } [data-waline] { font-size: var(--waline-font-size); text-align: start } [dir=rtl] [data-waline] { direction: rtl } [data-waline] * { box-sizing: content-box; line-height: 1.75 } [data-waline] p { color: var(--waline-color) } [data-waline] a { position: relative; display: inline-block; color: var(--waline-theme-color); text-decoration: none; word-break: break-word; cursor: pointer } [data-waline] a:hover { color: var(--waline-active-color) } [data-waline] img { max-width: 100%; max-height: 400px; border: none } [data-waline] hr { margin: .825em 0; border-style: dashed; border-color: var(--waline-bg-color-light) } [data-waline] code, [data-waline] pre { margin: 0; padding: .2em .4em; border-radius: 3px; background: var(--waline-bg-color-light); font-size: 85% } [data-waline] pre { overflow: auto; padding: 10px; line-height: 1.45 } [data-waline] pre::-webkit-scrollbar { width: 6px; height: 6px } [data-waline] pre::-webkit-scrollbar-track-piece:horizontal { border-radius: 6px; background: rgba(0, 0, 0, .1) } [data-waline] pre::-webkit-scrollbar-thumb:horizontal { width: 6px; border-radius: 6px; background: var(--waline-theme-color) } [data-waline] pre code { padding: 0; background: rgba(0, 0, 0, 0); color: var(--waline-color); white-space: pre-wrap; word-break: keep-all } [data-waline] blockquote { margin: .5em 0; padding: .5em 0 .5em 1em; border-inline-start: 8px solid var(--waline-bq-color); color: var(--waline-dark-grey) } [data-waline] blockquote>p { margin: 0 } [data-waline] ol, [data-waline] ul { margin-inline-start: 1.25em; padding: 0 } [data-waline] input[type=checkbox], [data-waline] input[type=radio] { display: inline-block; vertical-align: middle; margin-top: -2px } .wl-btn { display: inline-block; vertical-align: middle; min-width: 2.5em; margin-bottom: 0; padding: .5em 1em; border: 1px solid var(--waline-border-color); border-radius: .5em; background: rgba(0, 0, 0, 0); color: var(--waline-color); font-weight: 400; font-size: .75em; line-height: 1.5; text-align: center; white-space: nowrap; cursor: pointer; user-select: none; touch-action: manipulation; transition-duration: .4s } .wl-btn:hover, .wl-btn:active { border-color: var(--waline-theme-color); color: var(--waline-theme-color) } .wl-btn:disabled { border-color: var(--waline-border-color); background: var(--waline-disable-bg-color); color: var(--waline-disable-color); cursor: not-allowed } .wl-btn.primary { border-color: var(--waline-theme-color); background: var(--waline-theme-color); color: var(--waline-white) } .wl-btn.primary:hover, .wl-btn.primary:active { border-color: var(--waline-active-color); background: var(--waline-active-color); color: var(--waline-white) } .wl-btn.primary:disabled { border-color: var(--waline-border-color); background: var(--waline-disable-bg-color); color: var(--waline-disable-color); cursor: not-allowed } .wl-loading { text-align: center } .wl-loading svg { margin: 0 auto } .wl-comment { position: relative; display: flex; margin-bottom: .75em } .wl-close { position: absolute; inset-inline-end: -4px; top: -4px; padding: 0; border: none; background: rgba(0, 0, 0, 0); line-height: 1; cursor: pointer } .wl-login-info { max-width: 80px; margin-top: .75em; text-align: center } .wl-logout-btn { position: absolute; inset-inline-end: -10px; top: -10px; padding: 3px; border: none; background: rgba(0, 0, 0, 0); line-height: 0; cursor: pointer } .wl-avatar { position: relative; width: var(--waline-avatar-size); height: var(--waline-avatar-size); margin: 0 auto; border: var(--waline-border); border-radius: var(--waline-avatar-radius) } @media(max-width: 720px) { .wl-avatar { width: var(--waline-m-avatar-size); height: var(--waline-m-avatar-size) } } .wl-avatar img { width: 100%; height: 100%; border-radius: var(--waline-avatar-radius) } .wl-login-nick { display: block; color: var(--waline-theme-color); font-size: .75em; word-break: break-all } .wl-panel { position: relative; flex-shrink: 1; width: 100%; margin: .5em; border: #000 1px solid; background: var(--waline-bg-color); box-shadow: var(--waline-box-shadow) } .wl-header { display: flex; overflow: hidden; padding: 0 4px; border-bottom: 2px dashed var(--waline-border-color); border-top-left-radius: .75em; border-top-right-radius: .75em } @media(max-width: 580px) { .wl-header { display: block } } .wl-header label { min-width: 40px; padding: .75em .5em; color: var(--waline-color); font-size: .75em; text-align: center } .wl-header input { flex: 1; resize: none; width: 0; padding: .5em; background: rgba(0, 0, 0, 0); font-size: .625em } .wl-header-item { display: flex; flex: 1 } @media(max-width: 580px) { .wl-header-item:not(:last-child) { border-bottom: 2px dashed var(--waline-border-color) } } .wl-header-1 .wl-header-item { width: 100% } .wl-header-2 .wl-header-item { width: 50% } @media(max-width: 580px) { .wl-header-2 .wl-header-item { flex: 0; width: 100% } } .wl-header-3 .wl-header-item { width: 33.33% } @media(max-width: 580px) { .wl-header-3 .wl-header-item { width: 100% } } .wl-editor { position: relative; resize: vertical; box-sizing: border-box; width: calc(100% - 1em); min-height: 8.75em; margin: .75em .5em; border-radius: .5em; background: rgba(0, 0, 0, 0); font-size: .875em } .wl-editor, .wl-input { max-width: 100%; border: none; color: var(--waline-color); outline: none; transition: all .25s ease } .wl-editor:focus, .wl-input:focus { background: var(--waline-bg-color-light) } .wl-preview { padding: 0 .5em .5em } .wl-preview h4 { margin: .25em; font-weight: bold; font-size: .9375em } .wl-preview .wl-content { min-height: 1.25em; padding: .25em; word-break: break-word; hyphens: auto } .wl-preview .wl-content>*:first-child { margin-top: 0 } .wl-preview .wl-content>*:last-child { margin-bottom: 0 } .wl-footer { position: relative; display: flex; flex-wrap: wrap; margin: .5em .75em } .wl-actions { display: flex; flex: 2; align-items: center } .wl-action { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin: 2px; padding: 0; border: none; background: rgba(0, 0, 0, 0); color: var(--waline-color); font-size: 16px; cursor: pointer } .wl-action:hover { color: var(--waline-theme-color) } .wl-action.active { color: var(--waline-active-color) } #wl-image-upload { display: none } #wl-image-upload:focus+label { color: var(--waline-color) } #wl-image-upload:focus-visible+label { outline: -webkit-focus-ring-color auto 1px } .wl-info { display: flex; flex: 3; align-items: center; justify-content: flex-end } .wl-info .wl-text-number { color: var(--waline-info-color); font-size: .75em } .wl-info .wl-text-number .illegal { color: red } .wl-info button { margin-inline-start: .75em } .wl-info button svg { display: block; margin: 0 auto; line-height: 18px } .wl-emoji-popup { position: absolute; inset-inline-start: 1.25em; top: 100%; z-index: 10; display: none; width: 100%; max-width: 526px; border: var(--waline-border); border-radius: 6px; background: var(--waline-bg-color); box-shadow: var(--waline-box-shadow) } .wl-emoji-popup.display { display: block } .wl-emoji-popup button { display: inline-block; vertical-align: middle; width: 2em; margin: .125em; padding: 0; border-width: 0; background: rgba(0, 0, 0, 0); font-size: inherit; line-height: 2; text-align: center; cursor: pointer } .wl-emoji-popup button:hover { background: var(--waline-bg-color-hover) } .wl-emoji-popup .wl-emoji { display: inline-block; vertical-align: middle; max-width: 1.5em; max-height: 1.5em } .wl-emoji-popup .wl-tab-wrapper { overflow-y: auto; max-height: 145px; padding: .5em } .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar { width: 6px; height: 6px } .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece:vertical { border-radius: 6px; background: rgba(0, 0, 0, .1) } .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb:vertical { width: 6px; border-radius: 6px; background: var(--waline-theme-color) } .wl-emoji-popup .wl-tabs { position: relative; overflow-x: auto; padding: 0 6px; white-space: nowrap } .wl-emoji-popup .wl-tabs::before { content: " "; position: absolute; top: 0; right: 0; left: 0; z-index: 2; height: 1px; background: var(--waline-border-color) } .wl-emoji-popup .wl-tabs::-webkit-scrollbar { width: 6px; height: 6px } .wl-emoji-popup .wl-tabs::-webkit-scrollbar-track-piece:horizontal { border-radius: 6px; background: rgba(0, 0, 0, .1) } .wl-emoji-popup .wl-tabs::-webkit-scrollbar-thumb:horizontal { height: 6px; border-radius: 6px; background: var(--waline-theme-color) } .wl-emoji-popup .wl-tab { position: relative; margin: 0; padding: 0 .5em } .wl-emoji-popup .wl-tab.active { z-index: 3; border: 1px solid var(--waline-border-color); border-top-width: 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; background: var(--waline-bg-color) } .wl-gif-popup { position: absolute; inset-inline-start: 1.25em; top: 100%; z-index: 10; width: calc(100% - 3em); padding: .75em .75em .25em; border: var(--waline-border); border-radius: 6px; background: var(--waline-bg-color); box-shadow: var(--waline-box-shadow); opacity: 0; visibility: hidden; transition: transform .2s ease-out, opacity .2s ease-out; transform: scale(0.9, 0.9); transform-origin: 0 0 } .wl-gif-popup.display { opacity: 1; visibility: visible; transform: none } .wl-gif-popup input { box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 3px 5px; border: var(--waline-border) } .wl-gif-popup img { display: block; box-sizing: border-box; width: 100%; border-width: 2px; border-style: solid; border-color: #fff; cursor: pointer } .wl-gif-popup img:hover { border-color: var(--waline-theme-color); border-radius: 2px } .wl-gallery { display: flex; overflow-y: auto; max-height: 80vh } .wl-gallery-column { display: flex; flex: 1; flex-direction: column; height: -webkit-max-content; height: -moz-max-content; height: max-content } .wl-cards .wl-user { --avatar-size: var(--waline-avatar-size); position: relative; margin-inline-end: .75em } @media(max-width: 720px) { .wl-cards .wl-user { --avatar-size: var(--waline-m-avatar-size) } } .wl-cards .wl-user .wl-user-avatar { width: var(--avatar-size); height: var(--avatar-size); border-radius: var(--waline-avatar-radius); box-shadow: var(--waline-box-shadow) } .wl-cards .wl-user .verified-icon { position: absolute; inset-inline-start: calc(var(--avatar-size)*3/4); top: calc(var(--avatar-size)*3/4); border-radius: 50%; background: var(--waline-bg-color); box-shadow: var(--waline-box-shadow) } .wl-card-item { position: relative; display: flex; padding: .5em } .wl-card-item .wl-card-item { padding-inline-end: 0 } .wl-card { flex: 1; width: 0; padding-bottom: .5em; border-bottom: 1px dashed var(--waline-border-color) } .wl-card:first-child { margin-inline-start: 1em } .wl-card-item:last-child>.wl-card { border-bottom: none } .wl-card .wl-nick svg { position: relative; bottom: -0.125em; line-height: 1 } .wl-card .wl-head { overflow: hidden; line-height: 1.5 } .wl-card .wl-head .wl-nick { position: relative; display: inline-block; margin-inline-end: .5em; font-weight: bold; font-size: .875em; line-height: 1; text-decoration: none } .wl-card span.wl-nick { color: var(--waline-dark-grey) } .wl-card .wl-badge { display: inline-block; margin-inline-end: 1em; padding: 0 .3em; border: 1px solid var(--waline-badge-color); border-radius: 4px; color: var(--waline-badge-color); font-size: var(--waline-badge-font-size) } .wl-card .wl-time { margin-inline-end: .875em; color: var(--waline-info-color); font-size: .75em } .wl-card .wl-meta { position: relative; line-height: 1 } .wl-card .wl-meta>span { display: inline-block; margin-inline-end: .25em; padding: 2px 4px; border-radius: .2em; background: var(--waline-info-bg-color); color: var(--waline-info-color); font-size: var(--waline-info-font-size); line-height: 1.5 } .wl-card .wl-meta>span:empty { display: none } .wl-card .wl-comment-actions { float: right; line-height: 1 } [dir=rtl] .wl-card .wl-comment-actions { float: left } .wl-card .wl-delete, .wl-card .wl-like, .wl-card .wl-reply, .wl-card .wl-edit { display: inline-flex; align-items: center; border: none; background: rgba(0, 0, 0, 0); color: var(--waline-color); line-height: 1; cursor: pointer; transition: color .2s ease } .wl-card .wl-delete:hover, .wl-card .wl-like:hover, .wl-card .wl-reply:hover, .wl-card .wl-edit:hover { color: var(--waline-theme-color) } .wl-card .wl-delete.active, .wl-card .wl-like.active, .wl-card .wl-reply.active, .wl-card .wl-edit.active { color: var(--waline-active-color) } .wl-card .wl-content { position: relative; margin-bottom: .75em; padding-top: .625em; font-size: .875em; line-height: 2; word-wrap: break-word } .wl-card .wl-content.expand { overflow: hidden; max-height: 8em; cursor: pointer } .wl-card .wl-content.expand::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 3.15em; z-index: 999; display: block; width: 100%; background: linear-gradient(180deg, #000, rgba(255, 255, 255, 0.9)) } .wl-card .wl-content.expand::after { content: attr(data-expand); position: absolute; inset-inline-start: 0; bottom: 0; z-index: 999; display: block; width: 100%; height: 3.15em; background: hsla(0, 0%, 100%, .9); color: #828586; line-height: 3.15em; text-align: center } .wl-card .wl-content>*:first-child { margin-top: 0 } .wl-card .wl-content>*:last-child { margin-bottom: 0 } .wl-card .wl-admin-actions { margin: 8px 0; font-size: 12px; text-align: right } .wl-card .wl-comment-status { margin: 0 8px } .wl-card .wl-comment-status .wl-btn { border-radius: 0 } .wl-card .wl-comment-status .wl-btn:first-child { border-inline-end: 0; border-radius: .5em 0 0 .5em } .wl-card .wl-comment-status .wl-btn:last-child { border-inline-start: 0; border-radius: 0 .5em .5em 0 } .wl-card .wl-quote { border-inline-start: 1px dashed rgba(237, 237, 237, .5) } .wl-card .wl-quote .wl-user { --avatar-size: var(--waline-m-avatar-size) } .wl-close-icon { color: var(--waline-border-color) } .wl-content .vemoji, .wl-content .wl-emoji { display: inline-block; vertical-align: baseline; height: 1.25em; margin: -0.125em .25em } .wl-content .wl-tex { background: var(--waline-info-bg-color); color: var(--waline-info-color) } .wl-content span.wl-tex { display: inline-block; margin-inline-end: .25em; padding: 2px 4px; border-radius: .2em; font-size: var(--waline-info-font-size); line-height: 1.5 } .wl-content p.wl-tex { text-align: center } .wl-content .katex-display { overflow: auto hidden; padding-top: .2em; padding-bottom: .2em; -webkit-overflow-scrolling: touch } .wl-content .katex-display::-webkit-scrollbar { height: 3px } .wl-content .katex-error { color: red } .wl-count { flex: 1; font-weight: bold; font-size: 1.25em } .wl-empty { overflow: auto; padding: 1.25em; color: var(--waline-color); text-align: center } .wl-operation { text-align: center } .wl-operation button { margin: 1em 0 } .wl-power { padding: .5em 0; color: var(--waline-light-grey); font-size: var(--waline-info-font-size); text-align: end } .wl-meta-head { display: flex; flex-direction: row; align-items: center; padding: .375em } .wl-sort { margin: 0; list-style-type: none } .wl-sort li { display: inline-block; color: var(--waline-info-color); font-size: .75em; cursor: pointer } .wl-sort li.active { color: var(--waline-theme-color) } .wl-sort li+li { margin-inline-start: 1em } .wl-reaction { overflow: auto hidden; margin-bottom: 1.75em; text-align: center } .wl-reaction img { width: 100%; height: 100%; transition: all 250ms ease-in-out } .wl-reaction-title { margin: 16px auto; font-weight: bold; font-size: 18px } .wl-reaction-list { display: flex; flex-direction: row; gap: 16px; justify-content: center; margin: 0; padding: 8px; list-style-type: none } @media(max-width: 580px) { .wl-reaction-list { gap: 12px } } [data-waline] .wl-reaction-list { margin-inline-start: 0 } .wl-reaction-item { display: flex; flex-direction: column; align-items: center; cursor: pointer } .wl-reaction-item:hover img, .wl-reaction-item.active img { transform: scale(1.15) } .wl-reaction-img { position: relative; width: 42px; height: 42px } @media(max-width: 580px) { .wl-reaction-img { width: 32px; height: 32px } } .wl-reaction-loading { position: absolute; inset-inline-end: -5px; top: -4px; width: 18px; height: 18px; color: var(--waline-theme-color) } .wl-reaction-votes { position: absolute; inset-inline-end: -9px; top: -9px; min-width: 1em; padding: 2px; border: 1px solid var(--waline-theme-color); border-radius: 1em; background: var(--waline-bg-color); color: var(--waline-theme-color); font-weight: 700; font-size: .75em; line-height: 1 } .wl-reaction-item.active .wl-reaction-votes { background: var(--waline-theme-color); color: var(--waline-bg-color) } .wl-reaction-text { font-size: .875em } .wl-reaction-item.active .wl-reaction-text { color: var(--waline-theme-color) } .wl-content pre, .wl-content pre[class*=language-] { overflow: auto; margin: .75rem 0; padding: 1rem 1.25rem; border-radius: 6px; background: var(--waline-code-bg-color); line-height: 1.4 } .wl-content pre code, .wl-content pre[class*=language-] code { padding: 0; border-radius: 0; background: rgba(0, 0, 0, 0) !important; color: #bbb; direction: ltr } .wl-content code[class*=language-], .wl-content pre[class*=language-] { background: none; color: #ccc; font-size: 1em; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; text-align: left; white-space: pre; word-spacing: normal; word-wrap: normal; word-break: normal; tab-size: 4; hyphens: none } .wl-content pre[class*=language-] { overflow: auto } .wl-content :not(pre)>code[class*=language-], .wl-content pre[class*=language-] { background: #2d2d2d } .wl-content :not(pre)>code[class*=language-] { padding: .1em; border-radius: .3em; white-space: normal } .wl-content .token.comment, .wl-content .token.block-comment, .wl-content .token.prolog, .wl-content .token.doctype, .wl-content .token.cdata { color: #999 } .wl-content .token.punctuation { color: #ccc } .wl-content .token.tag, .wl-content .token.attr-name, .wl-content .token.namespace, .wl-content .token.deleted { color: #e2777a } .wl-content .token.function-name { color: #6196cc } .wl-content .token.boolean, .wl-content .token.number, .wl-content .token.function { color: #f08d49 } .wl-content .token.property, .wl-content .token.class-name, .wl-content .token.constant, .wl-content .token.symbol { color: #f8c555 } .wl-content .token.selector, .wl-content .token.important, .wl-content .token.atrule, .wl-content .token.keyword, .wl-content .token.builtin { color: #cc99cd } .wl-content .token.string, .wl-content .token.char, .wl-content .token.attr-value, .wl-content .token.regex, .wl-content .token.variable { color: #7ec699 } .wl-content .token.operator, .wl-content .token.entity, .wl-content .token.url { color: #67cdcc } .wl-content .token.important, .wl-content .token.bold { font-weight: bold } .wl-content .token.italic { font-style: italic } .wl-content .token.entity { cursor: help } .wl-content .token.inserted { color: green } .wl-recent-item p { display: inline } .wl-user-list { padding: 0; list-style: none } .wl-user-list a, .wl-user-list a:hover, .wl-user-list a:visited { color: var(--waline-color); text-decoration: none } .wl-user-list .wl-user-avatar { position: relative; display: inline-block; overflow: hidden; margin-inline-end: 10px; border-radius: 4px; line-height: 0 } .wl-user-list .wl-user-avatar>img { width: var(--waline-user-avatar-size, 48px); height: var(--waline-user-avatar-size, 48px) } .wl-user-list .wl-user-badge { position: absolute; inset-inline-end: 0; bottom: 0; min-width: .7em; height: 1.5em; padding: 0 .4em; border-radius: 4px; background: var(--waline-info-bg-color); color: var(--waline-info-color); font-weight: bold; font-size: 10px; line-height: 1.5em; text-align: center } .wl-user-list .wl-user-item { margin: 10px 0 } .wl-user-list .wl-user-item:nth-child(1) .wl-user-badge { background: var(--waline-rank-gold-bg-color, #fa3939); color: var(--waline-white); font-weight: bold } .wl-user-list .wl-user-item:nth-child(2) .wl-user-badge { background: var(--waline-rank-silver-bg-color, #fb811c); color: var(--waline-white); font-weight: bold } .wl-user-list .wl-user-item:nth-child(3) .wl-user-badge { background: var(--waline-rank-copper-bg-color, #feb207); color: var(--waline-white) } .wl-user-list .wl-user-meta { display: inline-block; vertical-align: top } .wl-user-list .wl-badge { display: inline-block; vertical-align: text-top; margin-inline-start: .5em; padding: 0 .3em; border: 1px solid var(--waline-badge-color); border-radius: 4px; color: var(--waline-badge-color); font-size: var(--waline-badge-font-size) } .wl-user-wall { padding: 0; list-style: none } .wl-user-wall .wl-user-badge, .wl-user-wall .wl-user-meta { display: none } .wl-user-wall .wl-user-item { position: relative; display: inline-block; transition: transform ease-in-out .2s } .wl-user-wall .wl-user-item::before, .wl-user-wall .wl-user-item::after { position: absolute; bottom: 100%; left: 50%; z-index: 10; opacity: 0; pointer-events: none; transition: all .18s ease-out .18s; transform: translate(-50%, 4px); transform-origin: top } .wl-user-wall .wl-user-item::before { content: ""; width: 0; height: 0; border: 5px solid rgba(0, 0, 0, 0); border-top-color: rgba(16, 16, 16, .95) } .wl-user-wall .wl-user-item::after { content: attr(aria-label); margin-bottom: 10px; padding: .5em 1em; border-radius: 2px; background: rgba(16, 16, 16, .95); color: #fff; font-size: 12px; white-space: nowrap } .wl-user-wall .wl-user-item:hover { transform: scale(1.1) } .wl-user-wall .wl-user-item:hover::before, .wl-user-wall .wl-user-item:hover::after { opacity: 1; pointer-events: none; transform: translate(-50%, 0) } .wl-user-wall .wl-user-item img { width: var(--waline-user-avatar-size, 48px); height: var(--waline-user-avatar-size, 48px) } /*# sourceMappingURL=waline.css.map */