1 files changed, 824 insertions, 0 deletions
diff --git a/resources/screen.css b/resources/screen.css
new file mode 100644
index 0000000..50166bf
--- /dev/null
+++ b/resources/screen.css
@@ -0,0 +1,824 @@
+
+/**
+ * http://paletton.com/#uid=13A0u0kmuvOcIMPi8DgrvtKtUnq
+ */
+
+
+/* ********************************************************************************** */
+/*                         DISPOSITION DE PARTIES PRINCIPALES                         */
+/* ********************************************************************************** */
+
+
+html, body {
+
+	font-family: sans-serif;
+	margin: 0;
+	padding: 0;
+
+}
+
+#mw-wrapper {
+
+	max-width: 70em;
+	margin: 0 auto;
+
+    position: relative;
+
+}
+
+
+/* ********************************************************************************** */
+/*                           BARRES DE NAVIGATION LATERALES                           */
+/* ********************************************************************************** */
+
+
+/* Positions respectives */
+
+.left-navigation {
+
+    position: absolute;
+    left: -300px;
+
+}
+
+.right-navigation {
+
+    position: absolute;
+    right: -150px;
+
+}
+
+/* Emplacement vertical fixe (cf. classe 'header') */
+
+#mw-navigation > div {
+
+    position: fixed;
+
+    top: 160px;
+
+}
+
+/* Affichage / retrait des listes */
+
+#mw-navigation ul {
+
+	text-align: left;
+	margin: 0;
+    margin-top: 50px;
+	border: 1px solid transparent;
+
+	padding-left: 4px;
+    padding-top: 8px;
+	padding-right: 4px;
+    padding-bottom: 8px;
+
+}
+
+#mw-navigation ul:hover {
+
+	background-color: #fff;
+	border-color: #ccc;
+	border-radius: 2px;
+	box-shadow: 2px 2px 2px #999;
+
+}
+
+#mw-navigation ul li {
+
+	padding: 0px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+
+    margin: 0px;
+	list-style: none;
+	font-size: 0.875em;
+
+    opacity: 0.4;
+
+    /* Les images ne doivent pas être tronquées verticalement */
+    line-height: 32px;
+
+}
+
+#mw-navigation ul:hover li {
+
+    opacity: 0.8;
+
+}
+
+#mw-navigation ul li a {
+
+	display: block;
+
+    /* Fait de la place pour les images */
+    padding-left: 40px;
+
+    background-position: left center;
+	background-repeat: no-repeat;
+
+	white-space: nowrap;
+
+}
+
+#mw-navigation ul span {
+
+    visibility: hidden;
+
+}
+
+#mw-navigation ul:hover span {
+
+    visibility: visible;
+
+}
+
+/* Images associées par défaut */
+
+#pt-userpage a {
+
+    /**
+     * "User" par Philip Gwynne
+     * https://thenounproject.com/term/user/14219/
+     */
+    background-image: url('identity.png');
+
+}
+
+#pt-mytalk a {
+
+    /**
+     * "Chat" par Jaclyne Ooi
+     * https://thenounproject.com/term/chat/26692/
+	 */
+    background-image: url('chat.png');
+
+}
+
+#pt-preferences a {
+
+    /**
+     * "Configure" par Gonzalo Bravo
+     * https://thenounproject.com/term/configure/63054/
+	 */
+    background-image: url('preferences.png');
+
+}
+
+#pt-watchlist a {
+
+    /**
+     * "Eye" par Casper Jensen
+     * https://thenounproject.com/term/eye/104152/
+	 */
+    background-image: url('watchlist.png');
+
+}
+
+#pt-mycontris a {
+
+    /**
+     * "Share" par P.J. Onori
+     * https://thenounproject.com/term/share/2886/
+	 */
+    background-image: url('contribs.png');
+
+}
+
+#pt-logout a {
+
+    /**
+     * "Power" par Michela Tannoia
+     * https://thenounproject.com/term/power/25339/
+	 */
+    background-image: url('logout.png');
+
+}
+
+#ca-edit a {
+
+    /**
+     * "Document" par Cody Lawson
+     * https://thenounproject.com/term/document/4502/
+	 */
+    background-image: url('page.png');
+
+}
+
+#ca-history a {
+
+    /**
+     * "History" par Joe Mortell
+     * https://thenounproject.com/term/history/18126/
+	 */
+    background-image: url('history.png');
+
+}
+
+
+#ca-delete a {
+
+    /**
+     * "Trash Can" par Dima Kolchan
+     * https://thenounproject.com/term/trash-can/8119/
+     */
+    background-image: url('delete.png');
+
+}
+
+#ca-move a {
+
+    /**
+     * "Rename" par Icons8
+     * https://thenounproject.com/term/rename/61456/
+	 */
+    background-image: url('rename.png');
+
+}
+
+#ca-protect a {
+
+    /**
+     * "Shield" par Charlene Chen
+     * https://thenounproject.com/term/shield/7005/
+	 */
+    background-image: url('protect.png');
+
+}
+
+
+/* ********************************************************************************** */
+/*                             BARRE SUPERIEURE DES PAGES                             */
+/* ********************************************************************************** */
+
+
+/* Barre supérieure rétractable */
+
+header {
+
+    background: rgb(58,110,165);
+
+	width: 100%;
+	height: 170px;
+
+    /**
+      * Pour une image de taille 200px, si on a header.height à 170px,
+      * il reste ~30px à compenser.
+      *
+      * On laisse beaucoup de marge pour que le texte du contenu de la
+      * ne colle pas l'image de trop près.
+      *
+      * La taille totale doit être reportée dans 'mw-wrapper'.
+      */
+
+    margin-bottom: 60px;
+
+}
+
+header.sticky {
+
+	position: fixed;
+    top: 0px;
+
+    height: 50px;
+
+    margin-bottom: 0px;
+
+    z-index: 8000;
+
+}
+
+
+header ~ div.extender {
+
+    display: none;
+
+}
+
+header.sticky ~ div.extender {
+
+    display: block;
+
+    /**
+     * On doit compenser les hauteurs ici.
+     *
+     * Par exemple : (170 + 60) = (50 + x)
+     *                      180 = x
+     */
+
+    height: 180px;
+
+}
+
+header a, header a:hover, header a:focus {
+
+    text-deoration: none;
+    color: black;
+    opacity: 0.8;
+
+}
+
+
+/* ********************************************************************************** */
+/*                                LOGO EN HAUT DU SITE                                */
+/* ********************************************************************************** */
+
+
+#p-logo {
+
+	float: left;
+	text-align: right;
+
+    margin-left: 20px;
+
+    width: 620px;
+
+    position: relative;
+    top: 111px;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+
+    opacity: 1.0;
+
+}
+
+header #p-logo {
+
+    top: 111px;
+
+}
+
+header #p-logo img.big {
+
+    display: initial;
+
+}
+
+header #p-logo img.small {
+
+    display: none;
+
+}
+
+header.sticky #p-logo {
+
+    top: 26px;
+
+}
+
+header.sticky #p-logo img.big {
+
+    display: none;
+
+}
+
+header.sticky #p-logo img.small {
+
+    display: initial;
+
+    height: 47px;
+
+}
+
+
+/* ********************************************************************************** */
+/*                           BARRE DE NAVIGATION SUPERIEURE                           */
+/* ********************************************************************************** */
+
+
+/* Barre supérieure de menu */
+#p-navigation {
+
+    display:inline-block;
+
+    position: relative;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+
+}
+
+#p-navigation ul {
+
+	list-style-type: none;
+	margin: 0;
+
+}
+
+#p-navigation ul li {
+
+	display: inline-block;
+	margin-left: 1em;
+	margin-right: 2em;
+
+    text-align: center;
+
+}
+
+#p-navigation a {
+
+    color: white;
+    opacity: 0.7;
+
+    font-weight: bold;
+
+    text-decoration: none;
+
+}
+
+#p-navigation a:hover, #p-navigation a:focus {
+
+    opacity: 1.0;
+
+}
+
+
+/* On cache certains en-têtes */
+#mw-navigation h2, #p-navigation h3, #p-search h3 {
+
+    display: none;
+
+}
+
+
+/* Conteneur final */
+
+.link_icon span {
+
+    white-space: nowrap;
+
+}
+
+header .link_icon {
+
+    visibility: visible;
+
+    padding-top: 70px;
+
+    background-position: center top;
+    background-repeat: no-repeat;
+
+}
+
+header.sticky .link_icon {
+
+    padding-top: 0px;
+
+    background-image: none;
+
+}
+
+
+/* Eléments du menu de navigation supérieur */
+
+header:not([class~=sticky]) #n-screenshots-desc .link_icon {
+
+    /**
+     * "Camera" par Haitham Almayman
+     * https://thenounproject.com/term/camera/76991/
+     */
+    background-image: url('screenshots.png');
+
+}
+
+header:not([class~=sticky]) #n-documentation-desc .link_icon {
+
+    /**
+     * "Books" par Les vieux garçons
+     * https://thenounproject.com/term/books/51607/
+     */
+    background-image: url('documentation.png');
+
+}
+
+header:not([class~=sticky]) #n-download-desc .link_icon {
+
+    /**
+     * "Download" par Alexander Bickov
+     * https://thenounproject.com/term/download/29328/
+     */
+    background-image: url('download.png');
+
+}
+
+header:not([class~=sticky]) #n-activity-desc .link_icon {
+
+    /**
+     * "Write" par Lemon Liu
+     * https://thenounproject.com/term/write/21211/
+     */
+    background-image: url('blog.png');
+
+}
+
+header:not([class~=sticky]) #n-contact-desc .link_icon {
+
+    /**
+     * "Contact" par Icons8
+     * https://thenounproject.com/term/contact/50339/
+     */
+    background-image: url('contact.png');
+
+}
+
+
+/* ********************************************************************************** */
+/*                         SOUS-MENUS DE LA PARTIE SUPERIEURE                         */
+/* ********************************************************************************** */
+
+
+#myMenu {
+
+    z-index: 100000;
+
+    position: fixed;
+
+	text-align: left;
+	padding: 8px;
+
+    padding-left: 20px;
+    padding-right: 20px;
+
+}
+
+#myMenu a {
+
+    display: block;
+
+    color: #205c9a;
+    opacity: 0.9;
+
+    font-weight: bold;
+
+    text-decoration: none;
+
+    line-height: 160%;
+
+}
+
+#myMenu a:hover {
+
+    color: white;
+    opacity: 1.0;
+
+}
+
+
+/* Cf. http://www.cssarrowplease.com/ */
+
+.menu_arrow_box {
+
+    background: #88afd8;
+    border: 1px solid #fff;
+
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+
+}
+
+.menu_arrow_box:after, .menu_arrow_box:before {
+
+    bottom: 100%;
+    left: 50%;
+
+    border: solid transparent;
+
+    content: " ";
+
+    height: 0;
+    width: 0;
+
+    position: absolute;
+    pointer-events: none;
+
+}
+
+.menu_arrow_box:after {
+
+    border-color: rgba(0, 0, 0, 0);
+    border-bottom-color: #88afd8;
+
+    border-width: 13px;
+    margin-left: -13px;
+
+}
+
+.menu_arrow_box:before {
+
+    border-color: rgba(0, 0, 0, 0);
+    border-bottom-color: #fff;
+
+    border-width: 15px;
+    margin-left: -15px;
+
+}
+
+
+/* ********************************************************************************** */
+/*                                    PIED DE PAGE                                    */
+/* ********************************************************************************** */
+
+
+#mw-footer {
+
+    margin-top: 23px;
+	padding: 0.6em;
+	padding-bottom: 0.4em;
+
+    border: 1px solid rgb(32, 92, 154);
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+
+    background-color: rgb(58,110,165);
+
+    display:table;
+    width: 100%;
+
+    position:absolute;
+	bottom:0;
+
+}
+
+#mw-footer ul {
+
+	list-style-type: none;
+	margin: 0;
+
+}
+
+#mw-footer ul li {
+
+	display: inline-block;
+	margin-right: 1em;
+
+}
+
+#mw-footer ul#poweredby {
+
+    display:table-cell;
+    vertical-align: middle;
+    text-align: left;
+
+}
+
+#mw-footer ul#lastmod {
+
+    display:table-cell;
+    vertical-align: middle;
+    text-align: center;
+
+    color: white;
+    opacity: 0.7;
+
+}
+
+#mw-footer ul#links {
+
+    display:table-cell;
+    vertical-align: middle;
+    text-align: right;
+
+}
+
+/* On colle le pied de page toujours en bas */
+
+html, body {
+
+    height: 100%;
+
+}
+
+#mw-wrapper {
+
+    /* 230px = header[.sticky].height + div.extender.height */
+    min-height: calc(100% - 230px);
+
+}
+
+#mw-footer {
+
+    position:absolute;
+	bottom:0;
+
+}
+
+.mw-body {
+
+    /**
+      * On reste un espace pour le pied de page, avec marge :
+      *
+      * 69px + 2em ~= #mw-footer.height + marge
+      */
+    padding-bottom: calc(69px + 2em);
+
+}
+
+
+/* ********************************************************************************** */
+/*                                  PARTIES COMMUNES                                  */
+/* ********************************************************************************** */
+
+
+/* Marge des images insérées dans du texte */
+
+a.image > img {
+
+    margin: 20px;
+
+}
+
+
+/* Sommaire */
+
+.toc {
+
+    /*background: #88afd8;*/
+    border: 2px solid #3a6ea5;
+    border: 2px solid #88afd8;
+	border-radius: 8px;
+
+    margin: 20px;
+
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-bottom: 8px;
+
+    float: right;
+    display: table;
+
+}
+
+.toctoggle {
+
+    display: none;
+
+}
+
+.toclevel-1 {
+
+    margin-top: 10px;
+
+    list-style-type: square;
+
+}
+
+body:not(.page-Page_Main):not(.page-Accueil) *:not(#toctitle):not(.h2) > h2 {
+
+    position: relative;
+    left: -30px;
+
+    padding-left: 30px;
+    padding-right: 30px;
+
+    border-bottom: 2px solid rgb(58, 110, 165);
+
+    display: inline-block;
+    margin: 0px;
+    margin-top: 20px;
+
+    clear: both;
+
+}
+
+pre {
+
+    border: 2px dashed;
+    border-left: 8px solid;
+    border-color: rgb(58, 110, 165);
+
+    padding: 10px;
+    padding-right: 50px;
+
+    margin-left: 40px;
+
+    font-size: 120%;
+
+    display: table;
+    white-space: pre-wrap;
+
+}
+
+a {
+
+    text-decoration: none;
+
+}
+
+
+/**
+ * Par défaut, une image centrée reste à gauche...
+ * On force donc un comportement correct.
+ *
+ * Le code permettant de valider le résultat attendu est du  genre :
+ *
+ *    [[File:XXX.png|center]]
+ *
+ */
+div.center {
+
+    text-align: center;
+
+}