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

   1 body {
   2   background-size: 4pt 4pt;
   3   background-image: /* #6AF #6FF */
   4     linear-gradient( 0deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
   5     linear-gradient(90deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%);
   6 }
   7
   8 header {
   9   background-size: inherit;
  10   background-position: right;
  11   background-image: /* #6AF #6FF */
  12     linear-gradient( 0deg, rgba(0,0,0,.75) 0% 100%),
  13     linear-gradient( 0deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
  14     linear-gradient(90deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
  15     linear-gradient( 0deg, #FFF 0% 100%);
  16   padding: .25em;
  17   box-shadow: #000 .25em .25em .25em;
  18   text-align: center;
  19   padding-right: .25em 12em;
  20   z-index: 1;
  21 }
  22
  23 header #user_login {
  24   background-size: inherit;
  25   background-image: inherit;
  26   box-shadow: inherit;
  27   position: absolute;
  28   right: 0; top: 30.5pt; max-height: 0;
  29   padding: 0 .5em;
  30   transition: max-height linear .125s;
  31   text-align: center;
  32   width: 12em;
  33 }
  34 #user_login > * {
  35   position: relative;
  36   top: -2.5em;
  37 }
  38 #user_login > *:last-child {
  39   margin-bottom: -2em;
  40 }
  41 header #user_login:hover {
  42   max-height: 10em;
  43 }
  44 header #user_login > p {
  45   color: #EEE;
  46   font-size: .875em; line-height: 1.125em;
  47 }
  48 header #user_login > p span {
  49   display: block;
  50   font-size: initial;
  51   line-height: 1.375em;
  52 }
  53 header #user_login.login:before {
  54   display: block;
  55   content: "Login";
  56   position: relative;
  57   font-size: 1.25em;
  58   text-decoration: underline;
  59   top: -1.5em;
  60   padding-bottom: 1em;
  61   color: #EEE;
  62   text-align: right;
  63 }
  64 header #user_login input,
  65 header #user_login button {
  66   display: none;
  67 }
  68 header #user_login:hover input,
  69 header #user_login:hover button {
  70   display: block;
  71   margin-left: auto;
  72   margin-right: auto;
  73 }
  74
  75 main {
  76   background-color: rgba(255,255,255,.75);
  77   margin: 1em; padding: 1em;
  78   box-shadow: #000 .125em .125em 1em;
  79 }
  80
  81 main nav {
  82   font-size: .875em;
  83   margin-top: -1em;
  84 }
  85 main nav > * {
  86   padding: .125em .5em;
  87   font-style: italic;
  88   text-decoration: underline;
  89 }
  90
  91 body.channel main h1.name {
  92   text-align: center;
  93 }
  94 body.channel main .description,
  95 body.channel main form.edit.channel {
  96   max-width: 40em;
  97   margin: auto;
  98 }
  99
 100 body.channel main form.edit.channel input[name=name],
 101 body.channel main form.edit.channel textarea[name=description] {
 102   display: block;
 103   width: 100%;
 104   margin-bottom: .5em;
 105 }
 106
 107 body.channels main .channel {
 108   border: 1pt solid;
 109   border-radius: 4pt;
 110   padding: .5em;
 111   margin-bottom: .5em;
 112 }
 113
 114 body.channels main .channel > h2,
 115 body.channels main .channel > .description {
 116   margin: 0;
 117   width: 140pt;
 118   background-color: #FFF;
 119 }