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.channel main .description,
  99 body.channel main form.edit,
 100 body.video   main form.edit {
 101   max-width: 40em;
 102   margin: auto;
 103 }
 104
 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] {
 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 }
 120
 121 body.channels main .channel > h2,
 122 body.channels main .channel > .description {
 123   margin: 0;
 124   width: 140pt;
 125   background-color: #FFF;
 126 }
 127
 128 body.channel .videos .video {
 129   display: inline-block;
 130 }