.button {
background-color: white;
color: #1E90FF;
padding: 3px 8px;
margin-top: 15px;
border: 1px solid #1E90FF;
border-radius: 10px;
box-shadow: 0px 0px 4px #888888;
user-select: none;
display: flex;
align-items: center;
}
.button:hover {
background-color: #F0F8FF;
}
.button:active {
background-color: #1E90FF;
color: white;
}
.button:after {
content: "〉";
margin-left: auto;
font-size: 130%;
transform: scaleX(1.5);
}
.icon {
font-size: 200%;
margin-right: 10px;
width: 1em;
text-align: center;
}
.cont {
line-height: 1.3;
}
.title {
display: block;
}
.title.main {
font-size: larger;
font-weight: bold;
}
.title.sub {
font-size: smaller;
}
/* MMDPreviewer */
.mmdPreviewerContainer {
cursor: grab;
position: relative;
overflow: hidden;
text-align: center;
}
.mmdPreviewerContainer .hintText {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
}
.mmdPreviewerContainer .placeholderImageContainer {
width: 100%;
height: 100%;
position: absolute;
transition: 0.5s all;
opacity: 0.5;
}
.mmdPreviewerContainer .placeholderImage {
width: 100%;
height: 100%;
object-fit: contain;
}
@keyframes mmdPreviewer-hide {
0% {
filter: opacity(1);
}
100% {
filter: opacity(0);
}
}
.mmdPreviewerContainer .placeholderImageContainer[data-display="false"] {
animation: mmdPreviewer-hide 1s ease-in-out forwards;
}
.mmdPreviewer-infotext {
font-size: small;
color: #666;
padding: 0 3px;
}
.mmdPreviewer-hoverbox {
width: 280px;
background-color: white;
border: 1px solid #ccc;
text-align: left;
font-size: small;
padding: 5px;
}