/*

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

 */

/* Epaisseur de la bordure de la mosaique. */

@mosaic-border-tickness: 1px;

/* Couleur de fond de la mosaique. */

@mosaic-background-color: #202020;

/* Image de fond de la mosaique. */

@mosaic-background-image-path: url("../../img/background.png");

/* Image de fond de prezoom ou de sélection de voisin. */

@selected-snapshot-background-image-path: url("../../img/selected_background.png");

/* Couleur de fond des snapshots. */

@snapshots-background-color: #8D8D8D;

/* Valeur de la marge des snapshots dans la mosaique. */

@snapshots-margin-value: 8px;

/* Marges des snapshots. */

@snapshots-margin: @snapshots-margin-value @snapshots-margin-value @snapshots-margin-value @snapshots-margin-value;

/* Couleur noire. */

@black: #000000;

/* Image de notification de sélection. */

@notify-selection-background-image-path: url("../../pictos/notifications/selectionner.png");

/* Image de notification de recherche. */

@notify-search-background-image-path: url("../../pictos/notifications/rechercher.png");

/* Image de fond de la timeline. */

@timeline-background-image-path: url("../../img/timeline.png");

/* Image de notification de confirmation. */

@notify-point-background-image-path: url("../../pictos/notifications/confirmer.png");

/* Image de notification de déplacement dans la timeline. */

@notify-timeline-background-image-path: url("../../pictos/notifications/deplacer.png");

/* Couleur de fond du panneau d'aide. */

@notify-help-background-color: rgba(100, 100, 100, 0.9);

/* Epaisseur de bordure du panneau d'aide. */

@notify-help-border-width: 2px;

/* Valeur de marge du panneau d'aide. */

@notify-help-margin: 15px;

/* Image de recherche du panneau d'aide. */

@notify-help-search-background-image-path: url("../../pictos/help/recherche.png");

/* Image de controle du panneau d'aide. */

@notify-help-controls-background-image-path: url("../../pictos/help/controles.png");

/* Image du pointeur principal. */

@mainPointer-background-image-path: url("../../img/cursors/pointer.png");

/* Image du pointeur secondaire. */

@secondPointer-background-image-path: url("../../img/cursors/pointer2.png");

html

{

	//cursor: none;

}

/*

 * Style du corps.

*/

body

{

    overflow: hidden;

    background-color: @black;

	background-image: @mosaic-background-image-path;

	background-repeat: repeat;

}

/*

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

    //background-image: @mosaic-background-image-path;

    //background-repeat: repeat;

}

/*

 * C'est un div invisible qui s'étale sur l'écran afin d'empêcher l'utilisateur de faire des drag & drop sur les images ou de la sélection de texte.

*/

#ghostPanel

{

	position: absolute;

	opacity: 0;

	width: 100%;

	height: 100%;

	z-index: 2000;

}

/*

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

 */

.neighbourFrame

{

    position: absolute;

    //background-color: #94C6C5;

    //background-color: rgba(148, 198, 197, 1);

	background-image: @selected-snapshot-background-image-path;

    background-repeat: repeat;

	opacity: 0;

}

/*

 * Style du fond d'un snapshot de voisin.

 */

.neighbourImgBg

{

    position: absolute;

	background-image: @mosaic-background-image-path;

}

/*

 * Style d'un snapshot de voisin.

 */

.neighbourImg

{

    position: absolute;

}

/*

 * Style commun aux notifications.

*/

.notifications

{

	position: absolute;

	width: 200px;

	height: 200px;

	background-repeat: no-repeat;

	background-position: 0px 0px;

	background-size: 200px 200px;

	opacity: 0;

	margin: 15px;

	z-index: 600;

	text-align: center;

	font-family: "DINMedium";

    font-weight:10;

    font-size:30px;

	color: #fff;

	padding-top: 5px;

}

/*

 * Notifications affichées pendant une recherche en cours.

*/

.notification_curves

{

	position: relative;

	float: left;

	width: 200px;

	height: 200px;

	background-repeat: no-repeat;

	background-position: 0px 0px;

	background-size: 200px 200px;

	opacity: 0;

	margin: 15px;

	z-index: 600;

	text-align: center;

	font-family: "DINMedium";

    font-weight:10;

    font-size:30px;

	color: #fff;

	padding-top: 5px;

}

/*

 * Style commun aux notifications lors d'une recherche par courbes en cours.

*/

.notifications_inSearch

{

	position: relative;

	float: left;

	width: 100px;

	height: 100px;

	background-repeat: no-repeat;

	background-position: 0px 0px;

	background-size: 100px 100px;

	opacity: 0;

	margin: 15px;

	z-index: 600;

}

/*

 * Div contenant les notifications lors d'une recherche par courbes en cours.

*/

.notifications_inSearch_container

{

	position: absolute;

	background-color: #fff;

	background: transparent;

}

/*

 * Container pour les notifications de courbes lors d'un tracé en cours.

*/

#notify_curves_container

{

	position: absolute;

	width: 100%;

}

/*

 * Notification de sélection.

*/

#notify_selection

{

	background-image: @notify-selection-background-image-path;

}

/*

 * Notification de recherche.

*/

#notify_search

{

	background-image: @notify-search-background-image-path;

}

/*

 * Notification de confirmation.

*/

#notify_point

{

	background-image: @notify-point-background-image-path;

}

/*

 * Notification de déplacement dans la timeline.

*/

#notify_timeline

{

	background-image: @notify-timeline-background-image-path;

}

/*

 * Panneau d'aide

 */

#notify_help

{

	position: absolute;

	margin: @notify-help-margin;

	border-style: solid;

	border-width: @notify-help-border-width;

	border-color: #fff;

	color: #fff;

	background-color: @notify-help-background-color;

}

/*

 * Crédits

 */

#notify_credits

{

	position: absolute;

	margin: @notify-help-margin;

	padding: @notify-help-margin;

	border-style: solid;

	border-width: @notify-help-border-width;

	border-color: #fff;

	background-color: #D1D2D4;

}

/*

 * Flèches pour naviguer dans les crédits.

*/

.credits_arrows, .help_details_arrows

{

	position: absolute;

	width: 50px;

	height: 50px;

	background-size: 50px 50px;

	background-repeat: no-repeat;

	opacity: 0;

	z-index: 1100;

}

/*

 * Flèche du haut pour naviguer dans les crédits.

*/

#credits_upArrow

{

	background-image: url('../../img/upArrow.png');

}

/*

 * Flèche du bas pour naviguer dans les crédits.

*/

#credits_downArrow

{

	background-image: url('../../img/downArrow.png');

}

/*

 * Flèche du haut pour naviguer dans les détails du panneau d'aide.

*/

#help_details_upArrow

{

	background-image: url('../../img/upArrow.png');

}

/*

 * Flèche du bas pour naviguer dans les détails du panneau d'aide.

*/

#help_details_downArrow

{

	background-image: url('../../img/downArrow.png');

}

/*

 * Colonne de recherche du panneau d'aide.

*/

#help_search

{

	float: left;

	top: 0%;

	width: 50%;

	height: 100%;

	background: transparent;

}

/*

 * Colonne des controles du panneau d'aide.

*/

#help_controls

{

	float: left;

	top: 0%;

	width: 50%;

	height: 100%;

	background: transparent;

}

/*

 * Séparateur vertical du panneau d'aide.

*/

#help_sep

{

	position: absolute;

	top: 10%;

	left: 50%;

	width: 1px;

	height: 80%;