/*
 * =========================================================
 * 小野田電子工業
 * オンライン講座 動画保護プレイヤー
 *
 * File:
 * onoda-video-player.css
 * =========================================================
 */


/* =========================================================
   プレイヤー全体
========================================================= */

.onoda-protected-player {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    background: #000;

    overflow: hidden;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        Arial,
        sans-serif;
}


/* =========================================================
   動画
========================================================= */

.onoda-protected-player .protected-hls-video {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    background: #000;

    object-fit: contain;
    object-position: center center;
}


/* =========================================================
   受講者情報ウォーターマーク
========================================================= */

.onoda-protected-player .user-watermark {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 30;

    padding: 8px 12px;

    color: rgba(255, 255, 255, 0.82);

    background: rgba(0, 0, 0, 0.38);

    border-radius: 4px;

    line-height: 1.5;

    text-align: right;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8);
}


/* =========================================================
   会社名
========================================================= */

.onoda-protected-player .user-watermark-company {
    display: block;

    font-size: 12px;

    opacity: 0.85;
}


/* =========================================================
   受講者名
========================================================= */

.onoda-protected-player .user-watermark-name {
    display: block;

    font-size: 16px;

    font-weight: bold;
}


/* =========================================================
   ランダムロゴ
========================================================= */

.onoda-protected-player .random-logo-watermark {
    position: absolute;

    z-index: 20;

    display: block;

    width: 130px;
    height: auto;

    max-width: 22%;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}


/* =========================================================
   ランダムロゴ表示中
========================================================= */

.onoda-protected-player .random-logo-watermark.is-visible {
    opacity: 0.10;

    visibility: visible;
}


/* =========================================================
   独自操作バー
========================================================= */

.onoda-protected-player .video-controls {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 40;

    display: flex;

    align-items: center;

    gap: 10px;

    box-sizing: border-box;

    width: 100%;

    padding: 10px 12px;

    color: #fff;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.78),
            rgba(0, 0, 0, 0.15)
        );
}


/* =========================================================
   操作ボタン
========================================================= */

.onoda-protected-player .video-control-button {
    flex: 0 0 auto;

    min-width: 34px;
    height: 34px;

    padding: 0 8px;

    color: #fff;

    background: transparent;

    border: 0;

    border-radius: 3px;

    font-size: 18px;

    line-height: 34px;

    text-align: center;

    cursor: pointer;
}


.onoda-protected-player .video-control-button:hover {
    background: rgba(255, 255, 255, 0.14);
}


/* =========================================================
   フォーカス
========================================================= */

.onoda-protected-player .video-control-button:focus-visible,
.onoda-protected-player .video-seek:focus-visible,
.onoda-protected-player .video-volume:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);

    outline-offset: 2px;
}


/* =========================================================
   再生位置
========================================================= */

.onoda-protected-player .video-seek {
    flex: 1 1 auto;

    min-width: 80px;

    cursor: pointer;
}


/* =========================================================
   時間表示
========================================================= */

.onoda-protected-player .video-time {
    flex: 0 0 auto;

    min-width: 92px;

    font-size: 12px;

    white-space: nowrap;

    text-align: center;
}


/* =========================================================
   音量
========================================================= */

.onoda-protected-player .video-volume {
    flex: 0 0 80px;

    width: 80px;

    cursor: pointer;
}


/* =========================================================
   Fullscreen API
========================================================= */

.onoda-protected-player:fullscreen {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100vh;

    aspect-ratio: auto;

    background: #000;
}


/* =========================================================
   Safari / WebKit Fullscreen
========================================================= */

.onoda-protected-player:-webkit-full-screen {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100vh;

    aspect-ratio: auto;

    background: #000;
}


/* =========================================================
   Fullscreen時の動画
========================================================= */

.onoda-protected-player:fullscreen .protected-hls-video,
.onoda-protected-player:-webkit-full-screen .protected-hls-video {
    display: block;

    width: 100%;
    height: 100%;

    margin: auto;

    object-fit: contain;
    object-position: center center;
}


/* =========================================================
   Fullscreen API 非対応環境用
   疑似全画面
========================================================= */

.onoda-protected-player.is-pseudo-fullscreen {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 999999;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100vh;

    width: 100dvw;
    height: 100dvh;

    aspect-ratio: auto;

    background: #000;
}


/* =========================================================
   疑似全画面時の動画
========================================================= */

.onoda-protected-player.is-pseudo-fullscreen .protected-hls-video {
    display: block;

    width: 100%;
    height: 100%;

    margin: auto;

    object-fit: contain;
    object-position: center center;
}


/* =========================================================
   疑似全画面時
   BODYスクロール停止
========================================================= */

body.onoda-video-fullscreen-open {
    overflow: hidden;
}


/* =========================================================
   動画エラー表示
========================================================= */

.onoda-video-error {
    box-sizing: border-box;

    width: 100%;

    padding: 12px 15px;

    background: #f5f5f5;

    border: 1px solid #ddd;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   スマートフォン
========================================================= */

@media screen and (max-width: 600px) {

    /* -----------------------------------------------------
       受講者情報
    ----------------------------------------------------- */

    .onoda-protected-player .user-watermark {
        top: 8px;
        right: 8px;

        padding: 5px 8px;
    }


    /* -----------------------------------------------------
       会社名
    ----------------------------------------------------- */

    .onoda-protected-player .user-watermark-company {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       受講者名
    ----------------------------------------------------- */

    .onoda-protected-player .user-watermark-name {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       ランダムロゴ
    ----------------------------------------------------- */

    .onoda-protected-player .random-logo-watermark {
        width: 90px;

        max-width: 25%;
    }


    /* -----------------------------------------------------
       操作バー
    ----------------------------------------------------- */

    .onoda-protected-player .video-controls {
        gap: 5px;

        padding: 7px 6px;
    }


    /* -----------------------------------------------------
       操作ボタン
    ----------------------------------------------------- */

    .onoda-protected-player .video-control-button {
        min-width: 30px;
        height: 32px;

        padding: 0 5px;

        font-size: 16px;

        line-height: 32px;
    }


    /* -----------------------------------------------------
       時間表示
    ----------------------------------------------------- */

    .onoda-protected-player .video-time {
        min-width: 74px;

        font-size: 10px;
    }


    /* -----------------------------------------------------
       音量スライダー
    ----------------------------------------------------- */

    .onoda-protected-player .video-volume {
        display: none;
    }


    /* -----------------------------------------------------
       スマホ縦画面＋全画面
       動画を必ず中央配置
    ----------------------------------------------------- */

    .onoda-protected-player:fullscreen,
    .onoda-protected-player:-webkit-full-screen,
    .onoda-protected-player.is-pseudo-fullscreen {
        align-items: center;
        justify-content: center;
    }


    .onoda-protected-player:fullscreen .protected-hls-video,
    .onoda-protected-player:-webkit-full-screen .protected-hls-video,
    .onoda-protected-player.is-pseudo-fullscreen .protected-hls-video {
        object-fit: contain;
        object-position: center center;

        margin: auto;
    }
}