Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

first version of phpfreechat-mini theme

  • Loading branch information...
commit 7cc7fd272a9786d9b67ac9f25522cf8008875bd1 1 parent e81dbeb
@kerphi authored
Showing with 2,115 additions and 3 deletions.
  1. +20 −2 client/pfc-init.js
  2. +4 −1 client/pfc-utils.js
  3. +14 −0 client/themes/carbon/theme.js
  4. +14 −0 client/themes/default/theme.js
  5. +14 −0 client/themes/gamer/theme.js
  6. BIN  client/themes/phpfreechat-mini/img/active.png
  7. BIN  client/themes/phpfreechat-mini/img/bg-users.png
  8. BIN  client/themes/phpfreechat-mini/img/bt-donate-popup.png
  9. BIN  client/themes/phpfreechat-mini/img/bt-not-now.png
  10. BIN  client/themes/phpfreechat-mini/img/ch-active.png
  11. BIN  client/themes/phpfreechat-mini/img/channel.png
  12. BIN  client/themes/phpfreechat-mini/img/close.png
  13. BIN  client/themes/phpfreechat-mini/img/donate.png
  14. BIN  client/themes/phpfreechat-mini/img/illus-donate.png
  15. BIN  client/themes/phpfreechat-mini/img/inactive.png
  16. BIN  client/themes/phpfreechat-mini/img/logout.png
  17. BIN  client/themes/phpfreechat-mini/img/minichat/bt-mini-chat.png
  18. BIN  client/themes/phpfreechat-mini/img/minichat/bt-rooms.png
  19. BIN  client/themes/phpfreechat-mini/img/minichat/bt-users.png
  20. BIN  client/themes/phpfreechat-mini/img/neutral.png
  21. BIN  client/themes/phpfreechat-mini/img/online-off.png
  22. BIN  client/themes/phpfreechat-mini/img/online-on.png
  23. BIN  client/themes/phpfreechat-mini/img/pm-active.png
  24. BIN  client/themes/phpfreechat-mini/img/pm.png
  25. BIN  client/themes/phpfreechat-mini/img/smiley-off.png
  26. BIN  client/themes/phpfreechat-mini/img/smiley-on.png
  27. BIN  client/themes/phpfreechat-mini/img/sound-off.png
  28. BIN  client/themes/phpfreechat-mini/img/sound-on.png
  29. BIN  client/themes/phpfreechat-mini/img/tab-add.png
  30. BIN  client/themes/phpfreechat-mini/img/tabs-toggle.png
  31. BIN  client/themes/phpfreechat-mini/img/user-admin-active.png
  32. BIN  client/themes/phpfreechat-mini/img/user-admin-inactive.png
  33. BIN  client/themes/phpfreechat-mini/img/user.png
  34. BIN  client/themes/phpfreechat-mini/img/users-toggle.png
  35. +153 −0 client/themes/phpfreechat-mini/pfc-ads.less
  36. +851 −0 client/themes/phpfreechat-mini/pfc-full.less
  37. +39 −0 client/themes/phpfreechat-mini/pfc-notabs.less
  38. +110 −0 client/themes/phpfreechat-mini/pfc-responsive.less
  39. +47 −0 client/themes/phpfreechat-mini/pfc-theme-responsive.less
  40. +132 −0 client/themes/phpfreechat-mini/pfc-theme-variables.less
  41. +173 −0 client/themes/phpfreechat-mini/pfc-theme.less
  42. +395 −0 client/themes/phpfreechat-mini/pfc-variables.less
  43. +7 −0 client/themes/phpfreechat-mini/pfc.less
  44. +128 −0 client/themes/phpfreechat-mini/theme.js
  45. +14 −0 client/themes/phpfreechat/theme.js
View
22 client/pfc-init.js
@@ -30,6 +30,7 @@ var phpFreeChat = (function (pfc, $, window, undefined) {
// load the interface
pfc.loadHTML();
pfc.loadResponsiveBehavior();
+ pfc.loadThemeUI();
// run quick tests
pfc.checkServerConfig(pfc.startChatLogic);
@@ -81,7 +82,7 @@ var phpFreeChat = (function (pfc, $, window, undefined) {
* Test the rewrite rules are enabled on the server
*/
pfc.checkServerConfigRewrite = function (next) {
- var err_rewrite_msg = 'mod_rewrite must be enabled server side and correctly configured. "RewriteBase" could be adjusted in server/.htaccess file.';
+ var err_rewrite_msg = '.htaccess must be allowed on your server (AllowOverride All) and mod_rewrite must be enabled on your server and correctly configured ("RewriteBase" could be adjusted in server/.htaccess file)';
$.ajax({
type: 'GET',
url: pfc.options.serverUrl + '/status'
@@ -342,7 +343,7 @@ var phpFreeChat = (function (pfc, $, window, undefined) {
/**
* For mobile ergonomics
- **/
+ */
pfc.loadResponsiveBehavior = function () {
var elt_tabs = $(".pfc-tabs");
var elt_users = $(".pfc-users");
@@ -470,6 +471,23 @@ var phpFreeChat = (function (pfc, $, window, undefined) {
};
+ /**
+ * Load specific javascript defined by the theme
+ */
+ pfc.loadThemeUI = function () {
+ $('link').each(function (i, link) {
+ var href = $(link).attr('href');
+ if (new RegExp("\/client\/themes\/").test(href)) {
+ var base_url = href.replace(/[^\/]+$/, '');
+ var theme_ui_url = base_url + 'theme.js';
+ $.ajax({
+ url: theme_ui_url,
+ dataType: "script",
+ cache: true
+ });
+ }
+ });
+ };
return pfc;
}(phpFreeChat || {}, jQuery, window));
View
5 client/pfc-utils.js
@@ -28,7 +28,9 @@ fromCharCode(r>>6|192),t+=String.fromCharCode(r&63|128)):(t+=String.fromCharCode
* Todo: make it a jquery plugin
*/
pfc.modalbox = {
+ isopen: false,
open: function (html) {
+ this.isopen = true;
html = $(html);
$('div.pfc-modal-box *').remove();
$('div.pfc-modal-box').append(html).fadeIn();
@@ -42,6 +44,7 @@ fromCharCode(r>>6|192),t+=String.fromCharCode(r&63|128)):(t+=String.fromCharCode
return html;
},
close: function (now) {
+ this.isopen = false;
if (now) {
$('div.pfc-modal-box').hide();
$('div.pfc-modal-overlay').hide();
@@ -61,6 +64,6 @@ fromCharCode(r>>6|192),t+=String.fromCharCode(r&63|128)):(t+=String.fromCharCode
}).trigger('resize');
}
};
-
+
return pfc;
}(phpFreeChat || {}, jQuery, window));
View
14 client/themes/carbon/theme.js
@@ -0,0 +1,14 @@
+/**
+ * Specific javascript for the current theme
+ */
+$(document).ready(function() {
+ // the phpfreechat jquery plugin instance
+ var pfc = phpFreeChat;
+
+ // do what you need, you can for example:
+ // - inject HTML into the chat structure
+ // ex: $(pfc.element).find('.pfc-content').wrap('<div class="pfc-theme-wrapper" />');
+ // - add ergonomics effects to the DOM (ex: new event handlers)
+ // - ...
+
+});
View
14 client/themes/default/theme.js
@@ -0,0 +1,14 @@
+/**
+ * Specific javascript for the current theme
+ */
+$(document).ready(function() {
+ // the phpfreechat jquery plugin instance
+ var pfc = phpFreeChat;
+
+ // do what you need, you can for example:
+ // - inject HTML into the chat structure
+ // ex: $(pfc.element).find('.pfc-content').wrap('<div class="pfc-theme-wrapper" />');
+ // - add ergonomics effects to the DOM (ex: new event handlers)
+ // - ...
+
+});
View
14 client/themes/gamer/theme.js
@@ -0,0 +1,14 @@
+/**
+ * Specific javascript for the current theme
+ */
+$(document).ready(function() {
+ // the phpfreechat jquery plugin instance
+ var pfc = phpFreeChat;
+
+ // do what you need, you can for example:
+ // - inject HTML into the chat structure
+ // ex: $(pfc.element).find('.pfc-content').wrap('<div class="pfc-theme-wrapper" />');
+ // - add ergonomics effects to the DOM (ex: new event handlers)
+ // - ...
+
+});
View
BIN  client/themes/phpfreechat-mini/img/active.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/bg-users.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/bt-donate-popup.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/bt-not-now.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/ch-active.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/channel.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/close.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/donate.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/illus-donate.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/inactive.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/logout.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/minichat/bt-mini-chat.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/minichat/bt-rooms.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/minichat/bt-users.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/neutral.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/online-off.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/online-on.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/pm-active.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/pm.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/smiley-off.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/smiley-on.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/sound-off.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/sound-on.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/tab-add.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/tabs-toggle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  client/themes/phpfreechat-mini/img/user-admin-active.png
Diff not rendered
View
BIN  client/themes/phpfreechat-mini/img/user-admin-inactive.png
Diff not rendered
View
BIN  client/themes/phpfreechat-mini/img/user.png
Diff not rendered
View
BIN  client/themes/phpfreechat-mini/img/users-toggle.png
Diff not rendered
View
153 client/themes/phpfreechat-mini/pfc-ads.less
@@ -0,0 +1,153 @@
+//
+// ads stylesheet used to redefine chat width
+// so that ads area can display well
+//
+
+@ad-desktop-width: 160px;
+@ad-tablet-height: 60px;
+@ad-mobile-height: 31px;
+
+// display pub for desktop
+@responsive-tablet-width-min: @responsive-tablet-width + 1;
+@media (min-width: @responsive-tablet-width-min) {
+
+ div.pfc-content {
+
+ div.pfc-users {
+ width: @users-width;
+ right: @ad-desktop-width + @padding-right;
+ }
+
+ div.pfc-messages {
+ right: @users-width + @border-width + @ad-desktop-width;
+ }
+
+ div.pfc-topic {
+ right: @padding-right + @ad-desktop-width;
+ }
+
+ div.pfc-compose {
+ right: @padding-right + @ad-desktop-width;
+ }
+
+ div.pfc-footer {
+ right: @padding-right + @ad-desktop-width;
+ }
+
+ div.pfc-ad-desktop {
+ display: block;
+ position: absolute;
+ width: @ad-desktop-width;
+ right: 0;
+ }
+
+ div.pfc-ad-tablet {
+ display: none;
+ }
+
+ div.pfc-ad-mobile {
+ display: none;
+ }
+
+ }
+
+}
+
+// display pub for tablet
+@media (max-width: @responsive-tablet-width) {
+
+ div.pfc-content {
+
+ div.pfc-users {
+// display: none; // todo: should be hidden ?
+ }
+
+ div.pfc-messages {
+// background-color:#FFF;
+ bottom: @footer-height + @compose-height + @padding-bottom + 3 * @border-width + @ad-tablet-height;
+// right: @users-width;
+ }
+
+ div.pfc-topic {
+// right: @padding-right;
+ }
+
+ div.pfc-compose {
+ bottom: @padding-bottom + @border-width + @ad-tablet-height;
+// right: @padding-right;
+ }
+
+ div.pfc-footer {
+ bottom: @padding-bottom + @compose-height + @border-width + @ad-tablet-height;
+// right: @padding-right;
+ }
+
+ div.pfc-ad-desktop {
+ display: none;
+ }
+
+ div.pfc-ad-tablet {
+ display: block;
+ position: absolute;
+ bottom: 0;
+ height: @ad-tablet-height;
+ text-align: center;
+ width: 100%;
+ }
+
+ div.pfc-ad-mobile {
+ display: none;
+ }
+ }
+
+}
+
+// display pub for mobile
+@media (max-width: @responsive-mobile-width) {
+
+ div.pfc-content {
+
+ div.pfc-users {
+// display: none; // todo: should be hidden ?
+ }
+
+ div.pfc-messages {
+// background-color:#FFF;
+ bottom: @footer-height + @compose-height + @padding-bottom + 3 * @border-width + @ad-mobile-height;
+// right: @users-width;
+ }
+
+ div.pfc-topic {
+// right: @padding-right;
+ }
+
+ div.pfc-compose {
+ bottom: @padding-bottom + @border-width + @ad-mobile-height;
+// right: @padding-right;
+ }
+
+ div.pfc-footer {
+ bottom: @padding-bottom + @compose-height + @border-width + @ad-mobile-height;
+// right: @padding-right;
+ }
+
+ div.pfc-ad-desktop {
+ display: none;
+ }
+
+ div.pfc-ad-tablet {
+ display: none;
+ }
+
+ div.pfc-ad-mobile {
+ display: block;
+ position: absolute;
+ bottom: 0;
+ height: @ad-mobile-height;
+ text-align: center;
+ width: 100%;
+ }
+ }
+
+}
+
View
851 client/themes/phpfreechat-mini/pfc-full.less
@@ -0,0 +1,851 @@
+//
+// phpfreechat default theme: CSS rules
+//
+
+.rounded-corners (@radius: 5px) {
+ border-radius: @radius;
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+}
+.box-shadow(@top, @left, @size, @color) {
+ box-shadow: @top @left @size @color;
+ -moz-box-shadow: @top @left @size @color;
+ -webkit-box-shadow: @top @left @size @color;
+}
+.box-shadow-inset(@top, @left, @size, @color) {
+ box-shadow: inset @top @left @size @color;
+ -moz-box-shadow: inset @top @left @size @color;
+ -webkit-box-shadow: inset @top @left @size @color;
+}
+
+div.pfc-content {
+ position: relative;
+ height: @h;
+
+ padding: 0px;
+ margin: 0px;
+ font-size: @font-size;
+ line-height: @font-line-height;
+ font-family: @font-family;
+ font-weight: @font-weight;
+ font-style: @font-style;
+ text-decoration: @text-decoration;
+ color: @font-color;
+
+ a {
+ font-size: @a-font-size;
+ font-family: @a-font-family;
+ font-weight: @a-font-weight;
+ font-style: @a-font-style;
+ text-decoration: @a-text-decoration;
+ color: @a-font-color;
+ &:hover {
+ font-size: @a-font-size-hover;
+ font-family: @a-font-family-hover;
+ font-weight: @a-font-weight-hover;
+ font-style: @a-font-style-hover;
+ text-decoration: @a-text-decoration-hover;
+ color: @a-font-color-hover;
+ }
+ }
+
+ // channels tabs
+ div.pfc-tabs {
+ ul {
+ list-style: none;
+ padding: 0 0 0 @padding-left + 10px;
+ margin: 0;
+ z-index: 10;
+ position: absolute;
+
+ li {
+ z-index: 10;
+ height: @tabs-height;
+ line-height: @tabs-height;
+ font-size: @tabs-font-size;
+ font-family: @tabs-font-family;
+ font-weight: @tabs-font-weight;
+ font-style: @tabs-font-style;
+ text-decoration: @tabs-text-decoration;
+ color: @tabs-font-color;
+ margin: 0 2px 0 0;
+ padding: 0 5px 0 5px;
+ display: block;
+ float: left;
+ border-left: @border-width solid @tabs-border-color;
+ border-right: @border-width solid @tabs-border-color;
+ border-top: @border-width solid @tabs-border-color;
+ border-bottom: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ -moz-border-radius-topleft: 4px;
+ -moz-border-radius-topright: 4px;
+ -moz-border-radius-bottomright: 0px;
+ -moz-border-radius-bottomleft: 0px;
+ border-top-left-radius:4px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 0px;
+ border-bottom-left-radius: 0px;
+ background-color: @tab-bg-color-inactive;
+ background: -moz-linear-gradient(top, @tab-bg-color-inactive 0%, @tab-bg-color-inactive2 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @tab-bg-color-inactive), color-stop(100%, @tab-bg-color-inactive2));
+
+ &:hover {
+ background-color: @tab-bg-color-hover;
+ background: -moz-linear-gradient(top, @tab-bg-color-hover 0%, @tab-bg-color-hover 05%, @tab-bg-color-hover2 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @tab-bg-color-hover), color-stop(05%, @tab-bg-color-hover), color-stop(100%,@tab-bg-color-hover2));
+ cursor: pointer;
+ font-size: @tab-font-size-hover;
+ font-family: @tab-font-family-hover;
+ font-weight: @tab-font-weight-hover;
+ font-style: @tab-font-style-hover;
+ text-decoration: @tab-text-decoration-hover;
+ color: @tab-font-color-hover;
+ border-left: @border-width solid @tab-border-color-hover;
+ border-right: @border-width solid @tab-border-color-hover;
+ border-top: @border-width solid @tab-border-color-hover;
+ border-bottom: none;
+ }
+
+ &.active {
+ background-color: @tab-bg-color-active;
+ background: -moz-linear-gradient(top, @tab-bg-color-active 0%, @tab-bg-color-active 05%, @tab-bg-color-active2 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @tab-bg-color-active), color-stop(05%, @tab-bg-color-active), color-stop(100%,@tab-bg-color-active2));
+ cursor: pointer;
+ font-size: @tab-font-size-active;
+ font-family: @tab-font-family-active;
+ font-weight: @tab-font-weight-active;
+ font-style: @tab-font-style-active;
+ text-decoration: @tab-text-decoration-active;
+ color: @tab-font-color-active;
+ border-left: @border-width solid @tab-border-color-active;
+ border-right: @border-width solid @tab-border-color-active;
+ border-top: @border-width solid @tab-border-color-active;
+ border-bottom: none;
+
+ div.close {
+ background-image: @tab-url-bt-close;
+ float: right;
+ width: @tab-bt-close-width;
+ height: @tab-bt-close-height;
+ margin-top: (@tabs-height - @tab-bt-close-height) / 2;
+ &:hover {
+ background-position: bottom center;
+ }
+ }
+ }
+
+ div.icon {
+ width: @tab-icon-width;
+ height: @tab-icon-height;
+ float: left;
+ margin-top: (@tabs-height - @tab-icon-height) / 2;
+ margin-left: 4px;
+ margin-right: 6px;
+ }
+ &.channel {
+ div.icon {
+ background-image: @tab-url-icon-channel;
+ }
+ }
+ &.pm {
+ div.icon {
+ background-image: @tab-url-icon-pm;
+ }
+ }
+
+ div.name {
+ float: left;
+ margin-right: 4px;
+ }
+ &.new-tab {
+ display: block;
+ background: none;
+ background-color: @tab-newtab-bg-color;
+ padding: 0; margin: 0;
+ margin-top: @tab-indent-height - 1px;
+ height: @tabs-height - @tab-indent-height;
+ border-left: @border-width solid @tab-icon-newtab-border-color;
+ border-right: @border-width solid @tab-icon-newtab-border-color;
+ border-top: @border-width solid @tab-icon-newtab-border-color;
+ border-bottom: 1px solid @border-color;
+ div.icon {
+ background-image: @tab-url-newtab;
+ width: @tab-icon-newtab-width;
+ height: @tab-icon-newtab-height;
+ margin: 2px; padding: 0;
+ }
+ &:hover {
+ @tab-indent-height: 0;
+ margin-top: @tab-indent-height - 0px;
+ height: @tabs-height - @tab-indent-height - 1;
+ }
+ }
+ }
+ }
+ }
+
+ // channels tabs (mobile version)
+ div.pfc-mobile-tabs {
+ display: none;
+ position: absolute;
+ top: @tabs-height + @topic-height + 2 * @border-width + 4px;
+ left: @padding-left;
+ right: @padding-right;
+ z-index: 5;
+ border: @border-width solid @tabs-border-color;
+ ul {
+ margin: 0px; padding: 0px;
+ list-style: none;
+ li {
+ float: none;
+ padding: 0 10px;
+ border-bottom: @border-width solid @tabs-border-color;
+ z-index: 10;
+ height: @tabs-height;
+ line-height: @tabs-height;
+ display: block;
+ font-size: @tabs-font-size;
+ font-family: @tabs-font-family;
+ font-weight: @tabs-font-weight;
+ font-style: @tabs-font-style;
+ text-decoration: @tabs-text-decoration;
+ color: @tabs-font-color;
+ background-color: @tab-bg-color-inactive;
+ background: -moz-linear-gradient(top, @tab-bg-color-inactive 0%, @tab-bg-color-inactive2 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @tab-bg-color-inactive), color-stop(100%, @tab-bg-color-inactive2));
+ &:hover {
+ background-color: @tab-bg-color-hover;
+ background: -moz-linear-gradient(top, @tab-bg-color-hover 0%, @tab-bg-color-hover 05%, @tab-bg-color-hover2 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @tab-bg-color-hover), color-stop(05%, @tab-bg-color-hover), color-stop(100%,@tab-bg-color-hover2));
+ cursor: pointer;
+ font-size: @tab-font-size-hover;
+ font-family: @tab-font-family-hover;
+ font-weight: @tab-font-weight-hover;
+ font-style: @tab-font-style-hover;
+ text-decoration: @tab-text-decoration-hover;
+ color: @tab-font-color-hover;
+ border-left: @border-width solid @tab-border-color-hover;
+ border-right: @border-width solid @tab-border-color-hover;
+ border-top: @border-width solid @tab-border-color-hover;
+ border-bottom: @border-width solid @tab-border-color-hover;
+ }
+ &.active {
+ background-color: @tab-bg-color-active;
+ background: -moz-linear-gradient(top, @tab-bg-color-active 0%, @tab-bg-color-active 05%, @tab-bg-color-active2 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @tab-bg-color-active), color-stop(05%, @tab-bg-color-active), color-stop(100%,@tab-bg-color-active2));
+ cursor: pointer;
+ font-size: @tab-font-size-active;
+ font-family: @tab-font-family-active;
+ font-weight: @tab-font-weight-active;
+ font-style: @tab-font-style-active;
+ text-decoration: @tab-text-decoration-active;
+ color: @tab-font-color-active;
+ border-left: @border-width solid @tab-border-color-active;
+ border-right: @border-width solid @tab-border-color-active;
+ border-top: @border-width solid @tab-border-color-active;
+ border-bottom: @border-width solid @tab-border-color-active;
+ div.close {
+ background-image: @tab-url-bt-close;
+ float: right;
+ width: @tab-bt-close-width;
+ height: @tab-bt-close-height;
+ margin-top: (@tabs-height - @tab-bt-close-height) / 2;
+ &:hover {
+ background-position: bottom center;
+ }
+ }
+ }
+ &:last-child {
+ border: 0px;
+ }
+ div.icon {
+ width: @tab-icon-width;
+ height: @tab-icon-height;
+ float: left;
+ margin-top: (@tabs-height - @tab-icon-height) / 2;
+ margin-left: 4px;
+ margin-right: 6px;
+ }
+ &.channel {
+ div.icon {
+ background-image: @tab-url-icon-channel;
+ }
+ }
+ &.pm {
+ div.icon {
+ background-image: @tab-url-icon-pm;
+ }
+ }
+
+ div.name {
+ float: left;
+ margin-right: 4px;
+ }
+ &.new-tab {
+ display: none;
+ background: none;
+ background-color: @tab-newtab-bg-color;
+ padding: 0; margin: 0;
+ margin-top: @tab-indent-height - 1px;
+ height: @tabs-height - @tab-indent-height;
+ border-left: @border-width solid @tab-icon-newtab-border-color;
+ border-right: @border-width solid @tab-icon-newtab-border-color;
+ border-top: @border-width solid @tab-icon-newtab-border-color;
+ border-bottom: 1px solid @border-color;
+ div.icon {
+ background-image: @tab-url-newtab;
+ width: @tab-icon-newtab-width;
+ height: @tab-icon-newtab-height;
+ margin: 2px; padding: 0;
+ }
+ &:hover {
+ @tab-indent-height: 0;
+ margin-top: @tab-indent-height - 0px;
+ height: @tabs-height - @tab-indent-height - 1;
+ }
+ }
+ }
+ }
+ }
+
+ // user list
+ div.pfc-users {
+ width: @users-width - @padding-right - @border-width;
+ position: absolute;
+ top: @tabs-height + @topic-height + 2 * @border-width;
+ right: @padding-right;
+ bottom: @footer-height + @compose-height + @padding-bottom + 3 * @border-width;
+ overflow: auto;
+ border-left: @border-width solid @users-border-color;
+ border-right: @border-width solid @users-border-color;
+ background-color: @users-bg-color;
+
+ font-size: @users-font-size;
+ font-family: @users-font-family;
+ font-weight: @users-font-weight;
+ font-style: @users-font-style;
+ text-decoration: @users-text-decoration;
+ color: @users-font-color;
+
+ /* internal shadow effect */
+ .box-shadow-inset(@users-shadow-top, @users-shadow-left, @users-shadow-size, @users-shadow-color);
+
+ .role-title {
+ display: @users-role-title-display;
+ font-size: @users-role-title-font-size;
+ font-family: @users-role-title-font-family;
+ font-weight: @users-role-title-font-weight;
+ font-style: @users-role-title-font-style;
+ text-decoration: @users-role-title-text-decoration;
+ color: @users-role-title-font-color;
+ padding: 15px 0 5px 10px; margin: 0;
+ border-bottom: @users-role-title-border-width @users-role-title-border-type @users-role-title-border-color;
+ }
+
+ ul {
+ padding: 0;
+ margin: 0;
+
+ li {
+ border-top: @users-border-top-width @users-border-type @users-border-color;
+ border-bottom: @users-border-bottom-width @users-border-type @users-border-color;
+ height: @users-list-height;
+ display: block;
+ position: relative;
+ margin-top: @users-margin-top;
+ &:hover {
+ background-color: @users-bg-color-hover;
+ font-size: @users-font-size-hover;
+ font-family: @users-font-family-hover;
+ font-weight: @users-font-weight-hover;
+ font-style: @users-font-style-hover;
+ text-decoration: @users-text-decoration-hover;
+ color: @users-font-color-hover;
+ .box-shadow(@users-shadow-top-hover, @users-shadow-left-hover, @users-shadow-size-hover, @users-shadow-color-hover);
+ .box-shadow-inset(@users-shadow-inset-top-hover, @users-shadow-inset-left-hover, @users-shadow-inset-size-hover, @users-shadow-inset-color-hover);
+ }
+
+ .name {
+ margin-right: @users-avatarlist-size;
+ margin-left: @users-name-margin-left;
+ line-height: @users-list-height;
+ white-space: pre;
+ overflow: hidden;
+ }
+ .avatar {
+ max-height: @users-avatarlist-size;
+ max-width: @users-avatarlist-size;
+ position: absolute;
+ right: @users-avatar-position-right;
+ top: @users-avatar-position-top;
+ bottom: 0;
+ }
+
+ .status {
+ width: @users-icon-width;
+ height: @users-icon-height;
+ position: absolute;
+ left: @users-status-position-left;
+ top: @users-status-position-top;
+ }
+ .myself {
+ font-size: @users-myself-font-size;
+ font-family: @users-myself-font-family;
+ font-weight: @users-myself-font-weight;
+ font-style: @users-myself-font-style;
+ text-decoration: @users-myself-text-decoration;
+ color: @users-myself-font-color;
+ }
+ .st-active {
+ background-image: @users-url-icon-active;
+ }
+ .st-inactive {
+ background-image: @users-url-icon-inactive;
+ }
+ .st-admin.st-active {
+ background-image: @admin-url-icon-active;
+ }
+ .st-admin.st-inactive {
+ background-image: @admin-url-icon-inactive;
+ }
+ }
+ }
+ }
+
+ // message zone
+ div.pfc-messages {
+ background-color: @messages-bg-color;
+ position: absolute;
+ top: @tabs-height + @topic-height + 2 * @border-width;
+ bottom: @footer-height + @compose-height + @padding-bottom + 3 * @border-width;
+ right: @users-width;
+ left: @padding-left;
+ overflow: auto;
+ padding: @messages-padding-top @messages-padding-right-left 0 @messages-padding-right-left;
+ border-left: @border-width solid @messages-border-color;
+ font-size: @messages-font-size;
+ font-family: @messages-font-family;
+ font-weight: @messages-font-weight;
+ font-style: @messages-font-style;
+ text-decoration: @messages-text-decoration;
+ color: @messages-font-color;
+
+ a {
+ font-size: @messages-a-font-size;
+ font-family: @messages-a-font-family;
+ font-weight: @messages-a-font-weight;
+ font-style: @messages-a-font-style;
+ text-decoration: @messages-a-text-decoration;
+ color: @messages-a-font-color;
+ &:hover {
+ font-size: @messages-a-font-size-hover;
+ font-family: @messages-a-font-family-hover;
+ font-weight: @messages-a-font-weight-hover;
+ font-style: @messages-a-font-style-hover;
+ text-decoration: @messages-a-text-decoration-hover;
+ color: @messages-a-font-color-hover;
+ }
+ }
+
+ /* internal shadow effect */
+ .box-shadow-inset(@messages-shadow-top, @messages-shadow-left, @messages-shadow-size, @messages-shadow-color);
+
+ @messages-group-height: 1 + 8 + 10;
+ .messages-group {
+ border-bottom: @messages-group-border-bottom-width @messages-group-border-bottom-type @messages-group-border-bottom-color;
+ padding: 5px 0 8px;
+ font-size: @messages-group-font-size;
+ font-family: @messages-group-font-family;
+ font-weight: @messages-group-font-weight;
+ font-style: @messages-group-font-style;
+ text-decoration: @messages-group-text-decoration;
+ color: @messages-group-font-color;
+ &:hover {
+ background-color: @messages-group-bg-hover;
+ font-size: @messages-group-font-size-hover;
+ font-family: @messages-group-font-family-hover;
+ font-weight: @messages-group-font-weight-hover;
+ font-style: @messages-group-font-style-hover;
+ text-decoration: @messages-group-text-decoration-hover;
+ color: @messages-group-font-color-hover;
+ border-bottom: @messages-group-border-bottom-width-hover @messages-group-border-bottom-type-hover @messages-group-border-bottom-color-hover;
+ .box-shadow(@messages-group-shadow-top-hover, @messages-group-shadow-left-hover, @messages-group-shadow-size-hover, @messages-group-shadow-color-hover);
+ .box-shadow-inset(@messages-group-shadow-inset-top-hover, @messages-group-shadow-inset-left-hover, @messages-group-shadow-inset-size-hover, @messages-group-shadow-inset-color-hover);
+ }
+ .avatar {
+ margin: 4px 0 0 6px;
+ height: @messages-avatar-height;
+ width: @messages-avatar-width;
+ border: @messages-avatar-border-width @message-avatar-border-type @message-avatar-border-color;
+ .box-shadow(@messages-avatar-shadow-top, @messages-avatar-shadow-left, @messages-avatar-shadow-size, @messages-avatar-shadow-color);
+ float: left;
+ }
+
+ .date {
+ float: right;
+ margin-right:5px;
+ font-size: @messages-date-font-size;
+ font-family: @messages-date-font-family;
+ font-weight: @messages-date-font-weight;
+ font-style: @messages-date-font-style;
+ text-decoration: @messages-date-text-decoration;
+ color: @messages-date-font-color;
+ }
+
+ .name {
+ padding: 0; margin: 0;
+ padding-left: @message-padding-left;
+ word-wrap: break-word;
+ font-size: @messages-name-font-size;
+ font-family: @messages-name-font-family;
+ font-weight: @messages-name-font-weight;
+ font-style: @messages-name-font-style;
+ text-decoration: @messages-name-text-decoration;
+ color: @messages-name-font-color;
+ }
+
+ .message {
+ padding: 0; margin: 0;
+ padding-left: @message-padding-left;
+ word-wrap: break-word;
+ white-space: pre;
+ font-size: @messages-message-font-size;
+ font-family: @messages-message-font-family;
+ font-weight: @messages-message-font-weight;
+ font-style: @messages-message-font-style;
+ text-decoration: @messages-message-text-decoration;
+ color: @messages-message-font-color;
+ }
+
+ &.system-message {
+ .message {
+ font-size: @messages-syst-message-font-size;
+ font-family: @messages-syst-message-font-family;
+ font-weight: @messages-syst-message-font-weight;
+ font-style: @messages-syst-message-font-style;
+ text-decoration: @messages-syst-message-text-decoration;
+ color: @messages-syst-message-font-color;
+ }
+ }
+ }
+
+ // used to move scroll at bottom on mobile interface (hidden by default)
+ .pfc-message-mobile-padding {
+ display: none;
+ height: @h - (@tabs-height + @topic-height + 5 * @border-width + @footer-height + @compose-height + @padding-bottom + @messages-group-height);
+ }
+
+ }
+
+ // top zone (between tabs and messages)
+ div.pfc-topic {
+ z-index: 5;
+ position: absolute;
+ margin-top: -@border-width;
+ top: @tabs-height + @border-width;
+ right: @padding-right;
+ left: @padding-left;
+ height: @topic-height;
+ background-color: @topic-bg-color;
+ border: @border-width solid @topic-border-color;
+
+ border-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+ -moz-border-radius-topright: 3px;
+ -moz-border-radius-topleft: 3px;
+ -webkit-border-top-right-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+
+ p {
+ color: @topic-font-color;
+ font-size: @topic-font-size;
+ font-family: @topic-font-family;
+ font-weight: @topic-font-weight;
+ font-style: @topic-font-style;
+ text-decoration: @topic-text-decoration;
+ line-height: @topic-height;
+ float: right;
+ padding: 0;
+ margin: 0 10px 0 0;
+ span.pfc-topic-label {
+ display: @topic-text-display;
+ color: @topic-label-font-color;
+ font-size: @topic-label-font-size;
+ font-family: @topic-label-font-family;
+ font-weight: @topic-label-font-weight;
+ font-style: @topic-label-font-style;
+ text-decoration: @topic-label-text-decoration;
+ }
+ span.pfc-topic-value {
+ display: @topic-text-display;
+ }
+ }
+ }
+
+ div.pfc-footer {
+ position: absolute;
+ bottom: @padding-bottom + @compose-height + @border-width;
+ left: @padding-left;
+ right: @padding-right;
+ border: @border-width solid @footer-border-color;
+ height: @footer-height;
+ line-height: @footer-height;
+ background-color: @footer-bg-color;
+ color: @footer-font-color;
+ font-size: @footer-font-size;
+ font-family: @footer-font-family;
+ font-weight: @footer-font-weight;
+ font-style: @footer-font-style;
+ text-decoration: @footer-text-decoration;
+
+ a {
+ font-size: @footer-a-font-size;
+ font-family: @footer-a-font-family;
+ font-weight: @footer-a-font-weight;
+ font-style: @footer-a-font-style;
+ text-decoration: @footer-a-text-decoration;
+ color: @footer-a-font-color;
+ &:hover {
+ font-size: @footer-a-font-size-hover;
+ font-family: @footer-a-font-family-hover;
+ font-weight: @footer-a-font-weight-hover;
+ font-style: @footer-a-font-style-hover;
+ text-decoration: @footer-a-text-decoration-hover;
+ color: @footer-a-font-color-hover;
+ }
+ &.bt-powered {
+ margin-right: 10px;
+ }
+ &.bt-donate {
+ position: relative;
+ border: 1px solid @footer-donate-border-color;
+ .box-shadow-inset(0, 0, 1px, @footer-donate-shadow-inset-color);
+ .rounded-corners(@footer-donate-border-radius);
+ padding: 2px 10px 2px 25px;
+ background: url("img/donate.png") 10px 0 no-repeat;
+ &:hover {
+ background-color:@footer-donate-bg-color-hover;
+ text-decoration: none;
+ }
+ }
+ }
+
+ p.ping {
+ margin: 0 8px 0 0; padding: 0;
+ float: right;
+ line-height: @footer-height;
+ color: @footer-ping-font-color;
+ font-size: @footer-ping-font-size;
+ font-family: @footer-ping-font-family;
+ font-weight: @footer-ping-font-weight;
+ font-style: @footer-ping-font-style;
+ text-decoration: @footer-ping-text-decoration;
+ }
+ p.logo {
+ margin: 0 4px 0 0; padding: 0;
+ float: right;
+ line-height: @footer-height;
+ img {
+ vertical-align: middle;
+ margin-top: -4px;
+ }
+ }
+ ul {
+ margin: 0 0 0 4px; padding: 0;
+ list-style: none;
+ li {
+ float: left;
+ margin-right: 6px;
+ line-height: @footer-height;
+ div {
+ width: @footer-bt-width;
+ height: @footer-bt-height;
+ margin-top: 4px;
+ cursor: pointer;
+ &:hover {
+ background-position: bottom center;
+ }
+ &.logout-btn {
+ background-image: @footer-url-bt-logout;
+ }
+ /*&.online-btn {
+ background-image: @footer-url-bt-online;
+ }
+ */
+ &.smiley-btn {
+ background-image: @footer-url-bt-smiley;
+ }
+ &.sound-btn {
+ background-image: @footer-url-bt-sound;
+ }
+ }
+ }
+ }
+ }
+
+ // input text zone
+ div.pfc-compose {
+ position: absolute;
+ bottom: @padding-bottom + @border-width;
+ left: @padding-left;
+ right: @padding-right;
+ background-color: @compose-bg-color ;
+ height: @compose-height;
+
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ -moz-border-radius-bottomright: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+
+ textarea {
+ position: absolute;
+ right: 0; left: 0;
+ top: 0; bottom: 0;
+ margin: 0; padding: 2px;
+ background-color: @compose-bg-color ;
+
+ color: @compose-font-color;
+ font-size: @compose-font-size;
+ font-family: @compose-font-family;
+ font-weight: @compose-font-weight;
+ font-style: @compose-font-style;
+ text-decoration: @compose-text-decoration;
+
+ border-left: @border-width solid @compose-border-color;
+ border-right: @border-width solid @compose-border-color;
+ border-bottom: @border-width solid @compose-border-color;
+ border-top: none;
+
+ .box-shadow-inset(@compose-shadow-top, @compose-shadow-left, @compose-shadow-size, @compose-shadow-color);
+
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ -moz-border-radius-bottomright: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+ }
+ }
+
+ // modalbox styles
+ div.pfc-modal-overlay {
+ display: none;
+ position: absolute;
+ background-color: #000;
+ opacity: 0.2;
+ z-index: 50;
+ right: 0;
+ left: 0;
+ bottom: -10px;
+ top: -@padding-top;
+ .rounded-corners(5px);
+ }
+ div.pfc-modal-box {
+ display: none;
+ position: absolute;
+ background-color: #FFF;
+ z-index: 55;
+ padding: 10px;
+ .rounded-corners(5px);
+ .box-shadow(@modalbox-shadow-top, @modalbox-shadow-left, @modalbox-shadow-size, @modalbox-shadow-color);
+ .popup-login {
+ text-align: right;
+ input[type="text"] {
+ border: 1px solid @modalbox-popup-login-input-login-border-color;
+ background-color: @modalbox-popup-login-input-login-bg-color;
+ color: @modalbox-popup-login-input-login-font-color;
+ padding: 2px 5px;
+ margin-bottom: 10px;
+ }
+ input[type="submit"] {
+ border: 1px solid @modalbox-popup-login-bt-signin-border-color;
+ .rounded-corners(@modalbox-popup-login-bt-signin-border-radius);
+ color: @modalbox-popup-login-bt-signin-font-color;
+ padding: 2px 10px;
+ background-color: @modalbox-popup-login-bt-signin-bg-color;
+ &:hover {
+ border: 1px solid @modalbox-popup-login-bt-signin-border-color-hover;
+ color: @modalbox-popup-login-bt-signin-font-color-hover;
+ background-color: @modalbox-popup-login-bt-signin-bg-color-hover;
+ text-decoration: none;
+ cursor: pointer;
+ }
+ }
+ }
+ .popup-donate {
+ p {
+ position: relative;
+ top: 2px;
+ font-size: 14px;
+ line-height: 16px;
+ height: 139px;
+ width: 300px;
+ margin-bottom: 0;
+ padding-right: 66px;
+ background: url("img/illus-donate.png") right bottom no-repeat;
+ }
+ div {
+ input[name="cancel-donate"] {
+ position: relative;
+ top: -4px;
+ width: 114px;
+ height: 24px;
+ background: url("img/bt-not-now.png") top center no-repeat;
+ border: 0;
+ padding: 0 0 4px;
+ margin: 0 10px;
+ color: #9e9e9e;
+ font-size: 14px;
+ &:hover {
+ background-position: bottom center;
+ cursor: pointer;
+ color: #2593c5;
+ }
+ }
+ input[name="ok-donate"]{
+ width: 204px;
+ height:44px;
+ background: url("img/bt-donate-popup.png") top center no-repeat;
+ border: 0;
+ padding: 0 0 0 60px;
+ margin: 0 10px;
+ color: #fff;
+ font-size: 20px;
+ &:hover {
+ cursor: pointer;
+ background-position: bottom center;
+ }
+ }
+ }
+ span {
+ display: block;
+ margin-top: 5px;
+ label {
+ font-size: 10px;
+ position: relative;
+ top: -3px;
+ }
+ }
+ }
+
+ }
+
+}
+
+// pfc backlink zone
+div.pfc-backlink {
+ padding: 10px;
+ border: @border-width solid @border-color;
+ background-color: @footer-bg-color;
+ p {
+ padding: 0; margin: 0;
+ }
+ pre {
+ padding: 5px;
+ background-color: #DDD;
+ }
+}
View
39 client/themes/phpfreechat-mini/pfc-notabs.less
@@ -0,0 +1,39 @@
+//
+// if .pfc-notabs class is applied to div.pfc-content
+// then tabs (channels) are hidden
+// by default, tabs are hidden (see jquery.phpfreechat.init.js)
+//
+
+@notabs-height: 0;
+
+div.pfc-content.pfc-notabs {
+
+ div.pfc-tabs {
+ ul {
+ li {
+ height: @notabs-height;
+ &.new-tab {
+ height: @notabs-height - @tab-indent-height;
+ &:hover {
+ height: @notabs-height - @tab-indent-height - 1;
+ }
+ }
+ }
+ }
+ }
+
+ div.pfc-users {
+ top: @notabs-height + @topic-height + 2 * @border-width;
+ }
+
+ div.pfc-messages {
+ top: @notabs-height + @topic-height + 2 * @border-width;
+ }
+
+ div.pfc-topic {
+ top: @notabs-height + @border-width;
+ }
+
+}
+
+
View
110 client/themes/phpfreechat-mini/pfc-responsive.less
@@ -0,0 +1,110 @@
+// hidden elements used by tablet and mobile version
+// --------------------------------------------------
+div.pfc-content {
+ // tabs toggle button design
+ a.pfc-toggle-users {
+ display: none;
+ float: right;
+ position: absolute;
+ top: 1px; right: 2px;
+ width: 40px; height: 28px;
+ background: url('img/users-toggle.png') top center no-repeat;
+ cursor: pointer;
+ &:hover {
+ background-position: bottom center;
+ }
+ }
+
+ // tabs toggle button design
+ a.pfc-toggle-tabs {
+ display: none;
+ float: right;
+ position: absolute;
+ top: 1px; left: 2px;
+ width: 40px;height: 28px;
+ background: url('img/tabs-toggle.png') top center no-repeat;
+ cursor: pointer;
+ &:hover {
+ background-position: bottom center;
+ }
+ }
+}
+
+// TABLET
+// ----------------------------------
+@media (max-width: @responsive-tablet-width) {
+ div.pfc-content {
+ div.pfc-users {
+ display: none;
+ }
+ div.pfc-messages {
+ right: @padding-right;
+ }
+ div.pfc-topic {
+ height: 30px !important;
+ p {
+ line-height: 30px !important;
+ margin-right: 50px !important;
+ }
+ }
+ a.pfc-toggle-users {
+ display: block;
+ }
+ }
+}
+
+// MOBILE
+//--------------------------------------
+@media (max-width: @responsive-mobile-width) {
+
+ .pfc-content{
+ top: -30px;
+ div.pfc-messages {
+ .messages-group {
+ .avatar {
+ display: none;
+ }
+ .name, .message{
+ padding: 0px !important;
+ }
+ }
+ .pfc-message-mobile-padding {
+ display: block !important;
+ }
+ }
+ a.pfc-toggle-tabs {
+ display: @toggle-tabs-btn-display !important;
+ }
+
+ .pfc-tabs {
+ display: none;
+ }
+
+ .pfc-modal-box{
+ .popup-donate {
+ p {
+ width: 140px !important;
+ }
+ div {
+ position: relative;
+ height: 70px;
+ input[name="cancel-donate"] {
+ display: block;
+ margin: 0 auto !important;
+ top: 50px !important;
+ }
+ input[name="ok-donate"] {
+ display: block;
+ margin: 0 auto !important;
+ position: absolute;
+ top: 0px;
+ }
+ }
+ span {
+ clear: both;
+ }
+ }
+ }
+
+ }
+}
View
47 client/themes/phpfreechat-mini/pfc-theme-responsive.less
@@ -0,0 +1,47 @@
+// hidden elements used by tablet and mobile version
+// --------------------------------------------------
+div.pfc-content {
+ // tabs toggle button design
+ a.pfc-toggle-users {
+ display: none;
+ float: right;
+ position: absolute;
+ top: 1px; right: 2px;
+ width: 40px; height: 28px;
+ background: url('img/users-toggle.png') top center no-repeat;
+ cursor: pointer;
+ &:hover {
+ background-position: bottom center;
+ }
+ }
+
+ // tabs toggle button design
+ a.pfc-toggle-tabs {
+ display: none;
+ float: right;
+ position: absolute;
+ top: 1px; left: 2px;
+ width: 40px;height: 28px;
+ background: url('img/tabs-toggle.png') top center no-repeat;
+ cursor: pointer;
+ &:hover {
+ background-position: bottom center;
+ }
+ }
+}
+
+// TABLET
+// ----------------------------------
+@media (max-width: @responsive-tablet-width) {
+ div.pfc-hook{
+ right: 50px;
+ }
+}
+
+// MOBILE
+//--------------------------------------
+@media (max-width: @responsive-mobile-width) {
+ div.pfc-hook{
+ right: 0;
+ }
+}
View
132 client/themes/phpfreechat-mini/pfc-theme-variables.less
@@ -0,0 +1,132 @@
+//
+// phpfreechat: variables for the theme
+//
+
+/* GENERAL */
+@h: 600px;
+
+@border-width: 1px;
+@border-color: #d1d1d1;
+
+
+/* CONTENT */
+@font-color: #a3a3a3;
+
+@a-font-color: #5accff;
+
+
+/* PFC TABS */
+@tabs-height: 30px;
+@tabs-bg-color: #ffbf16;
+@tabs-border-color: #ffbf16;
+
+@tabs-font-color: #666666;
+
+@tab-bg-color-inactive: #f89e00;
+@tab-bg-color-inactive2: #ffbf16;
+
+@tab-font-color-hover: #cecece;
+@tab-bg-color-hover2: #3f8ec0;
+@tab-border-color-hover: @tab-border-color-active;
+
+@tab-font-color-active: #cecece;
+@tab-bg-color-active: #1a699b;
+@tab-bg-color-active2: #3f8ec0;
+@tab-border-color-active: #33a9de;
+
+@tab-url-bt-close: url('img/close.png');
+@tab-bt-close-width: 12px;
+@tab-bt-close-height: 12px;
+
+@tab-icon-width: 15px;
+@tab-icon-height: 13px;
+
+@tab-icon-newtab-width: 20px;
+@tab-icon-newtab-height: 18px;
+
+@tab-indent-height: 6px;
+
+
+/* PFC TOPICS */
+@topic-height: 25px;
+@topic-bg-color: #3f8ec0;
+@topic-border-color: #33a9de;
+@topic-text-display: inline;
+
+@topic-font-color: #cecece;
+
+/* PFC MESSAGES */
+@messages-shadow-top: 0;
+@messages-shadow-left: 0;
+@messages-shadow-size: 5px;
+@messages-shadow-color: #E8E8E8;
+
+@messages-group-border-bottom-width: 1px;
+@messages-group-border-bottom-type: solid;
+@messages-group-border-bottom-color: #3f8ec0;
+
+@messages-group-bg-hover: #f4f4f4;
+
+@messages-name-font-color: #3f8ec0;
+
+
+/* PFC USERS */
+@users-border-bottom-width: @border-width;
+@users-border-type: solid;
+@users-border-color: @border-color;
+@users-margin-top: 0px;
+
+@users-font-color: @font-color;
+@users-font-size: @font-size;
+@users-font-family: @font-family;
+@users-font-weight: @font-weight;
+@users-font-style: @font-style;
+@users-text-decoration: @text-decoration;
+
+@users-bg-color-hover: @users-bg-color;
+@users-font-color-hover: @users-font-color;
+@users-font-size-hover: @users-font-size;
+@users-font-family-hover: @users-font-family;
+@users-font-weight-hover: @users-font-weight;
+@users-font-style-hover: @users-font-style;
+@users-text-decoration-hover: @users-text-decoration;
+
+@users-role-title-font-color: #3f8ec0;
+@users-role-title-font-size: 14px;
+
+@users-shadow-top: "";
+@users-shadow-left: "";
+@users-shadow-size: "";
+@users-shadow-color: "";
+
+@users-icon-width: 7px;
+@users-icon-height: 7px;
+@users-status-position-top:11px;
+@users-status-position-left: 10px;
+
+@users-role-title-border-color: #3f8ec0;
+
+
+/* PFC FOOTER */
+@footer-bg-color: #3f8ec0;
+@footer-border-color: #33a9de;
+
+@footer-donate-border-color: @footer-border-color;
+@footer-donate-shadow-inset-color: #02354f;
+@footer-donate-bg-color-hover: #1a5981;
+
+
+/* PFC COMPOSE */
+@compose-font-color: #808080;
+
+@compose-shadow-top: 0;
+@compose-shadow-left: 0;
+@compose-shadow-size: 5px;
+@compose-shadow-color: #dcdcdc;
+
+/* PFC MINI CHAT */
+@pfc-mini-chat-position-right: 200px;
+@pfc-mini-chat-width: 250px;
+@pfc-mini-chat-content-height: 480px;
+@pfc-mini-chat-content-fade-color-1: #fff;
+@pfc-mini-chat-content-fade-color-2: #ebebeb;
View
173 client/themes/phpfreechat-mini/pfc-theme.less
@@ -0,0 +1,173 @@
+//
+// phpfreechat mini theme
+//
+div.pfc-mini-chat-wrapper {
+ position: fixed !important;
+ bottom: 0;
+ right: @pfc-mini-chat-position-right;
+ width: @pfc-mini-chat-width;
+ // menu minichat
+ #pfc-menu-mini-chat {
+ position: absolute;
+ bottom: 0;
+ z-index: 100;
+ a {
+ display: block;
+ float: left;
+ &.chat {
+ width: 194px;
+ height: 40px;
+ background: url("img/minichat/bt-mini-chat.png") top right no-repeat;
+ }
+ &.tabs {
+ width: 28px;
+ height: 28px;
+ margin-top: 12px;
+ background: url("img/minichat/bt-rooms.png") top right no-repeat;
+ }
+ &.users {
+ width: 28px;
+ height: 28px;
+ margin-top: 12px;
+ background: url("img/minichat/bt-users.png") top right no-repeat;
+ }
+ &:hover {
+ background-position: bottom right;
+ }
+ &.active {
+ background-position: center right;
+ }
+ }
+ }
+}
+
+div.pfc-content {
+ display: none;
+ background-color: @pfc-mini-chat-content-fade-color-1;
+ background: -moz-linear-gradient(top, @pfc-mini-chat-content-fade-color-1 50%, @pfc-mini-chat-content-fade-color-2 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, @pfc-mini-chat-content-fade-color-1), color-stop(100%, @pfc-mini-chat-content-fade-color-2));
+ height: @pfc-mini-chat-content-height;
+ .box-shadow(0, 0, 5px, #bbb);
+
+ // channels tabs
+ div.pfc-tabs {
+ position: relative;
+ top: 90px;
+ display: none;
+ ul {
+ top: 31px;
+ padding: 0;
+ width: @pfc-mini-chat-width + 2;
+ li {
+ border-radius: 0;
+ float: none;
+ &.new-tab {
+ width: @pfc-mini-chat-width;
+ height: @tabs-height;
+ line-height: @tabs-height;
+ position: absolute;
+ top: -35px;
+ border: 0;
+ &:hover {
+ @tab-indent-height: 0;
+ margin-top: 5px;
+ height: @tabs-height;
+ background-color: @tab-bg-color-hover;
+ background: -moz-linear-gradient(top, @tab-bg-color-hover 0%, @tab-bg-color-hover 05%, @tab-bg-color-hover2 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @tab-bg-color-hover), color-stop(05%, @tab-bg-color-hover), color-stop(100%,@tab-bg-color-hover2));
+ cursor: pointer;
+ }
+ div.icon {
+ float: right;
+ margin: 4px 10px;
+ }
+ }
+ }
+ }
+ }
+
+ // user list
+ div.pfc-users {
+ display:none;
+ top: 25px;
+ right: 0;
+ bottom: 28px;
+ width: @pfc-mini-chat-width - 2;
+ }
+
+ // message zone
+ div.pfc-messages {
+ top: 25px;
+ right: 0;
+ left: 0;
+ bottom: 80px;
+ width: @pfc-mini-chat-width - 21;
+ border-bottom: 1px solid #ccc;
+ .messages-group .message {
+ white-space: normal;
+ }
+ }
+
+ // top zone (between tabs and messages)
+ div.pfc-topic {
+ display: none;
+ }
+
+ div.pfc-footer {
+ right: 0;
+ left: 0;
+ top: 0;
+ .ping {
+ display: none;
+ }
+ ul {
+ display: none;
+ }
+ }
+
+ // input text zone
+ div.pfc-compose {
+ left: 0;
+ bottom: 40px;
+ width: @pfc-mini-chat-width - 2;
+ textarea {
+ width: @pfc-mini-chat-width - 6 !important;
+ }
+ }
+
+ // modal-overlay
+ div.pfc-modal-overlay {
+ top: 26px;
+ border-radius: 0;
+ }
+
+ // login
+ div.pfc-modal-box {
+ top: 100px !important;
+ left: 35px !important;
+ ul.pfc-errors {
+ padding: 0 5px 0 15px;
+ margin: 0;
+ color: red;
+ width: 145px;
+ }
+ }
+
+ // add-mobile
+ div.pfc-ad-mobile {
+ position: absolute;
+ background: @footer-bg-color;
+ width: 100%;
+ height: 65px;
+ left: 0px;
+ top: 26px;
+ z-index: 1000;
+ div.pub1 {
+ width: 234px;
+ height: 60px;
+ margin: 0 auto;
+ background-color: red;
+ }
+ }
+
+}
View
395 client/themes/phpfreechat-mini/pfc-variables.less
@@ -0,0 +1,395 @@
+//
+// phpfreechat variables used for styles
+// see also jquery.phpfreechat.theme.variables.less
+//
+
+/* GENERAL */
+@h: 600px;
+
+@padding-left: 6px;
+@padding-right: 6px;
+@padding-top: 6px;
+@padding-bottom: 6px;
+
+@border-width: 1px;
+@border-color: lighten(grey, 30%);
+
+@dialog-bg-color: #EEF;
+@dialog-overlay-color: #000;
+@dialog-border-color: darken(@border-color, 20%);
+@toggle-tabs-btn-display: block;
+
+@responsive-tablet-width: 750px;
+@responsive-mobile-width: 480px;
+
+
+/* CONTENT */
+@font-color: #797979;
+@font-size: 12px;
+@font-line-height: 14px;
+@font-family: arial;
+@font-weight: normal;
+@font-style: normal;
+@text-decoration: none;
+
+@a-font-color: #0C91EC;
+@a-font-size: @font-size;
+@a-font-family: @font-family;
+@a-font-weight: @font-weight;
+@a-font-style: @font-style;
+@a-text-decoration: @text-decoration;
+
+@a-font-color-hover: @a-font-color;
+@a-font-size-hover: @a-font-size;
+@a-font-family-hover: @a-font-family;
+@a-font-weight-hover: @a-font-weight;
+@a-font-style-hover: @a-font-style;
+@a-text-decoration-hover: underline;
+
+/* PFC TABS */
+@tabs-height: 30px;
+@tabs-bg-color: #EEF;
+@tabs-border-color: @border-color;
+
+@tabs-font-color: #FFF;
+@tabs-font-size: @font-size;
+@tabs-font-family: @font-family;
+@tabs-font-weight: @font-weight;
+@tabs-font-style: @font-style;
+@tabs-text-decoration: @text-decoration;
+
+@tab-bg-color-inactive: #0C91EC;
+@tab-bg-color-inactive2: darken(@tab-bg-color-inactive, 20%);
+
+@tab-font-size-hover: @tabs-font-size;
+@tab-font-family-hover: @tabs-font-family;
+@tab-font-weight-hover: @tabs-font-weight;
+@tab-font-style-hover: @tabs-font-style;
+@tab-text-decoration-hover: @tabs-text-decoration;
+@tab-font-color-hover: #333;
+@tab-bg-color-hover: @tab-bg-color-active;
+@tab-bg-color-hover2: @tabs-bg-color;
+@tab-border-color-hover: @tabs-border-color;
+
+@tab-font-size-active: @tabs-font-size;
+@tab-font-family-active: @tabs-font-family;
+@tab-font-weight-active: @tabs-font-weight;
+@tab-font-style-active: @tabs-font-style;
+@tab-text-decoration-active: @tabs-text-decoration;
+@tab-font-color-active: #333;
+@tab-bg-color-active: #FFF;
+@tab-bg-color-active2: @tabs-bg-color;
+@tab-border-color-active: @tabs-border-color;
+
+@tab-url-bt-close: url('img/close.png');
+@tab-bt-close-width: 16px;
+@tab-bt-close-height: 16px;
+
+@tab-icon-width: 16px;
+@tab-icon-height: 16px;
+@tab-url-icon-channel: url('img/channel.png');
+@tab-url-icon-pm: url('img/pm.png');
+
+@tab-newtab-bg-color: @tabs-bg-color;
+@tab-url-newtab: url('img/tab-add.png');
+@tab-icon-newtab-width: 16px;
+@tab-icon-newtab-height: 16px;
+@tab-icon-newtab-border-color: @tabs-border-color;
+
+@tab-indent-height: 6px;
+
+
+/* PFC TOPICS */
+@topic-height: 25px;
+@topic-bg-color: #EEF;
+@topic-border-color: @border-color;
+@topic-text-display: inline;
+
+@topic-font-color: @font-color;
+@topic-font-size: @font-size;
+@topic-font-family: @font-family;
+@topic-font-weight: @font-weight;
+@topic-font-style: @font-style;
+@topic-text-decoration: @text-decoration;
+
+@topic-label-font-color: @topic-font-color;
+@topic-label-font-size: @topic-font-size;
+@topic-label-font-family: @topic-font-family;
+@topic-label-font-weight: bold;
+@topic-label-font-style: @topic-font-style;
+@topic-label-text-decoration: none;
+
+/* PFC MESSAGES */
+@messages-bg-color: #FFF;
+@messages-border-color: @border-color;
+
+@messages-font-color: @font-color;
+@messages-font-size: @font-size;
+@messages-font-family: @font-family;
+@messages-font-weight: @font-weight;
+@messages-font-style: @font-style;
+@messages-text-decoration: @text-decoration;
+
+@messages-a-font-color: @a-font-color;
+@messages-a-font-size: @a-font-size;
+@messages-a-font-family: @a-font-family;
+@messages-a-font-weight: @a-font-weight;
+@messages-a-font-style: @a-font-style;
+@messages-a-text-decoration: @a-text-decoration;
+
+@messages-a-font-color-hover: @a-font-color-hover;
+@messages-a-font-size-hover: @a-font-size-hover;
+@messages-a-font-family-hover: @a-font-family-hover;
+@messages-a-font-weight-hover: @a-font-weight-hover;
+@messages-a-font-style-hover: @a-font-style-hover;
+@messages-a-text-decoration-hover: @a-text-decoration-hover;
+
+@messages-shadow-top: 0;
+@messages-shadow-left: 3px;
+@messages-shadow-size: 10px;
+@messages-shadow-color: #E8E8E8;
+
+@messages-group-font-color: @messages-font-color;
+@messages-group-font-size: @messages-font-size;
+@messages-group-font-family: @messages-font-family;
+@messages-group-font-weight: @messages-font-weight;
+@messages-group-font-style: @messages-font-style;
+@messages-group-text-decoration: @messages-text-decoration;
+@messages-group-border-bottom-width: 1px;
+@messages-group-border-bottom-type: dotted;
+@messages-group-border-bottom-color: #D0D0D0;
+
+@messages-group-font-size-hover: @messages-group-font-size;
+@messages-group-font-family-hover: @messages-group-font-family;
+@messages-group-font-weight-hover: @messages-group-font-weight;
+@messages-group-font-style-hover: @messages-group-font-style;
+@messages-group-text-decoration-hover: @messages-group-text-decoration;
+@messages-group-bg-hover: @messages-bg-color;
+@messages-group-font-color-hover: @messages-font-color;
+@messages-group-border-bottom-width-hover: @messages-group-border-bottom-width;
+@messages-group-border-bottom-type-hover: @messages-group-border-bottom-type;
+@messages-group-border-bottom-color-hover: @messages-group-border-bottom-color;
+@messages-group-shadow-top-hover: "";
+@messages-group-shadow-left-hover: "";
+@messages-group-shadow-size-hover: "";
+@messages-group-shadow-color-hover: "";
+@messages-group-shadow-inset-top-hover: "";
+@messages-group-shadow-inset-left-hover: "";
+@messages-group-shadow-inset-size-hover: "";
+@messages-group-shadow-inset-color-hover: "";
+
+@messages-date-font-color: @messages-font-color;
+@messages-date-font-size: 90%;
+@messages-date-font-family: @messages-font-family;
+@messages-date-font-weight: @messages-font-weight;
+@messages-date-font-style: @messages-font-style;
+@messages-date-text-decoration: @messages-text-decoration;
+
+@messages-name-font-color: @messages-font-color;
+@messages-name-font-size: @messages-font-size;
+@messages-name-font-family: @messages-font-family;
+@messages-name-font-weight: bold;
+@messages-name-font-style: @messages-font-style;
+@messages-name-text-decoration: @messages-text-decoration;
+
+@messages-message-font-color: @messages-font-color;
+@messages-message-font-size: @messages-font-size;
+@messages-message-font-family: @messages-font-family;
+@messages-message-font-weight: @messages-font-weight;
+@messages-message-font-style: @messages-font-style;
+@messages-message-text-decoration: @messages-text-decoration;
+
+@messages-avatar-height: 30px;
+@messages-avatar-width: 30px;
+@messages-avatar-border-width: 0;
+@message-avatar-border-type: "";
+@message-avatar-border-color: "";
+@messages-avatar-shadow-top: "";
+@messages-avatar-shadow-left: "";
+@messages-avatar-shadow-size: "";
+@messages-avatar-shadow-color: "";
+
+@messages-syst-message-font-color: grey;
+@messages-syst-message-font-size: @messages-font-size;
+@messages-syst-message-font-family: @messages-font-family;
+@messages-syst-message-font-weight: @messages-font-weight;
+@messages-syst-message-font-style: italic;
+@messages-syst-message-text-decoration: @messages-text-decoration;
+
+@messages-padding-top: 10px;
+@messages-padding-right-left: 10px;
+@message-padding-left: 50px;
+
+/* PFC USERS */
+@users-width: 200px;
+@users-list-height: 30px;
+@users-bg-color: #FFF;
+@users-border-top-width: 0;
+@users-border-bottom-width: @border-width;
+@users-border-type: solid;
+@users-border-color: @border-color;
+@users-margin-top: 0px;
+
+@users-font-color: @font-color;
+@users-font-size: @font-size;
+@users-font-family: @font-family;
+@users-font-weight: @font-weight;
+@users-font-style: @font-style;
+@users-text-decoration: @text-decoration;
+
+@users-bg-color-hover: @users-bg-color;
+@users-font-color-hover: @users-font-color;
+@users-font-size-hover: @users-font-size;
+@users-font-family-hover: @users-font-family;
+@users-font-weight-hover: @users-font-weight;
+@users-font-style-hover: @users-font-style;
+@users-text-decoration-hover: @users-text-decoration;
+@users-shadow-top-hover: "";
+@users-shadow-left-hover: "";
+@users-shadow-size-hover: "";
+@users-shadow-color-hover: "";
+@users-shadow-inset-top-hover: "";
+@users-shadow-inset-left-hover: "";
+@users-shadow-inset-size-hover: "";
+@users-shadow-inset-color-hover: "";
+
+@users-role-title-font-color: @users-font-color;
+@users-role-title-font-size: @users-font-size;
+@users-role-title-font-family: @users-font-family;
+@users-role-title-font-weight: bold;
+@users-role-title-font-style: @users-font-style;
+@users-role-title-text-decoration: @users-text-decoration;
+
+@users-shadow-top: 0;
+@users-shadow-left: 3px;
+@users-shadow-size: 10px;
+@users-shadow-color: #E8E8E8;
+
+@users-role-title-display: block;
+@users-role-title-border-width: 1px;
+@users-role-title-border-type: solid;
+@users-role-title-border-color: @users-border-color;
+
+@users-avatarlist-size: 30px;
+@users-avatar-position-top: 5px;
+@users-avatar-position-right: 5px;
+
+@users-icon-width: 16px;
+@users-icon-height: 16px;
+@users-status-position-top: 6px;
+@users-status-position-left: 8px;
+@users-url-icon-active: url(img/active.png);
+@users-url-icon-inactive: url(img/inactive.png);
+@users-url-icon-neutral: url(img/netral.png);
+@admin-url-icon-active: url(img/user-admin-active.png);
+@admin-url-icon-inactive: url(img/user-admin-inactive.png);
+
+@users-name-margin-left: 30px;
+
+@users-myself-font-color: @users-font-color;
+@users-myself-font-size: @users-font-size;
+@users-myself-font-family: @users-font-family;
+@users-myself-font-weight: @users-font-weight;
+@users-myself-font-style: italic;
+@users-myself-text-decoration: @users-text-decoration;
+
+/* PFC FOOTER */
+@footer-height: 25px;
+@footer-bg-color: #EEF;
+@footer-border-color: @border-color;
+
+@footer-font-color: @font-color;
+@footer-font-size: @font-size;
+@footer-font-family: @font-family;
+@footer-font-weight: @font-weight;
+@footer-font-style: @font-style;
+@footer-text-decoration: @text-decoration;
+
+@footer-a-font-color: @a-font-color;
+@footer-a-font-size: @a-font-size;
+@footer-a-font-family: @a-font-family;
+@footer-a-font-weight: @a-font-weight;
+@footer-a-font-style: @a-font-style;
+@footer-a-text-decoration: @a-text-decoration;
+
+@footer-a-font-color-hover: @a-font-color-hover;
+@footer-a-font-size-hover: @a-font-size-hover;
+@footer-a-font-family-hover: @a-font-family-hover;
+@footer-a-font-weight-hover: @a-font-weight-hover;
+@footer-a-font-style-hover: @a-font-style-hover;
+@footer-a-text-decoration-hover: @a-text-decoration-hover;
+
+@footer-ping-font-color: @footer-font-color;
+@footer-ping-font-size: 90%;
+@footer-ping-font-family: @footer-font-family;
+@footer-ping-font-weight: @footer-font-weight;
+@footer-ping-font-style: @footer-font-style;
+@footer-ping-text-decoration: @footer-text-decoration;
+
+@footer-bt-width: 16px;
+@footer-bt-height: 16px;
+@footer-url-bt-logout: url('img/logout.png');
+@footer-url-bt-online: url('img/online-off.png');
+@footer-url-bt-smiley: url('img/smiley-off.png');
+@footer-url-bt-sound: url('img/sound-off.png');
+
+@footer-donate-border-color: @border-color;
+@footer-donate-shadow-inset-color: #fff;
+@footer-donate-border-radius: 5px;
+@footer-donate-bg-color-hover: #dfdef6;
+
+
+/* PFC COMPOSE */
+@compose-height: 40px;
+@compose-bg-color: #FFF;
+@compose-border-color: @border-color;
+
+@compose-font-color: @font-color;
+@compose-font-size: @font-size;
+@compose-font-family: @font-family;
+@compose-font-weight: @font-weight;
+@compose-font-style: @font-style;
+@compose-text-decoration: @text-decoration;
+
+@compose-shadow-top: 0;
+@compose-shadow-left: 3px;
+@compose-shadow-size: 10px;
+@compose-shadow-color: #dcdcdc;
+
+
+/* MODALBOX */
+@modalbox-bg: #FFF;
+@modalbox-bg-overlay: #000;
+@modalbox-shadow-top: "";
+@modalbox-shadow-left: "";
+@modalbox-shadow-size: "";
+@modalbox-shadow-color: "";
+@modalbox-popup-login-input-login-border-color: @border-color;
+@modalbox-popup-login-input-login-bg-color: @users-bg-color;
+@modalbox-popup-login-input-login-font-color: @users-font-color;
+@modalbox-popup-login-bt-signin-border-color: @footer-donate-border-color;
+@modalbox-popup-login-bt-signin-bg-color: @footer-bg-color;
+@modalbox-popup-login-bt-signin-font-color: @footer-a-font-color;
+@modalbox-popup-login-bt-signin-border-radius: 5px;
+@modalbox-popup-login-bt-signin-border-color-hover: @footer-donate-border-color;
+@modalbox-popup-login-bt-signin-bg-color-hover: @footer-donate-bg-color-hover;
+@modalbox-popup-login-bt-signin-font-color-hover: @footer-a-font-color-hover;
+
+@import "pfc-theme-variables.less";
+
+/* NOT PLANNED FOR 2.0 */
+/*
+@userlist-avatar-w: 0px; // avatar not planned for 2.0
+@message-padding-left: 0px; // avatar not planned for 2.0
+@users-role-title-display: none; // role not planned for 2.0
+@users-role-title-border-width: 0px; // role not planned for 2.0
+
+@users-url-icon-active: url(img/neutral.png);
+@users-url-icon-inactive: url(img/neutral.png);
+@users-url-icon-neutral: url(img/neutral.png);
+@admin-url-icon-active: url(img/neutral.png);
+@admin-url-icon-inactive: url(img/neutral.png);
+
+@toggle-tabs-btn-display: none; // channels not planned for 2.0
+@topic-text-display: none; // topics not planned for 2.0
+*/
View
7 client/themes/phpfreechat-mini/pfc.less
@@ -0,0 +1,7 @@
+@import "pfc-variables.less";
+@import "pfc-full.less";
+//@import "pfc-notabs.less";
+@import "pfc-responsive.less";
+//@import "pfc-ads.less";
+@import "pfc-theme.less";
+@import "pfc-theme-responsive.less";
View
128 client/themes/phpfreechat-mini/theme.js
@@ -0,0 +1,128 @@
+/**
+ * Specific javascript for the phpfreechat-mini theme
+ * This script injects HTML and adjust ergonomics for the mini theme (toggle buttons ...)
+ */
+$(document).ready(function() {
+ var pfc = phpFreeChat;
+
+ // inject HTML into the generic one
+ $(pfc.element).find('.pfc-content').wrap('<div class="pfc-mini-chat-wrapper" />');
+ var mini_html_hook =
+ ' <div id="pfc-menu-mini-chat">'
+ + ' <a href="#" class="chat"></a>'
+ + ' <a href="#" class="users"></a>'
+ + ' <a href="#" class="tabs"></a>'
+ + ' <div class="clear"></div>'
+ + ' </div>';
+ $(pfc.element).find('.pfc-content').after(mini_html_hook);
+ $(pfc.element).find('.pfc-messages').addClass('pfc-chat-mini');
+ $(pfc.element).find('.pfc-compose').addClass('pfc-chat-mini');
+ $(pfc.element).find('.pfc-ad-mobile').append('<div class="pub1"></div>');
+
+ // comportement bt minichat
+ $("#pfc-menu-mini-chat .chat").click(function() {
+ if ($("div.pfc-content").is(":hidden")) {
+ $("div.pfc-content > div").hide();
+ $("div.pfc-content").show();
+ $("div.pfc-content .pfc-footer").show();
+ $("div.pfc-content .pfc-chat-mini").show();
+ $("div.pfc-content .pfc-ad-mobile").show();
+ if (pfc.modalbox.isopen) {
+ $(".pfc-modal-overlay").show();
+ $(".pfc-modal-box").show();
+ }
+ $("#pfc-menu-mini-chat a").removeClass("active");
+ $(this).addClass("active");
+ } else {
+ if ($(this).hasClass("active")) {
+ $("div.pfc-content").hide();
+ $("div.pfc-content .pfc-chat-mini").hide();
+ $("div.pfc-content .pfc-ad-mobile").hide();
+ $(this).removeClass("active");
+ } else {
+ $("div.pfc-content > div").hide();
+ $("div.pfc-content").show();
+ $("div.pfc-content .pfc-footer").show();
+ $("div.pfc-content .pfc-chat-mini").show();
+ $("div.pfc-content .pfc-ad-mobile").show();
+ if (pfc.modalbox.isopen) {
+ $(".pfc-modal-overlay").show();
+ $(".pfc-modal-box").show();
+ }
+ $("#pfc-menu-mini-chat a").removeClass("active");
+ $(this).addClass("active");
+ }
+ }
+ });
+
+ $("#pfc-menu-mini-chat .users").click(function() {
+ if ($("div.pfc-content").is(":hidden")) {
+ $("div.pfc-content > div").hide();
+ $("div.pfc-content").show();
+ $("div.pfc-content .pfc-footer").show();
+ $("div.pfc-content .pfc-users").show();
+ $("div.pfc-content .pfc-ad-mobile").show();
+ if (pfc.modalbox.isopen) {
+ $(".pfc-modal-overlay").show();
+ $(".pfc-modal-box").show();
+ }
+ $("#pfc-menu-mini-chat a").removeClass("active");
+ $(this).addClass("active");
+ } else {
+ if ($(this).hasClass("active")) {
+ $("div.pfc-content").hide();
+ $("div.pfc-content .pfc-users").hide();
+ $("div.pfc-content .pfc-ad-mobile").hide();
+ $(this).removeClass("active");
+ } else {
+ $("div.pfc-content > div").hide();
+ $("div.pfc-content").show();
+ $("div.pfc-content .pfc-footer").show();
+ $("div.pfc-content .pfc-users").show();
+ $("div.pfc-content .pfc-ad-mobile").show();
+ if (pfc.modalbox.isopen) {
+ $(".pfc-modal-overlay").show();
+ $(".pfc-modal-box").show();
+ }
+ $("#pfc-menu-mini-chat a").removeClass("active");
+ $(this).addClass("active");
+ }
+ }
+ });
+
+ $("#pfc-menu-mini-chat .tabs").click(function () {
+ if ($("div.pfc-content").is(":hidden")) {
+ $("div.pfc-content > div").hide();
+ $("div.pfc-content").show();
+ $("div.pfc-content .pfc-footer").show();
+ $("div.pfc-content .pfc-tabs").show();
+ $("div.pfc-content .pfc-ad-mobile").show();
+ if (pfc.modalbox.isopen) {
+ $(".pfc-modal-overlay").show();
+ $(".pfc-modal-box").show();
+ }
+ $("#pfc-menu-mini-chat a").removeClass("active");
+ $(this).addClass("active");
+ } else {
+ if ($(this).hasClass("active")) {
+ $("div.pfc-content").hide();
+ $("div.pfc-content .pfc-users").hide();
+ $("div.pfc-content .pfc-ad-mobile").hide();
+ $(this).removeClass("active");
+ } else {
+ $("div.pfc-content > div").hide();
+ $("div.pfc-content").show();
+ $("div.pfc-content .pfc-footer").show();
+ $("div.pfc-content .pfc-tabs").show();
+ $("div.pfc-content .pfc-ad-mobile").show();
+ if (pfc.modalbox.isopen) {
+ $(".pfc-modal-overlay").show();
+ $(".pfc-modal-box").show();
+ }
+ $("#pfc-menu-mini-chat a").removeClass("active");
+ $(this).addClass("active");
+ }
+ }
+ });
+
+});
View
14 client/themes/phpfreechat/theme.js
@@ -0,0 +1,14 @@
+/**
+ * Specific javascript for the current theme
+ */
+$(document).ready(function() {
+ // the phpfreechat jquery plugin instance
+ var pfc = phpFreeChat;
+
+ // do what you need, you can for example:
+ // - inject HTML into the chat structure
+ // ex: $(pfc.element).find('.pfc-content').wrap('<div class="pfc-theme-wrapper" />');
+ // - add ergonomics effects to the DOM (ex: new event handlers)
+ // - ...
+
+});
Please sign in to comment.
Something went wrong with that request. Please try again.