MediaWiki:Common.css: Difference between revisions

Latest revision as of 00:06, 31 January 2026

:root:root {
	/* SEE MediaWiki:Tokens.css FOR COLOR CLASSES AND VARS */
}

@font-face {
  font-family: 'Apogea';
  src: url('/images/d/d6/Apogea.woff2?v=4') format('woff2');
}

.font-apogea {
  font-family: 'Apogea', monospace;
  font-size: 16px;
  line-height: 17px;

  /* Pixel-perfect rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;

  /* Outline + depth shadow (1x scale, use at 16px) */
  text-shadow:
    -1px 0 0 var(--color-outline),
    1px 0 0 var(--color-outline),
    0 -1px 0 var(--color-outline),
    0 1px 0 var(--color-outline),
    -1px 1px 0 var(--color-outline),
    1px 1px 0 var(--color-outline),
    0 2px 0 var(--color-outline);
}

@font-face {
  font-family: 'ApogeaLong';
  src: url('/images/e/e2/ApogeaLong.woff2?v=4') format('woff2');
}

.font-apogea-long {
  font-family: 'ApogeaLong', monospace;
  font-size: 16px;
  line-height: 22px;

  /* Pixel-perfect rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;

  /* 2px outline (1x scale, use at 16px) */
  /* 1px: all 8 directions, 2px: cardinal only */
  text-shadow:
    -1px 0 0 var(--color-outline),
    1px 0 0 var(--color-outline),
    0 -1px 0 var(--color-outline),
    0 1px 0 var(--color-outline),
    -1px -1px 0 var(--color-outline),
    1px -1px 0 var(--color-outline),
    -1px 1px 0 var(--color-outline),
    1px 1px 0 var(--color-outline),
    -2px 0 0 var(--color-outline),
    2px 0 0 var(--color-outline),
    0 -2px 0 var(--color-outline),
    0 2px 0 var(--color-outline);
}

@font-face {
  font-family: 'BitCell';
  src: url('/images/8/80/BitCell.woff2?v=4') format('woff2');
}

.font-bitcell {
  font-family: 'BitCell', monospace;
  font-size: 16px;
  line-height: 28px;

  /* Pixel-perfect rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;

  /* 2px outline (1x scale, use at 16px) */
  /* 1px: all 8 directions, 2px: cardinal only */
  text-shadow:
    -1px 0 0 var(--color-outline),
    1px 0 0 var(--color-outline),
    0 -1px 0 var(--color-outline),
    0 1px 0 var(--color-outline),
    -1px -1px 0 var(--color-outline),
    1px -1px 0 var(--color-outline),
    -1px 1px 0 var(--color-outline),
    1px 1px 0 var(--color-outline),
    -2px 0 0 var(--color-outline),
    2px 0 0 var(--color-outline),
    0 -2px 0 var(--color-outline),
    0 2px 0 var(--color-outline);
}

/* Scale utilities */
.scale-2 {
  transform: scale(2);
  transform-origin: top left;
}

/* Ninepatch panel style */
.tooltip-panel {
  flex-grow: 0;
  flex-shrink: 1;
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-image: url('/images/0/0a/Panel-dark.png?v=2') 3 fill / 9px stretch;
  padding: 12px 12px;
  color: white;
}

.tooltip-panel p {
	margin:0;
	padding:0;
	text-align: center;
}

/* Recipe List */
.recipe-list {
    margin: 10px 0;
}

.recipe-list-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 10px;
}

/* Recipe Table */
.recipe-table {
    border-collapse: collapse;
    background-color: #1a1a2e;
}

.recipe-table th {
    background-color: #2a2a4e;
    color: #aaa;
    padding: 8px 12px;
    text-align: left;
    font-weight: bold;
    border: 1px solid #4a4a6a;
}

.recipe-table td {
    padding: 8px 12px;
    vertical-align: top;
    border: 1px solid #4a4a6a;
    background-color: #1a1a2e;
}

.recipe-cell-item {
    white-space: nowrap;
}

.recipe-cell-station {
    text-align: center;
}

.recipe-cell-materials {
    padding: 0 !important;
}

.recipe-item-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Alternating material rows */
.recipe-material-odd {
    background-color: #1a1a2e;
    padding: 4px 12px;
}

.recipe-material-even {
    background-color: #2a2a4e;
    padding: 4px 12px;
}

/* Single Recipe Container */
.recipe-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #1a1a2e;
    border: 2px solid #4a4a6a;
    border-radius: 5px;
    margin: 10px 0;
}

.recipe-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
}

.recipe-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    background-color: #2a2a4e;
    border: 1px solid #3a3a5a;
    border-radius: 3px;
    position: relative;
}

.recipe-quantity {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    padding: 1px 4px;
    border-radius: 2px;
}

.recipe-plus {
    font-size: 24px;
    color: #888;
    padding: 0 5px;
}

.recipe-arrow {
    font-size: 28px;
    color: #9edc60;
    padding: 0 10px;
}

.recipe-output {
    display: flex;
    align-items: center;
}

.recipe-station {
    font-size: 12px;
    color: #9bddff;
    margin-top: 5px;
    font-style: italic;
}

/* Inline recipe */
.recipe-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #2a2a4e;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Item Sources Table */
.item-sources {
    margin: 10px 0;
}

.item-sources-table {
    border-collapse: collapse;
    background-color: #1a1a2e;
}

.item-sources-table th {
    background-color: #2a2a4e;
    color: #aaa;
    padding: 8px 12px;
    text-align: left;
    font-weight: bold;
    border: 1px solid #4a4a6a;
}

.item-sources-header-icon {
    width: 32px;
    padding: 4px !important;
}

.item-sources-table td {
    padding: 8px 12px;
    vertical-align: middle;
    border: 1px solid #4a4a6a;
    background-color: #1a1a2e;
}

.item-sources-cell-icon {
    width: 32px;
    text-align: center;
    padding: 4px !important;
}

.item-sources-cell-name {
    white-space: nowrap;
}

.item-sources-cell-quantity {
    text-align: center;
}

.item-sources-cell-rarity {
    text-align: center;
}

/* Spell table styling (for SpellList template) */
.spell-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #1a1a2e;
}

.spell-table th {
    background-color: #2a2a4e;
    color: #aaa;
    padding: 8px 12px;
    text-align: left;
    font-weight: bold;
    border: 1px solid #4a4a6a;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.spell-table td {
    padding: 8px 12px;
    vertical-align: middle;
    border: 1px solid #4a4a6a;
    background-color: #1a1a2e;
}

.spell-table tr:nth-child(even) td {
    background-color: #2a2a4e;
}

.spell-table tr:hover td {
    background-color: #3a3a5e;
}

/* Spell image cell */
.spell-table .spell-image {
    text-align: center;
    padding: 4px;
    width: 64px;
}

/* Spell description - allow wrapping */
.spell-table .spell-description {
    white-space: pre-line;
    max-width: 300px;
}

/* Spell formula */
.spell-table .spell-formula {
    white-space: pre-line;
}