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 body {
  12   background-color: #FFF;
  13   color: #000;
  14 }
  15
  16 b, strong { font-weight: bold; }
  17 i, em { font-style: italic; }
  18
  19 input[type=text], input:not([type]) {
  20   border: 1px solid #08b;
  21   padding: .125ex .5ex;
  22 }
  23 button {
  24   border: outset #DDD;
  25   padding: .125ex 1ex;
  26   background-color: #EEE;
  27 }
  28
  29 #settings {
  30   display: block;
  31   position: fixed;
  32   min-width: 20%; max-width: 90%;
  33   width: 30em;
  34   top: 3em;
  35   left: 50%; transform: translate(-50%);
  36   background-color: #FFF;
  37   border: 1px solid;
  38   border-radius: 1ex 1ex .5ex .5ex;
  39 }
  40 #settings h1 {
  41   background-color: #08b;
  42   margin: 0;
  43   padding: 0 1ex;
  44   font-size: 1em;
  45   font-weight: bold;
  46   border-bottom: 1px solid;
  47   border-radius: 1ex 1ex 0 0;
  48 }
  49 #settings a.settings {
  50   position: absolute;
  51   top: 0; right: 1px;
  52   background-color: #F88;
  53   border-left: 1px solid;
  54   border-radius: 0 1ex 0 0;
  55   width: 3ex;
  56   overflow: hidden;
  57 }
  58 #settings a.settings:before {
  59   content: "x";
  60   padding: 0 1ex;
  61 }
  62 #settings .error {
  63   padding: 1ex 1ex .5ex 1ex;
  64   background-color: #FCC;
  65   font-weight: bold;
  66 }
  67 #settings a.section {
  68   display: block;
  69   font-weight: bold;
  70   text-decoration: underline;
  71   margin: -1px 1px 0 0; padding: .5ex 1ex;
  72   border-top: 1px solid;
  73   background-color: #EEE;
  74 }
  75 #settings a.section + * {
  76   display: block;
  77   padding: .5ex 1ex 0 1ex;
  78   max-height: .5ex;
  79   overflow: hidden;
  80   transition: max-height .5s;
  81 }
  82 #settings .error.nick ~ a.section + #nick,
  83 #settings .error.register ~ a.section + #register,
  84 #settings a.section + *:target {
  85   max-height: 20ex;
  86   padding: 1ex 1ex .5ex 1ex;
  87 }
  88 #settings input {margin-right: 1ex;}
  89
  90 form#channel {
  91   position: fixed;
  92   bottom: 1ex;
  93   left: .5ex; right: .5ex;
  94 }
  95 form#channel a.settings {
  96   display: inline-block;
  97 }
  98 form#channel a.settings:before {
  99   content: '\2699';
 100   padding: 0 .75ex;
 101   margin-left: .5ex;
 102   margin-right: 2em;
 103 }
 104 form#channel input[name=message] {
 105   display: inline-block;
 106   position: absolute;
 107   right: 0;
 108   width: calc(100% - 4.5ex);
 109 }
 110 form#channel button[value=submit] { display: none; }
 111 #chat .message .date {
 112   color: #888;
 113   font-size: .75em;
 114 }
 115
 116 #chat {
 117   position: fixed;
 118   bottom: 2em;
 119   left: 0; right: 0;
 120   border: 1px solid #08b;
 121   padding: 1ex;
 122   margin: .5ex;
 123   z-index: -1;
 124 }
 125
 126 #chat .message .nick {
 127   font-weight: bold;
 128 }
 129
 130 #chat .message .nick .indicator {
 131   color: #888;
 132 }