added some docs and illustrations

README.md

@@ -1,3 +1,17 @@
 # Open Sand Glass One
 
-Prototype d'une apparence de One qui utilise le flou d'arrière plan, des jeux de transparences, des ombres et des angles arrondies, un peu a la façon d'un thème MacOS.
+Prototype d'une apparence de One qui utilise le flou d'arrière plan, des jeux de transparences, des ombres et des angles arrondies, un peu a la façon d'un thème MacOS.  
+
+Le travaille vise a valoriser le thème pour renforcer le sentiment d'appropriation de l'utilisateur, et de réduire les autres décorations de l'interface afin de l'épurer et de valoriser le contenu.  
+
+![Illutration d'un fil de nouveauté](./pub/Timeline_idle.v01.png)
+
+Exemple de fil de nouveauté avec un thème *Nénuphares*. On observe l'arrière plan flou, les angles arrondies pour la pluparts des éléments et le corps de la page qui remplacent les bordures.  
+
+![Illustration d'un fil de nouveauté avec les boutons de filtrage](./pub/Timeline_with_filter.v01.png)
+
+Exemple de fil de nouveauté avec le thème *Forêt*. On observe que le système de filtrage du fil est devenue une carte et s'est développé pour faire apparaitre tout les filtres disponibles. Chaques filtres indique son status activé ou non par un code visuel utilisant  un arrière plan coloré ou transparent, un texte blanc ou gris, et un contour lorsque le bouton est désactivé.  
+
+![Illustration de la page Mes Applis](pub/MyApps.v01.png)
+
+Exemple de page Mes Applis ave le thème *Automne*. La barre de recherche est allégée et centrée pour correspondre à la largeur de la grille des applications.  

xstyle.css

@@ -0,0 +1,94 @@
+@-moz-document domain("opendigitaleducation.com") {
+    .container section.main {
+        backdrop-filter: blur(30px);
+        background: rgba(255, 255, 255, 0.66) !important;
+        border-radius: 24px 24px 0 0 !important;
+    }
+    .navbar {
+        backdrop-filter: blur(30px);
+        background-image: linear-gradient( rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.66)) !important;
+    }
+    ul.icons-tabs {
+        top: 30px;
+    }
+    div[ng-include="template.containers.main"] > input[type=search] {
+        margin: auto;
+        width: 90%;
+        /* margin: 0 50px; */
+        border: none;
+        border-bottom: 1px solid darkgrey;
+        background: none;
+        /* padding: 0 50px; */
+        float: none;
+    }
+    .notification {
+        border: none;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.80);
+    }
+    .widgets .news,
+    .qwant,
+    .qwant-junior,
+    .mood-widget,
+    .dicodelazone,
+    .widgets .recorder--audio,
+    .birthday {
+        border: none;
+        border-radius: 12px;
+    }
+    .widgets h1 {
+        border-radius: 12px 12px 0 0 !important;
+        text-align: center;
+    }
+    .widgets .news .new {
+        border-radius: 0 0 12px 12px;
+    }
+    .drop-down-block {
+        padding: 10px;
+        border-radius: 12px;
+        /*transition: background-color 500ms linear, margin 500ms linear;*/
+        transition: background-color 100ms cubic-bezier(0.22, 0.61, 0.36, 1);
+        margin-bottom: 30px;
+    }
+    .drop-down-block:hover {
+        background: rgba(255, 255, 255, 0.66);
+    }
+    .drop-down-block.slided {
+        background: rgba(255, 255, 255, 0.66);
+        /*margin-bottom: 30px;*/
+    }
+    .drop-down-label,
+    .drop-down-label:hover {
+        border: none !important;
+        margin-bottom: 0 !important;
+    }
+    .drop-down-block .drop-down-label + .drop-down-info {
+        top: 0;
+        padding: 1.5em;
+    }
+    .chip {
+        transition: all 100ms cubic-bezier(0.22, 0.61, 0.36, 1);
+        background: none;
+        box-shadow: 0px 0px 0px 1px darkgray !important;
+        text-shadow: none !important;
+    }
+    .chip *,
+    .chip > i {
+        color: gray !important;
+    }
+    .chip:hover {
+        /*box-shadow: 0px 0px 0px 2px white !important;*/
+    }
+    .chip.selected {
+        box-shadow: none !important;
+    }
+    .chip.selected > * {
+        color: white !important;
+    }
+    .chip.multiselect {
+        box-shadow: none !important;
+    }
+    .chip.multiselect * {
+        color: white !important;
+    }
+}