/*
:filename: statics/css/dialog.css
:author: Brigitte Bigi
:contributor: Florian Lopitaux
:contact: contact@sppas.org
:summary: CSS for message dialogs and popup video dialogs

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

This file is part of Whakerexa: https://github.com/brigitte-bigi/Whakerexa

Copyright (C) 2023-2026 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(.dark) {
    --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
   ======================================================================= */

/* Two-zone layout: colored icon header on top, bg-color content below. */
dialog[role=alertdialog] {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-width: min(28rem, 80vw);
    max-height: 80vh;
    overflow: hidden;
    border-left-width: var(--dialog-border-width); /* normalize: wexa.css sets 4x on left */
}

/* Override wexa.css @layer base hidden-alert rule (display:none is inside a layer,
   display:flex above is unlayered and would win without this). */
dialog[role=alertdialog].hidden-alert {
    display: none;
}

/* Children transparent: dialog bg-color (white/dark) shows through.
   Must be unlayered to override wexa.css @layer base `* { background-color }`. */
dialog[role=alertdialog] * {
    background: transparent;
}

/* Content padding and scroll for direct children */
dialog[role=alertdialog] > p,
dialog[role=alertdialog] > div {
    padding: var(--typography-spacing-horizontal);
    overflow-y: auto;
}

/* Icon zone: centered, colored background, icon contrasts against it */
dialog[role=alertdialog]::before {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--typography-spacing-vertical);
    font-size: calc(1.5 * var(--font-size));
    color: var(--dialog-icon-color, rgb(255, 255, 255));
}

/* Type colors: border + icon zone background + icon content */

dialog[role=alertdialog].info {
    border-color: var(--info-color);
}
dialog[role=alertdialog].info::before {
    content: "\002139";
    background-color: var(--info-color);
}

dialog[role=alertdialog].warning {
    border-color: var(--warning-color);
}
dialog[role=alertdialog].warning::before {
    content: "\26A0";
    background-color: var(--warning-color);
}

dialog[role=alertdialog].error {
    border-color: var(--error-color);
}
dialog[role=alertdialog].error::before {
    content: "\0021";
    background-color: var(--error-color);
}

dialog[role=alertdialog].success {
    border-color: var(--success-color);
}
dialog[role=alertdialog].success::before {
    content: "\2713";
    background-color: var(--success-color);
}

dialog[role=alertdialog].tips {
    border-color: var(--tips-color);
}
dialog[role=alertdialog].tips::before {
    content: "\01F4A1";
    background-color: var(--tips-color);
}

dialog[role=alertdialog].question {
    border-color: var(--question-color);
}
dialog[role=alertdialog].question::before {
    content: "\0003F";
    background-color: var(--question-color);
}

/* Form layout for question-type buttons */
dialog[role=alertdialog] form {
    display: flex;
    justify-content: center;
    gap: var(--typography-spacing-horizontal);
    margin-top: calc(var(--typography-spacing-vertical) / 2);
}

dialog[role=alertdialog] form button {
    border-radius: var(--dialog-border-radius);
    padding: calc(var(--typography-spacing-vertical) / 2) var(--typography-spacing-horizontal);
    color: var(--dialog-icon-color, rgb(255, 255, 255));
    border: none;
}

dialog[role=alertdialog].info form button     { background-color: var(--info-color); }
dialog[role=alertdialog].warning form button  { background-color: var(--warning-color); }
dialog[role=alertdialog].error form button    { background-color: var(--error-color); }
dialog[role=alertdialog].success form button  { background-color: var(--success-color); }
dialog[role=alertdialog].tips form button     { background-color: var(--tips-color); }
dialog[role=alertdialog].question form button { background-color: var(--question-color); }


/* =======================================================================
                                  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;
}