MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 204: | Line 204: | ||
#content .img-fluid { | #content .img-fluid { | ||
border-radius: 0.75rem; | border-radius: 0.75rem; | ||
border: 5px solid #1d1d1d; | |||
} | } | ||
Latest revision as of 17:11, 16 May 2025
html {
scroll-behavior: smooth;
scroll-padding-top: 105px;
}
body {
background-color: #1d1d1d;
color: #ccc;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background-image: url(/aoc/images/2/2f/Aoc-bg-3.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: top;
}
footer {
text-align: center;
font-size: 80%;
color: #ccc;
}
dd {
margin-left: 1rem;
}
dt {
color: #fff;
}
footer ul, .custom-footer ul {
padding: 0;
padding-bottom: 1rem;
list-style-type: none;
margin-bottom: 0;
}
/*
:target:before {
content: "";
display: block;
height: 76px;
margin: -76px 0 0;
}
*/
.toc {
float: right;
background-color: #1d1d1d;
padding: 0.75rem;
margin-left: 1rem;
margin-bottom: 1rem;
border-radius: 0.25rem;
}
.toctogglespan {
display: none;
}
.toc h2 {
font-size: 1.75em;
}
.tocnumber {
display: none;
}
.toc ul {
list-style-type: none;
margin-bottom: 0;
padding-left: 1.5rem;
}
.toc > ul {
padding-left: 0;
}
.toc li {
margin-bottom: 0.25rem;
}
.toc li:last-child {
margin-bottom: 0;
}
.toc li ul {
margin-top: 0.25rem;
}
.footer-heading {
font-size: 1rem;
font-weight: 500;
color: #fff;
margin-bottom: 0.75rem;
}
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
.h3, h3 {
font-size: 1.5rem;
}
a, .toctogglelabel {
color: #f9a916;
text-decoration: none;
}
a:hover, .toctogglelabel:hover {
color: #fff;
text-decoration: none;
}
.mw-mmv-post-image a {
color: #0d6efd;
}
.mw-mmv-post-image a:hover {
color: #0a58ca;
}
.mw-selflink.selflink {
color: #fff;
font-weight: bold;
}
.new {
color: #e55757;
}
.front-title {
font-size: 1.75em;
color: #fff;
margin-bottom: 1rem;
font-weight: 500;
}
pre {
background-color: #1d1d1d;
padding: 1em;
white-space: break-spaces;
}
.mw-editform #wpTextbox1 {
width: 100%;
display: unset;
}
.fixed-top {
z-index: 999;
}
.navbar {
box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 40%);
}
.bg-dark {
background-color: #111111!important;
}
.navbar-dark .navbar-nav .nav-link {
color: #cacaca;
font-size: 13px;
margin-left: 0.75rem;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
color: rgb(255 255 255);
}
.navbar-nav {
width: 100%;
}
.navbar-nav .nav-item {
white-space: nowrap;
}
.dropdown-toggle::after {
color: #f9a916;
vertical-align: middle;
}
.dropdown-icon {
margin-right: 0.5rem;
}
#page-content {
background-image: url(https://metabattle.com/wiki/images/1/1a/Main_bg_1.webp);
background-repeat: no-repeat;
background-position: bottom right;
background-color: #111111;
width: 100%;
max-width: 1460px;
margin: 0 auto;
padding: 1rem;
margin-top: 84px;
}
/*#content {
margin-bottom: 2rem;
}*/
#content .img-fluid {
border-radius: 0.75rem;
border: 5px solid #1d1d1d;
}
#sidebar {
min-width: 300px;
max-width: 300px;
margin-left: 1rem;
}
#sidebar-float {
position: sticky;
top: 106px;
}
.printfooter {
display: none;
}
.section-title {
background: linear-gradient(135deg, rgb(255 255 255 / 5%) 30%, rgb(17 17 17) 100%);
padding: 1rem;
border-radius: 0.25rem;
color: #fff;
font-size: 1.1em;
font-weight: 500;
margin-bottom: 1rem;
}
.pvp-bg {
background-image: url('/wiki/images/4/42/PvP_bg.webp');
background-repeat: no-repeat;
}
.wvw-bg {
background-image: url('/wiki/images/f/f5/WvW_bg.webp');
background-repeat: no-repeat;
}
.fractal-bg {
background-image: url('/wiki/images/e/e7/Fractal_bg.webp');
background-repeat: no-repeat;
}
.open-world-bg {
background-image: url('/wiki/images/9/9b/Openworld_bg.webp');
background-repeat: no-repeat;
}
.raid-bg {
background-image: url('/wiki/images/8/86/Raid_bg.webp');
background-repeat: no-repeat;
}
.f2p-bg {
background-image: url('/wiki/images/b/be/F2P-bg.webp');
background-repeat: no-repeat;
}
.elementalist-bg {
background-image: url('/wiki/images/9/94/Elementalist_bg.webp');
background-repeat: no-repeat;
}
.engineer-bg {
background-image: url('/wiki/images/f/f8/Engineer_bg.webp');
background-repeat: no-repeat;
}
.guardian-bg {
background-image: url('/wiki/images/9/9c/Guardian_bg.webp');
background-repeat: no-repeat;
}
.mesmer-bg {
background-image: url('/wiki/images/c/cd/Mesmer_bg.webp');
background-repeat: no-repeat;
}
.necromancer-bg {
background-image: url('/wiki/images/2/2a/Necromancer_bg.webp');
background-repeat: no-repeat;
}
.ranger-bg {
background-image: url('/wiki/images/0/09/Ranger_bg.webp');
background-repeat: no-repeat;
}
.revenant-bg {
background-image: url('/wiki/images/0/03/Revenant_bg.webp');
background-repeat: no-repeat;
}
.thief-bg {
background-image: url('/wiki/images/4/46/Thief_bg.webp');
background-repeat: no-repeat;
}
.warrior-bg {
background-image: url('/wiki/images/8/88/Warrior_bg.webp');
background-repeat: no-repeat;
}
.guide-row {
border-radius: 0.25rem;
background: rgba(255,255,255,0.025);
}
.guide-row:hover {
border-radius: 0.25rem;
background: rgba(255,255,255,0.1);
}
.build-row-bard {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(23 23 23 / 50%), #171717), url(/aoc/images/4/47/TUI_ArchetypeTreeBG_BardWide.webp);
background-repeat: no-repeat;
background-color: #171717;
background-size: 60%;
background-position: 100% 38%;
}
.build-row-bard:hover {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(41 41 41 / 0%), #292929), url(/aoc/images/4/47/TUI_ArchetypeTreeBG_BardWide.webp);
background-repeat: no-repeat;
background-color: #292929;
background-size: 60%;
background-position: 100% 38%;
}
.build-row-cleric {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(23 23 23 / 50%), #171717), url(/aoc/images/7/7c/TUI_ArchetypeTreeBG_ClericWide.webp);
background-repeat: no-repeat;
background-color: #171717;
background-size: 60%;
background-position: 105% 33%;
}
.build-row-cleric:hover {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(41 41 41 / 0%), #292929), url(/aoc/images/7/7c/TUI_ArchetypeTreeBG_ClericWide.webp);
background-repeat: no-repeat;
background-color: #292929;
background-size: 60%;
background-position: 105% 33%;
}
.build-row-fighter {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(23 23 23 / 50%), #171717), url(/aoc/images/6/66/TUI_ArchetypeTreeBG_Fighter.webp);
background-repeat: no-repeat;
background-color: #171717;
background-size: 60%;
background-position: 100% 30%;
}
.build-row-fighter:hover {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(41 41 41 / 0%), #292929), url(/aoc/images/6/66/TUI_ArchetypeTreeBG_Fighter.webp);
background-repeat: no-repeat;
background-color: #292929;
background-size: 60%;
background-position: 100% 30%;
}
.build-row-mage {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(23 23 23 / 50%), #171717), url(/aoc/images/f/f1/TUI_ArchetypeTreeBG_MageWide.webp);
background-repeat: no-repeat;
background-color: #171717;
background-size: 60%;
background-position: 100% 30%;
}
.build-row-mage:hover {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(41 41 41 / 0%), #292929), url(/aoc/images/f/f1/TUI_ArchetypeTreeBG_MageWide.webp);
background-repeat: no-repeat;
background-color: #292929;
background-size: 60%;
background-position: 100% 30%;
}
.build-row-ranger {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(23 23 23 / 50%), #171717), url(/aoc/images/e/e7/TUI_ArchetypeTreeBG_Ranger.webp);
background-repeat: no-repeat;
background-color: #171717;
background-size: 60%;
background-position: 100% 30%;
}
.build-row-ranger:hover {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(41 41 41 / 0%), #292929), url(/aoc/images/e/e7/TUI_ArchetypeTreeBG_Ranger.webp);
background-repeat: no-repeat;
background-color: #292929;
background-size: 60%;
background-position: 100% 30%;
}
.build-row-rogue {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(23 23 23 / 50%), #171717), url(/aoc/images/7/78/TUI_ArchetypeTreeBG_RogueWide.webp);
background-repeat: no-repeat;
background-color: #171717;
background-size: 60%;
background-position: 100% 20%;
}
.build-row-rogue:hover {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(41 41 41 / 0%), #292929), url(/aoc/images/7/78/TUI_ArchetypeTreeBG_RogueWide.webp);
background-repeat: no-repeat;
background-color: #292929;
background-size: 60%;
background-position: 100% 20%;
}
.build-row-tank {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(23 23 23 / 50%), #171717), url(/aoc/images/0/06/TUI_ArchetypeTreeBG_TankWide.webp);
background-repeat: no-repeat;
background-color: #171717;
background-size: 60%;
background-position: 100% 25%;
}
.build-row-tank:hover {
margin-bottom: 1rem;
border-radius: 0.25rem;
background: linear-gradient(270deg, rgb(41 41 41 / 0%), #292929), url(/aoc/images/0/06/TUI_ArchetypeTreeBG_TankWide.webp);
background-repeat: no-repeat;
background-color: #292929;
background-size: 60%;
background-position: 100% 25%;
}
.build-row-header {
background: #1d1d1d;
color: #fff;
padding: 0.5rem 2px 0.5rem 1rem;
margin: 10px 0px;
font-size: 16px;
font-weight: 500
}
.build-row-title {
margin-left: 0.25rem;
font-weight: 500;
}
.build-row-weapons {
margin-right: 0.25rem;
}
.build-row-rating {
height: 32px;
display: flex;
align-items: center;
color: #fff;
width: 38px;
font-size: 14px;
}
.build-row-rating:hover {
cursor: default;
}
.fivestars {
background: rgb(51 153 102 / 10%);
border: 1px solid rgb(51 153 102 / 50%);
padding: 0 0.25rem;
}
.fourstars {
background: rgb(51 102 255 / 10%);
border: 1px solid rgb(51 102 255 / 50%);
padding: 0 0.25rem;
}
.threestars {
background: rgb(51 217 255 / 5%);
border: 1px solid rgb(51 217 255 / 30%);
padding: 0 0.25rem;
}
.onestar, .twostars {
background: rgb(255 51 51 / 10%);
border: 1px solid rgb(255 51 51 / 50%);
padding: 0 0.25rem;
}
.zerostars {
background: rgb(189 189 189 / 10%);
border: 1px solid rgb(189 189 189 / 50%);
padding: 0 0.25rem;
}
.build-header {
background-color: #1d1d1d;
padding: 0.75rem;
}
.build-header ul {
padding-left: 0.75rem;
margin-bottom: 0;
}
.orange-text {
color: #f9a916;
font-weight: 700;
}
.orange-header {
background: linear-gradient(135deg,rgb(249 169 22 / 10%) 0%,rgb(29 29 29 / 0%) 100%);
border-radius: 0.25rem;
height: 100%;
}
.header-bard {
background: linear-gradient(rgb(17 17 17 / 25%), rgb(17 17 17 / 25%)), url(/aoc/images/f/f5/Bard_eq.webp), linear-gradient(135deg, rgb(249 169 22 / 25%) 0%, rgb(29 29 29 / 0%) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}
.header-cleric {
background: linear-gradient(rgb(17 17 17 / 25%), rgb(17 17 17 / 25%)), url(/aoc/images/5/5b/Cleric_eq.webp), linear-gradient(135deg, rgb(249 169 22 / 25%) 0%, rgb(29 29 29 / 0%) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}
.header-fighter {
background: linear-gradient(rgb(17 17 17 / 25%), rgb(17 17 17 / 25%)), url(/aoc/images/c/ce/Fighter_eq.webp), linear-gradient(135deg, rgb(249 169 22 / 25%) 0%, rgb(29 29 29 / 0%) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}
.header-mage {
background: linear-gradient(rgb(17 17 17 / 25%), rgb(17 17 17 / 25%)), url(/aoc/images/5/54/Mage_eq.webp), linear-gradient(135deg, rgb(249 169 22 / 25%) 0%, rgb(29 29 29 / 0%) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}
.header-ranger {
background: linear-gradient(rgb(17 17 17 / 25%), rgb(17 17 17 / 25%)), url(/aoc/images/d/d3/Ranger_eq.webp), linear-gradient(135deg, rgb(249 169 22 / 25%) 0%, rgb(29 29 29 / 0%) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}
.header-rogue {
background: linear-gradient(rgb(17 17 17 / 25%), rgb(17 17 17 / 25%)), url(/aoc/images/b/b9/Rogue_eq.webp), linear-gradient(135deg, rgb(249 169 22 / 25%) 0%, rgb(29 29 29 / 0%) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}
.header-tank {
background: linear-gradient(rgb(17 17 17 / 25%), rgb(17 17 17 / 25%)), url(/aoc/images/5/56/Tank_eq.webp), linear-gradient(135deg, rgb(249 169 22 / 25%) 0%, rgb(29 29 29 / 0%) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}
.green-text {
color: #30c179;
font-weight: 700;
}
.green-header {
background: linear-gradient(135deg,rgb(100 249 22 / 10%) 0%,rgb(29 29 29 / 0%) 100%);
border-radius: 0.25rem;
height: 100%;
}
.green-header li {
color: #30c179;
list-style-type: '\002B';
padding-inline-start: 0.75rem;
}
.red-header {
background: linear-gradient(135deg,rgb(249 22 22 / 10%) 0%,rgb(29 29 29 / 0%) 100%);
border-radius: 0.25rem;
height: 100%;
}
.red-text {
color: #ff3333;
font-weight: 700;
}
.red-header li {
color: #ff3333;
list-style-type: '\2212';
padding-inline-start: 0.75rem;
}
.red-header li span, .green-header li span {
color: #ccc;
}
.build-header p {
margin-bottom: 0.5rem;
}
.build-header p:last-child {
margin-bottom: 0;
}
.build-header-section {
font-weight: 700;
color: #fff;
}
.navbar .form-control {
color: #cacaca;
background-color: rgba(255,255,255,0.1);
border: none;
}
.input-group-text {
color: #cacaca;
background-color: rgba(255,255,255,0.1);
border: none;
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
margin-left: 0;
}
.dropdown-menu {
background-color: #333333;
border: none;
border-radius: 0;
font-size: 14px;
z-index: 99999;
}
.dropdown-item {
color: #fff;
padding: .5rem 0.75rem;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #fff;
background-color: #1d1d1d;
}
#pageActions {
float: right;
}
#pageActions .dropdown-toggle::after {
color: #111;
}
.alert {
position: relative;
padding: 1rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0;
padding: 10px;
}
.alert-success {
color: #fff;
background-color: #1d1d1d;
border-color: #458e46;
line-height: 1.7;
}
.alert-danger {
color: #fff;
background-color: #1d1d1d;
border-color: #b81818;
line-height: 1.7;
}
.alert-primary {
color: #fff;
background-color: #1d1d1d;
border-color: rgba(249,169,22,0.7);
line-height: 1.7;
}
.alert-primary a {
background: #f9a916;
width: 100%;
text-align: center;
display: block;
color: #111111;
font-weight: 700;
border-radius: 0.25rem;
padding: 0.25rem;
margin-top: 10px;
}
.alert-primary a:hover {
color: #fff;
}
.alert-secondary {
color: #fff;
background-color: #1d1d1d;
border-color: rgba(39,139,228,0.7);
line-height: 1.7;
}
.mw-editsection-bracket {
color: rgb(255 255 255 / 55%);
}
.mw-editsection {
font-size: 12px;
margin-left: 0.5rem;
font-weight: 400;
display: none;
}
.badge {
padding: .5em .75em;
margin-right: 0.5rem;
}
.bg-primary {
background-color: #f9a916!important;
}
.bg-primary a {
color: #111;
font-weight: 500;
}
.bg-primary a:hover {
color: #fff;
}
.border-hot {
background: #b3e296;
border: 2px solid #7dce4b!important;
margin-left: 0.5rem;
}
.border-pof {
background: #f0d3f1;
border: 2px solid #ce4ba6!important;
margin-left: 0.5rem;
}
.border-eod {
background: #aaf4ff;
border: 2px solid #31aec1!important;
margin-left: 0.5rem;
}
.specialization-row {
height: 140px;
overflow: hidden;
}
.smwb-theme-light .smwb-title, .smwb-theme-light .smwb-center, .smwb-theme-light .smwb-actions, .smwb-theme-light .smwb-prophead {
background-color: #1d1d1d;
}
.smwb-theme-light .smwb-factbox {
border-left: 0.5em solid #1d1d1d;
}
.smwb-theme-light .smwb-propval {
background-color: #1d1d1d;
}
.smwb-factbox .smwb-cell {
border-top: 2px solid #111;
}
.smwb-theme-light .smwb-ifactbox {
border-right: 0.5em solid #1d1d1d;
}
.smwb-ifactbox .smwb-cell {
border-top: 2px solid #111;
}
.smwb-bottom {
border-bottom: 2px solid #111;;
}
.wikitable {
background: rgba(255,255,255,.025);
}
.wikitable>tr>th, .wikitable>*>tr>th {
background: #1d1d1d;
color: #fff;
}
.wikitable>tr>th, .wikitable>tr>td, .wikitable>*>tr>th, .wikitable>*>tr>td {
border: 1px solid #111111;
padding: 0.6em;
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: #1d1d1d;
border: none;
}
.diff-context {
background: #1d1d1d;
color: #ccc;
border-color: #000;
}
.diff-addedline, .diff-deletedline, .diff-context {
border-radius: 0;
}
.diff-addedline {
border-color: #5e9a6b;
}
.diff-addedline .diffchange {
background: #5e9a6b;
color: #111217;
}
.diff-deletedline {
border-color: #9a5e5e;
}
.diff-deletedline .diffchange {
background: #9a5e5e;
color: #111217;
}
.mw-plusminus-pos {
color: green;
}
.mw-plusminus-neg {
color: red;
}
#pagehistory {
margin-top: 1rem;
}
#pagehistory li.selected {
background-color: #1d1d1d;
color: #ccc;
outline: 1px dashed #a2a9b1;
}
.dsq-widget-avatar {
float: right!important;
}
.dsq-widget-list {
padding-left: 0!important;
}
.dsq-widget-comment, .dsq-widget-meta, .dsq-widget-user {
display: block!important;
}
.dsq-widget-item {
padding: 1rem!important;
background-color: #1d1d1d!important;
margin: 0 0 1rem 0!important;
}
.default-box-inner {
background: #111;
padding: 0.5rem;
margin-bottom: 1rem;
}
.collapsing {
-webkit-transition: none;
transition: none;
}
.brand-container, .ac-lre-playlist-horizontal {
display: none !important;
}
.build-template-code {
background: #1d1d1d;
padding: 8px 15px;
color: #fff;
border-radius: 0.25rem;
word-break: break-all;
margin-bottom: 0.75rem;
width: fit-content;
font-size: 80%;
}
.build-template-button {
padding: 8px 15px;
background: #f9a916;
color: #111;
font-weight: bold;
border-radius: 0.25rem;
width: fit-content;
font-size: 80%;
}
.build-template-button:hover {
cursor: pointer;
opacity: .5;
}
.patrollink{
display: none;
}
.build-rate a {
color: #16f947 !important;
}
.buy-button {
margin-top: 1rem;
}
.buy-button:hover, .buy-button:focus, .buy-button:active {
opacity: .7;
}
li.gallerybox div.thumb {
background: #1d1d1d;
border: none;
}
.toggle-title {
background-color: #333;
padding: 10px;
font-weight: 500;
display: flex;
width: fit-content;
}
.toggle-title:hover {
opacity: 0.5;
cursor: pointer;
}
.toggle-content {
background-color: #1d1d1d;
padding: 10px;
display: block;
width: fit-content;
}
blockquote {
margin: 0;
background: #1d1d1d;
padding: 1rem;
}
.mw-search-profile-tabs {
background: #1d1d1d;
border: none;
}
#mw-searchoptions {
background-color: #1d1d1d;
border: none;
border-top: 1px solid #111;
padding: 1rem;
}
#mw-searchoptions .divider {
border-bottom: 1px solid #111111;
margin-left: -1rem;
margin-right: -1rem;
}
.search-types .current a {
color: #fff;
font-weight: 500;
}
.tier-list {
padding: 1rem 2rem!important;
font-size: 24px;
border-right: 2px solid #111!important;
}
.tier-s {
color: rgb(255, 127, 127)!important;
background: rgb(255 127 127 / 20%)!important;
}
.tier-a {
color: rgb(255, 191, 127)!important;
background: rgb(255 191 127 / 20%)!important;
}
.tier-b {
color: rgb(255, 223, 127)!important;
background: rgb(255 223 127 / 20%)!important;
}
.tier-c {
color: rgb(255 255 127)!important;
background: rgb(255 255 127 / 20%)!important;
}
.tier-d {
color: rgb(191, 255, 127)!important;
background: rgb(191 255 127 / 20%)!important;
}
.tier-e {
color: rgb(127, 255, 127)!important;
background: rgb(127 255 127 / 20%)!important;
}
.tier-f {
color: rgb(127, 255, 255)!important;
background: rgb(127 255 255 / 20%)!important;
}
.oo-ui-panelLayout-framed {
border: none;
background-color: #1d1d1d;
}
.oo-ui-tabSelectWidget-framed {
background-color: #111111;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background-color: #1d1d1d;
color: #fff;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
border-bottom: none;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
background-color: rgb(29 29 29);
color: #ffffff;
}
.mw-prefs-buttons {
background-color: #292929;
border-top: 1px solid #111111;
padding-left: 1rem;
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background-color: #1d1d1d;
color: #fff;
border-color: transparent;
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button:hover {
cursor: pointer;
background: hsl(0deg 0% 100% / 20%);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
background-color: #1d1d1d;
}
.mw-filepage-resolutioninfo {
font-size: initial;
}
.mw-category-group li {
margin-bottom: 0.5rem;
}
.builds-menu {
min-width: 400px;
}
.guides-menu {
min-width: 600px;
}
.dropdown-header {
color: rgb(255 255 255 / 50%);
padding: 0.5rem 0.75rem;
}
.mw-collapsible dl {
margin: 0;
padding: 0.5rem;
}
#BFdQrXovnYka {
display: none;
position: relative;
padding: 1rem 1rem;
margin-bottom: 1rem;
border: 2px solid transparent;
border-radius: 0;
padding: 10px;
color: #fff;
background-color: #1d1d1d;
border-color: #8e4545;
line-height: 1.7;
}
.collapseMB {
padding: 0.5rem 1rem;
background-color: #333;
font-weight: 500;
width: fit-content;
margin-bottom: 0.25rem;
}
.collapseMB:hover {
opacity: 0.5;
cursor: pointer;
}
.collapseContent {
display: none;
padding: 0.5rem;
background: #1d1d1d;
width: fit-content;
margin-bottom: 1rem;
}
.collapseContent > *:last-child {
margin-bottom: 0!important;
}
.pvp-stats-header {
background: #1d1d1d;
color: #fff;
padding: 0.5rem 1rem;
border-left: 2px solid #5865f2;
margin-bottom: 0.5rem;
}
.default-box-2 {
background: rgba(255,255,255,0.025);
padding: 1rem;
}
.mw-mmv-image-metadata {
margin-top: 0;
}
.gw2a--LWWFA {
vertical-align: middle;
}
/* ConfirmEdit QuestyCaptcha -- on Create Account */
.htmlform-tip + .mw-htmlform-field-HTMLInfoField { color:red; }
/* ConfirmEdit QuestyCaptcha -- on Edit page + add a URL */
label[for=wpCaptchaWord] {
color: green;
font-weight: bold;
font-size: 150%;
font-style: italic;
}
.difficulty-pip {
width: 5px;
background: rgb(255 255 255 / 15%);
margin-right: 4px;
border-radius: 1rem;
height: 60%;
}
.pip-1 {
background: #458e46;
}
.pip-2 {
background: rgba(249,169,22,0.7);
}
.pip-3 {
background: #b81818;
}
.difficulty-pip:last-child {
margin-right: 0;
}
.rarity-Common {
color: rgb(183 183 183);
}
.rarity-Uncommon {
color: rgb(83 198 117);
}
.rarity-Rare {
color: rgb(101 176 252);
}
.rarity-Heroic {
color: rgb(255 255 0);
}
.rarity-Epic {
color: rgb(169 121 203);
}
.rarity-Legendary {
color: rgb(255 165 0);
}
.tooltip {
opacity: 1 !important;
color: #fff !important;
}
.hover-tooltip {
cursor: help;
}
.tooltip-inner {
padding: 0;
background-color: #000;
text-align: left;
max-width: 400px!important;
}
.tooltip-arrow {
display: none!important;
}
.skill-container {
height: auto;
width: auto;
position: relative;
}
.skill-bar-heading {
font-weight: 500;
color: #fff;
}
.rotation-container {
margin-bottom: 1rem;
}
.rotation-title {
color: #fff;
font-weight: 500;
margin-bottom: 0.75rem;
}
.rotation-arrow {
margin: 0 2px;
}
.skill-number {
position: absolute;
right: 0;
bottom: 0;
background: rgb(255 255 255 / 20%);
color: #fff;
padding: 0px 4px;
font-size: 10px;
}
#footer-privacy, #footer-about, #footer-disclaimer {
display: none;
}
.tippy-box[data-theme~='metabattle'] .tippy-content {
padding: 0;
}
.build-card {
background-color: rgba(255,255,255,0.025);
padding: 0.75rem;
border-radius: 0.5rem;
text-align: center;
background-repeat: no-repeat;
background-position: center;
font-size: 12px;
height: 100%;
min-height: 120px;
}
.build-card:hover {
background-color: rgba(255,255,255,0.1);
}
.card-bard {
background: linear-gradient(270deg, rgb(17 17 17 / 50%), rgb(17 17 17 / 50%)), url(/aoc/images/4/47/TUI_ArchetypeTreeBG_BardWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-bard:hover {
background: linear-gradient(270deg, rgb(17 17 17 / 0%), rgb(17 17 17 / 50%)), url(/aoc/images/4/47/TUI_ArchetypeTreeBG_BardWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-cleric {
background: linear-gradient(270deg, rgb(17 17 17 / 50%), rgb(17 17 17 / 50%)), url(/aoc/images/7/7c/TUI_ArchetypeTreeBG_ClericWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-cleric:hover {
background: linear-gradient(270deg, rgb(17 17 17 / 0%), rgb(17 17 17 / 50%)), url(/aoc/images/7/7c/TUI_ArchetypeTreeBG_ClericWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-fighter {
background: linear-gradient(270deg, rgb(17 17 17 / 50%), rgb(17 17 17 / 50%)), url(/aoc/images/6/66/TUI_ArchetypeTreeBG_Fighter.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-fighter:hover {
background: linear-gradient(270deg, rgb(17 17 17 / 0%), rgb(17 17 17 / 50%)), url(/aoc/images/6/66/TUI_ArchetypeTreeBG_Fighter.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-mage {
background: linear-gradient(270deg, rgb(17 17 17 / 50%), rgb(17 17 17 / 50%)), url(/aoc/images/f/f1/TUI_ArchetypeTreeBG_MageWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-mage:hover {
background: linear-gradient(270deg, rgb(17 17 17 / 0%), rgb(17 17 17 / 50%)), url(/aoc/images/f/f1/TUI_ArchetypeTreeBG_MageWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-ranger {
background: linear-gradient(270deg, rgb(17 17 17 / 50%), rgb(17 17 17 / 50%)), url(/aoc/images/e/e7/TUI_ArchetypeTreeBG_Ranger.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-ranger:hover {
background: linear-gradient(270deg, rgb(17 17 17 / 0%), rgb(17 17 17 / 50%)), url(/aoc/images/e/e7/TUI_ArchetypeTreeBG_Ranger.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-rogue {
background: linear-gradient(270deg, rgb(17 17 17 / 50%), rgb(17 17 17 / 50%)), url(/aoc/images/7/78/TUI_ArchetypeTreeBG_RogueWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-rogue:hover {
background: linear-gradient(270deg, rgb(17 17 17 / 0%), rgb(17 17 17 / 50%)), url(/aoc/images/7/78/TUI_ArchetypeTreeBG_RogueWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-tank {
background: linear-gradient(270deg, rgb(17 17 17 / 50%), rgb(17 17 17 / 50%)), url(/aoc/images/0/06/TUI_ArchetypeTreeBG_TankWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.card-tank:hover {
background: linear-gradient(270deg, rgb(17 17 17 / 0%), rgb(17 17 17 / 50%)), url(/aoc/images/0/06/TUI_ArchetypeTreeBG_TankWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
.build-card a {
color: #fff;
font-weight: 500;
text-shadow: 2px 1px #000;
font-size: 20px;
}
.build-card a:hover {
color: #f9a916;
}
.build-card img:hover {
opacity: 0.75;
}
.card-line {
background-color: #f9a916;
width: 32px;
height: 1px;
display: block;
margin: 5px auto;
}
.nav-tabs .nav-link {
margin-right: 0.5rem;
}
.mw-parser-output .nav-tabs .nav-item.show .nav-link, .mw-parser-output .nav-tabs .nav-link.active {
color: #fff;
background-color: #151515;
font-weight: 700;
cursor: default;
border: 1px solid #2a2b2b;
border-bottom: 1px solid #151515;
}
.mw-parser-output .nav-tabs {
border-color: transparent;
margin-bottom: -1px;
}
.mw-parser-output .nav-link:focus, .mw-parser-output .nav-link:hover {
color: #fff;
}
.mw-parser-output .nav-link {
color: #f9a916;
font-weight: 700;
}
.mw-parser-output .nav-tabs .nav-link:focus, .mw-parser-output .nav-tabs .nav-link:hover {
cursor: pointer;
background: #151515;
border: 1px solid #2a2b2b;
border-bottom: 1px solid #151515;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.grayscale-1 {
filter: grayscale(1);
}
.bg-secondary {
background-color: rgba(255,255,255,.1)!important;
color: rgba(255,255,255,.5);
margin-top: 0.35rem;
font-weight: 100;
font-size: 0.7em;
}
li b {
color: #05a37e;
}
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup {
z-index: 999;
}
.network-banner {
background-color: #111111;
position: fixed;
top: 0;
width: 100%;
border-bottom: 1px solid rgb(34 34 34);
z-index: 999;
height: 37px;
-ms-overflow-style: none;
scrollbar-width: none;
white-space: nowrap;
overflow-y: auto;
}
.network-banner::-webkit-scrollbar {
display: none;
}
.network-banner a {
color: #cacaca;
padding: 6px 12px;
opacity: 0.35;
font-size: 13px;
}
.network-banner a:hover {
color: #fff;
opacity: 1;
}
.navbar-toggler-icon {
width: 1.25em;
height: 1.25em;
}
.navbar-toggler {
border: none;
}
::marker {
font-size: 18px;
font-weight: bold;
}
.modal-content {
background-color: #15131b;
border: 1px solid #2a2b2b;
}
.modal-header {
border-bottom: 1px solid #2a2b2b;
}
.btn-close {
background: #ffffff var(--bs-btn-close-bg) center / 1em auto no-repeat;
margin: unset!important;
}
.btn-close:hover {
cursor: pointer;
}
.default-box {
display: flow-root;
background-color: rgba(255, 255, 255, 0.04);
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 2rem;
}
.default-box h2 {
font-size: 1.1rem;
margin-bottom: 0.75rem;
border-left: 4px solid #f9a916;
padding: 0.5rem 1rem;
}
.accordion-button {
background: linear-gradient(135deg, rgba(249, 169, 22, 0.2) 0%, rgba(51, 153, 102, 0.2) 33%, rgba(51, 102, 255, 0.2) 66%, rgba(203, 36, 180, 0.2) 100%);
color: #fff;
padding: 0.5rem 0.75rem;
user-select: none;
}
.accordion-button:hover {
cursor: pointer;
opacity: 0.75;
}
.accordion-item {
border: none;
}
.accordion-body {
color: #ccc;
background: #1d1d1d;
padding: 1rem;
}
.accordion-button:not(.collapsed) {
background-color: #111111;
box-shadow: none;
color: #fff;
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tree {
max-width: fit-content;
border-radius: 0.5rem;
border: 1px solid rgb(34 34 35);
}
#tree-bard {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/4/47/TUI_ArchetypeTreeBG_BardWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
display: grid;
}
#tree-cleric {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/7/7c/TUI_ArchetypeTreeBG_ClericWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
#tree-fighter {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/6/66/TUI_ArchetypeTreeBG_Fighter.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
#tree-mage {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/f/f1/TUI_ArchetypeTreeBG_MageWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
#tree-ranger {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/e/e7/TUI_ArchetypeTreeBG_Ranger.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
#tree-rogue {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/7/78/TUI_ArchetypeTreeBG_RogueWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
#tree-tank {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/0/06/TUI_ArchetypeTreeBG_TankWide.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
#tree-book {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/d/d2/Book_tree_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
display: grid;
}
#tree-greatsword {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/8/84/Greatsword_tree_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
display: grid;
}
#tree-longbow {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/b/be/Longbow_tree_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
display: grid;
}
#tree-dagger {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/b/b6/Dagger_tree_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
display: grid;
}
#tree-mace {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/5/58/Mace_tree_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
display: grid;
}
#tree-scepter {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/8/8b/Scepter_tree_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
display: grid;
}
#tree-shortbow {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/f/fd/Shortbow_tree_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
display: grid;
}
#tree-sword {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/d/d4/Sword_tree_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
display: grid;
}
#tree-wand {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/7/7d/Wand_tree_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: left;
display: grid;
}
#tree-stamina {
background: linear-gradient(rgb(17 17 17 / 75%), rgb(17 17 17 / 75%)), url(/aoc/images/3/35/TUI_SkillTreeBG_Universal.webp), #151515;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.skill-tree-entry {
min-width: 40px;
min-height: 40px;
z-index: 998;
}
.skill-tree-entry-img {
outline: 2px solid #f9a916;
}
.skill-tree-entry-img:hover {
opacity: 100 !important;
cursor: help;
}
.opacity-15 {
opacity: .15 !important;
}
.equipment-container {
max-width: fit-content;
border-radius: 0.5rem;
border: 1px solid rgb(34 34 35);
background: #151515;
}
.equipment-entry {
height: 60px;
width: 60px;
}
.equipment-entry img {
padding: 5px;
}
.equipment-entry-bg {
background-image: url(/aoc/images/a/ac/Char_Item_Slot_backImg.webp);
background-size: contain;
}
.upgrade-order {
position: absolute;
top: -3px;
right: -3px;
background: #ffffff;
color: #000000;
padding: 0 3px;
font-size: 9px;
font-weight: 500;
}
.inline-skill {
padding-left: 1px;
background-color: rgb(249 169 21 / 10%);
margin: 3px 0;
}
.mb-5 {
margin-bottom: 4rem !important;
}
.rounded-circle {
overflow: hidden;
}
.eq-container {
max-width: 400px;
width: 100%;
border-radius: 0.5rem;
border: 1px solid rgb(34 34 35);
}
.eq-bard {
background: linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)), url(/aoc/images/f/f5/Bard_eq.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.eq-cleric {
background: linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)), url(/aoc/images/5/5b/Cleric_eq.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.eq-fighter {
background: linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)), url(/aoc/images/c/ce/Fighter_eq.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.eq-mage {
background: linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)), url(/aoc/images/5/54/Mage_eq.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.eq-ranger {
background: linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)), url(/aoc/images/d/d3/Ranger_eq.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.eq-rogue {
background: linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)), url(/aoc/images/b/b9/Rogue_eq.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.eq-tank {
background: linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)), url(/aoc/images/5/56/Tank_eq.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.eq-entry {
padding: 2px;
border-radius: 0.5rem;
border: 1px solid rgb(255 165 0 / 50%);
background: rgb(27 27 27);
}
@media (min-width: 768px) {
.dropdown:hover > .dropdown-menu-auto {
display: block;
margin-top: 0;
}
}
@media (max-width: 425px) {
#pageActions {
float: none;
margin-bottom: .5rem;
text-align: right;
}
}
@media (max-width: 541px) {
.toc {
float: none;
margin-left: 0;
}
}
@media (max-width: 650px) {
.section-entry-quick-browse, .section-quick-browse {
display: none;
}
}
@media (max-width: 767px) {
#eq-box-1 {
margin-right: 0;
border-right: none;
margin-bottom: 1.5rem;
border-bottom: 2px solid #1d1d1d;
}
}
@media (max-width: 991px) {
.builds-menu, .guides-menu {
min-width: unset;
}
.dropdown-menu {
margin-bottom: 1rem;
}
}
@media (max-width: 1080px) {
#sidebar {
display: none;
}
}
@media (min-width: 1200px) {
#other-builds {
font-size: 2rem!important;
}
}
