mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Refactor comment style
This commit is contained in:
parent
695feadb42
commit
3fce084951
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -25,7 +25,7 @@
|
||||
"collapse-live-side-bar.min.css": "22348786547D2D8DB659A306AF2E9C1F2050D66488778C71545AAEF785FD57E6",
|
||||
"collapse-live-side-bar.min.js": "BB1B1CF157099A70F1AEA3F154C84D9CA1A84A29B5F6E42357CA9F51FFC4965C",
|
||||
"combo-like.min.js": "368DA34768E947628099D258ED23BC5FFFCFFD25A47346E086C7975C8A52F997",
|
||||
"comment.min.css": "5B14E1F83A771D501B5B4DB455D00D95EECAB9AF2856BC5001DAEA6A3DA9F719",
|
||||
"comment.min.css": "2F358407BA8CCBE0489077260CC8ADDB8E3020E38794CEA3A65428B27FD9D28C",
|
||||
"comment.min.js": "64F7B6951861C25799C48BB1ABCF2A73F79BCBBFC1E9D3BD45EC1F16F94F6451",
|
||||
"comment-dark.min.css": "E980508E86203743C36FEE4F7149BFF53961ECBC4EC140E8C162D18D395B940A",
|
||||
"compact-layout.min.css": "CAC8B0DBA8E90B38D31F0811B7B469709052204AC36D5D3F20FE5D0899FDDCCB",
|
||||
@ -54,11 +54,10 @@
|
||||
"custom-navbar-watchlater-list.min.js": "57EA2C62F7442750BB177B9898CF07BA61C45F0FD99737516ED609051699B054",
|
||||
"danmaku-converter.min.js": "6C844406F060DCF2483F9CC4C7329911ED77BC77097F2BC5B925B6F12C990820",
|
||||
"dark.min.css": "DB42952AFC6734153CA69C8208B8C51013B8777690152CAEF42339703C9C6BD7",
|
||||
"dark.user.css": "B218ED92B144F0EBE9A04C9F0B139298A19703A913161FA420A15036FC70E4B4",
|
||||
"dark.user.css": "1C78229EEF2C5551E30EAA292B804341ED5AC315577539846FE6100424E654EF",
|
||||
"dark-important.min.css": "9381B563726BCA701DD77C7AD572793538A45CB839F56008A55EE46821EA1B05",
|
||||
"dark-navbar.min.css": "A2D91F11127D165571ACCC53004EDDB118CEE110F9B020D7E0541E1C8FAEA478",
|
||||
"dark-schedule.min.js": "853C446547603F4F0425F19F09F73335C9EC451A790C1C07E5E5B88A09E9B453",
|
||||
"dark-slice-12.min.css": "F25FBEEC5132D587A1248C003CFE744917EC527924D661975766BA6B0AA5AE03",
|
||||
"dark-styles.min.js": "74E6D655F88E50A27D60F189554F6656CCD2A6EA2686FD9946CA9A89EABF7719",
|
||||
"debounce.min.js": "54D33E1273C1F3FE19550BF1844339C3D54D6B01DF8A39C3162D95B93B079CFA",
|
||||
"default-danmaku-settings.min.css": "D9942B184FEDA7B08CFA0C34920E97D7A83B81762DCBF757642EBB60F95FF25D",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/comment.min.css
vendored
2
min/comment.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,279 +0,0 @@
|
||||
.comment-list .list-item
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info,
|
||||
.dynamic-list-item-wrap .reply-item>.info
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .floor,
|
||||
.dynamic-list-item-wrap .reply-item>.info .floor
|
||||
{
|
||||
order: 1;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .reply,
|
||||
.dynamic-list-item-wrap .reply-item>.info .reply
|
||||
{
|
||||
order: 2;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .operation,
|
||||
.dynamic-list-item-wrap .reply-item>.info .operation
|
||||
{
|
||||
order: 3;
|
||||
flex-grow: 1;
|
||||
display: flex !important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.bb-comment .comment-list .list-item>.con>.reply-box
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
.bb-comment .comment-list .list-item>.con>.info
|
||||
{
|
||||
margin-top: 4px;
|
||||
}
|
||||
.bb-comment .comment-list .list-item>.con>.info>.time,
|
||||
.reply-item>.info>.time
|
||||
{
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 24px;
|
||||
margin: 0 !important;
|
||||
line-height: normal;
|
||||
color: black;
|
||||
}
|
||||
.reply-item>.info>.time
|
||||
{
|
||||
top: 12px;
|
||||
opacity: 1;
|
||||
}
|
||||
.reply-box .item-user > a
|
||||
{
|
||||
margin-right: 8px;
|
||||
}
|
||||
.bb-comment .comment-list .list-item>.con>.info>.plad,
|
||||
.bb-comment .nameplate,
|
||||
.bb-comment .comment-list .list-item .user-face .hot-follow,
|
||||
.bb-comment .comment-header .tabs-order li.on:after,
|
||||
.bb-comment .true-love,
|
||||
.comment-area .dynamic-level,
|
||||
.dynamic-list-item-wrap .info .plat,
|
||||
.bb-comment .comment-list .list-item .con .vote-container,
|
||||
.bb-comment .nameplate,
|
||||
.bb-comment .reply-notice
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
.bb-comment .comment-list .reply-con,
|
||||
.bb-comment .reply-item
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
.bb-comment .comment-list .reply-con>.info>.time,
|
||||
.dynamic-list-item-wrap .reply-box .time
|
||||
{
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 0px;
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
line-height: normal;
|
||||
color: black;
|
||||
}
|
||||
.dynamic-list-item-wrap .reply-box .time
|
||||
{
|
||||
top: 10px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .user
|
||||
{
|
||||
margin-right: 120px;
|
||||
}
|
||||
.reply-box .item-user .text
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .user .level
|
||||
{
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .like>*,
|
||||
.bb-comment .comment-list .list-item .info .hate>*,
|
||||
.bb-comment .comment-list .list-item .info .operation .spot,
|
||||
.bb-comment .comment-send .comment-emoji>*,
|
||||
.dynamic-like i,
|
||||
.dynamic-hate i
|
||||
{
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .like i,
|
||||
.bb-comment .comment-list .list-item .info .hate i,
|
||||
.bb-comment .comment-list .list-item .info .operation .spot,
|
||||
.bb-comment .comment-send .comment-emoji .face,
|
||||
.dynamic-like i,
|
||||
.dynamic-hate i,
|
||||
.dynamic-spot,
|
||||
.textarea-container .comm-tool .comm-emoji .icon-face
|
||||
{
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
background-position: center !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .like span,
|
||||
.bb-comment .comment-list .list-item .info .hate span,
|
||||
.bb-comment .comment-send .comment-emoji span
|
||||
{
|
||||
opacity: 0.5;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .like.liked span,
|
||||
.bb-comment .comment-list .list-item .info .hate.hated span,
|
||||
.bb-comment .comment-list .list-item .info .like:hover span,
|
||||
.bb-comment .comment-list .list-item .info .hate:hover span,
|
||||
.bb-comment .comment-list .list-item .info .like span,
|
||||
.bb-comment .comment-list .list-item .info .hate span,
|
||||
.bb-comment .comment-send .comment-emoji span
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
.bb-comment .comment-send .comment-emoji.open .face,
|
||||
.bb-comment .comment-send .comment-emoji:hover .face,
|
||||
.bb-comment .comment-send .comment-emoji:hover span,
|
||||
.bb-comment .comment-list .list-item .info .like:hover>*,
|
||||
.bb-comment .comment-list .list-item .info .hate:hover>*,
|
||||
.bb-comment .comment-list .list-item .info .like.liked:hover>*,
|
||||
.bb-comment .comment-list .list-item .info .like.liked>*,
|
||||
.bb-comment .comment-list .list-item .info .like.hated:hover>*,
|
||||
.bb-comment .comment-list .list-item .info .like.hated>*,
|
||||
.bb-comment .comment-list .list-item .info .operation .spot:hover
|
||||
{
|
||||
opacity: 0.7;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .like i,
|
||||
.dynamic-like i
|
||||
{
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z" /></svg>') !important;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .like.liked:hover i,
|
||||
.bb-comment .comment-list .list-item .info .like.liked i,
|
||||
.dynamic-like:hover i,
|
||||
.dynamic-liked i
|
||||
{
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z" /></svg>') !important;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .hate i,
|
||||
.dynamic-hate i
|
||||
{
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M19,15V3H23V15H19M15,3A2,2 0 0,1 17,5V15C17,15.55 16.78,16.05 16.41,16.41L9.83,23L8.77,21.94C8.5,21.67 8.33,21.3 8.33,20.88L8.36,20.57L9.31,16H3C1.89,16 1,15.1 1,14V12C1,11.74 1.05,11.5 1.14,11.27L4.16,4.22C4.46,3.5 5.17,3 6,3H15M15,5H5.97L3,12V14H11.78L10.65,19.32L15,14.97V5Z" /></svg>') !important;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .hate.hated:hover i,
|
||||
.bb-comment .comment-list .list-item .info .hate.hated i,
|
||||
.dynamic-hate:hover i,
|
||||
.dynamic-hated i
|
||||
{
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M19,15H23V3H19M15,3H6C5.17,3 4.46,3.5 4.16,4.22L1.14,11.27C1.05,11.5 1,11.74 1,12V14A2,2 0 0,0 3,16H9.31L8.36,20.57C8.34,20.67 8.33,20.77 8.33,20.88C8.33,21.3 8.5,21.67 8.77,21.94L9.83,23L16.41,16.41C16.78,16.05 17,15.55 17,15V5C17,3.89 16.1,3 15,3Z" /></svg>') !important;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .info .operation .spot,
|
||||
.dynamic-spot
|
||||
{
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" /></svg>') !important;
|
||||
}
|
||||
.bb-comment .comment-send .comment-emoji .face,
|
||||
.textarea-container .comm-tool .comm-emoji .icon-face
|
||||
{
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>') !important;
|
||||
}
|
||||
.bb-comment .reply-notice .notice-item
|
||||
{
|
||||
background-color: #0001 !important;
|
||||
border: none !important;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
padding: 10px 14px !important;
|
||||
}
|
||||
.dark .bb-comment .reply-notice .notice-item
|
||||
{
|
||||
background-color: #333 !important;
|
||||
}
|
||||
.bb-comment .reply-notice .notice-item .icon-notice
|
||||
{
|
||||
order: 0;
|
||||
position: static !important;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.bb-comment .reply-notice .notice-item a
|
||||
{
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
color: black !important;
|
||||
}
|
||||
.dark .bb-comment .reply-notice .notice-item a
|
||||
{
|
||||
color: #eee !important;
|
||||
}
|
||||
.bb-comment .reply-notice .notice-item .icon-close-notice
|
||||
{
|
||||
order: 2;
|
||||
position: static !important;
|
||||
}
|
||||
.bb-comment .reply-notice .notice-item .icon-notice,
|
||||
.bb-comment .reply-notice .notice-item .icon-close-notice
|
||||
{
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background-position: center !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.bb-comment .reply-notice .notice-item .icon-notice
|
||||
{
|
||||
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;
|
||||
}
|
||||
.bb-comment .reply-notice .notice-item .icon-close-notice
|
||||
{
|
||||
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;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .user .text-con
|
||||
{
|
||||
white-space: pre-wrap;
|
||||
display: block;
|
||||
}
|
||||
.bb-comment .comment-list .list-item .text
|
||||
{
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
body.dark .bb-comment .comment-list .list-item>.con>.info>.time,
|
||||
body.dark .bb-comment .comment-list .reply-con>.info>.time,
|
||||
body.dark .bb-comment .comment-list .list-item>.con>.info>.floor,
|
||||
body.dark .bb-comment .comment-list .list-item .info .like>i,
|
||||
body.dark .bb-comment .comment-list .list-item .info .hate>i,
|
||||
body.dark .bb-comment .comment-list .list-item .info .like.liked>i,
|
||||
body.dark .bb-comment .comment-list .list-item .info .hate.hated>i,
|
||||
body.dark .bb-comment .comment-list .list-item .info .operation .spot,
|
||||
body.dark .bb-comment .comment-send .comment-emoji .text,
|
||||
body.dark .dynamic-like i,
|
||||
body.dark .dynamic-like:hover i,
|
||||
body.dark .dynamic-liked i,
|
||||
body.dark .dynamic-liked:hover i,
|
||||
body.dark .dynamic-hate i,
|
||||
body.dark .dynamic-hate:hover i,
|
||||
body.dark .dynamic-hated i,
|
||||
body.dark .dynamic-hated:hover i,
|
||||
body.dark .dynamic-spot,
|
||||
body.dark .textarea-container .comm-tool .comm-emoji .icon-face
|
||||
{
|
||||
filter: brightness(0) invert(1) !important;
|
||||
}
|
||||
body.dark .bb-comment .comment-list .list-item .info .like span,
|
||||
body.dark .bb-comment .comment-list .list-item .info .hate span,
|
||||
body.dark .bb-comment .comment-list .list-item .info .like.liked span,
|
||||
body.dark .bb-comment .comment-list .list-item .info .hate.hated span,
|
||||
body.dark .bb-comment .comment-list .list-item .info .like:hover span,
|
||||
body.dark .bb-comment .comment-list .list-item .info .hate:hover span,
|
||||
body.dark .bb-comment .reply-item>.info>.time
|
||||
{
|
||||
color: #eee !important;
|
||||
}
|
||||
352
src/style/comment/comment.scss
Normal file
352
src/style/comment/comment.scss
Normal file
@ -0,0 +1,352 @@
|
||||
@mixin orders {
|
||||
display: flex;
|
||||
.floor {
|
||||
order: 1;
|
||||
}
|
||||
.reply {
|
||||
order: 2;
|
||||
}
|
||||
.operation {
|
||||
order: 3;
|
||||
flex-grow: 1;
|
||||
display: flex !important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@mixin time {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 24px;
|
||||
margin: 0 !important;
|
||||
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;
|
||||
}
|
||||
@mixin like-icon {
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z" /></svg>') !important;
|
||||
}
|
||||
@mixin liked-icon {
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z" /></svg>') !important;
|
||||
}
|
||||
@mixin hate-icon {
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M19,15V3H23V15H19M15,3A2,2 0 0,1 17,5V15C17,15.55 16.78,16.05 16.41,16.41L9.83,23L8.77,21.94C8.5,21.67 8.33,21.3 8.33,20.88L8.36,20.57L9.31,16H3C1.89,16 1,15.1 1,14V12C1,11.74 1.05,11.5 1.14,11.27L4.16,4.22C4.46,3.5 5.17,3 6,3H15M15,5H5.97L3,12V14H11.78L10.65,19.32L15,14.97V5Z" /></svg>') !important;
|
||||
}
|
||||
@mixin hated-icon {
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M19,15H23V3H19M15,3H6C5.17,3 4.46,3.5 4.16,4.22L1.14,11.27C1.05,11.5 1,11.74 1,12V14A2,2 0 0,0 3,16H9.31L8.36,20.57C8.34,20.67 8.33,20.77 8.33,20.88C8.33,21.3 8.5,21.67 8.77,21.94L9.83,23L16.41,16.41C16.78,16.05 17,15.55 17,15V5C17,3.89 16.1,3 15,3Z" /></svg>') !important;
|
||||
}
|
||||
@mixin spot-icon {
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" /></svg>') !important;
|
||||
}
|
||||
@mixin face-icon {
|
||||
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="16" height="16" viewBox="0 0 24 24"><path fill="black" d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>') !important;
|
||||
}
|
||||
@mixin invert-on-dark {
|
||||
body.dark & {
|
||||
filter: brightness(0) invert(1) !important;
|
||||
}
|
||||
}
|
||||
@mixin white-text-on-dark {
|
||||
color: black;
|
||||
body.dark & {
|
||||
color: #eee !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bb-comment {
|
||||
.nameplate,
|
||||
.comment-header .tabs-order li.on::after,
|
||||
.true-love,
|
||||
.reply-notice {
|
||||
@include hide();
|
||||
}
|
||||
.comment-send .comment-emoji {
|
||||
span {
|
||||
opacity: 0.5;
|
||||
color: black;
|
||||
}
|
||||
.face {
|
||||
@include transition();
|
||||
@include icon();
|
||||
@include face-icon();
|
||||
}
|
||||
.text {
|
||||
@include invert-on-dark();
|
||||
}
|
||||
&.open,
|
||||
&:hover {
|
||||
.face,
|
||||
span {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-list {
|
||||
.list-item {
|
||||
position: relative;
|
||||
.info {
|
||||
@include orders();
|
||||
.like,
|
||||
.hate {
|
||||
i {
|
||||
@include transition();
|
||||
@include icon();
|
||||
@include invert-on-dark();
|
||||
}
|
||||
span {
|
||||
opacity: 0.5;
|
||||
@include white-text-on-dark();
|
||||
}
|
||||
&.liked,
|
||||
&.hated {
|
||||
> i {
|
||||
@include invert-on-dark();
|
||||
}
|
||||
}
|
||||
&.liked,
|
||||
&.hated,
|
||||
&:hover {
|
||||
span {
|
||||
@include white-text-on-dark();
|
||||
}
|
||||
> * {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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 .spot {
|
||||
@include transition();
|
||||
@include icon();
|
||||
@include spot-icon();
|
||||
@include invert-on-dark();
|
||||
:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.user {
|
||||
margin-right: 120px;
|
||||
.level {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.text-con {
|
||||
white-space: pre-wrap;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.user-face .hot-follow,
|
||||
.con .vote-container {
|
||||
@include hide();
|
||||
}
|
||||
> .con {
|
||||
.level-link {
|
||||
@include hide();
|
||||
}
|
||||
> .reply-box {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
> .info {
|
||||
margin-top: 4px;
|
||||
> .time {
|
||||
opacity: 0.7;
|
||||
@include time();
|
||||
}
|
||||
> .time,
|
||||
> .floor {
|
||||
@include invert-on-dark();
|
||||
}
|
||||
> .plad {
|
||||
@include hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.reply-con {
|
||||
position: relative;
|
||||
> .info {
|
||||
> .time {
|
||||
@include reply-time();
|
||||
@include invert-on-dark();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.reply-item {
|
||||
position: relative;
|
||||
> .info > .time {
|
||||
opacity: 0.7;
|
||||
// @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.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dynamic-list-item-wrap {
|
||||
.info .plat {
|
||||
@include hide();
|
||||
}
|
||||
.reply-box {
|
||||
.time {
|
||||
@include reply-time();
|
||||
top: 10px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
.reply-item {
|
||||
> .info {
|
||||
@include orders();
|
||||
}
|
||||
}
|
||||
}
|
||||
.reply-item > .info > .time {
|
||||
@include time();
|
||||
top: 12px;
|
||||
opacity: 1;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user