--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/mosaic/css/mosaic.less Fri Apr 27 14:38:23 2012 +0200
@@ -0,0 +1,107 @@
+/*
+* 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;
+}
\ No newline at end of file