diff options
Diffstat (limited to 'resources')
-rw-r--r-- | resources/dynmenu.js | 76 | ||||
-rw-r--r-- | resources/screen.css | 504 |
2 files changed, 290 insertions, 290 deletions
diff --git a/resources/dynmenu.js b/resources/dynmenu.js index a10296b..db38727 100644 --- a/resources/dynmenu.js +++ b/resources/dynmenu.js @@ -6,86 +6,86 @@ var last_timeout = null; function prepareLastPopped(evt) { - last_popped.onmouseleave = removeLastPopped; + last_popped.onmouseleave = removeLastPopped; - popped_in_use = true; + popped_in_use = true; } function removeLastPopped(evt) { - if (last_popped != null) { + if (last_popped != null) { - last_popped.parentNode.removeChild(last_popped); - last_popped = null; + last_popped.parentNode.removeChild(last_popped); + last_popped = null; - } + } } function forcePoppedHiding(evt) { - function cancelPopping() { + function cancelPopping() { - last_timeout = null; + last_timeout = null; - if (!popped_in_use) { + if (!popped_in_use) { - removeLastPopped(null); + removeLastPopped(null); - } + } - } + } - last_timeout = setTimeout(cancelPopping, 500); + last_timeout = setTimeout(cancelPopping, 500); } function showMenu(target, inner) { - function waitForEvent(evt) { + function waitForEvent(evt) { - if (last_timeout != null) { + if (last_timeout != null) { - clearTimeout(last_timeout); - last_timeout = null; + clearTimeout(last_timeout); + last_timeout = null; - } + } - removeLastPopped(null); + removeLastPopped(null); - if (inner == null) - return; + if (inner == null) + return; - var menubar = document.createElement('div'); + var menubar = document.createElement('div'); - menubar.id = 'myMenu'; - menubar.className = 'menu_arrow_box' - menubar.innerHTML = inner ; - document.body.insertBefore(menubar, document.body.childNodes[0]); + 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(); + 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"; + 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; + last_popped = menubar; + popped_in_use = false; - menubar.onmouseenter = prepareLastPopped; - target.onmouseleave = forcePoppedHiding; + menubar.onmouseenter = prepareLastPopped; + target.onmouseleave = forcePoppedHiding; - } + } - return waitForEvent; + return waitForEvent; } function addMenuToID(id, inner) { - var target = document.getElementById(id); + var target = document.getElementById(id); - target.onmouseenter = showMenu(target, inner); + target.onmouseenter = showMenu(target, inner); } diff --git a/resources/screen.css b/resources/screen.css index 4366a5b..0b74aa3 100644 --- a/resources/screen.css +++ b/resources/screen.css @@ -22,7 +22,7 @@ html, body { max-width: 70em; margin: 0 auto; - position: relative; + position: relative; } @@ -36,15 +36,15 @@ html, body { .left-navigation { - position: absolute; - left: -300px; + position: absolute; + left: -300px; } .right-navigation { - position: absolute; - right: -150px; + position: absolute; + right: -150px; } @@ -52,9 +52,9 @@ html, body { #mw-navigation > div { - position: fixed; + position: fixed; - top: 160px; + top: 160px; } @@ -64,13 +64,13 @@ html, body { text-align: left; margin: 0; - margin-top: 50px; + margin-top: 50px; border: 1px solid transparent; padding-left: 4px; - padding-top: 8px; + padding-top: 8px; padding-right: 4px; - padding-bottom: 8px; + padding-bottom: 8px; } @@ -86,23 +86,23 @@ html, body { #mw-navigation ul li { padding: 0px; - padding-top: 2px; - padding-bottom: 2px; + padding-top: 2px; + padding-bottom: 2px; - margin: 0px; + margin: 0px; list-style: none; font-size: 0.875em; - opacity: 0.4; + opacity: 0.4; - /* Les images ne doivent pas être tronquées verticalement */ - line-height: 32px; + /* Les images ne doivent pas être tronquées verticalement */ + line-height: 32px; } #mw-navigation ul:hover li { - opacity: 0.8; + opacity: 0.8; } @@ -110,10 +110,10 @@ html, body { display: block; - /* Fait de la place pour les images */ - padding-left: 40px; + /* Fait de la place pour les images */ + padding-left: 40px; - background-position: left center; + background-position: left center; background-repeat: no-repeat; white-space: nowrap; @@ -122,13 +122,13 @@ html, body { #mw-navigation ul span { - visibility: hidden; + visibility: hidden; } #mw-navigation ul:hover span { - visibility: visible; + visibility: visible; } @@ -136,112 +136,112 @@ html, body { #pt-userpage a { - /** - * "User" par Philip Gwynne - * https://thenounproject.com/term/user/14219/ - */ - background-image: url('identity.png'); + /** + * "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/ + /** + * "Chat" par Jaclyne Ooi + * https://thenounproject.com/term/chat/26692/ */ - background-image: url('chat.png'); + background-image: url('chat.png'); } #pt-preferences a { - /** - * "Configure" par Gonzalo Bravo - * https://thenounproject.com/term/configure/63054/ + /** + * "Configure" par Gonzalo Bravo + * https://thenounproject.com/term/configure/63054/ */ - background-image: url('preferences.png'); + background-image: url('preferences.png'); } #pt-watchlist a { - /** - * "Eye" par Casper Jensen - * https://thenounproject.com/term/eye/104152/ + /** + * "Eye" par Casper Jensen + * https://thenounproject.com/term/eye/104152/ */ - background-image: url('watchlist.png'); + background-image: url('watchlist.png'); } #pt-mycontris a { - /** - * "Share" par P.J. Onori - * https://thenounproject.com/term/share/2886/ + /** + * "Share" par P.J. Onori + * https://thenounproject.com/term/share/2886/ */ - background-image: url('contribs.png'); + background-image: url('contribs.png'); } #pt-logout a { - /** - * "Power" par Michela Tannoia - * https://thenounproject.com/term/power/25339/ + /** + * "Power" par Michela Tannoia + * https://thenounproject.com/term/power/25339/ */ - background-image: url('logout.png'); + background-image: url('logout.png'); } #ca-edit a { - /** - * "Document" par Cody Lawson - * https://thenounproject.com/term/document/4502/ + /** + * "Document" par Cody Lawson + * https://thenounproject.com/term/document/4502/ */ - background-image: url('page.png'); + background-image: url('page.png'); } #ca-history a { - /** - * "History" par Joe Mortell - * https://thenounproject.com/term/history/18126/ + /** + * "History" par Joe Mortell + * https://thenounproject.com/term/history/18126/ */ - background-image: url('history.png'); + 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'); + /** + * "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/ + /** + * "Rename" par Icons8 + * https://thenounproject.com/term/rename/61456/ */ - background-image: url('rename.png'); + background-image: url('rename.png'); } #ca-protect a { - /** - * "Shield" par Charlene Chen - * https://thenounproject.com/term/shield/7005/ + /** + * "Shield" par Charlene Chen + * https://thenounproject.com/term/shield/7005/ */ - background-image: url('protect.png'); + background-image: url('protect.png'); } @@ -255,65 +255,65 @@ html, body { header { - background: rgb(58,110,165); + 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'. - */ + /** + * 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; + margin-bottom: 60px; } header.sticky { position: fixed; - top: 0px; + top: 0px; - height: 50px; + height: 50px; - margin-bottom: 0px; + margin-bottom: 0px; - z-index: 8000; + z-index: 8000; } header ~ div.extender { - display: none; + display: none; } header.sticky ~ div.extender { - display: block; + display: block; - /** - * On doit compenser les hauteurs ici. - * - * Par exemple : (170 + 60) = (50 + x) - * 180 = x - */ + /** + * On doit compenser les hauteurs ici. + * + * Par exemple : (170 + 60) = (50 + x) + * 180 = x + */ - height: 180px; + height: 180px; } header a, header a:hover, header a:focus { - text-deoration: none; - color: black; - opacity: 0.8; + text-deoration: none; + color: black; + opacity: 0.8; } @@ -328,55 +328,55 @@ header a, header a:hover, header a:focus { float: left; text-align: right; - margin-left: 20px; + margin-left: 20px; - width: 620px; + width: 620px; - position: relative; - top: 111px; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); + position: relative; + top: 111px; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); - opacity: 1.0; + opacity: 1.0; } header #p-logo { - top: 111px; + top: 111px; } header #p-logo img.big { - display: initial; + display: initial; } header #p-logo img.small { - display: none; + display: none; } header.sticky #p-logo { - top: 26px; + top: 26px; } header.sticky #p-logo img.big { - display: none; + display: none; } header.sticky #p-logo img.small { - display: initial; + display: initial; - height: 47px; + height: 47px; } @@ -389,13 +389,13 @@ header.sticky #p-logo img.small { /* Barre supérieure de menu */ #p-navigation { - display:inline-block; + display:inline-block; - position: relative; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); + position: relative; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } @@ -412,24 +412,24 @@ header.sticky #p-logo img.small { margin-left: 1em; margin-right: 2em; - text-align: center; + text-align: center; } #p-navigation a { - color: white; - opacity: 0.7; + color: white; + opacity: 0.7; - font-weight: bold; + font-weight: bold; - text-decoration: none; + text-decoration: none; } #p-navigation a:hover, #p-navigation a:focus { - opacity: 1.0; + opacity: 1.0; } @@ -437,7 +437,7 @@ header.sticky #p-logo img.small { /* On cache certains en-têtes */ #mw-navigation h2, #p-navigation h3, #p-search h3 { - display: none; + display: none; } @@ -446,26 +446,26 @@ header.sticky #p-logo img.small { .link_icon span { - white-space: nowrap; + white-space: nowrap; } header .link_icon { - visibility: visible; + visibility: visible; - padding-top: 70px; + padding-top: 70px; - background-position: center top; - background-repeat: no-repeat; + background-position: center top; + background-repeat: no-repeat; } header.sticky .link_icon { - padding-top: 0px; + padding-top: 0px; - background-image: none; + background-image: none; } @@ -474,51 +474,51 @@ header.sticky .link_icon { header:not([class~=sticky]) #n-screenshots-desc .link_icon { - /** - * "Camera" par Haitham Almayman - * https://thenounproject.com/term/camera/76991/ - */ - background-image: url('screenshots.png'); + /** + * "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'); + /** + * "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'); + /** + * "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'); + /** + * "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'); + /** + * "Contact" par Icons8 + * https://thenounproject.com/term/contact/50339/ + */ + background-image: url('contact.png'); } @@ -530,37 +530,37 @@ header:not([class~=sticky]) #n-contact-desc .link_icon { #myMenu { - z-index: 100000; + z-index: 100000; - position: fixed; + position: fixed; text-align: left; padding: 8px; - padding-left: 20px; - padding-right: 20px; + padding-left: 20px; + padding-right: 20px; } #myMenu a { - display: block; + display: block; - color: #205c9a; - opacity: 0.9; + color: #205c9a; + opacity: 0.9; - font-weight: bold; + font-weight: bold; - text-decoration: none; + text-decoration: none; - line-height: 160%; + line-height: 160%; } #myMenu a:hover { - color: white; - opacity: 1.0; + color: white; + opacity: 1.0; } @@ -569,50 +569,50 @@ header:not([class~=sticky]) #n-contact-desc .link_icon { .menu_arrow_box { - background: #88afd8; - border: 1px solid #fff; + 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; + 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%; + bottom: 100%; + left: 50%; - border: solid transparent; + border: solid transparent; - content: " "; + content: " "; - height: 0; - width: 0; + height: 0; + width: 0; - position: absolute; - pointer-events: none; + position: absolute; + pointer-events: none; } .menu_arrow_box:after { - border-color: rgba(0, 0, 0, 0); - border-bottom-color: #88afd8; + border-color: rgba(0, 0, 0, 0); + border-bottom-color: #88afd8; - border-width: 13px; - margin-left: -13px; + border-width: 13px; + margin-left: -13px; } .menu_arrow_box:before { - border-color: rgba(0, 0, 0, 0); - border-bottom-color: #fff; + border-color: rgba(0, 0, 0, 0); + border-bottom-color: #fff; - border-width: 15px; - margin-left: -15px; + border-width: 15px; + margin-left: -15px; } @@ -624,20 +624,20 @@ header:not([class~=sticky]) #n-contact-desc .link_icon { #mw-footer { - margin-top: 23px; + 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; + border: 1px solid rgb(32, 92, 154); + border-top-left-radius: 25px; + border-top-right-radius: 25px; - background-color: rgb(58,110,165); + background-color: rgb(58,110,165); - display:table; - width: 100%; + display:table; + width: 100%; - position:absolute; + position:absolute; bottom:0; } @@ -658,28 +658,28 @@ header:not([class~=sticky]) #n-contact-desc .link_icon { #mw-footer ul#poweredby { - display:table-cell; - vertical-align: middle; - text-align: left; + display:table-cell; + vertical-align: middle; + text-align: left; } #mw-footer ul#lastmod { - display:table-cell; - vertical-align: middle; - text-align: center; + display:table-cell; + vertical-align: middle; + text-align: center; - color: white; - opacity: 0.7; + color: white; + opacity: 0.7; } #mw-footer ul#links { - display:table-cell; - vertical-align: middle; - text-align: right; + display:table-cell; + vertical-align: middle; + text-align: right; } @@ -687,32 +687,32 @@ header:not([class~=sticky]) #n-contact-desc .link_icon { html, body { - height: 100%; + height: 100%; } #mw-wrapper { - /* 230px = header[.sticky].height + div.extender.height */ - min-height: calc(100% - 230px); + /* 230px = header[.sticky].height + div.extender.height */ + min-height: calc(100% - 230px); } #mw-footer { - position:absolute; + 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); + /** + * On reste un espace pour le pied de page, avec marge : + * + * 69px + 2em ~= #mw-footer.height + marge + */ + padding-bottom: calc(69px + 2em); } @@ -726,75 +726,75 @@ html, body { .toc { - /*background: #88afd8;*/ - border: 2px solid #3a6ea5; - border: 2px solid #88afd8; + /*background: #88afd8;*/ + border: 2px solid #3a6ea5; + border: 2px solid #88afd8; border-radius: 8px; - margin: 20px; + margin: 20px; - padding-left: 25px; - padding-right: 25px; - padding-bottom: 8px; + padding-left: 25px; + padding-right: 25px; + padding-bottom: 8px; - float: right; - display: table; + float: right; + display: table; } .toctoggle { - display: none; + display: none; } .toclevel-1 { - margin-top: 10px; + margin-top: 10px; - list-style-type: square; + list-style-type: square; } body:not(.page-Page_Main):not(.page-Accueil):not(.page-Chrysalide) *:not(#toctitle):not(.h2) > h2 { - position: relative; - left: -30px; + position: relative; + left: -30px; - padding-left: 30px; - padding-right: 30px; + padding-left: 30px; + padding-right: 30px; - border-bottom: 2px solid rgb(58, 110, 165); + border-bottom: 2px solid rgb(58, 110, 165); - display: inline-block; - margin: 0px; - margin-top: 20px; + display: inline-block; + margin: 0px; + margin-top: 20px; - clear: both; + clear: both; } pre { - border: 2px dashed; - border-left: 8px solid; - border-color: rgb(58, 110, 165); + border: 2px dashed; + border-left: 8px solid; + border-color: rgb(58, 110, 165); - padding: 10px; - padding-right: 50px; + padding: 10px; + padding-right: 50px; - margin-left: 40px; + margin-left: 40px; - font-size: 120%; + font-size: 120%; - display: table; - white-space: pre-wrap; + display: table; + white-space: pre-wrap; } a { - text-decoration: none; + text-decoration: none; } @@ -803,13 +803,13 @@ a { * 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 : + * Le code permettant de valider le résultat attendu est du genre : * - * [[File:XXX.png|center]] + * [[File:XXX.png|center]] * */ div.center { - text-align: center; + text-align: center; } |