Шаблон:Infobox/style.css: различия между версиями
Нет описания правки |
Нет описания правки |
||
Строка 1069: | Строка 1069: | ||
font-weight: normal; | font-weight: normal; | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
Версия от 06:36, 13 ноября 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: #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 #404e65; 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-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: 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; } #unit-skill2, #unit-skill3 { display: none; }