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 {
121 body.channels main .channel > .description {
124 body.channels main .channel > .description h2 {
128 .channel > .description, .video.thumb, .newvideo {
129 display: inline-block;
132 width: 99%; margin: 0 .5%;
141 .video.thumb:before, .newvideo:before {
144 top: 0; left: 0; right:0; height: 11em;
145 box-shadow: #000 .25em .25em .5em;
148 @media(min-width: 24em) { .channel > .description, .video.thumb, .newvideo { max-width: 49%; } }
149 @media(min-width: 44em) { .channel > .description, .video.thumb, .newvideo { max-width: 32%; } }
150 @media(min-width: 64em) { .channel > .description, .video.thumb, .newvideo { max-width: 24%; } }
151 @media(min-width: 84em) { .channel > .description, .video.thumb, .newvideo { max-width: 19%; } }
152 @media(min-width: 104em) { .channel > .description, .video.thumb, .newvideo { max-width: 19em; } }
154 .video.thumb figure {
155 position: absolute; top: 0;
156 height: 11em; width: 100%;
159 .video.thumb figure img {
160 position: absolute; top: 0;
161 height: 11em; min-width: 1000%;
162 background-color: #888;
165 transform: translate(-05%, 0);
168 .video.thumb:hover img {
169 animation: thumbscroll 8s steps(10, end) infinite;
171 @keyframes thumbscroll {
172 from { transform: translate(-05%, 0);}
173 to { transform: translate(-105%, 0);}
178 top: 10.25em; width: 100%;
182 word-break: break-word;
186 .video.thumb .description {
188 left:0; right:0; bottom: 3.5em;
191 background-color: rgba(0,0,0,.75);
193 transition: height linear .25s;
195 .video.thumb .description:hover {