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