.clubs-main .clubs-content { width: 100%; height: 100%; box-sizing: border-box; } .clubs-main .clubs { position: absolute; top: 64px; left: 0; bottom: 0; width: 1055px; } .clubs-main .clubs-content { padding-top: 79px; padding-left: 0; padding-right: 0; display: block; bottom: 0; position: relative; cursor: default; -webkit-user-select: none; } .clubs-main .clubs-content lol-uikit-tooltip { pointer-events: none; } .clubs-about .clubs-about-info .clubs-about-title, .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title { font-family: var(--font-display); } .clubs-about { font-family: var(--font-body); } .clubs-about .clubs-about-info .clubs-about-title, .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title { font-family: var(--font-display); } .clubs-about { font-family: var(--font-body); } .clubs-about, .clubs-about .clubs-about-info p .clubs-about-browser-link, .clubs-about .clubs-about-info .clubs-about-title, .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title { -webkit-user-select: none; } .clubs-about, .clubs-about .clubs-about-info p .clubs-about-browser-link, .clubs-about .clubs-about-info .clubs-about-title, .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clubs-about .clubs-about-info .clubs-about-title, .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title { text-transform: uppercase; } .clubs-about .clubs-about-info .clubs-about-title:lang(ko-kr), .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title:lang(ko-kr), .clubs-about .clubs-about-info .clubs-about-title:lang(ja-jp), .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title:lang(ja-jp), .clubs-about .clubs-about-info .clubs-about-title:lang(tr-tr), .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title:lang(tr-tr), .clubs-about .clubs-about-info .clubs-about-title:lang(el-gr), .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title:lang(el-gr), .clubs-about .clubs-about-info .clubs-about-title:lang(th-th), .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title:lang(th-th), .clubs-about .clubs-about-info .clubs-about-title:lang(zh-tw), .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title:lang(zh-tw) { text-transform: none; } .clubs-about .clubs-about-info .clubs-about-title { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clubs-about { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clubs-about .clubs-about-info p .clubs-about-browser-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .clubs-about .clubs-about-info p .clubs-about-browser-link:lang(ja-jp) { font-size: 13px; } .clubs-about .clubs-about-info p .clubs-about-browser-link { color: #0596aa; text-decoration: none; } .clubs-about .clubs-about-info p .clubs-about-browser-link:hover, .clubs-about .clubs-about-info p .clubs-about-browser-link.hover { color: #cdfafa; } .clubs-about .clubs-about-info p .clubs-about-browser-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-clubs/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .clubs-about .clubs-about-info p .clubs-about-browser-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .clubs-about .clubs-about-info p .clubs-about-browser-link:hover:after { background-color: #cdfafa; } .clubs-about { color: #a09b8c; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-content: center; padding-right: 47px; padding-left: 47px; padding-bottom: 30px; box-sizing: border-box; direction: ltr; } .clubs-about > { flex: 1 1 auto; } .clubs-about .clubs-about-info { padding-bottom: 15px; } .clubs-about .clubs-about-info p { padding-top: 0px; } .clubs-about .clubs-about-info p .clubs-about-browser-link { display: flex; align-items: center; cursor: pointer; } .clubs-about .clubs-about-info .clubs-about-title { width: 100%; } .clubs-about hr { display: block; height: 1px; border: 0; border-top: 1px solid rgba(255,255,255,0.25); margin: 1em 0; padding: 0; } .clubs-about .clubs-about-center { width: 100%; text-align: center; } .clubs-about .clubs-about-todo { width: 100%; display: flex; flex-direction: column; justify-content: space-between; } .clubs-about .clubs-about-todo .clubs-about-todo-item { flex: 1 1 auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-body { width: 235px; text-align: left ; line-height: 22px; align-self: flex-start; padding-bottom: 15px; } .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-todo-title { width: 235px; text-align: center; } .clubs-about .clubs-about-todo .clubs-about-todo-item .clubs-dimond-bullet { width: 235px; height: 15px; background-width: 15px; background-image: 15px; background-position: center; background-image: url(/fe/lol-clubs/icon_dimond_bullet.png); background-repeat: no-repeat; } .clubs-about .clubs-create-wrapper { width: 130px; padding-top: 30px; } .clubs-about .clubs-create-button { width: 130px; } .clubs-about .clubs-about-subheading { font-size: 12px; } .clubs-navigation .club-selector { vertical-align: top; margin-top: -10px; } .clubs-navigation .club-selector::shadow .ui-dropdown .ui-dropdown-current-content { color: #f0e6d2; } .clubs-navigation .club-selector::shadow .ui-dropdown .ui-dropdown-current:hover::after { -webkit-filter: brightness(2.2); } .clubs-navigation .club-selector.active::shadow .ui-dropdown { z-index: 1; } .clubs-myclub >.clubs-title > .club-name >.club-info, .clubs-myclub .clubs-invite-dropzone-tooltip { font-family: var(--font-body); } .clubs-myclub >.clubs-title > .club-name >.club-info, .clubs-myclub >.club-view >.roster-lists, .clubs-myclub .clubs-invite-dropzone-tooltip { -webkit-user-select: none; } .clubs-myclub >.club-view >.roster-lists { -webkit-user-drag: none; } .clubs-myclub >.clubs-title > .club-name >.club-info, .clubs-myclub .clubs-invite-dropzone-tooltip { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clubs-myclub >.clubs-title > .club-name >.club-info { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clubs-myclub >.clubs-title > .club-name >.club-info:lang(ja-jp) { font-size: 13px; } .clubs-myclub .clubs-invite-dropzone-tooltip { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .clubs-myclub .clubs-invite-dropzone-tooltip:lang(ja-jp) { font-size: 13px; } .clubs-myclub >.clubs-title > .club-name >.club-info, .clubs-myclub .clubs-invite-dropzone-tooltip { font-family: var(--font-body); } .clubs-myclub { display: block; width: 100%; height: 100%; box-sizing: border-box; direction: ltr; padding: 0 3.317535545023697% 0 0; } .clubs-myclub:lang(ar-ae) { padding: 0 0 0 3.317535545023697%; } .clubs-myclub.droppable-available .clubs-hr { visibility: hidden; } .clubs-myclub.droppable-available .club-view { -webkit-filter: blur(3px); } .clubs-myclub.droppable-available .clubs-lower-section .clubs-invite-dropzone { display: flex; } .clubs-myclub.droppable-available .clubs-lower-section .clubs-invite-dropzone-icon { margin: 5px; background-image: url(/fe/lol-clubs/drop-arrow.png); background-size: contain; background-position: center; background-repeat: no-repeat; width: 49px; height: 41px; animation: clubs-dropzone-drop-in 0.25s ease-out, clubs-dropzone-bounce 1s 0.5s ease-in-out infinite alternate; } .clubs-myclub.droppable-dropping .clubs-lower-section .clubs-invite-dropzone-icon { background-image: url(/fe/lol-clubs/drop-arrow-hover.png); } .clubs-myclub.droppable-dropping .clubs-lower-section .clubs-invite-dropzone-tooltip { color: #f0e6d2; } .clubs-myclub.droppable-dropping .clubs-lower-section .clubs-invite-dropzone { border-image-source: -webkit-linear-gradient(90deg, #f0e6d2 3%, #c89b3c 100%); } .clubs-myclub.droppable-dropping .clubs-lower-section .clubs-invite-dropzone::before { transform: scale(0.97, 0.95); opacity: 0.2; } .clubs-myclub >.clubs-lower-section .clubs-invite-dropzone { position: absolute; top: 136px; right: 35px; bottom: 35px; left: 34px; display: none; flex-direction: column; align-items: center; justify-content: center; border-image: -webkit-linear-gradient(90deg, #c8aa6e 3%, #785a28 100%); border-width: 2px; border-image-slice: 1; background: rgba(1,10,19,0.5); } .clubs-myclub >.clubs-lower-section .clubs-invite-dropzone::before { content: ''; position: absolute; top: 0; right: -1px; bottom: 0; left: 0; border-image: -webkit-linear-gradient(90deg, #f0e6d2 3%, #c89b3c 100%); border-width: 1px; border-image-slice: 1; opacity: 0; } .clubs-myclub >.clubs-title { position: relative; height: 50px; width: 100%; color: #fff; display: flex; flex-flow: row; align-items: center; border: 1px; box-sizing: border-box; direction: ltr; padding: 0 0 10px 3.317535545023697%; } .clubs-myclub >.clubs-title:lang(ar-ae) { padding: 0 3.317535545023697% 10px 0; } .clubs-myclub >.clubs-title > { flex: 1 1 auto; } .clubs-myclub >.clubs-title > lol-club-tag { flex: 1 0 auto; padding-left: 5px; margin-top: 0px; } .clubs-myclub >.clubs-title > .club-icon { flex: 1 0 auto; width: 38px; height: 32px; } .clubs-myclub >.clubs-title > .primary-club-icon { background-image: url(/fe/lol-clubs/icon_clubs_active_large.png); background-size: 32px 32px; background-repeat: no-repeat; } .clubs-myclub >.clubs-title > .non-active-club-icon { background-image: url(/fe/lol-clubs/icon_clubs_non_active_large.png); background-size: 32px 32px; background-repeat: no-repeat; } .clubs-myclub >.clubs-title > .club-lock { align-self: flex-start; width: 19px; height: 19px; margin: 10px 0 0 8px ; background-size: 19px 19px; background-repeat: no-repeat; } .clubs-myclub >.clubs-title > .club-tag-unlocked { background-image: url(/fe/lol-clubs/icon_clubs_unlock.png); cursor: pointer; } .clubs-myclub >.clubs-title > .club-tag-locked { background-image: url(/fe/lol-clubs/icon_clubs_lock.png); } .clubs-myclub >.clubs-title > .club-name { display: flex; flex-flow: column; vertical-align: top; text-align: left ; width: 100%; margin: -8px 10px 0 0 ; } .clubs-myclub >.clubs-title > .club-name >.club-dropdown { width: 550px; } .clubs-myclub >.clubs-title > .club-name >.club-info { color: #5b5a56; padding: 0 0 0 10px ; line-height: 0px; } .clubs-myclub >.clubs-title > .club-settings { align-self: flex-end; } .clubs-myclub >.clubs-hr { display: block; height: 1px; border: 0; border-top: 1px solid #252d35; margin: 0 0 0 3.317535545023697%; } .clubs-myclub >.clubs-hr:lang(ar-ae) { margin: 0 3.317535545023697% 0 0; } .clubs-myclub >.club-view { height: 486px; width: 100%; display: flex; padding-top: 22px; } .clubs-myclub >.club-view >.club-nav { display: inline-block; float: left; width: 201px; flex: 1 1 auto; } .clubs-myclub >.club-view >.roster-lists { height: 100%; padding-top: 1px; float: left; width: 100%; height: 100%; flex: 1 1 auto; } .clubs-myclub >.club-view >.club-home { display: block; float: left; padding-top: 1px; text-align: left ; width: 100%; flex: 1 1 auto; } .clubs-myclub .clubs-lower-section-fade-in { animation: clubsLowerSectionAnimation 1s; opacity: 1; } .clubs-myclub .clubs-invite-dropzone-tooltip { color: #c89b3c; white-space: nowrap; } @-moz-keyframes clubsLowerSectionAnimation { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes clubsLowerSectionAnimation { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes clubsLowerSectionAnimation { from { opacity: 0; } to { opacity: 1; } } @keyframes clubsLowerSectionAnimation { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes clubs-dropzone-drop-in { 0% { transform: translateY(-120px) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @-webkit-keyframes clubs-dropzone-drop-in { 0% { transform: translateY(-120px) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @-o-keyframes clubs-dropzone-drop-in { 0% { transform: translateY(-120px) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes clubs-dropzone-drop-in { 0% { transform: translateY(-120px) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @-moz-keyframes clubs-dropzone-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } @-webkit-keyframes clubs-dropzone-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } @-o-keyframes clubs-dropzone-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } @keyframes clubs-dropzone-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } .clubs-creation-progress { position: relative; display: flex; padding: 5px; color: #000; } .clubs-creation-progress .clubs-creation-content { display: flex; background-color: #acab60; border: 1px; border-style: solid; border-color: #8f8e50; } .clubs-creation-progress .clubs-progress-content { position: relative; padding: 10px; } .clubs-creation-progress .clubs-progress-action { position: relative; padding: 10px; } .clubs-myclub-settings { width: 12px; height: 12px; margin-left: 0 ; } .clubs-myclub-settings >.settings-button { cursor: pointer; height: 12px; width: 12px; background-image: url(/fe/lol-clubs/control-settings.png); background-size: contain; background-position: center; background-repeat: no-repeat; } .clubs-myclub-settings >.settings-button:hover { -webkit-filter: brightness(2); } .clubs-myclub-navigation { float: left; width: 201px; } .clubs-myclub-navigation lol-uikit-navigation-bar[type=tabbed] lol-uikit-navigation-item { padding: 0 0 0 35px ; transition: all 0.3s ease; width: calc(100% - 4px); height: 30px; padding-bottom: 4px; box-sizing: border-box; direction: ltr; } .clubs-myclub-navigation lol-uikit-navigation-bar[type=tabbed] lol-uikit-navigation-item::before { width: 4px; left: 0 ; right: auto ; background-image: linear-gradient(to bottom, #785a28, #785a28); } .clubs-myclub-navigation lol-uikit-navigation-bar[type=tabbed] lol-uikit-navigation-item[active] { padding: 0 0 0 39px ; } .clubs-myclub-navigation lol-uikit-navigation-bar[type=tabbed] lol-uikit-navigation-item:hover { background: #1e2328; } .clubs-myclub-home-motd .editor, .clubs-myclub-home-motd .title { font-family: var(--font-display); } .clubs-myclub-home-motd .text { font-family: var(--font-body); } .clubs-myclub-home-motd .editor, .clubs-myclub-home-motd .text, .clubs-myclub-home-motd .title { -webkit-user-select: none; } .clubs-myclub-home-motd .editor, .clubs-myclub-home-motd .text, .clubs-myclub-home-motd .title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clubs-myclub-home-motd .editor, .clubs-myclub-home-motd .title { text-transform: uppercase; } .clubs-myclub-home-motd .editor:lang(ko-kr), .clubs-myclub-home-motd .title:lang(ko-kr), .clubs-myclub-home-motd .editor:lang(ja-jp), .clubs-myclub-home-motd .title:lang(ja-jp), .clubs-myclub-home-motd .editor:lang(tr-tr), .clubs-myclub-home-motd .title:lang(tr-tr), .clubs-myclub-home-motd .editor:lang(el-gr), .clubs-myclub-home-motd .title:lang(el-gr), .clubs-myclub-home-motd .editor:lang(th-th), .clubs-myclub-home-motd .title:lang(th-th), .clubs-myclub-home-motd .editor:lang(zh-tw), .clubs-myclub-home-motd .title:lang(zh-tw) { text-transform: none; } .clubs-myclub-home-motd .editor { text-transform: none; } .clubs-myclub-home-motd .editor, .clubs-myclub-home-motd .title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clubs-myclub-home-motd .editor { letter-spacing: 0.0375em; } .clubs-myclub-home-motd .text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clubs-myclub-home-motd .editor-toggle-button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid; border-color: #c89b3c; display: flex; align-items: center; justify-content: center; cursor: pointer; background-size: 50%; background-color: #1e282d; background-image: url(/fe/lol-clubs/edit_icon.png); background-position: center; background-repeat: no-repeat; box-sizing: border-box; } .clubs-myclub-home-motd .editor-toggle-button[disabled] { opacity: 0.5; -webkit-filter: grayscale(100%) sepia(100%); cursor: default; pointer-events: none; } .clubs-myclub-home-motd .editor-toggle-button-container { display: inline-flex; height: 30px; padding-left: 5px; vertical-align: middle; } .clubs-myclub-home-motd .editor { padding: 8px 5px 9px 12px; height: 34px; width: 498px; margin-top: 3px; direction: ltr; } .clubs-myclub-home-motd .text { margin-top: 3px; max-width: 498px; direction: ltr; } .clubs-myclub-home-motd .title { height: 30px; padding-bottom: 40px; vertical-align: middle; box-sizing: border-box; direction: ltr; } .clubs-activity { margin: 0 0 0 100px; color: #fff; } .clubs-activity .updates { float: left; width: 500px; } .clubs-activity .online { float: right; width: 215px; } .clubs-activity .activity-history ul { list-style: none; list-style-position: inside; margin: 0; padding: 0; } .clubs-activity .activity-history ul a { color: #fff; } .clubs-search { color: #fff; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item, .clubs-roster-page .clubs-header > .clubs-header-container { font-family: var(--font-display); } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item, .clubs-roster-page .clubs-header > .clubs-header-container { -webkit-user-select: none; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item, .clubs-roster-page .clubs-header > .clubs-header-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item, .clubs-roster-page .clubs-header > .clubs-header-container { text-transform: uppercase; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item:lang(ko-kr), .clubs-roster-page .clubs-header > .clubs-header-container:lang(ko-kr), .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item:lang(ja-jp), .clubs-roster-page .clubs-header > .clubs-header-container:lang(ja-jp), .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item:lang(tr-tr), .clubs-roster-page .clubs-header > .clubs-header-container:lang(tr-tr), .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item:lang(el-gr), .clubs-roster-page .clubs-header > .clubs-header-container:lang(el-gr), .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item:lang(th-th), .clubs-roster-page .clubs-header > .clubs-header-container:lang(th-th), .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item:lang(zh-tw), .clubs-roster-page .clubs-header > .clubs-header-container:lang(zh-tw) { text-transform: none; } .clubs-roster-page .clubs-header > .clubs-header-container { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clubs-roster-page .clubs-header > .clubs-header-container:lang(ja-jp) { font-size: 13px; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: #cdbe91; -webkit-font-smoothing: subpixel-antialiased; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item.active { position: relative; color: #f0e6d2; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item:lang(ja-jp) { font-size: 13px; } .clubs-roster-page { height: 100%; width: 100%; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar { display: flex; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item { display: flex; position: relative; height: 100%; width: auto; cursor: pointer; padding-left: 12px; padding-right: 12px; text-align: left; line-height: 30px; vertical-align: middle; transition: 300ms color; direction: ltr; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item::before { height: 3px; top: auto; bottom: 0px; left: 0px; width: 100%; background-image: linear-gradient(to right, #c89b3c, #c89b3c); } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item[active] { color: #f0e6d2; cursor: default; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item[active]::before { opacity: 1; } .clubs-roster-page .roster-page-header .clubs-roster-nav-bar lol-uikit-navigation-item[disabled] { color: #1e2328; cursor: default; pointer-events: none; } .clubs-roster-page .clubs-header { position: relative; width: 100%; height: 30px; border: none; display: block; color: $color-palette_grey3; background-color: #1e2328; cursor: pointer; } .clubs-roster-page .clubs-header > .clubs-header-container { width: 807px; height: 100%; padding: 0 0 0 12px ; display: flex; flex-direction: row; align-items: center; vertical-align: middle; justify-content: space-between; direction: ltr; } .clubs-roster-page .clubs-header > .clubs-header-container > .clubs-header-item { box-sizing: border-box; flex: 25 25 0; display: inline; width: 100%; text-align: left ; padding: 0 0 0 15px ; } .clubs-roster-page .clubs-header > .clubs-header-container > .clubs-header-item:first-child { flex: 33 33 0; } .clubs-roster-page .clubs-header > .clubs-header-container > .clubs-header-item:nth-child(2) { width: 40px; flex: 1 1 auto; } .clubs-roster-page .clubs-header > .clubs-header-container > .clubs-header-item:nth-child(2):after { content: ''; padding-right: 0px; padding-left: 0px; } .clubs-roster-page .clubs-header > .clubs-header-container > .clubs-header-item:last-child { text-align: center; padding: 0 0 0 10px ; flex: 17 17 0; } .clubs-roster-page .clubs-header > .clubs-header-container > .clubs-header-item:last-child:after { content: ''; padding-right: 0px; padding-left: 0px; } .clubs-roster-page .clubs-header > .clubs-header-container > .down-sorted:after { content: '\25BC'; padding-right: 10px; padding-left: 10px; } .clubs-roster-page .clubs-header > .clubs-header-container > .up-sorted:after { content: '\25B2'; padding-right: 10px; padding-left: 10px; } .clubs-roster-page .clubs-roster-tb { position: relative; border-collapse: collapse; border: none; display: flex; padding: 0 0 0 0; width: 807px; height: 382px; padding-left: 12px; flex-direction: column; } .clubs-roster-page .clubs-roster-tb .clubs-roster-wrapper { position: relative; } .clubs-roster-page .member-roster-list { position: relative; display: block; box-sizing: border-box; overflow-x: hidden; -webkit-user-select: none; width: 807px; height: 382px; } .clubs-roster-management { position: relative; height: 16px; width: 16px; display: inline-block; } .clubs-roster-management.empty { display: none; } .clubs-roster-management > .clubs-roster-management-button { cursor: pointer; vertical-align: middle; height: 16px; width: 16px; background-image: url(/fe/lol-clubs/icon_options.png); background-size: contain; background-position: center; background-repeat: no-repeat; } .clubs-roster-management > .clubs-roster-management-button:hover { -webkit-filter: brightness(2); } .clubs-roster-member-row .clubs-roster-roster-item { font-family: var(--font-display); } .clubs-roster-member-row .clubs-roster-roster-item { -webkit-user-select: none; } .clubs-roster-member-row .clubs-roster-roster-item { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clubs-roster-member-row .clubs-roster-roster-item { text-transform: uppercase; } .clubs-roster-member-row .clubs-roster-roster-item:lang(ko-kr), .clubs-roster-member-row .clubs-roster-roster-item:lang(ja-jp), .clubs-roster-member-row .clubs-roster-roster-item:lang(tr-tr), .clubs-roster-member-row .clubs-roster-roster-item:lang(el-gr), .clubs-roster-member-row .clubs-roster-roster-item:lang(th-th), .clubs-roster-member-row .clubs-roster-roster-item:lang(zh-tw) { text-transform: none; } .clubs-roster-member-row .clubs-roster-roster-item { text-transform: none; } .clubs-roster-member-row .clubs-roster-roster-item { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clubs-roster-member-row .clubs-roster-roster-item { letter-spacing: 0.0375em; } .clubs-roster-member-row { background-image: url(/fe/lol-clubs/player_object_border_left.png); background-repeat: no-repeat; background-position: bottom left; position: relative; width: 100%; display: flex; flex-direction: row; height: 71px; flex: 1 1 0; align-items: center; justify-content: space-between; direction: ltr; } .clubs-roster-member-row .clubs-roster-roster-item { flex: 25 25 0; display: inline; box-sizing: border-box; vertical-align: middle; width: 100%; color: #a09b8c; padding: 0 0 8px 10px ; } .clubs-roster-member-row .clubs-roster-roster-item:first-child { width: 50px; padding: 0 0 8px 13px ; flex: 1 1 auto; } .clubs-roster-member-row .clubs-roster-roster-item:nth-child(2) { flex: 33 33 0; padding-left: 9px; padding: 0 0 8px 9px ; } .clubs-roster-member-row .clubs-roster-roster-item:last-child { text-align: center; flex: 17 17 0; padding: 0 0 2px 10px ; } .clubs-roster-member-row .clubs-roster-roster-item .club-executive-icon { background-repeat: no-repeat; background-size: 15px 15px; background-position-y: 2px; padding: 0 15px 17px 0; float: left ; margin: 0 0 0 -25px ; } .clubs-roster-member-row .clubs-roster-roster-item .officer-icon { background-image: url(/fe/lol-clubs/icon_officer_@2x.png); } .clubs-roster-member-row .clubs-roster-roster-item .owner-icon { background-image: url(/fe/lol-clubs/icon_captain_@2x.png); } .clubs-roster-member-row:before { content: ''; position: absolute; height: 5px; bottom: 0; left: 5px; right: 0; background-image: url(/fe/lol-clubs/player_object_border.png); background-repeat: repeat-x; background-position: bottom left; } .clubs-roster-member-row .social-avatar { box-sizing: border-box; display: inline; vertical-align: middle; width: 32px; height: 32px; } .clubs-roster-member-row .role-name { padding-left: 20px; } .club-dialog-root .club-tag-input, .club-dialog-root .club-dialog-header { font-family: var(--font-display); } .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { font-family: var(--font-body); } .club-dialog-root .club-tag-input, .club-dialog-root .club-dialog-header { font-family: var(--font-display); } .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { font-family: var(--font-body); } .club-dialog-root .club-tag-input, .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-header, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { -webkit-user-select: none; } .club-dialog-root .club-tag-input, .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-header, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .club-dialog-root .club-tag-input, .club-dialog-root .club-dialog-header { text-transform: uppercase; } .club-dialog-root .club-tag-input:lang(ko-kr), .club-dialog-root .club-dialog-header:lang(ko-kr), .club-dialog-root .club-tag-input:lang(ja-jp), .club-dialog-root .club-dialog-header:lang(ja-jp), .club-dialog-root .club-tag-input:lang(tr-tr), .club-dialog-root .club-dialog-header:lang(tr-tr), .club-dialog-root .club-tag-input:lang(el-gr), .club-dialog-root .club-dialog-header:lang(el-gr), .club-dialog-root .club-tag-input:lang(th-th), .club-dialog-root .club-dialog-header:lang(th-th), .club-dialog-root .club-tag-input:lang(zh-tw), .club-dialog-root .club-dialog-header:lang(zh-tw) { text-transform: none; } .club-dialog-root .club-tag-input { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .club-dialog-root .club-dialog-header { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .club-dialog-root .club-name-input:lang(ja-jp), .club-dialog-root .club-dialog-desc:lang(ja-jp), .club-dialog-root .club-dialog-error:lang(ja-jp) { font-size: 13px; } .club-dialog-root .club-tag-input, .club-dialog-root .club-dialog-header { font-family: var(--font-display); } .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { font-family: var(--font-body); } .club-dialog-root .club-tag-input, .club-dialog-root .club-dialog-header { font-family: var(--font-display); } .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { font-family: var(--font-body); } .club-dialog-root .club-tag-input, .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-header, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { -webkit-user-select: none; } .club-dialog-root .club-tag-input, .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-header, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .club-dialog-root .club-tag-input, .club-dialog-root .club-dialog-header { text-transform: uppercase; } .club-dialog-root .club-tag-input:lang(ko-kr), .club-dialog-root .club-dialog-header:lang(ko-kr), .club-dialog-root .club-tag-input:lang(ja-jp), .club-dialog-root .club-dialog-header:lang(ja-jp), .club-dialog-root .club-tag-input:lang(tr-tr), .club-dialog-root .club-dialog-header:lang(tr-tr), .club-dialog-root .club-tag-input:lang(el-gr), .club-dialog-root .club-dialog-header:lang(el-gr), .club-dialog-root .club-tag-input:lang(th-th), .club-dialog-root .club-dialog-header:lang(th-th), .club-dialog-root .club-tag-input:lang(zh-tw), .club-dialog-root .club-dialog-header:lang(zh-tw) { text-transform: none; } .club-dialog-root .club-tag-input { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .club-dialog-root .club-dialog-header { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .club-dialog-root .club-name-input, .club-dialog-root .club-dialog-desc, .club-dialog-root .club-dialog-error { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .club-dialog-root .club-name-input:lang(ja-jp), .club-dialog-root .club-dialog-desc:lang(ja-jp), .club-dialog-root .club-dialog-error:lang(ja-jp) { font-size: 13px; } .club-dialog-root { display: flex; flex-direction: column; height: 210px; width: 440px; -webkit-user-select: none; cursor: default; position: relative; text-align: left ; direction: ltr; } .club-dialog-root .club-dialog-body { margin: 14px; } .club-dialog-root .club-dialog-title-bar { display: flex; justify-content: space-between; align-items: center; height: 48px; border-bottom: 1px solid #1e282d; padding: 0 2px; margin: 0 12px; } .club-dialog-root .club-dialog-input { margin-bottom: 14px; } .club-dialog-root .club-tag-input { text-transform: none; width: 210px; height: 44px; font-size: 31px; margin-left: auto; margin-right: auto; text-align: center; color: #c8aa6e; } .club-dialog-root .club-dialog-error { color: #be1e37; margin-top: 6px; } .clubs-dropdown-menu { font-family: var(--font-body); } .clubs-dropdown-menu, .clubs-dropdown-menu .external-link { -webkit-user-select: none; } .clubs-dropdown-menu, .clubs-dropdown-menu .external-link { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clubs-dropdown-menu { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clubs-dropdown-menu .external-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .clubs-dropdown-menu .external-link:lang(ja-jp) { font-size: 13px; } .clubs-dropdown-menu .external-link { color: #0596aa; text-decoration: none; } .clubs-dropdown-menu .external-link:hover, .clubs-dropdown-menu .external-link.hover { color: #cdfafa; } .clubs-dropdown-menu .external-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-clubs/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .clubs-dropdown-menu .external-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .clubs-dropdown-menu .external-link:hover:after { background-color: #cdfafa; } .clubs-dropdown-menu { min-width: 160px; display: flex; justify-content: center; } .clubs-dropdown-menu .clubs-dropdown-item { cursor: pointer; background-repeat: no-repeat; background-position: bottom left; position: relative; width: 100%; display: flex; flex-direction: row; height: 35px; flex: 1 1 0; align-items: center; justify-content: flex-start; color: #cdbe91; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #1f2123; direction: ltr; } .clubs-dropdown-menu .clubs-dropdown-item .label { cursor: pointer; margin-left: 15px; margin-right: 15px; } .clubs-dropdown-menu .clubs-dropdown-item:hover { background: rgba(240,230,210,0.1); } .clubs-dropdown-menu .clubs-dropdown-item:hover .label { color: #f0e6d2; } .clubs-dropdown-menu .external-link { color: #0596aa; } .clubs-dropdown-menu .disabled { color: rgba(160,155,140,0.2); cursor: default; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .clubs-dropdown-menu .disabled:hover { background: none; } .clubs-dropdown-menu .disabled:hover .label { cursor: default; color: inherit; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .clubs-dropdown-menu .clubs-dropdown-item:last-child { border-bottom: none; }