@charset "utf-8";

@import url("emoji.css?r=4");

@import url("MiSansFont.css");

@import url("GlyphWikiFont.css?r=3");

:root { --color-1: #333; --color-2: #666; --color-4: #ffa400; --color-5: #808080; --color-6: #2e4e7e; --color-7: #337ab7; --color-8: #777; --color-10: #999; --floor-link-selected: #ffa400; --color-11: #08c; --color-13: #eee; --color-14: #ccc; --color-15: #f00; --background-color-1: #fff; --background-color-2: #e6f3ff; --background-color-3: #f5f5f5; --background-color-4: transparent; --background-color-5: #eee; --background-color-6: #9d2933; --background-color-8: #337ab7; --background-color-9: #666; --background-color-10: #f9f9f9; --border-color-1: #337ab7; --border-color-2: #eee; --border-color-3: #fff; --border-color-4: #BED8EA; --border-color-5: #ccc; --border-color-6: #ddd; --border-color-7: #d2d8d8; --border-color-8: #f5f5f5; --shadow-color-1: #ccc; --shadow-color-2: #aaa; --shadow-color-3: rgba(0, 0, 0, 0.075); --scrollbar-track-bg: #f2f2f2; --scrollbar-thumb-bg: #c1c1c1; --btn-bg: #f5f5f5; --btn-bg-image: linear-gradient(to bottom, #ffffff 50%, #e6e6e6 100%); --btn-border: rgba(0, 0, 0, 0.1); --img-filter: none; --primaryColor: #53B1A8; --lightPrimaryColor: #B2DFDB; --textPrimaryColor: #FFFFFF; --accentColor: #03A9F4; --primaryTextColor: #212121; --secondaryTextColor: #757575; --dividerColor: #BDBDBD; --relationship-empty-color: #999fa5; --relationship-item-color: #333333; }

[data-hu60-color-scheme="dark"] { --color-1: #c9d1d9; --color-2: #58a6ff; --color-4: #ffa400; --color-5: #808080; --color-6: #2e4e7e; --color-7: #337ab7; --color-8: #777; --color-10: #c9d1d9; --floor-link-selected: #ffa400; --color-11: #08c; --color-13: #eee; --color-14: #ccc; --color-15: #f00; --background-color-1: #0d1117; --background-color-2: #161b22; --background-color-3: #161b22; --background-color-4: transparent; --background-color-5: rgba(56, 139, 253, 0.149); --background-color-6: #9d2933; --background-color-8: #337ab7; --background-color-9: #666; --background-color-10: #161b22; --border-color-1: #30363d; --border-color-2: #30363d; --border-color-3: #30363d; --border-color-4: #30363d; --border-color-5: #30363d; --border-color-6: #30363d; --border-color-7: #30363d; --border-color-8: #30363d; --shadow-color-1: #30363d; --shadow-color-2: #30363d; --shadow-color-3: #30363d; --scrollbar-track-bg: #424242; --scrollbar-thumb-bg: #686868; --btn-bg: #21262d; --btn-bg-image: none; --btn-border: rgba(240, 246, 252, 0.1); --img-filter: brightness(0.85); --primaryColor: #161b22; --lightPrimaryColor: #B2DFDB; --textPrimaryColor: #c9d1d9; --accentColor: #03A9F4; --primaryTextColor: #212121; --secondaryTextColor: #757575; --dividerColor: #BDBDBD; --relationship-empty-color: #999fa5; --relationship-item-color: #333333; }

html { font-size: 16px !important; }

html, input, textarea, pre, code { tab-size: 4; }

html, input, textarea { font-family: "HarmonyOS Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Twemoji Mozilla", "Noto Color Emoji", system-ui, fangsong, serif, monospace, emoji, math, cursive, fantasy, "MiSans Normal", "MiSans L3", GlyphWikiFont; }

code { font-family: "HarmonyOS Sans Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "WenQuanYi Micro Hei Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Twemoji Mozilla", "Noto Color Emoji", sans-serif, serif, system-ui, fangsong, emoji, math, cursive, fantasy, "MiSans Normal", "MiSans L3", GlyphWikiFont; }

::-webkit-scrollbar { width: 10px; height: 1px; }

::-webkit-scrollbar-track { background-color: var(--scrollbar-track-bg); }

::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-bg); }

:focus-visible { outline: none; border-color: var(--border-color-1); }

body { color: var(--color-1); background-color: var(--background-color-1); box-shadow: 0 0 15px var(--shadow-color-1); }

input, select, textarea { background-color: var(--background-color-1); border: 1px solid var(--border-color-5); color: var(--white); }

button, input[type="submit"], input[type="button"] { background-color: var(--btn-bg); background-image: var(--btn-bg-image); border: 1px solid var(--border-color-2); color: var(--color-1); }

img, iframe, video, audio { filter: var(--img-filter); }

.hu60_face, #face img { width: 32px; max-width: 32px; }

h1 { font-size: 24px; font-weight: 500; line-height: 150%; margin: 0px 0px 10px; padding: 0px; }

.case { width: 100%; max-width: 1170px; margin: 0px auto; }

.content-box { padding-left: 5px; padding-right: 5px; }

.avatar { width: 32px; min-width: 32px; height: 32px; min-height: 32px; border-radius: 50%; vertical-align: middle; }

.pull-right { float: right; }

.layout-header { width: 100%; background: var(--primaryColor); color: var(--textPrimaryColor); height: 80px; display: flex; align-items: center; }

.layout-header .header-logo img { max-height: 80px; }

.layout-header .header-inner { display: flex; justify-content: space-between; align-items: center; }

.layout-header .header-inner .header-nav { list-style-type: none; display: flex; align-items: center; }

.layout-header .header-inner .header-nav > li { margin-right: 20px; }

.layout-header .header-inner .header-nav > li a { color: var(--textPrimaryColor); }

.layout-header .header-inner .header-nav .userAvatar { width: 48px; min-width: 48px; height: 48px; min-height: 48px; border-radius: 50%; vertical-align: middle; }

.forum-list { display: block; flex-wrap: wrap; padding-left: 40px; }

.forum-list .forum-list-line { display: flex; min-height: 35px; }

.forum-list .forum-list-parent { margin: 0px; padding: 0px; display: inline-block; }

.forum-list .forum-list-parent > a { display: inline-block; background: var(--background-color-5); color: var(--color-10); border-radius: 5px; font-size: 12px; padding: 5px; margin: 3px; font-weight: bold; }

.forum-list .forum-list-child { margin: 0px; padding: 0px; display: inline-block; }

.forum-list .forum-list-child > a { display: inline-block; background: var(--background-color-5); color: var(--color-10); border-radius: 5px; font-size: 12px; padding: 5px; margin: 3px; }

.layout-footer { background: var(--background-color-1); margin-top: 15px; padding-bottom: 15px; }

.layout-footer .case { display: flex; justify-content: space-between; align-items: center; }

.layout-footer .case div { margin: 0px auto; }

.layout-footer a { color: var(--color-2); }

.layout-footer .footer-link { width: 400px; list-style-type: none; display: flex; flex-wrap: wrap; }

.layout-footer .footer-link > li { margin-left: 10px; font-size: 12px; }

.container { width: 100%; max-width: 1170px; margin: 0px auto; box-shadow: 0 0 15px var(--shadow-color-1); border-radius: 3px; background-color: var(--background-color-1); min-height: 95vh; overflow-wrap: break-word; }

.layout-foot-inner { margin-top: 25px; padding: 25px 0px; background-color: var(--background-color-2); }

.layout-foot-inner p { text-align: center; }

.bar { color: var(--color-1); background-color: var(--background-color-2); font-size: 1.1rem; font-weight: 400; padding: 5px 18px; }

.breadcrumb { padding: 8px 15px; list-style: none; background-color: var(--background-color-3); border-radius: 4px; }

.widget-page { margin: 5px 0px; }

.widget-page > a { display: inline-block; padding: 5px 15px; }

.top-pager { border-bottom: 1px solid var(--border-color-2); padding-bottom: 10px; }

.profile { padding: 5px; position: absolute; width: 240px; min-height: 250px; left: -260px; top: 0px; }

.profile .userHeader { height: 48px; }

.profile .userPanel { list-style-type: none; padding: 0px 0px 0px 10px; font-size: 0.8rem; }

.profile .userPanel > li { margin: 5px; padding: 0px; }

.profile .userPanel > li > a { color: var(--color-2); display: block; padding: 5px 25px; border-radius: 5px; }

.profile .userPanel > li > a:hover { background: var(--background-color-9); color: var(--textPrimaryColor); }

.profile .profileClose { font-size: 40px; display: none; position: absolute; bottom: 25px; right: 50%; margin-left: 40px; border-radius: 50%; color: var(--color-4); }

.profile .profileFilm { display: none; position: fixed; inset: 0px 80vw 0px 0px; }

.profile .userAvatar { width: 48px; min-width: 48px; height: 48px; min-height: 48px; border-radius: 10px; border: 3px solid var(--border-color-3); vertical-align: middle; }

.profile .userName { font-size: 1.5em; font-weight: bold; }

.msg-box { padding-left: 15px; border-bottom: 2px solid var(--border-color-4); }

.msg-box .avatar { width: 32px; height: 32px; }

.forum-name { font-size: 1.2rem; padding: 5px 15px; background-color: var(--background-color-2); }

.search-list ul { list-style-type: none; }

.topic-ul { list-style-type: none; padding: 0px; }

.topic-ul > li { padding: 5px 10px 2px; border-bottom: 1px solid var(--border-color-2); display: flex; align-items: center; justify-content: space-between; }

.topic-ul > li .topic-reply-count { width: 5%; display: flex; font-weight: 300; font-size: 30px; color: var(--color-5); }

.topic-ul > li .topic-reply-count a { color: var(--color-5); }

.topic-ul > li .topic-forum-name { width: 15%; display: flex; }

.topic-ul > li .topic-forum-name a { color: var(--color-5); }

.topic-ul > li .topic-anchor { width: 20%; display: flex; flex-direction: column; align-items: center; word-break: break-all; }

.topic-ul > li .topic-anchor > a { color: var(--color-5); }

.topic-ul > li .topic-title { width: 60%; display: flex; flex-direction: column; justify-content: center; }

.topic-ul > li .topic-title > a { font-size: 18px; display: block; }

.reply-ul { list-style-type: none; padding: 0px; }

.reply-ul > li { padding: 5px 10px 2px; border-bottom: 1px solid var(--border-color-2); }

.reply-ul > li .topic-info { display: flex; align-items: center; justify-content: space-between; }

.reply-ul > li .topic-info .topic-reply-count { width: 5%; display: flex; font-weight: 300; font-size: 30px; color: var(--color-5); }

.reply-ul > li .topic-info .topic-reply-count a { color: var(--color-5); }

.reply-ul > li .topic-info .topic-anchor, .reply-ul > li .topic-info .comments-anchor { width: 10%; display: flex; flex-direction: column; align-items: center; word-break: break-all; }

.reply-ul > li .topic-info .topic-anchor > a, .reply-ul > li .topic-info .comments-anchor > a { color: var(--color-5); }

.reply-ul > li .topic-info .topic-title { width: 65%; display: flex; flex-direction: column; justify-content: center; margin-left: 10px; }

.reply-ul > li .topic-info .topic-title > a { font-size: 18px; display: block; }

.reply-ul > li .topic-info .reply-floor { margin-left: 10px; width: 10%; display: flex; font-weight: 300; font-size: 16px; color: var(--color-5); }

.reply-ul > li .topic-info .reply-floor a { color: var(--color-5); }

.reply-ul > li blockquote { background: var(--background-color-10); border-left: 10px solid var(--border-color-5); margin: 10px; padding: 0.5em 10px; max-height: 500px; overflow: hidden; text-overflow: ellipsis; }

.reply-ul > li blockquote::before { color: var(--color-14); font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; }

.topic > h1 { margin-left: 15px; margin-right: 15px; }

.topic .topic-meta { border-bottom: 2px solid var(--border-color-4); padding-left: 10px; padding-bottom: 5px; }

.topic-content { background-color: var(--background-color-1); }

.topic-meta { font-size: 0.8rem; color: var(--color-5); display: flex; align-items: center; }

.topic-meta .topic-meta-name { margin-left: 5px; line-height: 1.1rem; }

.topic-meta .topic-actions { margin-left: 5px; }

.topic-meta .topic-actions a { color: var(--color-5); }

.comments-meta { font-size: 0.8rem; color: var(--color-5); display: flex; align-items: center; }

.comments-meta .comments-meta-name { margin-left: 5px; line-height: 1.1rem; }

.comments-meta .comments-actions { margin-left: 5px; }

.comments-meta .comments-actions a { color: var(--color-5); }

.topic-panel { background-color: var(--background-color-5); }

.topic-panel > a { display: inline-block; padding: 5px 8px; font-size: 1rem; color: var(--color-6); }

.topic-panel > a:hover { color: var(--textPrimaryColor); background-color: var(--background-color-6); }

.topic-panel > div { display: inline-block; padding: 5px 8px; font-size: 1rem; color: var(--color-6); }

.topic-panel a > i { font-size: 1rem; }

.pager-form { display: inline; }

.page-jumper { overflow: hidden; display: inline-flex; flex-wrap: wrap; align-content: center; padding-left: 2px; margin: 10px 0px 0px 20px; }

.page-jumper > li { display: inline-block; }

.page-jumper > li > input { height: 33px; width: 60px; margin-left: -1px; margin-bottom: 3.5px; padding: 5px 10px; border: 1px solid var(--border-color-6); border-radius: 5px; color: var(--color-7); }

.pagination { overflow: hidden; display: inline-flex; flex-wrap: wrap; align-content: center; padding-left: 2px; margin: 10px 0px 0px 20px; }

.pagination > li { display: inline-block; }

.pagination > li:first-child > a { border-radius: 5px 0px 0px 5px; }

.pagination > li:last-child > a { border-radius: 0px 5px 5px 0px; }

.pagination > li > a { position: relative; margin-left: -1px; display: block; padding: 5px 10px; border: 1px solid var(--border-color-6); color: var(--color-7); }

.pagination > .disabled > a { color: var(--color-8); cursor: not-allowed; background-color: var(--background-color-1); }

.pagination > .disabled > a:focus { color: var(--color-8); cursor: not-allowed; background-color: var(--background-color-1); }

.pagination > .disabled > a:hover { color: var(--color-8); cursor: not-allowed; background-color: var(--background-color-1); }

.pagination > .active > a { color: var(--textPrimaryColor); cursor: default; background-color: var(--background-color-8); border-color: var(--border-color-1); }

.pagination > .active > a:focus { color: var(--textPrimaryColor); cursor: default; background-color: var(--background-color-8); border-color: var(--border-color-1); }

.pagination > .active > a:hover { color: var(--textPrimaryColor); cursor: default; background-color: var(--background-color-8); border-color: var(--border-color-1); }

.comments-ul { list-style-type: none; padding: 0px; }

.comments-ul > li { position: relative; padding-top: 5px; border-bottom: 2px solid var(--border-color-2); }

.topic-content, .chat-content, .floor-content, .floor_content { transition: height 0.5s ease 0s; overflow: hidden; margin-left: 20px; margin-right: 20px; }

.floor_fold_bar { width: 100%; margin: 0px; }

.floor_fold_bar button { height: 32px; width: 100%; font-size: 16px; font-weight: bold; }

.topic-author, .comments-author { font-size: 1.1rem; font-weight: 700; color: var(--color-11); position: relative; top: 2px; }

.chat-new p { text-align: left; }

.login-form { max-width: 450px; margin: 20px auto; border-radius: 5px; padding: 15px 25px; box-shadow: 0 0 5px var(--shadow-color-2); }

.input-group { padding: 8px; position: relative; }

.input-group input[type="text"] { width: 100%; padding: 8px 20px 8px 60px; border: 1px solid var(--border-color-7); }

.input-group input[type="password"] { width: 100%; padding: 8px 20px 8px 60px; border: 1px solid var(--border-color-7); }

.input-group input[type="mail"] { width: 100%; padding: 8px 20px 8px 60px; border: 1px solid var(--border-color-7); }

.login-form-submit { display: inline-block; width: 60%; height: 2rem; margin: 0px auto; }

.comments-form-content { width: calc(100% - 10px); height: 100px; margin: 8px 5px; padding: 10px; border-radius: 5px; outline-style: none; border: 1px solid var(--lightPrimaryColor); box-shadow: inset 0 0 2px 2px var(--shadow-color-3); }

.comments-form-content:hover { border: 1px solid var(--primaryColor); }

.login-label { display: inline-block; color: var(--color-10); position: absolute; left: 15px; top: 14px; }

.widget-form { margin: 0px; padding: 8px; border-bottom: 1px solid var(--border-color-2); }

.topic-form-label { display: block; background-color: var(--background-color-3); font-size: 1.2rem; }

.topic-form-title { display: block; font-size: 16px; border: 2px solid var(--border-color-2); border-radius: 0px; width: calc(100% - 10px); margin: 5px; padding: 5px; }

.topic-form-content { display: block; border: 2px solid var(--border-color-2); height: 300px; border-radius: 0px; width: calc(100% - 10px); margin: 5px; padding: 5px; }

.chat-form-content { width: calc(100% - 10px); height: 100px; }

.chat-list { padding: 0px; list-style-type: none; }

.chat-list > li { margin: 0px; padding-top: 5px; border-bottom: 1px solid var(--border-color-2); position: relative; }

.comments-number { margin-right: 5px; }

.comments-number, .chat-number { height: 25px; padding: 0px 12px; font-weight: 700; background-color: var(--background-color-5); color: var(--color-10); border-radius: 0px 10px 10px 0px; display: flex; align-items: center; white-space: nowrap; }

.floor-link { color: var(--color-10); }

.floor-link.selected { color: var(--floor-link-selected); }

.chat-meta-name { font-size: 1.1rem; font-weight: bold; display: flex; }

.chat-meta { font-size: 0.8rem; font-weight: 400; color: var(--color-10); display: flex; align-items: center; }

.chat-meta .chat-actions { padding-left: 5px; }

.chat-meta .chat-actions a { color: var(--color-5); }

.chat-avatar { display: flex; padding: 0px 5px; }

.Cropper-avatar #avatar { border-radius: 50%; }

.book-content { padding: 10px; }

#searchType-label { display: inline-block; }

@media screen and (max-width: 1200px) {
  .container { position: static; left: auto; }
  .profile { position: static; min-height: 0px; height: 50px; border: none; display: inline-block; float: right; width: auto; left: auto; right: auto; top: auto; padding: 0px 15px 0px 0px; border-radius: 0px; box-shadow: none; }
  .profile > a { line-height: 50px; }
  .userPanel { display: none; }
  .userName { font-size: 1.1rem; }
  .userHead { width: 30px; height: 30px; }
  .profileMobile { display: block; position: fixed; height: 100vh; width: 80vw; right: 0px; background-color: var(--background-color-1); }
  .profileMobile .profileFilm { display: block; }
  .profileMobile .profileClose { display: block; }
  .profileMobile .userPanel { display: block; }
  .profileMobile .userPanel > li { display: block; border-bottom: 1px solid var(--border-color-2); }
  .profileMobile .userPanel a { background-color: var(--background-color-4); display: block; }
}

@media screen and (max-width: 600px) {
  .forum-list, .header-nav { padding-left: 10px; }
  .layout-header .header-inner .header-nav > li { margin-right: 10px; }
  .topic-content, .chat-content, .floor-content, .floor_content { margin-left: 15px; margin-right: 15px; }
  .layout-header .header-inner .header-nav .userAvatar { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
  .topic-ul > li .topic-reply-count { display: block; }
  .topic-ul > li .topic-reply-count .number { display: block; font-size: 14px; }
  .topic-ul > li .topic-reply-count .spliter { display: none; }
  .topic-ul > li .topic-reply-count .forum { display: block; font-size: 14px; }
  .topic-ul > li .topic-anchor > a { font-size: 14px; }
  .topic-ul > li .topic-title > a { font-size: 16px; }
  .topic-ul > li .topic-reply-count { display: none; }
  .topic-ul > li .topic-forum-name { display: none; }
  .topic-ul > li .topic-title { width: 80%; }
  .reply-ul > li .topic-anchor > a { font-size: 14px; }
  .reply-ul > li .topic-title > a { font-size: 16px; }
  .reply-ul > li .topic-info .reply-floor { font-size: 18px; }
  .layout-body .cropper-box { display: block; }
  .layout-body .cropper-box .Cropper-case { max-width: 100%; max-height: 360px; }
  textarea { width: calc(100% - 10px); }
  .topic-form-title { width: calc(100% - 10px); font-size: 16px; }
  .topic h1 { font-size: 18px; }
}

@media screen and (min-width: 800px) {
  img { max-width: 800px; max-height: 600px; }
}

.relationship-wrapper .empty { width: 100%; text-align: center; color: var(--relationship-empty-color); font-size: 14px; }

.relationship-wrapper .user-item { width: 100%; max-width: 100%; height: 60px; color: var(--relationship-item-color); display: flex; border-bottom: 1px solid var(--border-color-8); }

.relationship-wrapper .user-item .avatar { width: 80px; min-width: 80px; height: 100%; text-align: center; }

.relationship-wrapper .user-item .avatar img { width: 50px; height: 50px; border-radius: 50px; }

.relationship-wrapper .user-item .info { flex: 1 1 0%; max-width: calc(100% - 80px); padding-top: 10px; }

.relationship-wrapper .user-item .info .name_action { font-size: 18px; display: flex; }

.relationship-wrapper .user-item .info .name_action .name { flex: 2 1 0%; }

.relationship-wrapper .user-item .info .name_action .action_bar { flex: 1 1 0%; }

.relationship-wrapper .user-item .info .name_action .action_bar .action { display: inline-block; color: var(--color-15); }

.relationship-wrapper .user-item .info .signature { color: var(--color-10); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }