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

/*
 * 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%;
	background-color: #fff;
}

/*
 * Titres des colonnes du panneau d'aide.
*/
#search_title, #controls_title
{
	position: relative;
	color: #fff;
	//font-family: DIN-Medium, Fallback, sans-serif;
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 15px;
}

/*
 * Image de recherche du panneau d'aide.
*/
#search_img
{
	background-image: @notify-help-search-background-image-path;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 225px;
}

/*
 * Image des controles du panneau d'aide.
*/
#controls_img
{
	background-image: @notify-help-controls-background-image-path;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 225px;
}

/*
 * Textes des zones de recherche et controles du panneau d'aide.
*/
#search_2hands_text, #search_body_text, #controls_1hand_text
{
	position: relative;
	clear: both;
	color: #fff;
	//font-family: DIN-Medium, Fallback, sans-serif;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*
 * Images des gestures de recherche et controles du panneau d'aide.
*/
.notify_imgs_small
{
	float: left;
	width: 120px;
	height: 120px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	margin: 4px;
	text-align: center;
	font-family: "DINMedium";
    font-weight:10;
    font-size:20px;
	color: #fff;
	padding: 5px;
}

/*
 * Masques de non sélection qui s'appliquent sur une mosaique filtrée.
*/
.filterHiders
{
	position: absolute;
	background-color: #fff;
	background: transparent;
}

/*
 * Style du pointeur principal.
*/
#mainPointer
{
	position: absolute;
	width: 74px;
	height: 74px;
	background-image: @mainPointer-background-image-path;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	z-index: 500;
	opacity: 0;
}

/*
 * Style du pointeur secondaire.
*/
#secondPointer
{
	position: absolute;
	width: 74px;
	height: 74px;
	background-image: @secondPointer-background-image-path;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	z-index: 500;
	opacity: 0;
}

/*
 * Style des voisins additionnels.
*/
.borderNeighbours
{
	position: absolute;
    background-color: #fff;
    margin: @snapshots-margin;
    //background-image: @mosaic-background-image-path;
	background-color: @black;
	background-repeat: repeat;
	background-position: 0px 0px;
}

/*
 * Icone permettant d'afficher l'aide dans le mode d'interaction souris.
*/
#helpIcon, #creditsIcon, #exitIcon, #homeIcon, #searchExitIcon
{
	width: 50px;
	height: 50px;
	position: absolute;
	margin: 20px;
}

#credits_title
{
	font-weight: bold;
	font-size: 30px;
}

#credits_subtitle
{
	font-size: 25px;
}

.credits_film
{
	font-weight: bold;
	font-size: 22px;
}

.credits_body
{
	font-size: 20px;
}

.credits_text
{
	color: #000000;
}