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