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: 0px;
  38     list-style: none;
  39 }
  40
  41 ul li:before {
  42     content: "\2022";
  43     margin-right: 1ch;
  44     margin-left: 1ch;
  45     font-weight: bold;
  46 }
  47
  48
  49 #stream-metabox {
  50     flex-direction: column;
  51     display: flex;
  52     min-height: 85vh;
  53     max-height: 85vh;
  54     background-color: #d5d5d5;
  55     padding-left: 15px;
  56     padding-right: 15px;
  57     padding-bottom: 0px;
  58     padding-top: 0px;
  59     overflow-y: auto;
  60 }
  61
  62 /*
  63  Alignment hack:
  64    http://stackoverflow.com/a/37515194
  65 */
  66 #stream-metabox > :first-child {
  67     margin-top: auto !important;
  68 }
  69
  70 #stream {
  71     background-color: #fbfbfb;
  72     padding-bottom: .25em;
  73 }
  74
  75
  76 .stream-entry {
  77     background-color: #fdfdfd;
  78     padding-left: 5px;
  79     padding-right: 5px;
  80     padding-top: 0px;
  81     padding-bottom: 0px;
  82     border-left-style: solid;
  83     border-left-width: 2px;
  84     border-left-color: #7b7b7b;
  85     margin-top: .5em;
  86     margin-bottom: 0px;
  87     margin-left: -2px;
  88     margin-right: 0px;
  89 }
  90
  91 .stream-entry p {
  92     margin-top: .25em;
  93     margin-bottom: 0px;
  94 }
  95
  96
  97 .self-sent {
  98     color: #494949;
  99     border-left-color: #b4b4b4;
 100 }
 101
 102 #connection-status.connected {
 103     color: #88be7e;
 104 }
 105
 106 #connection-status.disconnected {
 107     color: #be8b7e;
 108 }
 109 \f
 110
 111 #input-metabox {
 112     flex: 1;
 113     min-height: 15vh;
 114     max-height: 15vh;
 115     background-color: #414141;
 116     color: #d5d5d5;
 117     padding: 15px;
 118 }
 119
 120 #input-metabox input {
 121     border-top-left-radius: 8px;
 122     border-top-right-radius: 8px;
 123     border-bottom-left-radius: 8px;
 124     border-bottom-right-radius: 8px;
 125     border: 3px solid #e6e6e6;
 126     background-color: #ffffff;
 127     padding: 5px;
 128     width: 75%;
 129     font-family: 'Inconsolata', monospace;
 130     font-size: 12pt;
 131 }