/*
* 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;
}
@font-face
{
font-family: "PT Sans"; src: url(fonts/PT_Sans-Web-Regular.ttf);
}
@font-face
{
font-family: "PT Sans"; font-weight: bold; src: url(fonts/PT_Sans-Web-Bold.ttf);
}
/*
* Style du corps.
*/
body
{
overflow: hidden;
background-color: @black;
background-image: @mosaic-background-image-path;
background-repeat: repeat;
font-family: "PT Sans", sans-serif;
}
/*
* 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%;
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: 16px;
}
.credits_film
{
font-weight: bold;
font-size: 22px;
}
.credits_body
{
font-size: 20px;
}
.credits_text
{
color: #000000;
}
#help_details_left_container table td, #help_details_right_container table td{
padding-right: 10px;
}