« MediaWiki:Common.css » : différence entre les versions

Version du 28 janvier 2022 à 18:25

.mw-charinsert-buttons{margin-top:10px;border:1px solid #aaa;padding:1px;text-align:center;font-size:110%}.mw-charinsert-buttons a{color:#000;background-color:#cde;font-weight:700;font-size:.9em;text-decoration:none;border:thin outset #069;padding:0 .1em .1em}.mw-charinsert-buttons a:active,.mw-charinsert-buttons a:hover{background-color:#bcd;border-style:inset}.client-js .mw-edittools-section{display:inline}.client-js .mw-edittools-section input[type=button]{font-size:.9em;padding-left:1px;padding-right:1px;margin-left:1px}#pt-darkmode-link{font-weight:700}.ext_img{width:68px;height:51px;vertical-align:baseline}.noelshack-img{vertical-align:baseline}.accueil_lien{font-size:110%;padding-top:15px}#accueil_global ul{list-style:url("https://jvflux.fr/images/f/f0/sommaire_puces.png")}.page-Accueil h1.firstHeading{display:none}#accueil_intro{margin:0 35px 40px 30px!important}#accueil_intro .titre_accueil{font-size:280%!important}#accueil_intro .sous_titre_accueil{font-size:150%!important;line-height:27px!important}#accueil_recherche{margin-bottom:50px}#accueil_recherche form input:nth-of-type(1){margin:0 auto;border:none;border:solid 4px #028efd;border-radius:30px;height:40px;width:500px;padding:10px}#accueil_recherche form input[type=submit]{border-radius:30px;border:solid 1px #028efd;margin-left:-40px;background:no-repeat center/35% url("https://jvflux.fr/images/b/bc/loupe.png") #028efd;height:40px;width:60px}#accueil_contribuer{text-align:center;display:flex!important}#accueil_contribuer img{width:60%;height:60%}#accueil_contribuer .accueil_contribuer-bouton img:hover{content:url("https://jvflux.fr/images/b/b4/Contribuer%2BNoel-Bleu.png")}#accueil_articles,#accueil_naviguer,.accueil_flex{display:flex;flex-flow:row wrap;justify-content:center}#accueil_articles .accueil_articles-qualite,#accueil_articles .accueil_articles-semaine,#accueil_naviguer .accueil_naviguer-actualites,#accueil_naviguer .accueil_naviguer-navigation{border:1px solid #aaa;flex:1;justify-content:center}#accueil_contribuer .accueil_contribuer-bouton,#accueil_contribuer .accueil_contribuer-message,.accueil_flex-box{flex:1}#accueil_articles .accueil_articles-semaine,#accueil_naviguer .accueil_naviguer-navigation{margin-right:5px}#accueil_articles .accueil_articles-qualite,#accueil_naviguer .accueil_naviguer-actualites{margin-left:5px}.accueil_articles-boite{margin:20px auto 15px auto;width:90%}#accueil_modifs,#accueil_raccourcis{margin:20px 0;text-align:center}#accueil_raccourcis{background-color:#c4fefb;border-radius:5px}#accueil_raccourcis .accueil_flex{align-items:center}#accueil_raccourcis .accueil_flex-box{flex:2 1 content}#accueil_raccourcis .accueil_flex-box:nth-child(1){flex:1 1 content!important}#accueil_raccourcis .floatleft{margin:0}#accueil_raccourcis a{font-size:110%}#accueil_raccourcis .accueil_bandeau-titre{display:none}#accueil_modifs{border:1px solid #aaa;background-color:#f1f6f9}#accueil_modifs .accueil_modifs-contenu{width:95%;padding:20px 30px 15px 30px}#accueil_naviguer .accueil_naviguer-navigation ul li:nth-child(5){margin-bottom:20px}#accueil_message-fin{text-align:center;margin-top:40px;font-size:130%}.flex_generique-container{display:flex;justify-content:center}.flex_generique-item{flex:1 0 content}.bandeau_article_qualite{margin:20px 0 0 0}.bandeau_article_qualite div{padding:10px 10px 0 10px;text-align:center;font-size:110%}.bandeau_article_qualite img{width:30%;height:30%}.bandeau-article-detaille{border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;background-color:#fdfdfd;border-width:1px 0;padding:.2em .5em .3em 0;margin:.3em 0 .7em 2em}.loupe{background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Searchtool.svg/15px-Searchtool.svg.png);background-position:2px 3px;background-repeat:no-repeat;line-height:1.5em;text-indent:23px;display:inline-block}.mw-wiki-logo{background-size:160px}#mw-panel nav:nth-of-type(1){margin-top:70px}#p-logo a{height:220px}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-regular.eot');src:url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-regular.woff2') format('woff2'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-regular.woff') format('woff'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-regular.ttf') format('truetype'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-regular.svg#Roboto') format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-italic.eot');src:url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-italic.woff2') format('woff2'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-italic.woff') format('woff'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-italic.ttf') format('truetype'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-italic.svg#Roboto') format('svg')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-700.eot');src:url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-700.woff2') format('woff2'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-700.woff') format('woff'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-700.ttf') format('truetype'),url('https://jvflux.fr/skins/fonts/v20/roboto-v20-latin-700.svg#Roboto') format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:700;src:url('https://jvflux.fr/skins/fonts/Roboto-BoldItalic.ttf') format('truetype')}html{font-size:100%;height:100%}body{font-family:Roboto,Arial,sans-serif}

$table-header: #1976D2;
$table-header-border: #1565C0;
$table-border: #d9d9d9;
$row-bg: #f4f2f1;

div {
  box-sizing: border-box;
}

.table-container {
  display: block;
  margin: 2em auto;
  width: 90%;
  max-width: 600px;
}

.flag-icon {
  margin-right: 0.1em;
}

.flex-table {
  display: flex;
  flex-flow: row wrap;
  border-left: solid 1px $table-border;
  transition: 0.5s;
  &:first-of-type {
    border-top: solid 1px $table-header-border;
    border-left: solid 1px $table-header-border;
  }
  &:first-of-type .flex-row {
    background: $table-header;
    color: white;
    border-color: $table-header-border;
  }
  &.row:nth-child(odd) .flex-row {
    background: $row-bg;
  }
  &:hover {
    background: #F5F5F5;
    transition: 500ms;
  }
}

.flex-row {
  width: calc(100% / 4);
  text-align: center;
  padding: 0.5em 0.5em;
  border-right: solid 1px $table-border;
  border-bottom: solid 1px $table-border;
}

.rowspan {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
}

.column {
  display: flex;
  flex-flow: column wrap;
  width: 75%;
  padding: 0;
  .flex-row {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: solid 1px $table-border;
    &:hover {
      background: #F5F5F5;
      transition: 500ms;
    }
  }
}

.flex-cell {
  width: calc(100% / 3); //1px = border right
  text-align: center;
  padding: 0.5em 0.5em;
  border-right: solid 1px $table-border;
  //flex: 1 1 33.3%;
  &:last-child {
    // border-right: 0;
  }
}

@media all and (max-width: 767px) {
  .flex-row {
    width: calc(100% / 3); //1px = border right
    
   &.first {
     width: 100%;
   }
  }

  .column {
    width: 100%;
  }
}

@media all and (max-width: 430px) {
  
  .flex-table {
    .flex-row {
      border-bottom: 0;
    }
    .flex-row:last-of-type {
      border-bottom: solid 1px $table-border;
    }
  }
  
  .header {
    .flex-row {
      border-bottom: solid 1px;
    }
  }
  
  .flex-row {
    width: 100%; //1px = border right
    
   &.first {
     width: 100%;
     border-bottom: solid 1px $table-border;
   }
  }

  .column {
    width: 100%;
    .flex-row {
      border-bottom: solid 1px $table-border;
    }
  }

  .flex-cell {
    width: 100%; //1px = border right
  }
}