nijivoice_sample / style.css
litagin's picture
init
ffcebc2
/* Google Fontsの適用 */
body {
font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
/* スクロールバーを隠すユーティリティ */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* 画像のアスペクト比を維持するカード */
.card-image-wrapper {
position: relative;
padding-top: 150%;
/* 2:3 aspect ratio */
overflow: hidden;
}
.card-image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
/* カードホバー時のエフェクト */
.voice-card:hover img {
transform: scale(1.05);
}
.voice-card {
transition: box-shadow 0.3s ease, transform 0.2s ease;
cursor: pointer;
}
.voice-card:hover {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* 選択状態のボーダー */
.voice-card.selected {
border-color: #6366f1;
/* Indigo-500 */
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}