data/web-static/css/main.css

   1 @font-face {
   2     font-family: 'Inconsolata';
   3     font-style: normal;
   4     font-weight: 400;
   5     src: local('Inconsolata-Regular'), local('Inconsolata'), local('Inconsolata Regular'), url('../fonts/inconsolata/Inconsolata-Regular.ttf');
   6 }
   7
   8 @font-face {
   9     font-family: 'Inconsolata';
  10     font-style: normal;
  11     font-weight: 700;
  12     src: local('Inconsolata-Bold'), local('Inconsolata Bold'), url('../fonts/inconsolata/Inconsolata-Bold.ttf');
  13 }
  14
  15 *, *:before, *:after {
  16     box-sizing: border-box;
  17 }
  18
  19 body {
  20     height: 100%;
  21     display: flex;
  22     flex-direction: column;
  23     border: 0px;
  24     margin: 0px;
  25     font-family: 'Inconsolata', monospace;
  26     font-size: 12pt;
  27 }
  28
  29 span.pre-ish {
  30     font-size: 12pt;
  31     white-space: pre-wrap;
  32 }
  33
  34 ul {
  35     margin-top: .25em;
  36     margin-bottom: .25em;
  37     padding-left: 2ch;
  38     list-style: none;
  39 }
  40
  41 ul li:before {
  42     content: "\2022";
  43     margin-right: 1ch;
  44     font-weight: bold;
  45 }
  46
  47
  48 #stream-metabox {
  49     flex-direction: column;
  50     display: flex;
  51     min-height: 85vh;
  52     max-height: 85vh;
  53     background-color: #d5d5d5;
  54     padding-left: 15px;
  55     padding-right: 15px;
  56     padding-bottom: 0px;
  57     padding-top: 0px;
  58     overflow-y: auto;
  59 }
  60
  61 /*
  62  Alignment hack:
  63    http://stackoverflow.com/a/37515194
  64 */
  65 #stream-metabox > :first-child {
  66     margin-top: auto !important;
  67 }
  68
  69 #stream {
  70     background-color: #fbfbfb;
  71     padding-bottom: .25em;
  72 }
  73
  74
  75 .stream-entry {
  76     background-color: #fdfdfd;
  77     padding-left: 5px;
  78     padding-right: 5px;
  79     padding-top: 0px;
  80     padding-bottom: 0px;
  81     border-left-style: solid;
  82     border-left-width: 2px;
  83     border-left-color: #7b7b7b;
  84     margin-top: .5em;
  85     margin-bottom: 0px;
  86     margin-left: -2px;
  87     margin-right: 0px;
  88 }
  89
  90 .stream-entry p {
  91     margin-top: .25em;
  92     margin-bottom: 0px;
  93 }
  94
  95
  96 .self-sent {
  97     color: #494949;
  98     border-left-color: #b4b4b4;
  99 }
 100
 101 #connection-status.connected {
 102     color: #88be7e;
 103 }
 104
 105 #connection-status.disconnected {
 106     color: #be8b7e;
 107 }
 108 \f
 109
 110 #input-metabox {
 111     flex: 1;
 112     min-height: 15vh;
 113     max-height: 15vh;
 114     background-color: #414141;
 115     color: #d5d5d5;
 116     padding: 15px;
 117 }
 118
 119 #input-metabox input {
 120     border-top-left-radius: 8px;
 121     border-top-right-radius: 8px;
 122     border-bottom-left-radius: 8px;
 123     border-bottom-right-radius: 8px;
 124     border: 3px solid #e6e6e6;
 125     background-color: #ffffff;
 126     padding: 5px;
 127     width: 75%;
 128     font-family: 'Inconsolata', monospace;
 129     font-size: 12pt;
 130 }