/*

* 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;

}