/*
:filename: statics/css/video_player.css
:author: Brigitte Bigi
:contributor: Florian Lopitaux
:contact: contact@sppas.org
:summary: a CSS framework to have video in a dialog

-------------------------------------------------------------------------

This file is part of Whakerexa: https://whakerexa.sf.net/

Copyright (C) 2023-2025 Brigitte Bigi, CNRS
Laboratoire Parole et Langage, Aix-en-Provence, France

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

This banner notice must not be removed.

-------------------------------------------------------------------------

*/
:root:not([data-theme=dark]), [data-theme=light], .light {
    --dialog-img-preview-bg-color: rgb(128, 128, 128);
}

@media not print {
    .dark {
        --dialog-img-preview-bg-color: rgb(128, 128, 128);
    }
}


/* A figure which is clicked to open the dialog */
/* -------------------------------------------- */

figure.img-video-visualization {
    position: relative;
    padding: 0;

    min-width: 2rem;
    min-height: 4vh;

    display: flex;
    align-items: center;
    flex-direction: column;

    background-color: var(--dialog-img-preview-bg-color);
}

figure.img-video-visualization img {
    width: 100%;
    height: auto;
}

/* For play button with image pre-visualization */
/* The button image doesn't require css, wexa.css is enough,
   open docs/video_popup.html to see the result.
*/
figure.img-video-visualization button[name=play-btn] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

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

    width: 100%;
    height: 100%;

    background: transparent;
    border: none;
    cursor: pointer;

    font-size: calc(10*var(--font-size));
}

/* =======================================================================
                           Message dialogs
   ======================================================================= */

/* A fixed color for each message type. Transparency allows to match with any color scheme. */

dialog[role=alertdialog].info {
    border-color: var(--info-color);
    background-color: var(--info-bg-color);
}

dialog[role=alertdialog].warning {
    border-color: var(--warning-color);
    background-color: var(--warning-bg-color);
}

dialog[role=alertdialog].error {
    border-color: var(--error-color);
    background-color: var(--error-bg-color);
}

dialog[role=alertdialog].success {
    border-color: var(--success-color);
    background-color: var(--success-bg-color);
}

dialog[role=alertdialog].tips {
    border-color: var(--tips-color);
    background-color: var(--tips-bg-color);
}

dialog[role=alertdialog].question {
    border-color: var(--question-color);
    background-color: var(--question-bg-color);
}


/* A fixed character to represent differently each message type. Important! */

dialog[role=alertdialog].info::before {
    color: var(--info-color);
    content: "\002139";
    font-size: calc(2*var(--font-size));

    /* this is an attempt which does not work. to be continued. */
    text-align: left;
    vertical-align: middle;
    line-height: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

dialog[role=alertdialog].warning::before {
    color: var(--warning-color);
    content: "\26A0";
    font-size: calc(2*var(--font-size));
}

dialog[role=alertdialog].success::before {
    color: var(--success-color);
    content: "\2713";
    font-size: calc(2*var(--font-size));
}

dialog[role=alertdialog].error::before {
    color: var(--error-color);
    content: "\0021";
    font-size: calc(2*var(--font-size));
}

dialog[role=alertdialog].question::before {
    color: var(--question-color);
    content: "\0003F";
    font-size: calc(2*var(--font-size));
}

dialog[role=alertdialog].tips::before {
    color: var(--tips-color);
    content: "\01F4A1";
    font-size: calc(2*var(--font-size));
}


/* =======================================================================
                                  Video
   ======================================================================= */

dialog.popup-video {
    padding: 0;
    height: 80vh;
    background-color: var(--bg-color) !important;
}

/* css only when the modal is open, if we put the css above the "display: flex"
   show automatically the modal open or not */
:modal[open] {
    position: revert;

    row-gap: 0.5rem;
    column-gap: 0.5rem;
}

:modal[open].popup-video {
    display: flex;
    justify-content: center;
    align-items: center;
}

dialog.popup-video video {
    width: auto;
    height: 90%;
}

dialog button[name="popup-close-btn"] {
    position: absolute;
    top: 1vh;
    right: 1vw;
    background-color: var(--buttons-bg-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.3rem 0.6rem;
    font-weight: bold;
}