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 {
126 body.channels main .channel > .description h2 {
130 .channel > .description, .video.thumb, .newvideo {
131 display: inline-block;
134 width: 99%; margin: 0 .5%;
143 .video.thumb:before, .newvideo:before {
146 top: 0; left: 0; right:0; height: 11em;
147 box-shadow: #000 .25em .25em .5em;
150 @media(min-width: 24em) { .channel > .description, .video.thumb, .newvideo { max-width: 49%; } }
151 @media(min-width: 44em) { .channel > .description, .video.thumb, .newvideo { max-width: 32%; } }
152 @media(min-width: 64em) { .channel > .description, .video.thumb, .newvideo { max-width: 24%; } }
153 @media(min-width: 84em) { .channel > .description, .video.thumb, .newvideo { max-width: 19%; } }
154 @media(min-width: 104em) { .channel > .description, .video.thumb, .newvideo { max-width: 19em; } }
160 text-decoration: inherit;
163 .video.thumb figure {
164 position: absolute; top: 0;
165 height: 11em; width: 100%;
168 .video.thumb figure img {
169 position: absolute; top: 0;
170 height: 11em; min-width: 1000%;
171 background-color: #888;
174 transform: translate(-05%, 0);
177 .video.thumb:hover img {
178 animation: thumbscroll 8s steps(10, end) infinite;
180 @keyframes thumbscroll {
181 from { transform: translate(-05%, 0);}
182 to { transform: translate(-105%, 0);}
187 top: 10.25em; width: 100%;
191 word-break: break-word;
195 .video.thumb .duration {
197 right: .375em; top: 10.625em;
200 background-color: #333;;
205 .video.thumb .description {
207 left:0; right:0; bottom: 3.5em;
210 background-color: rgba(0,0,0,.75);
212 transition: height linear .25s;
214 .video.thumb .description:hover {
218 body.video.edit form > .delete {
221 body.video.edit form #delconfirm + label:after {
225 body.video.edit form #delconfirm + label + button {
226 pointer-events: none;
231 body.video.edit form #delconfirm:checked + label + button {
232 pointer-events: auto;
234 border-color: inherit;
235 background-color: #FDD;
246 background: transparent;
249 #uploadprogress .progress {
252 width: 99%; width: calc(100% - 2pt);
253 background-color: #FFF;
258 #uploadprogress .progress .bar {
261 left: 0; top: 0; bottom: 0;
262 background-color: #666;
264 #uploadprogress .progress .count {
267 left: 0; top: 0; right: 0; bottom: 0;
268 line-height: 1.375em;