/*
* 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: 8px;
@snapshots-margin: @snapshots-margin-value @snapshots-margin-value @snapshots-margin-value @snapshots-margin-value;
@black: #000000;
@notify-selection-background-image-path: url("../../pictos/notifications/selectionner.png");
@notify-search-background-image-path: url("../../pictos/notifications/rechercher.png");
@notify-point-background-image-path: url("../../pictos/notifications/confirmer.png");
@notify-timeline-background-image-path: url("../../pictos/notifications/deplacer.png");
@notify-help-background-color: rgba(100, 100, 100, 0.9);
@notify-help-border-width: 2px;
@notify-help-margin: 15px;
@notify-help-search-background-image-path: url("../../pictos/help/recherche.png");
@notify-help-controls-background-image-path: url("../../pictos/help/controles.png");
@mainPointer-background-image-path: url("../../img/cursors/pointer.png");
@secondPointer-background-image-path: url("../../img/cursors/pointer2.png");

html
{
	//cursor: none;
}

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

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

/*
 * 
 */
.neighbourImgBg
{
    position: absolute;
	background-image: @mosaic-background-image-path;
}

/*
 * 
 */
.neighbourImg
{
    position: absolute;
}

video
{
	//position: absolute;
}

.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: 400;
}

.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: 400;
}

.notifications_inSearch_container
{
	position: absolute;
	background-color: #fff;
	background: transparent;
}

#notify_selection
{
	background-image: @notify-selection-background-image-path;
}

#notify_search
{
	background-image: @notify-search-background-image-path;
}

#notify_point
{
	background-image: @notify-point-background-image-path;
}

#notify_timeline
{
	background-image: @notify-timeline-background-image-path;
}

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

#help_search
{
	float: left;
	top: 0%;
	width: 50%;
	height: 100%;
	background: transparent;
}

#help_controls
{
	float: left;
	top: 0%;
	width: 50%;
	height: 100%;
	background: transparent;
}

#help_sep
{
	position: absolute;
	top: 10%;
	left: 50%;
	width: 1px;
	height: 80%;
	background-color: #fff;
}

#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;
}

#search_img
{
	background-image: @notify-help-search-background-image-path;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 225px;
}

#controls_img
{
	background-image: @notify-help-controls-background-image-path;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 225px;
}

#search_2hands_text, #search_body_text, #controls_1hand_text
{
	position: relative;
	clear: both;
	color: #fff;
	//font-family: DIN-Medium, Fallback, sans-serif;
	font-size: 15px;
	text-align: center;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*#search_2hands_imgs, #controls_1hand_imgs
{
	padding-left: 40px;
}*/

.notify_imgs_small
{
	float: left;
	width: 130px;
	height: 130px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

.notify_imgs_small
{
	margin: 4px;
}

.filterHiders
{
	position: absolute;
	background-color: #fff;
	background: transparent;
}

#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;
}

#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;
}

.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;
}