git.plutz.net Git - httpchat/blob - webchat.css

   1 * {
   2   box-sizing: border-box;
   3   font: normal normal normal medium/1.25 Sans-Serif;
   4   font: normal normal normal normal medium/1.25 Sans-Serif;
   5   text-decoration: none;
   6   margin: 0; padding: 0;
   7   border: none;
   8   color: inherit;
   9 }
  10
  11 b, strong { font-weight: bold; }
  12 i, em { font-style: italic; }
  13
  14 input[type=text], input:not([type]) {
  15   border: 1px solid #08b;
  16   padding: .125ex .5ex;
  17 }
  18 button {
  19   border: outset #DDD;
  20   padding: .125ex 1ex;
  21   background-color: #EEE;
  22 }
  23
  24 #settings {
  25   display: block;
  26   position: fixed;
  27   min-width: 20%; max-width: 90%;
  28   width: 30em;
  29   bottom: 12em;
  30   left: 50%; transform: translate(-50%);
  31   color: #000;
  32   background-color: #FFF;
  33   border: 1px solid;
  34   border-radius: 1ex 1ex .5ex .5ex;
  35   z-index: 2;
  36 }
  37 #settings h1 {
  38   background-color: #08b;
  39   margin: 0;
  40   padding: 0 1ex;
  41   font-size: 1em;
  42   font-weight: bold;
  43   border-bottom: 1px solid;
  44   border-radius: 1ex 1ex 0 0;
  45 }
  46 #settings a.settings {
  47   position: absolute;
  48   top: 0; right: 1px;
  49   background-color: #F88;
  50   border-left: 1px solid;
  51   border-radius: 0 1ex 0 0;
  52   width: 3ex;
  53   overflow: hidden;
  54 }
  55 #settings a.settings:before {
  56   content: "x";
  57   padding: 0 1ex;
  58 }
  59 #settings .error {
  60   padding: 1ex 1ex .5ex 1ex;
  61   background-color: #FCC;
  62   font-weight: bold;
  63 }
  64 #settings a.section {
  65   display: block;
  66   font-weight: bold;
  67   text-decoration: underline;
  68   margin: -1px 1px 0 0; padding: .5ex 1ex;
  69   border-top: 1px solid;
  70   background-color: #EEE;
  71 }
  72 #settings a.section + * {
  73   display: block;
  74   padding: .5ex 1ex 0 1ex;
  75   max-height: .5ex;
  76   overflow: hidden;
  77   transition: max-height .5s;
  78 }
  79 #settings .error.nick ~ a.section + #nick,
  80 #settings .error.register ~ a.section + #register,
  81 #settings a.section + .open,
  82 #settings a.section + *:target {
  83   max-height: 20ex;
  84   padding: 1ex 1ex .5ex 1ex;
  85 }
  86 #settings input {margin-right: 1ex;}
  87
  88 form#channel {
  89   position: fixed;
  90   bottom: 1ex;
  91   left: .5ex; right: .5ex;
  92 }
  93 form#channel a.settings {
  94   display: inline-block;
  95 }
  96 form#channel a.settings:before {
  97   content: '\2699';
  98   padding: 0 .75ex;
  99   margin-left: .5ex;
 100   margin-right: 2em;
 101 }
 102 form#channel input[name=message] {
 103   display: inline-block;
 104   position: absolute;
 105   right: 0;
 106   width: calc(100% - 4.5ex);
 107 }
 108 form#channel button[value=submit] { display: none; }
 109
 110 #chat {
 111   position: fixed;
 112   bottom: 2em;
 113   left: 0; right: 0;
 114   padding: 1ex;
 115   margin: .5ex;
 116   -z-index: -1;
 117 }
 118
 119 #chat p.message {
 120   margin-top: .25em;
 121 }
 122 #chat p.message > * {
 123   display: table-cell;
 124   color: #000;
 125   background-color: rgba(255, 255, 255, .5);
 126   line-height: 1.5em;
 127   padding: .125em 0 .125em .5em;
 128 }
 129
 130 #chat .message .date {
 131   color: #888;
 132   font-size: .75em;
 133 }
 134 #chat .message .nick .indicator {
 135   color: #888;
 136 }
 137 #chat .message .nick {
 138   font-weight: bold;
 139   white-space: nowrap;
 140 }
 141 #chat .message .message {
 142   border-radius: 0 .5em .5em 0;
 143   padding-right: .5em;
 144 }
 145
 146 #chat div.nicklist {
 147   position: fixed;
 148   top: 1em; bottom: 3em;
 149   right: 0; width: 1em;
 150   background-color: rgba(255, 255, 255, .875);
 151   padding: .5em;
 152   z-index: 1;
 153   border: 1px solid black;
 154   border-width: 1px 0 1px 1px;
 155   overflow-y: auto;
 156   white-space: nowrap;
 157 }
 158 #chat div.nicklist:hover {
 159   width: 20%;
 160   min-width: 10em;
 161   white-space: normal;
 162 }
 163 #chat div.nicklist h2 {
 164   font-weight: bold;
 165   border-bottom: 1px solid black;
 166 }
 167 #chat div.nicklist .nick {
 168   margin-top: .5em;
 169   display: block;
 170   line-height: 1.5em;
 171 }
 172 #chat div.nicklist a.nick {
 173   color: #00F;
 174 }
 175
 176 body.create,
 177 body.front {
 178   text-align: center;
 179 }
 180 body.create h1,
 181 body.front h1 {
 182   font-size: 1.25em;
 183   font-weight: bold;
 184   margin: 2em 1ex 1em 1ex;
 185 }
 186 body.front h2 {
 187   font-weight: bold;
 188   margin: 2em 1ex 1em 1ex;
 189 }
 190
 191 body.front label {
 192   font-weight: bold;
 193 }
 194
 195 body.front #channels {
 196   display: block;
 197   margin: auto;
 198   width: 20em; max-width: 100%;
 199   text-align: left;
 200 }
 201 body.front #channels a {
 202   display: block;
 203   color: #44F;
 204   text-decoration: underline;
 205   margin: .5em 0 0 0;
 206 }
 207
 208 body.create button {
 209   display: block;
 210   margin: 1em auto;
 211 }