/*
:filename: statics/css/video_player.css
:author: 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-2024 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.

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

*/

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

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

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

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

    background-color: rgb(128, 128, 128);
}

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;*/
    height: 90%;
    width: 90%;
    /*background-color: var(--bg-color) !important;*/
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);

    opacity: 0;
    transform: scaleY(0);
    pointer-events: none;
    visibility: hidden;
    animation: none;
}


/* 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;
    pointer-events: auto;
}

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

    animation: fadeIn 0.7s ease-out forwards;
    visibility: visible;
    pointer-events: auto;
}

dialog.popup-video video {
    margin: 0;
    padding: 0;
    min-height: 90%;
}

dialog button[name="popup-close-btn"] {
    position: absolute;
    top: 1vh;
    right: 1vw;
    background: #eeeeee;
}