style.css

   1
   2 @font-face {
   3     font-family: Jura;
   4     font-weight: normal;
   5     src: url(fonts/Jura-Regular.ttf);
   6 }
   7
   8 @font-face {
   9     font-family: Jura;
  10     font-weight: bold;
  11     src: url(fonts/Jura-DemiBold.ttf);
  12 }
  13
  14 @font-face {
  15     font-family: Vollkorn;
  16     font-weight: normal;
  17     src: url(fonts/Vollkorn-Regular.ttf);
  18 }
  19
  20 @font-face {
  21     font-family: Vollkorn;
  22     font-weight: bold;
  23     src: url(fonts/Vollkorn-Bold.ttf);
  24 }
  25
  26 @font-face {
  27     font-family: Vollkorn;
  28     font-style: italic;
  29     src: url(fonts/Vollkorn-Italic.ttf);
  30 }
  31
  32 @font-face {
  33     font-family: Vollkorn;
  34     font-weight: bold;
  35     font-style: italic;
  36     src: url(fonts/Vollkorn-BoldItalic.ttf);
  37 }
  38
  39 * { margin: 0; padding: 0; box-sizing: border-box; /* position: absolute; */ /* right: 20px; */}
  40 body { font-family: Jura; }
  41
  42 #roster {
  43     float: left;
  44     width: 220px;
  45     background: #eee;
  46     height: 100%;
  47     padding: 20px 10px;
  48     position: fixed;
  49     overflow-x: hidden;
  50     overflow-y: auto;
  51 }
  52
  53 #roster h {
  54     text-transform: uppercase;
  55     font-weight: bold;
  56     line-height:30px
  57 }
  58
  59 #roster .buddy {
  60     line-height: 26px;
  61     cursor: pointer;
  62     margin-bottom: 5px;
  63     padding: 0 10px;
  64     position: relative;
  65     border-left: solid 3px transparent;
  66     border-radius: 5px 0 0 5px;
  67 }
  68
  69 #roster .buddy:hover {
  70     background: #fff;
  71 }
  72
  73 #roster .buddy.selected {
  74     border-left: solid 3px #333;
  75     background: white;
  76     margin-right: -10px;
  77 }
  78
  79 #roster .buddy .name {
  80     display: inline-block;
  81 }
  82
  83 #roster .buddy[data-pending="true"] .name {
  84     font-weight: bold;
  85 }
  86
  87 #roster .buddy .pending {
  88     background: #333;
  89     width: 30px;
  90     color: #eee;
  91     font-weight: bold;
  92     text-align: center;
  93     border-radius: 15px;
  94     line-height: 20px;
  95     position: absolute;
  96     top: 3px;
  97     right: 5px;
  98 }
  99
 100 #roster .buddy .icon {
 101     display: inline-block;
 102     width: 7px;
 103     height: 7px;
 104     border-radius: 5px;
 105     vertical-align: middle;
 106     margin-right: 5px;
 107 }
 108
 109 #roster .buddy[data-state="available"] .icon {
 110     background: #3f3;
 111 }
 112
 113 #roster .buddy[data-state="unavailable"] .icon {
 114     background: #f33;
 115 }
 116
 117 #connection {
 118     position: absolute;
 119     top: 0px;
 120     right: 0px;
 121     background: #eee;
 122     padding: 10px 10px 20px 20px;
 123     width: 190px;
 124     line-height: 20px;
 125     border-radius: 0 0 0 15px;
 126     z-index: 1;
 127 }
 128
 129 #connection .icon {
 130     width: 10px;
 131     height: 10px;
 132     border-radius: 8px;
 133     display: inline-block;
 134     margin-right: 10px;
 135     vertical-align: middle;
 136 }
 137
 138 #connection[data-state="offline"] .icon {
 139     background: #e05;
 140 }
 141
 142 #connection[data-state="connecting"] .icon {
 143     background: #ee3;
 144 }
 145
 146 #connection[data-state="connected"] .icon {
 147     background: #33e;
 148 }
 149
 150 #connection[data-state="online"] .icon {
 151     background: #3e0;
 152 }
 153
 154 #connection .name {
 155     font-weight: bold;
 156     display: inline-block;
 157 }
 158
 159 #connection .toggle-controls {
 160     right: 20px;
 161     top: 15px;
 162     position: absolute;
 163     cursor: pointer;
 164 }
 165
 166 #connection .toggle-controls[data-toggled="true"] {
 167     color: #ddd;
 168 }
 169
 170 #conversation {
 171     height: 100%;
 172     margin-left: 250px;
 173     position: relative;
 174 }
 175
 176 #conversation .message-log {
 177     max-height:
 178 }
 179
 180 #conversation .close {
 181     display: none;
 182 }
 183
 184 #conversation .editor {
 185     position: absolute;
 186     width: 90%;
 187     bottom: 0;
 188     left: -30px;
 189     border-right: solid 3px #333;
 190     border-top: solid 1px #333;
 191     border-radius: 0 15px 0 0;
 192 }
 193
 194 #conversation .editor textarea {
 195     border: none;
 196     font-family: inherit;
 197     display: block;
 198     outline: none;
 199     width: 100%;
 200     background: none;
 201     line-height: 20px;
 202     padding: 10px;
 203 }
 204
 205 #conversation .message-log {
 206     max-height: 80%;
 207     width: 100%;
 208     overflow: auto;
 209 }
 210
 211 #conversation .message {
 212     margin-top: 10px;
 213     position: relative;
 214 }
 215
 216 #conversation .message .time {
 217     position: absolute;
 218     top: 0;
 219     right: 30px;
 220 }
 221
 222 #conversation .message .time:before { content: '[ '; font-weight: bold; }
 223 #conversation .message .time:after { content: ' ]'; font-weight: bold; }
 224
 225 #conversation .message .from {
 226     font-weight:bold;
 227 }
 228
 229 #conversation .message .body {
 230     font-family: Vollkorn;
 231     padding: 10px 0 5px 7px;
 232 }
 233
 234 @media (max-width: 800px) {
 235     #connection {
 236         left:0px;
 237         right:initial;
 238         z-index: 1;
 239         border-bottom: solid 2px black;
 240         border-radius: 0 0 15px 15px;
 241         width: 220px;
 242     }
 243
 244     #roster {
 245         padding-top: 60px;
 246     }
 247 }
 248
 249 @media (max-width: 600px) {
 250     body { overflow: hidden; }
 251
 252     body[data-panel="roster"] #conversation {
 253         margin-left: 100%;
 254         overflow: hidden;
 255         border: none;
 256         -webkit-animation: hide-conversation ease-in-out 0.5s;
 257     }
 258
 259     body[data-panel="roster"] #conversation * {
 260         margin-left: 100%;
 261         -webkit-animation: hide-conversation ease-in-out 0.5s;
 262     }
 263
 264     body[data-panel="roster"] #connection, body[data-panel="roster"] #roster {
 265         width: 100%;
 266         -webkit-animation: show-roster ease-in-out 0.5s;
 267     }
 268
 269     body[data-panel="conversation"] #connection, body[data-panel="conversation"] #roster {
 270         margin-left: -100%;
 271         overflow: hidden;
 272         -webkit-animation: hide-roster ease-in-out 0.5s;
 273    }
 274
 275     body[data-panel="conversation"] #conversation {
 276         width: 100%;
 277         margin-left: 5px;
 278         -webkit-animation: show-conversation ease-in-out 0.5s;
 279     }
 280
 281     body[data-panel="conversation"] #conversation .editor {
 282         left: -5px;
 283         width: 100%;
 284         border-right: none;
 285         border-radius: 0;
 286     }
 287
 288     body[data-panel="conversation"] #conversation .close {
 289         display: block;
 290         float: left;
 291         padding: 5px 15px;
 292         margin: 5px 10px 5px 0;
 293     }
 294
 295     @-webkit-keyframes hide-conversation {
 296         from { margin-left: 0%; }
 297         to { margin-left: 100%; }
 298     }
 299
 300     @-webkit-keyframes show-conversation {
 301         from { margin-left: 100%; }
 302         to { margin-left: 0%; }
 303     }
 304
 305
 306     @-webkit-keyframes hide-roster {
 307         from { margin-left: 0%; }
 308         to { margin-left: -100%; }
 309     }
 310
 311     @-webkit-keyframes show-roster {
 312         from { margin-left: -100%; }
 313         to { margin-left: 0%; }
 314     }
 315
 316 }