about/static/css/plugin-meme.css

68 lines
1.3 KiB
CSS

.meme-section .plugin-header{box-shadow:none;border:none}
.meme-content {
padding: 6px;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.meme-section{overflow-anchor: none;}
.meme-content{transition:min-height .25s ease}
.meme-image, .meme-gif {
border-radius: 14px;
overflow: hidden;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--edge-0);
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.meme-image img, .meme-gif img {
display: block;
width: 100%;
height: auto;
transition: opacity .2s ease
}
.meme-caption{margin:.6rem 0 0;color:var(--ink-2);text-align:center}
.meme-section .plugin-toolbar{gap:6px;flex-wrap:nowrap;overflow:hidden}
.meme-refresh-btn {
transition: all 0.2s ease;
will-change: transform;
}
.meme-refresh-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.meme-refresh-btn svg {
display: block;
}
.meme-refresh-btn .loading {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.meme-refresh-btn:not(:disabled):hover {
transform: translateY(-1px) scale(1.05);
}
.meme-refresh-btn:not(:disabled):active {
transform: translateY(0) scale(0.95);
}