/* USER-DEFINED */ .marker .content { width: 320px; padding: 5px; font-size: 14px; } .timecode { font-size: 9px; padding-right: 8px; position: relative; top: -2px; } .marker { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .marker:hover > .content { background-color: #222; } .marker:hover .faded .content { background-color: rgba(139, 61, 35, 0.7); color: black; } .marker > .content { background-color: #161616; color: #8A877D; } .marker.current > .content { color: #B57714; } .marker .progress .content { background-color: #8B3D23; color: black; } /* MANDATORY */ .player_container { display: flex; flex-direction: row; } .video_container { flex-grow: 1; overflow: hidden; } .markers_container { overflow-y: scroll; position: relative; } .marker { position: relative; cursor: pointer; } .marker .content { display: block; box-sizing: border-box; word-wrap: break-word; } .marker .progress { position: absolute; top: 0; left: 0; height: 100%; width: 0px; overflow: hidden; } /* CUSTOM PAGE STYLE */ body { background-color: #222; font-family: sans-serif; color: white; margin: 0; padding: 0; } .title { display: flex; flex-direction: row; background-color: #444; } .title > * { padding: 10px; } .title .episode_name { flex: 1 1; } .title > a { color: rgba(38, 139, 210, 1); text-decoration: none; } .title > a:visited { color: rgba(38, 139, 210, 1); } .title > a:hover { text-decoration: underline; } .title .refs_container { position: relative; transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: inset 0 0 0 #B57714; } .title .refs_container:hover { background-color: #666; } .title .refs_container.current { box-shadow: inset 0px 0px 30px #B57714; } .title .refs_container .mouse_catcher { position: absolute; width: 100%; height: 100%; top: 0; right: 0; } .title .refs_container:hover .mouse_catcher { width: 300px; } .title .refs_container .refs { position: absolute; top: 100%; right: 0; width: 350px; background-color: black; border: 3px solid #444; border-top: none; z-index: 1; display: none; } .title .refs_container:hover .refs { display: block; } .refs .ref { padding: 10px; border-bottom: 1px solid rgb(51, 51, 51); display: flex; flex-direction: column; align-items: center; text-decoration: none; color: white; } .refs .ref.current { background-color: #8B3D23; color: black; } .refs .ref:hover { background-color: #222; } .refs .ref.current:hover { background-color: rgba(139, 61, 35, 0.7); } .refs .ref:last-child { border: none; } .refs .ref .timecode { display: inline-block; font-size: 12px; padding: 0; } .refs .ref .ref_indices { text-align: center; } .refs .ref .ref_indices .timecode { display: inline-block; font-size: 12px; } .refs .ref .ref_indices .timecode:first-child::before { content: ""; } .refs .ref .ref_indices .timecode::before { content: "•"; margin: 0 4px; } .refs .ref .timecode:hover .time { text-decoration: underline; } .refs .ref .ref_content { width: 100%; } .refs .ref .source { font-size: 10px; color: #888; line-height: 8px; } .refs .ref .ref_title { font-style: oblique; } .refs .ref .timecode .ref_index { margin-right: 4px; }