2 background-position: right;
3 background-size: 4pt 4pt;
4 background-image: /* #6AF #6FF */
5 linear-gradient( 0deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
6 linear-gradient(90deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%);
13 box-shadow: #000 .25em .25em .25em;
17 header > * { background: inherit; }
20 content: ''; position: absolute;
21 top: 0; right: 0; bottom: 0; left: 0;
22 background-color: rgba(0,0,0,.75);
25 header a { color: #8CE; }
29 right: 0; top: 31pt; max-height: 0;
34 transition: max-height linear .125s;
41 #user_login > *:last-child {
44 header #user_login:hover {
47 header #user_login > p {
52 header #user_login > p span {
57 header #user_login label {
60 text-decoration: underline;
65 header #user_login > * {
68 header #user_login > :first-child,
69 header #user_login:hover > * {
74 header #user_login:hover > a[href$="/register/"] {
80 background-color: rgba(255,255,255,.75);
81 margin: 1em; padding: 1em;
82 box-shadow: #000 .125em .125em 1em;
92 text-decoration: underline;
95 body.channel main h1.name {
98 body main .description,
106 body main form input[name=name],
107 body main form input[name=email],
108 body main form textarea {
114 body.channels main .channel {
123 body.channels main .channel > .description {
127 body.channels main .channel > .description h2 {
131 .channel > .description, .video.thumb, .newvideo {
132 display: inline-block;
135 width: 99%; margin: 0 .5%;
144 .video.thumb:before, .newvideo:before {
147 top: 0; left: 0; right:0; height: 11em;
148 box-shadow: #000 .25em .25em .5em;
151 @media(min-width: 24em) { .channel > .description, .video.thumb, .newvideo { max-width: 49%; } }
152 @media(min-width: 44em) { .channel > .description, .video.thumb, .newvideo { max-width: 32%; } }
153 @media(min-width: 64em) { .channel > .description, .video.thumb, .newvideo { max-width: 24%; } }
154 @media(min-width: 84em) { .channel > .description, .video.thumb, .newvideo { max-width: 19%; } }
155 @media(min-width: 104em) { .channel > .description, .video.thumb, .newvideo { max-width: 19em; } }
161 text-decoration: inherit;
164 .video.thumb figure {
165 position: absolute; top: 0;
166 height: 11em; width: 100%;
169 .video.thumb figure img {
170 position: absolute; top: 0;
171 height: 11em; min-width: 1000%;
172 background-color: #888;
175 transform: translate(-05%, 0);
178 .video.thumb:hover img {
179 animation: thumbscroll 8s steps(10, end) infinite;
181 @keyframes thumbscroll {
182 from { transform: translate(-05%, 0);}
183 to { transform: translate(-105%, 0);}
188 top: 10.25em; width: 100%;
192 word-break: break-word;
196 .video.thumb .duration {
198 right: .375em; top: 10.625em;
201 background-color: #333;;
206 .video.thumb .description {
208 left:0; right:0; bottom: 3.5em;
211 background-color: rgba(0,0,0,.75);
213 transition: height linear .25s;
215 .video.thumb .description:hover {
219 body.video.edit form > .delete {
222 body.video.edit form #delconfirm + label:after {
226 body.video.edit form #delconfirm + label + button {
227 pointer-events: none;
232 body.video.edit form #delconfirm:checked + label + button {
233 pointer-events: auto;
235 border-color: inherit;
236 background-color: #FDD;
247 background: transparent;
250 #uploadprogress .progress {
253 width: 99%; width: calc(100% - 2pt);
254 background-color: #FFF;
259 #uploadprogress .progress .bar {
262 left: 0; top: 0; bottom: 0;
263 background-color: #666;
265 #uploadprogress .progress .count {
268 left: 0; top: 0; right: 0; bottom: 0;
269 line-height: 1.375em;
276 body.channel .authors h3 {
277 display: inline-block;
279 body.channel.edit .authors h3 {
283 body.channel .authors span:after {
286 body.channel .authors span:last-child:after {
290 body.channel.edit .authors input[name=author] {
293 body.channel.edit .authors input[name=author] {
296 body.channel.edit .authors input[name=author] + label {
297 padding: .25em .5em .125em .25em;
299 padding-left: 1.25em;
300 margin-left: -1.25em;
302 background-color: rgba(255, 255, 255, .75);
304 body.channel.edit .authors input[name=author],
305 body.channel.edit .authors input[name=author] + label {
308 body.channel.edit .authors input[name=author]:checked,
309 body.channel.edit .authors input[name=author]:checked + label {
310 display: inline-block;
312 body.channel.edit .authors input[id^=newauthor] + label {
313 background-color: #FFF;
315 width: 1.5em; height: 1.5em;
319 body.channel.edit .authors input[id^=newauthor] + label + input {
320 vertical-align: middle;
322 body.channel.edit .authors input[id^=newauthor],
323 body.channel.edit .authors input[id^=newauthor] + label,
324 body.channel.edit .authors input[id^=newauthor] + label + input {
327 body.channel.edit .authors input[id^=newauthor0] + label {
328 display: inline-block;
330 body.channel.edit .authors input[id^=newauthor]:checked + label + input,
331 body.channel.edit .authors input[id^=newauthor]:checked + label + input + input + label {
332 display: inline-block;
334 body.channel.edit .authors input[id^=newauthor]:checked + label,
335 body.channel.edit .authors input[id^=newauthor]:checked + label + input + input:checked + label {