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

   1 * {
   2   box-sizing: border-box;
   3   background-color: #FFF;
   4   color: #000;
   5   font: normal normal normal medium/1.25 Sans-Serif;
   6   font: normal normal normal normal medium/1.25 Sans-Serif;
   7   text-decoration: none;
   8   margin: 0; padding: 0;
   9   border: none;
  10 }
  11
  12 #chat {
  13   position: fixed;
  14   bottom: 2.5em;
  15   left: 0; right: 0;
  16   border: 1px solid #08b;
  17   padding: 1ex;
  18   margin: .5ex;
  19   z-index: -1;
  20 }
  21 form#channel {
  22   position: fixed;
  23   bottom: 0;
  24   left: 0; right: 0;
  25 }
  26
  27 #check_settings { display: none; }
  28 #check_settings + label {
  29   display: inline-block;
  30 }
  31 #check_settings + label:before {
  32   content: '\2699';
  33   padding: .5ex;
  34   margin-left: .5ex;
  35   margin-right: 2em;
  36 }
  37 #check_settings + label + #settings { display: none; }
  38 #check_settings:checked + label + #settings {
  39   display: block;
  40   position: fixed;
  41   min-width: 20%; max-width: 90%;
  42   width: 30em;
  43   top: 3em;
  44   left: 50%; transform: translate(-50%);
  45   background-color: #FFF;
  46   border: 1px solid;
  47   border-radius: 1ex 1ex .5ex .5ex;
  48 }
  49 #settings h1 {
  50   background-color: #08b;
  51   margin: 0;
  52   padding: 0 1ex;
  53   font-size: 1em;
  54   font-weight: bold;
  55   border-bottom: 1px solid;
  56   border-radius: 1ex 1ex 0 0;
  57 }
  58 #settings label[for=check_settings] {
  59   position: absolute;
  60   top: 0; right: 1px;
  61   background-color: #F88;
  62   border-left: 1px solid;
  63   border-radius: 0 1ex 0 0;
  64   width: 3ex;
  65   overflow: hidden;
  66 }
  67 #settings label[for=check_settings]:before {
  68   content: "x";
  69   padding: 0 1ex;
  70 }
  71 #settings input[type=radio] { display: none; }
  72 #settings input[type=radio] + label + * { display: none; }
  73 #settings input[type=radio]:checked + label + * { display: block; }
  74 #settings input[type=radio] + label {
  75   display: block;
  76   font-weight: bold;
  77   text-decoration: underline;
  78   margin: -1px 1px; padding: 0 1ex;
  79   border-top: 1px solid;
  80   background-color: #EEE;
  81 }
  82 #settings input[type=radio] + label + * {
  83   padding: 1ex 1ex .5ex 1ex;
  84 }
  85
  86 form#channel input[name=message] {
  87   display: inline-block;
  88   position: absolute;
  89   left: 4.5ex;
  90   width: calc(100% - 5ex - 1px);
  91 }
  92 form#channel button[value=submit] { display: none; }
  93 #chat .message .date {
  94   color: #888;
  95   font-size: .75em;
  96 }
  97 #chat .message .nick {
  98   font-weight: bold;
  99 }
 100 #chat .message .nick .indicator {
 101   color: #888;
 102 }