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