lol-highlights-default-layout { direction: ltr; display: flex; } lol-highlights-default-layout > div { display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: stretch; padding: 30px; } lol-highlights-default-layout > div p { line-height: 2; } lol-highlights-default-layout > div > lol-uikit-content-block { display: flex; flex-flow: column nowrap; justify-content: flex-start; flex: 0 0 auto; text-align: center; } lol-highlights-default-layout > div > lol-uikit-content-block > h2 { margin-left: 25%; margin-right: 25%; } .lol-highlights-default-layout-subsections-container { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; flex: 0 0 auto; } .lol-highlights-default-layout-subsections-container > * { margin: 10px; } .lol-highlights-default-layout-subsection { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; text-align: left ; flex: 1; } .lol-highlights-default-layout-subsection > * { margin-top: 10px; } .lol-highlights-default-layout-subsection lol-uikit-content-block > p { word-wrap: break-word; } .lol-highlights-default-layout-subsection-heading { text-align: center; } .lol-highlights-default-layout-inline-images, .lol-highlights-default-layout-warning-img { display: inline; width: 20px; height: 20px; vertical-align: -20%; } .lol-highlights-default-layout-warning-img { width: 15px; height: 15px; } .lol-highlights-default-layout-steps-number { font-style: italic; color: #cdbe91; } .lol-highlights-default-layout-warning-text { color: #c89b3c; } lol-highlights-delete-button > .lol-highlights-delete-button-inner { background-size: contain; background-image: url(/fe/lol-highlights/btn_highlights_delete.png); height: 30px; width: 30px; cursor: pointer; } lol-highlights-delete-button > .lol-highlights-delete-button-inner:hover { background-image: url(/fe/lol-highlights/btn_highlights_delete_hover.png); } lol-highlights-delete-button > .lol-highlights-delete-button-inner:active { background-image: url(/fe/lol-highlights/btn_highlights_delete_click.png); } lol-highlights-delete-button > .lol-highlights-delete-button-inner.is-disabled { background-image: url(/fe/lol-highlights/btn_highlights_delete_disabled.png); } .lol-highlights-edit-button, .lol-highlights-edit-button:hover, .lol-highlights-edit-button:active { background-size: contain; background-image: url(/fe/lol-highlights/icon-edit.png); height: 20px; width: 20px; cursor: pointer; } .lol-highlights-edit-button:hover { background-image: url(/fe/lol-highlights/icon-edit-hover.png); } .lol-highlights-edit-button:active { background-image: url(/fe/lol-highlights/icon-edit-click.png); } .lol-highlights-list-item-inner { position: relative; display: flex; border-left: 5px solid transparent; height: 50px; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 10px; cursor: pointer; } .lol-highlights-list-item-inner::after { position: absolute; content: url(/fe/lol-highlights/list_item_separator.png); height: 3px; width: 80%; left: -5px; top: 60px; bottom: 60px; } .lol-highlights-list-item-inner.is-selected { border-left: 5px solid #765926; position: relative; } .lol-highlights-list-item-inner.is-selected::before, .lol-highlights-list-item-inner.is-selected::after { content: ""; background-image: linear-gradient(to right, #765926, transparent); position: absolute; left: -5px; right: -5px; height: 1px; width: 100%; } .lol-highlights-list-item-inner.is-selected:lang(ar-ae)::before, .lol-highlights-list-item-inner.is-selected:lang(ar-ae)::after { left: 5px; right: 5px; } .lol-highlights-list-item-inner.is-selected::before { top: -1px; bottom: -1px; } .lol-highlights-list-item-inner.is-selected::after { top: 70px; bottom: 70px; } .lol-highlights-list-item-inner:hover { background-image: linear-gradient(to right, transparent, rgba(211,184,65,0.15) 2%, transparent 70%); } .lol-highlights-list-item-inner:active { background-image: linear-gradient(to right, transparent, rgba(138,113,47,0.15) 2%, transparent 70%); } .lol-highlights-list-item-contents { display: flex; flex: 1 auto; overflow: hidden; flex-flow: row nowrap; justify-content: flex-end; align-items: center; max-width: 100%; } .lol-highlights-list-item-text { display: flex; flex: 1 1 auto; overflow: hidden; margin: 0 5px 0 0 ; } .lol-highlights-list-item-buttons { display: flex; flex: 0 0 auto; } .lol-highlights-list-item-buttons > lol-highlights-show-in-file-browser-button { margin: 0 3px 0 0 ; } .lol-highlights-list-item-text-container { overflow: hidden; padding: 2px; } .lol-highlights-list-item-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; } lol-highlights-list { height: 100%; width: 100%; } lol-highlights-list ul { padding: 0; } lol-highlights-list ul li { display: flex; flex-flow: column nowrap; } lol-highlights-list > lol-uikit-scrollable { overflow-y: auto; overflow-x: hidden; } lol-highlights-loading-layout { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; } .lol-highlights-loading-layout-spinner { display: flex; background-image: url(/fe/lol-highlights/loading_spinner_large.png); background-size: contain; -webkit-animation: spin 2s linear infinite; width: 40px; height: 40px; flex: 0 0 auto; } .lol-highlights-loading-layout-text { display: flex; flex: 1 0; padding-top: 10px; } lol-highlights-main-layout { display: flex; align-items: stretch; flex-flow: row nowrap; overflow: hidden; } .highlights-main-layout-left-pane { display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: center; flex: 1 0 0; overflow: hidden; padding: 0 6px 0 0 ; height: 450px; } .highlights-main-layout-right-pane { display: flex; flex: 0 0 75%; flex-flow: column nowrap; overflow: hidden; } .lol-highlights-video-player-container { display: flex; flex-flow: column nowrap; justify-content: center; flex: 0 0 auto; } .lol-highlights-decoration-line { max-width: 100%; } .highlights-main-layout-details-container { direction: ltr; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; flex: 1 0 auto; overflow: hidden; padding-top: 10px; padding-bottom: 10px; } .highlights-main-layout-details-container > lol-highlights-selected-highlight-name { margin-top: 3px; } .highlights-main-layout-details-container > .lol-highlights-decoration-line { margin-bottom: 6px; } .lol-highlights-selected-highlight-modified-date { text-align: center; } .lol-highlights-details-no-margin-top { margin-top: 0; } .lol-highlights-details-no-margin-bottom { margin-bottom: 0; } .lol-highlights-video-too-large-error { display: flex; flex-flow: column nowrap; justify-content: center; align-items: stretch; padding: 2em; height: 440px; text-align: center; } lol-highlights-panel { position: absolute; top: 130px; left: 0; height: 580px; width: 1045px; overflow: hidden; } .lol-highlights-panel-fade-in { -webkit-animation: lol-highlights-panel-fade-in-animation 1s; } @-webkit-keyframes lol-highlights-panel-fade-in-animation { from { opacity: 0; } to { opacity: 1; } } lol-highlights-selected-highlight-name { display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; flex: 0 0 auto; } lol-highlights-selected-highlight-name div { display: inherit; } .lol-highlights-name-display-container { overflow: hidden; display: flex; flex-flow: row nowrap; flex-grow: 1; justify-content: center; } .lol-highlights-name-display-container lol-uikit-content-block { flex-grow: 0; overflow: hidden; } .lol-highlights-name-display-container lol-uikit-content-block h3 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .lol-highlights-name-display-container lol-uikit-content-block lol-highlights-edit-button { display: flex; flex: 0 0 5%; } lol-highlights-edit-button { margin: 0.2em 0.5em; } .lol-highlights-edit-button-counter-weight { display: flex; flex: 0 0 5%; } .lol-highlights-edit-is-hidden { visibility: hidden; } .lol-highlights-name-edit-container { width: 100%; height: 100%; display: flex; flex-flow: row nowrap; align-items: center; padding-bottom: 5px; } .lol-highlights-name-edit-container lol-uikit-flat-input { flex-grow: 1; } .lol-highlights-name-edit-container lol-uikit-flat-button { flex-grow: 0; margin-top: 1px; margin-left: 6px; } .lol-highlights-show-in-file-browser-button, .lol-highlights-show-in-file-browser-button:hover, .lol-highlights-show-in-file-browser-button:active { background-size: contain; background-image: url(/fe/lol-highlights/btn_highlights_folder.png); height: 30px; width: 30px; cursor: pointer; } .lol-highlights-show-in-file-browser-button:hover { background-image: url(/fe/lol-highlights/btn_highlights_folder_hover.png); } .lol-highlights-show-in-file-browser-button:active { background-image: url(/fe/lol-highlights/btn_highlights_folder_click.png); } lol-highlights-main-layout { display: flex; align-items: stretch; flex-flow: row nowrap; overflow: hidden; } .highlights-main-layout-left-pane { display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: center; flex: 1 0 0; overflow: hidden; padding: 0 6px 0 0 ; height: 450px; } .highlights-main-layout-right-pane { display: flex; flex: 0 0 75%; flex-flow: column nowrap; overflow: hidden; } .lol-highlights-video-player-container { display: flex; flex-flow: column nowrap; justify-content: center; flex: 0 0 auto; } .lol-highlights-decoration-line { max-width: 100%; } .highlights-main-layout-details-container { direction: ltr; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; flex: 1 0 auto; overflow: hidden; padding-top: 10px; padding-bottom: 10px; } .highlights-main-layout-details-container > lol-highlights-selected-highlight-name { margin-top: 3px; } .highlights-main-layout-details-container > .lol-highlights-decoration-line { margin-bottom: 6px; } .lol-highlights-selected-highlight-modified-date { text-align: center; } .lol-highlights-details-no-margin-top { margin-top: 0; } .lol-highlights-details-no-margin-bottom { margin-bottom: 0; } .lol-highlights-video-too-large-error { display: flex; flex-flow: column nowrap; justify-content: center; align-items: stretch; padding: 2em; height: 440px; text-align: center; } lol-highlights-video-player { display: flex; align-items: flex-start; justify-content: center; flex: auto; } lol-highlights-video-player video { max-width: 100%; height: 440px; }