MediaWiki:Common.css: различия между версиями
Нет описания правки |
Нет описания правки |
||
(не показано 9 промежуточных версий этого же участника) | |||
Строка 268: | Строка 268: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin: 0 auto 15px auto; | margin: 0 auto 15px auto; | ||
width: 244px; | width: 244px; | ||
} | } | ||
Строка 280: | Строка 276: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin: 0 auto 15px auto; | margin: 0 auto 15px auto; | ||
} | } | ||
Строка 297: | Строка 289: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin: 0 auto 15px auto; | margin: 0 auto 15px auto; | ||
} | } | ||
Строка 313: | Строка 301: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin: 0 auto 15px auto; | margin: 0 auto 15px auto; | ||
} | } | ||
Строка 328: | Строка 308: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin: 0 auto 15px auto; | margin: 0 auto 15px auto; | ||
} | } | ||
Строка 343: | Строка 315: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin: 0 auto 15px auto; | margin: 0 auto 15px auto; | ||
} | } | ||
Строка 353: | Строка 321: | ||
width: inherit !important; | width: inherit !important; | ||
margin: 5px !important; | margin: 5px !important; | ||
} | } | ||
Строка 363: | Строка 327: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin: 0 auto 15px auto; | margin: 0 auto 15px auto; | ||
} | } | ||
Строка 374: | Строка 334: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin: 0 auto 15px auto; | margin: 0 auto 15px auto; | ||
} | } | ||
Строка 392: | Строка 348: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: center; | justify-content: center; | ||
margin: 0 auto 15px auto; | margin: 0 auto 15px auto; | ||
} | } | ||
Строка 415: | Строка 363: | ||
} | } | ||
.pc-block { | .pc-block { | ||
display:none; | display:none !important; | ||
} | } | ||
} | } | ||
Строка 421: | Строка 369: | ||
@media only screen and (min-width: 1024px) { | @media only screen and (min-width: 1024px) { | ||
.mobile-block { | .mobile-block { | ||
display:none; | display:none !important; | ||
} | } | ||
.custom-table { | .custom-table { | ||
Строка 499: | Строка 447: | ||
} | } | ||
. | .recipe__card { | ||
background-color: # | background-color: #1c323e; | ||
border: 1px solid # | border: 1px solid #314755; | ||
margin: 10px; | margin: 10px; | ||
} | } | ||
. | .recipe__card .recipe-name { | ||
margin-top: 8px; | margin-top: 8px; | ||
text-align: center; | text-align: center; | ||
Строка 514: | Строка 462: | ||
} | } | ||
. | .recipe__card .item-main { | ||
margin: 8px 0 8px 10px; | margin: 8px 0 8px 10px; | ||
float: left; | float: left; | ||
} | } | ||
. | .recipe__card .item-main span { | ||
border-width: 4px; | border-width: 4px; | ||
border-radius: 10px; | border-radius: 10px; | ||
} | } | ||
. | .recipe__card .item-main span img { | ||
border-radius: 7px; | border-radius: 7px; | ||
margin: 0 !important; | margin: 0 !important; | ||
} | } | ||
. | .recipe__card .item-small-block { | ||
display: flex; | display: flex; | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
Строка 535: | Строка 483: | ||
} | } | ||
. | .recipe__card .item-small { | ||
margin-left: 6px; | margin-left: 6px; | ||
} | } | ||
. | .recipe__card .item-small span { | ||
border-width: 3px; | border-width: 3px; | ||
border-radius: 7px; | border-radius: 7px; | ||
} | } | ||
. | .recipe__card .item-small span img { | ||
border-radius: 5px; | border-radius: 5px; | ||
margin: 0 !important; | margin: 0 !important; | ||
} | } | ||
. | .recipe__card .item-main .item-count { | ||
font-size: 14px !important; | font-size: 14px !important; | ||
bottom: 3px !important; | bottom: 3px !important; | ||
Строка 556: | Строка 504: | ||
} | } | ||
. | .recipe__card .item-small .item-count { | ||
font-size: 11px !important; | font-size: 11px !important; | ||
bottom: 5px !important; | bottom: 5px !important; | ||
Строка 636: | Строка 584: | ||
text-align: center; | text-align: center; | ||
width: 200px; | width: 200px; | ||
background: # | background: #031e2f; | ||
margin: 0.5rem; | margin: 0.5rem; | ||
padding: 1rem; | padding: 1rem; | ||
Строка 644: | Строка 592: | ||
.custom-grid__card:hover { | .custom-grid__card:hover { | ||
background: # | background: #0c2738; | ||
cursor: pointer; | |||
} | } | ||
Строка 656: | Строка 605: | ||
} | } | ||
.custom- | .custom-grid__footer { | ||
font-family: BeaufortforLoL; | |||
color: #649ec0; | |||
font-style: italic; | |||
margin-top: 5px; | |||
} | |||
.custom-grid--category img { | |||
border: 1px solid #547481; | border: 1px solid #547481; | ||
} | } |
Текущая версия от 10:10, 29 ноября 2023
.custom-h2 { margin-bottom: 0.8rem !important; background-color: rgba(24,36,44,0.6) !important; border: 1px solid #172027 !important; padding: 10px !important; color: #c9c79d !important; display: flex !important; } .custom-h2 .mw-headline { margin: 0 auto !important; } .custom-h2 .mw-editsection { display: block !important; left: 65px !important; } .hero-icon-border { border: 1px solid #567a88; } .mw-body-content-change { background-color: /* #22313a */ #112b3a !important; } span.va-icon2 { position: relative; vertical-align: text-bottom !important; } span.va-icon { position: relative; top: 2px; vertical-align: text-bottom !important; } ul.gallery { margin:.8rem 0 1.6rem!important; padding:2px; } @media only screen and (max-width: 1290px) { li.gallerybox,li.gallerybox div,li.gallerybox a.image,li.gallerybox a.image img { width:13vw!important; } } li.gallerybox div.thumb { border-color:#2b2f36; background-color:#24272f; } .mw-body-content a.image { display:initial; } .icon-caption { text-align: center; } .rarity-common,.rarity-common a { color:#969696!important; text-shadow:0 0 3px #000!important; } .rarity-white,.rarity-white a { color:#fff!important; text-shadow:0 0 3px grey!important; } .rarity-glpar,.rarity-glpar a { color:#f3bb32!important; text-shadow:0 0 10px #f3bb32!important; } .rarity-green,.rarity-green a { color:#3dd20b!important; } .rarity-unique,.rarity-unique a { color:#2f78ff!important; } .rarity-blue,.rarity-blue a { color:#2f78ff!important; } .rarity-legendary,.rarity-legendary a { color:#ff9600!important; } .rarity-orange,.rarity-orange a { color:#ff9600!important; } .rarity-purple,.rarity-purple a { color:#9132c8!important; } .rarity-yellow,.rarity-yellow a { color:#ffb400!important; } .rarity-dark-orange,.rarity-dark-orange a { color:#dc7800!important; } .rarity-pearlescent,.rarity-pearlescent a { color:#0ff!important; } .rarity-e-tech,.rarity-e-tech a { color:#f0f!important; } .rarity-cursed,.rarity-cursed a { color:#0cc!important; } .rarity-red,.rarity-red a { color:#cf4747!important; } .rarity-seraph,.rarity-seraph a { color:#ff69b4!important; } .rarity-aftermarket,.rarity-aftermarket a { color:lime!important; } .rarity-rainbow,.rarity-rainbow a { background:rgba(255,32,32,1); background:-moz-linear-gradient(left,rgba(255,32,32,1) 0%,rgba(250,152,77,1) 14%,rgba(250,250,77,1) 25%,rgba(100,250,77,1) 42%,rgba(0,247,226,1) 57%,rgba(77,121,250,1) 71%,rgba(221,77,250,1) 86%,rgba(250,147,147,1) 100%); background:-webkit-gradient(left top,right top,color-stop(0%,rgba(255,32,32,1)),color-stop(14%,rgba(250,152,77,1)),color-stop(25%,rgba(250,250,77,1)),color-stop(42%,rgba(100,250,77,1)),color-stop(57%,rgba(0,247,226,1)),color-stop(71%,rgba(77,121,250,1)),color-stop(86%,rgba(221,77,250,1)),color-stop(100%,rgba(250,147,147,1))); background:-webkit-linear-gradient(left,rgba(255,32,32,1) 0%,rgba(250,152,77,1) 14%,rgba(250,250,77,1) 25%,rgba(100,250,77,1) 42%,rgba(0,247,226,1) 57%,rgba(77,121,250,1) 71%,rgba(221,77,250,1) 86%,rgba(250,147,147,1) 100%); background:-o-linear-gradient(left,rgba(255,32,32,1) 0%,rgba(250,152,77,1) 14%,rgba(250,250,77,1) 25%,rgba(100,250,77,1) 42%,rgba(0,247,226,1) 57%,rgba(77,121,250,1) 71%,rgba(221,77,250,1) 86%,rgba(250,147,147,1) 100%); background:-ms-linear-gradient(left,rgba(255,32,32,1) 0%,rgba(250,152,77,1) 14%,rgba(250,250,77,1) 25%,rgba(100,250,77,1) 42%,rgba(0,247,226,1) 57%,rgba(77,121,250,1) 71%,rgba(221,77,250,1) 86%,rgba(250,147,147,1) 100%); background:linear-gradient(to right,rgba(255,32,32,1) 0%,rgba(250,152,77,1) 14%,rgba(250,250,77,1) 25%,rgba(100,250,77,1) 42%,rgba(0,247,226,1) 57%,rgba(77,121,250,1) 71%,rgba(221,77,250,1) 86%,rgba(250,147,147,1) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent!important; text-shadow:none!important; } .rarity-common>.new,.rarity-white>.new,.rarity-green>.new,.rarity-unique>.new,.rarity-blue>.new,.rarity-legendary>.new,.rarity-orange>.new,.rarity-purple>.new,.rarity-yellow>.new,.rarity-dark-orange>.new,.rarity-pearlescent>.new,.rarity-e-tech>.new,.rarity-seraph>.new,.rarity-rainbow>.new { background-color:#FF454574!important; } .size10, .size10 a { font-size: 10px; } .size12, .size12 a { font-size: 12px; } .size14, .size14 a { font-size: 14px; } .size16, .size16 a { font-size: 16px; } .size18, .size18 a { font-size: 18px; } .size20, .size20 a { font-size: 20px; } .size22, .size22 a { font-size: 22px; } .size24, .size24 a { font-size: 24px; } .size26, .size26 a { font-size: 26px; } .size28, .size28 a { font-size: 28px; } .size30, .size30 a { font-size: 30px; } .border-gray { border-style: solid; border-radius: 3px; border-color: gray; width:fit-content; } .border-white { border-style: solid; border-radius: 3px; border-color: #ffffff; width:fit-content; } .border-green { border-style: solid; border-radius: 3px; border-color: #09db4b; width:fit-content; } .border-blue { border-style: solid; border-radius: 3px; border-color: #03a9fc; width:fit-content; } .border-epic { border-style: solid; border-radius: 3px; border-color: #7408bd; width:fit-content; } .border-lega { border-style: solid; border-radius: 3px; border-color: #ff9600; width:fit-content; } .border-gray img, .border-white img, .border-green img, .border-blue img, .border-epic img, .border-lega img { border-radius: 2px; } .custom-table { display: table; border-collapse: collapse; background-color: #12303c; border: 1px solid #2b4454; } .custom-table tr { color: white; border-bottom: 1px solid #2b4454; } .custom-table th, td { padding: 10px; } .custom-table th { color: #337c97; background-color: #0f2833; } .active-hover tr:hover { background-color: #193948; } .recipes { display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto 15px auto; width: 244px; } .bosses { display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto 15px auto; } .bosses a { display: inline-block; margin: 5px; border: 3px ridge #3d8ac2; } .chests { display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto 15px auto; } .chests > div { width: inherit !important; margin: 5px !important; } .awards { display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto 15px auto; } .shop { display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto 15px auto; } .gift { display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto 15px auto; } .gift > div { width: inherit !important; margin: 5px !important; } .loot { display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto 15px auto; } .used-in-craft { display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto 15px auto; } .used-in-craft > div { display: block !important; width: inherit !important; position: static !important; margin: 5px !important; } .activates-hero { display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto 15px auto; } .activates-hero > div { display: block !important; width: inherit !important; position: static !important; margin: 5px !important; } @media only screen and (max-width:1023px) { .custom-table th, td { padding: 5px; } .pc-block { display:none !important; } } @media only screen and (min-width: 1024px) { .mobile-block { display:none !important; } .custom-table { overflow-x: scroll; } } /* ################################################## */ /* ### TEMPLATE DOCUMENTATION ### */ /* ### (Шаблон:Docparam/Шаблон:Documentation) ### */ /* ################################################## */ /* Template:Docparam */ .va-docparam { padding: 5px 2px 5px 20px; text-indent: -18px; margin-bottom: 3px; background: #002a32; border: 1px dotted #D9D9D9; overflow: auto; } .va-docparam-icon { margin: 0; padding: 0; width: 20px; float: left; } .va-docparam-default { float: right; font-size: 10px; } .va-docparam-params { font-family: monospace; } .va-docparam-desc { margin: 0 0 8px; padding: 0 0 5px 20px; } /* ------------------- шаблон Предмет */ /*.item {*/ /* width: 30%;*/ /* border: 1px solid #8c8c8c;*/ /* background: #303030;*/ /* padding: 10px;*/ /*}*/ /*.item .rare-border {*/ /* width: 92px;*/ /* margin: 0 auto;*/ /* border-radius: 5px;*/ /* margin-bottom: 10px;*/ /*}*/ .item ul { list-style-type: none; /*text-align: center;*/ /*margin: 0;*/ } /*.item span {*/ /* font-weight: bold;*/ /*}*/ .item-count { position: absolute; bottom: -2px; right: 4px; font-size: 13px; font-weight: bold; color: white; text-shadow: #000 2px 0px 2px, #000 0px 2px 2px, #000 0px -2px 2px, #000 -2px 0px 2px; } .recipe__card { background-color: #1c323e; border: 1px solid #314755; margin: 10px; } .recipe__card .recipe-name { margin-top: 8px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 10px; } .recipe__card .item-main { margin: 8px 0 8px 10px; float: left; } .recipe__card .item-main span { border-width: 4px; border-radius: 10px; } .recipe__card .item-main span img { border-radius: 7px; margin: 0 !important; } .recipe__card .item-small-block { display: flex; flex-flow: row wrap; margin-top: 9px; } .recipe__card .item-small { margin-left: 6px; } .recipe__card .item-small span { border-width: 3px; border-radius: 7px; } .recipe__card .item-small span img { border-radius: 5px; margin: 0 !important; } .recipe__card .item-main .item-count { font-size: 14px !important; bottom: 3px !important; right: 8px !important; text-shadow: -1px 1px 2px #000000; } .recipe__card .item-small .item-count { font-size: 11px !important; bottom: 5px !important; right: 5px !important; text-shadow: -1px 1px 2px #000000; } .big-table { overflow: auto; position: relative; } .big-table table { margin: 0 auto; vertical-align: top; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .scroll-right:after { content: ''; display: block; width: 15px; position: absolute; top: 0; right: 0; bottom: 0; z-index: 500; background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center; background-repeat: no-repeat; background-attachment: scroll; background-size: 15px 100%; background-position: 100% 0%; } .scroll-left:before { content: ''; display: block; width: 15px; position: absolute; top: 0; bottom: 0; left: 0; z-index: 500; background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center; background-repeat: no-repeat; background-attachment: scroll; background-size: 15px 100%; } .owl-carousel.owl-loaded { text-align: center; } .mw-highlight-lines pre { box-shadow: inset 2.75em 0 0 #365474 !important; } .mw-highlight-lines .lineno { user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; margin-left: -2.9em !important; color: #b8c7cb !important; } .custom-grid { width: 100%; text-align: center; display: flex; flex-flow: row wrap; justify-content: center; } .custom-grid__card { display: flex; flex-flow: column wrap; text-align: center; width: 200px; background: #031e2f; margin: 0.5rem; padding: 1rem; border-radius: 8px; border: 1px solid #314755; } .custom-grid__card:hover { background: #0c2738; cursor: pointer; } .custom-grid__header { font-weight: bold; font-size: 14px; text-transform: uppercase; text-align: center; color: #eae5b1; margin-bottom: 5px; } .custom-grid__footer { font-family: BeaufortforLoL; color: #649ec0; font-style: italic; margin-top: 5px; } .custom-grid--category img { border: 1px solid #547481; } .blue-tooltip { width: 325px; background-color: #0d2232; border: 1px solid #39576a; box-shadow: 0px 0px 5px 0px rgba(54, 81, 122, 0.5); } .tooltip-hero-main { margin: 7px; display: flex; } .tooltip-hero-name { font-family: BeaufortforLoL; text-align: center; font-size: 26px; line-height: 26px; color: #7daed7; text-transform: uppercase; font-weight: bold; text-shadow: 2px 2px 2px #142730; margin: 10px; } .tooltip-hero-icon { width: 125px; height: 125px; } .tooltip-hero-icon img { border-style: solid; border-width: 4px; border-radius: 8px; cursor: pointer; box-sizing: border-box; } .tooltip-hero-property { font-family: BeaufortforLoL; text-transform: uppercase; width: 110px; text-align: center; display: flex; flex-flow: column wrap; } .tooltip-hero-property span { color: #ffb257; font-weight: bold; font-size: 10px; } .tooltip-hero-property div { color: #7daed7; font-weight: bold; font-size: 12px; line-height: 25px; } .tooltip-hero-stats { color: #b5cbcf; font-weight: bold; font-size: 12px; display: flex; flex-flow: column wrap; } .tooltip-hero-stats div { line-height: 22px; } .tooltip-hero-stats span { margin-left: 3px; } .tooltip-hero-abilities { display: flex; flex-direction: column; margin: 0 5px; } .tooltip-hero-ability:last-child { margin-bottom: 8px; } .tooltip-hero-ability { display: flex; flex-direction: row; padding-top: 5px; margin-bottom: 5px; } .tooltip-hero-ability-icon { display: flex; justify-content: center; padding: 0 5px; } .tooltip-hero-ability-properties { line-height: 1; font-size: 13px; text-transform: none; padding: 0 15px 0 0; color: #b5cbcf; } .tooltip-hero-ability-type, .tooltip-hero-ability-chance{ color: #ffb257; } .tooltip-hero-ability-description { /*font-weight: 400;*/ } .tooltip-hero-other { width: 295px; margin: 0 5px 7px 5px; } .tooltip-hero-features { display: flex; flex-direction: column; padding-left: 5px; } .tooltip-hero-feature { font-weight: normal; text-transform: none; color: #b5cbcf; font-size: 13px; line-height: 16px; margin-top: 5px; } .infobox-hero-feature:last-child { padding-bottom: 5px; } .tooltip-hero-feature-name { display: block; font-size: 11px; color: #ffb257; font-weight: bold; text-transform: uppercase; } .tooltip-hero-sieges { display: flex; flex-direction: column; padding-left: 5px; } .tooltip-hero-siege { font-weight: normal; text-transform: none; color: #b5cbcf; font-size: 13px; line-height: 16px; margin-top: 5px; } .tooltip-hero-siege:last-child { padding-bottom: 5px; } .tooltip-hero-siege-name { display: block; font-size: 11px; color: #ffb257; font-weight: bold; text-transform: uppercase; } .tooltip-hero-dislikes { width: 100%; display: flex; flex-direction: column; } .tooltip-hero-dislike { font-weight: normal; text-transform: none; color: #b5cbcf; padding: 5px; font-size: 13px; line-height: 16px; } .tooltip-hero-dislike-name { display: block; font-size: 11px; color: #ffb257; font-weight: bold; text-transform: uppercase; } .tooltip-hero-other a { color: #3eabdf; } .tooltip-item-main { display: flex; justify-content: center; margin: 20px; } .tooltip-item-name { font-family: BeaufortforLoL; text-align: center; font-size: 26px; line-height: 26px; color: #7daed7; text-transform: uppercase; font-weight: bold; text-shadow: 2px 2px 2px #142730; margin: 20px; } .tooltip-item-icon { width: 140px; height: 140px; } .tooltip-item-icon img { border-style: solid; border-width: 4px; border-radius: 10px; cursor: pointer; box-sizing: border-box; } .tooltip-item-type { padding: 15px 0; border-top: 1px solid #486c81; border-bottom: 1px solid #486c81; background-color: #173445; font-family: BeaufortforLoL; font-size: 14px; text-align: center; font-weight: bold; color: white; } .tooltip-item-description { color: #649ec0; font-style: italic; padding: 10px; font-family: BeaufortforLoL; font-size: 14px; text-align: center; } .tooltip-item-auc-description { font-family: 'BeaufortforLOL'; font-size: 14px; padding: 10px 0; color: #efefef; background: #0f2c45; text-align: center; line-height: 1.5em; } .tooltip-item-min-cost, .tooltip-item-deposit { font-weight: bold; } .tooltip-item-min-cost span, .tooltip-item-deposit span { color: #efde22; } .tooltip-item-auc-description .va-icon { top: 0 !important; } .tooltip-item-abilities { display: flex; flex-direction: column; margin: 7px; } .tooltip-item-ability:last-child { margin-bottom: 8px; } .tooltip-item-ability { display: flex; flex-direction: row; padding-top: 5px; margin-bottom: 5px; } .tooltip-item-ability-icon { display: flex; justify-content: center; padding: 0 5px; } .tooltip-item-ability-properties { line-height: 1; font-size: 13px; text-transform: none; padding: 0 15px 0 0; color: #b5cbcf; } .tooltip-item-ability-type, .tooltip-item-ability-chance{ color: #ffb257; } .tooltip-unit-property { font-family: BeaufortforLoL; text-transform: uppercase; width: 110px; text-align: center; display: flex; flex-flow: column wrap; } .tooltip-unit-property span { color: #ffb257; font-weight: bold; font-size: 10px; } .tooltip-unit-property div { color: #7daed7; font-weight: bold; font-size: 12px; line-height: 25px; } .tooltip-boss-main { margin: 7px; } .tooltip-boss-name { font-family: BeaufortforLoL; text-align: center; font-size: 26px; line-height: 26px; color: #7daed7; text-transform: uppercase; font-weight: bold; text-shadow: 2px 2px 2px #142730; margin: 20px 10px; } .tooltip-boss-property-block { display: flex; color: #ffb257; font-weight: bold; font-size: 11px; text-transform: uppercase; align-items: center; justify-content: space-around; } .tooltip-boss-property { margin: 10px 0 5px 40px; text-align: center; line-height: 20px; } .tooltip-boss-property span { margin-bottom: 10px; color: #ffb257; } .tooltip-boss-property div { color: #f1e6d0; margin-top: -5px; } .tooltip-boss-icon-block { padding: 0; width: 160px } .tooltip-boss-icon { width: 128px; position: relative; margin: 0 auto; } .tooltip-boss-icon img { border: 3px ridge #3d8ac2; } .tooltip-boss-features { position: absolute; width: 30px; height: 128px; display: flex; flex-flow: column wrap; top: 0; right: -20px; } .tooltip-boss-features img { border: 0; } .tooltip-boss-hp { width: 200px; height: 15px; background: #149132; line-height: 15px; color: white; border: 1px solid #172027; margin: 15px auto 10px auto; padding: 3px 8px; font-weight: bold; text-shadow: 1px 1px 2px #223038; text-align: center; } .tooltip-boss-data { display: table; width: 100%; border-spacing: 0; margin-top: 10px !important; } .tooltip-boss-data tr { text-align: center; } .tooltip-boss-score-block, .tooltip-boss-loot-block, .tooltip-boss-summon-block { display: flex; flex-flow: row wrap; justify-content: space-around; } .tooltip-boss-score-head { display: flex; text-transform: uppercase; color: white; align-items: center; padding-left: 10px; width: 30%; } .tooltip-boss-score-body { display: flex; align-items: center; justify-content: center; padding: 10px 0; width: 64%; } .tooltip-boss-score-body span { height: 15px; color: white; font-weight: bold; font-size: 14px; } .tooltip-boss-score-body .va-icon { top: 0 !important; } .tooltip-boss-loot-head { display: flex; align-items: center; text-transform: uppercase; color: white; padding-left: 10px; width: 30%; } .tooltip-boss-loot-body { display: flex; justify-content: space-evenly; padding: 10px 0; width: 64%; } .tooltip-boss-loot-body > div { width: inherit; display: block; } .tooltip-boss-summon-head { display: flex; align-items: center; text-transform: uppercase; color: white; padding-left: 10px; width: 30%; } .tooltip-boss-summon-body { width: 64%; display: flex; justify-content: center; padding: 10px 0; } .tooltip-boss-info-head { text-transform: uppercase; color: #ffb257; padding: 10px 0 3px 0 !important; } .tooltip-boss-info-body { padding: 0 5px 5px 5px; color: #efefef; text-align: center; } .tooltip-boss-guards { display: flex; flex-wrap: wrap; } .tooltip-boss-guard { padding: 0 0 10px 0 !important; width: 50%; } .tooltip-boss-guard-icon { width: 80px; position: relative; margin: 0 auto; } .tooltip-boss-guard-icon img { border: 3px ridge #316f9c; } .tooltip-boss-guard-hp { width: 80%; height: 15px; background: #149132; line-height: 15px; color: white; border: 1px solid #172027; margin: 5px auto; padding: 3px; font-weight: bold; text-shadow: 1px 1px 2px #223038; text-align: center; } .tooltip-boss-guard-features { position: absolute; width: 24px; height: 100px; display: flex; flex-flow: column wrap; top: 0; right: -17px; } .tooltip-boss-guard-features img { border: 0; } .tooltip-boss-score { margin-left: 3px; color: rgb(208,200,101); font-weight: bold; line-height: 29px; font-size: 13px; } /* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */ .has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents { display: none; } /* Align images with text the same way it's in page content */ /* Was probably better to play with the classes but that would cause ton of side effects */ .main-tooltip img { vertical-align: middle; } .hero-border-common img { border-color:#8f8676; } .hero-border-uncommon img { border-color:#d8c7aa; } .hero-border-rare img { border-color:#3ab11c; } .hero-border-ultrarare img { border-color:#2c75fb; } .hero-border-epic img { border-color:#c113ec; } .hero-border-legendary img { border-color:#f5b526; } .hero-border-mythic img { border-color:#00c7b1; } .hero-border-divine img { border-color:#54452a; } .hero-border-godlike img { border-color:#a50934; } .hero-border-eternal img { border-color:#ce05b5; } .hero-border-galactic img { border-color:#9db53d; } .item-border-common img { border-color: gray; } .item-border-uncommon img { border-color: #fff; } .item-border-rare img { border-color: #09db4b; } .item-border-ultrarare img { border-color: #03a9fc; } .item-border-epic img { border-color: #7408bd; } .item-border-legendary img { border-color: #ff9600; }