MediaWiki:Common.css: Difference between revisions

Latest revision as of 16:50, 8 April 2026

/* SiteWide css */

/* 
  Hey ! My variables are from CODEX !
  Here is their docs : https://doc.wikimedia.org/codex/latest/
*/

/* ------------------ */
/* Message/Info boxes */
/* ------------------ */

/* Base box system */
.box {
  padding: 0.75em 1em;
  margin: 1em 0;
  border: 1px solid var(--border-color-base);
  border-radius: 2px;
  background-color: var(--background-color-neutral-subtle);
  color: var(--color-base);
  display: flex;

  &.info {
    background-color: var(--background-color-progressive-subtle);
    border-color: var(--color-progressive);
    color: var(--color-progressive);

    .box-icon {
      mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7"/></svg>');
      background-color:var(--color-icon-notice,#72777d)
    }
  }

  &.success {
    background-color: var(--background-color-success-subtle);
    border-color: var(--color-success);
    color: var(--color-success);

    .box-icon {
      mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
      background-color:var(--color-icon-success,#099979);
    }
  }

  
  &.warning {
    background-color: var(--background-color-warning-subtle);
    border-color: var(--color-warning);
    color: var(--color-warning);

    .box-icon {
      mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>');
      background-color:var(--color-icon-warning,#ab7f2a)
    }
  }

  &.danger {
    background-color: var(--background-color-destructive-subtle);
    border-color: var(--color-destructive);
    color: var(--color-destructive);

    .box-icon {
      mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13.728 1H6.272L1 6.272v7.456L6.272 19h7.456L19 13.728V6.272zM11 15H9v-2h2zm0-4H9V5h2z"/></svg>');
      background-color:var(--color-icon-error,#f54739)
    }
  }

  /* Status */
  &.under-construction {
    background-color: var(--background-color-warning-subtle);
    border-color: var(--color-warning);
    color: var(--color-warning);

    .box-icon {
      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
      background-color: var(--color-icon-success,#099979);
    }
  }

  &.stub {
    background-color: var(--background-color-progressive-subtle);
    border-color: var(--color-progressive);
    color: var(--color-progressive);

    .box-icon {
      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
      background-color: var(--color-icon-success,#099979);
    }
  }

  &.outdated {
    background-color: var(--background-color-warning-subtle);
    border-color: var(--color-warning);
    color: var(--color-warning);

    .box-icon {
      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
      background-color: var(--color-icon-success,#099979);
    }
  }

  &.disputed {
    background-color: var(--background-color-destructive-subtle);
    border-color: var(--color-destructive);
    color: var(--color-destructive);

    .box-icon {
      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
      background-color: var(--color-icon-success,#099979);
    }
  }

  &.cleanup {
    background-color: var(--background-color-warning-subtle);
    border-color: var(--color-warning);
    color: var(--color-warning);

    .box-icon {
      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
      background-color: var(--color-icon-success,#099979);
    }
  }
  
  .box-icon {
    min-width: 10px;
    min-height: 10px;
    width: calc(var(--font-size-medium,1rem) + 4px);
    /* height: calc(var(--font-size-medium,1rem) + 4px); */
    display: inline-block;
    mask-size: max(calc(var(--font-size-medium,1rem) + 4px),10px);
    mask-position: center;
    mask-repeat: no-repeat;

    margin-right: 4px;
  }
}

.box p {
  margin: 0 !important;
}

/* ------------------- */
/* Data structures etc */
/* ------------------- */

.wikitable,
.comparison-table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

.wikitable th,
.wikitable td,
.comparison-table th,
.comparison-table td {
  border: 1px solid var(--border-color-base);
  padding: 0.4em 0.6em;
}

.wikitable th,
.comparison-table th {
  background-color: var(--background-color-neutral-subtle);
}

/* ---------------------------- */
/* Navigation & linking helpers */
/* ---------------------------- */

/* Topmost note - disambiguation */
.hatnote {
  font-style: italic;
  color: var(--color-base-subtle);
  margin-bottom: 0.5em;
}

/* Redirect to other page*/
.see-also {
  margin-top: 1em;
  padding-top: 0.5em;
  border-top: 1px solid var(--border-color-base);
}

/* <===><===><===><===><===> */
/* UNUSED FOR NOW            */
/* ------------------------- */
/* Code representation stuff */
/* ------------------------- */

/* Block of code */
.code-block {}

/* Terminal line */
.terminal {}

/* File information */
.file-info {}

/* POST/GET etc... */
.api-endpoint {}

/* <===><===><===><===><===> */

/* --------------- */
/* Utility classes */
/* --------------- */

.text-center { text-align: center; }
.text-right { text-align: right; }

/* --- */
.muted { color: var(--color-base--subtle); }
.highlight { background-color: var(--background-color-neutral-subtle); }

/* --- */
.small { font-size: 0.85em; }
.large { font-size: 1.25em; }

/* --- */
.flex { display: flex; gap: 0.5em; }
.grid { display: grid; gap: 0.5em; }

.flex-center {display: flex; gap: 0.5rem; justify-content: center; align-items: center;}