client/assets/css/style.css

   1 * { margin:0px; padding:0px; }
   2 html, body { height:100%; }
   3 p { margin:0.5em 0; }
   4 a { color:#36C; text-decoration:none; cursor:pointer; }
   5 a img { border:none; }
   6
   7
   8
   9
  10 #kiwi {
  11     overflow:hidden; position:relative;
  12     height:100%;
  13     background: url(../img/background-light.png) left top repeat-x #E3E3E3;
  14     color: #555555;
  15 }
  16
  17 #kiwi, #kiwi input, #kiwi button, #kiwi textarea {
  18     font-family:Arial, Helvetica, sans-serif;
  19     font-size:14px; line-height:1.4em;
  20 }
  21
  22
  23
  24 #kiwi input, textarea {
  25     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5),0 1px 0px rgba(255, 255, 255, 0.3);
  26     border: none;
  27     border-radius: 3px;
  28 }
  29
  30 /**
  31  * Main layout blocks
  32  */
  33 #toolbar { position:absolute; top:0px; width:100%; background-color:#1B1B1B; font-size:0.9em; display:none; }
  34 #panels { position:absolute; left:0px; right:200px; bottom:100px; top:100px; }
  35 #memberlists { position:absolute; right:0px; width:200px; bottom:100px; top:100px; overflow-y:auto; }
  36 #controlbox { position: absolute; bottom:0px; width:100%; background-color:#1B1B1B; display:none; }
  37 #memberlists_resize_handle {
  38     position: absolute; width:10px; z-index:1; cursor:w-resize;
  39     background:url('../img/resize_handle.png') no-repeat; background-position:center;
  40 }
  41
  42
  43 #toolbar #tabs { margin-right: 200px; }
  44 #toolbar .panellist {
  45     overflow: hidden;
  46     white-space: nowrap;
  47     display:block;
  48     /*height: 35px;*/
  49 }
  50 #toolbar .panellist li {
  51     float: left; list-style: inline;
  52     display:inline; position:relative;
  53     padding:5px; margin:3px;
  54     border: 1px solid #333;
  55     background-color: #eee;
  56
  57     cursor: pointer;
  58
  59     line-height: 1.4em;
  60     vertical-align: middle;
  61
  62     border-radius:5px;
  63     -moz-border-radius:5px;
  64     -webkit-border-radius:5px;
  65     -khtml-border-radius:5px;
  66     behavior: url(border-radius.htc);
  67
  68         background-image: -webkit-gradient(
  69             linear,
  70             left top,
  71             left bottom,
  72             color-stop(0.38, rgb(238,238,238)),
  73             color-stop(0.68, rgb(209,209,209))
  74         );
  75         background-image: -moz-linear-gradient(
  76             center top,
  77             rgb(238,238,238) 38%,
  78             rgb(209,209,209) 68%
  79         );
  80 }
  81
  82 #toolbar .panellist .active { padding-right:23px; }
  83 #toolbar .panellist .alert_highlight {
  84     background: #990000;
  85     font-weight: bold;
  86 }
  87 #toolbar .panellist .alert_activity { font-weight: bold; background: #009900; }
  88 #toolbar .panellist .alert_action { font-weight: bold; }
  89
  90 #toolbar .panellist li .part { top:8px; right:5px; position:absolute; background:url('../img/redcross.png'); width:14px; height:14px; }
  91 #toolbar .panellist li img.icon { left:5px; top:2px; height:auto; width:auto; }
  92
  93 #toolbar .panellist li.server span { background:url(../img/server_tab.png) no-repeat; padding-left:23px; }
  94 #toolbar .panellist li span  { line-height:20px; vertical-align:middle; display:block; }
  95 #status_message {
  96     background: #FEEFB3; color: #9F6000;
  97     border-bottom: 1px solid;
  98     padding: 0.9em;
  99     text-align: center; font-size:1.1em;
 100 }
 101 #status_message.err { color:#D8000C; background:#FFBABA; }
 102
 103
 104 .panel_container { overflow-y:auto; height:100%; }
 105
 106
 107
 108 .messages {
 109     overflow-x:wrap;
 110     border:none; display: none;
 111     /*height: 100%;*/
 112     color: #333333;
 113 }
 114 .messages a {
 115     text-decoration:none;
 116 }
 117 .messages.active { display:block; }
 118
 119 .messages .msg { border-bottom: 1px solid #CCC; padding:1px; font-family:arial; font-size:0.9em; }
 120 .messages .msg .time { width:6em; float:left; color:#777; }
 121 .messages .msg .nick { width:7em; text-align:right; float:left; font-size:12px; }
 122 .messages .msg .text { margin-left:15em; white-space:pre-wrap; word-wrap:break-word; font-family:monospace;  }
 123
 124 .messages .msg.action .nick { display:none; }
 125 .messages .msg.action .text { margin-left:9em; color:#009900; font-style:italic; }
 126 .messages .msg.action.join { color:#009900; }
 127 .messages .msg.action.part .text { color:#900; }
 128 .messages .msg.action.quit .text { color:#900; }
 129 .messages .msg.action.kick .text { color:#900; }
 130 .messages .msg.status .nick { display:none; }
 131 .messages .msg.status .text { color:#990000; margin-left:9em; font-weight:bold; }
 132 .messages .msg.topic .nick { display:none; }
 133 .messages .msg.topic .text { color:#009900; margin-left:9em; font-style: italic; }
 134 /*.messages .msg.motd .nick { display:none; }*/
 135 .messages .msg.motd { border:none; }
 136 .messages .msg.motd .text { color:#666; }
 137 .messages .msg.whois .nick { font-weight:normal; }
 138 .messages .msg.whois .text { margin-left:18em; padding-left:1em; border-left:1px dashed #999; }
 139 .messages .msg.error .text {
 140     border:1px solid #A33F3F; background-color:#D28A8A;
 141     padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
 142 }
 143
 144
 145
 146 #memberlists ul { list-style: none; display:none; }
 147 #memberlists ul.active { display:block; }
 148 #memberlists ul li { padding: 0.2em 1em; overflow-y:auto; overflow-x:hidden; cursor:pointer; }
 149 #memberlists ul li a.nick { display:block; color:black; }
 150
 151 #memberlists ul li .userbox { position:relative; margin:0 1em 5px 1em; padding-bottom:0.7em; font-size:.9em; }
 152 #memberlists ul li .userbox a { display:block; text-decoration:none; margin-bottom:2px; }
 153 #memberlists ul li .userbox a i { font-size:1.1em; margin-right:5px; }
 154
 155
 156 #controlbox .input {
 157     background:#fff; margin:3px;
 158     height:1.7em;
 159     border-radius:5px;
 160     -moz-border-radius:5px;
 161     -webkit-border-radius:5px;
 162     -khtml-border-radius:5px;
 163 }
 164 #controlbox .input .nick { text-align: right; width:11em; left:0px; position:absolute; padding:2px; cursor: pointer; }
 165 #controlbox .input .nick a { text-decoration:none; color:black; }
 166 #controlbox .input .input_wrap {
 167     position:absolute;
 168     right:7px; left: 12.2em;
 169     height:1.7em;
 170 }
 171 #controlbox .input .inp {
 172     line-height:1.7em;
 173     display: block;
 174     border: medium none;
 175     box-shadow: none;
 176     border-radius: 0;
 177     outline:none; resize:none;
 178     overflow:hidden;
 179     position:relative;
 180     height:100%; width:100%;
 181 }
 182
 183 #controlbox .nickchange {
 184     position: absolute;
 185     left: 0px;
 186     background: #1B1B1B; color:#eeeeee;
 187     padding:10px;
 188 }
 189 #controlbox .nickchange input { padding:0.3em 0.5em; }
 190 #controlbox .nickchange button { padding:0.5em; }
 191
 192
 193
 194 #topic { background-color:#1B1B1B; height:2em; position:relative; }
 195 #topic div {
 196     position:absolute;
 197     top:2; bottom:2px; left:0; width:100%;
 198     padding: 0.2em 1em;
 199     text-align: center;
 200     box-shadow: none;
 201     border-radius: 0;
 202     background-color:#FFF;
 203     height: 1.5em;
 204     overflow: hidden;
 205     outline: none;
 206 }
 207
 208
 209
 210
 211
 212
 213 .server_select { width:730px;  padding:3em 0 2em 0; margin: 0 auto; overflow:hidden; }
 214 .server_select .more { display: none; width:270px; margin:0 auto; }
 215 .server_select button { float:right; padding:3px 7px; margin-top:10px; }
 216 .server_select input { float:right; margin-bottom:5px; padding:3px 7px; width:150px; }
 217 .server_select label { float:left; width:5em; padding-top:3px }
 218 .server_select br { clear:both; }
 219 .server_select .basic input, .server_select .basic button { font-size:1em; padding:0.5em 1em; }
 220 .server_select .basic input { width:170px; }
 221 .server_select .basic label { font-size:1.3em; margin-top:4px; }
 222 .server_select .basic { border-bottom: 1px dashed gray; margin-bottom:1em; }
 223 .server_select .basic .show_more { display: block; width:40px; margin:10px 0 0 0; font-size:0.8em; background: url(../img/more.png) no-repeat right 7px; }
 224 .server_select .status { text-align: center; font-weight: bold; padding:1em; }
 225 .server_select .status .ok {
 226     border:1px solid #A33F3F; background-color:#D28A8A;
 227     padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
 228 }
 229
 230
 231
 232
 233 .server_select .kiwi_logo { text-align: center; display:block; }
 234 .server_select .kiwi_logo h1 {
 235     font-size:20px;
 236     line-height:48px; vertical-align: middle;
 237     color: #555555;
 238 }
 239 .server_select .kiwi_logo img { }
 240
 241
 242
 243 #toolbar .app_tools { float:right; width:200px; padding-left:10px; color:#D4D4D4; }
 244 #toolbar .app_tools ul li {
 245     display:inline;
 246     font-size:26px;
 247     cursor:pointer;
 248     -webkit-transition: all .3s ease;
 249     -moz-transition: all .3s ease;
 250     transition: all .3s ease;
 251     margin-left:10px;
 252 }
 253 #toolbar .app_tools ul li:hover { color:#88C56A; }
 254 #toolbar .app_tools img { height:25px; width:25px; margin: 6px 0.7em 0 0; }
 255
 256
 257
 258
 259 #kiwi .settings {
 260     width:900px;
 261     margin:1em auto;
 262 }
 263 #kiwi .settings table td {
 264     padding:0.5em 1em;
 265 }
 266
 267
 268
 269
 270 /**
 271  * Reusable componants
 272  */
 273
 274 .divider-verticle {
 275     border-left: 1px solid #CFCFCF;
 276     border-right: 1px solid #FFFFFF;
 277     position: absolute;
 278     top:25px; bottom:25px;
 279     right:0;
 280     width:0;
 281 }
 282
 283 .divider-horizontal {
 284     border-top: 1px solid #CFCFCF;
 285     border-bottom: 1px solid #FFFFFF;
 286     position: absolute;
 287     left:25px; right:25px;
 288     bottom:0;
 289     height:0;
 290 }
 291
 292
 293
 294
 295
 296 /**
 297  * Themes
 298  */
 299
 300
 301 /* Default */
 302 #kiwi #memberlists {
 303     background-color: #DADADA;
 304     border-left: 1px solid #8A8A8A;
 305 }
 306 #kiwi #memberlists ul li:hover {
 307     border-left: 5px solid #88C56A;
 308     /* background: #88C56A; */
 309     -webkit-transition: 0.2s ease;
 310     -moz-transition: 0.2s ease;
 311     -ms-transition: 0.2s ease;
 312     -o-transition: 0.2s ease;
 313     transition: 0.2s ease;
 314 }
 315
 316
 317
 318
 319 /* Relaxed theme */
 320 #kiwi.theme_relaxed .messages .msg { border-bottom: 1px solid #DEDEDE; font-family:arial; font-size:0.9em; }
 321 #kiwi.theme_relaxed .messages .msg .time { width:6em; float:left; color:#777; display:none; }
 322 #kiwi.theme_relaxed .messages .msg .nick { width:11em; float:left; font-size:12px; font-family:Arial; text-align:left; padding: 5px; }
 323 #kiwi.theme_relaxed .messages .msg .text { margin-left:12em; border-left: 1px solid #DEDEDE; white-space:pre-wrap; word-wrap:break-word; font-family:Arial; padding:5px; }
 324
 325 #kiwi.theme_relaxed .messages .msg.action .nick { display:none; }
 326 #kiwi.theme_relaxed .messages .msg.action .text { margin-left:9em; color:#009900; border-left:none; font-style:italic; }
 327 #kiwi.theme_relaxed .messages .msg.action.join { color:#009900; }
 328 #kiwi.theme_relaxed .messages .msg.action.part .text { color:#900; }
 329 #kiwi.theme_relaxed .messages .msg.action.quit .text { color:#900; }
 330 #kiwi.theme_relaxed .messages .msg.action.kick .text { color:#900; }
 331 #kiwi.theme_relaxed .messages .msg.status .nick { display:none; }
 332 #kiwi.theme_relaxed .messages .msg.status .text { color:#990000; margin-left:9em; border-left:none; font-weight:bold; }
 333 #kiwi.theme_relaxed .messages .msg.topic .nick { display:none; }
 334 #kiwi.theme_relaxed .messages .msg.topic .text { color:#009900; margin-left:9em; font-style: italic; border-left:none; }
 335 /*#kiwi.theme_relaxed .messages .msg.motd .nick { display:none; }*/
 336 #kiwi.theme_relaxed .messages .msg.motd { border:none; }
 337 #kiwi.theme_relaxed .messages .msg.motd .text { color:#666; }
 338 #kiwi.theme_relaxed .messages .msg.whois .nick { font-weight:normal; }
 339 #kiwi.theme_relaxed .messages .msg.whois .text { margin-left:18em; padding-left:1em; border-left:1px dashed #999; }
 340 #kiwi.theme_relaxed .messages .msg.error .text {
 341     border:1px solid #A33F3F; background-color:#D28A8A;
 342     padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
 343 }
 344
 345
 346
 347
 348
 349 /* CLI theme */
 350 #kiwi.theme_cli { background:#222222; color:#6d6d6d; }
 351 #kiwi.theme_cli #controlbox { background:#111111; border-top:1px solid #444444; color:#909090; font-size:1.3em; line-height:2em; }
 352 #kiwi.theme_cli #controlbox .input_wrap:before { content:"> " }
 353 #kiwi.theme_cli #controlbox .input { background:none; border:none; border-radius: none; }
 354 #kiwi.theme_cli #controlbox .input .nick { line-height:1.7em; padding:0; }
 355 #kiwi.theme_cli #controlbox .input .inp { background:transparent; color:#909090; font-size:1.3em; width:92%; display:inline; }
 356 /* #kiwi.theme_cli #controlbox .input .inp:before { content:">"; } */
 357
 358 #kiwi.theme_cli #topic { background:#111111; border-bottom:1px solid #444444; border-top:1px solid #444444; }
 359 #kiwi.theme_cli #topic div { background:transparent; color:#6d6d6d; border:none; outline:none; height:1.5em; }
 360
 361 #kiwi.theme_cli #memberlists { background:#222222; }
 362 #kiwi.theme_cli #memberlists ul li a.nick { color:#6d6d6d; }
 363
 364 #kiwi.theme_cli .messages .msg > div { color:#6d6d6d; font-family: Inconsolata, Consolas, 'courier new', monospace; }
 365 #kiwi.theme_cli .messages .msg { border: none; }
 366 #kiwi.theme_cli .messages .msg .time { width:6em; }
 367 #kiwi.theme_cli .messages .msg .nick {  }
 368 #kiwi.theme_cli .messages .msg .text { white-space:pre-wrap; word-wrap:break-word; }
 369
 370 #kiwi.theme_cli .messages .msg.action .nick { display:none; }
 371 #kiwi.theme_cli .messages .msg.action .text { margin-left:9em; color:#009900; border-left:none; font-style:italic; }
 372 #kiwi.theme_cli .messages .msg.action.join { color:#009900; }
 373 #kiwi.theme_cli .messages .msg.action.part .text { color:#900; }
 374 #kiwi.theme_cli .messages .msg.action.quit .text { color:#900; }
 375 #kiwi.theme_cli .messages .msg.action.kick .text { color:#900; }
 376 #kiwi.theme_cli .messages .msg.status .nick { display:none; }
 377 #kiwi.theme_cli .messages .msg.status .text { color:#990000; margin-left:9em; border-left:none; font-weight:bold; }
 378 #kiwi.theme_cli .messages .msg.topic .nick { display:none; }
 379 #kiwi.theme_cli .messages .msg.topic .text { color:#009900; margin-left:9em; font-style: italic; border-left:none; }
 380 /*#kiwi.theme_cli .messages .msg.motd .nick { display:none; }*/
 381 #kiwi.theme_cli .messages .msg.motd { border:none; }
 382 #kiwi.theme_cli .messages .msg.motd .text { color:#666; }
 383 #kiwi.theme_cli .messages .msg.whois .nick { font-weight:normal; }
 384 #kiwi.theme_cli .messages .msg.whois .text { margin-left:18em; padding-left:1em; border-left:1px dashed #999; }
 385 #kiwi.theme_cli .messages .msg.error .text {
 386     border:1px solid #A33F3F; background-color:#D28A8A;
 387     padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
 388 }