git.plutz.net Git - rawnet/blob - rawnet.css

   1 body {
   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%);
   7 }
   8
   9 header {
  10   background: inherit;
  11   padding: .25em 12em;
  12   text-align: center;
  13   box-shadow: #000 .25em .25em .25em;
  14   z-index: 1;
  15 }
  16
  17 header > * { background: inherit; }
  18 header:before,
  19 header > *:before {
  20   content: ''; position: absolute;
  21   top: 0; right: 0; bottom: 0; left: 0;
  22   background-color: rgba(0,0,0,.75);
  23 }
  24
  25 header a { color: #8CE; }
  26
  27 header #user_login {
  28   position: absolute;
  29   right: 0; top: 31pt; max-height: 0;
  30   width: 12em;
  31   padding: 0 .5em;
  32   text-align: center;
  33   box-shadow: inherit;
  34   transition: max-height linear .125s;
  35 }
  36
  37 #user_login > * {
  38   position: relative;
  39   top: -2.5em;
  40 }
  41 #user_login > *:last-child {
  42   margin-bottom: -2em;
  43 }
  44 header #user_login:hover {
  45   max-height: 10em;
  46 }
  47 header #user_login > p {
  48   color: #EEE;
  49   font-size: .875em;
  50   line-height: 1.125em;
  51 }
  52 header #user_login > p span {
  53   display: block;
  54   font-size: initial;
  55   line-height: 1.375em;
  56 }
  57 header #user_login label {
  58   top: -1.5em;
  59   font-size: 1.25em;
  60   text-decoration: underline;
  61   padding-bottom: 1em;
  62   color: #EEE;
  63   text-align: right;
  64 }
  65 header #user_login > * {
  66   display: none;
  67 }
  68 header #user_login > :first-child,
  69 header #user_login:hover > * {
  70   display: block;
  71   margin-left: auto;
  72   margin-right: auto;
  73 }
  74 header #user_login:hover > a[href$="/register/"] {
  75   text-align: right;
  76   margin-top: .75em;
  77 }
  78
  79 main {
  80   background-color: rgba(255,255,255,.75);
  81   margin: 1em; padding: 1em;
  82   box-shadow: #000 .125em .125em 1em;
  83 }
  84
  85 main nav {
  86   font-size: .875em;
  87   margin-top: -1em;
  88 }
  89 main nav > * {
  90   padding: .125em .5em;
  91   font-style: italic;
  92   text-decoration: underline;
  93 }
  94
  95 body.channel main h1.name {
  96   text-align: center;
  97 }
  98 body main .description,
  99 body main form,
 100 body main iframe {
 101   display: block;
 102   max-width: 40em;
 103   margin: auto;
 104 }
 105
 106 body main form input[name=name],
 107 body main form input[name=email],
 108 body main form textarea {
 109   display: block;
 110   width: 100%;
 111   margin-bottom: .5em;
 112 }
 113
 114 body.channels main .channel {
 115   border: 1pt solid;
 116   border-radius: 4pt;
 117   padding: .5em;
 118   margin-bottom: .5em;
 119   height: 15em;
 120   overflow: hidden;
 121 }
 122
 123 body.channels main .channel > .description {
 124   overflow: hidden;
 125   margin-right: -.5%;
 126 }
 127 body.channels main .channel > .description h2 {
 128   margin: 0;
 129 }
 130
 131 .channel > .description, .video.thumb, .newvideo {
 132   display: inline-block;
 133   vertical-align: top;
 134   height: 14em;
 135   width: 99%; margin: 0 .5%;
 136   margin-bottom: 1em;
 137 }
 138
 139 .newvideo button {
 140   display: block;
 141   margin: 3em auto;
 142 }
 143
 144 .video.thumb:before, .newvideo:before {
 145   content: '';
 146   position: absolute;
 147   top: 0; left: 0; right:0; height: 11em;
 148   box-shadow: #000 .25em .25em .5em;
 149 }
 150
 151 @media(min-width:  24em) { .channel > .description, .video.thumb, .newvideo { max-width: 49%; } }
 152 @media(min-width:  44em) { .channel > .description, .video.thumb, .newvideo { max-width: 32%; } }
 153 @media(min-width:  64em) { .channel > .description, .video.thumb, .newvideo { max-width: 24%; } }
 154 @media(min-width:  84em) { .channel > .description, .video.thumb, .newvideo { max-width: 19%; } }
 155 @media(min-width: 104em) { .channel > .description, .video.thumb, .newvideo { max-width: 19em; } }
 156
 157 .video.thumb > a {
 158   display: block;
 159   color: inherit;
 160   font-style: inherit;
 161   text-decoration: inherit;
 162 }
 163
 164 .video.thumb figure {
 165   position: absolute; top: 0;
 166   height: 11em; width: 100%;
 167   overflow: hidden;
 168 }
 169 .video.thumb figure img {
 170   position: absolute; top: 0;
 171   height: 11em; min-width: 1000%;
 172   background-color: #888;
 173   max-width: unset;
 174   margin-left: 50%;
 175   transform: translate(-05%, 0);
 176   object-fit: cover;
 177 }
 178 .video.thumb:hover img {
 179   animation: thumbscroll 8s steps(10, end) infinite;
 180 }
 181 @keyframes thumbscroll {
 182   from { transform: translate(-05%, 0);}
 183   to   { transform: translate(-105%, 0);}
 184 }
 185
 186 .video.thumb h3 {
 187   position: absolute;
 188   top: 10.25em; width: 100%;
 189   height: 3em;
 190   font-weight: bolder;
 191   text-align: center;
 192   word-break: break-word;
 193   overflow: hidden;
 194 }
 195
 196 .video.thumb .duration {
 197   position: absolute;
 198   right: .375em; top: 10.625em;
 199   font-size: .875em;
 200   padding: 0 .25em;
 201   background-color: #333;;
 202   color: #EEE;
 203   opacity: .75;
 204 }
 205
 206 .video.thumb .description {
 207   position: absolute;
 208   left:0; right:0; bottom: 3.5em;
 209   font-size: .875em;
 210   max-height: 1em;
 211   background-color: rgba(0,0,0,.75);
 212   color: #EEE;
 213   transition: height linear .25s;
 214 }
 215 .video.thumb .description:hover {
 216   max-height: 8em;
 217 }
 218
 219 body.video.edit form > .delete {
 220   text-align: right;
 221 }
 222 body.video.edit form #delconfirm + label:after {
 223   content: '\0A';
 224   white-space: pre;
 225 }
 226 body.video.edit form #delconfirm + label + button {
 227   pointer-events: none;
 228   color: #AAA;
 229   border-color: #AAA;
 230   left: -.75em;
 231 }
 232 body.video.edit form #delconfirm:checked + label + button {
 233   pointer-events: auto;
 234   color: inherit;
 235   border-color: inherit;
 236   background-color: #FDD;
 237 }
 238
 239 body.video video {
 240   display: block;
 241   margin: 0 auto;
 242   max-height: 80vh;
 243 }
 244
 245 button, a.button {
 246   margin-top: .375em;
 247 }
 248
 249 body.channel .authors h3 {
 250   display: inline-block;
 251 }
 252 body.channel.edit .authors h3 {
 253   margin-bottom: 0;
 254   display: block;
 255 }
 256 body.channel .authors span:after {
 257   content: ',';
 258 }
 259 body.channel .authors span:last-child:after {
 260   content: '';
 261 }
 262
 263 body.channel.edit .authors input[name=author] {
 264   margin-left: .5em;
 265 }
 266 body.channel.edit .authors input[name=author] {
 267   z-index: 1;
 268 }
 269 body.channel.edit .authors input[name=author] + label {
 270   padding: .25em .5em .125em .25em;
 271   margin: 0 0 .5em 0;
 272   padding-left: 1.25em;
 273   margin-left: -1.25em;
 274   border: .5pt solid;
 275   background-color: rgba(255, 255, 255, .75);
 276 }
 277 body.channel.edit .authors input[name=author],
 278 body.channel.edit .authors input[name=author] + label {
 279   display: none;
 280 }
 281 body.channel.edit .authors input[name=author]:checked,
 282 body.channel.edit .authors input[name=author]:checked + label {
 283   display: inline-block;
 284 }
 285 body.channel.edit .authors input[id^=newauthor] + label {
 286   background-color: #FFF;
 287   border: 1pt solid;
 288   width: 1.5em; height: 1.5em;
 289   text-align: center;
 290 }
 291
 292 body.channel.edit .authors input[id^=newauthor] + label + input {
 293   vertical-align: middle;
 294 }
 295 body.channel.edit .authors input[id^=newauthor],
 296 body.channel.edit .authors input[id^=newauthor] + label,
 297 body.channel.edit .authors input[id^=newauthor] + label + input {
 298   display: none;
 299 }
 300 body.channel.edit .authors input[id^=newauthor0] + label {
 301   display: inline-block;
 302 }
 303 body.channel.edit .authors input[id^=newauthor]:checked + label + input,
 304 body.channel.edit .authors input[id^=newauthor]:checked + label + input + input + label {
 305   display: inline-block;
 306 }
 307 body.channel.edit .authors input[id^=newauthor]:checked + label,
 308 body.channel.edit .authors input[id^=newauthor]:checked + label + input + input:checked + label {
 309   display: none;
 310 }