@charset "utf-8";

/* ==========================================================================
   ファイル名: moodle-videojs.css
   配置場所: public_html/additional-css/moodle-videojs.css
   目的: Moodle標準 Video.js メディアプレーヤー インターフェースのモダン化（ニュアンスブルー）
   更新日: 2026年6月18日
   注意: 各問題での個別制御に対応するため、学生用のシーク禁止・操作制限コードは完全に除外しています。
   ========================================================================== */

/* 音声プレーヤーの外枠の黒い土台を完全に透明化してはみ出しをカット */
.video-js.vjs-audio,
.video-js {
    background-color: transparent !important; 
    height: 64px !important; 
}

/* コントロールバー：上部はごく薄く、下部は落ち着いたグレーッシュブルーのグラデーション */
.video-js .vjs-control-bar {
    display: flex !important;                                     
    position: relative !important;                                 
    background: linear-gradient(to bottom, rgba(245, 249, 255, 0.95) 0%, rgba(165, 185, 210, 0.95) 100%) !important; 
    backdrop-filter: blur(10px);                                    
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(120, 145, 175, 0.5) !important; 
    border-radius: 14px !important;                                
    width: 96% !important;
    left: 2% !important;
    bottom: 10px !important;
    height: 52px !important;                                       
    align-items: center !important;
    box-shadow: 0 8px 24px 0 rgba(70, 90, 115, 0.15) !important; 
    color: #2b3e50 !important;                                     
    padding-bottom: 4px !important;                                
}

/* 各操作ボタン・エリアの基本サイズ設定 */
.video-js .vjs-button {
    color: #2b3e50 !important;
    width: 3.5em !important;                                           
    height: 48px !important;
    text-align: center !important;
}
.video-js .vjs-button:hover {
    color: #4a75a0 !important;                                     
}
.video-js .vjs-button > .vjs-icon-placeholder::before {
    font-size: 1.8em !important;
    line-height: 44px !important;                                  
}

/* 各コントロールの並び順（Orderによる位置制御） */
.video-js .vjs-play-control { order: 1 !important; }
.video-js .vjs-volume-panel {                                     
    order: 2 !important; 
    display: flex !important;
    align-items: center !important;
    width: 9em !important;                                             
}
.video-js .vjs-remaining-time { order: 3 !important; margin-left: auto !important; }
.video-js .vjs-playback-rate { order: 4 !important; }          

/* 音量バー（ボリュームスライダー）の常時露出設定とサイズ定義 */
.video-js .vjs-volume-panel .vjs-volume-control {
    opacity: 1 !important;
    width: 5em !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 0.2em !important;
    transition: none !important;                                     
}
.video-js .vjs-volume-bar.vjs-slider-horizontal {
    width: 100% !important;
    height: 4px !important;
    background-color: rgba(43, 62, 80, 0.15) !important;
    border-radius: 2px !important;
}
.video-js .vjs-volume-level {
    background-color: #5a7b9c !important;                             
    height: 100% !important;
    border-radius: 2px !important;
}

/* 再生速度・残り時間テキストのフォント調整 */
.video-js .vjs-time-control {
    color: #2b3e50 !important;
    line-height: 44px !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
    min-width: auto !important;
}
.video-js .vjs-playback-rate .vjs-playback-rate-value {
    line-height: 44px !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: #2b3e50 !important;
}

/* 再生インジケーター（プログレスバー）: コントロールバーの下部に配置 */
.video-js .vjs-progress-control {
    position: absolute !important;
    width: 88% !important;                                         
    height: 4px !important;                                       
    bottom: 4px !important;                                       
    top: auto !important;                                         
    left: 6% !important;                                           
    padding: 0 !important;                                         
    margin: 0 !important;                                         
    transition: height 0.15s ease !important;
    z-index: 10 !important;
}
.video-js .vjs-progress-control:hover {
    height: 6px !important;
}

/* インジケーターの背景（未再生部分）の調整 */
.video-js .vjs-progress-control .vjs-progress-holder {
    background-color: rgba(43, 62, 80, 0.15) !important;
    margin: 0 !important;                                         
    height: 100% !important;
    border-radius: 2px !important;
}

/* 再生済みバーの色（グレーッシュブルー） */
.video-js .vjs-play-progress {
    background-color: #5a7b9c !important;                             
    border-radius: 2px !important;
}

/* プログレスバーの先端の「つまみ（白いフチの丸）」 */
.video-js .vjs-play-progress::before {
    content: "" !important; 
    position: absolute;
    right: -5px;
    top: -3px;                                                     
    width: 10px !important;                                       
    height: 10px !important;
    background-color: #5a7b9c !important; 
    border: 2px solid #ffffff !important;   
    border-radius: 50% !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* マウスホバー時の余計なポップアップを非表示 */
.video-js .vjs-progress-control .vjs-mouse-display {
    display: none !important; 
}

/* 動画中央の巨大な丸型再生ボタン（動画コンテンツ用リデザイン） */
.video-js .vjs-big-play-button {
    font-size: 3em !important; line-height: 2em !important; height: 2em !important; width: 2em !important;
    border-radius: 50% !important; background-color: rgba(245, 249, 255, 0.9) !important;
    backdrop-filter: blur(4px); border: 1px solid rgba(120, 145, 175, 0.5) !important; color: #2b3e50 !important;
    top: 50% !important; left: 50% !important; margin-top: -1em !important; margin-left: -1em !important;
}

/* ==========================================================================
   【バグ修正: Video.js アイコン文字化け（四角形になる現象）の完全修正命令】
   ========================================================================== */
.video-js .vjs-icon-placeholder::before,
.video-js .vjs-big-play-button .vjs-icon-placeholder::before,
.vjs-icon-play::before,
.video-js .vjs-play-control::before {
    font-family: "VideoJS" !important;
    font-weight: normal !important;
    font-style: normal !important;
}