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