MediaWiki:Mobile.css
De fablabo
Révision de 3 juillet 2019 à 00:20 par LaurentM (discussion | contributions)
Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : Maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac) ;
- Google Chrome : Appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac) ;
- Internet Explorer : Maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ;
- Opera : Allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d'exploration → Images et fichiers en cache.
/* ################################################################################################## ## V E C T O R F A B L A B O ## ################################################################################################## ## public/fablabo/mediawiki-1.27.0 SKIN USING DEFAULT VECTOR SKIN ## ################################################################################################## ## ## ## Développé pour le site : FABLABO.NET (http://fablabo.net) ## ## par : Gaëtan CIEPLICKI (https://github.com/divag) ## ## pour : PiNG (http://wwww.pingbase.net) ## ## ## ################################################################################################## ## ## ## Feuille CSS de la skin vectorfablabo, skin public/fablabo/mediawiki-1.27.0 ## ## qui étend la skin Vector. ## ## ## ################################################################################################## */ /* ========================= Less ========================= */ /* ------------------- */ /* définition couleurs */ /* Main Primary color */ /* -------------------- */ /* attribution couleurs */ /* =========================== Fond et polices générales : =========================== */ /* ----------------------- */ /* Polices (definitions) : */ @font-face { font-family: 'vagrounded'; src: url('/public/fablabo/public/fablabo/mediawiki-1.27.0-1.27.0/skins/VectorFablabo/resources/fonts/vagrounded.ttf'); src: local('☺'), url('skins/VectorFablabo/resources/fonts/vagrounded.ttf') format('truetype'); font-weight: bold; } @font-face { font-family: 'tampon'; src: url('fonts/tampon.ttf'); src: local('☺'), url('fonts/tampon.ttf') format('truetype'); font-weight: bold; } @font-face { font-family: 'lato'; src: url('/public/fablabo/public/fablabo/mediawiki-1.27.0-1.27.0/skins/VectorFablabo/resources/fonts/Lato-Regular.ttf'); src: local('☺'), url('skins/VectorFablabo/resources/fonts/Lato-Regular.ttf') format('truetype'); } body { font-family: lato, Montserrat, Arial; line-height: 125%; background-color: #dedede; } div#bodyContent .mw-body-content { font-size: 0.95em; } ul { list-style-type: disc; list-style-image: none; list-style-position: inside; } /* ------- */ /* Liens : */ * a, #bodyContent a.external, div#mw-panel div.portal div.body ul li a, .mw-body a.extiw, .mw-body a.extiw:active, div.menu ul li a, div.menu ul li a:active { outline: 0; color: #e5a308; } /* --------------- */ /* Liens visités : */ * a:visited, #bodyContent a.external:visited, div#mw-panel div.portal div.body ul li a:visited, .mw-body a.extiw:visited, div.menu ul li a:visited { outline: 0; color: #e5a308; } /* ------- */ /* Liens top bar: */ #mw-navigation #mw-head a { color: #fcce15; } /* ------- */ /* Liens panneau de gauche: */ .srf-container a, #toc a, div#mw-panel div.portal div.body ul li a { outline: 0; color: #373741; } /* --------------- */ /* Liens visités panneau de gauche: */ .srf-container a:visited, #toc a:visited, div#mw-panel div.portal div.body ul li a:visited { outline: 0; color: #42424e; } /* -------------- */ /* Liens cassés : */ * a.new { color: #c20000; } /* ---------------- */ /* Liens externes : */ #content .external { background-position: center right; background-repeat: no-repeat; background-image: url(images/lien_externe.png); background-image: -webkit-linear-gradient(transparent, transparent), url(images/lien_externe.png); background-image: linear-gradient(transparent, transparent), url(images/lien_externe.png); padding-right: 18px; } #mw-head { background-color: #78788d; } #vf-personal-button { height: 2em; margin-left: 10px; margin-right: 10px; background-image: url(images/connection.png); background-repeat: no-repeat; background-position: left top; min-width: 25px; height: 25px; } #p-personal:hover #vf-personal-list { display: block; opacity: 1; } #vf-pt-userpage { background: none; padding-left: 22px; padding-top: 3px; margin-left: 5px; font-size: 13px; line-height: 125%; } div#p-personal ul { opacity: 0; display: none; transition: all 0.5s; position: relative; float: none; width: 9em; margin-top: 5px; } div#p-personal ul li { margin: 0; height: 20px; width: 100%; display: block; clear: both; line-height: 125%; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; background-color: #78788d; } .vf-menu-topbar-button { height: 25px; margin-left: 10px; margin-right: 0px; background-repeat: no-repeat; background-position: left top; min-width: 25px; } .vf-nonedit-mode { background-image: url(images/nonedition.png); } .vf-edit-mode { background-image: url(images/edition.png); } .vf-watch { float: right; background-image: url(images/watch.png); } .vf-unwatch { float: right; background-image: url(images/unwatch.png); } .vf-menu-topbar { float: right; width: 35px; } #vf-edition-menu:hover #vf-edition-list { opacity: 1; display: block; } #vf-edition-list { opacity: 0; display: none; transition: all 0.5s; width: 9em; margin-top: 5px; } .vf-menu-topbar-item { font-size: 0.75em; margin: 0; height: 20px; width: 100%; display: block; clear: both; line-height: 125%; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; background-color: #78788d; } /* --------- */ /* titres */ /* titre de page */ h1 { border-bottom: 2px solid #373741; } #content { background-color: white; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { clear: both; } #content h1.firstHeading, #content h1 span, #content h2 span, #content h3 span, #content h4 span, #content h5 span { color: #373741; font-family: vagrounded, Arial; } #content h1.firstHeading { background-color: #fcce15; } #content .mw-body h1 { border-bottom: 2px solid #373741; } #content h1 span.mw-headline { text-transform: uppercase; font-family: vagrounded, Arial; font-size: 1.2em; font-weight: 900; background-color: #fcce15; width: 100%; display: inline-block; margin-bottom: 0.25em; } #content h2 { border-bottom: 1.5px solid #373741; } #content h2 span.mw-headline { font-size: 1.5em; font-weight: 900; background-color: #fcce15; } #content h3 span.mw-headline { font-size: 1.4em; background-color: #fcce15; text-decoration: underline; } #content h4 span.mw-headline { font-size: 1.3em; background-color: #ffe26e; } #content h5 span.mw-headline { font-size: 1.2em; background-color: #fff5cd; } #content div.gallerytext p { line-height: 1.1em; font-style: italic; } div#content h2 { margin-top: 1.5em; } table.documentation { border-spacing: 0px; border-collapse: collapse; border: 1px solid black; } table.documentation tr td { border: 1px solid black; } div.portal h3 { background-size: auto auto; } h1 span { font-size: 1.2em; } .mw-body h1 { font-size: 2em; } .mw-editsection-bracket { font-size: small; } tbody tr td.enteteLiensAccueil { background-color: red; } /* Recherche */ div#simpleSearch { background-image: none; border: 1px dotted #ccc; } div#simpleSearch #searchInput { font-family: Arial; letter-spacing: inherit; vertical-align: bottom; top: 2px; } /* modification du bouton de recherche : div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton { background-image: url(images/Search.png); } */ body div div { background-color: transparent; } #p-logo a { width: 200px; height: 220px; background-image: url(images/logo_beta.png); background-size: 200px 200px; background-repeat: no-repeat; } #mw-panel #p-logo { height: auto; } #mw-panel #p-logo a.mw-wiki-logo { width: 13em; height: 13em; } body, div#content { color: #373741; } /* ------------------ */ /* Liens de l'accueil */ table.liensAccueil { margin-top: 1em; } table.liensAccueil tr td { vertical-align: top; } td.enteteLiens { width: 25%; text-align: center; } td.enteteLiens div { min-height: 22px; padding: 10px; width: 60%; color: #42424e; text-transform: uppercase; font-size: 20px; -moz-border-image: url(images/cadre_entete_liens.png) 1px repeat repeat; -webkit-border-image: url(images/cadre_entete_liens.png) 1px repeat repeat; -o-border-image: url(images/cadre_entete_liens.png) 4 repeat repeat; border-image: url(images/cadre_entete_liens.png) 1px repeat repeat; min-width: 8em; } /* ========================== Pages Spéciales : ========================== */ /* ------------------ */ /* Page de connection */ #content .mw-ui-button.mw-ui-constructive { background-color: #fcce15; border: 1px solid #e5a308; } #content .mw-ui-button.mw-ui-constructive:hover { background-color: #e5a308; } #content .mw-ui-input:focus { box-shadow: inset 0 0 0 2px #fcce15; border: 1px solid #e5a308; } /* ------------------ */ /* Envoyer un fichier */ #mw-upload-form td { display: block; text-align: left; } #wpLicense { width: 100%; } /* ------------------ */ /* Page de recherche */ body.skin-vectorfablabo .oo-ui-textInputWidget { width: 650px; } body.skin-vectorfablabo .oo-ui-textInputWidget .mw-ui-input:focus { box-shadow: inset 0 0 0 2px #fcce15; border: 1px solid #e5a308; } body.skin-vectorfablabo div#content .oo-ui-textInputWidget input:focus { box-shadow: inset 0 0 0 2px #fcce15; border: 1px solid #e5a308; } body.skin-vectorfablabo div#content .oo-ui-buttonElement-button { margin-top: 1em; background-color: #fcce15; border: 1px solid #fcce15; color: black; } /* ========================== Table des matières : ========================== */ #sommaire { position: fixed; top: 65px; left: 980px; } #toc { background-color: #ffffff; border: none; } /* ========================== Menus latéraux de gauche : ========================== */ div#mw-panel div.portal div.body ul li { font-size: 0.9em; margin-bottom: 0.3em; } #mw-panel.collapsible-nav .portal { background: none; } #mw-panel.collapsible-nav .portal.collapsed h3 { background-image: url(images/fleche-menu-ferme.png); } #mw-panel.collapsible-nav .portal.expanded h3 { background-image: url(images/fleche-menu-ouvert.png); } #mw-panel.collapsible-nav .portal h3 a { font-size: 1.1em; text-transform: uppercase; color: #373741 !important; text-decoration: none; } #mw-panel.collapsible-nav .portal.collapsed h3 a { text-decoration: none!important; color: #373741 !important; } /* fleches dans "à la 3" */ .CategoryTreeToggle { color: #DC923B; } /* ========================== Menu top : ========================== */ div.vectorTabs ul { background-image: none; height: 30px; margin-top: 10px; overflow: hidden; } #left-navigation { margin-left: 220px; display: none; } #right-navigation { margin-left: 220px; display: none; } #mw-page-base { background-image: none; background-color: transparent; } div.vectorTabs { background-image: none; padding-left: 1px; background-position: left 0px; } div.vectorTabs ul li { background-color: #dedede; background-size: 100% 1px; } div.vectorTabs ul:first-child li span { padding-left: 0; } div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited { color: #373741; text-decoration: none; font-size: 12px; font-weight: bold; } div.vectorTabs li a, div.vectorTabs li a:visited { color: #42424e; text-decoration: none; font-size: 12px; } div.vectorTabs span a { display: inline-block; background-color: white; padding-top: 0.5em; padding-right: 1em; padding-left: 1em; } div.vectorTabs span { background-image: none; padding-right: 0.1em; } div.vectorTabs, div.vectorTabs span, div.vectorMenu h3 a { height: 2em; padding-right: 0.2em; } #p-cactions-label { background-color: white; } div.vectorMenu h3 a { padding-left: 1px; width: 1em; background-position: 1em 10px; } #ca-watch.icon a, #ca-unwatch.icon a { background-position: 0.5em 6px; } #ca-watch.icon a, #ca-watch.icon:hover a { background-image: url(images/etoile.png); } #ca-unwatch.icon a, #ca-unwatch.icon:hover a, #ca-unwatch.icon a:focus { background-image: url(images/etoile_pleine.png); } /* ======== Footer : ======== */ div#footer { margin-left: 0px; padding-left: 220px; } div#footer ul li { padding-top: 0px; padding-bottom: 0px; } div#footer ul#footer-icons { margin-top: -5px; } /* ===================== Cartouche des pages : ===================== */ span#vf-tampon { font-family: tampon, monospace,Courier; color: #b00000; font-weight: bolder; font-size: 1.3em; display: inline-block; position: relative; background-color: white; opacity: 0.8; float: right; } div#vf-cartouche { margin-top: 1.5em; float: none; text-align: right; padding-top: 0px; width: 100%; position: relative; margin-bottom: -20px; text-align: left; vertical-align: top; min-height: 100%; } div#vf-cartouche div { display: inline-block; } div#vf-cartouche div.floatright { padding-left: 0px; margin-left: 0px; } #content div#vf-cartouche div#infos { display: inline-block; text-align: left; min-width: 50%; } #content div#vf-cartouche div#infos div#vf-cartouche-vignette { float: left; display: inline-block; width: 50%; } #content div#vf-cartouche-vignette p { margin: 0; } #content div#vf-cartouche div#infos div#vf-cartouche-table { display: inline-block; width: 50%; } #content div.vf-cartouche-description { display: inline-block; font-size: 1.5em; font-family: vagrounded, Arial; max-width: 100%; margin-bottom: 1em; float: left; } #content div.vf-cartouche-description p { display: inline; background-color: #fcce15; } #content div.vf-cartouche-description a { padding: 0.2em; padding-top: 0.3em; margin-left: 0.5em; background-color: #78788d; } #mw-mf-viewport #content div#vf-cartouche div#infos { display: block; } #mw-mf-viewport #content div#vf-cartouche div#infos div#vf-cartouche-vignette { float: left; display: block; width: 100%; } #mw-mf-viewport #content div#vf-cartouche-vignette p { margin: 0; } #mw-mf-viewport #content div#vf-cartouche div#infos div#vf-cartouche-table { display: block; width: 100%; } #mw-mf-viewport #content div.vf-cartouche-description { display: block; width: 100%; } div.vf-cartouche-infos { margin-top: 0.2em; width: 100%; border-bottom: 1px solid #aeaecd; } div.vf-cartouche-infos p { margin: 0; } div.vf-cartouche-infos-titre p { font-weight: bold; background-color: #fcce15; margin-bottom: 0.2em; } #bodyContent div.vf-cartouche-infos-donnee p a, #bodyContent div.vf-cartouche-infos-donnee-inline p a { color: #fcce15; margin-left: 0.5em; margin-bottom: 0.2em; padding: 0.2em; background-image: none; background-color: #78788d; } div.vf-cartouche-infos-donnee p { text-align: right; } div.vf-cartouche-infos-donnee { float: right; } div.vf-cartouche-infos-donnee-inline p { float: none; } div#vf-cartouche .vf-cartouche-inline { line-height: 1.1em; clear: left; display: block; } div#vf-cartouche div#sommaire { display: inline-block; text-align: left; float: right; } div.vf-liens-machine, div.vf-liens-accueil { display: flex; /* contexte sur le parent */ flex-direction: row; /* direction d'affichage verticale */ justify-content: center; /* alignement vertical */ } div.vf-liens-machine .vf-lien-machine, div.vf-liens-accueil .vf-lien-machine { display: flex; width: 49%; margin: auto; text-align: center; vertical-align: middle; height: 4em; line-height: normal; } div.vf-liens-machine .vf-lien-accueil, div.vf-liens-accueil .vf-lien-accueil { display: flex; margin: auto; width: 24%; text-align: center; vertical-align: middle; height: 4em; line-height: normal; } div.vf-liens-machine a, div.vf-liens-accueil a { color: #fcce15; display: block; font-family: vagrounded, arial; font-size: 1.5em; padding-top: 0.6em; padding-bottom: 0.4em; width: 100%; height: 100%; background-color: #78788d; } #mw-mf-viewport #content .vf-liens-machine, #mw-mf-viewport #content .vf-liens-accueil { display: block; } #mw-mf-viewport #content .vf-lien-machine, #mw-mf-viewport #content .vf-lien-accueil { display: block; margin-bottom: 0.2em; height: auto; width: 100%; padding-bottom: 0.2em; } #mw-mf-viewport #content h1 { text-transform: uppercase; font-family: vagrounded, Arial; font-size: 2.4em; font-weight: 900; background-color: #fcce15; width: 100%; display: inline-block; margin-bottom: 0.25em; } #mw-mf-viewport #content div.vf-vignette { float: none; width: 300px; height: 157px; } div.devBox { background-color: transparent; -moz-border-image: url(images/border.png) 1px repeat repeat; -webkit-border-image: url(images/border.png) 1px repeat repeat; -o-border-image: url(images/border.png) 23 repeat repeat; border-image: url(images/border.png) 1px repeat repeat; } /* ========================== Formulaires : ========================== */ div.vf-form-entry-title { font-weight: bold; font-size: 1.1em; } div.vf-form-entry-title p { margin-top: 1em; margin-bottom: 0; } div.vf-form-entry-description p { margin: 0; } div.vf-form-entry-input span.inputSpan { width: 90%; } div.vf-form-entry-input span.inputSpan .vf-empty-entry { box-shadow: 0px 0px 4px red; -moz-box-shadow: 0px 0px 4px red; -webkit-box-shadow: 0px 0px 4px red; } #sfForm div#vf-form-entry-input-image p input { width: 60%; } #content #sfForm .createboxInput, #sfForm .select2-container div { max-width: 680px; width: 100%; } #sfForm th, #sfForm td { display: block; } #sfForm th .inputSpan, #sfForm td .inputSpan, #sfForm th .createboxInput, #sfForm td .createboxInput { display: block; margin-bottom: 1em; } /* ==================== Liste de vignettes : ==================== Utilisé dans les pages: - Accueil - modele_ListeVignettes (was modele_ListeProjets) - modele_laborantin + - fablabo.js */ .vf-liste-vignettes { overflow: auto; } .vf-vignette mark { background-color: #fcce15; color: black; } .vf-vignette-description { opacity: 0; position: absolute; transition: opacity 0.5s; } div.vf-vignette { position: relative; float: left; display: block; width: 290px; height: 200px; background-color: #fcce15; color: #373741; overflow: hidden; margin: 0.2em; background-size: 100% 100%; font-family: vagrounded, Arial; font-size: 1.1em; } .vf-liste-vignettes-3 div.vf-vignette { width: 32%; } .vf-liste-vignettes-2 div.vf-vignette { width: 49%; height: 250px; } div.vf-vignette p { position: relative; margin: 0; } div.vf-vignette a { width: 250px; } div.vf-vignette img { position: relative; overflow: hidden; top: 0px; } div.vf-vignette .vf-vignette-titre { color: black; width: 240px; display: block; padding: 5px; padding-bottom: 1em; font-weight: bold; font-size: 1.3em; text-transform: uppercase; } div.vf-vignette span.vf-vignette-titre { background-color: #fcce15; } div.vf-vignette-informations { position: absolute; color: black; font-weight: bold; width: 240px; top: 0px; left: 0px; display: block; padding: 5px; padding-bottom: 2em; font-size: 1em; pointer-events: none; } div.vf-vignette, div.vf-vignette:hover { text-decoration: none; } span.vf-vignette-description { display: none; font-size: 0.8em; text-transform: none; padding-bottom: 1em; min-height: 100px; color: black; background-color: transparent; } span.vf-vignette-description:first-letter { text-transform: capitalize; } div.vf-vignette:hover div.vf-vignette-description { opacity: 1; } span.smw-template-furtherresults { display: block; } /* =========================== Tutoriels =========================== */ div.vf-etape-titre { cursor: pointer; background-position: center left; background-repeat: no-repeat; } div.vf-etape-titre.collapsed { background-image: url(images/fleche-menu-ferme-h2.png); } div.vf-etape-titre.expanded { background-image: url(images/fleche-menu-ouvert-h2.png); } div.vf-etape-content { transition: 0.8s background-position linear; } #content div.vf-etapes p { line-height: 0.5em; } #content div.vf-etapes div.vf-etape p { line-height: auto; } /* =========================== Extensions =========================== */ /* -------- */ /* Spoilers */ #content .spoilers { background-color: #78788d; } #content .spoilers-button { color: #fcce15; border: none; padding: 3px 10px; background: none; height: 2.5em; } #content .spoilers-body { background-color: #EEE; } /* --------------------- */ /* WikiEditor / MsUploat */ #content .toolbar, #content .wikiEditor-ui-toolbar, #content .tabs { background-image: none; background-color: #ffffff; } #content #msupload-div { background-color: #42424e; } #content #msupload-list .file { background-color: #ffffff; } #content #msupload-list .green { background-color: #a8dba8; } #content #msupload-bottom { height: auto; } /* -------------- */ /* MobileFrontend */ #mw-mf-page-left { background-color: #42424e; } nav ul li:hover a { border-left: solid 12px #fcce15; } /* ----------------- */ /* Share list */ div#vf-share-section { font-size: 0.75em; position: relative; float: right; margin-left: 10px; width: 25px; } div#vf-share-section a.vf-share-item { width: 100%; display: block; padding-top: 5px; padding-bottom: 5px; padding-left: 35px; background-repeat: no-repeat; background-position: left center; background-color: #78788d; } #vf-share-section #vf-share-button { width: 35px; height: 25px; padding-left: 10px; background-image: url(images/partager.png); background-repeat: no-repeat; background-position: left top; } #vf-share-list { background-color: #78788d; position: relative; float: none; opacity: 0; display: none; transition: all 0.5s; width: 9em; margin-top: 5px; } #vf-share-list a.vf-share-fb { background-image: url(images/fb.png); } #vf-share-list a.vf-share-tw { background-image: url(images/tw.png); } #vf-share-list a.vf-share-pi { background-image: url(images/pi.png); } #vf-share-list a.vf-share-tb { background-image: url(images/tb.png); } #vf-share-list a.vf-share-co { background-image: url(images/co.png); } #vf-share-section:hover #vf-share-list { display: block; opacity: 1; } /* ------------------------- */ /* homemade carrousel */ .vf-fullscreen-img { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(1, 1, 1, 0.5); /* Firefox */ display: -moz-box; -moz-box-pack: center; -moz-box-align: center; /* Safari and Chrome */ display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; /* W3C */ display: box; box-pack: center; box-align: center; } .vf-fullscreen-img img { width: 100%; } .vf-button-before { position: fixed; height: 50%; width: 50px; background-image: url(images/fleche-avant.png); background-repeat: no-repeat; top: 45%; left: 10px; cursor: pointer; } .vf-button-after { position: fixed; height: 50%; width: 50px; background-image: url(images/fleche-apres.png); background-repeat: no-repeat; top: 45%; right: 10px; cursor: pointer; } .vf-fullscreen-caption { position: fixed; top: 10px; margin-top: 15px; font-size: 120%; font-weight: bold; color: #fcce15; }