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 .messages .msg.global_nick_highlight,
 145 .messages .msg.highlight { background:#D9D9D9; }
 146
 147
 148
 149
 150 #memberlists ul { list-style: none; display:none; }
 151 #memberlists ul.active { display:block; }
 152 #memberlists ul li { padding: 0.2em 1em; overflow-y:auto; overflow-x:hidden; cursor:pointer; }
 153 #memberlists ul li a.nick { display:block; color:black; }
 154
 155 #memberlists ul li .userbox { position:relative; margin:0 1em 5px 1em; padding-bottom:0.7em; font-size:.9em; }
 156 #memberlists ul li .userbox a { display:block; text-decoration:none; margin-bottom:2px; }
 157 #memberlists ul li .userbox a i { font-size:1.1em; margin-right:5px; }
 158
 159
 160 #controlbox .input {
 161     background:#fff; margin:3px;
 162     height:1.7em;
 163     border-radius:5px;
 164     -moz-border-radius:5px;
 165     -webkit-border-radius:5px;
 166     -khtml-border-radius:5px;
 167 }
 168 #controlbox .input .nick { text-align: right; width:11em; left:0px; position:absolute; padding:2px; cursor: pointer; }
 169 #controlbox .input .nick a { text-decoration:none; color:black; }
 170 #controlbox .input .input_wrap {
 171     position:absolute;
 172     right:7px; left: 12.2em;
 173     height:1.7em;
 174 }
 175 #controlbox .input .inp {
 176     line-height:1.7em;
 177     display: block;
 178     border: medium none;
 179     box-shadow: none;
 180     border-radius: 0;
 181     outline:none; resize:none;
 182     overflow:hidden;
 183     position:relative;
 184     height:100%; width:100%;
 185 }
 186
 187 #controlbox .nickchange {
 188     position: absolute;
 189     left: 0px;
 190     background: #1B1B1B; color:#eeeeee;
 191     padding:10px;
 192 }
 193 #controlbox .nickchange input { padding:0.3em 0.5em; }
 194 #controlbox .nickchange button { padding:0.5em; }
 195
 196
 197
 198 #topic { background-color:#1B1B1B; height:2em; position:relative; }
 199 #topic div {
 200     position:absolute;
 201     top:2; bottom:2px; left:0; width:100%;
 202     padding: 0.2em 1em;
 203     text-align: center;
 204     box-shadow: none;
 205     border-radius: 0;
 206     background-color:#FFF;
 207     height: 1.5em;
 208     overflow: hidden;
 209     outline: none;
 210 }
 211
 212
 213
 214
 215
 216
 217 .server_select { width:730px;  padding:3em 0 2em 0; margin: 0 auto; overflow:hidden; }
 218 .server_select .more { display: none; width:270px; margin:0 auto; }
 219 .server_select button { float:right; padding:3px 7px; margin-top:10px; }
 220 .server_select input { float:right; margin-bottom:5px; padding:3px 7px; width:150px; }
 221 .server_select label { float:left; width:5em; padding-top:3px }
 222 .server_select br { clear:both; }
 223 .server_select .basic input, .server_select .basic button { font-size:1em; padding:0.5em 1em; }
 224 .server_select .basic input { width:170px; }
 225 .server_select .basic label { font-size:1.3em; margin-top:4px; }
 226 .server_select .basic { border-bottom: 1px dashed gray; margin-bottom:1em; }
 227 .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; }
 228 .server_select.single_server .basic { border:none; }
 229 .server_select .status { text-align: center; font-weight: bold; padding:1em; }
 230 .server_select .status .ok {
 231     border:1px solid #A33F3F; background-color:#D28A8A;
 232     padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
 233 }
 234
 235
 236
 237
 238 .server_select .kiwi_logo { text-align: center; display:block; }
 239 .server_select .kiwi_logo h1 {
 240     font-size:20px;
 241     line-height:48px; vertical-align: middle;
 242     color: #555555;
 243 }
 244 .server_select .kiwi_logo img { }
 245
 246
 247
 248 #toolbar .app_tools { float:right; width:200px; padding-left:10px; color:#D4D4D4; }
 249 #toolbar .app_tools ul li {
 250     display:inline;
 251     font-size:26px;
 252     cursor:pointer;
 253     -webkit-transition: all .3s ease;
 254     -moz-transition: all .3s ease;
 255     transition: all .3s ease;
 256     margin-left:10px;
 257 }
 258 #toolbar .app_tools ul li:hover { color:#88C56A; }
 259 #toolbar .app_tools img { height:25px; width:25px; margin: 6px 0.7em 0 0; }
 260
 261
 262
 263
 264 #kiwi .settings {
 265     width:900px;
 266     margin:1em auto;
 267 }
 268 #kiwi .settings table td {
 269     padding:0.5em 1em;
 270 }
 271
 272
 273
 274
 275 /**
 276  * Reusable componants
 277  */
 278
 279 .divider-verticle {
 280     border-left: 1px solid #CFCFCF;
 281     border-right: 1px solid #FFFFFF;
 282     position: absolute;
 283     top:25px; bottom:25px;
 284     right:0;
 285     width:0;
 286 }
 287
 288 .divider-horizontal {
 289     border-top: 1px solid #CFCFCF;
 290     border-bottom: 1px solid #FFFFFF;
 291     position: absolute;
 292     left:25px; right:25px;
 293     bottom:0;
 294     height:0;
 295 }
 296
 297
 298
 299
 300
 301 /**
 302  * Themes
 303  */
 304
 305
 306 /* Default */
 307 #kiwi #memberlists {
 308     background-color: #DADADA;
 309     border-left: 1px solid #8A8A8A;
 310 }
 311 #kiwi #memberlists ul li:hover {
 312     border-left: 5px solid #88C56A;
 313     /* background: #88C56A; */
 314     -webkit-transition: 0.2s ease;
 315     -moz-transition: 0.2s ease;
 316     -ms-transition: 0.2s ease;
 317     -o-transition: 0.2s ease;
 318     transition: 0.2s ease;
 319 }
 320
 321
 322
 323
 324 /* Relaxed theme */
 325 #kiwi.theme_relaxed .messages .msg { border-bottom: 1px solid #DEDEDE; font-family:arial; font-size:0.9em; }
 326 #kiwi.theme_relaxed .messages .msg .time { width:6em; float:left; color:#777; display:none; }
 327 #kiwi.theme_relaxed .messages .msg .nick { width:11em; float:left; font-size:12px; font-family:Arial; text-align:left; padding: 5px; }
 328 #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; }
 329
 330 #kiwi.theme_relaxed .messages .msg.action .nick { display:none; }
 331 #kiwi.theme_relaxed .messages .msg.action .text { margin-left:9em; color:#009900; border-left:none; font-style:italic; }
 332 #kiwi.theme_relaxed .messages .msg.action.join { color:#009900; }
 333 #kiwi.theme_relaxed .messages .msg.action.part .text { color:#900; }
 334 #kiwi.theme_relaxed .messages .msg.action.quit .text { color:#900; }
 335 #kiwi.theme_relaxed .messages .msg.action.kick .text { color:#900; }
 336 #kiwi.theme_relaxed .messages .msg.status .nick { display:none; }
 337 #kiwi.theme_relaxed .messages .msg.status .text { color:#990000; margin-left:9em; border-left:none; font-weight:bold; }
 338 #kiwi.theme_relaxed .messages .msg.topic .nick { display:none; }
 339 #kiwi.theme_relaxed .messages .msg.topic .text { color:#009900; margin-left:9em; font-style: italic; border-left:none; }
 340 /*#kiwi.theme_relaxed .messages .msg.motd .nick { display:none; }*/
 341 #kiwi.theme_relaxed .messages .msg.motd { border:none; }
 342 #kiwi.theme_relaxed .messages .msg.motd .text { color:#666; }
 343 #kiwi.theme_relaxed .messages .msg.whois .nick { font-weight:normal; }
 344 #kiwi.theme_relaxed .messages .msg.whois .text { margin-left:18em; padding-left:1em; border-left:1px dashed #999; }
 345 #kiwi.theme_relaxed .messages .msg.error .text {
 346     border:1px solid #A33F3F; background-color:#D28A8A;
 347     padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
 348 }
 349
 350
 351
 352
 353
 354 /* CLI theme */
 355 #kiwi.theme_cli { background:#222222; color:#6d6d6d; }
 356 #kiwi.theme_cli #controlbox { background:#111111; border-top:1px solid #444444; color:#909090; font-size:1.3em; line-height:2em; }
 357 #kiwi.theme_cli #controlbox .input_wrap:before { content:"> " }
 358 #kiwi.theme_cli #controlbox .input { background:none; border:none; border-radius: none; }
 359 #kiwi.theme_cli #controlbox .input .nick { line-height:1.7em; padding:0; }
 360 #kiwi.theme_cli #controlbox .input .inp { background:transparent; color:#909090; font-size:1.3em; width:92%; display:inline; }
 361 /* #kiwi.theme_cli #controlbox .input .inp:before { content:">"; } */
 362
 363 #kiwi.theme_cli #topic { background:#111111; border-bottom:1px solid #444444; border-top:1px solid #444444; }
 364 #kiwi.theme_cli #topic div { background:transparent; color:#6d6d6d; border:none; outline:none; height:1.5em; }
 365
 366 #kiwi.theme_cli #memberlists { background:#222222; }
 367 #kiwi.theme_cli #memberlists ul li a.nick { color:#6d6d6d; }
 368
 369 #kiwi.theme_cli .messages .msg > div { color:#6d6d6d; font-family: Inconsolata, Consolas, 'courier new', monospace; }
 370 #kiwi.theme_cli .messages .msg { border: none; }
 371 #kiwi.theme_cli .messages .msg .time { width:6em; }
 372 #kiwi.theme_cli .messages .msg .nick {  }
 373 #kiwi.theme_cli .messages .msg .text { white-space:pre-wrap; word-wrap:break-word; }
 374
 375 #kiwi.theme_cli .messages .msg.action .nick { display:none; }
 376 #kiwi.theme_cli .messages .msg.action .text { margin-left:9em; color:#009900; border-left:none; font-style:italic; }
 377 #kiwi.theme_cli .messages .msg.action.join { color:#009900; }
 378 #kiwi.theme_cli .messages .msg.action.part .text { color:#900; }
 379 #kiwi.theme_cli .messages .msg.action.quit .text { color:#900; }
 380 #kiwi.theme_cli .messages .msg.action.kick .text { color:#900; }
 381 #kiwi.theme_cli .messages .msg.status .nick { display:none; }
 382 #kiwi.theme_cli .messages .msg.status .text { color:#990000; margin-left:9em; border-left:none; font-weight:bold; }
 383 #kiwi.theme_cli .messages .msg.topic .nick { display:none; }
 384 #kiwi.theme_cli .messages .msg.topic .text { color:#009900; margin-left:9em; font-style: italic; border-left:none; }
 385 /*#kiwi.theme_cli .messages .msg.motd .nick { display:none; }*/
 386 #kiwi.theme_cli .messages .msg.motd { border:none; }
 387 #kiwi.theme_cli .messages .msg.motd .text { color:#666; }
 388 #kiwi.theme_cli .messages .msg.whois .nick { font-weight:normal; }
 389 #kiwi.theme_cli .messages .msg.whois .text { margin-left:18em; padding-left:1em; border-left:1px dashed #999; }
 390 #kiwi.theme_cli .messages .msg.error .text {
 391     border:1px solid #A33F3F; background-color:#D28A8A;
 392     padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
 393 }
 394
 395 #kiwi.theme_cli .messages .msg.global_nick_highlight { background:#111111; }