MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
/* =========================== interface cleanup =========================== */
/* ========= general cleanup ========= */

a[title="Change your settings to go back to the old look of the skin (legacy Vector)"] { display: none; }

a.external {
  background-image: none!important;
  padding-right: 0!important;
}

.vector-page-toolbar { display: none; }

#footer-places-disclaimers { display: none; }

#p-personal { display: none; }

.filehistory { width: 100%; }

.mw-imagepage-upload-links { display: none; }

.mw-indicators {
  height: 1em;
}

/* ========= main page cleanup ========= */

.page-Main_Page .mw-body-header {
  display: none;
}

/* ========= Project:About and Project:Contacts cleanup ========= */

.page-Project_About .mw-body-header, .page-Project_Contacts .mw-body-header, .page-Project_Statistics .mw-body-header {
  display: none;
}

/* ========= mediaviewer cleanup ========= */

.mw-mmv-overlay {
  background-color: #f0f0f0;
  background-image: linear-gradient(135deg, #f1f1f1, silver);
}

.mw-mmv-source-author {
  display: none;
}

.mw-mmv-image-links, .mw-mmv-download-button, .mw-mmv-reuse-button, .mw-mmv-download-pane, .mw-mmv-dialog-down-arrow {
  display: none;
}

.mw-mmv-dialog-warning, .mw-mmv-warning-visible {
  visibility: hidden;
}

/* ========= file page cleanup ========= */

#filetoc, .mw-filepage-resolutioninfo, .mw-mmv-filepage-buttons { display: none; }

.filehistory, {
  width: 100%;
}

#metadata, .mw-imagepage-section-metadata {
  display: none;
}

/* =========================== custom CSS =========================== */
.mobile-only {
  display: none;
}

.img-comfy img {
  margin-top: 30px;
  margin-bottom: 30px;
}

.img-shadow img {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);
}

.neutral-box {
  margin-top: 2rem;
  padding: 2rem 3rem;
  background-color: #f1f1f1;
}

.columns {
  column-count: 3;
}

/* ====== Project:About ====== */
.side-by-side-image-row {
  display: flex;
  gap: 2rem;
}

.side-by-side-image-container {
  width: 100%;
}

.image-caption {
  width: 85%;
  margin: 0 auto 30px auto!important;
  font-size: 85%;
  text-align: center;
  font-style: italic;
}

/* ====== switch ====== */
.switch-caption-container {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin: 1rem 0;
}

.switch {
  position: relative;
  display: block;
  width: 30px;
  height: 17px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

#slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4c4c4c;
  transition: .4s;
  border-radius: 17px;
}

#slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.slider-alt {
  background-color: #4c4c4c;
}

.slider-alt:before {
  transform: translateX(13px);
}

/* All CSS here will be loaded for users of the mobile site */
@media screen and (max-width: 600px) {
    /* ========= general cleanup ========= */
    a.external {
      background-image: none!important;
      padding-right: 0!important;
    }

    .navigation-drawer {
      display: none;
    }

    .desktop-only {
      display: none;
    }

    .toggle-list {
      display: none;
    }

    .minerva-header .branding-box {
      font-size: 85%;
    }

    /* ========= main page cleanup ========= */

    .page-Main_Page .heading-holder {
      display: none;
    }

    /* ========= Project:About and Project:Contacts cleanup ========= */

    .page-Project_About .heading-holder, .page-Project_Contacts .heading-holder, .page-Project_Statistics .heading-holder {
      display: none;
    }


    /* ========= mediaviewer cleanup ========= */
    .mw-mmv-overlay {
      background-color: #f0f0f0;
      background-image: linear-gradient(135deg, #f1f1f1, silver);
    }

    /* =========================== custom CSS =========================== */
    .img-comfy img {
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .neutral-box {
      margin-top: 2rem;
      margin-bottom: 2rem;
      padding: 2rem 3rem;
      background-color: #f1f1f1;
    }

    .switch-caption-container {
      display: none;
    }

    /* ====== Project:About ====== */
    .side-by-side-image-row {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .side-by-side-image-container {
      width: 100%;
    }

    .image-caption {
      width: 85%;
      margin: 0 auto 30px auto!important;
      font-size: 85%;
      text-align: center;
      font-style: italic;
    }

}