/* $primary: #ff886c; */ .filters-bar[data-v-5533e378] { display: block; background: rgba(0, 0, 0, 0.1); padding: .5rem 1rem; } .filters-bar .icon[data-v-5533e378] { fill: rgba(0, 0, 0, 0.5); } .filters[data-v-5533e378] { display: inline-block; list-style: none; padding: .5rem; margin: 0; } .filters .toggle[data-v-5533e378] { color: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.1); box-sizing: border-box; padding: .5rem; border-radius: .5rem; font-size: .9rem; font-weight: bold; cursor: pointer; } .filters .toggle .check[data-v-5533e378] { display: none; } .filters .toggle.active[data-v-5533e378] { color: #fff; background: #ff6c88; } .filter[data-v-5533e378] { display: inline-block; } .scenes[data-v-5533e378] { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-gap: 1rem; } .scene[data-v-5533e378] { display: flex; flex-direction: column; box-sizing: border-box; padding: 0 0 .5rem 0; border-radius: .25rem; overflow: hidden; box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); } .scene-banner[data-v-5533e378] { position: relative; margin: 0 0 .5rem 0; } .scene-thumbnail[data-v-5533e378] { width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; -o-object-fit: cover; object-fit: cover; background-position: center; background-size: cover; background-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); } .scene-row[data-v-5533e378] { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 .5rem; margin: 0 0 .25rem 0; } .scene-details[data-v-5533e378] { width: 100%; display: flex; align-items: center; justify-content: space-between; position: absolute; } .scene-site[data-v-5533e378], .scene-date[data-v-5533e378] { color: #fff; background: rgba(0, 0, 0, 0.5); font-size: .8rem; padding: .25rem; text-decoration: none; } .scene-site[data-v-5533e378] { border-radius: 0 0 .25rem 0; font-weight: bold; } .scene-date[data-v-5533e378] { border-radius: 0 0 0 .25rem; } .scene-info[data-v-5533e378] { flex-grow: 1; } .scene-link[data-v-5533e378] { text-decoration: none; } .scene-title[data-v-5533e378] { color: #222; margin: 0; font-size: 1rem; word-wrap: break-word; overflow: hidden; max-height: 3rem; line-height: 1.5rem; } .scene-network[data-v-5533e378] { color: #555; margin: 0 .25rem 0 0; font-size: .8rem; } .scene-actors[data-v-5533e378] { word-wrap: break-word; overflow: hidden; max-height: 2.5rem; line-height: 1.25rem; } .scene-tags[data-v-5533e378] { word-wrap: break-word; overflow: hidden; max-height: 2.5rem; line-height: 1.25rem; } .scene-actor[data-v-5533e378], .scene-tag[data-v-5533e378] { margin: 0 .25rem 0 0; } .scene-actor[data-v-5533e378] { font-size: .9rem; } .scene-tag[data-v-5533e378] { font-size: .75rem; } .scene-actor[data-v-5533e378]:not(:last-of-type)::after, .scene-tag[data-v-5533e378]:not(:last-child):after { content: ","; } .actor-link[data-v-5533e378], .tag-link[data-v-5533e378] { text-decoration: none; } .actor-link[data-v-5533e378]:hover, .tag-link[data-v-5533e378]:hover { color: #ff6c88; } .actor-link[data-v-5533e378] { color: #cc4466; } .tag-link[data-v-5533e378] { color: rgba(0, 0, 0, 0.7); } .thumbnail[data-v-5533e378] { width: 300px; } /* $primary: #ff886c; */ .banner[data-v-2bc41e74] { background: #222; white-space: nowrap; overflow-x: auto; margin: 0 0 1rem 0; scrollbar-width: none; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); font-size: 0; } .banner[data-v-2bc41e74]::-webkit-scrollbar { display: none; } .banner-trailer[data-v-2bc41e74] { display: inline-block; } .banner-item[data-v-2bc41e74] { height: 20rem; vertical-align: middle; } .row[data-v-2bc41e74] { display: block; padding: 0 1rem; margin: 0 0 .5rem 0; } .row .icon[data-v-2bc41e74] { width: 1rem; fill: rgba(0, 0, 0, 0.7); margin: 0 .5rem 0 0; } .actors[data-v-2bc41e74], .tags[data-v-2bc41e74] { list-style: none; } .actor[data-v-2bc41e74], .tag[data-v-2bc41e74] { display: inline-block; text-transform: capitalize; } .actor[data-v-2bc41e74]:not(:last-child)::after, .tag[data-v-2bc41e74]:not(:last-child)::after { content: ','; display: inline-block; width: .6rem; } .duration[data-v-2bc41e74] { font-size: 0; } .duration-segment[data-v-2bc41e74] { font-size: 1rem; } .date-link[data-v-2bc41e74], .site-link[data-v-2bc41e74], .network-link[data-v-2bc41e74], .actor-link[data-v-2bc41e74], .tag-link[data-v-2bc41e74] { color: #cc4466; text-decoration: none; } .date-link[data-v-2bc41e74]:hover, .site-link[data-v-2bc41e74]:hover, .network-link[data-v-2bc41e74]:hover, .actor-link[data-v-2bc41e74]:hover, .tag-link[data-v-2bc41e74]:hover { color: #ff6c88; } /* $primary: #ff886c; */ .noselect { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { color: #222; margin: 0; font-family: Verdana, sans-serif; } .nolist { list-style: none; padding: 0; margin: 0; } .nolist li { display: inline-block; } .heading { color: #ff6c88; margin: 0 0 1rem 0; } /* $primary: #ff886c; */ .header[data-v-10b7ec04] { color: #fff; background: #ff6c88; padding: 1rem; } .logo-link[data-v-10b7ec04] { color: inherit; text-decoration: none; } .logo[data-v-10b7ec04] { display: inline-block; margin: 0; } .container { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .content { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; } .content-inner { flex-grow: 1; padding: 1rem; overflow-y: auto; } /* $primary: #ff886c; */ .icon { fill: #222; display: inline-block; flex-shrink: 0; width: 1rem; height: 1rem; } .icon svg { width: 100%; height: 100%; } .icon.active { fill: rgba(0, 0, 0, 0.5); } .icon.active:hover { fill: #222; cursor: pointer; }