MediaWiki:Common.css
Ir para navegação
Ir para pesquisar
Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.
- Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
- Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
- Internet Explorer/Edge: PressioneCtrl enquanto clica Recarregar, ou Pressione Ctrl-F5
- Opera: Pressione Ctrl-F5.
/** o código CSS colocado aqui será aplicado a todos os temas */ /* Geral */ body { margin: 0; padding: 0; position: relative; font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica', sans-serif } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: url('https://wiki.otpokemon.com/images/c/c5/Backgroundwiki3.jpg') no-repeat; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; } #mw-page-base { background: transparent; } #ca-nstab-mediawiki, #ca-talk, #p-namespaces, #ca-view, #ca-viewsource, #ca-unwatch, #ca-ve-edit{ display: none; } .vectorTabs span { background-position: right bottom; display: inline-block; height: auto; } .vectorTabs{ background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#a7d7f900 100%); } .vectorTabs li { height: auto; } .vectorTabs li a { height: auto; } .vectorTabs span a { padding-top: 0.4em; } #p-search{ margin-top: 0em; background: #ffffff; margin-left: 0; } #p-search form{ margin: 0 0; } .vectorTabs span { background-image: none; background-position: right bottom; display: inline-block; width: 25px; height: 25px; } #mw-head .vectorMenu h3 { background-image: none; } #ca-edit{ background: transparent; height: 25px; width: 25px; border-radius: 3px; font-size: 0; background-image: url(https://wiki.otpokemon.com/images/2/24/Code_button.png); background-position: center; background-repeat: no-repeat; background-size: cover; } #ca-edit span a { width: 25px; height: 25px; } #ca-history{ background: transparent; height: 25px; width: 25px; border-radius: 3px; font-size: 0; background-image: url(https://wiki.otpokemon.com/images/e/e0/History_button.png); background-position: center; background-repeat: no-repeat; background-size: cover; } #ca-history span a{ width: 25px; height: 25px; } #p-cactions{ background: transparent; height: 25px; width: 25px; border-radius: 3px; font-size: 0; background-image: url(https://wiki.otpokemon.com/images/4/42/Expand-button.png); background-position: center; background-repeat: no-repeat; background-size: cover; margin-right: 0.5rem; } .vectorMenu .menu { font-size: 15px; } .mw-body, .parsoid-body, #mw-panel { background: #f7f6fb; border-radius: 6px; border: 5px solid transparent; border-image: url('https://wiki.otpokemon.com/images/1/18/Border-image2.png') 15 stretch; } #p-logo a { background-size: contain; border-radius: 5px; } .mw-list-item a { color: white; } .mw-list-item a:visited { color: #05ACF3; } .mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer { margin-left: 13em; margin-right: 1em; } #mw-panel { width: 10.6em; margin-top: 5.0rem; padding-top: 10px; border-center: none; } #footer ul { list-style: none none; padding: 0; margin-left: 15px; } #footer ul li a{ text-decoration: none; color: rgb(255 255 255 / 80%); background: none; } #p-personal a.new, #p-personal a:visited, #p-personal a{ color: #fff; } /* Main page */ .container { margin: 0 auto; display: flex; } .main { width: 70%; margin: 1em; } .banner { box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5); --border-width: 3px; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; font-family: Lato, sans-serif; font-size: 2.5rem; color: white; background: linear-gradient(60deg, #0c3d7b, #14917c, #1ec7ab, #6ee7d3, #041e41, #1864c7, #085245); background-size: 300% 300%; background-position: 0 50%; animation: moveGradient 30s alternate infinite; border-radius: 10px; } .banner img { width: 100%; height: 100%; } .most-acessed, .quick-access { margin-top: 2em; position: relative; width: 100%; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); border-radius: 10px; } .ma-title,.qa-title { border-radius: 10px 10px 0px 0px; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; color: white; height: auto; padding: 5px 0px; background: linear-gradient(90deg, rgb(0, 47, 109) 0%, rgb(19, 83, 67) 46%, rgb(0, 105, 90) 100%); } .sub-most-acessed{ display: flex; } .ma-card-item { text-align: center; height: auto; padding: 1em; } .ma-card-item a{ text-decoration: none; } .ma-item { width: 80%; height: 80%; transition: 1s; filter: drop-shadow(0px 0px 5px rgba(48, 48, 48, 0.6)); } .ma-item:hover{ transition: 1s; transform: scale(1.10); filter: drop-shadow(2px 2px 2px rgba(34, 34, 34, 0.2)); } .ma-text{ width: 80%; height: 80%; margin: 5px; transition: 1s; transform: scale(1.20); } .ma-text:hover{ transition: 1s; transform: scale(1.30); filter: drop-shadow(2px 2px 2px rgba(34, 34, 34, 0.2)); } .ma-title-icon, .qa-title-icon { width: 30px; height: 30px; } .column { width: 28%; text-align: center; } .social-media { text-align: center; width: 100%; height: auto; padding-bottom: 10px; } .update-image { box-shadow: 0 0 0.6 3em #BBB; } .qa-line { display: flex; border-bottom: 1px solid rgba(0, 0, 0, 0.150); padding: 1rem; } .qa-line-icon img { width: 50px; height: 50px; margin: 1rem; border-radius: 12px; } .qa-line-text { margin: 0.5rem 0; width: 100%; } .qa-line-title { margin: 0.5em 0; font-weight: bold; } pre, .mw-code { color: #000; background-color: rgb(234 236 240 / 0%); border: 1px solid rgb(234 236 240 / 0%); padding: 0; */ white-space: pre-wrap; } .update-title{ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5); --border-width: 3px; position: relative; display: flex; justify-content: center; align-items: center; width: 90%; margin: auto; font-weight: bold; font-family: Lato, sans-serif; font-size: 1rem; color: white; background: linear-gradient(60deg, #c93713, #e0370d, #e05b0d, #e0180d); background-size: 300% 300%; background-position: 0 50%; animation: moveGradient 30s alternate infinite; border-radius: 10px; } .post-title{ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5); --border-width: 3px; position: relative; display: flex; justify-content: center; align-items: center; width: 90%; margin: auto; font-weight: bold; font-family: Lato, sans-serif; font-size: 1rem; color: white; background: linear-gradient(60deg,#8d8384,#6f5860,#565452,#b4b5b5); background-size: 300% 300%; background-position: 0 50%; animation: moveGradient 30s alternate infinite; border-radius: 10px; } .card__heading a { color: white; } .sc-icon { display: inline-block; width: 12.5%; margin: -1px; height: auto; transition: 1s; } .sc-icon:hover { filter: grayscale(0%) contrast(115%); transition: 1s; transform: scale(1.10); } p.card__heading { font-size: 1.2em; font-weight: bold; } :root{ --background-dark: #2d3548; --text-light: rgba(255,255,255,0.6); --text-lighter: rgba(255,255,255,0.9); --spacing-s: 8px; --spacing-m: 16px; --spacing-l: 24px; --spacing-xl: 32px; --spacing-xxl: 64px; --width-container: 1200px; } .hero-section{ margin: 5%; padding-bottom: 53%; } .hero-section2{ margin: 5%; padding-bottom: 88%; } .card-grid{ display: grid; width: 100%; } .card{ list-style: none; position: relative; } .card:before{ content: ''; display: block; width: 100%; } .card__background{ width: 100%; height: auto; background-size: cover; background-position: center; bottom: 0; filter: brightness(0.95) saturate(1) contrast(0.95); left: 0; position: absolute; right: 0; top: 0; transform-origin: center; trsnsform: scale(1) translateZ(0); transition: filter 1s, transform 1s; } .card:hover .card__background{ transform: scale(1.05) translateZ(0); } .card__content{ left: 0; margin: var(--spacing-l); position: absolute; top: 0; text-align: left; } .card__category{ color: var(--text-light); font-size: 0.9rem; margin-bottom: var(--spacing-s); text-transform: uppercase; } .card__heading{ color: var(--text-lighter); font-size: 1.9rem; text-shadow: 2px 2px 20px rgba(0,0,0,0.2); line-height: 1.4; } h3.card__heading { margin-top: -10px; } .slider{ position: relative; height: 400px; } .slide{ width:100%; height: 100%; border-radius: 5px; animation: fadeInSlide 1s; } .slider-bullet{ position: absolute; top: 20px; height: 10px; width: 10px; background-color: #e5e5e5; border-radius: 50%; transition:1s; cursor: pointer; } /* History Page */ a[title^="Usuário:Ybooh (página inexistente)"]:after{ color: blue; content: "QueeN"; pointer-events: none; } a[title^="Usuário:Ybooh (página inexistente)"] bdi{ display: none; } a[title^="Usuário:Alissonmader (página inexistente)"]:after{ color: blue; content: "Pichito"; } a[title^="Usuário:Alissonmader (página inexistente)"] bdi{ display: none; } .history-user a bdi{ color: blue; } a.new.mw-userlink { pointer-events: none; } a.new.mw-usertoollinks-talk { display: none; } .mw-contributions-user-tools { display: none; } /* Shiny Page */ .tab_shiny{ background-color: rgb(255 255 255); } /* Addons Page */ .container-addons{ display: flex; text-align: center; } .column-addons img{ transition: 1s; } .column-addons img:hover { transform: scale(1.10); transition: 1s; } /* Addons Page */ .container-addon img{ transition: 1s; } .container-addon img:hover { transition: 1s; transform: scale(1.20); } /* Quests Page */ .img-quests{ transition: 2s; } .img-quests:hover{ filter: contrast(140%); transition: 2s; } /* Página Instagram */ .insta-main{ width: 70%; margin: 1em; margin: auto; } .post{ width: 100%; height: auto; background: #fff; border: 1px solid #dfdfdf; margin-top: 40px; border-radius: 10px; } .info{ width: 100%; height: 60px; display: flex; justify-content: space-between; align-items: center; margin: 5px 15px; } .info .username{ width: auto; font-weight: bold; color: #000; font-size: 14px; margin-left: 10px; } .info .options{ cursor: pointer; margin-right: 20px; scale: 0.8; } .info .user{ display: flex; align-items: center; } .info .profile-pic{ height: 40px; width: 40px; padding: 0; background: none; } .info .profile-pic img{ border-radius: 20px; } .post-image{ width: 100%; height: 100%; object-fit: cover; margin-top: -10px; width: 100%; height: 100%; /* object-fit: cover; */ margin-top: -10px; } .post-content{ width: 100%; padding: 20px; } .likes{ font-weight: bold; } .description{ width: 96%; font-size: 14px; line-height: 20px; } .description span{ font-weight: bold; margin-right: 10px; } .post-time{ color: rgba(0, 0, 0, 0.5); font-size: 12px; } .comment-wrapper{ width: 100%; height: 50px; border-radius: 1px solid #dfdfdf; display: flex; justify-content: space-between; align-items: center; } .comment-wrapper .icon{ height: 30px; } .comment-box{ width: 80%; height: 100%; border: none; outline: none; font-size: 14px; } .comment-btn, .action-btn{ width: 70px; height: 100%; background: none; border: none; outline: none; text-transform: capitalize; font-size: 16px; color: rgb(0, 162, 255); opacity: 0.5; } .reaction-wrapper{ width: 100%; height: 50px; display: flex; margin-top: -25px; align-items: center; } .reaction-wrapper .icon{ margin-right: 15px; } /* KeyFrames */ @keyframes moveGradient { 50% { background-position: 100% 50%; } } @keyframes fadeInSlide{ from {opacity: 0;} to {opacity: 1;} } /* Testes */