MediaWiki:Mobile.css

De Cat OPIDoR

Note : après avoir publié 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 appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
  • Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
  • Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
  • Opera : appuyez sur Ctrl + F5.
/* Tout CSS placé ici sera chargé avec les pages accédées par les utilisateurs du site mobile */

html {
  scrollbar-color: rgba(67, 146, 195, 1) #fff;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(67, 146, 195, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ALL PAGES */

/* Hiding back to former skin button */
nav#mw-panel div.mw-sidebar-action {display: none;}

/* MENU ICONS RIGHT */

.menu-icons-right p {
  position: absolute;
  right: -120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media screen and (max-width: 720px) {
  .menu-icons-right p {
    position: relative;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

.menu-icons-right p a {
  padding: 10px 0;
}

.menu-icons-right p a img {
  transition: all .5s ease-in-out;
}

.menu-icons-right p a img:hover {
  transform: scale(1.15);
}

/* INFOBOX MOBILE */

.leservice .infobox {padding: 20px; align-items: center;}

/* PAGES H3 */

.page-sommaire h3 {
  padding-top: 0;
  padding-left: 3%;
  background-image: linear-gradient(90deg,rgb(67,146,195) 1%,rgb(255,255,255) 1%,rgb(255,255,255) 100%);
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: normal;
}

.page-structure h2,
.page-structure h3, .page-annuaire-institut h3 {
  border-bottom: none;
  padding-top: 0;
  padding-left: 3%;
  background-image: linear-gradient(90deg,rgb(67,146,195) 1%,rgb(255,255,255) 1%,rgb(255,255,255) 100%);
  /* background-image: linear-gradient(90deg,rgb(67,146,195) 1%,rgb(255,255,255) 1%,rgb(255,255,255) 50%,rgba(67,146,195,.5)); */
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: normal;
}

.page-accueil h3, .page-service h3, .page-annuaire-cnrs h3 {
  padding-top: 0;
  padding-left: 3%;
  background-image: linear-gradient(90deg,rgb(255,207,15) 1%,rgb(255,255,255) 1%,rgb(255,255,255) 100%);
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: normal;
}

/* SEARCHBAR */

.list-thumb.list-thumb-y {background-size: contain;}

/* BACK TO TOP BUTTON */

.back-to-top-wrapper {
  position: absolute;
  top: 100vh;
  right: 1.25rem;
  bottom: 0;
  width: 3em;
  pointer-events: none;
  margin-top: 10em;
  z-index: 5;
}

a.back-to-top-link {
  position: fixed;
  color: rgba(67, 146, 195, 1);
  pointer-events: all;
  top: calc(100vh - 12rem);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24pt;
  line-height: 3rem;
  text-align: center;
  width: 2.5rem;
  text-decoration: none;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #fff;
  transition: transform .5s ease-in-out, color .5s ease-in-out, background .5s ease-in-out
}

.back-to-top-link:hover {
  color: #fff;
  background: rgba(67, 146, 195, 1);
  transform: scale(1.2);
}