Utilisateur:Nemoi/bandeaux.css

/**<nowiki>
 * 
 *    CLASSES FONCTIONNELLES
 * 
 *  Sont présentes sur cette page des classes CSS fonctionnelles. 
 *  Chacune de ces classes est destinée à une fonction définie, et
 *  toutes sont prévues pour s'utiliser ensemble harmonieusement.
 *
 *  Pour questions ou problèmes, voyez l'[[utilisateur : Nemoi]] 
 *  ou bien sur la page de [[discussion MediaWiki : Common.css]].
 *
 *  TYPES DE BOITES
 *  Les types de boites sont des classes prévues pour faire des boites
 *  (bandeaux principalement, et boites flottant à droite), notamment :
 *  * des bandeaux d'articles ([[modèle : Méta bandeau d'avertissement]]) ;
 *  * des bandeaux de sections ([[modèle : Article détaillé]] et voisins) ;
 *  * des bandeaux de discussions ([[modèle : Page conservée]] et autres) ;
 *  * des messages système se présentant sous forme de bande(s) ;
 *  * les bandeaux de portail.
 *  Ne sont pas gérés ici :
 *  * les bandeaux de catégories (système) ;
 *  * les bandeaux d'homonymies (bientôt) ;
 *  * les autres choses.
 * 
 *  STYLES DE BOITES
 *  Un bandeau est au minimum une balise html <div> à deux classes CSS :
 *  l'une pour son type (voir section précédente), l'autre pour son style.
 * 
 *  PETITES ICONES
 *  Les petites icônes sont pensées pour être « en ligne » dans un texte.
 *  Elles servent par exemple aux bandeaux de section (dans le même <div>),
 *  mais aussi au [[modèle : Autres projets]] (voir classes spécifiques). 
 * 
 *  GROSSES ICONES
 *  Les grosses icônes se placent sur un <div> avec la classe grosse-icone.
 *  Les icônes peuvent être gérées soit par du CSS, soit au début du <div>.
 *  Les particularités varient selon le <div> *parent* (type de bandeau).
 *
**/

/*\ 
* * TYPES DE BOITES
\*/

div.bandeau-section {
  display: block;
  margin: 0 0 .7em 2em;
  border-style: solid;
  border-width: 1px 0;
  text-align: left;
  font-size: 95%;
  overflow: hidden;
  padding: 2px 0 1px 4px;
}

div.bandeau-article {
  display: table;
  margin: 8px 10% 12px;
  width: 80%;
  position: relative;  /* pour les images manuelles */
 
  border-style: solid;
  border-width: 1px 1px 1px 10px;
  padding: 2px 10px;
  text-align: left;
}

div.bandeau-simple {
  clear: both;
  display: table;
  margin: 8px 0;
  position: relative;  /* pour les images manuelles */
 
  border-style: solid;
  border-width: 1px;
  padding: 2px 10px;
  text-align: left;
}

div.bandeau-systeme {
  clear: both;
  display: table;
  margin: 8px auto;
  width: 92%;
 
  border-style: solid;
  border-width: 2px;
  padding: 2px 9px;
  text-align: left;
}

div.bandeau-discussion {
  display: table;
  margin: 0 7% 1em;
  width: 86%;
  position: relative;  /* pour les images manuelles */

  border-style: solid;
  border-width: 1px;
  padding: 2px 10px;
  text-align: left;
  border-radius: 10px;
}
 
div.boite-a-droite {
  display: table;
  clear: right;
  float: right;
  margin: 1em 0 1em 1em;
  width: 20em;
  position: relative;  /* pour les images manuelles */

  border-style: solid;
  border-width: 1px;
  padding: 4px;
  text-align: left;
}

/*\ 
* * STYLES DE BOITES
\*/

/* Style des bandeaux d'articles, voir [[Wikipédia:Prise de décision/Changement de style des messages d'avertissement]] */

.bandeau-niveau-grave {
  border-color: #aa0044;
  background-color: #ffcccc;
}

.bandeau-niveau-modere {
  border-color: #ff8822;
  background-color: #ffeedd;
}
/* .bandeau-systeme.bandeau-niveau-modere {   */ /* longs usages… mais pitié, évitons */ /*
  border-color: #FF8C00;
  background-color: #FAEBD7;
} */

.bandeau-niveau-ebauche,
.bandeau-niveau-information {
  border-color: #77ccff;
  background-color: #fbfbfb;
}
.bandeau-discussion.bandeau-niveau-information {    /* dérive de la classe vectorbox */
  border-color: #a7d7f9;
  background-color: #f5faff;
}
.bandeau-niveau-detail,    /* voir [[Wikipédia:Prise de décision/Unification des modèles : article détaillé et Loupe]] */
.bandeau-section.bandeau-niveau-information {
  border-color: #e7e7e7;
  background-color: #fdfdfd;
}

.boite-grise {    /* identique au sommaire ou plutôt au bandeau de catégorie */
  border-color: #aaa;
  background-color: #F9F9F9;
}

/*\
* * PETITES ICONES
\*/

.indentation,     /* pas d'image correspondante */
.loupe,           /* loupe, voir le [[modèle : Article détaillé]] */
.general,         /* flèche pour le [[modèle : Article principal]] */
.accessibilite,   /* symbole handicap, pour le [[modèle : Encart]] */
.etoile-or,
.etoile-argent,
.categorie,       /* symbole du [[modèle : Catégorie principale]] */
.biblio,          /* livres pour le [[modèle : Sources de section]] */
.incomplet,       /* cône de chantier pour le [[modèle : …]] */
.sources,         /* livre ouvert du [[modèle : Section à sourcer]] */
.important,       /* triangle rouge : mise en garde   */
.en-travaux,      /* triangle jaune : en construction */
.incubator,
.extension,       /* extensions MediaWiki */
.wikispecies,
.metawiki,
.wikiversity,
.wikipedia,
.wikibooks,
.wikinews,
.wikiquote,
.wikisource,
.commons,
.wikimedia,
.wiktionary,
.wikidata,
.wikivoyage {
  background-repeat: no-repeat;
  line-height: 1.5em;
  text-indent: 23px;
  display: inline-block;
}
 
.loupe {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/6/61/Searchtool.svg/15px-Searchtool.svg.png");
  background-position: 2px 3px;
}
.general {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Nuvola_apps_download_manager2-70%25.svg/15px-Nuvola_apps_download_manager2-70%25.svg.png");
  background-position: 2px 3px;
}
.accessibilite {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/4/44/Gnome-preferences-desktop-accessibility.svg/18px-Gnome-preferences-desktop-accessibility.svg.png");
  background-position: 2px 0;
}
.etoile-or {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Fairytale_bookmark_gold.png/19px-Fairytale_bookmark_gold.png");
  background-position: 1px 1px;
}
.etoile-argent {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/d/da/Fairytale_bookmark_silverstar.svg/19px-Fairytale_bookmark_silverstar.svg.png");
  background-position: 1px 1px;
}
.categorie {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/3/34/Nuvola_apps_kpager.svg/21px-Nuvola_apps_kpager.svg.png");
  background-position: 0 0;
}
.biblio {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Books-aj.svg_aj_ashton_01.svg/20px-Books-aj.svg_aj_ashton_01.svg.png");
  background-position: 2px 2px;
}
.incomplet {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Fairytale_waring.png/16px-Fairytale_waring.png");
  background-position: 2px 3px;
}
.sources {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/6/64/Question_book-4.svg/20px-Question_book-4.svg.png");
  background-position: 1px 4px;
}
.important {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Nuvola_apps_important.svg/19px-Nuvola_apps_important.svg.png");
  background-position: 1px 2px;
}
.en-travaux {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/8/81/Under_contruction_icon-yellow.svg/20px-Under_contruction_icon-yellow.svg.png");
  background-position: 1px 2px;
}
.incubator {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/0/02/Incubator-notext.svg/15px-Incubator-notext.svg.png");
  background-position: 3px 1px;
}
.extension {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/MediaWiki_logo.png/19px-MediaWiki_logo.png");
  background-position: 2px 1px;
}
.wikispecies {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/d/df/Wikispecies-logo.svg/17px-Wikispecies-logo.svg.png");
  background-position: 1px 0;
}
.wikisource {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/17px-Wikisource-logo.svg.png");
  background-position: 1px 1px;
}
.wikipedia {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/19px-Wikipedia-logo.png");
  background-position: 1px 0;
}
.wikibooks {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/19px-Wikibooks-logo.svg.png");
  background-position: 1px 1px;
}
.metawiki {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/7/75/Wikimedia_Community_Logo.svg/18px-Wikimedia_Community_Logo.svg.png");
  background-position: 1px 1px;
}
.wikiversity {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/9/91/Wikiversity-logo.svg/20px-Wikiversity-logo.svg.png");
  background-position: 0 2px;
}
.wiktionary {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Wiktprintable_without_text.svg/20px-Wiktprintable_without_text.svg.png");
  background-position: 0 1px;
}
.wikinews {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/2/24/Wikinews-logo.svg/20px-Wikinews-logo.svg.png");
  background-position: 0 5px;
}
.wikiquote {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/16px-Wikiquote-logo.svg.png");
  background-position: 2px 1px;
}
.commons {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Commons-logo.svg/14px-Commons-logo.svg.png");
  background-position: 3px 0;
}
.wikimedia {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/8/81/Wikimedia-logo.svg/20px-Wikimedia-logo.svg.png");
  background-position: 0 0;
}
.wikidata {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Wikidata-logo.svg/22px-Wikidata-logo.svg.png");
  background-position: 0 5px;
}
.wikivoyage {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/0/04/Favicon.svg/16px-Favicon.svg.png");
  background-position: 2px 2px;
}

/*\
* * GROSSES IMAGES
\*/

.grosse-icone {
  display: table-cell;
  vertical-align: middle;

  height: 54px;
  height: auto !ie;    /* IE6-7, qui ne comprennent pas table-cell et optent donc pour un display:block, valorisent cette ligne, alors qu'ils devraient l'ignorer */
  min-height: 54px;
 
  padding-left: 44px;
  background-repeat: no-repeat;
  background-position: left center;
}
.grosse-icone img:first-child {
  position: absolute;
  margin-left: -44px;
  margin-top: -17px;
  top: 50%;
}

div.bandeau-systeme .grosse-icone,
div.boite-a-droite .grosse-icone,
div.bandeau-simple .grosse-icone {
  padding-left: 54px;
  text-indent:0;                        /* Cas d'icones avec une */
  background-position: left center;    /* version « en ligne ». */
}
/* div.bandeau-systeme .grosse-icone img:first-child, */ /* Pitié, les trucs système en CSS. De toute façon, je n'ai pas mis 'position:relative;'. */
div.boite-a-droite .grosse-icone img:first-child,
div.bandeau-simple .grosse-icone img:first-child {
  position: absolute;
  margin-left: -54px;
  margin-top: -23px;
}

.ancienne-version {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Clock_and_warning.svg/46px-Clock_and_warning.svg.png");
}
.maintenance {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Tools_nicu_buculei_01.svg/46px-Tools_nicu_buculei_01.svg.png");
}
.semi-protection {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Crystal_Clear_action_half_lock.png/46px-Crystal_Clear_action_half_lock.png");
}
.roue-dentee {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_run.png/46px-Crystal_Clear_action_run.png");
}
.conflit-edition {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/8/86/Passage_pieton_rouge.png/46px-Passage_pieton_rouge.png");
}
.titre-protege {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/c/c4/System-lock-screen.svg/46px-System-lock-screen.svg.png");
}
.gros-warning {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Fairytale_no.png/46px-Fairytale_no.png");
}

.grosse-icone.etoile-or {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Fairytale_bookmark_gold.png/46px-Fairytale_bookmark_gold.png");
}
.grosse-icone.etoile-argent {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/d/da/Fairytale_bookmark_silverstar.svg/46px-Fairytale_bookmark_silverstar.svg.png");
}
.grosse-icone.biblio {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Books-aj.svg_aj_ashton_01.svg/46px-Books-aj.svg_aj_ashton_01.svg.png");
}
.grosse-icone.categorie {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/3/34/Nuvola_apps_kpager.svg/46px-Nuvola_apps_kpager.svg.png");
}

.grosse-icone.incubator {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/0/02/Incubator-notext.svg/46px-Incubator-notext.svg.png");
}
.grosse-icone.extension {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/MediaWiki_logo.png/46px-MediaWiki_logo.png");
}
.grosse-icone.wikispecies {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/d/df/Wikispecies-logo.svg/46px-Wikispecies-logo.svg.png");
}
.grosse-icone.wikisource {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/46px-Wikisource-logo.svg.png");
}
.grosse-icone.wikipedia {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/46px-Wikipedia-logo.png");
}
.grosse-icone.wikibooks {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/46px-Wikibooks-logo.svg.png");
}
.grosse-icone.metawiki {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/7/75/Wikimedia_Community_Logo.svg/46px-Wikimedia_Community_Logo.svg.png");
}
.grosse-icone.wikiversity {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/9/91/Wikiversity-logo.svg/46px-Wikiversity-logo.svg.png");
}
.grosse-icone.wiktionary {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Wiktprintable_without_text.svg/46px-Wiktprintable_without_text.svg.png");
}
.grosse-icone.wikinews {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/2/24/Wikinews-logo.svg/46px-Wikinews-logo.svg.png");
}
.grosse-icone.wikiquote {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikiquote-logo.svg/46px-Wikiquote-logo.svg.png");
}
.grosse-icone.commons {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Commons-logo.svg/46px-Commons-logo.svg.png");
}
.grosse-icone.wikimedia {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/8/81/Wikimedia-logo.svg/46px-Wikimedia-logo.svg.png");
}
.grosse-icone.wikidata {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Wikidata-logo.svg/46px-Wikidata-logo.svg.png");
}
.grosse-icone.wikivoyage {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/0/04/Favicon.svg/46px-Favicon.svg.png");
}

/**</nowiki>
 * 
 *  FIN
 * 
**/