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 a.section {
  63   display: block;
  64   font-weight: bold;
  65   text-decoration: underline;
  66   margin: -1px 1px 0 0; padding: .5ex 1ex;
  67   border-top: 1px solid;
  68   background-color: #EEE;
  69 }
  70 #settings a.section + * {
  71   display: block;
  72   padding: .5ex 1ex 0 1ex;
  73   max-height: .5ex;
  74   overflow: hidden;
  75   transition: max-height .5s;
  76 }
  77 #settings a.section + *:target {
  78   max-height: 20ex;
  79   padding: 1ex 1ex .5ex 1ex;
  80 }
  81 #settings input {margin-right: 1ex;}
  82
  83 form#channel {
  84   position: fixed;
  85   bottom: 1ex;
  86   left: .5ex; right: .5ex;
  87 }
  88 form#channel a.settings {
  89   display: inline-block;
  90 }
  91 form#channel a.settings:before {
  92   content: '\2699';
  93   padding: 0 .75ex;
  94   margin-left: .5ex;
  95   margin-right: 2em;
  96 }
  97 form#channel input[name=message] {
  98   display: inline-block;
  99   position: absolute;
 100   right: 0;
 101   width: calc(100% - 4.5ex);
 102 }
 103 form#channel button[value=submit] { display: none; }
 104 #chat .message .date {
 105   color: #888;
 106   font-size: .75em;
 107 }
 108
 109 #chat {
 110   position: fixed;
 111   bottom: 2em;
 112   left: 0; right: 0;
 113   border: 1px solid #08b;
 114   padding: 1ex;
 115   margin: .5ex;
 116   z-index: -1;
 117 }
 118
 119 #chat .message .nick {
 120   font-weight: bold;
 121 }
 122
 123 #chat .message .nick .indicator {
 124   color: #888;
 125 }