/* Generic Navigation */ /* Generic Navigation end */ /* Structure */ /* Horizontal */ ul.cineraNavHorizontal, ul.cineraNavHorizontal ul { display: flex; flex-grow: 1; flex-flow: row wrap; border: 0; margin: 0; padding: 0; } ul.cineraNavHorizontal li { display: flex; flex-direction: column; flex-grow: 1; } ul.cineraNavHorizontal { border-right: 1px solid; } ul.cineraNavHorizontal a { flex-grow: 1; padding: 8px; display: flex; justify-content: center; align-items: center; border-left: 1px solid; border-bottom: 1px solid; } /* Horizontal end */ /* Dropdown */ nav.cineraNavDropdown { display: flex; flex-direction: column; } nav.cineraNavDropdown .cineraNavTitle { text-align: center; padding: 8px 0; user-select: none; -moz-user-select: none; -webkit-user-select: none; } .cineraPositioner { position: relative; } nav.cineraNavDropdown ul.cineraNavHorizontal { display: none; width: 100%; z-index: 4096; position: absolute; } nav.cineraNavDropdown ul.cineraNavHorizontal.visible { display: flex; } /* Dropdown end */ /* Structure end */ /* Typography */ ul.cineraNavHorizontal a, ul.cineraNavPlain a { text-decoration: none; } /* Plain */ ul.cineraNavPlain li.current > a { font-weight: bold; } /* Plain end */ /* Typography end */ /* Index */ #cineraIndex { display: flex; flex-direction: column; } #cineraIndex #cineraIndexControl { display: flex; position: -webkit-sticky; position: sticky; top: 0px; z-index: 64; user-select: none; -moz-user-select: none; -webkit-user-select: none; } #cineraIndex .cineraIndexGridContainer { display: flex; flex-direction: column; align-items: center; justify-content: center; } #cineraIndex .cineraIndexGridContainer.Portrait { flex-direction: column-reverse; } #cineraIndex .cineraIndexGridContainer.Landscape.Left { flex-direction: row-reverse; } #cineraIndex .cineraIndexGridContainer.Landscape.Right { flex-direction: row; } #cineraIndex .cineraIndexGridContainer.Landscape .cineraTraversal { flex-direction: column; } #cineraIndex .cineraIndexGridContainer.Landscape .cineraTraversal .cineraButton.prev { order: 1; } #cineraIndex .cineraIndexGridContainer.Landscape .cineraTraversal .cineraButton.next { order: 2; } #cineraIndex.anim .cineraTraversal, #cineraIndex.anim .cineraTraversal * p { transition: transform .32s; } #cineraIndex .cineraTraversalContainer { overflow: hidden; } #cineraIndex .cineraTraversal { display: flex; justify-content: center; transform: rotate(0deg); } #cineraIndex.reversed .cineraTraversal { transform: rotate(180deg); } #cineraIndex .cineraTraversalContainer .cineraButton { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; padding: 2px; height: 42px; width: 42px; } #cineraIndex .cineraTraversal * p { transform: rotate(0deg); } #cineraIndex.reversed .cineraTraversal .ascension p { transform: rotate(-180deg); } #cineraIndex.reversed .cineraTraversal .prev p, #cineraIndex.reversed .cineraTraversal .next p { transform: rotate(-360deg); } #cineraIndex .cineraTraversal .next.ascension p { transform: rotate(-45deg); } #cineraIndex.reversed .cineraTraversal .next.ascension p { transform: rotate(-315deg); } .cineraFilterProject .cineraText, .cineraProjectTitle { display: flex; } .cineraMenu.cineraMenuTitle { padding: 10px; cursor: default; } .cineraMenuContainer { display: none; position: absolute; top: 100%; z-index: 64; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; border: 1px solid; border-top: none; } .cineraMenuContainer.visible { display: block; max-height: 88vh; overflow-y: auto; } .cineraFilterProject, .cineraIndexProject > .cineraIndexProject { padding-left: 1em; } .cineraIndexProject { margin-top: 4px; } .cineraIndexProject .cineraProjectTitle, .cineraMenuItem { font-weight: bold; font-size: 1rem; } .cineraQueryContainer { flex-grow: 1; padding-left: 16px; display: flex; margin: auto; } .cineraQueryContainer label { flex-grow: 0; flex-shrink: 0; margin: auto; } .cineraQueryContainer .inputContainer { display: flex; flex-grow: 1; position: relative; padding: .5em; } .cineraQueryContainer #query { width: 0px; flex-grow: 1; } .cineraQueryContainer .inputContainer .spinner { position: absolute; top: 2px; right: 5px; font-size: .5rem; color: #000000; height: 100%; display: none; } .cineraQueryContainer .inputContainer .spinner.show { display: block; } #cineraResults, #cineraIndexList { margin: 0 auto; max-width: 800px; } #cineraResults .projectContainer { display: flex; flex-flow: column; } #cineraIndexList .cineraIndexEntries { display: flex; flex-flow: column; width: 100%; } #cineraIndex #cineraIndexGrid { display: flex; overflow: hidden; position: relative; perspective-origin: center; -webkit-perspective-origin: center; } #cineraIndex #cineraIndexGrid .cineraButtons { flex-shrink: 0; display: grid; grid-gap: 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; } #cineraIndex .cineraButton { border: 1px solid; text-align: center; font-size: 1rem; font-weight: bold; flex-direction: column; user-select: none; -moz-user-select: none; -webkit-user-select: none; } #cineraIndex #cineraIndexGrid .cineraButton.subdivision { box-sizing: border-box; display: flex; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } #cineraIndex #cineraIndexGrid .cineraButton.subdivision .head-item, #cineraIndex #cineraIndexGrid .cineraButton.subdivision .tail-item { display: flex; width: 100%; height: 50%; overflow: hidden; } #cineraIndex #cineraIndexGrid .cineraButton.subdivision .head-item p, #cineraIndex #cineraIndexGrid .cineraButton.subdivision .tail-item p { border: 0; margin: 0; padding: 0; } #cineraIndex #cineraIndexGrid .cineraButton.subdivision.leaf { justify-content: center; } #cineraIndex #cineraIndexGrid .cineraButton.subdivision.leaf a { text-decoration: none; } #cineraIndex #cineraIndexGrid .cineraButton.subdivision.leaf a:hover { cursor: default; } #cineraIndex #cineraIndexGrid .cineraButton.subdivision .head-item, #cineraIndex.reversed #cineraIndexGrid .cineraButton.subdivision .tail-item { align-items: flex-start; justify-content: flex-start; text-align: left; } #cineraIndex #cineraIndexGrid .cineraButton.subdivision .tail-item, #cineraIndex.reversed #cineraIndexGrid .cineraButton.subdivision .head-item { align-items: flex-end; justify-content: flex-end; text-align: right; } #cineraIndexList.hidden, #cineraIndex .cineraIndexGridContainer.hidden { display: none; } #cineraResults .dayContainer { display: flex; } #cineraResults .dayContainer .dayName { box-sizing: border-box; display: block; flex-shrink: 0; font-size: .75rem; line-height: 16px; padding: 5px; vertical-align: top; max-width: 200px; } .cineraIndexEntries div a { display: block; padding: 5px; text-decoration: none; } .cineraIndexEntries div a::before { content: "\2713"; margin: 0 4px; } #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; display: none; } /* Player */ /* 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 > .menu { position: relative; min-height: 1em; min-width: 1em; display: flex; align-items: center; justify-content: center; user-select: none; -moz-user-select: none; -webkit-user-select: none; } .cineraMenus > .menu.filter.responsible, .cineraMenus > .menu.link.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 > .cineraHelp, .cineraHelp { cursor: pointer; box-sizing: content-box; border: 1px solid; border-radius: 4px; height: .5rem; width: .5rem; padding: 4px; margin: 2px; font-size: .75rem; font-weight: bold; line-height: .5rem; text-align: center; z-index: 64; } .cineraHelp .help_container { background-color: #000000; /* Per project */ color: #EEEEEE; /* Per project */ display: none; font-weight: normal; line-height: 12px; opacity: 0.9; padding: 8px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 97%; overflow-y: auto; } .cineraHelp .help_container.visible { display: block; } .cineraHelp .help_container .help_custom_index { background-color: #159 !important; } .cineraHelp .help_container h2 .help_title_key { padding: .2em; border: 1px solid; border-radius: 4px; } .cineraHelp .help_container .help_key { box-sizing: content-box; font-family: Inconsolata; font-size: 1rem; border: 1px solid; display: inline-block; background-color: #111111; /* Per project */ border-radius: 4px; min-height: 1em; min-width: 1em; padding: 4px; line-height: 16px; margin: 2px; } .cineraHelp .help_container .help_key.word { width: auto; } .cineraHelp .help_container .help_key.modifer { margin-right: 0; } .cineraHelp .help_container .help_key.unavailable, .cineraHelp .help_container .help_text.unavailable, .cineraHelp .help_container h2 .unavailable { opacity: 0.32; } .cineraHelp .help_container .key_block { display: inline-flex; align-items: flex-end; flex-direction: row; margin: 8px; } .cineraHelp .help_container .help_text { margin: 0 8px 0 2px; } .cineraHelp .help_container h1 { display: inline; margin-left: 4px; } .cineraHelp .help_container h1:after { content: "\a"; } .cineraHelp .help_container h2 { font-size: 1rem; margin-bottom: 8px; } .cineraHelp .help_container .help_paragraph { display: inline-flex; align-items: center; } .cineraHelp .help_container .help_grid { display: inline-flex; flex-direction: column; } .cineraMenus > .menu .quotes_container, .cineraMenus > .menu .references_container, .cineraMenus > .menu .filter_container, .cineraMenus > .menu .views_container, .cineraMenus > .menu .link_container, .cineraMenus > .menu .credits_container { border: 1px solid; border-top: none; z-index: -1; /* NOTE(matt): Using "display: none" to hide them proved problematic for scrolling non-visible menus */ overflow-y: auto; position: absolute; right: 0; top: 100%; } .cineraMenus > .menu .refs, .cineraMenus > .menu .filter_container, .cineraMenus > .menu .link_container, .cineraMenus > .menu .credits_container { width: 350px; } .cineraMenus > .menu .link_container { overflow-x: hidden; } .cineraMenus > .menu .sizing { z-index: -1; display: block; } .cineraMenus > .menu .visible { z-index: 8; } .cineraMenus > .menu > .refs .ref { flex-direction: column; } .cineraMenus > .menu { cursor: default; } .cineraMenus > .menu > .view, .cineraMenus > .menu > .views_container .view { cursor: pointer; } .cineraMenus > .menu > .credits_container .credit .person { flex-grow: 1; text-decoration: none; } .cineraMenus > .menu > .credits_container .credit .support { padding: 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, .cineraMenus > .menu > .link_container #cineraLinkMode { font-size: .75rem; } .cineraMenus > .menu > .filter_container .filter_mode, .cineraMenus > .menu > .link_container #cineraLinkMode { user-select: none; -moz-user-select: none; -webkit-user-select: none; } .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: .64rem; } .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_header { position: sticky; top: 0; } .cineraMenus > .menu > .filter_container .filter_mode, .cineraMenus > .menu > .link_container #cineraLinkMode { 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 .filter_header .filter_titles, .cineraMenus > .menu > .filter_container .filters { display: flex; flex-flow: row nowrap; } .cineraMenus > .menu > .filter_container .filter_header .filter_titles > *, .cineraMenus > .menu > .filter_container .filters > * { width: 50%; flex-grow: 1; } .cineraDefaultMediumIndicator { color: #FEF697; } .cineraMenus > .menu > .filter_container .filter_content, .cineraPlayerContainer .markers_container > .markers .marker .cineraContent .cineraCategories { cursor: pointer; display: inline-flex; align-items: center; } .cineraMenus > .menu > .filter_container .filter_content .icon, .cineraPlayerContainer .markers_container > .markers .marker .cineraContent .cineraCategories .categoryMedium { font-style: normal; margin-left: 4px; } .cineraPlayerContainer .markers_container > .markers .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 > .markers .marker .cineraContent .cineraCategories .categoryMedium.rant { color: #BA0001; } .cineraMenus > .menu > .filter_container .filter_media .filter_content.off .icon, .cineraPlayerContainer .markers_container > .markers .marker .cineraContent .cineraCategories .categoryMedium.off { opacity: 0.32; } .cineraMenus > .menu > .filter_container .filter_content.rant .cineraText, .cineraPlayerContainer .markers_container > .markers .marker.rant .cineraContent, .cineraPlayerContainer .markers_container > .markers .marker.off_rant .cineraContent { font-variant: small-caps; } .cineraMenus > .menu > .link_container #cineraLink { border: 0; cursor: pointer; height: 100%; padding: 4px; resize: none; width: 100%; } .cineraPlayerContainer { display: flex; flex-direction: row; } .cineraPlayerContainer .video_container { flex-grow: 1; overflow: hidden; } .cineraPlayerContainer .video_container .direct_video { display: flex; } .cineraPlayerContainer .video_container .direct_video video { outline: none; } .cineraPlayerContainer .markers_container { flex-shrink: 1; overflow-y: scroll; position: relative; } .cineraPlayerContainer .markers_container > .episodeMarker { text-decoration: none; display: flex; font-size: .75rem; font-weight: bold; } .cineraPlayerContainer { background-color: #000000; } .cineraPlayerContainer .video_container { display: flex; justify-content: center; align-self: center; } .cineraPlayerContainer .markers_container > a.episodeMarker { cursor: pointer; } .cineraPlayerContainer .markers_container > div.episodeMarker { cursor: default; } .cineraPlayerContainer .markers_container > .episodeMarker div { margin: auto; text-align: center; } .cineraPlayerContainer .markers_container > .episodeMarker div:not(:nth-of-type(2)) { font-size: .9rem; font-weight: normal; } .cineraPlayerContainer .markers_container > .episodeMarker div:nth-of-type(2) { padding: 0 5px; flex-grow: 1; } .cineraPlayerContainer .markers_container > .episodeMarker.first, .cineraPlayerContainer .markers_container > .episodeMarker.prev { border-bottom: 4px double; } .cineraPlayerContainer .markers_container > .markers .marker { border-bottom: 1px solid; position: relative; cursor: pointer; max-height: 320px; /* NOTE(matt): Required for the transition */ transition: max-height .32s; } .cineraPlayerContainer .markers_container > .markers .marker:last-of-type { border-bottom: none; } .cineraPlayerContainer .markers_container > .episodeMarker.next, .cineraPlayerContainer .markers_container > .episodeMarker.last { border-top: 4px double; } .cineraPlayerContainer .markers_container > .episodeMarker, .cineraPlayerContainer .markers_container > .markers .marker .cineraContent { box-sizing: border-box; padding: 5px; width: 320px; word-wrap: break-word; } .cineraPlayerContainer .markers_container > .markers .marker .cineraContent { display: inline-block; font-size: .8rem; } .cinera:not(.mobile) .cineraPlayerContainer .markers_container > .markers .marker.skip { max-height: 0; transition: max-height .32s; overflow: hidden; } .cineraPlayerContainer .markers_container > .markers .marker.authored .cineraContent .author, .cineraPlayerContainer .markers_container > .markers .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 > .markers .marker.authored, .cineraPlayerContainer .markers_container > .markers .marker.off_authored { font-style: oblique !important; } .cineraPlayerContainer .markers_container > .markers .marker .cineraContent sup { font-style: normal; font-variant: normal; vertical-align: super; } .cineraPlayerContainer .markers_container > .markers .marker .progress { position: absolute; top: 0; left: 0; height: 100%; width: 0px; overflow: hidden; } .cineraPlayerContainer .markers_container > .markers .marker .timecode { font-size: .6rem; font-style: normal; padding-right: 8px; position: relative; top: -2px; } .cineraPlayerContainer .markers_container > .markers .marker .cineraContent .cineraCategories { float: right; min-height: 1em; } .cineraMenus > .menu > .filter_container .filter_content { display: flex; } .cineraMenus > .menu > .filter_container .filter_content .category, .cineraPlayerContainer .markers_container > .markers .marker .cineraContent .cineraCategories .category { box-sizing: content-box; border-radius: 50%; height: 5px; width: 5px; } .cineraMenus > .menu > .filter_container .filter_content .category.off, .cineraPlayerContainer .markers_container > .markers .marker .cineraContent .cineraCategories .category.off { background: transparent; } .cineraPlayerContainer .markers_container > .markers .marker .cineraContent .cineraCategories .category { margin-left: 2px; } .cineraMenus > .menu > .filter_container .filter_content .icon { margin-right: 8px; } /* NOTE(matt): Mobile Style */ #cineraIndex.mobile .cineraMenu.ViewSettings .cineraMenuItem, #cineraIndex.mobile .cineraFilterProject .cineraText, #cineraIndex.mobile .cineraIndexEntries div a { display: flex; box-sizing: border-box; align-items: center; min-height: 10mm; /* NOTE(matt): From https://web.dev/accessible-tap-targets/ */ } #cineraIndex.mobile .cineraMenu.ViewSettings .cineraMenuItem, #cineraIndex.mobile .cineraFilterProject .cineraText, #cineraIndex.mobile .cineraIndexEntries div { margin: 8px; /* NOTE(matt): From https://web.dev/accessible-tap-targets/ */ } #cineraIndex.mobile #cineraResults .dayContainer { flex-direction: column; } #cineraIndex.mobile #cineraResults .dayContainer .dayName { font-weight: bold; text-align: center; max-width: 100%; } #cineraIndex.mobile #cineraResults .dayContainer .markerList { max-width: 100%; } .cinera.mobile { display: flex; flex-direction: column; flex-grow: 0; -webkit-text-size-adjust: none; } .cinera.mobile .cineraMenus { justify-content: center; display: flex; flex-direction: row; position: relative; border: 0; } .cinera.mobile .cineraMenus, .cinera.mobile .player_container { flex-grow: 0; } .cinera.mobile .cineraMenus .episode_name, .cinera.mobile .cineraMenus > .menu > .view, .cinera.mobile .cineraMenus > .menu > .views_container .view, .cinera.mobile .cineraHelp, #cineraIndex.mobile .cineraHelp, .cinera.mobile .markers_container > .episodeMarker div:nth-child(2), .cinera.mobile .markers_container > .episodeMarker div:nth-child(3), .cinera.mobile .markers_container > .markers .marker:not(.current) { display: none; } .cinera.mobile .cineraMenus .menu { position: static; } .cinera.mobile .cineraMenus .menu .quotes_container, .cinera.mobile .cineraMenus .menu .references_container, .cinera.mobile .cineraMenus .menu .filter_container, .cinera.mobile .cineraMenus .menu .link_container, .cinera.mobile .cineraMenus .menu .credits_container { box-sizing: border-box; position: absolute; } .cinera.mobile .cineraPlayerContainer { display: flex; flex-direction: column; } .cinera.mobile .cineraPlayerContainer .markers_container { display: flex; flex-flow: row; overflow-y: hidden; } .cinera.mobile .cineraPlayerContainer .markers_container > .episodeMarker { width: 32px; user-select: none; -moz-user-select: none; -webkit-user-select: none; } .cinera.mobile .cineraPlayerContainer .markers_container > .markers { flex-grow: 1; } .cinera.mobile .cineraPlayerContainer .markers_container > .episodeMarker.first, .cinera.mobile .cineraPlayerContainer .markers_container > .episodeMarker.prev, .cinera.mobile .cineraPlayerContainer .markers_container > .markers .marker, .cinera.mobile .cineraPlayerContainer .markers_container > .episodeMarker.last, .cinera.mobile .cineraPlayerContainer .markers_container > .episodeMarker.next { border: 0; } .cinera.mobile .cineraPlayerContainer .markers_container > .episodeMarker.first, .cinera.mobile .cineraPlayerContainer .markers_container > .episodeMarker.prev { border-right: 3px double; } .cinera.mobile .cineraPlayerContainer .markers_container > .episodeMarker.last, .cinera.mobile .cineraPlayerContainer .markers_container > .episodeMarker.next { border-left: 3px double; } /* Mobile Style End */ /* 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: ▹ */