Шаблон:Infobox/style.css: различия между версиями
Нет описания правки |
Нет описания правки |
||
(не показано 25 промежуточных версий этого же участника) | |||
Строка 7: | Строка 7: | ||
border-radius: 12px; | border-radius: 12px; | ||
z-index: 3 !important; | z-index: 3 !important; | ||
background: # | background: #081f2e !important; | ||
font-size: 0.875rem; | font-size: 0.875rem; | ||
text-align: left; | text-align: left; | ||
Строка 34: | Строка 34: | ||
.infobox-hero-data { | .infobox-hero-data { | ||
width: 100%; | width: 100%; | ||
color: #f1e6d0; | color: #f1e6d0; | ||
font-size: 13px; | font-size: 13px; | ||
Строка 96: | Строка 95: | ||
font-size: 26px; | font-size: 26px; | ||
color: #ffb257; | color: #ffb257; | ||
border-top: 1px solid # | border-top: 1px solid #314755; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
} | } | ||
Строка 142: | Строка 141: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
} | } | ||
Строка 149: | Строка 148: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
border-top: 1px solid # | border-top: 1px solid #314755; | ||
} | } | ||
.infobox-hero-feature:first-child { | .infobox-hero-feature:first-child { | ||
padding-top: | padding-top: 10px; | ||
} | } | ||
Строка 174: | Строка 173: | ||
font-weight: bold; | font-weight: bold; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | |||
.infobox-hero-feature-description { | |||
line-height: 1; | |||
} | } | ||
Строка 180: | Строка 183: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
} | } | ||
Строка 187: | Строка 190: | ||
text-transform: none; | text-transform: none; | ||
color: #eae7c1; | color: #eae7c1; | ||
padding: | padding: 10px 15px 0 15px; | ||
} | } | ||
Строка 200: | Строка 203: | ||
font-weight: bold; | font-weight: bold; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | |||
.infobox-hero-siege-description { | |||
line-height: 1; | |||
} | |||
.infobox-hero-jadogars { | |||
width: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
border-bottom: 1px solid #314755; | |||
} | |||
.infobox-hero-jadogar { | |||
font-weight: normal; | |||
text-transform: none; | |||
color: #eae7c1; | |||
padding: 10px 15px 0 15px; | |||
} | |||
.infobox-hero-jadogar:last-child { | |||
padding-bottom: 15px; | |||
} | |||
.infobox-hero-jadogar-name { | |||
display: block; | |||
font-size: 13px; | |||
color: #ffb257; | |||
font-weight: bold; | |||
text-transform: uppercase; | |||
} | |||
.infobox-hero-jadogar-description { | |||
line-height: 1; | |||
} | } | ||
Строка 206: | Строка 243: | ||
text-transform: none; | text-transform: none; | ||
color: #eae7c1; | color: #eae7c1; | ||
padding: 15px; | padding: 10px 15px 15px 15px; | ||
} | } | ||
Строка 213: | Строка 250: | ||
text-transform: none; | text-transform: none; | ||
color: #eae7c1; | color: #eae7c1; | ||
padding: 15px; | padding: 10px 15px 15px 15px; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
border-top: 1px solid #314755; | |||
} | } | ||
Строка 223: | Строка 261: | ||
font-weight: bold; | font-weight: bold; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | |||
.infobox-hero-dislike-description { | |||
line-height: 1; | |||
} | } | ||
Строка 231: | Строка 273: | ||
line-height: 1; | line-height: 1; | ||
font-size: 21px; | font-size: 21px; | ||
border-top: 1px solid # | border-top: 1px solid #314755; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
} | } | ||
Строка 550: | Строка 592: | ||
.infobox-hero-button>span { | .infobox-hero-button>span { | ||
filter: saturate(0.8); | filter: saturate(0.8); | ||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); | |||
} | } | ||
Строка 609: | Строка 652: | ||
margin-top: 0rem !important; | margin-top: 0rem !important; | ||
border-spacing: 0; | border-spacing: 0; | ||
border | border: 1px solid #314755; | ||
z-index: 3 !important; | z-index: 3 !important; | ||
background: # | background: #081f2e !important; | ||
font-size: 0.875rem; | font-size: 0.875rem; | ||
text-align: left; | text-align: left; | ||
Строка 618: | Строка 661: | ||
float: right; | float: right; | ||
margin-left: 1rem; | margin-left: 1rem; | ||
} | } | ||
.infobox-unit-data { | .infobox-unit-data { | ||
width: 100%; | width: 100%; | ||
color: #f1e6d0; | color: #f1e6d0; | ||
font-size: 13px; | font-size: 13px; | ||
Строка 693: | Строка 718: | ||
font-size: 26px; | font-size: 26px; | ||
color: #ffb257; | color: #ffb257; | ||
border-top: 1px solid # | border-top: 1px solid #314755; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
} | } | ||
Строка 739: | Строка 764: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
} | } | ||
Строка 746: | Строка 771: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
border-top: 1px solid #314755; | |||
border-top: 1px solid # | |||
} | } | ||
Строка 785: | Строка 809: | ||
color: #eae7c1; | color: #eae7c1; | ||
padding: 15px; | padding: 15px; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
} | } | ||
Строка 802: | Строка 826: | ||
line-height: 1; | line-height: 1; | ||
font-size: 21px; | font-size: 21px; | ||
border-top: 1px solid # | border-top: 1px solid #314755; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #314755; | ||
} | } | ||
Строка 946: | Строка 970: | ||
z-index: 10; | z-index: 10; | ||
visibility: visible; | visibility: visible; | ||
} | } | ||
Строка 1098: | Строка 1110: | ||
font-weight: normal; | font-weight: normal; | ||
padding: 10px; | padding: 10px; | ||
border-top: 1px solid #404e65; | |||
} | } | ||
#unit-level { | |||
width: 200px; | |||
width: | |||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
.infobox- | .infobox-hero-blockquote { | ||
font-family: Georgia; | |||
color: #19aede; | |||
font-size: 1.85rem; | |||
font-style: italic; | |||
padding: 2rem; | |||
} | } |
Текущая версия от 22:32, 30 декабря 2023
.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-jadogars { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #314755; } .infobox-hero-jadogar { font-weight: normal; text-transform: none; color: #eae7c1; padding: 10px 15px 0 15px; } .infobox-hero-jadogar:last-child { padding-bottom: 15px; } .infobox-hero-jadogar-name { display: block; font-size: 13px; color: #ffb257; font-weight: bold; text-transform: uppercase; } .infobox-hero-jadogar-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; }