body {
+ background-position: right;
background-size: 4pt 4pt;
background-image: /* #6AF #6FF */
linear-gradient( 0deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
}
header {
- background-size: inherit;
- background-position: right;
- background-image: /* #6AF #6FF */
- linear-gradient( 0deg, rgba(0,0,0,.75) 0% 100%),
- linear-gradient( 0deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
- linear-gradient(90deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
- linear-gradient( 0deg, #FFF 0% 100%);
- padding: .25em;
- box-shadow: #000 .25em .25em .25em;
+ background: inherit;
+ padding: .25em 12em;
text-align: center;
- padding-right: .25em 12em;
+ box-shadow: #000 .25em .25em .25em;
z-index: 1;
}
+header > * { background: inherit; }
+header:before,
+header > *:before {
+ content: ''; position: absolute;
+ top: 0; right: 0; bottom: 0; left: 0;
+ background-color: rgba(0,0,0,.75);
+}
+
+header a { color: #8CE; }
+
header #user_login {
- background-size: inherit;
- background-image: inherit;
- box-shadow: inherit;
position: absolute;
- right: 0; top: 30.5pt; max-height: 0;
+ right: 0; top: 31pt; max-height: 0;
+ width: 12em;
padding: 0 .5em;
- transition: max-height linear .125s;
text-align: center;
- width: 12em;
+ box-shadow: inherit;
+ transition: max-height linear .125s;
}
+
#user_login > * {
position: relative;
top: -2.5em;
}
header #user_login > p {
color: #EEE;
- font-size: .875em; line-height: 1.125em;
+ font-size: .875em;
+ line-height: 1.125em;
}
header #user_login > p span {
display: block;
font-size: initial;
line-height: 1.375em;
}
-header #user_login.login:before {
- display: block;
- content: "Login";
- position: relative;
+header #user_login label {
+ top: -1.5em;
font-size: 1.25em;
text-decoration: underline;
- top: -1.5em;
padding-bottom: 1em;
color: #EEE;
text-align: right;
}
-header #user_login input,
-header #user_login button {
+header #user_login > * {
display: none;
}
-header #user_login:hover input,
-header #user_login:hover button {
+header #user_login > :first-child,
+header #user_login:hover > * {
display: block;
margin-left: auto;
margin-right: auto;
}
+header #user_login:hover > a[href$="/register/"] {
+ text-align: right;
+ margin-top: .75em;
+}
main {
background-color: rgba(255,255,255,.75);
text-align: center;
}
body.channel main .description,
-body.channel main form.edit.channel {
+body.channel main form.edit,
+body.video main form.edit {
max-width: 40em;
margin: auto;
}
-body.channel main form.edit.channel input[name=name],
-body.channel main form.edit.channel textarea[name=description] {
+body.video main form.edit input[name=name],
+body.video main form.edit textarea[name=description],
+body.channel main form.edit input[name=name],
+body.channel main form.edit textarea[name=description] {
display: block;
width: 100%;
margin-bottom: .5em;
border-radius: 4pt;
padding: .5em;
margin-bottom: .5em;
+ height: 15em;
+ overflow: hidden;
}
-body.channels main .channel > h2,
body.channels main .channel > .description {
+ overflow: hidden;
+}
+body.channels main .channel > .description h2 {
margin: 0;
- width: 140pt;
- background-color: #FFF;
+}
+
+.channel > .description, .video.thumb, .newvideo {
+ display: inline-block;
+ vertical-align: top;
+ height: 14em;
+ width: 99%; margin: 0 .5%;
+ margin-bottom: 1em;
+}
+
+.newvideo button {
+ display: block;
+ margin: 3em auto;
+}
+
+.video.thumb:before, .newvideo:before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right:0; height: 11em;
+ box-shadow: #000 .25em .25em .5em;
+}
+
+@media(min-width: 24em) { .channel > .description, .video.thumb, .newvideo { max-width: 49%; } }
+@media(min-width: 44em) { .channel > .description, .video.thumb, .newvideo { max-width: 32%; } }
+@media(min-width: 64em) { .channel > .description, .video.thumb, .newvideo { max-width: 24%; } }
+@media(min-width: 84em) { .channel > .description, .video.thumb, .newvideo { max-width: 19%; } }
+@media(min-width: 104em) { .channel > .description, .video.thumb, .newvideo { max-width: 19em; } }
+
+.video.thumb figure {
+ position: absolute; top: 0;
+ height: 11em; width: 100%;
+ overflow: hidden;
+}
+.video.thumb figure img {
+ position: absolute; top: 0;
+ height: 11em; min-width: 1000%;
+ background-color: #888;
+ max-width: unset;
+ margin-left: 50%;
+ transform: translate(-05%, 0);
+ object-fit: cover;
+}
+.video.thumb:hover img {
+ animation: thumbscroll 8s steps(10, end) infinite;
+}
+@keyframes thumbscroll {
+ from { transform: translate(-05%, 0);}
+ to { transform: translate(-105%, 0);}
+}
+
+.video.thumb h3 {
+ position: absolute;
+ top: 10.25em; width: 100%;
+ height: 3em;
+ font-weight: bolder;
+ text-align: center;
+ word-break: break-word;
+ overflow: hidden;
+}
+
+.video.thumb .duration {
+ position: absolute;
+ right: .375em; top: 10.625em;
+ font-size: .875em;
+ padding: 0 .25em;
+ background-color: #333;;
+ color: #EEE;
+ opacity: .75;
+}
+
+.video.thumb .description {
+ position: absolute;
+ left:0; right:0; bottom: 3.5em;
+ font-size: .875em;
+ max-height: 1em;
+ background-color: rgba(0,0,0,.75);
+ color: #EEE;
+ transition: height linear .25s;
+}
+.video.thumb .description:hover {
+ max-height: 8em;
}