优化评论区细节
This commit is contained in:
浪子
+183
-3
@@ -3031,7 +3031,7 @@ a.page-numbers:hover{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.comments .commentwrap {
|
||||
width: 69.076%;
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
@@ -3220,14 +3220,172 @@ img.wp-smiley {
|
||||
}
|
||||
|
||||
.smilies-box {
|
||||
clear: both;
|
||||
padding-bottom:5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.twikoo-emotions {
|
||||
overflow: hidden;
|
||||
margin: 8px 0 10px;
|
||||
border: 1px solid #DDE6EA;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
.twikoo-emotion-tabs {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
border-bottom: 1px solid #EEF2F5;
|
||||
}
|
||||
|
||||
.twikoo-emotion-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #6f7680;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
transition-property: background-color, color;
|
||||
transition-duration: .15s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.twikoo-emotion-tab.is-active,
|
||||
.twikoo-emotion-tab:hover {
|
||||
background: #F5F8FA;
|
||||
box-shadow: none;
|
||||
color: #e2684a;
|
||||
}
|
||||
|
||||
.twikoo-emotion-tab:focus,
|
||||
.twikoo-emotion-item:focus,
|
||||
.smli-button:focus {
|
||||
box-shadow: none;
|
||||
outline: 1px solid #DDE6EA;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.twikoo-emotion-tab:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.twikoo-emotion-panel {
|
||||
display: none;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.twikoo-emotion-panel.is-active {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.twikoo-emotion-panel-emoticon.is-active {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.twikoo-emotion-panel-image.is-active {
|
||||
grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
|
||||
}
|
||||
|
||||
.twikoo-emotion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
padding: 4px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
transition-property: background-color, transform;
|
||||
transition-duration: .15s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.twikoo-emotion-panel-emoticon .twikoo-emotion-item {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,STHeiti,WenQuanYi Micro Hei,Helvetica,Arial,sans-serif;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.twikoo-emotion-panel-emoji .twikoo-emotion-item {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.twikoo-emotion-panel-image .twikoo-emotion-item {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.twikoo-emotion-item:hover {
|
||||
background: rgba(144,147,153,.13);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.twikoo-emotion-item:active {
|
||||
box-shadow: none;
|
||||
transform: scale(.96);
|
||||
}
|
||||
|
||||
.twikoo-emotion-status {
|
||||
margin: 8px 0 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid #DDE6EA;
|
||||
border-radius: 8px;
|
||||
color: #8a8f96;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment .body .tk-owo-emotion {
|
||||
width: 3em;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.smilies-box img {
|
||||
width:26px;
|
||||
}
|
||||
|
||||
.smilies-box .twikoo-emotion-item img {
|
||||
width:28px;
|
||||
max-height:28px;
|
||||
height:auto;
|
||||
border-radius:0;
|
||||
object-fit:contain;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.smilies-box img:hover {
|
||||
-webkit-animation: btn-pudding 1s linear;
|
||||
@@ -3242,13 +3400,35 @@ animation: btn-pudding 1s linear;
|
||||
}
|
||||
|
||||
.smli-button{
|
||||
width:2rem;
|
||||
height:2rem;
|
||||
width:40px;
|
||||
height:40px;
|
||||
float:right;
|
||||
position:relative;
|
||||
cursor:pointer;
|
||||
font-size:20px;
|
||||
font-family: EmojiMart, "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
line-height: 40px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
transition-property: background-color, transform;
|
||||
transition-duration: .15s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.smli-button:hover {
|
||||
background: rgba(144,147,153,.13);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.smli-button:active {
|
||||
box-shadow: none;
|
||||
transform: scale(.96);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user