.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: #081f2e !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%;
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 #314755;
border-bottom: 1px solid #314755;
}
.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 #314755;
}
.infobox-hero-features2 {
width: 100%;
display: flex;
flex-direction: column;
border-bottom: 1px solid #314755;
border-top: 1px solid #314755;
}
.infobox-hero-feature:first-child {
padding-top: 10px;
}
.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-feature-description {
line-height: 1;
}
.infobox-hero-sieges {
width: 100%;
display: flex;
flex-direction: column;
border-bottom: 1px solid #314755;
}
.infobox-hero-siege {
font-weight: normal;
text-transform: none;
color: #eae7c1;
padding: 10px 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-siege-description {
line-height: 1;
}
.infobox-hero-dislike {
font-weight: normal;
text-transform: none;
color: #eae7c1;
padding: 10px 15px 15px 15px;
}
.infobox-hero-dislike2 {
font-weight: normal;
text-transform: none;
color: #eae7c1;
padding: 10px 15px 15px 15px;
border-bottom: 1px solid #314755;
border-top: 1px solid #314755;
}
.infobox-hero-dislike-name {
display: block;
font-size: 13px;
color: #ffb257;
font-weight: bold;
text-transform: uppercase;
}
.infobox-hero-dislike-description {
line-height: 1;
}
.infobox-hero-calc {
font-family: BeaufortforLoL;
text-align: center;
padding: 10px 0;
line-height: 1;
font-size: 21px;
border-top: 1px solid #314755;
border-bottom: 1px solid #314755;
}
.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);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.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: #ffffff;
background-color: #0f2c45;
padding: 10px 0;
text-align: center;
text-transform: initial;
font-weight: normal;
}
.item-min-cost {
font-weight: bold;
}
.item-min-cost span {
color: #efde22;
}
.item-deposit {
font-weight: bold;
}
.item-deposit span {
color: #efde22;
}
.infobox-unit {
width: 350px;
font-family: BeaufortforLoL;
font-weight: 700;
margin-top: 0rem !important;
border-spacing: 0;
border: 1px solid #314755;
z-index: 3 !important;
background: #081f2e !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-data {
width: 100%;
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 #314755;
border-bottom: 1px solid #314755;
}
.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 #314755;
}
.infobox-unit-features2 {
width: 100%;
display: flex;
flex-direction: column;
border-top: 1px solid #314755;
}
.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 #314755;
}
.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 #314755;
border-bottom: 1px solid #314755;
}
.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: column !important;
width: 100%;
font-size: 14px;
}
.infobox-unit-calc-level-header {
margin: 10px 0;
}
.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-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;
border-top: 1px solid #404e65;
}
#unit-level {
width: 200px;
margin: 0 auto;
}
.infobox-hero-blockquote {
font-family: Georgia;
color: #19aede;
font-size: 1.85rem;
font-style: italic;
padding: 2rem;
}