MediaWiki:Common.css

/** o código CSS colocado aqui será aplicado a todos os temas */

::-webkit-scrollbar {
 width: 10px;
 height: 10px;
}
::-webkit-scrollbar-thumb {
 background: #ababab;
 border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
 background: #878787;
}
::-webkit-scrollbar-track{
 background: #ffffff;
 border-radius: 10px;
}

.MagiasImagem img{
    width: 86px;
    height: auto;
    margin-left: 16px;
    border-radius: 12px;
    box-shadow: 0px 0px 1px 0px;
}

/* Contribuições*/
.contributionscores-wrapper       {  }
.contributionscores-title         { background-color: #aaaaaa; margin-bottom:0px; padding-left: .4em; }
.contributionscores .header { background-color: #cccccc; border-bottom: 1px solid #999999; font-weight: bold; }
.contributionscores .odd        { background-color: #eeeeee; }
.contributionscores .header td   { padding-left: .2em; padding-right: .2em; }
.contributionscores .content   { padding-left: .2em; padding-right: .2em; }

/* Estilo das Tabelas de DPL */
table#tabelaDPL {border-collapse: collapse; background-color: #CEDFF2;width:100%;}
table#tabelaDPL th {border:2px solid white;}
table#tabelaDPL tr td {border:2px solid white; background-color:#E8F2F8; textalign:center;}
table#tabelaDPL td:first-child {padding-left: 4px; backgroundcolor:transparent; text-align:left;}
table#tabelaDPL td:last-child {padding-left: 4px; text-align:left;}

/* NPC Trades */
#ComercioNPC table > tbody > tr > td:nth-child(1){
  display: grid;
}

div.exception, td.exception {
  background-color:#ff8e8e;
}
td.buy table tbody tr td,
td.sell table tbody tr td {
  line-height: 1em;
  padding: 2px;
}
td.buy table,
td.sell table {
  padding: 0;
  margin: 0;
}
table.trades td {
  padding:0;
  line-height:1.25em;
}
div.npcprice, div.npcvalue, td.npcvalue, td.npcprice {
  background-color:#9eff8e;
  font-weight: bold;
  color:#000;
  line-height:100%;
}


#mNPC_Infobox {
  display: grid;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0px 0px 4px 1px hsla(0,0%,0%,.24);
  gap: 16px;
}

#mNPC_Infobox pre {
  all: unset;
}

.Casos-de-Familia {
  all:unset;
  border-bottom: dashed 1px hsla(0,0%,0%,.24);
  display: block;
  width: 100%;
}

#mNPC_Infobox > div:nth-child(2) {
  display: grid;
  justify-content: start;
}

#mNPC_Infobox > div:nth-child(2) > p{
  padding: 0px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  margin: 0px;
}

#mNPC_Infobox > div:nth-child(2) > p > *:nth-child(1){
  justify-self: end;
}

#mNPC_Infobox > div:nth-child(2) > p > *:nth-child(2){
  justify-self: start;
}


#mNPC_Infobox > .header {
  display: grid;
  grid-template-areas: 'Imagem .' 'Imagem titulo' 'Imagem subtitulo' 'Imagem.';
  column-gap: 16px;
  row-gap: 8px;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  /* border-bottom: dashed 1px hsla(0,0%,0%,.24); */
}

#mNPC_Infobox > .header pre {
  all: unset;
  padding: 0px;
  background: transparent;
  border: none;
}

#mNPC_Infobox > .header > *:nth-child(1){
  grid-area: Imagem;
}

#mNPC_Infobox > .header > *:nth-child(2){
  grid-area: titulo;
  align-self: end;
  font-size: 32px;
  font-weight: normal;
}

#mNPC_Infobox > .header > *:nth-child(2)::after {
  display: none;
}

#mNPC_Infobox > .header > *:nth-child(3){
  grid-area: subtitulo;
  align-self: start;
  font-size: 16px;
  font-weight: normal;
}

#mNPC_Infobox > .header > *:nth-child(3)::after {
  display: none;
}

#mNPC_Infobox > .main {
  display: grid;
}

#mNPC_Infobox > .main > h1 {
  margin-top: 4px;
}

#mNPC_Infobox > .main b {
  font-size: 20px;
}

#mNPC_Infobox > .main > h1::after{
  display: none;
}

#mNPC_Infobox > .main > .section {
  display: grid;
  gap: 4px;
  width: 100%;
  overflow-x: scroll;
}

/*Criaturas Imagens*/
.tw-criatura-32 {
  --size: 32px;
}
.tw-criatura-64 {
  --size: 64px;
}
.tw-criatura-2-steps {
  --steps: 2;
}
.tw-criatura-8-steps {
  --steps: 8;
}
.tw-criatura-13-steps {
  --steps: 13;
}
.tw-criatura {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: var(--size);
  height: var(--size);
}
.tw-criatura > div {
  position: absolute;
  top: 0;
  left: 0;
  animation: rodando 1s steps(var(--steps)) infinite;
}
.tw-criatura-img-2 > div {
  left: calc(-1 * var(--size));
}
.tw-criatura-img-3 > div {
  left: calc(-2 * var(--size));
}
.tw-criatura-img-4 > div {
  left: calc(-3 * var(--size));
}

/* Home Responsividade */

table.home-responsive{
  width: 100%;
  table-layout: fixed;
  max-width: 1100px;
  text-align: center;
  box-shadow: 0px 0px 4px 1px hsla(0, 0%, 0%, .24);
  overflow: hidden;
  border-radius: 1rem;
}

table.home-responsive td{
  width: 20%;
  word-wrap: break-word;
}

table.home-responsive img{
  height: auto;
  max-width: 125px;
}


table.home-responsive a{
  font-size: 12px;
  font-weight: bold;
}

#mainBolinho {
  display: grid;
  width: 100%;
}

#mainBolinho > .header {
  display: grid;
  grid-gap: 16px;
}

#mainBolinho > .header :is(a) {
	background: none;
	padding-right: 0;
	color: white;
}

#mainBolinho > .header #toc {
  display: none;
}

#mainBolinho > .header > div {
  display: grid;
  grid-gap: 4px;
}

#mainBolinho > .header > div:nth-child(2) > div:nth-child(1),
#mainBolinho > .header > div:nth-child(2) > div:nth-child(2){
    margin-bottom: 20px;
    display: grid;
    background: #2f487b;
    grid-auto-flow: column;
    place-self: start;
    justify-self: center;
    align-items: center;
    border-radius: 8px;
    padding: 0 16px;
}

#mainBolinho > .header > div:nth-child(2) > div:nth-child(2) > a:visited,
#mainBolinho > .header > div:nth-child(2) > div:nth-child(2) > a{
	background: #2f487b;
    color: white !important;
	text-decoration: none;
}
#mainBolinho > .header > div:nth-child(2) > div:nth-child(1) > *:nth-child(1),
#mainBolinho > .header > div:nth-child(2) > div:nth-child(2) > *:nth-child(1){
  border-radius: 4px 0px 0px 4px;
}

#mainBolinho > .header > div:nth-child(2) > div:nth-child(1) > *:nth-child(2){
  border-radius: 0px 0px 0px 0px;
}

#mainBolinho > .header > div:nth-child(2) > div:nth-child(1) > *:nth-child(3),
#mainBolinho > .header > div:nth-child(2) > div:nth-child(2) > *:nth-child(2){
  border-radius: 0px 4px 4px 0px;
}

#mainBolinho > .header > div > * {
  all: unset;
  text-align: center;
}

#mainBolinho > .header > div > h1 {
  font-size: 40px;
  font-weight: bolder;
}

#mainBolinho > .header > div > h2 {
  font-size: 20px;
}

#mainBolinho > .header > div > h2 > * {
  all: unset;
}

#mainBolinho > .header > div > *::after {
  all: unset;
  border: none;
}


#mainBolinho > .main {
  display: grid;
  width: 100%;
  grid-gap: 16px;
  text-align: center;
}

#mainBolinho > .main > .section:nth-child(1) {
  justify-self: center;
}

#mainBolinho > .main > .section:nth-child(2) img {
  width: 100%;
  height: auto;
}

#CriaturaDPL > table > tbody > tr > td:nth-child(2){
  background: white !important;
  box-shadow: inset 0px 0px 4px 1px hsla(0,0%,0%,.24);
}



/* Deleta */
#Odin *:not(table):not(thead):not(tbody):not(tfoot):not(tr):not(th):not(td):not(img) { all: unset;}
/* #Odin * { all: unset;} */
#Odin {
  display: grid;
  gap: 16px;
  box-shadow: 0px 0px 4px 1px #ccc;
  border-radius: 16px;
  padding: 16px;
}
#Odin:not(.Minerios) > .header {
  display: grid;
  gap: 4px 16px;
  grid-template-areas: 'img h1' 'img h2';
  justify-content: start;
}
#Odin:not(.Minerios) > .header > *:nth-child(1){
  grid-area: img;
}
#Odin:not(.Minerios) > .header > *:nth-child(2){
  grid-area: h1;
  align-self: end;
  font-size: 24px;
}
#Odin:not(.Minerios) > .header > *:nth-child(3){
  grid-area: h2;
  align-self: start;
  font-size: 18px;
  font-style: italic;
}

#Odin h1::after, #Odin h2::after {
  display: none;
}

#Odin .separador {
  border-bottom: dashed 1px #ccc;
  display: block;
  width: 100%;
  height: 1px;
}
#Odin .moreinfo {
  display: grid;
  padding: 0px 16px;
}
#Odin .moreinfo > p > span:nth-child(1) {
  font-weight: bold;
}
#Odin .main {
  display: grid;
  gap: 16px;
}

#Odin .main > h1 {
  font-weight: bold;
  padding: 0px 16px;
}

#Odin .main .section{
  display: grid;
  gap: 16px;
  width: 100%;
  overflow-x: scroll;
  grid-auto-flow: column;
}
#Odin .main .section > *:nth-child(1) {
  justify-self: end;
}
#Odin .main .section > *:nth-child(2) {
  justify-self: start;
}

#Odin .main .section table:nth-child(1) {
  table-layout: fixed;
  white-space: nowrap;
}
#Odin .main .section table:nth-child(2) {
  table-layout: fixed;
  white-space: nowrap;
}

#Odin .main .section p {
  text-align: center;
}

#Odin .main .section table td {
  width: auto;
}

#Odin .main .section table td:nth-child(1) {
  display: grid;
}


#Odin .main .section table table{
  font-weight: bold;
}


#Odin a:hover{
  cursor: pointer;
  text-decoration: underline;
}

#Odin .moreinfo b { color: black; font-weight: bold;}

/* Diálogos*/
.Diálogos{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 10px 10px 18px;
    position: relative;
    vertical-align: top;
    width: auto;
}

.Diálogos::before {
    background-color: #F2F2F2;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform: rotate( 29deg ) skew( -35deg );
    -moz-transform: rotate( 29deg ) skew( -35deg );
    -ms-transform: rotate( 29deg ) skew( -35deg );
    -o-transform: rotate( 29deg ) skew( -35deg );
    -webkit-transform: rotate( 29deg ) skew( -35deg );
    width: 20px;
}

.me {
    float: left;
    margin: 4px 0px 0px 16px;
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;
}

.AlinhaQuest table {
  text-align: center;
}

/* Mapa/Box */
.mapbox_show {
    cursor: pointer;
}

/* Mapa Hunt */
.map_hunt_coord {
    display: none;
}

.map_hunt pre {
display:none;
}

/* Mapa */
.map_frame {
    z-index: 8010;
    display: none;
    position: fixed;
    width: 520px;
    height: 450px;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -250px;
    margin-right: 250px;
    margin-bottom: 250px;
    webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

#my-map {
    position: absolute;
    top: -374px;
    left: -192px;
    width: 1280px;
    height: 1200px;
}

.map_box {
    clip: rect(0px, 520px, 462px, 0px);
    position: absolute;
}

.map_show {
    cursor: pointer;
    color: #0645AD;
}

.map_show:hover {
    cursor: pointer;
    color: #0645AD;
    text-decoration: underline;
}

.map_cross {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 35px;
    height: 35px;
    cursor: pointer;
    z-index: 8040;
}

.map_overlay {
    opacity: 0.65;
    cursor: auto;
    display: none;
    height: 7628px;
    background-color: rgb(0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 8000;
}

.map_logobox {
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
    z-index: 8040;
    opacity: 0.8;
}

.map_logobox:hover {
    opacity: 1;
}

a.map_logo {
    background: url("https://www.bloodstonewiki.com.br/w/images/b/b5/Minimap_icon.png");
    background-repeat: no-repeat;
    width: 70px;
    height: 60px;
    position: absolute;
    bottom: 18px;
    right: 8px;
}
.map_hunt_box{
    border-radius: 12px;
    width: 250px;
    height: 250px;
}

#HuntTempletaBox    {
    box-shadow: 0px 0px 4px 0px hsl(0deg 0% 0% / 55%);
    overflow: hidden;
    border-radius: 12px;
    float: right;
    margin-right: 2px;
    background-color: #80808005;
}

#HuntTempletaBoxTitle   {
    margin-bottom: -6px;
    margin-top: 6px;
    text-align: center;
    font-family: Roboto;
    font-size: 22px;
    font-weight: 500;
}

@media only screen and (max-width: 600px) {
    #HuntTempletaBox{
        width: 100%;
    }
}

/*Info Template*/
#InfoTempleteBox {
    box-shadow: 0px 0px 4px 0px hsl(0deg 0% 0% / 55%);
    overflow: hidden;
    border-radius: 12px;
    float: right;
    margin-right: 2px;
    background-color: #80808005;
}

#InfoTempleteBoxTitle {
    margin-bottom: -6px;
    margin-top: 6px;
    text-align: center;
    font-family: Roboto;
    font-size: 22px;
    font-weight: 500;
}
.InfoTempleteBoxImg img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 600px) {
    #InfoTempleteBox {
        width: 100%;
    }
    .InfoTempleteBoxImg img {
        width:  100%;
    }
}

@media only screen and (min-width: 700px) {
    #InfoTempleteBox {
        width: 300px;
    }

    .InfoTempleteBoxImg {
        width: 100%;
        height: auto;
    }
}