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.channel main .description,
99 body.channel main form.edit,
100 body.video main form.edit {
105 body.video main form.edit input[name=name],
106 body.video main form.edit textarea[name=description],
107 body.channel main form.edit input[name=name],
108 body.channel main form.edit textarea[name=description] {
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; } }
156 .video.thumb figure {
157 position: absolute; top: 0;
158 height: 11em; width: 100%;
161 .video.thumb figure img {
162 position: absolute; top: 0;
163 height: 11em; min-width: 1000%;
164 background-color: #888;
167 transform: translate(-05%, 0);
170 .video.thumb:hover img {
171 animation: thumbscroll 8s steps(10, end) infinite;
173 @keyframes thumbscroll {
174 from { transform: translate(-05%, 0);}
175 to { transform: translate(-105%, 0);}
180 top: 10.25em; width: 100%;
184 word-break: break-word;
188 .video.thumb .duration {
190 right: .375em; top: 10.625em;
193 background-color: #333;;
198 .video.thumb .description {
200 left:0; right:0; bottom: 3.5em;
203 background-color: rgba(0,0,0,.75);
205 transition: height linear .25s;
207 .video.thumb .description:hover {