/* Index */ .cineraQueryContainer { max-width: 1024px; margin: 15px auto; display: flex; flex-direction: horizontal; } .cineraQueryContainer label { flex-grow: 0; flex-shrink: 0; } .cineraQueryContainer .inputContainer { flex-grow: 1; position: relative; } .cineraQueryContainer #query { width: 100%; } .cineraQueryContainer .inputContainer .spinner { position: absolute; top: 2px; right: 5px; color: black; height: 100%; display: none; } .cineraQueryContainer .inputContainer .spinner.show { display: block; } #cineraResults, #cineraIndex { margin: 0 auto; max-width: 800px; } #cineraIndex #cineraIndexSort { margin-bottom: 8px; display: inline-block; padding: 5px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; } #cineraIndex #cineraIndexEntries { display: flex; flex-flow: column; width: 100%; } #cineraResults .dayContainer { display: flex; } #cineraResults .dayContainer .dayName { box-sizing: border-box; display: block; flex-shrink: 0; font-size: 12px; line-height: 16px; padding: 5px; vertical-align: top; width: 200px; } #cineraIndexEntries div a { display: block; padding: 5px; text-decoration: none; } #cineraResults .dayContainer .markerList { box-sizing: border-box; display: block; flex-grow: 1; max-width: 600px; vertical-align: top; } #cineraResults .dayContainer .markerList > .marker { border-top: 1px solid; cursor: pointer; display: block; padding: 10px 5px; text-decoration: none; } #cineraResults .dayContainer .markerList > .marker:first-child { border: none; } #cineraResultsSummary { margin: 10px 0; text-align: center; } /* Player */ /* Structure */ .cineraMenus, .cineraMenus > .menu > .refs .ref, .cineraMenus > .menu > .credits_container .credit { border-bottom: 1px solid; display: flex; text-decoration: none; } .cineraMenus > *:not(.views), .cineraMenus > .menu > .refs .ref, .cineraMenus > .menu > .view, .cineraMenus > .menu > .views_container .view, .cineraMenus > .menu > .credits_container .credit .person { padding: 10px; } .cineraMenus .episode_name { flex: 1; } .cineraMenus > #focus-warn { background-color: rgba(0, 0, 0, 0.8); border-radius: 16px; color: #F00; flex: 1; margin: 0 auto 0 50%; display: none; z-index: 16; position: absolute; } .cineraMenus > .menu { position: relative; } .cineraMenus > .menu .mouse_catcher { position: absolute; height: 100%; width: 100%; top: 0; right: 0; } .cineraMenus > .menu.filter.responsible, .cineraMenus .filter_content.responsible, .cineraMenus .filter_content.responsible .cineraText, .cineraMenus > .menu > .filter_container .filter_mode.responsible { animation-duration: 8s; animation-timing-function: ease-out; animation-iteration-count: 1; } .cineraMenus .help .help_container .help_key { font-family: Inconsolata; font-size: 16px; border: 1px solid; display: inline-block; background-color: #111; /* Per project */ border-radius: 4px; height: 16px; width: 16px; padding: 4px; line-height: 16px; margin: 2px; } .cineraMenus .help .help_container .help_key.unavailable, .cineraMenus .help .help_container .help_text.unavailable, .cineraMenus .help .help_container h2 .unavailable { opacity: 0.32; } .cineraMenus .help .help_container .key_block { display: inline-flex; align-items: flex-end; flex-direction: row; margin: 8px; } .cineraMenus .help .help_container .help_text { margin: 0 8px 0 2px; } .cineraMenus .help .help_container h1 { display: inline; margin-left: 4px; } .cineraMenus .help .help_container h1:after { content: "\a"; } .cineraMenus .help .help_container h2 { font-size: 16px; margin-bottom: 8px; } .cineraMenus .help .help_container .help_paragraph { display: inline-flex; align-items: center; } .cineraMenus > .help { cursor: pointer; border: 1px solid; border-radius: 4px; height: 6px; padding: 4px; width: 6px; margin: 2px; font-size: 12px; font-weight: bold; line-height: 6px; text-align: center; z-index: 64; } .cineraMenus .help .help_container .help_grid { display: inline-flex; flex-direction: column; } .cineraMenus .help .help_container { background-color: black; /* Per project */ color: #EEE; /* Per project */ display: none; font-weight: normal; line-height: 12px; opacity: 0.9; padding: 8px; position: fixed; right: 612px; top: 42px; } .cineraMenus .help .help_container.visible { display: block; } .cineraMenus > .menu .refs, .cineraMenus > .menu .filter_container, .cineraMenus > .menu .views_container, .cineraMenus > .menu .credits_container{ border: 1px solid; border-top: none; display: none; /* TODO(matt): Set the height to the player's height */ max-height: 512px; overflow-y: auto; position: absolute; right: 0; top: 100%; z-index: 1; } .cineraMenus > .menu .refs { width: 350px; } .cineraMenus > .menu .filter_container { min-width: 350px; } .cineraMenus > .menu .credits_container { min-width: 240px; } /*.title > .menu:hover .refs,*/ .cineraMenus > .menu.quotes .refs.visible, .cineraMenus > .menu.references .refs.visible, /*.title > .menu:hover .filter_container,*/ .cineraMenus > .menu.filter .filter_container.visible, .cineraMenus > .menu.credits .credits_container.visible { /*.title > .menu:hover .credits_container {*/ display: block; } .cineraMenus > .menu > .refs .ref { flex-direction: column; } .cineraMenus > .menu > .view, .cineraMenus > .menu > .views_container .view { cursor: pointer; } .cineraMenus > .menu > .credits_container .credit { cursor: default; } .cineraMenus > .menu > .credits_container .credit .person { flex-grow: 1; text-decoration: none; } .cineraMenus > .menu > .credits_container .credit .support { padding: 16px; } .cineraMenus > .menu > .credits_container .credit .support .support_icon { height: 16px; width: 16px; } .cineraMenus > .menu > .refs .ref:last-child, .cineraMenus > .menu > .credits_container .credit:last-child { border: none; } .cineraMenus > .menu > .refs .ref .timecode, .cineraMenus > .menu > .filter_container .filter_mode { font-size: 12px; } .cineraMenus > .menu > .refs .ref .timecode { cursor: pointer; display: inline-block; padding: 0; } .cineraMenus > .menu > .refs .ref .timecode:hover { /* TODO(matt): background-image "play" symbol, right aligned */ } .cineraMenus > .menu > .refs .ref .ref_content, .cineraMenus > .menu > .filter_content { margin-bottom: 8px; width: 100%; } .cineraMenus > .menu > .refs .ref .source, .cineraMenus > .menu > .refs .ref .quote_byline, .cineraMenus > .menu > .filter_container .filter_title, .cineraMenus > .menu > .credits_container .credit .role { font-size: 10px; } .cineraMenus > .menu > .refs .ref .source, .cineraMenus > .menu > .refs .ref .quote_byline, .cineraMenus > .menu > .credits_container .credit .role { line-height: 8px; } .cineraMenus > .menu > .refs .ref .quote_byline, .cineraMenus > .menu > .refs .ref .ref_indices { width: 100%; } .cineraMenus > .menu > .refs .ref .quote_byline { text-align: right; } .cineraMenus > .menu > .refs .ref .ref_indices { text-align: center; } .cineraMenus > .menu > .refs .ref .ref_indices .timecode:first-child::before { content: ""; } .cineraMenus > .menu > .refs .ref .ref_indices .timecode::before { content: "•"; margin: 0 4px; } .cineraMenus > .menu > .refs .ref .timecode .ref_index { margin-right: 4px; } .cineraMenus > .menu > .filter_container .filter_mode { cursor: pointer; border-bottom: 1px solid; text-align: center; } .cineraMenus > .menu > .filter_container .filter_mode.exclusive:after { content: "exclusive"; } .cineraMenus > .menu > .filter_container .filter_mode.inclusive:after { content: "inclusive"; } .cineraMenus > .menu > .filter_container .filter_title { text-align: center; } .cineraMenus > .menu > .filter_container .filters { display: flex; flex-flow: row nowrap; } .cineraMenus > .menu > .filter_container .filters > * { width: 50%; flex-grow: 1; } .cineraDefaultMediumIndicator { color: #FEF697; } .cineraMenus > .menu > .filter_container .filter_content, .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories { cursor: pointer; display: flex; align-items: center; } .cineraMenus > .menu > .filter_container .filter_content .icon, .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium { font-style: normal; margin-left: 4px; } .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium + .categoryMedium { margin-left: 2px; } .cineraMenus > .menu > .filter_container .filter_content.off .icon { background: transparent; } .cineraMenus > .menu > .filter_container .filter_content.rant .icon, .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium.rant { color: #BA0001; } .cineraMenus > .menu > .filter_container .filter_media .filter_content.off .icon, .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium.off { opacity: 0.32; } .cineraMenus > .menu > .filter_container .filter_content.rant .cineraText, .cineraPlayerContainer .markers_container > .marker.rant .cineraContent, .cineraPlayerContainer .markers_container > .marker.off_rant .cineraContent { font-variant: small-caps; } .cineraPlayerContainer { display: flex; flex-direction: row; } .cineraPlayerContainer .video_container { flex-grow: 1; overflow: hidden; } .cineraPlayerContainer .markers_container { flex-shrink: 0; overflow-y: scroll; position: relative; } .cineraPlayerContainer .markers_container > .marker { border-bottom: 1px solid; position: relative; cursor: pointer; max-height: 320px; transition: max-height .32s; } .cineraPlayerContainer .markers_container > .marker.skip { max-height: 0; transition: max-height .32s; overflow: hidden; } .cineraPlayerContainer .markers_container > .marker .cineraContent { box-sizing: border-box; display: block; font-size: 14px; padding: 5px; width: 320px; word-wrap: break-word; } .cineraPlayerContainer .markers_container > .marker.authored .cineraContent .author, .cineraPlayerContainer .markers_container > .marker.off_authored .cineraContent .author { font-style: normal; font-variant: normal; font-weight: bold; } .cineraMenus > .menu > .refs .ref .ref_title, .cineraMenus .filter_content.authored .cineraText, .cineraPlayerContainer .markers_container > .marker.authored, .cineraPlayerContainer .markers_container > .marker.off_authored { font-style: oblique !important; } .cineraPlayerContainer .markers_container > .marker .cineraContent sup { font-style: normal; font-variant: normal; } .cineraPlayerContainer .markers_container > .marker .progress { position: absolute; top: 0; left: 0; height: 100%; width: 0px; overflow: hidden; } .cineraPlayerContainer .markers_container > .marker .timecode { font-size: 9px; font-style: normal; padding-right: 8px; position: relative; top: -2px; } .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories { display: inline-flex; margin: 4px; } .cineraMenus > .menu > .filter_container .filter_content { display: flex; } .cineraMenus > .menu > .filter_container .filter_content .category, .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .category { border-radius: 50%; height: 5px; width: 5px; } .cineraMenus > .menu > .filter_container .filter_content .category.off, .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .category.off { background: transparent; } .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .category { margin-left: 2px; } .cineraMenus > .menu > .filter_container .filter_content .icon { margin-right: 8px; } /* CUSTOM PAGE STYLE */ /* body { background-color: #000; font-family: sans-serif; color: white; margin: 0; padding: 0; } */ /* Open menu: ▾ ▾ Open link in new tab: ⤻ or &10559; or &8599; or ⭷ Play from timecode: ⏵ (or, if ↓ ▸) Playable from timecode: ▹ */