client/assets/css/style.css

   1 html, body { height:100%; }
   2 * { margin:0; padding:0; }
   3
   4
   5
   6 /* Few resets for within the kiwi container */
   7 #kiwi {
   8     overflow:hidden; position:relative;
   9     height:100%;
  10 }
  11 #kiwi * { margin:0px; padding:0px; }
  12 #kiwi p { margin:0.5em 0; }
  13 #kiwi a { color:#36C; text-decoration:none; cursor:pointer; }
  14 #kiwi a img { border:none; }
  15 #kiwi .format_span a { color: inherit; background-color: inherit; text-decoration: inherit; font-style: inherit; font-weight: inherit;}
  16
  17 #kiwi h1,
  18 #kiwi h2,
  19 #kiwi h3 {
  20     margin-top: 22px;
  21     margin-bottom: 11px;
  22 }
  23 #kiwi h4,
  24 #kiwi h5,
  25 #kiwi h6 {
  26     margin-top: 11px;
  27     margin-bottom: 11px;
  28 }
  29 #kiwi h1 { font-size: 46px; }
  30 #kiwi h2 { font-size: 40px; }
  31 #kiwi h3 { font-size: 34px; }
  32 #kiwi h4 { font-size: 28px; }
  33 #kiwi h5 { font-size: 22px; }
  34 #kiwi h6 { font-size: 16px; }
  35
  36
  37 /**
  38  * Main layout blocks
  39  */
  40 #kiwi .toolbar { position:absolute; top:0px; width:100%; display:none; }
  41 #kiwi .panels { position:absolute; left:0px; right:200px; bottom:100px; top:100px; }
  42 #kiwi .memberlists { position:absolute; right:0px; width:200px; bottom:100px; top:100px; overflow-y:auto; }
  43 #kiwi .controlbox { position: absolute; bottom:0px; width:100%; display:none; }
  44 #kiwi .memberlists_resize_handle {
  45     position: absolute; width:10px; z-index:1; cursor:w-resize;
  46 }
  47
  48
  49 #kiwi .toolbar .tabs { margin-right: 200px; }
  50 #kiwi .toolbar .panellist {
  51     overflow: hidden;
  52     display:block;
  53 }
  54 #kiwi .toolbar .panellist li {
  55     float: left; list-style: inline;
  56     display:inline; position:relative;
  57     padding:5px; margin:3px;
  58     cursor: pointer;
  59 }
  60
  61 #kiwi .toolbar .panellist .active { padding-right:23px; }
  62 #kiwi .toolbar .panellist .alert_highlight { font-weight: bold; }
  63 #kiwi .toolbar .panellist .alert_activity { font-weight: bold; }
  64 #kiwi .toolbar .panellist .alert_action { font-weight: bold; }
  65
  66 #kiwi .toolbar .panellist li { width: auto; text-align: left; }
  67 #kiwi .toolbar .panellist li .part { position: absolute; top: 5px; right: 5px; }
  68 #kiwi .toolbar .panellist li .part:before { content:"[x]"; }
  69 #kiwi .toolbar .panellist li .part:hover { color: #900; }
  70 #kiwi .toolbar .panellist li img.icon { left:5px; top:2px; height:auto; width:auto; }
  71
  72 #kiwi .toolbar .connections { overflow:hidden; }
  73 #kiwi .toolbar .connections .connection { float:left; }
  74 #kiwi.chanlist_treeview .toolbar .connections .connection { float:none; }
  75 #kiwi .toolbar .connections .panellist { display:inline; }
  76 #kiwi .toolbar .connections .panellist:after { content:""; }
  77
  78 #kiwi .status_message {
  79     background: #FFF;
  80     border-bottom: 1px solid;
  81     text-align: center;
  82 }
  83
  84
  85 #kiwi .panel_container { overflow-y:auto; height:100%; }
  86 #kiwi .panel {
  87     overflow-x:wrap;
  88     border:none; display: none;
  89 }
  90
  91 #kiwi .messages a {}
  92 #kiwi .messages.active { display:block; }
  93
  94 #kiwi .messages .msg {}
  95 #kiwi .messages .msg .time { display:inline; }
  96 #kiwi .messages .msg .nick { display:inline; }
  97 #kiwi .messages .msg .text { display:inline; }
  98
  99 #kiwi .messages .msg.action .nick { display:none; }
 100 #kiwi .messages .msg.action .text { }
 101 #kiwi .messages .msg.action.join { }
 102 #kiwi .messages .msg.action.part .text { }
 103 #kiwi .messages .msg.action.quit .text { }
 104 #kiwi .messages .msg.action.kick .text { }
 105 #kiwi .messages .msg.status .nick { display:none; }
 106 #kiwi .messages .msg.status .text { }
 107 #kiwi .messages .msg.topic .nick { display:none; }
 108 #kiwi .messages .msg.topic .text { }
 109 #kiwi .messages .msg.motd { }
 110 #kiwi .messages .msg.motd .nick { }
 111 #kiwi .messages .msg.motd .text { }
 112 #kiwi .messages .msg.whois .nick { }
 113 #kiwi .messages .msg.whois .text { }
 114 #kiwi .messages .msg.error .text { }
 115
 116 #kiwi .messages .msg.global_nick_highlight { }
 117 #kiwi .messages .msg.highlight { }
 118
 119 #kiwi .messages .msg .media .media_content { white-space: normal; }
 120
 121
 122 /* A member/nick list per channel */
 123 #kiwi .memberlists { border-left: 1px solid #8A8A8A; }
 124 #kiwi .memberlists.disabled { display:none; }
 125 #kiwi .memberlists ul { display:none; }
 126
 127 /* The active channels nicklist */
 128 #kiwi .memberlists ul.active { display:block; }
 129 #kiwi .memberlists ul li { overflow-y:auto; overflow-x:hidden; cursor:pointer; }
 130 #kiwi .memberlists ul li a.nick { }
 131
 132 /* The userbox shown when clicking a nick */
 133 #kiwi .userbox { position:relative; }
 134 #kiwi .userbox a { }
 135 #kiwi .userbox a i { }
 136
 137
 138 /* Emoticons */
 139 #kiwi .emoticon {
 140     display: inline-block;
 141     height: 15px; width: 17px;
 142     overflow: hidden;
 143     font-size: 0;
 144     background: url(../img/emoticons.png) no-repeat;
 145 }
 146 #kiwi .emoticon.smile { background-position:0px 0; }
 147 #kiwi .emoticon.sad { background-position:-25px 0; }
 148 #kiwi .emoticon.lion { background-position:-50px 0; }
 149 #kiwi .emoticon.winky_lion { background-position:-75px 0; }
 150 #kiwi .emoticon.confused { background-position:-100px 0; }
 151 #kiwi .emoticon.cry { background-position:-125px 0; }
 152 #kiwi .emoticon.wink { background-position:-150px 0; }
 153 #kiwi .emoticon.wink_happy { background-position:-175px 0; }
 154 #kiwi .emoticon.tongue { background-position:-200px 0; }
 155 #kiwi .emoticon.cringe_tongue { background-position:-225px 0; }
 156 #kiwi .emoticon.shocked { background-position:-250px 0; }
 157 #kiwi .emoticon.happy { background-position:-275px 0; }
 158 #kiwi .emoticon.eyebrows { background-position:-300px 0; }
 159 #kiwi .emoticon.heart { background-position:-325px 0; }
 160 #kiwi .emoticon.doh { background-position:-373px 0; }
 161 #kiwi .emoticon.big_grin { background-position:-398px 0; }
 162 #kiwi .emoticon.wide_eye_right { background-position:-423px 0; }
 163 #kiwi .emoticon.wide_eye_left { background-position:-448px 0; }
 164 #kiwi .emoticon.unsure { background-position:-473px 0; }
 165
 166
 167 /**
 168  * Control box
 169  */
 170 #kiwi .controlbox .input {
 171     height:1.7em; position:relative;
 172 }
 173
 174 /* The nick label */
 175 #kiwi .controlbox .input .nick { cursor: pointer; }
 176 #kiwi .controlbox .input .nick a { }
 177
 178 /* Wrapper div around the text area input */
 179 #kiwi .controlbox .input .input_wrap { display:inline; }
 180
 181 /* The textarea input */
 182 #kiwi .controlbox .input .inp { white-space: nowrap; }
 183
 184
 185 /* Nick change dialog showed when clicking the nick label */
 186 #kiwi .controlbox .nickchange {
 187     position: absolute;
 188     background: #FFF;
 189 }
 190 #kiwi .controlbox .nickchange input { }
 191 #kiwi .controlbox .nickchange button { }
 192
 193 /* Plugin tools */
 194 #kiwi .controlbox .input_tools { float:right; }
 195 #kiwi .controlbox .input_tools .tool { margin:0 1em; display:inline; }
 196
 197
 198
 199 /**
 200  * Topic bar
 201  */
 202 #kiwi .toolbar .topic { position:relative; height:2em; }
 203 #kiwi .toolbar .topic div {
 204     position:absolute;
 205     top:0; bottom:0; left:0; right:0;
 206     overflow: hidden;
 207 }
 208
 209
 210
 211
 212
 213 /**
 214  * Server selection dialog
 215  */
 216 #kiwi .server_select { position:relative; width:320px; margin:0 auto; overflow:hidden; }
 217 #kiwi .server_select.initial { margin-top: 3em; }
 218 #kiwi .server_select .more { display: none; }
 219 #kiwi .server_select button {  }
 220 #kiwi .server_select input { }
 221 #kiwi .server_select label { }
 222 #kiwi .server_select br { clear:both; }
 223 #kiwi .server_select .basic input { }
 224 #kiwi .server_select .basic label { }
 225 #kiwi .server_select .basic { border-bottom: 1px solid gray; margin-bottom:1em; }
 226 #kiwi .server_select .basic .show_more { }
 227 #kiwi .server_select .basic tr.pass { display:none; }
 228 #kiwi .server_select .basic tr.key { display:none; }
 229 #kiwi .server_select.single_server .basic { border:none; }
 230 #kiwi .server_select .status {  }
 231
 232 /* Channel key icon */
 233 #kiwi .server_select .basic tr.channel td { position: relative; }
 234 #kiwi .server_select .basic tr.channel .icon-key {
 235     position: absolute;
 236     top: 0.4em;
 237     right: 0.6em;
 238     font-size: 1.3em;
 239     cursor: pointer;
 240 }
 241 #kiwi .server_select .basic tr.have_key { display:none; }
 242
 243 /* When connected to an IRC server, .ok is set on the status div */
 244 #kiwi .server_select .status.ok { }
 245
 246 /* IRC server connection error, .error is set on the status div */
 247 #kiwi .server_select .status.error { }
 248
 249
 250
 251 /* Logo and title in the server selection dialog */
 252 #kiwi .server_select .kiwi_logo { text-align: center; display:block; }
 253 #kiwi .server_select .kiwi_logo h1 { }
 254 #kiwi .server_select .kiwi_logo img { }
 255
 256
 257
 258 /* Icons in the top right corner */
 259 #kiwi .toolbar .app_tools { float:right; }
 260 #kiwi .toolbar .app_tools ul li {
 261     display:inline; cursor:pointer;
 262 }
 263 #kiwi .toolbar .app_tools img { height:25px; width:25px; margin: 6px 0.7em 0 0; }
 264
 265
 266
 267 /* Settings applet */
 268
 269 /* Some of these styles will move to global styling later */
 270 #kiwi .settings_container {
 271     padding: 50px;
 272 }
 273
 274 #kiwi .settings_container .thumbnails:before {
 275     content: ' ';
 276     display: table;
 277 }
 278 #kiwi .settings_container .thumbnails:after {
 279     content: ' ';
 280     display: table;
 281     clear: both;
 282 }
 283
 284 #kiwi .settings_container .thumbnails {
 285     list-style-type: none;
 286     margin: 0;
 287     padding: 0;
 288 }
 289
 290 #kiwi .settings_container .thumbnails > li {
 291     display: inline-block;
 292 }
 293
 294 #kiwi .settings_container label {
 295     cursor: pointer;
 296 }
 297
 298 #kiwi_ form label { display: block; }
 299 #kiwi form input,
 300 #kiwi form select,
 301 #kiwi form textarea {
 302     /*width: 100%;
 303     box-sizing: border-box;*/
 304 }
 305
 306 #kiwi form input[size],
 307 #kiwi form select[size],
 308 #kiwi form textarea[size] {
 309     width: auto;
 310 }
 311
 312 #kiwi form input[type="file"],
 313 #kiwi form input[type="image"],
 314 #kiwi form input[type="submit"],
 315 #kiwi form input[type="reset"],
 316 #kiwi form input[type="button"] {
 317     width: auto;
 318 }
 319
 320 #kiwi form input[type="radio"] {
 321     width: auto;
 322     cursor: pointer;
 323     margin-top: 2px;
 324 }
 325
 326 #kiwi form input[type="checkbox"] {
 327     width: auto;
 328     cursor: pointer;
 329     margin-top: 3px;
 330 }
 331
 332 #kiwi form .radio,
 333 #kiwi form .checkbox {
 334     margin-bottom: 10px;
 335     padding-left: 20px;
 336 }
 337
 338 #kiwi form .radio:last-child,
 339 #kiwi form .checkbox:last-child {
 340     margin-bottom: 0;
 341 }
 342
 343 #kiwi form .radio input[type="radio"],
 344 #kiwi form .checkbox input[type="checkbox"] {
 345     float: left;
 346     margin-left: -20px;
 347 }
 348
 349 #kiwi form .radio+.radio,
 350 #kiwi form .checkbox+.checkbox {
 351     margin-top: -7px;
 352 }
 353
 354 #kiwi .settings_container .thumbnail {
 355     float: left;
 356     margin-right: 15px;
 357     text-align: center;
 358 }
 359
 360 #kiwi .settings_container .thumbnail > .thumbnail_wrapper {
 361     border-radius: 3px;
 362     padding: 3px;
 363 }
 364
 365 #kiwi .settings_container .thumbnail > img {
 366     border-radius: 2px;
 367 }
 368
 369 #kiwi .settings_container .thumbnail.active > .thumbnail_wrapper {
 370     background-color: #a6c42c;
 371     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a6c42c), color-stop(100%, #76bd2b));
 372     background-image: -webkit-linear-gradient(#a6c42c, #76bd2b);
 373     background-image: linear-gradient(#a6c42c, #76bd2b);
 374 }
 375
 376 #kiwi .settings_container section {
 377     padding-bottom: 20px;
 378 }
 379
 380 #kiwi .settings_container .theme_color {
 381     border-radius: 2px;
 382     height: 75px;
 383     width: 75px;
 384 }
 385
 386 #kiwi .control-group {
 387     margin: 0 0 20px 20px;
 388 }
 389
 390 #kiwi .control-group:last-child {
 391     margin-bottom: 0;
 392 }
 393
 394 #kiwi .settings_container section.language select { width:300px; }
 395
 396 @media screen and (max-width: 768px) {
 397     #kiwi .settings_container {
 398         padding: 25px;
 399     }
 400 }
 401
 402
 403 #kiwi .channel_info label { display: block; }
 404 #kiwi .channel_info .channel_url {
 405     display: none;
 406 }
 407 #kiwi .channel_info .channel-banlist table { display: none; }
 408 #kiwi .channel_info .remove-ban { cursor: pointer; }
 409
 410
 411
 412
 413
 414
 415
 416 /**
 417  * Reusable componants
 418  */
 419
 420 #kiwi .divider-verticle {
 421     border-left: 1px solid #CFCFCF;
 422     border-right: 1px solid #FFFFFF;
 423     position: absolute;
 424     top:25px; bottom:25px;
 425     right:0;
 426     width:0;
 427 }
 428
 429 #kiwi .divider-horizontal {
 430     border-top: 1px solid #CFCFCF;
 431     border-bottom: 1px solid #FFFFFF;
 432     position: absolute;
 433     left:25px; right:25px;
 434     bottom:0;
 435     height:0;
 436 }
 437
 438
 439
 440 #kiwi .loader {
 441     background:url(../img/loader.gif) no-repeat;
 442     width:43px; height:11px;
 443     display:inline-block;
 444 }
 445
 446
 447
 448
 449 #kiwi .ui_menu {
 450     padding: 0;
 451     z-index:10;
 452     position: absolute;
 453     top: 100px; left: 100px;
 454     background: #fff;
 455     border: 1px solid #bbb;
 456     background-clip: padding-box;
 457 }
 458 #kiwi .ui_menu .ui_menu_title {
 459     padding: 5px 10px 5px 10px; font-weight: bold; overflow:hidden; background:#ddd;
 460 }
 461 #kiwi .ui_menu .ui_menu_content { padding: 5px 10px 5px 10px; border-top:1px solid #e9e9e9; overflow:hidden; position:relative; }
 462 #kiwi .ui_menu .ui_menu_content > a { display: block; }
 463 #kiwi .ui_menu .ui_menu_content > a[class^="icon-"]:before,
 464 #kiwi .ui_menu .ui_menu_content > a[class*=" icon-"]:before { margin-right: 5px; color:#666; }
 465 #kiwi .ui_menu .ui_menu_foot {
 466     padding: 5px; border-top:1px solid #e9e9e9; background:#ddd; overflow:hidden;
 467 }
 468 #kiwi .ui_menu .ui_menu_foot .close { }