Шаблон:Infobox/style.css: различия между версиями
Нет описания правки |
Нет описания правки |
||
Строка 603: | Строка 603: | ||
.item-deposit span { | .item-deposit span { | ||
color: #569bc9; | color: #569bc9; | ||
} | |||
.infobox-unit { | |||
width: 350px; | |||
font-family: BeaufortforLoL; | |||
font-weight: 700; | |||
margin-top: 0rem !important; | |||
border-spacing: 0; | |||
border-radius: 12px; | |||
z-index: 3 !important; | |||
background: #031e2f !important; | |||
font-size: 0.875rem; | |||
text-align: left; | |||
text-transform: uppercase; | |||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575); | |||
float: right; | |||
margin-left: 1rem; | |||
} | |||
.infobox-unit-button-bar-top, | |||
.infobox-unit-button-bar-bottom{ | |||
width: 100%; | |||
text-align: center; | |||
} | |||
.infobox-unit-button-bar-top { | |||
margin-top: 0 !important; | |||
border-radius: 12px 12px 0 0; | |||
} | |||
.infobox-unit-button-bar-bottom { | |||
height: 35px; | |||
border-radius: 0 0 12px 12px; | |||
} | |||
.infobox-unit-data { | |||
width: 100%; | |||
background: #031e2f; | |||
color: #f1e6d0; | |||
font-size: 13px; | |||
font-weight: 500; | |||
border-radius:0; | |||
margin: 0; | |||
line-height: 1.1; | |||
text-align: center; | |||
overflow: hidden; | |||
display: flex; | |||
} | |||
.infobox-unit-properties { | |||
width: 30%; | |||
padding: 7px 0 0 10px; | |||
display: flex; | |||
flex-flow: column wrap; | |||
justify-content: center; | |||
} | |||
.infobox-unit-properties span { | |||
color: #ffb257; | |||
font-weight: bold; | |||
font-size: 10px; | |||
} | |||
.infobox-unit-properties div { | |||
margin-bottom: 3px; | |||
} | |||
.infobox-unit-stats { | |||
width: 40%; | |||
text-align: right; | |||
color: #eae5b1; | |||
font-weight: bold; | |||
font-size: 15px; | |||
padding: 12px 7px 0 0; | |||
} | |||
.infobox-unit-image { | |||
width: 140px; | |||
padding: 0; | |||
color: #eae5b1; | |||
font-size: 17px; | |||
position: relative; | |||
} | |||
.infobox-unit-title { | |||
margin-top: 0px !important; | |||
padding: 15px; | |||
text-align: center; | |||
line-height: 1; | |||
font-size: 26px; | |||
color: #ffb257; | |||
border-top: 1px solid #404e65; | |||
border-bottom: 1px solid #404e65; | |||
} | |||
.infobox-unit-skills { | |||
width: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.infobox-unit-skill { | |||
display: flex; | |||
flex-direction: row; | |||
padding-top: 15px; | |||
} | |||
.infobox-unit-skill:last-child { | |||
padding-bottom: 15px; | |||
} | |||
.infobox-unit-skills-icon { | |||
display: flex; | |||
justify-content: center; | |||
padding: 0 15px; | |||
} | |||
.infobox-unit-skills-properties { | |||
line-height: 1; | |||
font-size: 13px; | |||
text-transform: none; | |||
padding: 0 15px 0 0; | |||
color: #eae7c1; | |||
} | |||
.infobox-unit-skill-type, .infobox-unit-skill-chance{ | |||
color: #ffb257; | |||
} | |||
.infobox-unit-skill-description { | |||
font-weight: 400; | |||
} | |||
.infobox-unit-features { | |||
width: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
border-bottom: 1px solid #404e65; | |||
} | |||
.infobox-unit-features2 { | |||
width: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
border-bottom: 1px solid #404e65; | |||
border-top: 1px solid #404e65; | |||
} | |||
.infobox-unit-feature:first-child { | |||
padding-top: 15px; | |||
} | |||
.infobox-unit-feature { | |||
font-weight: normal; | |||
text-transform: none; | |||
color: #eae7c1; | |||
padding: 7px 15px 0 15px; | |||
} | |||
.infobox-unit-feature:last-child { | |||
padding-bottom: 15px; | |||
} | |||
.infobox-unit-feature-name { | |||
display: block; | |||
font-size: 13px; | |||
color: #ffb257; | |||
font-weight: bold; | |||
text-transform: uppercase; | |||
} | |||
.infobox-unit-dislike { | |||
font-weight: normal; | |||
text-transform: none; | |||
color: #eae7c1; | |||
padding: 15px; | |||
} | |||
.infobox-unit-dislike2 { | |||
font-weight: normal; | |||
text-transform: none; | |||
color: #eae7c1; | |||
padding: 15px; | |||
border-bottom: 1px solid #404e65; | |||
} | |||
.infobox-unit-dislike-name { | |||
display: block; | |||
font-size: 13px; | |||
color: #ffb257; | |||
font-weight: bold; | |||
text-transform: uppercase; | |||
} | |||
.infobox-unit-calc { | |||
font-family: BeaufortforLoL; | |||
text-align: center; | |||
padding: 10px 0; | |||
line-height: 1; | |||
font-size: 21px; | |||
border-top: 1px solid #404e65; | |||
border-bottom: 1px solid #404e65; | |||
} | |||
.infobox-unit-calc-wrapper { | |||
width: 100%; | |||
margin: 0; | |||
text-align: center; | |||
} | |||
.infobox-unit-calc-wrapper-row { | |||
margin: 0 !important; | |||
width: 100%; | |||
} | |||
.infobox-unit-calc-manager-rarity-wrapper { | |||
display: flex; | |||
justify-content: center; | |||
margin-bottom: 10px; | |||
} | |||
.infobox-unit-calc-manager-rarity { | |||
display: inline-block; | |||
border-radius: 2px; | |||
width: 20px; | |||
height: 20px; | |||
margin: 3px; | |||
cursor: pointer; | |||
} | |||
.infobox-unit-calc-manager-rarity-selected { | |||
border: 2px solid #FFF; | |||
width: 16px; | |||
height: 16px; | |||
} | |||
.infobox-unit-calc-wrapper-row-2 { | |||
display: flex; | |||
flex-direction: row !important; | |||
width: 100%; | |||
font-size: 14px; | |||
} | |||
.infobox-unit-calc-manager-input { | |||
width: 5em; | |||
background-color: #000 !important; | |||
color: #FDF3E7 !important; | |||
font-weight: bold !important; | |||
border-color: #816D42 !important; | |||
border-width: 3px !important; | |||
padding: 3px 8px !important; | |||
text-align: right; | |||
font-size: 16px; | |||
margin-top: 5px; | |||
} | |||
.infobox-unit-calc-wrapper-row-2 .active { | |||
cursor: pointer; | |||
} | |||
.infobox-unit-calc-wrapper-row-2 .active:hover { | |||
background: #5e9c2c; | |||
} | |||
.infobox-unit-calc-wrapper-row-2 .not-active { | |||
cursor: not-allowed; | |||
background: #737373; | |||
} | |||
.infobox-unit-calc-wrapper-row-2 .passive { | |||
cursor: pointer; | |||
background: #737373; | |||
border: 1px solid #ffffff; | |||
width: 43px; | |||
height: 23px; | |||
line-height: 23px; | |||
} | |||
.infobox-unit-calc-wrapper-row-2 .passive:hover { | |||
background: #8b8a8a; | |||
} | |||
.infobox-unit-panel-calc { | |||
color: #9bbcd1; | |||
cursor: pointer; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
} | |||
.infobox-unit-panel-body { | |||
display: none; | |||
} | |||
@media only screen and (max-width: 720px) { | |||
.infobox-unit { | |||
float: none !important; | |||
margin: 0 auto 1.6rem auto !important; | |||
padding: 0 !important; | |||
} | |||
} | |||
.infobox-unit-extlink-list { | |||
position: absolute; | |||
margin-top: -100px; | |||
margin-left: -15px; | |||
padding: 15px 0; | |||
width: 100%; | |||
visibility: hidden; | |||
opacity: 0; | |||
z-index: -1; | |||
border-radius: 12px; | |||
box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78); | |||
transition: opacity 0.2s ease,box-shadow 0.2s ease; | |||
text-align: left; | |||
overflow: hidden; | |||
/* position: absolute;*/ | |||
/* margin-top: -400px;*/ | |||
/* padding: 15px 0;*/ | |||
/* width: 100%;*/ | |||
/* visibility: hidden;*/ | |||
/* opacity: 0;*/ | |||
/* z-index: -1;*/ | |||
/* background: white;*/ | |||
/*border-radius: 12px 12px 0 0;*/ | |||
/*-webkit-box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78);*/ | |||
/*-moz-box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78);*/ | |||
/* box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78);*/ | |||
/* transition: opacity 0.2s ease, box-shadow 0.2s ease;*/ | |||
/* text-align: left;*/ | |||
/* overflow: hidden;*/ | |||
/* Clip background icon */ | |||
} | |||
.infobox-unit-button:hover .infobox-extlink-list { | |||
opacity: 1; | |||
z-index: 10; | |||
visibility: visible; | |||
} | |||
.infobox-unit-button-bottom>span { | |||
display: block; | |||
border-radius: 0 0 12px 12px; | |||
padding: 10px 20px; | |||
} | |||
.infobox-unit-button-top>span { | |||
display: block; | |||
border-radius: 12px 12px 0 0; | |||
padding: 10px 20px; | |||
} | |||
.infobox-unit-button-common { | |||
background: #8e8677; | |||
color: #bbaf98; | |||
} | |||
.infobox-unit-button-uncommon { | |||
background: linear-gradient(to bottom right,#cac8c8 10%,#aba8a4 55%); | |||
color: #887676; | |||
} | |||
.infobox-unit-button-rare { | |||
background: linear-gradient(to bottom right,#4e9245 10%,#2c691e 65%); | |||
color: #65ab56; | |||
} | |||
.infobox-unit-button-ultrarare { | |||
background: linear-gradient(to bottom right,#149cfa 0%,#054490 55%); | |||
color: #57a0f9; | |||
} | |||
.infobox-unit-button-epic { | |||
background: linear-gradient(to bottom right,#644796 10%,#763886 65%); | |||
color: #b96fcc; | |||
} | |||
.infobox-unit-button-legendary { | |||
background: linear-gradient(to bottom right,#fed058 0%,#ec7c0d 55%); | |||
color: #ffc286; | |||
} | |||
.infobox-unit-button-mythic { | |||
background: linear-gradient(to bottom right,#55f3e1 0%,#359271 55%); | |||
color: #51f3b9; | |||
} | |||
.infobox-unit-button-divine { | |||
background: linear-gradient(to bottom right,#504c56 0%,#333222 55%); | |||
color: #777666; | |||
} | |||
.infobox-unit-button-godlike { | |||
background: linear-gradient(to bottom right,#ec1341 0%,#6b1526 55%); | |||
color: #a56572; | |||
} | |||
.infobox-unit-button-eternal { | |||
background: linear-gradient(to bottom right,#ee68dc 0%,#842c7b 55%); | |||
color: #ca5dbe; | |||
} | |||
.infobox-unit-button-galactic { | |||
background: linear-gradient(to bottom right,#effb3d 0%,#778d30 55%); | |||
color: #c8de81; | |||
} | |||
.infobox-unit-extlink-title { | |||
display: block; | |||
padding: 0 20px; | |||
margin: 5px 0; | |||
font-size: 1rem; | |||
} | |||
.infobox-unit-extlink-list ul { | |||
margin: 0 0 10px 0; | |||
padding: 0 10px; | |||
display: flex; | |||
flex-wrap: wrap; | |||
list-style: none; | |||
} | |||
.infobox-unit-extlink a { | |||
display: block; | |||
/* Override external link and file icons */ | |||
padding: 5px 10px !important; | |||
border-radius: 4px; | |||
background-image: none !important; | |||
transition: background 0.2s ease, color 0.2s ease; | |||
} | |||
.infobox-unit-extlink a:hover { | |||
background-color: #eaecf0 !important; | |||
} | |||
.infobox-unit-extlink a:active { | |||
background-color: #eaf3ff !important; | |||
} | |||
.infobox-unit-extlink-title:before { | |||
display: block; | |||
position: absolute; | |||
width: 120px; | |||
height: 120px; | |||
margin-top: 5px; | |||
right: 20px; | |||
opacity: .1; | |||
z-index: -1; | |||
background-repeat: no-repeat; | |||
background-position: top right; | |||
background-size: contain; | |||
} | |||
.infobox-unit-extlink-title-rsi:before { | |||
content: ""; | |||
/* TemplateStyles does not like internal link for some reason */ | |||
/*background-image: url(https://starcitizen.tools/images/4/40/RSItm.svg); */ | |||
} | |||
.infobox-unit-extlink-title-community:before { | |||
content: ""; | |||
/* TemplateStyles does not like internal link for some reason */ | |||
/*background-image: url(https://starcitizen.tools/images/3/3f/MadeByTheCommunity.svg); */ | |||
} | |||
.infobox-unit-button>span { | |||
filter: saturate(0.8); | |||
} | |||
.infobox-unit-extlink-list { | |||
background: #33363d; | |||
} | |||
.infobox-unit-extlink-title:before { | |||
filter: invert(1); | |||
} | |||
.infobox-unit-extlink a:hover { | |||
background-color: #2b2f36 !important; | |||
} | |||
.infobox-unit-description { | |||
font-family: BeaufortforLoL; | |||
font-size: 14px; | |||
color: #649ec0; | |||
font-style: italic; | |||
text-align: center; | |||
text-transform: initial; | |||
font-weight: normal; | |||
padding: 10px 0; | |||
} | } |
Версия от 03:33, 12 ноября 2022
.infobox-hero { width: 350px; font-family: BeaufortforLoL; font-weight: 700; margin-top: 0rem !important; border-spacing: 0; border-radius: 12px; z-index: 3 !important; background: #031e2f !important; font-size: 0.875rem; text-align: left; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575); float: right; margin-left: 1rem; } .infobox-hero-button-bar-top, .infobox-hero-button-bar-bottom{ width: 100%; text-align: center; } .infobox-hero-button-bar-top { margin-top: 0 !important; border-radius: 12px 12px 0 0; } .infobox-hero-button-bar-bottom { height: 35px; border-radius: 0 0 12px 12px; } .infobox-hero-data { width: 100%; background: #031e2f; color: #f1e6d0; font-size: 13px; font-weight: 500; border-radius:0; margin: 0; line-height: 1.1; text-align: center; overflow: hidden; display: flex; } .infobox-hero-properties { width: 30%; padding: 7px 0 0 10px; display: flex; flex-flow: column wrap; justify-content: center; } .infobox-hero-properties span { color: #ffb257; font-weight: bold; font-size: 10px; } .infobox-hero-properties div { margin-bottom: 3px; } .infobox-hero-stats { width: 40%; text-align: right; color: #eae5b1; font-weight: bold; font-size: 15px; padding: 12px 7px 0 0; } .infobox-hero-image { width: 140px; padding: 0; color: #eae5b1; font-size: 17px; position: relative; } .infobox-hero-stars { width: 120px; position: absolute; padding: 4px 10px; justify-content: center; top: 110px; } .infobox-hero-title { margin-top: 0px !important; padding: 15px; text-align: center; line-height: 1; font-size: 26px; color: #ffb257; border-top: 1px solid #404e65; border-bottom: 1px solid #404e65; } .infobox-hero-skills { width: 100%; display: flex; flex-direction: column; } .infobox-hero-skill { display: flex; flex-direction: row; padding-top: 15px; } .infobox-hero-skill:last-child { padding-bottom: 15px; } .infobox-hero-skills-icon { display: flex; justify-content: center; padding: 0 15px; } .infobox-hero-skills-properties { line-height: 1; font-size: 13px; text-transform: none; padding: 0 15px 0 0; color: #eae7c1; } .infobox-hero-skill-type, .infobox-hero-skill-chance{ color: #ffb257; } .infobox-hero-skill-description { font-weight: 400; } .infobox-hero-features { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #404e65; } .infobox-hero-features2 { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #404e65; border-top: 1px solid #404e65; } .infobox-hero-feature:first-child { padding-top: 15px; } .infobox-hero-feature { font-weight: normal; text-transform: none; color: #eae7c1; padding: 7px 15px 0 15px; } .infobox-hero-feature:last-child { padding-bottom: 15px; } .infobox-hero-feature-name { display: block; font-size: 13px; color: #ffb257; font-weight: bold; text-transform: uppercase; } .infobox-hero-sieges { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #404e65; } .infobox-hero-siege { font-weight: normal; text-transform: none; color: #eae7c1; padding: 15px 15px 0 15px; } .infobox-hero-siege:last-child { padding-bottom: 15px; } .infobox-hero-siege-name { display: block; font-size: 13px; color: #ffb257; font-weight: bold; text-transform: uppercase; } .infobox-hero-dislike { font-weight: normal; text-transform: none; color: #eae7c1; padding: 15px; } .infobox-hero-dislike2 { font-weight: normal; text-transform: none; color: #eae7c1; padding: 15px; border-bottom: 1px solid #404e65; } .infobox-hero-dislike-name { display: block; font-size: 13px; color: #ffb257; font-weight: bold; text-transform: uppercase; } .infobox-hero-calc { font-family: BeaufortforLoL; text-align: center; padding: 10px 0; line-height: 1; font-size: 21px; border-top: 1px solid #404e65; border-bottom: 1px solid #404e65; } .infobox-hero-calc-wrapper { width: 100%; margin: 0; text-align: center; } .infobox-hero-calc-wrapper-row { margin: 0 !important; width: 100%; } #infobox-hero-calc-manager-stars, #infobox-hero-calc-manager-rarity { width: 100%; margin: 10px 0 0 0; padding: 0; } #hero-stars svg { width: 25px; height: 25px; filter: drop-shadow(2px 2px 1px rgba(0,0,0,.7)); } .infobox-hero-calc-manager-rarity-wrapper { display: flex; justify-content: center; margin-bottom: 10px; } .infobox-hero-calc-manager-rarity { display: inline-block; border-radius: 2px; width: 20px; height: 20px; margin: 3px; cursor: pointer; } .infobox-hero-calc-manager-rarity-selected { border: 2px solid #FFF; width: 16px; height: 16px; } .infobox-hero-calc-wrapper-row-2 { display: flex; flex-direction: row !important; width: 100%; font-size: 14px; } .infobox-hero-calc-manager-input { width: 5em; background-color: #000 !important; color: #FDF3E7 !important; font-weight: bold !important; border-color: #816D42 !important; border-width: 3px !important; padding: 3px 8px !important; text-align: right; font-size: 16px; margin-top: 5px; } .infobox-hero-calc-manager-star svg{ width: 25px; height: 25px; opacity: .6; } .infobox-hero-calc-manager-star-selected svg { opacity: 1; } .equip-star-1 { color: #F2C621; } .equip-star-2 { color: #6BCAE9; } .equip-star-3 { color: #F74C4C; } .infobox-hero-siege-factor { height: 25px; background: #4f8624; width: 45px; border-radius: 7px; line-height: 25px; margin-right: 15px; font-size: 15px; font-weight: bold; color: #ffffff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .infobox-hero-calc-wrapper-row-2 .active { cursor: pointer; } .infobox-hero-calc-wrapper-row-2 .active:hover { background: #5e9c2c; } .infobox-hero-calc-wrapper-row-2 .not-active { cursor: not-allowed; background: #737373; } .infobox-hero-calc-wrapper-row-2 .passive { cursor: pointer; background: #737373; border: 1px solid #ffffff; width: 43px; height: 23px; line-height: 23px; } .infobox-hero-calc-wrapper-row-2 .passive:hover { background: #8b8a8a; } .infobox-hero-panel-calc { color: #9bbcd1; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .infobox-hero-panel-body { display: none; } @media only screen and (max-width: 720px) { .infobox-hero { float: none !important; margin: 0 auto 1.6rem auto !important; padding: 0 !important; } } .infobox-hero-extlink-list { position: absolute; margin-top: -100px; margin-left: -15px; padding: 15px 0; width: 100%; visibility: hidden; opacity: 0; z-index: -1; border-radius: 12px; box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78); transition: opacity 0.2s ease,box-shadow 0.2s ease; text-align: left; overflow: hidden; /* position: absolute;*/ /* margin-top: -400px;*/ /* padding: 15px 0;*/ /* width: 100%;*/ /* visibility: hidden;*/ /* opacity: 0;*/ /* z-index: -1;*/ /* background: white;*/ /*border-radius: 12px 12px 0 0;*/ /*-webkit-box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78);*/ /*-moz-box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78);*/ /* box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78);*/ /* transition: opacity 0.2s ease, box-shadow 0.2s ease;*/ /* text-align: left;*/ /* overflow: hidden;*/ /* Clip background icon */ } .infobox-hero-button:hover .infobox-extlink-list { opacity: 1; z-index: 10; visibility: visible; } .infobox-hero-button-bottom>span { display: block; border-radius: 0 0 12px 12px; padding: 10px 20px; } .infobox-hero-button-top>span { display: block; border-radius: 12px 12px 0 0; padding: 10px 20px; } .infobox-hero-button-common { background: #8e8677; color: #bbaf98; } .infobox-hero-button-uncommon { background: linear-gradient(to bottom right,#cac8c8 10%,#aba8a4 55%); color: #887676; } .infobox-hero-button-rare { background: linear-gradient(to bottom right,#4e9245 10%,#2c691e 65%); color: #65ab56; } .infobox-hero-button-ultrarare { background: linear-gradient(to bottom right,#149cfa 0%,#054490 55%); color: #57a0f9; } .infobox-hero-button-epic { background: linear-gradient(to bottom right,#644796 10%,#763886 65%); color: #b96fcc; } .infobox-hero-button-legendary { background: linear-gradient(to bottom right,#fed058 0%,#ec7c0d 55%); color: #ffc286; } .infobox-hero-button-mythic { background: linear-gradient(to bottom right,#55f3e1 0%,#359271 55%); color: #51f3b9; } .infobox-hero-button-divine { background: linear-gradient(to bottom right,#504c56 0%,#333222 55%); color: #777666; } .infobox-hero-button-godlike { background: linear-gradient(to bottom right,#ec1341 0%,#6b1526 55%); color: #a56572; } .infobox-hero-button-eternal { background: linear-gradient(to bottom right,#ee68dc 0%,#842c7b 55%); color: #ca5dbe; } .infobox-hero-button-galactic { background: linear-gradient(to bottom right,#effb3d 0%,#778d30 55%); color: #c8de81; } .infobox-hero-extlink-title { display: block; padding: 0 20px; margin: 5px 0; font-size: 1rem; } .infobox-hero-extlink-list ul { margin: 0 0 10px 0; padding: 0 10px; display: flex; flex-wrap: wrap; list-style: none; } .infobox-hero-extlink a { display: block; /* Override external link and file icons */ padding: 5px 10px !important; border-radius: 4px; background-image: none !important; transition: background 0.2s ease, color 0.2s ease; } .infobox-hero-extlink a:hover { background-color: #eaecf0 !important; } .infobox-hero-extlink a:active { background-color: #eaf3ff !important; } .infobox-hero-extlink-title:before { display: block; position: absolute; width: 120px; height: 120px; margin-top: 5px; right: 20px; opacity: .1; z-index: -1; background-repeat: no-repeat; background-position: top right; background-size: contain; } .infobox-hero-extlink-title-rsi:before { content: ""; /* TemplateStyles does not like internal link for some reason */ /*background-image: url(https://starcitizen.tools/images/4/40/RSItm.svg); */ } .infobox-hero-extlink-title-community:before { content: ""; /* TemplateStyles does not like internal link for some reason */ /*background-image: url(https://starcitizen.tools/images/3/3f/MadeByTheCommunity.svg); */ } .infobox-hero-button>span { filter: saturate(0.8); } .infobox-hero-extlink-list { background: #33363d; } .infobox-hero-extlink-title:before { filter: invert(1); } .infobox-hero-extlink a:hover { background-color: #2b2f36 !important; } .infobox-hero-description { font-family: BeaufortforLoL; font-size: 14px; color: #649ec0; font-style: italic; text-align: center; text-transform: initial; font-weight: normal; padding: 10px 0; } .item-auc-description { font-family: BeaufortforLoL; font-size: 14px; width: 100%; color: #97b7cc; background-color: #06233c; padding: 10px 0; text-align: center; text-transform: initial; font-weight: normal; } .item-min-cost { color: #97b7cc; font-weight: bold; } .item-min-cost span { color: #569bc9; } .item-deposit { color: #97b7cc; font-weight: bold; } .item-deposit span { color: #569bc9; } .infobox-unit { width: 350px; font-family: BeaufortforLoL; font-weight: 700; margin-top: 0rem !important; border-spacing: 0; border-radius: 12px; z-index: 3 !important; background: #031e2f !important; font-size: 0.875rem; text-align: left; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575); float: right; margin-left: 1rem; } .infobox-unit-button-bar-top, .infobox-unit-button-bar-bottom{ width: 100%; text-align: center; } .infobox-unit-button-bar-top { margin-top: 0 !important; border-radius: 12px 12px 0 0; } .infobox-unit-button-bar-bottom { height: 35px; border-radius: 0 0 12px 12px; } .infobox-unit-data { width: 100%; background: #031e2f; color: #f1e6d0; font-size: 13px; font-weight: 500; border-radius:0; margin: 0; line-height: 1.1; text-align: center; overflow: hidden; display: flex; } .infobox-unit-properties { width: 30%; padding: 7px 0 0 10px; display: flex; flex-flow: column wrap; justify-content: center; } .infobox-unit-properties span { color: #ffb257; font-weight: bold; font-size: 10px; } .infobox-unit-properties div { margin-bottom: 3px; } .infobox-unit-stats { width: 40%; text-align: right; color: #eae5b1; font-weight: bold; font-size: 15px; padding: 12px 7px 0 0; } .infobox-unit-image { width: 140px; padding: 0; color: #eae5b1; font-size: 17px; position: relative; } .infobox-unit-title { margin-top: 0px !important; padding: 15px; text-align: center; line-height: 1; font-size: 26px; color: #ffb257; border-top: 1px solid #404e65; border-bottom: 1px solid #404e65; } .infobox-unit-skills { width: 100%; display: flex; flex-direction: column; } .infobox-unit-skill { display: flex; flex-direction: row; padding-top: 15px; } .infobox-unit-skill:last-child { padding-bottom: 15px; } .infobox-unit-skills-icon { display: flex; justify-content: center; padding: 0 15px; } .infobox-unit-skills-properties { line-height: 1; font-size: 13px; text-transform: none; padding: 0 15px 0 0; color: #eae7c1; } .infobox-unit-skill-type, .infobox-unit-skill-chance{ color: #ffb257; } .infobox-unit-skill-description { font-weight: 400; } .infobox-unit-features { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #404e65; } .infobox-unit-features2 { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #404e65; border-top: 1px solid #404e65; } .infobox-unit-feature:first-child { padding-top: 15px; } .infobox-unit-feature { font-weight: normal; text-transform: none; color: #eae7c1; padding: 7px 15px 0 15px; } .infobox-unit-feature:last-child { padding-bottom: 15px; } .infobox-unit-feature-name { display: block; font-size: 13px; color: #ffb257; font-weight: bold; text-transform: uppercase; } .infobox-unit-dislike { font-weight: normal; text-transform: none; color: #eae7c1; padding: 15px; } .infobox-unit-dislike2 { font-weight: normal; text-transform: none; color: #eae7c1; padding: 15px; border-bottom: 1px solid #404e65; } .infobox-unit-dislike-name { display: block; font-size: 13px; color: #ffb257; font-weight: bold; text-transform: uppercase; } .infobox-unit-calc { font-family: BeaufortforLoL; text-align: center; padding: 10px 0; line-height: 1; font-size: 21px; border-top: 1px solid #404e65; border-bottom: 1px solid #404e65; } .infobox-unit-calc-wrapper { width: 100%; margin: 0; text-align: center; } .infobox-unit-calc-wrapper-row { margin: 0 !important; width: 100%; } .infobox-unit-calc-manager-rarity-wrapper { display: flex; justify-content: center; margin-bottom: 10px; } .infobox-unit-calc-manager-rarity { display: inline-block; border-radius: 2px; width: 20px; height: 20px; margin: 3px; cursor: pointer; } .infobox-unit-calc-manager-rarity-selected { border: 2px solid #FFF; width: 16px; height: 16px; } .infobox-unit-calc-wrapper-row-2 { display: flex; flex-direction: row !important; width: 100%; font-size: 14px; } .infobox-unit-calc-manager-input { width: 5em; background-color: #000 !important; color: #FDF3E7 !important; font-weight: bold !important; border-color: #816D42 !important; border-width: 3px !important; padding: 3px 8px !important; text-align: right; font-size: 16px; margin-top: 5px; } .infobox-unit-calc-wrapper-row-2 .active { cursor: pointer; } .infobox-unit-calc-wrapper-row-2 .active:hover { background: #5e9c2c; } .infobox-unit-calc-wrapper-row-2 .not-active { cursor: not-allowed; background: #737373; } .infobox-unit-calc-wrapper-row-2 .passive { cursor: pointer; background: #737373; border: 1px solid #ffffff; width: 43px; height: 23px; line-height: 23px; } .infobox-unit-calc-wrapper-row-2 .passive:hover { background: #8b8a8a; } .infobox-unit-panel-calc { color: #9bbcd1; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .infobox-unit-panel-body { display: none; } @media only screen and (max-width: 720px) { .infobox-unit { float: none !important; margin: 0 auto 1.6rem auto !important; padding: 0 !important; } } .infobox-unit-extlink-list { position: absolute; margin-top: -100px; margin-left: -15px; padding: 15px 0; width: 100%; visibility: hidden; opacity: 0; z-index: -1; border-radius: 12px; box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78); transition: opacity 0.2s ease,box-shadow 0.2s ease; text-align: left; overflow: hidden; /* position: absolute;*/ /* margin-top: -400px;*/ /* padding: 15px 0;*/ /* width: 100%;*/ /* visibility: hidden;*/ /* opacity: 0;*/ /* z-index: -1;*/ /* background: white;*/ /*border-radius: 12px 12px 0 0;*/ /*-webkit-box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78);*/ /*-moz-box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78);*/ /* box-shadow: 0px -5px 10px -5px rgba(0,0,0,0.78);*/ /* transition: opacity 0.2s ease, box-shadow 0.2s ease;*/ /* text-align: left;*/ /* overflow: hidden;*/ /* Clip background icon */ } .infobox-unit-button:hover .infobox-extlink-list { opacity: 1; z-index: 10; visibility: visible; } .infobox-unit-button-bottom>span { display: block; border-radius: 0 0 12px 12px; padding: 10px 20px; } .infobox-unit-button-top>span { display: block; border-radius: 12px 12px 0 0; padding: 10px 20px; } .infobox-unit-button-common { background: #8e8677; color: #bbaf98; } .infobox-unit-button-uncommon { background: linear-gradient(to bottom right,#cac8c8 10%,#aba8a4 55%); color: #887676; } .infobox-unit-button-rare { background: linear-gradient(to bottom right,#4e9245 10%,#2c691e 65%); color: #65ab56; } .infobox-unit-button-ultrarare { background: linear-gradient(to bottom right,#149cfa 0%,#054490 55%); color: #57a0f9; } .infobox-unit-button-epic { background: linear-gradient(to bottom right,#644796 10%,#763886 65%); color: #b96fcc; } .infobox-unit-button-legendary { background: linear-gradient(to bottom right,#fed058 0%,#ec7c0d 55%); color: #ffc286; } .infobox-unit-button-mythic { background: linear-gradient(to bottom right,#55f3e1 0%,#359271 55%); color: #51f3b9; } .infobox-unit-button-divine { background: linear-gradient(to bottom right,#504c56 0%,#333222 55%); color: #777666; } .infobox-unit-button-godlike { background: linear-gradient(to bottom right,#ec1341 0%,#6b1526 55%); color: #a56572; } .infobox-unit-button-eternal { background: linear-gradient(to bottom right,#ee68dc 0%,#842c7b 55%); color: #ca5dbe; } .infobox-unit-button-galactic { background: linear-gradient(to bottom right,#effb3d 0%,#778d30 55%); color: #c8de81; } .infobox-unit-extlink-title { display: block; padding: 0 20px; margin: 5px 0; font-size: 1rem; } .infobox-unit-extlink-list ul { margin: 0 0 10px 0; padding: 0 10px; display: flex; flex-wrap: wrap; list-style: none; } .infobox-unit-extlink a { display: block; /* Override external link and file icons */ padding: 5px 10px !important; border-radius: 4px; background-image: none !important; transition: background 0.2s ease, color 0.2s ease; } .infobox-unit-extlink a:hover { background-color: #eaecf0 !important; } .infobox-unit-extlink a:active { background-color: #eaf3ff !important; } .infobox-unit-extlink-title:before { display: block; position: absolute; width: 120px; height: 120px; margin-top: 5px; right: 20px; opacity: .1; z-index: -1; background-repeat: no-repeat; background-position: top right; background-size: contain; } .infobox-unit-extlink-title-rsi:before { content: ""; /* TemplateStyles does not like internal link for some reason */ /*background-image: url(https://starcitizen.tools/images/4/40/RSItm.svg); */ } .infobox-unit-extlink-title-community:before { content: ""; /* TemplateStyles does not like internal link for some reason */ /*background-image: url(https://starcitizen.tools/images/3/3f/MadeByTheCommunity.svg); */ } .infobox-unit-button>span { filter: saturate(0.8); } .infobox-unit-extlink-list { background: #33363d; } .infobox-unit-extlink-title:before { filter: invert(1); } .infobox-unit-extlink a:hover { background-color: #2b2f36 !important; } .infobox-unit-description { font-family: BeaufortforLoL; font-size: 14px; color: #649ec0; font-style: italic; text-align: center; text-transform: initial; font-weight: normal; padding: 10px 0; }