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-color: rgba(0,0,0,.75);
- padding: .25em;
- border-bottom: 1pt solid;
- box-shadow: #000 0 .25em .5em;
+ background: inherit;
+ padding: .25em 12em;
text-align: center;
+ box-shadow: #000 .25em .25em .25em;
+ z-index: 1;
}
-header > * {
- display: inline-block;
+
+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 {
- float: right;
- margin: .125em .5em;
+ position: absolute;
+ right: 0; top: 31pt; max-height: 0;
+ width: 12em;
+ padding: 0 .5em;
+ text-align: center;
+ box-shadow: inherit;
+ transition: max-height linear .125s;
+}
+
+#user_login > * {
+ position: relative;
+ top: -2.5em;
+}
+#user_login > *:last-child {
+ margin-bottom: -2em;
+}
+header #user_login:hover {
+ max-height: 10em;
}
header #user_login > p {
- display: inline-block;
color: #EEE;
- font-size: .875em; line-height: 1.125em;
- max-width: 12em;
+ font-size: .875em;
+ line-height: 1.125em;
+}
+header #user_login > p span {
+ display: block;
+ font-size: initial;
+ line-height: 1.375em;
+}
+header #user_login label {
+ top: -1.5em;
+ font-size: 1.25em;
+ text-decoration: underline;
+ padding-bottom: 1em;
+ color: #EEE;
+ text-align: right;
+}
+header #user_login > * {
+ display: none;
+}
+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 {
box-shadow: #000 .125em .125em 1em;
}
+main nav {
+ font-size: .875em;
+ margin-top: -1em;
+}
+main nav > * {
+ padding: .125em .5em;
+ font-style: italic;
+ text-decoration: underline;
+}
+
body.channel main h1.name {
text-align: center;
}
-body.channel main .description {
+body.channel main .description,
+body.channel main form.edit,
+body.video main form.edit {
max-width: 40em;
margin: auto;
}
+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;
+}
+
body.channels main .channel {
border: 1pt solid;
border-radius: 4pt;
width: 140pt;
background-color: #FFF;
}
+
+body.channel .videos .video {
+ display: inline-block;
+}