Module:Item/styles.css

/* Module:Item/styles.css — TemplateStyles */
.gtw-lead {
  display: none;
}

/* ── Card shell ── */
.gtw-item-infobox {
  --bg-card: var(--color-surface-1);
  --bg-section: var(--color-surface-2);
  --border: var(--border-base);
  --border-color: var(--border-color-base);
  --text: var(--color-base--subtle);
  --text-bright: var(--color-base);
  --text-label: #8aaa9c;
  --text-section: #7a8a8c;
  --accent: #d4a017;

  background: var(--bg-card);
  border: var(--border);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  color: var(--text);
  font-size: 14px;
}

/* ── Shared ── */
.gtw-item-infobox .section-header {
  background: var(--bg-section);
  padding: 10px 18px;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-section);
  user-select: none;
}
.gtw-item-infobox .growsprite {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.gtw-item-infobox .growsprite img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.gtw-item-infobox .timer {
  color: var(--accent);
  font-weight: 600;
}
.gtw-item-infobox .warning {
  color: #f60;
}

/* ── Header ── */
.gtw-item-infobox .gtw-item-infobox-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}
.gtw-item-infobox .gtw-item-infobox-header > .growsprite,
.gtw-item-infobox .gtw-item-infobox-header > .growsprite img {
  width: 42px;
  height: 42px;
}
.gtw-item-infobox .item-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--text-bright);
  flex: 1;
  overflow-wrap: anywhere;
}
.gtw-item-infobox .item-title .rarity {
  font-weight: 400;
  color: var(--text);
  font-size: 13px;
}
.gtw-item-infobox .gtw-item-infobox-separator {
  height: 1px;
  background: var(--border-color);
  margin: 0 18px;
}

/* ── Description ── */
.gtw-item-infobox .gtw-item-infobox-desc {
  padding: 14px 18px;
  font-size: 15px;
  font-style: italic;
}

/* ── Properties ── */
.gtw-item-infobox .section-value {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-label);
}

/* ── Data table ── */
.gtw-item-infobox .data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.gtw-item-infobox .data-table th,
.gtw-item-infobox .data-table td {
  padding: 10px 16px;
  text-align: left;
  vertical-align: middle;
}
.gtw-item-infobox .data-table td {
  border-bottom: var(--border);
}
.gtw-item-infobox .data-table td.td-label {
  width: 1%;
  color: var(--text-label);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border-right: var(--border);
}
.gtw-item-infobox .data-table td.td-value {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.gtw-item-infobox .td-value-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gtw-item-infobox .td-value-inner .sub {
  color: var(--text-label);
  font-size: 12px;
}
.gtw-item-infobox .data-table td.td-footer-combined {
  border-bottom: none;
  padding: 0;
}

/* ── Footer (tree + seed colors) ── */
.gtw-item-infobox .side-sprites {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px;
}
.gtw-item-infobox .tree-icon,
.gtw-item-infobox .seed-icon,
.gtw-item-infobox .seed-colors-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.gtw-item-infobox .tree-icon,
.gtw-item-infobox .seed-icon {
  gap: 4px;
}
.gtw-item-infobox .seed-colors-group {
  gap: 8px;
}
.gtw-item-infobox .side-sprites > .tree-icon,
.gtw-item-infobox .side-sprites > .seed-colors-group {
  flex: 1;
}
.gtw-item-infobox .tree-icon .growsprite,
.gtw-item-infobox .tree-icon .growsprite img {
  width: 96px !important;
  height: 96px !important;
}
.gtw-item-infobox .seed-icon .growsprite,
.gtw-item-infobox .seed-icon .growsprite img {
  width: 32px !important;
  height: 32px !important;
}
.gtw-item-infobox .side-separator {
  width: 1px;
  align-self: stretch;
  background: var(--border-color);
}
.gtw-item-infobox .color-swatches {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gtw-item-infobox .color-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}
.gtw-item-infobox .color-dot {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Paint sidebar (desktop) ── */
.gtw-item-infobox .data-table th.td-paint-header {
  width: 40%;
}
.gtw-item-infobox .data-table td.td-paint {
  border-left: var(--border);
  border-bottom: var(--border);
  vertical-align: top;
  padding: 12px;
  width: 40%;
}
.gtw-item-infobox .td-paint .paint-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* ── Paint grid ── */
.gtw-item-infobox .paint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.gtw-item-infobox .paint-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(20, 20, 20, 0.1);
  border-radius: 6px;
  border: var(--border);
  min-width: 0;
  overflow: hidden;
  user-select: none;
}
.gtw-item-infobox .paint-item::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  border-radius: inherit;
}
.gtw-item-infobox .paint-swatch {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.gtw-item-infobox .paint-swatch .growsprite img {
  border-radius: 4px;
}
.gtw-item-infobox .paint-label {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* ── Paint color labels ── */
.gtw-item-infobox .paint-item--aqua .paint-label {
  color: #44aacc;
}
.gtw-item-infobox .paint-item--blue .paint-label {
  color: #4466cc;
}
.gtw-item-infobox .paint-item--charcoal .paint-label {
  color: #667777;
}
.gtw-item-infobox .paint-item--green .paint-label {
  color: #44aa44;
}
.gtw-item-infobox .paint-item--purple .paint-label {
  color: #9944cc;
}
.gtw-item-infobox .paint-item--red .paint-label {
  color: #cc4444;
}
.gtw-item-infobox .paint-item--varnish .paint-label {
  color: var(--text);
}
.gtw-item-infobox .paint-item--yellow .paint-label {
  color: #ccbb44;
}

/* ── Mobile paint ── */
.gtw-item-infobox .mobile-paint {
  display: none;
}
.gtw-item-infobox .mobile-paint .paint-header {
  cursor: pointer;
}

.gtw-item-infobox .mobile-paint .paint-header.mw-collapsible-toggle {
  position: relative;
  padding-right: 2.25rem;
  user-select: none;
}
.gtw-item-infobox .mobile-paint .paint-header.mw-collapsible-toggle::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  opacity: 0.8;
  transform-origin: center;
  transform: translateY(-50%) rotate(-45deg);
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}
.gtw-item-infobox .mobile-paint .paint-header.mw-collapsible-toggle:hover::after {
  opacity: 1;
}
.gtw-item-infobox .mobile-paint .mw-collapsed > .paint-header.mw-collapsible-toggle::after {
  transform: translateY(-50%) rotate(-45deg);
}
.gtw-item-infobox
  .mobile-paint
  .mw-collapsible:not(.mw-collapsed)
  > .paint-header.mw-collapsible-toggle::after {
  transform: translateY(-50%) rotate(45deg);
}
/* ── Paint gradient overlay ── */
.gtw-item-infobox .paint-item::before {
  background: linear-gradient(to right, transparent 40%, var(--paint-color, transparent));
}
/* ── Paint bucket icon ── */
.gtw-item-infobox .paint-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-image: var(--bucket);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  opacity: 0.25;
  mask-image: linear-gradient(to left, black 10%, transparent);
  -webkit-mask-image: linear-gradient(to left, black 10%, transparent);
}
/* ── Paint swatch filter ── */
.gtw-item-infobox .paint-swatch .growsprite img {
  filter: var(--paint-filter);
}
/* ── Paint label color ── */
.gtw-item-infobox .paint-label {
  color: var(--paint-color, var(--text));
}
/* ── Paint color modifiers ── */
.gtw-item-infobox .paint-item--aqua {
  --paint-color: #44aacc;
  --paint-filter: url(#paint-aqua);
  --bucket: url(https://cdn.growtopiawiki.com/sprites/3484.png);
}
.gtw-item-infobox .paint-item--blue {
  --paint-color: #4466cc;
  --paint-filter: url(#paint-blue);
  --bucket: url(https://cdn.growtopiawiki.com/sprites/3486.png);
}
.gtw-item-infobox .paint-item--charcoal {
  --paint-color: #667777;
  --paint-filter: url(#paint-charcoal);
  --bucket: url(https://cdn.growtopiawiki.com/sprites/3490.png);
}
.gtw-item-infobox .paint-item--green {
  --paint-color: #44aa44;
  --paint-filter: url(#paint-green);
  --bucket: url(https://cdn.growtopiawiki.com/sprites/3482.png);
}
.gtw-item-infobox .paint-item--purple {
  --paint-color: #9944cc;
  --paint-filter: url(#paint-purple);
  --bucket: url(https://cdn.growtopiawiki.com/sprites/3488.png);
}
.gtw-item-infobox .paint-item--red {
  --paint-color: #cc4444;
  --paint-filter: url(#paint-red);
  --bucket: url(https://cdn.growtopiawiki.com/sprites/3478.png);
}
.gtw-item-infobox .paint-item--varnish {
  --paint-filter: none;
  --bucket: url(https://cdn.growtopiawiki.com/sprites/3492.png);
}
.gtw-item-infobox .paint-item--yellow {
  --paint-color: #ccbb44;
  --paint-filter: url(#paint-yellow);
  --bucket: url(https://cdn.growtopiawiki.com/sprites/3480.png);
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .gtw-item-infobox .data-table td {
    padding: 8px 12px;
  }
  .gtw-item-infobox .data-table td.td-paint,
  .gtw-item-infobox .data-table th.td-paint-header {
    display: none;
  }
  .gtw-item-infobox .mobile-paint {
    display: table-row;
  }
  .gtw-item-infobox .paint-grid {
    padding: 8px 12px;
    gap: 5px;
  }
}