You are here

Home » API reference » DrupalChat 6.2

dark.css in DrupalChat 6.2

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

CSS Stylesheet for the DrupalChat modules 'dark' theme.

Author: Fenda

File

themes/dark/dark.css
View source 
  1. 

  2. /**

  3.  * @file

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

  5.  * 

  6.  * Author: Fenda

  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: #333333;

  24.   border: 1px solid #1D1D1D;

  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 #505050; /*--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 #505050;

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

  52.   color: #fff;

  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: #4C4C4C;

  63. }

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

  65.   background: #4C4C4C 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: #fff;

  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. } 

  102. #drupalchat .subpanel {

  103.   border: 1px solid #1d1d1d;  

  104.   bottom: 29px;

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

  106.   left: -1px;

  107.   overflow: hidden;

  108.   position: absolute;

  109.   width: 150px;

  110. }

  111. #drupalchat #chatpanel .subpanel {

  112.   width: 160px;

  113. }

  114. #drupalchat .chatbox .subpanel {

  115.   width: 200px;

  116. }

  117. 

  118. /* Subpanel title */

  119. #drupalchat .subpanel_title {

  120.   background: #333333;

  121.   border-bottom: 1px solid #333333;

  122.   color: #fff;

  123.   cursor: pointer;  

  124.   font-weight: normal;

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

  126. }

  127. #drupalchat .subpanel_title span {

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

  129.   opacity: 0.5;

  130.   -moz-opacity: 0.5;

  131.   font-size: 12px;

  132. 	font-weight: bold;

  133.   float: right;

  134.   line-height: 0.6em;

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

  136. }

  137. #drupalchat .subpanel_title span.min {

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

  139. }

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

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

  142.   opacity: 1.0;

  143.   -moz-opacity: 1.0;

  144. }

  145. #drupalchat .subpanel_title span:hover {

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

  147.   opacity: 1.0;

  148.   -moz-opacity: 1.0;

  149. }

  150. 

  151. #drupalchat .subpanel ul { 

  152.   background: #4C4C4C;

  153.   border: none;

  154.   margin: 0;

  155.   overflow: auto;

  156.   width: 100%;

  157. }

  158. #drupalchat .subpanel li {

  159.   background: #4C4C4C;

  160.   border-top: 1px solid #595959;;

  161.   border-bottom: 1px solid #333333;	

  162.   clear: both;

  163.   display: block;

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

  165.   margin: 0;

  166.   overflow: hidden;

  167.   padding: 0; 

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

  169. }

  170. #drupalchat .subpanel li.last {

  171.   border-bottom: none;

  172. }

  173. #drupalchat .subpanel li:hover {

  174.   background: #4498C7;

  175.   border-top: 1px solid #5DB1E0;

  176. }

  177. #drupalchat .subpanel li a span {

  178.   float: left;

  179.   margin: 0 8px;

  180.   padding-left: 20px;

  181. }

  182. #drupalchat .subpanel li a {

  183. 	border: none;

  184.   display: block;

  185.   height: 22px;

  186.   line-height: 22px;

  187.   margin: 0;

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

  189. }

  190. #drupalchat .subpanel li a:hover {

  191. 	background: transparent;

  192. 	text-decoration: none;

  193. }

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

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

  196. }

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

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

  199. }

  200. #drupalchat .subpanel li.link a {

  201.   padding-left: 8px;

  202. }

  203. 

  204. #drupalchat ul li a.chatboxhead {

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

  206. }

  207. 

  208. /* Chat options */

  209. #drupalchat .subpanel .chat_options {

  210. 	background: #D8D8D8;

  211. 	border-bottom: 1px solid #1d1d1d;

  212. 	border-top: 1px solid #1d1d1d;

  213. 	overflow: hidden;

  214. 	position: relative;

  215. }

  216. #drupalchat .subpanel .chat_options a {

  217. 	border-left: none;

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

  219. 	color: #333;

  220. 	float: left;

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

  222. }

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

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

  225. } 

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

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

  228. } 

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

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

  231. }

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

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

  234. }

  235. 

  236. /* Chatbox */ 

  237. .chatbox {

  238.   display: none;

  239.   position: absoloute;

  240.   z-index: 9999;

  241. }

  242. .chatboxblink {

  243.   background-color: #4498C7;

  244. }

  245. .chatboxcontent {

  246.   background-color: #4C4C4C;

  247.   border-right: 1px solid #595959;

  248.   border-bottom: 1px solid #333333;

  249.   color: #fff;

  250.   height: 200px;

  251.   overflow-y: auto;

  252.   overflow-x: auto;

  253.   padding: 7px;

  254. }

  255. .chatboxinput {

  256.   background-color: #4C4C4C;

  257.   border-top: 1px solid #595959;

  258.   padding: 5px;

  259. }

  260. .chatboxtextarea {

  261.   border: 1px solid #333333;

  262.   height: 44px;

  263.   margin: 0;

  264.   padding: 0;

  265.   overflow: hidden;

  266.   resize: none;

  267.   width: 188px;

  268. }

  269. .chatboxtextareaselected {

  270.   border: 2px solid #5DB1E0;

  271.   width: 186px;

  272. }

  273. .chatboxusername {

  274. 	font-size: 11px;

  275.   margin-top: 2px;

  276. }

  277. .chatboxusername a {

  278. 	border: none !important;

  279. 	font-weight: bold;

  280. }

  281. .chatboxtime {

  282.   color: #999;

  283.   float: right;

  284.   font-size: 9px;

  285.   font-weight: normal;

  286. }

  287. .chatboxcontent p {

  288. 	clear: both;

  289.   font-size: 11px;

  290.   line-height: 14px;

  291.   margin: 0 4px;

  292.   text-align: left;

  293. }