@import 'common'; @mixin mdi($content) { background: none !important; color: #000; body.dark & { color: #eee; } &::before { content: $content; display: inline-block; font: normal normal normal 24px/1 'Material Design Icons'; font-size: 16px; line-height: 1; width: 16px; height: 16px; } } @mixin orders { display: flex; align-items: center; .floor { opacity: 0.7; order: 1; } .reply { order: 2; } .reply-tags { order: 3; display: flex !important; margin: 0 !important; span { margin: 0 4px 0 0 !important; font-size: 12px !important; line-height: normal !important; display: flex !important; height: auto !important; padding: 2px 6px !important; } } .operation { order: 4; flex-grow: 1; display: flex !important; justify-content: flex-end; margin: 0 !important; padding: 3px !important; } } @mixin time { position: absolute; right: 8px; top: 24px; margin: 0 !important; opacity: 0.5; line-height: normal; color: black; } @mixin reply-time { position: absolute; right: 8px; top: 0px; margin: 0; opacity: 0.5; line-height: normal; color: black; } @mixin hide { display: none !important; } @mixin transition { transition: all 0.2s ease-out; } @mixin icon { height: 16px !important; width: 16px !important; background-position: center !important; opacity: 0.4; display: inline-flex !important; } @mixin like-icon { @include mdi('\F0514'); } @mixin liked-icon { @include mdi('\F0513'); &, & + span, body.dark & { color: var(--theme-color) !important; } } @mixin hate-icon { @include mdi('\F0512'); } @mixin hated-icon { @include mdi('\F0511'); &, & + span, body.dark & { color: var(--theme-color) !important; } } @mixin spot-icon { @include mdi('\F01D9'); } @mixin face-icon { @include mdi('\F01F5'); } @mixin invert-on-dark { body.dark & { filter: brightness(0) invert(1) !important; } } @mixin white-text-on-dark { color: black; body.dark & { color: #eee !important; } } @mixin emoji-position-fix { .comment-send:not(.no-login) { position: relative !important; } .comment-send-lite:not(.no-login), .comment-send:not(.no-login) { padding-top: 15px !important; .dynamic-repost { margin-left: 81px !important; margin-top: 4px; } .comment-emoji { position: absolute !important; right: 0; top: 51px; width: 68px !important; background: #fff; box-sizing: content-box !important; } .comment-submit { height: 34px !important; font-size: 0; body.dark { color: var(--theme-color) !important; } &::after { content: '发表'; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; body.dark & { color: var(--foreground-color); } } } } } .bb-comment { // 兼容 b 站的 lite 版发评论(2021-04-20全量), 细节做的是真烂 .comment-send-lite { position: -webkit-sticky !important; position: sticky !important; bottom: 0 !important; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)) !important; pointer-events: none; width: calc(100% + 12px) !important; margin: 0 0 0 -12px !important; padding-left: 97px !important; body.dark & { background: linear-gradient(to top, #222, rgba(255, 255, 255, 0)) !important; } .comment-emoji-lite { background-color: #fff; } .comment-submit { height: 64px !important; padding: 4px 15px !important; position: relative !important; right: 0 !important; margin-left: 10px !important; } .textarea-container { .baffle { line-height: 65px !important; } .baffle, .ipt-txt { height: 65px !important; width: calc(100% - 80px) !important; } } > * { pointer-events: initial; } } .loading-state { font-size: 14px !important; height: 1.4em !important; line-height: 1.4 !important; margin: 12px 0 !important; // #1789 // &:empty { // margin: 0 !important; // } } .loading-state + .bottom-page { margin: 0 !important; } .nameplate, .comment-header .tabs-order li.on::after, .true-love, .medal, .medal-level, .reply-notice, .sailing, .perfect-reply { @include hide(); } .comment-send-lite .comment-emoji, .comment-send .comment-emoji { box-shadow: none !important; span { opacity: 0.4; color: black; } .face { @include transition(); @include icon(); @include face-icon(); } .text { @include transition(); @include invert-on-dark(); } &.open, &:hover { span, .face { opacity: 1; } } } .comment-list { .list-item { position: relative; .info { margin-top: 0 !important; @include orders(); > * { @include h-center(); } .like, .hate { i { @include transition(); @include icon(); // @include invert-on-dark(); } span { opacity: 0.4; @include transition(); @include white-text-on-dark(); } // &.liked, // &.hated { // > i { // @include invert-on-dark(); // } // } &.liked, &.hated, &:hover { > * { opacity: 1; } } } .like { i { @include like-icon(); } &.liked, &.liked:hover { i { @include liked-icon(); } } } .hate { i { @include hate-icon(); } &.hated, &.hated:hover { i { @include hated-icon(); } } } .operation { &:hover { background: transparent !important; } .spot { @include transition(); @include icon(); @include spot-icon(); @include invert-on-dark(); &:hover { opacity: 1; } } } } .text { white-space: pre-wrap; } .user { margin-right: 120px; .level { visibility: hidden; width: 0; margin: 0; } .text-con { white-space: pre-wrap; display: block; margin: 0 !important; } } .user-face .hot-follow, .con .vote-container { @include hide(); } > .con { .level-link { @include hide(); } > .reply-box { transform: translateX(0%); } > .info { margin-top: 4px; > .time-location, > .time { @include time(); } > .time-location, > .time, > .floor { @include invert-on-dark(); } > .plad { @include hide(); } } } } .reply-con { position: relative; > .info { > .time-location, > .time { @include reply-time(); @include invert-on-dark(); } } } } .reply-item { position: relative; > .info > .time { // @include white-text-on-dark(); @include invert-on-dark(); } } .reply-notice .notice-item { background-color: #0001 !important; border: none !important; display: flex !important; align-items: center; padding: 10px 14px !important; body.dark & { background-color: #333 !important; } .icon-notice { order: 0; position: static !important; margin-right: 12px; background: url('data:image/svg+xml;utf-8,') !important; } a { order: 1; flex-grow: 1; color: black !important; body.dark & { color: #eee !important; } } .icon-close-notice { order: 2; position: static !important; background: url('data:image/svg+xml;utf-8,') !important; } .icon-close-notice, .icon-notice { height: 18px; width: 18px; background-position: center !important; opacity: 0.4; } } @include emoji-position-fix(); } body.dark .panel-area .bb-comment { .comment-send-lite { background: linear-gradient(to top, #444 30%, transparent) !important; } } .dynamic-list-item-wrap { .info .plat { @include hide(); } .reply-box { .time-location, .time { @include reply-time(); top: 10px; } } .reply-item { > .info { @include orders(); } } } .reply-item > .info { > .time-location, > .time { @include time(); @include invert-on-dark(); top: 12px; } } .reply-box .item-user { > a { margin-right: 8px; } .text { display: block; } } .comment-area .dynamic-level { @include hide(); } .dynamic-like, .dynamic-hate { i { @include transition(); // @include invert-on-dark(); } } .dynamic-like { i { @include like-icon(); } &:hover i { // @include invert-on-dark(); @include liked-icon(); } } .dynamic-liked { &:hover i, i { // @include invert-on-dark(); @include liked-icon(); } } .dynamic-hate { i { @include hate-icon(); } &:hover i { // @include invert-on-dark(); @include hated-icon(); } } .dynamic-hated { &:hover i, i { // @include invert-on-dark(); @include hated-icon(); } } .dynamic-spot { @include spot-icon(); @include invert-on-dark(); } .textarea-container .comm-tool .comm-emoji .icon-face { @include face-icon(); @include invert-on-dark(); } .dynamic-spot, .textarea-container .comm-tool .comm-emoji .icon-face { @include icon(); } .comment-list .opera-list { right: 20px !important; top: -72px !important; } .v-wrap #comment { z-index: 21 !important; } .l-con .tag-channel-pane { z-index: 22 !important; }