/*
* This file is part of the TraKERS\Front IDILL package.
*
* (c) IRI <http://www.iri.centrepompidou.fr/>
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/

/*
 * Projet : TraKERS
 * Module : Front IDILL
 * Fichier : mosaic.less
 * 
 * Auteur : alexandre.bastien@iri.centrepompidou.fr
 * 
 * Fonctionnalités : Définit les propriétés d'apparence des éléments de base de la mosaïque (les snapshots, la mosaïque en elle-même).
 *
 * Avertissement : Afin que ce fichier puisse compiler, il est nécessaire de lancer index.html depuis un chemin ne commencant pas par file:///.
 * C'est pourquoi j'utilise WAMP pour le lancer.
 */

@mosaic-border-tickness: 1px;
@mosaic-background-color: #202020;
@mosaic-background-image-path: url("../../img/background.png");
@selected-snapshot-background-image-path: url("../../img/selected_background.png");
@snapshots-background-color: #8D8D8D;
@snapshots-margin-value: 5px;
@snapshots-margin: @snapshots-margin-value @snapshots-margin-value @snapshots-margin-value @snapshots-margin-value;
@black: #000000;

body
{
    overflow: hidden;
    background-color: @black;
}

/*
 * Il s'agit des propriétés de la mosaïque en elle même.
 * On désactive les barres de défilement, on peut la placer à n'importe qu'elle position, elle doit être aussi large que la fenêtre du navigateur.
 * Son fond se répète.
 */
#mainPanel
{
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    background-image: @mosaic-background-image-path;
    background-repeat: repeat;
}

/*
 * Les divs contenant les snapshots (ou les "voisins" aussi en cas de zoom total). Ils se positionnent par défaut de gauche à droite, à l'horizontale et wrap dès
 * qu'ils ont atteint la bordure de fenêtre de droite.
 */
.snapshotDivs, .neighbourDivs
{
    background-color: @black;
    margin: @snapshots-margin;
    float: left;
}

/*
 * Les snapshots sont des images, elles doivent remplir l'intégralité de leurs divs (snapshotDivs).
 */
.snapshots
{
    width: 100%;
    height: 100%;
}

/*
 * Ce sont des divs créés spécialement lors d'un prézoom. Leur fonction est d'afficher un clone du snapshot, superposé au précédent et de grandir un peu de manière
 * à faire ressortir visuellement le snapshot pointé. Leur bordure est d'une couleur différente au fond, ce qui permet de les discerner plus facilement dans la mosaïque.
 * au départ, lors de sa création, il est caché, mais apparaît dès que l'image est chargée.
 */
.prezoomContainers
{
    position: absolute;
    display: none;
    background-image: @selected-snapshot-background-image-path;
    background-repeat: repeat;
}

/*
 * Cette classe est attachée à des divs destinés à remplir les bordures d'une mosaïque locale.
 */
.blacks
{
    background-color: @black;
    float: left;
}

/*
 * C'est une classe appliquée aux divs "voisins", afin de les colorer lorsque l'utilisateur intéragit avec eux.
 * Ils se positionnent exactement sur le voisin qu'ils représentent, à la manière du clone de prézoom (prezoomContainer), bien que celui-là n'est qu'un div simple
 * ne contenant pas d'image.
 * Au départ, l'opacité est à 0, ce qui signifie que ce div est invisible. L'opacité change lors d'intéractions avec cet objet. Le div apparaît alors.
 */
.cyan
{
    position: absolute;
    background-color: #94C6C5;
    opacity: 0;
}