body, .tooltip { font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif } pre, code { font-family: 'Fira Code', SFMono-Regular, SF Mono, 'Noto Sans JP', ui-monospace, monospace, sans-serif; } .user-drag-none { user-drag: none; -webkit-user-drag: none; -moz-user-select: none; } .customlazyload-blur { -webkit-filter: blur(12px); filter: blur(12px); opacity: 1; transition: filter 400ms, -webkit-filter 400ms, opacity 400ms; } .customlazyload-blur.lazyloaded { -webkit-filter: blur(0); filter: blur(0); opacity: 1; } .modal-content { box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.6); } .cs_card-img-wrapper { overflow: hidden; } #trackAllListGroup { box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); scale: 1; transition: box-shadow 200ms, scale 200ms; &:hover { box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.6); scale: 1.01; } } #albumAllCardGroup .col .card { cursor: pointer; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); scale: 1; transition: box-shadow 200ms, scale 200ms; &:hover { box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.6); scale: 1.03; } &:active { box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.6); scale: 1.015; } } .btn, .btn-group { box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); scale: 1; transition: box-shadow 200ms, scale 200ms; &:hover { box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.6); scale: 1.05; } &:active { box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6); scale: 1.025; } } .btn-group .btn { box-shadow: none; scale: 1; &:hover { box-shadow: none; scale: 1; } &:active { box-shadow: none; scale: 1; } } .btn-close { scale: 1; transition: scale 200ms; &:hover { scale: 1.08; } } #fsOverlayLoadingScr { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; visibility: visible; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.5); z-index: 5001; backdrop-filter: blur(32px); transition: background-color 700ms, visibility 700ms, backdrop-filter 700ms; } #fsOverlayLoadingScr_loadingSpinner { margin: 0px auto; width: 100px; height: 100px; zoom: 1.5; opacity: 1; transition: opacity 500ms; } .fsOverlayLoadingScr_loadingCircular { animation: fsOverlayLoadingScr_loadingCircular_rotate 1s linear infinite; height: 100px; position: relative; width: 100px; } .fsOverlayLoadingScr_loadingCircular circle { stroke: #fff; stroke-dasharray: 1,200; stroke-dashoffset: 0; animation: fsOverlayLoadingScr_loadingCircular_dash 1.5s ease-in-out infinite; stroke-linecap: round; } @keyframes fsOverlayLoadingScr_loadingCircular_rotate { 100% { transform: rotate(360deg); } } @keyframes fsOverlayLoadingScr_loadingCircular_dash { 0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89,200; stroke-dashoffset: -35; } 100% { stroke-dasharray: 89,200; stroke-dashoffset: -124; } }