You are here

Home » API reference » DrupalChat 6.2

light.css in DrupalChat 6.2

Same filename and directory in other branches
  1. 7.2 themes/light/light.css
  2. 7 themes/light/light.css

CSS Stylesheet for the DrupalChat modules 'light' theme.

Author: darklrd

File

themes/light/light.css
View source 
  1. 

  2. /**

  3.  * @file

  4.  * CSS Stylesheet for the DrupalChat modules 'light' theme.

  5.  * 

  6.  * Author: darklrd

  7.  */

  8. 

  9. /* IE6 Hack */

  10. *html #drupalchat {

  11.   display: none;

  12. }

  13. 

  14. #drupalchat-wrapper {

  15.   bottom: 0;

  16.   height: 29px;

  17.   margin: 0 4%;

  18.   position: fixed;

  19.   right: 0;

  20.   z-index: 9999; /*--Keeps the panel on top of all other elements--*/

  21. }

  22. #drupalchat {

  23.   background: #e5e5e5;

  24.   border: 1px solid #b5b5b5;

  25.   border-bottom: none;

  26.   float: left;

  27. 	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;

  28. }

  29. #drupalchat ul {

  30.   border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/

  31.   float: right;

  32.   list-style: none;

  33.   margin: 0;

  34.   padding: 0; 

  35.   width: 100%;

  36. }

  37. #drupalchat ul li {

  38.   background: none;

  39.   float: left;

  40.   margin: 0;

  41.   padding: 0;

  42.   position: relative;

  43.   list-style: none;

  44. }

  45. #drupalchat ul li.last a {

  46.   border-right: none;

  47. }

  48. 

  49. #drupalchat ul li a {

  50.   border-left: 1px solid #fff;

  51.   border-right: 1px solid #b5b5b5;  

  52.   color: #333;

  53.   float: left;

  54.   height: 16px;

  55. 	line-height: 16px;

  56. 	padding: 6px;

  57.   position: relative;

  58.   text-decoration: none;

  59.   width: auto;

  60. }

  61. #drupalchat ul li a:hover {

  62.   background-color: #fff;

  63. }

  64. #drupalchat ul li a.active { /*--Active state when sub-panel is open--*/

  65.   background: #fff url(images/subpanel_bar.png) no-repeat center 1px;

  66.   border-top: none; 

  67.   height: 18px;

  68.   margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/

  69.   position: relative;

  70.   z-index: 200; /*--Keeps the active link on top of the sub-panel--*/

  71. }

  72. 

  73. #drupalchat ul li a.active span.subpanel_title_text {

  74. 	float: left;

  75. 	margin-top: 2px;

  76. }

  77. 

  78. #drupalchat img.icon {

  79. 	float: left;

  80. 	margin-right: 6px;

  81. 	padding: 0;

  82. }

  83. 

  84. #drupalchat ul li a.chat {

  85. 	width: 147px;

  86. }

  87. #drupalchat ul li a.chatboxhead {

  88. 	width: 132px;

  89. }

  90. 

  91. #drupalchat ul li div a { /*--Reset link style for sub-panel links--*/

  92.   color: #516ea6;

  93.   float: none;

  94.   height: auto;

  95.   padding: 0;

  96.   position: static;

  97.   width: auto;

  98. }

  99. #drupalchat ul li div a:hover {

  100.   text-decoration: underline;

  101. 	color: #fff;

  102. }

  103. #drupalchat .subpanel {

  104.   border: 1px solid #b5b5b5;  

  105.   bottom: 29px;

  106.   display: none;  /*--Hide by default--*/

  107.   left: -1px;

  108.   overflow: hidden;

  109.   position: absolute;

  110.   width: 150px;

  111. }

  112. #drupalchat #chatpanel .subpanel {

  113.   width: 160px;

  114. }

  115. #drupalchat .chatbox .subpanel {

  116.   width: 200px;

  117. }

  118. 

  119. /* Subpanel title */

  120. #drupalchat .subpanel_title {

  121.   background: #516ea6;

  122.   color: #fff;

  123.   cursor: pointer;  

  124.   font-weight: bold;

  125.   padding: 3px 4px 3px 8px;

  126. }

  127. #drupalchat .subpanel_title div.status-1{

  128.   display: block;

  129.   float: left;

  130.   background: url(images/online.png) no-repeat 100% center;

  131.   height: 8px;

  132.   width: 8px;

  133.   overflow: hidden;

  134.   margin-top: 8px;

  135.   margin-right: 6px;  

  136. }

  137. #drupalchat .subpanel_title div.status-0{

  138.   display: block;

  139.   float: left;

  140.   background: url(images/offline.png) no-repeat 100% center;

  141.   height: 8px;

  142.   width: 8px;

  143.   overflow: hidden;

  144.   margin-top: 8px;

  145.   margin-right: 6px;  

  146. }

  147. #drupalchat .subpanel_title span {

  148.   filter: alpha(opacity=50); /* For IE */

  149.   opacity: 0.5;

  150.   -moz-opacity: 0.5;

  151.   font-size: 12px;

  152. 	font-weight: bold;

  153.   float: right;

  154.   line-height: 0.6em;

  155.   padding: 5px 4px 0 4px;

  156. }

  157. #drupalchat .subpanel_title span.min {

  158. 	padding: 2px 4px 0 4px;

  159. }

  160. #drupalchat .subpanel_title:hover span.min {

  161.   filter: alpha(opacity=100); /* For IE */

  162.   opacity: 1.0;

  163.   -moz-opacity: 1.0;

  164. }

  165. #drupalchat .subpanel_title span:hover {

  166.   filter: alpha(opacity=100); /* For IE */

  167.   opacity: 1.0;

  168.   -moz-opacity: 1.0;

  169. }

  170. 

  171. #drupalchat .subpanel ul { 

  172.   background: #fff;

  173.   border: none;

  174.   margin: 0;

  175.   overflow: auto;

  176.   width: 100%;

  177. }

  178. #drupalchat .subpanel li {

  179.   background: #fff;

  180.   clear: both;

  181.   display: block;

  182.   float: none; /*--Reset float--*/

  183.   margin: 0;

  184.   overflow: hidden;

  185.   padding: 0; 

  186.   position: static;  /*--Reset relative positioning--*/  

  187. }

  188. #drupalchat .subpanel li:hover {

  189.   background: #516ea6;

  190. }

  191. #drupalchat .subpanel li a span {

  192.   float: left;

  193.   margin: 0 8px;

  194.   padding-left: 20px;

  195. }

  196. #drupalchat .subpanel li a {

  197. 	border: none;

  198.   display: block;

  199. 	font-weight: normal;

  200.   height: 22px;

  201.   line-height: 22px;

  202.   margin: 0;

  203.   padding: 3px 0 3px 8px; 

  204. }

  205. #drupalchat .subpanel li a:hover {

  206. 	background: transparent;

  207. 	text-decoration: none;

  208. }

  209. #drupalchat .subpanel li.status-1 a {

  210. 	background: url(images/online.png) no-repeat 95% center;

  211. }

  212. #drupalchat .subpanel li.status-2 a {

  213.   background: url(images/idle.png) no-repeat 95% center;

  214. }

  215. #drupalchat .subpanel li.link a {

  216.   padding-left: 8px;

  217. }

  218. 

  219. #drupalchat ul li a.chatboxhead {

  220.   padding: 6px 18px 6px 8px;  

  221. }

  222. 

  223. /* Chat options */

  224. #drupalchat .subpanel .chat_options {

  225. 	background: #ededed;

  226. 	border-bottom: 1px solid #b5b5b5;

  227. 	border-top: 1px solid #b5b5b5;

  228. 	overflow: hidden;

  229. 	position: relative;

  230. }

  231. #drupalchat .subpanel .chat_options a {

  232. 	border-left: none;

  233. 	border-right: 1px solid #999;

  234. 	color: #333;

  235. 	float: left;

  236. 	padding: 3px 8px 3px 19px;

  237. }

  238. #drupalchat .subpanel .chat_options a.status-1 {

  239.   background: url(images/online_black.png) no-repeat 6px center;

  240. } 

  241. #drupalchat .subpanel .chat_options a.status-2 {

  242.   background: url(images/idle_black.png) no-repeat 6px 49%;

  243. } 

  244. #drupalchat .subpanel .chat_options a.chat_loading {

  245. 	background: url(images/loading.gif) no-repeat 4px center;

  246. }

  247. #drupalchat .subpanel .chat_options a.options {

  248. 	background: url(images/options.png) no-repeat 6px center;

  249. }

  250. 

  251. /* Chatbox */ 

  252. .chatbox {

  253.   display: none;

  254.   position: absoloute;

  255.   z-index: 9999;

  256. }

  257. #drupalchat ul li a.chatboxblink {

  258.   background-color: #516ea6;

  259. 	color: #fff;

  260. }

  261. .chatboxcontent {

  262.   background-color: #fff;

  263.   color: #fff;

  264.   height: 200px;

  265.   overflow-y: auto;

  266.   overflow-x: auto;

  267.   padding: 7px;

  268. }

  269. .chatboxinput {

  270.   background-color: #fff;

  271.   border-top: 1px solid #b5b5b5;

  272.   padding: 5px;

  273. }

  274. .chatboxtextarea {

  275.   border: 1px solid #b5b5b5;

  276.   height: 44px;

  277.   margin: 0;

  278.   padding: 0;

  279.   overflow: hidden;

  280.   resize: none;

  281.   width: 188px;

  282. }

  283. .chatboxtextareaselected {

  284.   border: 1px solid #b5b5b5;

  285.   width: 186px;

  286. }

  287. .chatboxusername {

  288. 	font-size: 11px;

  289.   margin-top: 2px;

  290. }

  291. .chatboxusername a {

  292. 	border: none !important;

  293. 	font-weight: bold;

  294. }

  295. .chatboxusername a:hover {

  296. 	color: #333 !important;

  297. }

  298. .chatboxtime {

  299.   color: #333;

  300.   float: right;

  301.   font-size: 9px;

  302.   font-weight: normal;

  303. }

  304. .chatboxcontent p {

  305. 	clear: both;

  306. 	color: #000;

  307.   font-size: 11px;

  308.   line-height: 14px;

  309.   margin: 0 4px;

  310.   text-align: left;

  311. }

  312. .drupalchat_userOffline {

  313.   background-color: #fff;

  314.   color: #C00;

  315.   font-size: 11px;

  316.   height: 15px;

  317.   width: 200px;

  318.   display: none;

  319.   text-align: center;

  320.   border-top-color: #EEE;

  321.   border-top-style: solid;

  322.   border-top-width: 1px;

  323. }