.inventory-controls-counter, .perks-body-content, .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .inventory-card-details, .inventory-card-preset, .inventory-card-updated, .inventory-card-title, .inventory-card-choose-your-runes, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { font-family: var(--font-display); } .inventory-search, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_summary_description, .perks-style-filter-tooltip { font-family: var(--font-body); } .inventory-search, .page-name, .primary-style-selector .primary-style-selector-title, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-title, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .inventory-card-updated, .inventory-card-title, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_name, .style_summary, .style_summary_description, .perks-style-filter-tooltip { -webkit-user-select: none; } .inventory-search, .page-name, .primary-style-selector .primary-style-selector-title, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-title, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .inventory-card-updated, .inventory-card-title, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_name, .style_summary, .style_summary_description, .perks-style-filter-tooltip { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .inventory-card-updated, .inventory-card-title, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { text-transform: uppercase; } .page-name:lang(ko-kr), .primary-style-selector .primary-style-selector-title:lang(ko-kr), .primary-perk-selector .perk-selector-title:lang(ko-kr), .primary-perk-selector .perk-selector-title.keystone:lang(ko-kr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ko-kr), .splashed-style-selector .splashed-style-selector-title:lang(ko-kr), .style-option-tooltip .level-locked-header:lang(ko-kr), .style-option-tooltip .tooltip-header:lang(ko-kr), .keystone-icon-tooltip .level-locked-header:lang(ko-kr), .keystone-icon-tooltip .tooltip-header:lang(ko-kr), .inventory-card-updated:lang(ko-kr), .inventory-card-title:lang(ko-kr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ko-kr), .perks-tooltip .level-locked-header:lang(ko-kr), .perks-tooltip .tooltip-header:lang(ko-kr), .style_name:lang(ko-kr), .style_summary:lang(ko-kr), .page-name:lang(ja-jp), .primary-style-selector .primary-style-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title.keystone:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ja-jp), .splashed-style-selector .splashed-style-selector-title:lang(ja-jp), .style-option-tooltip .level-locked-header:lang(ja-jp), .style-option-tooltip .tooltip-header:lang(ja-jp), .keystone-icon-tooltip .level-locked-header:lang(ja-jp), .keystone-icon-tooltip .tooltip-header:lang(ja-jp), .inventory-card-updated:lang(ja-jp), .inventory-card-title:lang(ja-jp), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ja-jp), .perks-tooltip .level-locked-header:lang(ja-jp), .perks-tooltip .tooltip-header:lang(ja-jp), .style_name:lang(ja-jp), .style_summary:lang(ja-jp), .page-name:lang(tr-tr), .primary-style-selector .primary-style-selector-title:lang(tr-tr), .primary-perk-selector .perk-selector-title:lang(tr-tr), .primary-perk-selector .perk-selector-title.keystone:lang(tr-tr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(tr-tr), .splashed-style-selector .splashed-style-selector-title:lang(tr-tr), .style-option-tooltip .level-locked-header:lang(tr-tr), .style-option-tooltip .tooltip-header:lang(tr-tr), .keystone-icon-tooltip .level-locked-header:lang(tr-tr), .keystone-icon-tooltip .tooltip-header:lang(tr-tr), .inventory-card-updated:lang(tr-tr), .inventory-card-title:lang(tr-tr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(tr-tr), .perks-tooltip .level-locked-header:lang(tr-tr), .perks-tooltip .tooltip-header:lang(tr-tr), .style_name:lang(tr-tr), .style_summary:lang(tr-tr), .page-name:lang(el-gr), .primary-style-selector .primary-style-selector-title:lang(el-gr), .primary-perk-selector .perk-selector-title:lang(el-gr), .primary-perk-selector .perk-selector-title.keystone:lang(el-gr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(el-gr), .splashed-style-selector .splashed-style-selector-title:lang(el-gr), .style-option-tooltip .level-locked-header:lang(el-gr), .style-option-tooltip .tooltip-header:lang(el-gr), .keystone-icon-tooltip .level-locked-header:lang(el-gr), .keystone-icon-tooltip .tooltip-header:lang(el-gr), .inventory-card-updated:lang(el-gr), .inventory-card-title:lang(el-gr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(el-gr), .perks-tooltip .level-locked-header:lang(el-gr), .perks-tooltip .tooltip-header:lang(el-gr), .style_name:lang(el-gr), .style_summary:lang(el-gr), .page-name:lang(th-th), .primary-style-selector .primary-style-selector-title:lang(th-th), .primary-perk-selector .perk-selector-title:lang(th-th), .primary-perk-selector .perk-selector-title.keystone:lang(th-th), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(th-th), .splashed-style-selector .splashed-style-selector-title:lang(th-th), .style-option-tooltip .level-locked-header:lang(th-th), .style-option-tooltip .tooltip-header:lang(th-th), .keystone-icon-tooltip .level-locked-header:lang(th-th), .keystone-icon-tooltip .tooltip-header:lang(th-th), .inventory-card-updated:lang(th-th), .inventory-card-title:lang(th-th), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(th-th), .perks-tooltip .level-locked-header:lang(th-th), .perks-tooltip .tooltip-header:lang(th-th), .style_name:lang(th-th), .style_summary:lang(th-th), .page-name:lang(zh-tw), .primary-style-selector .primary-style-selector-title:lang(zh-tw), .primary-perk-selector .perk-selector-title:lang(zh-tw), .primary-perk-selector .perk-selector-title.keystone:lang(zh-tw), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(zh-tw), .splashed-style-selector .splashed-style-selector-title:lang(zh-tw), .style-option-tooltip .level-locked-header:lang(zh-tw), .style-option-tooltip .tooltip-header:lang(zh-tw), .keystone-icon-tooltip .level-locked-header:lang(zh-tw), .keystone-icon-tooltip .tooltip-header:lang(zh-tw), .inventory-card-updated:lang(zh-tw), .inventory-card-title:lang(zh-tw), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(zh-tw), .perks-tooltip .level-locked-header:lang(zh-tw), .perks-tooltip .tooltip-header:lang(zh-tw), .style_name:lang(zh-tw), .style_summary:lang(zh-tw) { text-transform: none; } .page-name, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .page-name:lang(ar-ae), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ar-ae) { letter-spacing: 0; } .primary-perk-selector .perk-selector-title.keystone, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-header, .perks-tooltip .tooltip-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .primary-perk-selector .perk-selector-title.keystone:lang(ar-ae), .style-option-tooltip .tooltip-header:lang(ar-ae), .keystone-icon-tooltip .tooltip-header:lang(ar-ae), .perks-tooltip .tooltip-header:lang(ar-ae) { letter-spacing: 0; } .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .keystone-icon-tooltip .level-locked-header, .inventory-card-updated, .inventory-card-title, .perks-tooltip .level-locked-header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .primary-style-selector .primary-style-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ja-jp), .splashed-style-selector .splashed-style-selector-title:lang(ja-jp), .style-option-tooltip .level-locked-header:lang(ja-jp), .keystone-icon-tooltip .level-locked-header:lang(ja-jp), .inventory-card-updated:lang(ja-jp), .inventory-card-title:lang(ja-jp), .perks-tooltip .level-locked-header:lang(ja-jp) { font-size: 13px; } .primary-style-selector .primary-style-selector-title:lang(ar-ae), .primary-perk-selector .perk-selector-title:lang(ar-ae), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ar-ae), .splashed-style-selector .splashed-style-selector-title:lang(ar-ae), .style-option-tooltip .level-locked-header:lang(ar-ae), .keystone-icon-tooltip .level-locked-header:lang(ar-ae), .inventory-card-updated:lang(ar-ae), .inventory-card-title:lang(ar-ae), .perks-tooltip .level-locked-header:lang(ar-ae) { letter-spacing: 0; } .inventory-search, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .perks-style-filter-tooltip { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .inventory-search:lang(ja-jp), .primary-style-selector .primary-style-selector-description:lang(ja-jp), .primary-perk-selector .perk-selector-description:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-description:lang(ja-jp), .splashed-style-selector .splashed-style-selector-description:lang(ja-jp), .style-option-tooltip .tooltip-description:lang(ja-jp), .style-option-tooltip .requirement:lang(ja-jp), .keystone-icon-tooltip .tooltip-description:lang(ja-jp), .keystone-icon-tooltip .requirement:lang(ja-jp), .perks-tooltip .tooltip-description:lang(ja-jp), .perks-tooltip .requirement:lang(ja-jp), .perks-style-filter-tooltip:lang(ja-jp) { font-size: 13px; } .inventory-search:lang(ar-ae), .primary-style-selector .primary-style-selector-description:lang(ar-ae), .primary-perk-selector .perk-selector-description:lang(ar-ae), .splashed-selected-perk-icon .splashed-selected-perk-icon-description:lang(ar-ae), .splashed-style-selector .splashed-style-selector-description:lang(ar-ae), .style-option-tooltip .tooltip-description:lang(ar-ae), .style-option-tooltip .requirement:lang(ar-ae), .keystone-icon-tooltip .tooltip-description:lang(ar-ae), .keystone-icon-tooltip .requirement:lang(ar-ae), .perks-tooltip .tooltip-description:lang(ar-ae), .perks-tooltip .requirement:lang(ar-ae), .perks-style-filter-tooltip:lang(ar-ae) { letter-spacing: 0; } .inventory-cards::-webkit-scrollbar, .inventory-cards ::-webkit-scrollbar { width: 11px; height: 11px; background-color: transparent; } .inventory-cards::-webkit-scrollbar-thumb, .inventory-cards ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; min-height: 32px; background-color: #785a28; } .inventory-cards::-webkit-scrollbar-thumb:hover, .inventory-cards ::-webkit-scrollbar-thumb:hover { background-color: #c8aa6e; } .inventory-cards::-webkit-scrollbar-thumb:active, .inventory-cards ::-webkit-scrollbar-thumb:active { background-color: #463714; } .inventory-cards::-webkit-scrollbar-thumb:disabled, .inventory-cards ::-webkit-scrollbar-thumb:disabled { background-color: #a09b8c; } .inventory-controls { align-items: center; border-bottom: thin solid rgba(255,255,255,0.25); display: flex; height: 40px; justify-content: space-between; padding: 0 28px 31px 0 ; direction: ltr; } .inventory-controls-left { align-items: center; display: flex; } .inventory-controls-right { align-items: center; display: flex; } #inventory-create-new-button { display: block; } .inventory-controls-counter { color: #cdbe91; font-size: 16px; font-weight: bold; letter-spacing: 1px; margin: 0 20px 0 0 ; } .inventory-controls-counter-divider { font-size: 14px; opacity: 0.2; padding: 0 6px; } .inventory-search-holder { position: relative; } .inventory-controls-preset-toggle { border-left: thin solid rgba(205,190,145,0.2); margin-left: 17px; padding: 4px 0 4px 17px; } .inventory-controls-preset-toggle:lang(ar-ae) { border-left: none; border-right: thin solid rgba(205,190,145,0.2); margin-left: 0; margin-right: 17px; padding: 4px 17px 4px 0; } .inventory-search { background: none; border: thin solid #695625; box-sizing: border-box; outline: none; padding: 6px 10px 6px 30px ; width: 196px; } .inventory-magnifier { border: 2px solid #a09b8c; border-radius: 50%; box-sizing: border-box; height: 10px; left: 9px ; right: auto ; position: absolute; top: 9px; width: 10px; } .inventory-magnifier:after { background: #a09b8c; content: ''; display: block; height: 5px; left: 50%; position: absolute; top: 50%; transform: translate(-1px, 4px) rotate(-45deg); transform-origin: 50% -4px; width: 2px; } .perks-tutorial-tooltip-new-page { width: 170px; } .perks-tutorial-tooltip-preset-pages { width: 250px; } .inventory-add-page-button-border, .inventory-mass-delete-button-border { --border-width: 2px; bottom: -7px; left: -20px; position: absolute; right: -20px; top: -7px; } .inventory-mass-delete-button { display: block; margin: 0 0 0 10px ; } .primary-style-selector .primary-style-selector-text, .primary-perk-selector .perk-selector-text.drawer-closed, .splashed-selected-perk-icon .splashed-selected-perk-icon-text, .splashed-style-selector .splashed-style-selector-text { opacity: 1; transform: translateX(0); transition: opacity 0.3s ease, transform 0.3s ease; } .primary-style-selector .primary-style-selector-text.hide, .primary-perk-selector .perk-selector-text.drawer-open, .splashed-selected-perk-icon .splashed-selected-perk-icon-text.hidden, .splashed-style-selector .splashed-style-selector-text.hide { opacity: 0; transform: translateX(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .primary-style-selector .primary-style-selector-left, .primary-perk-selector .primary-perk-selector-left, .splashed-selected-perk-icon .splashed-selected-perk-icon-left, .splashed-style-selector .splashed-style-selector-left { align-items: center; display: flex; flex-grow: 0; flex-shrink: 0; justify-content: center; width: 107px; margin-left: -30px ; margin-right: 0 ; } .primary-style-selector .primary-style-selector-right, .primary-perk-selector .primary-perk-selector-right, .splashed-selected-perk-icon .splashed-selected-perk-icon-right, .splashed-style-selector .splashed-style-selector-right { flex-grow: 1; position: relative; } .primary-style-selector .primary-style-selector-text, .primary-perk-selector .perk-selector-text, .splashed-selected-perk-icon .splashed-selected-perk-icon-text, .splashed-style-selector .splashed-style-selector-text { height: 88px; position: relative; top: calc((88px - 47px) / 2 - 3px); } .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title { margin-bottom: 3px; } .primary-style-selector .primary-style-selector-title, .splashed-style-selector .splashed-style-selector-title { font-size: 18px; line-height: 22px; letter-spacing: 0.05em; transition: color 0.2s; margin-top: 13px; } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .primary-style-selector .primary-style-selector-description a:link, .primary-perk-selector .perk-selector-description a:link, .splashed-selected-perk-icon .splashed-selected-perk-icon-description a:link, .splashed-style-selector .splashed-style-selector-description a:link, .primary-style-selector .primary-style-selector-description a:not(:link), .primary-perk-selector .perk-selector-description a:not(:link), .splashed-selected-perk-icon .splashed-selected-perk-icon-description a:not(:link), .splashed-style-selector .splashed-style-selector-description a:not(:link) { font-weight: bold; color: #fff; cursor: default; } .style-option-tooltip, .keystone-icon-tooltip, .perks-tooltip { box-sizing: border-box; width: 280px; padding: 0; direction: ltr; } .style-option-tooltip .level-locked-header, .keystone-icon-tooltip .level-locked-header, .perks-tooltip .level-locked-header { color: #a09b8c; padding: 5px 15px; background: #1e2328; } .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-header, .perks-tooltip .tooltip-header { display: flex; justify-content: space-between; padding: 12px 15px 10px; } .style-option-tooltip .tooltip-header .points, .keystone-icon-tooltip .tooltip-header .points, .perks-tooltip .tooltip-header .points { color: #a09b8c; } .style-option-tooltip .tooltip-description, .keystone-icon-tooltip .tooltip-description, .perks-tooltip .tooltip-description { margin: 0; padding: 0 15px 15px; } .style-option-tooltip .tooltip-description a:link, .keystone-icon-tooltip .tooltip-description a:link, .perks-tooltip .tooltip-description a:link, .style-option-tooltip .tooltip-description a:not(:link), .keystone-icon-tooltip .tooltip-description a:not(:link), .perks-tooltip .tooltip-description a:not(:link) { font-weight: bold; color: #f00; cursor: default; } .style-option-tooltip .tooltip-description .tooltip-description-line, .keystone-icon-tooltip .tooltip-description .tooltip-description-line, .perks-tooltip .tooltip-description .tooltip-description-line { margin: 10px 0 0 0; } .style-option-tooltip .tooltip-description .tooltip-description-line:first-child, .keystone-icon-tooltip .tooltip-description .tooltip-description-line:first-child, .perks-tooltip .tooltip-description .tooltip-description-line:first-child { margin-top: 0; } .style-option-tooltip .requirement, .keystone-icon-tooltip .requirement, .perks-tooltip .requirement { color: #be1e37; } @-moz-keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @-webkit-keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @-o-keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @keyframes perks-item-description-fade-in { from { opacity: 0; transform: translateX(10px); visibility: hidden; } to { opacity: 1; transform: translateX(0); visibility: visible; } } @-moz-keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } @-webkit-keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } @-o-keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } @keyframes perks-item-description-fade-out { from { opacity: 1; transform: translateX(0); visibility: visible; } to { opacity: 0; transform: translateX(10px); visibility: hidden; } } .style_picker { height: 635px; width: 1055px; position: relative; } .style_picker_columns { height: 100%; display: flex; } .perks-tutorial-tooltip-style-picker { width: 250px; } lol-uikit-flat-checkbox.longDescriptions { position: absolute; bottom: 0px; left: 29px; } .perks-body-content, .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .inventory-card-details, .inventory-card-preset, .inventory-card-updated, .inventory-card-title, .inventory-card-choose-your-runes, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { font-family: var(--font-display); } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_summary_description, .perks-style-filter-tooltip { font-family: var(--font-body); } .perks-body-content, .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .inventory-card-details, .inventory-card-preset, .inventory-card-updated, .inventory-card-title, .inventory-card-choose-your-runes, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { font-family: var(--font-display); } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_summary_description, .perks-style-filter-tooltip { font-family: var(--font-body); } .page-name, .primary-style-selector .primary-style-selector-title, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-title, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .inventory-card-updated, .inventory-card-title, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_name, .style_summary, .style_summary_description, .perks-style-filter-tooltip { -webkit-user-select: none; } .page-name, .primary-style-selector .primary-style-selector-title, .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-title, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .inventory-card-updated, .inventory-card-title, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_name, .style_summary, .style_summary_description, .perks-style-filter-tooltip { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .inventory-card-updated, .inventory-card-title, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { text-transform: uppercase; } .page-name:lang(ko-kr), .primary-style-selector .primary-style-selector-title:lang(ko-kr), .primary-perk-selector .perk-selector-title:lang(ko-kr), .primary-perk-selector .perk-selector-title.keystone:lang(ko-kr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ko-kr), .splashed-style-selector .splashed-style-selector-title:lang(ko-kr), .style-option-tooltip .level-locked-header:lang(ko-kr), .style-option-tooltip .tooltip-header:lang(ko-kr), .keystone-icon-tooltip .level-locked-header:lang(ko-kr), .keystone-icon-tooltip .tooltip-header:lang(ko-kr), .inventory-card-updated:lang(ko-kr), .inventory-card-title:lang(ko-kr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ko-kr), .perks-tooltip .level-locked-header:lang(ko-kr), .perks-tooltip .tooltip-header:lang(ko-kr), .style_name:lang(ko-kr), .style_summary:lang(ko-kr), .page-name:lang(ja-jp), .primary-style-selector .primary-style-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title.keystone:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ja-jp), .splashed-style-selector .splashed-style-selector-title:lang(ja-jp), .style-option-tooltip .level-locked-header:lang(ja-jp), .style-option-tooltip .tooltip-header:lang(ja-jp), .keystone-icon-tooltip .level-locked-header:lang(ja-jp), .keystone-icon-tooltip .tooltip-header:lang(ja-jp), .inventory-card-updated:lang(ja-jp), .inventory-card-title:lang(ja-jp), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ja-jp), .perks-tooltip .level-locked-header:lang(ja-jp), .perks-tooltip .tooltip-header:lang(ja-jp), .style_name:lang(ja-jp), .style_summary:lang(ja-jp), .page-name:lang(tr-tr), .primary-style-selector .primary-style-selector-title:lang(tr-tr), .primary-perk-selector .perk-selector-title:lang(tr-tr), .primary-perk-selector .perk-selector-title.keystone:lang(tr-tr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(tr-tr), .splashed-style-selector .splashed-style-selector-title:lang(tr-tr), .style-option-tooltip .level-locked-header:lang(tr-tr), .style-option-tooltip .tooltip-header:lang(tr-tr), .keystone-icon-tooltip .level-locked-header:lang(tr-tr), .keystone-icon-tooltip .tooltip-header:lang(tr-tr), .inventory-card-updated:lang(tr-tr), .inventory-card-title:lang(tr-tr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(tr-tr), .perks-tooltip .level-locked-header:lang(tr-tr), .perks-tooltip .tooltip-header:lang(tr-tr), .style_name:lang(tr-tr), .style_summary:lang(tr-tr), .page-name:lang(el-gr), .primary-style-selector .primary-style-selector-title:lang(el-gr), .primary-perk-selector .perk-selector-title:lang(el-gr), .primary-perk-selector .perk-selector-title.keystone:lang(el-gr), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(el-gr), .splashed-style-selector .splashed-style-selector-title:lang(el-gr), .style-option-tooltip .level-locked-header:lang(el-gr), .style-option-tooltip .tooltip-header:lang(el-gr), .keystone-icon-tooltip .level-locked-header:lang(el-gr), .keystone-icon-tooltip .tooltip-header:lang(el-gr), .inventory-card-updated:lang(el-gr), .inventory-card-title:lang(el-gr), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(el-gr), .perks-tooltip .level-locked-header:lang(el-gr), .perks-tooltip .tooltip-header:lang(el-gr), .style_name:lang(el-gr), .style_summary:lang(el-gr), .page-name:lang(th-th), .primary-style-selector .primary-style-selector-title:lang(th-th), .primary-perk-selector .perk-selector-title:lang(th-th), .primary-perk-selector .perk-selector-title.keystone:lang(th-th), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(th-th), .splashed-style-selector .splashed-style-selector-title:lang(th-th), .style-option-tooltip .level-locked-header:lang(th-th), .style-option-tooltip .tooltip-header:lang(th-th), .keystone-icon-tooltip .level-locked-header:lang(th-th), .keystone-icon-tooltip .tooltip-header:lang(th-th), .inventory-card-updated:lang(th-th), .inventory-card-title:lang(th-th), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(th-th), .perks-tooltip .level-locked-header:lang(th-th), .perks-tooltip .tooltip-header:lang(th-th), .style_name:lang(th-th), .style_summary:lang(th-th), .page-name:lang(zh-tw), .primary-style-selector .primary-style-selector-title:lang(zh-tw), .primary-perk-selector .perk-selector-title:lang(zh-tw), .primary-perk-selector .perk-selector-title.keystone:lang(zh-tw), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(zh-tw), .splashed-style-selector .splashed-style-selector-title:lang(zh-tw), .style-option-tooltip .level-locked-header:lang(zh-tw), .style-option-tooltip .tooltip-header:lang(zh-tw), .keystone-icon-tooltip .level-locked-header:lang(zh-tw), .keystone-icon-tooltip .tooltip-header:lang(zh-tw), .inventory-card-updated:lang(zh-tw), .inventory-card-title:lang(zh-tw), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(zh-tw), .perks-tooltip .level-locked-header:lang(zh-tw), .perks-tooltip .tooltip-header:lang(zh-tw), .style_name:lang(zh-tw), .style_summary:lang(zh-tw) { text-transform: none; } .page-name, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .page-name:lang(ar-ae), #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text:lang(ar-ae) { letter-spacing: 0; } .primary-perk-selector .perk-selector-title.keystone, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .tooltip-header, .perks-tooltip .tooltip-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .primary-perk-selector .perk-selector-title.keystone:lang(ar-ae), .style-option-tooltip .tooltip-header:lang(ar-ae), .keystone-icon-tooltip .tooltip-header:lang(ar-ae), .perks-tooltip .tooltip-header:lang(ar-ae) { letter-spacing: 0; } .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .keystone-icon-tooltip .level-locked-header, .inventory-card-updated, .inventory-card-title, .perks-tooltip .level-locked-header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .primary-style-selector .primary-style-selector-title:lang(ja-jp), .primary-perk-selector .perk-selector-title:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ja-jp), .splashed-style-selector .splashed-style-selector-title:lang(ja-jp), .style-option-tooltip .level-locked-header:lang(ja-jp), .keystone-icon-tooltip .level-locked-header:lang(ja-jp), .inventory-card-updated:lang(ja-jp), .inventory-card-title:lang(ja-jp), .perks-tooltip .level-locked-header:lang(ja-jp) { font-size: 13px; } .primary-style-selector .primary-style-selector-title:lang(ar-ae), .primary-perk-selector .perk-selector-title:lang(ar-ae), .splashed-selected-perk-icon .splashed-selected-perk-icon-title:lang(ar-ae), .splashed-style-selector .splashed-style-selector-title:lang(ar-ae), .style-option-tooltip .level-locked-header:lang(ar-ae), .keystone-icon-tooltip .level-locked-header:lang(ar-ae), .inventory-card-updated:lang(ar-ae), .inventory-card-title:lang(ar-ae), .perks-tooltip .level-locked-header:lang(ar-ae) { letter-spacing: 0; } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .perks-style-filter-tooltip { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .primary-style-selector .primary-style-selector-description:lang(ja-jp), .primary-perk-selector .perk-selector-description:lang(ja-jp), .splashed-selected-perk-icon .splashed-selected-perk-icon-description:lang(ja-jp), .splashed-style-selector .splashed-style-selector-description:lang(ja-jp), .style-option-tooltip .tooltip-description:lang(ja-jp), .style-option-tooltip .requirement:lang(ja-jp), .keystone-icon-tooltip .tooltip-description:lang(ja-jp), .keystone-icon-tooltip .requirement:lang(ja-jp), .perks-tooltip .tooltip-description:lang(ja-jp), .perks-tooltip .requirement:lang(ja-jp), .perks-style-filter-tooltip:lang(ja-jp) { font-size: 13px; } .primary-style-selector .primary-style-selector-description:lang(ar-ae), .primary-perk-selector .perk-selector-description:lang(ar-ae), .splashed-selected-perk-icon .splashed-selected-perk-icon-description:lang(ar-ae), .splashed-style-selector .splashed-style-selector-description:lang(ar-ae), .style-option-tooltip .tooltip-description:lang(ar-ae), .style-option-tooltip .requirement:lang(ar-ae), .keystone-icon-tooltip .tooltip-description:lang(ar-ae), .keystone-icon-tooltip .requirement:lang(ar-ae), .perks-tooltip .tooltip-description:lang(ar-ae), .perks-tooltip .requirement:lang(ar-ae), .perks-style-filter-tooltip:lang(ar-ae) { letter-spacing: 0; } .perks-body-content, .page-name, .primary-style-selector .primary-style-selector-title, .primary-perk-selector .perk-selector-title, .primary-perk-selector .perk-selector-title.keystone, .splashed-selected-perk-icon .splashed-selected-perk-icon-title, .splashed-style-selector .splashed-style-selector-title, .style-option-tooltip .level-locked-header, .style-option-tooltip .tooltip-header, .keystone-icon-tooltip .level-locked-header, .keystone-icon-tooltip .tooltip-header, .inventory-card-details, .inventory-card-preset, .inventory-card-updated, .inventory-card-title, .inventory-card-choose-your-runes, #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text, .perks-tooltip .level-locked-header, .perks-tooltip .tooltip-header, .style_name, .style_summary { font-family: var(--font-display); } .primary-style-selector .primary-style-selector-description, .primary-perk-selector .perk-selector-description, .splashed-selected-perk-icon .splashed-selected-perk-icon-description, .splashed-style-selector .splashed-style-selector-description, .style-option-tooltip .tooltip-description, .style-option-tooltip .requirement, .keystone-icon-tooltip .tooltip-description, .keystone-icon-tooltip .requirement, .perks-tooltip .tooltip-description, .perks-tooltip .requirement, .style_summary_description, .perks-style-filter-tooltip { font-family: var(--font-body); } .perks-panel { height: 100%; overflow: hidden; } .perks-panel.hidden { display: none; } .perks-body { /* These values must a fixed width/height (not percentages) * in order for the champ-select modal popup to be properly * sized. */ height: 635px; width: 1055px; position: relative; } .perks-body-content { max-width: 1200px; margin: 0 auto; padding: 28px 0 0 35px; position: relative; display: flex; -webkit-user-select: none; height: 100%; box-sizing: border-box; z-index: 0; } .perks-background-video { position: absolute; top: -81px; } .perks-construct-minspec { left: -1px; top: -80px; } .style-background-videos-enabled .perks-construct-minspec { background-image: none !important; } .perks-body-column { width: 275px; flex-shrink: 0; } .perks-body-column+ .perks-body-column { margin-left: 50px; } .perks-body-column:first-child .perks-body-column-top { flex-direction: row ; } .perks-body-column-top { height: 40px; display: flex; align-items: center; direction: ltr; } .perks-pages-dropdown-holder { position: relative; } .perks-dropdown-input { position: relative; margin-left: 3px; direction: ltr; } .page-name { text-transform: none; padding: 8px 5px 9px 12px ; height: 32px; margin-top: 0; } .perk-primary-style { box-sizing: border-box; height: 100%; width: 200px; position: relative; padding-left: 10px; } .perks-body-choices-holder { position: relative; direction: ltr; } .perks-progress-bar { position: absolute; top: calc(131px * 0.5); left: calc(47px * 0.5); } .perks-progress-bar:lang(ar-ae) { left: auto; right: calc(47px * 0.5); } .stat-mod-perks-progress-bar { position: absolute; bottom: 18px; left: calc(47px * 0.5 - 6px); --row-height: 44px; --row-height-0: 44px; --row-height-1: 44px; --y-offset: 0; } .stat-mod-perks-progress-bar:lang(ar-ae) { left: auto; right: calc(47px * 0.5 - 6px); } .perks-tutorial-tooltip-primary-path, .perks-tutorial-tooltip-secondary-path, .perks-tutorial-tooltip-stat-mods { width: 250px; } .perks-edit-btn { margin-right: 7px ; } .perks-delete-page-button { margin: 0 0 0 10px ; } .add-page { margin: 0 0 0 10px ; } .add-page.block { display: block; } .perks-settings { position: absolute; left: 35px; bottom: 27px; display: flex; align-items: center; } .perks-grid-mode-buttons { display: flex; line-height: 0; margin-right: 26px; transition: opacity 0.2s; } .perks-grid-mode-buttons:not(:hover) { opacity: 0.7; } .perks-grid-mode-label { cursor: pointer; display: block; } .perks-grid-mode-label+ .perks-grid-mode-label { margin-left: -1px; } .perks-grid-mode-label+ .perks-grid-mode-label .perks-grid-mode-icon { border-left-color: #585342; } .perks-grid-mode-input { display: none; } .perks-grid-mode-input:checked+ .perks-grid-mode-icon { border-color: #585342; } .perks-grid-mode-input:not(:checked)+ .perks-grid-mode-path { opacity: 0.5; } .perks-grid-mode-icon { border: thin solid #010a13; fill: #f0e6d2; padding: 5px; transition: border-color 0.2s; } .perks-grid-mode-path { transition: opacity 0.2s; } .primary-style-selector { display: flex; height: 131px; width: 275px; } .primary-style-selector .primary-style-selector-title.domination { color: #d44242; } .primary-style-selector .primary-style-selector-title.inspiration { color: #49aab9; } .primary-style-selector .primary-style-selector-title.precision { color: #aea789; } .primary-style-selector .primary-style-selector-title.resolve { color: #a1d586; } .primary-style-selector .primary-style-selector-title.sorcery { color: #9faafc; } .primary-perk-selector { display: flex; position: relative; height: 107px; } .primary-perk-selector+ .primary-perk-selector { height: 88px; } .primary-perk-selector.keystone.domination { --middle-color: #dc4747; } .primary-perk-selector.keystone.inspiration { --middle-color: #48b4be; } .primary-perk-selector.keystone.precision { --middle-color: #c8aa6e; } .primary-perk-selector.keystone.resolve { --middle-color: #a4d08d; } .primary-perk-selector.keystone.sorcery { --middle-color: #6c75f5; } .primary-perk-selector.keystone:before, .primary-perk-selector.keystone:after { background: linear-gradient(to right, transparent 0%, var(--middle-color) 50%, transparent 100%); content: ''; display: block; height: 9px; left: -15px; margin: 0; position: absolute; width: 286px; -webkit-mask-image: url("/fe/lol-perks/images/primary-perk-selector/keystone-border.svg"); transform: none ; } .primary-perk-selector.keystone:before { top: -5px; } .primary-perk-selector.keystone:after { bottom: -5px; transform: scaleY(-1) ; } .primary-perk-selector .primary-perk-selector-keystone { font-size: 10px; letter-spacing: 0.15em; position: absolute; text-transform: uppercase; top: -19px; } .primary-perk-selector .primary-perk-selector-keystone.domination { color: #dc4747; } .primary-perk-selector .primary-perk-selector-keystone.inspiration { color: #48b4be; } .primary-perk-selector .primary-perk-selector-keystone.precision { color: #c8aa6e; } .primary-perk-selector .primary-perk-selector-keystone.resolve { color: #a4d08d; } .primary-perk-selector .primary-perk-selector-keystone.sorcery { color: #6c75f5; } .primary-perk-selector .perk-selector-text.keystone { top: calc((107px - 62px) / 2 - 4px); } .primary-perk-selector .perk-selector-title.domination { color: #d44242; } .primary-perk-selector .perk-selector-title.inspiration { color: #49aab9; } .primary-perk-selector .perk-selector-title.precision { color: #aea789; } .primary-perk-selector .perk-selector-title.resolve { color: #a1d586; } .primary-perk-selector .perk-selector-title.sorcery { color: #9faafc; } .primary-selected-perk-icon.keystone { --diameter: 62px; } .splashed-perks-selector { position: relative; margin-bottom: 22px; } .splashed-perks-selector .splashed-perk-selector-hider { position: absolute; top: -17px; left: 77px ; right: auto ; width: 198px; } .splashed-perks-selector .splashed-perk-selector-hider.gridmode { top: -15px; } .splashed-perks-selector .splashed-perk-selector-drawer { height: 78px; position: relative; } .splashed-selected-perk-icon { height: 88px; display: flex; } .splashed-selected-perk-icon:first-child { height: 107px; } .splashed-selected-perk-icon:first-child lol-perks-perk-icon-button.splashed-selected-perk-icon-button { top: -5px; } .splashed-selected-perk-icon:first-child .splashed-selected-perk-icon-text { top: 21px; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.domination { color: #d44242; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.inspiration { color: #49aab9; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.precision { color: #aea789; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.resolve { color: #a1d586; } .splashed-selected-perk-icon .splashed-selected-perk-icon-title.sorcery { color: #9faafc; } .splashed_perk_option { --diameter: 38px; } .splashed-perk-option-glowing-dot { position: absolute; right: -9px; top: -9px; } .splashed-style-selector { display: flex; height: 131px; position: relative; } .splashed-style-selector .splashed-style-selector-title.domination { color: #d44242; } .splashed-style-selector .splashed-style-selector-title.inspiration { color: #49aab9; } .splashed-style-selector .splashed-style-selector-title.precision { color: #aea789; } .splashed-style-selector .splashed-style-selector-title.resolve { color: #a1d586; } .splashed-style-selector .splashed-style-selector-title.sorcery { color: #9faafc; } .stat-mod-perk-selector { height: 44px; } .stat-mod-perk-selector+ .stat-mod-perk-selector { height: 44px; } .stat-mod-perk-selector lol-perks-perk-icon-button { --diameter: 28px; --scale-when-open: 1; } .stat-mod-perk-selector .perk-selector-text { top: 4px; } .stat-mod-perk-selector .perk-selector-text .perk-selector-description { white-space: nowrap; } .style-keystones { position: relative; } .style-keystones .right-icon { margin-left: 6px; } .perk-option-glowing-dot { position: absolute; right: -9px; top: -9px; } .keystone_icon { display: inline-block; position: relative; } .thumb_keystone { border-radius: 50%; width: 90px; height: 90px; cursor: pointer; } .thumb_keystone_placeholder { display: inline-block; width: 90px; height: 90px; } .keystone-icon-glowing-dot { position: absolute; right: 0; top: 0; } .inventory-card { background-color: #000; cursor: pointer; height: 277px; position: relative; width: 176px; } .inventory-card.invalid .inventory-card-content { -webkit-filter: grayscale(100%); } .inventory-card.invalid .inventory-card-bg { -webkit-filter: grayscale(100%); opacity: 0.8; } .inventory-card:not(:hover) .inventory-card-details { opacity: 0; } .inventory-card:not(:hover) .inventory-card-bg { transform: scale(1.02); -webkit-clip-path: polygon(1% 1%, 99% 1%, 99% 99%, 1% 99%); } .inventory-card:not(:hover) .inventory-card-bg:lang(ar-ae) { transform: scale(1.02) scaleX(-1); } .inventory-card:not(:hover) .inventory-card-preset { opacity: 0.7; } .inventory-card:hover .inventory-card-bg { opacity: 0.2; } .inventory-card:hover .inventory-card-icons:after { width: 100%; } .inventory-card:hover .inventory-card-preset { color: #cdbe91; } .inventory-card-invalid { background-color: rgba(0,0,0,0.4); border: 2px solid #ff2345; border-radius: 50%; box-shadow: 0 0 38px rgba(255,35,69,0.5) inset, 0 0 38px rgba(255,35,69,0.5); box-sizing: border-box; content: ''; height: 80px; left: calc(50% - 80px * 0.5); position: absolute; top: calc(47% - 80px * 0.5); width: 80px; } .inventory-card-invalid:after { background-color: #ff2345; content: ''; height: 24px; left: calc(50% - 26px * 0.5); position: absolute; top: calc(50% - 30px * 0.5); width: 26px; -webkit-mask-image: url("/fe/lol-perks/images/exclamation.svg"); -webkit-mask-repeat: no-repeat; } .inventory-card-content { box-sizing: border-box; color: #aaa; cursor: pointer; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; } .inventory-card-bg-mask { height: 100%; position: absolute; width: 100%; } .inventory-card-bg { background-position: center center; background-size: cover; height: 100%; position: absolute; transition: opacity 0.2s, transform 0.2s, -webkit-clip-path 0.2s; width: 100%; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: none ; } .inventory-card-gradient { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.05) 32%, rgba(0,0,0,0.26) 48%, rgba(0,0,0,0.81) 81%, rgba(0,0,0,0.94) 92%, #000 100%); height: 100%; position: absolute; width: 100%; } .inventory-card-details { border: thin solid; border-image: linear-gradient(to bottom, #fff, #c8aa6e) 1 100%; border-image-slice: 1; box-sizing: border-box; font-size: 10px; height: 100%; line-height: 13px; padding: 14px; position: absolute; text-transform: uppercase; top: 0; transition: opacity 0.2s; width: 100%; letter-spacing: 0.3pt; } .inventory-card-style-name.precision { color: #c8aa6e; } .inventory-card-style-name.domination { color: #dc4747; } .inventory-card-style-name.sorcery { color: #6c75f5; } .inventory-card-style-name.inspiration { color: #48b4be; } .inventory-card-style-name.resolve { color: #a4d08d; } .inventory-card-ul { padding: 0 0 0 15px ; list-style-type: none; } .inventory-card-li { padding-bottom: 1px; } .inventory-card-li:before { content: "\25C6"; margin: 0 5px 0 -15px ; display: inline-block; } .inventory-card-li.keystone:before { transform: scale(1.5); } .inventory-card-preset { font-size: 10px; letter-spacing: 0.1em; padding: 0 14px; position: relative; text-transform: uppercase; transition: color 0.2s, opacity 0.2s; } .inventory-card-dot { margin-right: 5px; } .inventory-card-updated { color: #c89b3c; line-height: 13px; margin-bottom: 8px; padding: 0 14px; position: relative; } .inventory-card-title { -webkit-font-feature-settings: normal; line-height: 13px; margin-bottom: 12px; overflow: hidden; padding: 0 14px; position: relative; text-overflow: ellipsis; } .inventory-card-title:lang(ar-ae) { padding: 0 14px 3px; } .inventory-card-icons { align-items: center; border-top: thin solid rgba(255,255,255,0.25); display: flex; height: 48px; margin-left: 14px; position: relative; } .inventory-card-icons:lang(ar-ae) { margin-left: 0; margin-right: 14px; } .inventory-card-icons:after { border-top: thin solid rgba(200,170,110,0.4); content: ''; display: block; height: 1px; position: absolute; right: 0; top: -1px; transition: width 0.2s; width: 0; } .inventory-card-keystone { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; height: 45.5px; width: 45.5px; margin: -9.75px; margin-right: 0.25px; } .inventory-card-keystone:lang(ar-ae) { margin: -9.75px; margin-left: 0.25px; } .inventory-card-substyle { border: thin solid rgba(255,255,255,0.2); border-radius: 50%; box-sizing: border-box; height: 26px; width: 26px; } .inventory-card-substyle-inner { height: 100%; opacity: 0.8; transition: background-color 0.2s; -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 70%; } .inventory-card-substyle-inner.domination { background-color: #d44242; -webkit-mask-image: url("/fe/lol-perks/images/Domination/domination_icon_16.svg"); } .inventory-card-substyle-inner.inspiration { background-color: #49aab9; -webkit-mask-image: url("/fe/lol-perks/images/Inspiration/inspiration_icon_16.svg"); } .inventory-card-substyle-inner.precision { background-color: #aea789; -webkit-mask-image: url("/fe/lol-perks/images/Precision/precision_icon_16.svg"); } .inventory-card-substyle-inner.resolve { background-color: #a1d586; -webkit-mask-image: url("/fe/lol-perks/images/Resolve/resolve_icon_16.svg"); } .inventory-card-substyle-inner.sorcery { background-color: #9faafc; -webkit-mask-image: url("/fe/lol-perks/images/Sorcery/sorcery_icon_16.svg"); } .inventory-card-default { border: 5px solid rgba(0,0,0,0.5); box-sizing: border-box; content: ''; height: calc(100% + 1px * 2); left: -1px; position: absolute; top: -1px; width: calc(100% + 1px * 2); } .inventory-card-default:before { border: 16px solid transparent; border-right-color: rgba(0,0,0,0.5); border-top-color: rgba(0,0,0,0.5); content: ''; position: absolute; right: 0; top: 0; } .inventory-card-default:lang(ar-ae):before { right: auto; left: 0; border: 16px solid transparent; border-left-color: rgba(0,0,0,0.5); border-top-color: rgba(0,0,0,0.5); } .inventory-card-default:after { background: linear-gradient(to bottom, #dfe5e5 0%, #adb2b2 100%); content: ''; height: 30px; position: absolute; right: -2px ; left: auto ; top: -2px; width: 30px; -webkit-mask-image: url("/fe/lol-perks/images/runes.svg"); -webkit-mask-position: 100% 0 ; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 18px; } .inventory-card-choose-your-runes { align-self: flex-start; font-size: 10px; padding: 5px 14px 5px 0; } .inventory-card-choose-your-runes:lang(ar-ae) { padding: 5px 0 5px 14px; } .inventory-card-create-border { --border-color: #cdbe91; bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .inventory-cards { margin-left: -14px; max-height: 467px; overflow-y: auto; padding-top: 40px; direction: ltr; } .inventory-card-wrapper { display: inline-block; margin: 0 14px 28px; position: relative; vertical-align: top; direction: ltr; float: none ; } .inventory-cards-delete { position: absolute; right: 0 ; left: auto ; top: 0; transform: translate(50%, -50%) ; } .perks-panel-perks-pages-dropdown { z-index: 1 ; width: 300px; position: relative; } #perks-panel-page-dropdown { display: flex; --flat-dropdown-scrollable-max-height: 410px; --flat-dropdown-current-content-text-transform: uppercase; } .lol-perks-panel-profile-container #perks-panel-page-dropdown { top: 106px; left: 0; } #perks-panel-page-dropdown .perks-pages-dropdown-add { padding: 0 0 0 22px ; margin: 0 0 0 -4px ; } .perks-icon-add-page { position: absolute; right: 10px ; left: auto ; top: 20px; width: 12px; height: 12px; } .perks-icon-add-page:before { content: ''; width: 10px; height: 2px; background: #cdbe91; position: absolute; } .perks-icon-add-page:after { content: ''; width: 10px; height: 2px; background: #cdbe91; position: absolute; -webkit-transform: rotate(90deg); } .perks-icon-add-page.disabled:before, .perks-icon-add-page.disabled:after { background: #5c5b57; } .pages-dropdown-option { display: block; } .page-mark-container, #perks-panel-page-dropdown .page-mark-container { display: inline-block; width: 22px; margin: 0 0 0 -6px ; vertical-align: middle; } .page-mark-container .exclamation-mark, #perks-panel-page-dropdown .page-mark-container .exclamation-mark { display: none; background: #e62142; -webkit-mask-image: url("/fe/lol-perks/images/exclamation.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 14px 14px; vertical-align: middle; height: 28px; } .page-mark-container lol-perks-glowing-dot, #perks-panel-page-dropdown .page-mark-container lol-perks-glowing-dot { display: none; margin: auto; } .page-mark-container.invalid .exclamation-mark, #perks-panel-page-dropdown .page-mark-container.invalid .exclamation-mark, .page-mark-container.auto-modified lol-perks-glowing-dot, #perks-panel-page-dropdown .page-mark-container.auto-modified lol-perks-glowing-dot { display: block; } #perks-panel-page-dropdown .perks-pages-dropdown-option-text { display: inline-block; max-width: 186px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #perks-panel-page-dropdown .ui-dropdown-current-content .perks-pages-dropdown-option-text { max-width: 230px; vertical-align: middle; line-height: 28px; text-transform: none; } .perks-pages-dropdown-option-tooltip { display: inline-block; white-space: nowrap; } .perks-tooltip.short-width { width: 200px; } .style_name, .style_summary { font-weight: 400; } .style_picker_column[disabled]:hover { -webkit-filter: grayscale(100%); } .style_picker_column { flex-basis: 100%; display: block; font-family: 'LoL Body'; color: #fff; box-shadow: 0 0 0 1px rgba(1,10,19,0.85); text-align: center; cursor: pointer; position: relative; -webkit-filter: saturate(0); transition: -webkit-filter 0.25s ease-out 0.15s; } .style_picker_column:hover { -webkit-filter: none; } .style_picker_column:hover .style_background { opacity: 0.7; } .style_picker_column:hover .style_background.style_video { opacity: 1; } .style_picker_column:hover .style_logo { opacity: 1; -webkit-filter: grayscale(0%); } .style_picker_column:hover .style_vfx { opacity: 1; } .style_picker_column:hover.domination .style_logo_ring { -webkit-filter: hue-rotate(0deg) grayscale(0%); } .style_picker_column:hover.domination .style_name { color: #d44242; } .style_picker_column:hover.inspiration .style_logo_ring { -webkit-filter: hue-rotate(245deg) grayscale(0%); } .style_picker_column:hover.inspiration .style_name { color: #49aab9; } .style_picker_column:hover.precision .style_logo_ring { -webkit-filter: hue-rotate(65deg) grayscale(0%); } .style_picker_column:hover.precision .style_name { color: #aea789; } .style_picker_column:hover.resolve .style_logo_ring { -webkit-filter: hue-rotate(165deg) grayscale(0%); } .style_picker_column:hover.resolve .style_name { color: #a1d586; } .style_picker_column:hover.sorcery .style_logo_ring { -webkit-filter: hue-rotate(285deg) grayscale(0%); } .style_picker_column:hover.sorcery .style_name { color: #9faafc; } .style_picker_column:hover .description_text { opacity: 1; } .style_background { height: 639px; width: 211px; position: absolute; opacity: 0; top: 0; left: 0; } .style_video { transition: opacity 0.1s ease-out 0.05s; top: -30px; } .style_video.precision { -webkit-filter: hue-rotate(145deg); } .style_video.domination { -webkit-filter: hue-rotate(88deg); } .style_video.resolve { -webkit-filter: hue-rotate(245deg); } .style_video.inspiration { -webkit-filter: hue-rotate(297deg); } .background_lines { background-image: url("/fe/lol-perks/images/style-picker-column/lines.png"); transition: opacity 0.1s ease-out 0.05s; } .background_glow { transition: opacity 0.25s ease-out 0.15s; } .domination .background_glow { background-image: url("/fe/lol-perks/images/Domination/glow-d.png"); } .inspiration .background_glow { background-image: url("/fe/lol-perks/images/Inspiration/glow-i.png"); } .precision .background_glow { background-image: url("/fe/lol-perks/images/Precision/glow-p.png"); } .resolve .background_glow { background-image: url("/fe/lol-perks/images/Resolve/glow-r.png"); } .sorcery .background_glow { background-image: url("/fe/lol-perks/images/Sorcery/glow-s.png"); } .style_content { width: 211px; position: absolute; } .style_logo_lockup { position: relative; height: 246px; margin: 30px 0 56px; } .style_logo_ring { content: url("/fe/lol-perks/images/style-picker-column/ring.png"); position: absolute; top: 0; left: 0; transition: -webkit-filter 0.15s ease-out; } .domination .style_logo_ring { -webkit-filter: hue-rotate(0deg) grayscale(100%); } .inspiration .style_logo_ring { -webkit-filter: hue-rotate(245deg) grayscale(100%); } .precision .style_logo_ring { -webkit-filter: hue-rotate(65deg) grayscale(100%); } .resolve .style_logo_ring { -webkit-filter: hue-rotate(165deg) grayscale(100%); } .sorcery .style_logo_ring { -webkit-filter: hue-rotate(285deg) grayscale(100%); } .style_logo { opacity: 0.7; -webkit-filter: grayscale(100%); transition: -webkit-filter 0.15s ease-out; } .style_logo.icon_precision { content: url("/fe/lol-perks/images/Precision/icon-p.png"); } .style_logo.icon_domination { content: url("/fe/lol-perks/images/Domination/icon-d.png"); } .style_logo.icon_sorcery { content: url("/fe/lol-perks/images/Sorcery/icon-s.png"); } .style_logo.icon_inspiration { content: url("/fe/lol-perks/images/Inspiration/icon-i.png"); } .style_logo.icon_resolve { content: url("/fe/lol-perks/images/Resolve/icon-r.png"); } .style_vfx { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.25s ease-out; } .domination .style_vfx { content: url("/fe/lol-perks/images/Domination/vfx-d.png"); } .inspiration .style_vfx { content: url("/fe/lol-perks/images/Inspiration/vfx-i.png"); } .precision .style_vfx { content: url("/fe/lol-perks/images/Precision/vfx-p.png"); } .resolve .style_vfx { content: url("/fe/lol-perks/images/Resolve/vfx-r.png"); } .sorcery .style_vfx { content: url("/fe/lol-perks/images/Sorcery/vfx-s.png"); } .style_header { width: 211px; position: absolute; bottom: 10px; direction: ltr; } .style_name { color: #727271; font-size: 16px; letter-spacing: 0.15em ; line-height: 19.2px; margin-bottom: 4px; transition: color 0.15s ease-out; } .style_summary { color: #ddd; font-size: 10px; letter-spacing: 0.075em; line-height: 14px; } .description_text { opacity: 0.2; transition: opacity 0.15s ease-out; } .style_summary_description { color: #ddd; font-size: 11px; font-weight: 400; letter-spacing: 0.05em; line-height: 14px; margin: 22px; direction: ltr; } .locked_style_keystones { width: 100%; height: 162px; background-image: url("/fe/lol-perks/images/style-picker-column/lock_diamond.png"); background-position: center center; background-repeat: no-repeat; background-size: 40%; } .locked_style_footer { border-top: 2px solid rgba(91,90,86,0.8); height: 60px; margin: 49px 64px 0; position: relative; } .locked_style_footer:after { background: #000; border: 2px solid rgba(91,90,86,0.8); content: ''; height: 9px; left: 50%; position: absolute; transform: translate(-50%, calc(-50% - 2px * 0.5)) rotate(45deg); width: 9px; } .perks-style-filter { --selectedX: 0; display: flex; margin: 0 0 0 10px ; } .perks-style-filter> lol-perks-style-filter-checkbox:first-child { position: relative; } .perks-style-filter> lol-perks-style-filter-checkbox:first-child:after { background: #c89b3c; bottom: -30px; content: ''; height: 3px; left: 0; position: absolute; transition: transform 0.2s; transform: translateX(var(--selectedX)); width: 100%; } .perks-style-filter-tooltip { min-width: 50px; padding: 7px 10px; text-align: center; } .system-tooltip-hide { display: none; } .perk-icon-button { --diameter: 38px; } .ember-application-factory.PerksPanel.ember-application, .ember-application-factory.PerksPanel.ember-application > .application_view, .ember-application-factory.PerksPanel.ember-application > .application_view > .fake_application_view { height: 100%; } /** * Generic styles * * - makes it easy to add classes during development through the Elements inspector * - makes it easier to read a template file and understand how the elements * are alid out without having to go and read each individual CSS class * - it reduces the need to create artificial, highly specific and long class names, ex: * .section_title, * .section_title_wrapper, * .section_tittle_wrapper_gutter * * .results_list * .results_list_item_wrapper * .results_list_item_content * */ .PerksPanel a { text-decoration: none; }