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 }
  36 #settings h1 {
  37   background-color: #08b;
  38   margin: 0;
  39   padding: 0 1ex;
  40   font-size: 1em;
  41   font-weight: bold;
  42   border-bottom: 1px solid;
  43   border-radius: 1ex 1ex 0 0;
  44 }
  45 #settings a.settings {
  46   position: absolute;
  47   top: 0; right: 1px;
  48   background-color: #F88;
  49   border-left: 1px solid;
  50   border-radius: 0 1ex 0 0;
  51   width: 3ex;
  52   overflow: hidden;
  53 }
  54 #settings a.settings:before {
  55   content: "x";
  56   padding: 0 1ex;
  57 }
  58 #settings .error {
  59   padding: 1ex 1ex .5ex 1ex;
  60   background-color: #FCC;
  61   font-weight: bold;
  62 }
  63 #settings a.section {
  64   display: block;
  65   font-weight: bold;
  66   text-decoration: underline;
  67   margin: -1px 1px 0 0; padding: .5ex 1ex;
  68   border-top: 1px solid;
  69   background-color: #EEE;
  70 }
  71 #settings a.section + * {
  72   display: block;
  73   padding: .5ex 1ex 0 1ex;
  74   max-height: .5ex;
  75   overflow: hidden;
  76   transition: max-height .5s;
  77 }
  78 #settings .error.nick ~ a.section + #nick,
  79 #settings .error.register ~ a.section + #register,
  80 #settings a.section + #nick,
  81 #settings a.section + *:target {
  82   max-height: 20ex;
  83   padding: 1ex 1ex .5ex 1ex;
  84 }
  85 #settings input {margin-right: 1ex;}
  86
  87 form#channel {
  88   position: fixed;
  89   bottom: 1ex;
  90   left: .5ex; right: .5ex;
  91 }
  92 form#channel a.settings {
  93   display: inline-block;
  94 }
  95 form#channel a.settings:before {
  96   content: '\2699';
  97   padding: 0 .75ex;
  98   margin-left: .5ex;
  99   margin-right: 2em;
 100 }
 101 form#channel input[name=message] {
 102   display: inline-block;
 103   position: absolute;
 104   right: 0;
 105   width: calc(100% - 4.5ex);
 106 }
 107 form#channel button[value=submit] { display: none; }
 108
 109 #chat {
 110   position: fixed;
 111   bottom: 2em;
 112   left: 0; right: 0;
 113   padding: 1ex;
 114   margin: .5ex;
 115   z-index: -1;
 116 }
 117
 118 #chat p.message {
 119   margin-top: .25em;
 120 }
 121 #chat p.message > * {
 122   display: table-cell;
 123   color: #000;
 124   background-color: rgba(255, 255, 255, .5);
 125   line-height: 1.5em;
 126   padding: .125em 0 .125em .5em;
 127 }
 128
 129 #chat .message .date {
 130   color: #888;
 131   font-size: .75em;
 132 }
 133 #chat .message .nick .indicator {
 134   color: #888;
 135 }
 136 #chat .message .nick {
 137   font-weight: bold;
 138   white-space: nowrap;
 139 }
 140 #chat .message .message {
 141   border-radius: 0 .5em .5em 0;
 142   padding-right: .5em;
 143 }