diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/blog.png | bin | 0 -> 1183 bytes | |||
| -rw-r--r-- | resources/chat.png | bin | 0 -> 747 bytes | |||
| -rw-r--r-- | resources/contact.png | bin | 0 -> 2071 bytes | |||
| -rw-r--r-- | resources/contribs.png | bin | 0 -> 724 bytes | |||
| -rw-r--r-- | resources/delete.png | bin | 0 -> 860 bytes | |||
| -rw-r--r-- | resources/documentation.png | bin | 0 -> 1986 bytes | |||
| -rw-r--r-- | resources/download.png | bin | 0 -> 1206 bytes | |||
| -rw-r--r-- | resources/dynmenu.js | 91 | ||||
| -rw-r--r-- | resources/history.png | bin | 0 -> 920 bytes | |||
| -rw-r--r-- | resources/identity.png | bin | 0 -> 608 bytes | |||
| -rw-r--r-- | resources/logout.png | bin | 0 -> 770 bytes | |||
| -rw-r--r-- | resources/page.png | bin | 0 -> 773 bytes | |||
| -rw-r--r-- | resources/preferences.png | bin | 0 -> 758 bytes | |||
| -rw-r--r-- | resources/protect.png | bin | 0 -> 1027 bytes | |||
| -rw-r--r-- | resources/rename.png | bin | 0 -> 615 bytes | |||
| -rw-r--r-- | resources/screen.css | 824 | ||||
| -rw-r--r-- | resources/screenshots.png | bin | 0 -> 1550 bytes | |||
| -rw-r--r-- | resources/watchlist.png | bin | 0 -> 682 bytes |
18 files changed, 915 insertions, 0 deletions
diff --git a/resources/blog.png b/resources/blog.png Binary files differnew file mode 100644 index 0000000..9ad7e34 --- /dev/null +++ b/resources/blog.png diff --git a/resources/chat.png b/resources/chat.png Binary files differnew file mode 100644 index 0000000..1356422 --- /dev/null +++ b/resources/chat.png diff --git a/resources/contact.png b/resources/contact.png Binary files differnew file mode 100644 index 0000000..22c5354 --- /dev/null +++ b/resources/contact.png diff --git a/resources/contribs.png b/resources/contribs.png Binary files differnew file mode 100644 index 0000000..98e01d6 --- /dev/null +++ b/resources/contribs.png diff --git a/resources/delete.png b/resources/delete.png Binary files differnew file mode 100644 index 0000000..b994897 --- /dev/null +++ b/resources/delete.png diff --git a/resources/documentation.png b/resources/documentation.png Binary files differnew file mode 100644 index 0000000..617a119 --- /dev/null +++ b/resources/documentation.png diff --git a/resources/download.png b/resources/download.png Binary files differnew file mode 100644 index 0000000..b5f9fe2 --- /dev/null +++ b/resources/download.png diff --git a/resources/dynmenu.js b/resources/dynmenu.js new file mode 100644 index 0000000..a10296b --- /dev/null +++ b/resources/dynmenu.js @@ -0,0 +1,91 @@ + +var last_popped = null; +var popped_in_use = false; + +var last_timeout = null; + +function prepareLastPopped(evt) { + + last_popped.onmouseleave = removeLastPopped; + + popped_in_use = true; + +} + +function removeLastPopped(evt) { + + if (last_popped != null) { + + last_popped.parentNode.removeChild(last_popped); + last_popped = null; + + } + +} + +function forcePoppedHiding(evt) { + + function cancelPopping() { + + last_timeout = null; + + if (!popped_in_use) { + + removeLastPopped(null); + + } + + } + + last_timeout = setTimeout(cancelPopping, 500); + +} + +function showMenu(target, inner) { + + function waitForEvent(evt) { + + if (last_timeout != null) { + + clearTimeout(last_timeout); + last_timeout = null; + + } + + removeLastPopped(null); + + if (inner == null) + return; + + var menubar = document.createElement('div'); + + menubar.id = 'myMenu'; + menubar.className = 'menu_arrow_box' + menubar.innerHTML = inner ; + document.body.insertBefore(menubar, document.body.childNodes[0]); + + var rect = target.getBoundingClientRect(); + var menu_rect = menubar.getBoundingClientRect(); + + menubar.style.left = (rect.left - (menu_rect.width - rect.width) / 2) + "px"; + menubar.style.top = (rect.bottom + 20) + "px"; + + last_popped = menubar; + popped_in_use = false; + + menubar.onmouseenter = prepareLastPopped; + target.onmouseleave = forcePoppedHiding; + + } + + return waitForEvent; + +} + +function addMenuToID(id, inner) { + + var target = document.getElementById(id); + + target.onmouseenter = showMenu(target, inner); + +} diff --git a/resources/history.png b/resources/history.png Binary files differnew file mode 100644 index 0000000..6fd4eb4 --- /dev/null +++ b/resources/history.png diff --git a/resources/identity.png b/resources/identity.png Binary files differnew file mode 100644 index 0000000..d3efc46 --- /dev/null +++ b/resources/identity.png diff --git a/resources/logout.png b/resources/logout.png Binary files differnew file mode 100644 index 0000000..230858b --- /dev/null +++ b/resources/logout.png diff --git a/resources/page.png b/resources/page.png Binary files differnew file mode 100644 index 0000000..fc0015c --- /dev/null +++ b/resources/page.png diff --git a/resources/preferences.png b/resources/preferences.png Binary files differnew file mode 100644 index 0000000..ef43654 --- /dev/null +++ b/resources/preferences.png diff --git a/resources/protect.png b/resources/protect.png Binary files differnew file mode 100644 index 0000000..fbe32e9 --- /dev/null +++ b/resources/protect.png diff --git a/resources/rename.png b/resources/rename.png Binary files differnew file mode 100644 index 0000000..7771959 --- /dev/null +++ b/resources/rename.png 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; + +} diff --git a/resources/screenshots.png b/resources/screenshots.png Binary files differnew file mode 100644 index 0000000..59f6574 --- /dev/null +++ b/resources/screenshots.png diff --git a/resources/watchlist.png b/resources/watchlist.png Binary files differnew file mode 100644 index 0000000..cafa19e --- /dev/null +++ b/resources/watchlist.png |
