134 lines
2.3 KiB
CSS
134 lines
2.3 KiB
CSS
.ob-comment {
|
|
position: relative;
|
|
border-bottom: 1px dotted black;
|
|
color: #8f0303;
|
|
font-weight: bold;
|
|
background-color: #CCA300;
|
|
word-wrap: break-word;
|
|
white-space: normal;
|
|
}
|
|
|
|
.ob-comment:hover {
|
|
background-color: #FFDE5C;
|
|
}
|
|
|
|
.ob-comment span {
|
|
visibility: hidden;
|
|
min-width: auto;
|
|
max-width: 500px;
|
|
width: max-content;
|
|
background-color: #FFDE5C;
|
|
color: #b30202;
|
|
text-align: left;
|
|
border-radius: 6px;
|
|
padding: 10px 10px;
|
|
z-index: 1;
|
|
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
|
|
box-shadow: 1px 1px 10px 5px var(--background-secondary);
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
|
|
.ob-comment input {
|
|
display:none;
|
|
}
|
|
.ob-comment input:checked+span {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.comment-panel{
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.comment-count{
|
|
border: none;
|
|
padding: 1px 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.comment-pannel-bubble{
|
|
white-space: wrap;
|
|
height:auto;
|
|
width:95%;
|
|
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
|
|
text-overflow: ellipsis;
|
|
-webkit-transition: height 1s;
|
|
transition: opacity 1s, line-height 0.1s;
|
|
padding: 5px 5px;
|
|
background-color: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
border: none;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
margin: 0px 0px;
|
|
cursor: pointer;
|
|
border-radius: 14px;
|
|
margin-bottom: 0px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.comment-pannel-p1 {
|
|
width: 100%;
|
|
border-top-left-radius: 14px;
|
|
border-top-right-radius: 14px;
|
|
margin-bottom: 10px;
|
|
color: var(--text-a);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.comment-pannel-p2 {
|
|
display: none;
|
|
width: 100%;
|
|
text-overflow: hidden;
|
|
margin-bottom: 20px;
|
|
margin-top:0;
|
|
}
|
|
|
|
.comment-pannel-p3 {
|
|
position: relative;
|
|
height: min-content;
|
|
width: auto;
|
|
max-width: max-content;
|
|
max-height: 100px;
|
|
margin-block-end: 0em;
|
|
|
|
white-space: wrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-transition: height 1s;
|
|
transition: opacity 1s, line-height 0.1s;
|
|
cursor: pointer;
|
|
|
|
background-color:#FFDE5C;
|
|
margin-top: 0;
|
|
color: #b30202;
|
|
padding: 5px 5px;
|
|
border-radius: 14px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
input:checked+ span{
|
|
height:auto;
|
|
}
|
|
|
|
input:checked+p{
|
|
height:auto;
|
|
max-height: max-content;
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
|
|
|
|
|