MediaWiki:Common.css: mudanças entre as edições

3 215 bytes adicionados ,  Quinta-feira às 16h17min
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
 
(60 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
/** o código CSS colocado aqui será aplicado a todos os temas */
/** o código CSS colocado aqui será aplicado a todos os temas :) */


/* Geral */
/* Geral */
Linha 44: Linha 44:
     display: inline-block;
     display: inline-block;
     height: auto;
     height: auto;
}
.vector-menu-tabs a, .vector-menu-tabs {
  background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#00000000 100%) !important;
}
}


Linha 89: Linha 93:
     width: 25px;
     width: 25px;
     border-radius: 3px;
     border-radius: 3px;
    font-size: 0;
     background-image: url(https://wiki.otpokemon.com/images/2/24/Code_button.png);
     background-image: url(https://wiki.otpokemon.com/images/2/24/Code_button.png);
     background-position: center;
     background-position: center;
Linha 99: Linha 102:
     width: 25px;
     width: 25px;
     height: 25px;
     height: 25px;
}
#ca-edit a span {
    font-size: 0;
}
}


Linha 106: Linha 113:
     width: 25px;
     width: 25px;
     border-radius: 3px;
     border-radius: 3px;
    font-size: 0;
     background-image: url(https://wiki.otpokemon.com/images/e/e0/History_button.png);
     background-image: url(https://wiki.otpokemon.com/images/e/e0/History_button.png);
     background-position: center;
     background-position: center;
Linha 116: Linha 122:
     width: 25px;
     width: 25px;
     height: 25px;
     height: 25px;
}
#ca-history a span {
    font-size: 0;
}
}


Linha 123: Linha 133:
     width: 25px;
     width: 25px;
     border-radius: 3px;
     border-radius: 3px;
    font-size: 0;
     background-image: url(https://wiki.otpokemon.com/images/4/42/Expand-button.png);
     background-image: url(https://wiki.otpokemon.com/images/4/42/Expand-button.png);
     background-position: center;
     background-position: center;
Linha 131: Linha 140:
}
}


.vector-menu-dropdown .vector-menu-heading{
  font-size: 0;
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#a7d7f900 100%) !important;
}
.vectorMenu .menu {
.vectorMenu .menu {
     font-size: 15px;
     font-size: 15px;
Linha 271: Linha 287:
     width: calc(100% - 30%);
     width: calc(100% - 30%);
     height: 100%;
     height: 100%;
     transition: 1s;
     transition: 1s !important;
}
}


.ma-item:hover {
.ma-item:hover {
     transition: 1s;
     transition: 1s !important;
     transform: scale(1.10);
     transform: scale(1.10);
     filter: drop-shadow(2px 2px 2px rgba(34, 34, 34, 0.1));
     filter: drop-shadow(2px 2px 2px rgba(34, 34, 34, 0.1));
Linha 282: Linha 298:
.ma-text {
.ma-text {
     margin: 5px;
     margin: 5px;
     transition: 1s;
     transition: 1s !important;
     width: 80%;
     width: 80%;
     height: 100%;
     height: 100%;
Linha 288: Linha 304:


.ma-text:hover {
.ma-text:hover {
     transition: 1s;
     transition: 1s !important;
     transform: scale(1.10);
     transform: scale(1.10);
     filter: drop-shadow(2px 2px 2px rgba(34, 34, 34, 0.2));
     filter: drop-shadow(2px 2px 2px rgba(34, 34, 34, 0.2));
Linha 368: Linha 384:
     margin: -1px;
     margin: -1px;
     height: auto;
     height: auto;
     transition: 1s;
     transition: 1s !important;
}
}


.sc-icon:hover {
.sc-icon:hover {
     filter: grayscale(0%) contrast(115%);
     filter: grayscale(0%) contrast(115%);
     transition: 1s;
     transition: 1s !important;
     transform: scale(1.10);
     transform: scale(1.10);
}
}
Linha 387: Linha 403:
     position: relative;
     position: relative;
     margin: 20px auto;
     margin: 20px auto;
     transition: 1s;
     transition: 1s !important;
     border-radius: 20px;
     border-radius: 20px;
     display: flex;
     display: flex;
Linha 397: Linha 413:
.update-box-2:hover,
.update-box-2:hover,
.update-box:hover {
.update-box:hover {
     transition: 1s;
     transition: 1s !important;
     transform: scale(1.05);
     transform: scale(1.05);
}
}
Linha 447: Linha 463:
     text-align: center;
     text-align: center;
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
     border-radius: 10px;
     border-radius: 10px;
     margin-top: 2em;
     margin-top: 20px;
}
}


Linha 471: Linha 487:
     text-align: center;
     text-align: center;
     position: relative;
     position: relative;
     transition: 1s;
     transition: 1s !important;
     border-radius: 20px;
     border-radius: 20px;
     display: flex;
     display: flex;
Linha 479: Linha 495:


.destaque-box:hover{
.destaque-box:hover{
     transition: 1s;
     transition: 1s !important;
     transform: scale(1.01);
     transform: scale(1.01);
}
}
Linha 486: Linha 502:
     vertical-align: middle;
     vertical-align: middle;
     width: 100%;
     width: 100%;
    height: 100%;
     border-radius: 6px;
     border-radius: 6px;
     border-top: 10px solid #3498db;
     border-top: 10px solid #007ee5;
     object-fit: cover;
     object-fit: cover;
}
}
/* Mapas */


.divmap a img{
    width: 100%;
    height: 100%;
}


/* Patch Notes */
/* Patch Notes */
Linha 509: Linha 531:
}
}


.patch-notes .toc {
.patch-notes .toc, .off-topic .toc {
     display: none;
     display: none;
}
}
Linha 580: Linha 602:


.column-addons img {
.column-addons img {
     transition: 1s;
     transition: 1s !important;
}
}


.column-addons img:hover {
.column-addons img:hover {
     transform: scale(1.10);
     transform: scale(1.10);
     transition: 1s;
     transition: 1s !important;
}
}


Linha 595: Linha 617:
/* Quests Page */
/* Quests Page */
.img-quests {
.img-quests {
     transition: 2s;
     transition: 2s !important;
}
}


.img-quests:hover {
.img-quests:hover {
     filter: contrast(140%);
     filter: contrast(140%);
     transition: 2s;
     transition: 2s !important;
}
}


table.wikitable.sortable.quest.jquery-tablesorter tr:hover {
table.wikitable.sortable.quest.jquery-tablesorter tr:hover {
     background: linear-gradient(90deg, #e8f4f2, #f8f9fa) !important;
     background: linear-gradient(90deg, #e8f4f2, #f8f9fa) !important;
     transition: 2s;
     transition: 2s !important;
}
}


Linha 614: Linha 636:
     width: 20%;
     width: 20%;
     border-radius: 10px;
     border-radius: 10px;
     transition: 2s;
     transition: 2s !important;
}
}


Linha 677: Linha 699:
}
}


 
/* Pokémon Pokedex */
/* Logo */
.collapsible-pokemon {
 
     width: 500px;
.mw-wiki-logo {
    cursor: pointer;
     background-image: url(https://wiki.otpokemon.com/images/f/ff/Logo4-wiki-azul.png) !important;
    padding: 8px;
    text-align: left;
    outline: none;
    font-style: italic;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid #1e90ff;
}
}


/* Atualizações */
.active {
.design-section {
     border-radius: 10px 10px 0px 0px;
     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 100px 0;
}
}


.design {
.collapsible-pokemon:after {
     display: flex;
     content: '\002B';
     align-items: center;
     font-weight: bold;
     justify-content: center;
    float: right;
     margin-left: 5px;
}
}


.timeline {
.collapsible-pokemon:before {
     width: 80%;
     content: '\002B\0020\00A0\00A0';
     height: auto;
     font-weight: bold;
     max-width: 800px;
     float: left;
     margin: 0 auto;
     margin-left: 5px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
}


.timeline-content {
.container-pokemon {
     background: #f7f6fb;
     border: 1px solid #1e90ff;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
     border-radius: 0px 0px 10px 10px;
    -webkit-box-shadow: 1px -1px 14px -2px rgba(0, 0, 0, 0.69);
    -moz-box-shadow: 1px -1px 14px -2px rgba(0, 0, 0, 0.69);
    border-radius: 5px;
    padding: 1.25rem;
    transition: 0.4s ease;
    overflow-wrap: break-word !important;
    margin: 1rem;
    margin-bottom: 20px;
    border-radius: 20px;
}
}


.timeline-component {
.content-pokemon {
     margin: 0px 20px 20px 20px;
     width: 518px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    border-radius: 0px 0px 10px 10px;
}
}


@media screen and (min-width: 768px) {
/* Logo */
    .timeline {
        display: grid;
        grid-template-columns: 1fr 3px 1fr;
        text-align: center;
    }


    .timeline-middle {
.mw-wiki-logo {
        position: relative;
    background-image: url(https://wiki.otpokemon.com/images/f/ff/Logo4-wiki-azul.png) !important;
        background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
}
        width: 3px;
        height: 100%;
    }


    .main-middle {
/* Atualizações */
        opacity: 0;
.design-section {
    }
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 100px 0;
}


    .timeline-circle {
.design {
        position: absolute;
    display: flex;
        top: 0;
    align-items: center;
        left: 50%;
    justify-content: center;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}
}


.timeline-component.timeline-content img {
.timeline {
     transition: 1s;
    width: 80%;
    height: auto;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
     text-align: center;
}
}


.timeline-component.timeline-content img:hover {
.timeline-content {
     transition: 1s;
    background: #f7f6fb;
     transform: scale(1.05);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}
    -webkit-box-shadow: 1px -1px 14px -2px rgba(0, 0, 0, 0.69);
    -moz-box-shadow: 1px -1px 14px -2px rgba(0, 0, 0, 0.69);
     border-radius: 5px;
     padding: 1.25rem;
    transition: 0.4s ease;
    overflow-wrap: break-word !important;
    margin: 1rem;
    margin-bottom: 20px;
    border-radius: 20px;
}


.timeline-component {
    margin: 0px 20px 20px 20px;
}


/* Media Query */
@media screen and (min-width: 768px) {
    .timeline {
        display: grid;
        grid-template-columns: 1fr 3px 1fr;
        text-align: center;
    }


/* Minigames Page */
     .timeline-middle {
@media only screen and (max-width: 1350px) {
     .item-minigame {
         position: relative;
         position: relative;
         display: flex;
         background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
        align-items: center;
         width: 3px;
        justify-content: center;
         height: 100%;
        font: 1.5rem sans-serif;
         cursor: pointer;
         will-change: transform;
     }
     }


     .minigames {
     .main-middle {
         display: inline;
         opacity: 0;
        text-align: center;
        justify-content: space-around;
     }
     }


     .item-minigame {
     .timeline-circle {
         position: relative;
         position: absolute;
         display: flex;
         top: 0;
         align-items: center;
         left: 50%;
         justify-content: center;
         width: 15px;
         font: 1.5rem sans-serif;
         height: 15px;
         cursor: pointer;
        border-radius: 50%;
         will-change: transform;
         background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
         border: 1px solid black;
         -webkit-transform: translateX(-50%);
         transform: translateX(-50%);
     }
     }
}


    .item-minigame img,
.timeline-component.timeline-content img {
    .item-minigame a {
    transition: 1s !important;
        width: 100%;
}
        height: 100%;
    }


    .bombermon:hover::after {
.timeline-component.timeline-content img:hover {
        box-shadow: none;
    transition: 1s !important;
     }
     transform: scale(1.05);
}


    .bombermon:hover::before {
        box-shadow: none;
    }


    .bombermon::after {
/* Media Query */
        box-shadow: none;
    }


     .bombermon::before {
/* Minigames Page */
         box-shadow: none;
@media only screen and (max-width: 1350px) {
     .item-minigame {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font: 1.5rem sans-serif;
        cursor: pointer;
         will-change: transform;
     }
     }


     .bombermon::before,
     .minigames {
    .bombermon::after {
        display: inline;
         background-color: none;
        text-align: center;
         justify-content: space-around;
     }
     }


     .bugcatcher:hover::after {
     .item-minigame {
         box-shadow: none;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font: 1.5rem sans-serif;
        cursor: pointer;
         will-change: transform;
        border: 1px solid black;
     }
     }


     .bugcatcher:hover::before {
     .item-minigame img,
    .item-minigame a {
        width: 100%;
        height: 100%;
    }
 
    .bombermon:hover::after {
         box-shadow: none;
         box-shadow: none;
     }
     }


     .bugcatcher::after {
     .bombermon:hover::before {
         box-shadow: none;
         box-shadow: none;
     }
     }


     .bugcatcher::before {
     .bombermon::after {
         box-shadow: none;
         box-shadow: none;
     }
     }


     .bugcatcher::before,
     .bombermon::before {
    .bugcatcher::after {
         box-shadow: none;
         background-color: none;
     }
     }


     .futebol:hover::after {
     .bombermon::before,
         box-shadow: 0 168px orange;
    .bombermon::after {
         background-color: none;
     }
     }


     .futebol:hover::before {
     .bugcatcher:hover::after {
         box-shadow: 518px 0 orange;
         box-shadow: none;
     }
     }


     .futebol::after {
    .bugcatcher:hover::before {
         box-shadow: 0 148px orange;
        box-shadow: none;
    }
 
    .bugcatcher::after {
        box-shadow: none;
    }
 
    .bugcatcher::before {
        box-shadow: none;
    }
 
    .bugcatcher::before,
    .bugcatcher::after {
        background-color: none;
    }
 
    .futebol:hover::after {
        box-shadow: 0 168px orange;
    }
 
    .futebol:hover::before {
        box-shadow: 518px 0 orange;
    }
 
     .futebol::after {
         box-shadow: 0 148px orange;
     }
     }


Linha 1 236: Linha 1 301:
         content: '';
         content: '';
         display: block;
         display: block;
        transition-duration: 0.3s !important;
         transition: all 250ms ease-in-out;
         transition: all 250ms ease-in-out;
     }
     }
Linha 1 366: Linha 1 432:




/* Teste */
/* Outfits/Npcs */
.square-box {
.square-box {
     width: 180px;
     width: 180px;
Linha 1 375: Linha 1 441:
     text-align: center;
     text-align: center;
     overflow: hidden;
     overflow: hidden;
    transition-duration: 0.3s !important;
     transition: transform 0.3s, box-shadow 0.3s;
     transition: transform 0.3s, box-shadow 0.3s;
     margin: 15px 25px;
     margin: 15px 25px;
Linha 1 407: Linha 1 474:
     margin: 0px 5px 0px 5px;
     margin: 0px 5px 0px 5px;
     line-height: 100px;
     line-height: 100px;
     font-size: 20px;
     font-size: 15px;
    font-weight: bold;
     text-align: center;
     text-align: center;
}
}
Linha 1 422: Linha 1 490:
     width: 200px;
     width: 200px;
     position: absolute;
     position: absolute;
}
/* Torneio Mundial */
.container-mundial img{
width: 100%;
height: auto;
}
}


Linha 1 467: Linha 1 540:
         font-weight: bold;
         font-weight: bold;
         color: white;
         color: white;
    }
    .vector-menu-portal .vector-menu-content li a {
    color: #ffffff;
    }
    .vector-menu-portal .vector-menu-content li a:visited {
      color: #ffffff;
     }
     }


Linha 1 666: Linha 1 745:
     table.wikitable.sortable.quest.jquery-tablesorter tr:hover {
     table.wikitable.sortable.quest.jquery-tablesorter tr:hover {
         background: linear-gradient(90deg, #272727, #272727) !important;
         background: linear-gradient(90deg, #272727, #272727) !important;
         transition: 2s;
         transition: 2s !important;
     }
     }


Linha 1 699: Linha 1 778:
     border-radius: 10px;
     border-radius: 10px;
     border: 1px solid #fff;
     border: 1px solid #fff;
    }
    .evolutions-dark, .evolutions-dark b{
    color: black !important;
     }
     }
}
}
Linha 1 710: Linha 1 792:


body.page-Página_principal h1.firstHeading { display:none; }
body.page-Página_principal h1.firstHeading { display:none; }
.progress-bar {
    width: 300px;
    height: 50px;
    background-color: #ddd;
    border-radius: 5px;
    overflow: hidden;
}
.stars-container {
    height: 100%;
    display: flex;
    align-items: center;
    background-color: #F0F8FF;
    transition: width 0.5s ease-in-out;
}
.stars {
    font-size: 24px;
    color: #4caf50;
}
.pokedex-img img{
    width: 50%;
    height: auto;
    border-radius: 5px;
}
.container-tab table{
    text-align: center;
width: 100%;
border-collapse: collapse;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
    border: 1px solid gray;
}
.container-tab th,
.container-tab td {
padding: 15px;
background-color: rgba(255,255,255,0.2);
    border: 1px solid gray;
    text-align: center;
}
.container-tab th {
text-align: center;
    border: 1px solid gray;
}
.container-tab tbody {
tr {
&:hover {
background-color:  rgb(10 234 58 / 20%);
}
}
td {
position: relative;
&:hover {
&:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
background-color: rgb(234 10 10 / 20%);
z-index: -1;
}
}
}
}
.celula-neutra {
    backdrop-filter: invert(30%);
}
.outfit-img img{
    width: 100%;
    height: auto;
    border-radius: 5px;
}