MediaWiki:Common.css: Difference between revisions

From Tibia Idle wiki

← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* RESPONSYWNA, NOWOCZESNA, JASNA TABELA WIKI */
<div style="padding: 15px; background-color: white; font-family: sans-serif; color: #333; border-radius: 8px;">
  <p style="font-size: 20px; font-weight: bold; text-align: center;">
    🎁 Reward box - try your luck!
  </p>
  <p>
    Reward boxes are crates where you can draw random items using idle points. In these boxes, you'll mainly find very rare decorative items, dolls, and home decoration. You won't find items here that significantly boost your character's strength. Those kinds of items are obtained through quests.
  </p>
  <p>{{#tag:html|<img src="https://tibiaidle.com/images/giftbox.jpg" width="80%">}}</p>
</div>


/* Każdą tabelę opakowujemy w przewijalny kontener */
== Basic Items ==
.wikitable {
{{#tag:html|
    background: #fff !important;
<div class="section-soft"><div class="items-wrap">
    color: #23272e !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    margin: 32px auto !important;
    /* Usuńemy sztywne min-width i width */
    /* min-width: 600px; */
    /* width: 100% !important; */
}


/* Styl komórek */
<a class="item-link" href="{{fullurl:Green Dragon Leather}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5877.png"><div class="item-label">Green Dragon Leather</div></div></a>
.wikitable th,
<a class="item-link" href="{{fullurl:Ape Fur}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5883.png"><div class="item-label">Ape Fur</div></div></a>
.wikitable td {
<a class="item-link" href="{{fullurl:Turtle Shell}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5899.png"><div class="item-label">Turtle Shell</div></div></a>
    padding: 12px 16px !important;
<a class="item-link" href="{{fullurl:Iron Ore}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5880.png"><div class="item-label">Iron Ore</div></div></a>
    border: none !important;
<a class="item-link" href="{{fullurl:Minotaur Leather}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5878.png"><div class="item-label">Minotaur Leather</div></div></a>
    vertical-align: middle !important;
<a class="item-link" href="{{fullurl:Beholder Eye}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5898.png"><div class="item-label">Beholder Eye</div></div></a>
<a class="item-link" href="{{fullurl:Chicken Feather}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5890.png"><div class="item-label">Chicken Feather</div></div></a>
<a class="item-link" href="{{fullurl:Magic Sulphur}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5904.png"><div class="item-label">Magic Sulphur</div></div></a>
<a class="item-link" href="{{fullurl:Lizard Scale}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5881.png"><div class="item-label">Lizard Scale</div></div></a>
<a class="item-link" href="{{fullurl:Soul Orb}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5944.png"><div class="item-label">Soul Orb</div></div></a>
<a class="item-link" href="{{fullurl:Ice Cream}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/7373.png"><div class="item-label">Ice Cream</div></div></a>
<a class="item-link" href="{{fullurl:Demon Dust}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5906.png"><div class="item-label">Demon Dust</div></div></a>
<a class="item-link" href="{{fullurl:Honeycomb}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5902.png"><div class="item-label">Honeycomb</div></div></a>
<a class="item-link" href="{{fullurl:Spider Silk}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5879.png"><div class="item-label">Spider Silk</div></div></a>
<a class="item-link" href="{{fullurl:Lizard Leather}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5876.png"><div class="item-label">Lizard Leather</div></div></a>
<a class="item-link" href="{{fullurl:Hardened Bone}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5925.png"><div class="item-label">Hardened Bone</div></div></a>
<a class="item-link" href="{{fullurl:Yellow Piece of Cloth}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5914.png"><div class="item-label">Yellow Piece of Cloth</div></div></a>
<a class="item-link" href="{{fullurl:Gold Nugget}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/2157.png"><div class="item-label">Gold Nugget</div></div></a>


}
</div></div>
}}


/* Styl nagłówków */
== Rare Items ==
.wikitable th {
{{#tag:html|
    background: #f7fafc !important;
<div class="section-soft"><div class="items-wrap">
    color: #3182ce !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    border-bottom: 2px solid #3182ce !important;
}


/* Co drugi wiersz lekko szary */
<a class="item-link" href="{{fullurl:Infernal Bolts}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/6529.png"><div class="item-label">Infernal Bolts</div></div></a>
.wikitable tr:nth-child(even) { background: #f5f6fa !important; }
<a class="item-link" href="{{fullurl:Key Ring}}"><div class="item-card"><img src="https://tibiaidl
.wikitable tr:nth-child(odd)  { background: #fff      !important; }
 
/* Efekt hover */
.wikitable tr:hover { background: #e3eafc !important; }
 
/* Linki bez podkreślenia */
.wikitable a,
.wikitable a:visited {
    color: #000000 !important;
    text-decoration: none !important;
    transition: color 0.2s;
}
.wikitable a:hover {
    color: #001adb !important;
}
 
/* Zaokrąglenie rogów tylko na rogach tabeli */
.wikitable th:first-child                      { border-top-left-radius: 12px !important; }
.wikitable th:last-child                        { border-top-right-radius: 12px !important; }
.wikitable tr:last-child td:first-child        { border-bottom-left-radius: 12px !important; }
.wikitable tr:last-child td:last-child          { border-bottom-right-radius: 12px !important; }
 
 
/* --- RESPONSYWNE PRZEWIJANIE I CENTROWANIE NA MOBILNYCH --- */
@media screen and (max-width: 800px) {
  .wikitable {
    overflow-x: auto !important;
    margin: 0.5em auto !important;          /* centrowanie */
    max-width: calc(100% - 1em) !important;  /* uwzględnia padding artykułu */
    padding: 0 0.1em;                        /* opcjonalny wewnętrzny margines */
    /* upewniamy się, że nie blokuje min-width */
    min-width: 0 !important;
  }
  .wikitable th,
  .wikitable td {
    padding: 8px 12px !important;
    min-width: auto !important;
  }
 
  /* Infoboxy (np. Ancient Tiara) analogicznie */
  table.infobox {
    display: block !important;
    overflow-x: auto !important;
    margin: 0.5em auto !important;
    max-width: calc(100% - 1em) !important;
    min-width: 0 !important;
  }
  table.infobox td {
    white-space: nowrap !important;
  }
}
 
 
/* Dla kafelkowej tabeli głównej – wszystkie kafle równe i linki bez podkreśleń */
table.mainpage-tiles {
    border-collapse: separate !important;
    border-spacing: 20px 18px !important;
    margin: 30px auto 0 auto;
    background: transparent !important;
}
 
.mainpage-tile {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(50,50,93,.08), 0 1.5px 6px rgba(49,130,206,.09);
    padding: 18px 10px 10px 10px;
    width: 260px;                /* SZTYWNA szerokość wszystkich kafli */
    max-width: 260px;
    min-width: 260px;
    text-align: center;
    font-size: 1.07em;
    border: 1px solid #f0f1f7;
    transition: box-shadow 0.2s, transform 0.12s;
    vertical-align: top;
}
 
.mainpage-tile:hover {
    box-shadow: 0 8px 32px rgba(49,130,206,.13), 0 2px 8px rgba(49,130,206,.11);
    transform: translateY(-3px) scale(1.015);
    border: 1.5px solid #b3d5fa;
}
 
.mainpage-tile img {
    margin-bottom: 12px;
    margin-top: 4px;
    max-width: 96px;
    height: auto;
}
 
.mainpage-tile-desc {
    font-size: .96em;
    color: #595e66;
    margin-top: 3px;
}
 
/* Styl linków – brak podkreśleń */
.mainpage-tile a,
.mainpage-tile a:visited {
    color: #2266e2 !important;
    font-weight: bold;
    text-decoration: none !important;
    font-size: 1.17em;
}
 
.mainpage-tile a:hover {
    color: #000 !important;
}
 
/* Responsive kafle na mobilnych */
@media (max-width: 800px) {
    table.mainpage-tiles {
        border-spacing: 8px 10px !important;
    }
    .mainpage-tile {
        min-width: 125px;
        max-width: 98vw;
        width: 98vw;
        padding: 12px 3px 7px 3px;
    }
    .mainpage-tile img {
        max-width: 70px;
    }
 
tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
 
}
 
.mw-parser-output table {
  /* nadpisujemy block na table */
  display: table !important;
  overflow: auto;
  max-width: 100%;
}
/* === SIATKA LADNYCH KAFELKÓW === */
.items-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;
  padding:10px 4px;
}
 
/* MediaWiki lubi wstawiać <p> – niech nie zajmują komórek grida */
.items-wrap > p{ display:contents !important; margin:0 !important; }
 
/* Link obejmuje cały kafel */
.item-link{
  display:block;
  text-decoration:none !important;
  color:inherit !important;
}
 
/* Kafelek */
.item-card{
  background:#f7f9fc;
  border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px 14px;
  min-height:150px;
  transition:transform .08s ease, box-shadow .2s ease;
}
 
/* Obrazek i podpis */
.item-card img{ width:48px; height:auto; image-rendering:pixelated; }
.item-card .item-label{ margin-top:10px; font-weight:700; line-height:1.15; }
 
/* Hover */
.item-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
 
/* Sekcje z miękkim tłem */
.section-soft{ background:#e9eff5; border-radius:16px; padding:16px; }
 
/* Mobile */
@media (max-width:700px){
  .items-wrap{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .item-card{ min-height:130px; padding:14px 10px; }
}
 
/* FIX: pusta pierwsza kratka przez węzły tekstowe */
.items-wrap{
  font-size: 0;      /* białe znaki nie zajmują miejsca w gridzie */
  line-height: 0;
  grid-auto-flow: dense; /* wypełnia ewentualne luki */
}
 
/* Przywracamy normalne rozmiary tekstu wewnątrz kafelków */
.items-wrap .item-card,
.items-wrap .item-card .item-label,
.items-wrap a { font-size: initial; line-height: initial; }
 
/* Extra: ukryj automatyczne <br> / puste elementy */
.items-wrap > br,
.items-wrap > .mw-empty-elt { display: none !important; }

Revision as of 13:36, 2 September 2025

<div style="padding: 15px; background-color: white; font-family: sans-serif; color: #333; border-radius: 8px;">
  <p style="font-size: 20px; font-weight: bold; text-align: center;">
    🎁 Reward box - try your luck!
  </p>
  <p>
    Reward boxes are crates where you can draw random items using idle points. In these boxes, you'll mainly find very rare decorative items, dolls, and home decoration. You won't find items here that significantly boost your character's strength. Those kinds of items are obtained through quests.
  </p>
  <p>{{#tag:html|<img src="https://tibiaidle.com/images/giftbox.jpg" width="80%">}}</p>
</div>

== Basic Items ==
{{#tag:html|
<div class="section-soft"><div class="items-wrap">

<a class="item-link" href="{{fullurl:Green Dragon Leather}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5877.png"><div class="item-label">Green Dragon Leather</div></div></a>
<a class="item-link" href="{{fullurl:Ape Fur}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5883.png"><div class="item-label">Ape Fur</div></div></a>
<a class="item-link" href="{{fullurl:Turtle Shell}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5899.png"><div class="item-label">Turtle Shell</div></div></a>
<a class="item-link" href="{{fullurl:Iron Ore}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5880.png"><div class="item-label">Iron Ore</div></div></a>
<a class="item-link" href="{{fullurl:Minotaur Leather}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5878.png"><div class="item-label">Minotaur Leather</div></div></a>
<a class="item-link" href="{{fullurl:Beholder Eye}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5898.png"><div class="item-label">Beholder Eye</div></div></a>
<a class="item-link" href="{{fullurl:Chicken Feather}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5890.png"><div class="item-label">Chicken Feather</div></div></a>
<a class="item-link" href="{{fullurl:Magic Sulphur}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5904.png"><div class="item-label">Magic Sulphur</div></div></a>
<a class="item-link" href="{{fullurl:Lizard Scale}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5881.png"><div class="item-label">Lizard Scale</div></div></a>
<a class="item-link" href="{{fullurl:Soul Orb}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5944.png"><div class="item-label">Soul Orb</div></div></a>
<a class="item-link" href="{{fullurl:Ice Cream}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/7373.png"><div class="item-label">Ice Cream</div></div></a>
<a class="item-link" href="{{fullurl:Demon Dust}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5906.png"><div class="item-label">Demon Dust</div></div></a>
<a class="item-link" href="{{fullurl:Honeycomb}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5902.png"><div class="item-label">Honeycomb</div></div></a>
<a class="item-link" href="{{fullurl:Spider Silk}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5879.png"><div class="item-label">Spider Silk</div></div></a>
<a class="item-link" href="{{fullurl:Lizard Leather}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5876.png"><div class="item-label">Lizard Leather</div></div></a>
<a class="item-link" href="{{fullurl:Hardened Bone}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5925.png"><div class="item-label">Hardened Bone</div></div></a>
<a class="item-link" href="{{fullurl:Yellow Piece of Cloth}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/5914.png"><div class="item-label">Yellow Piece of Cloth</div></div></a>
<a class="item-link" href="{{fullurl:Gold Nugget}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/2157.png"><div class="item-label">Gold Nugget</div></div></a>

</div></div>
}}

== Rare Items ==
{{#tag:html|
<div class="section-soft"><div class="items-wrap">

<a class="item-link" href="{{fullurl:Infernal Bolts}}"><div class="item-card"><img src="https://tibiaidle.com/item-images/6529.png"><div class="item-label">Infernal Bolts</div></div></a>
<a class="item-link" href="{{fullurl:Key Ring}}"><div class="item-card"><img src="https://tibiaidl
Retrieved from "https://tibiaidle.com/wiki/index.php?title=MediaWiki:Common.css&oldid=6041"