mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
523 lines
11 KiB
SCSS
523 lines
11 KiB
SCSS
@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,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 24 24"><path fill="black" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" /></svg>') !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,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 24 24"><path fill="black" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>') !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;
|
|
}
|