You are here

Home » API reference » DrupalChat 7

dark.css in DrupalChat 7

Same filename and directory in other branches
  1. 6.2 themes/dark/dark.css
  2. 7.2 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. #drupalchat-wrapper {

  14.   bottom: 0;

  15.   height: 29px;

  16.   margin: 0 1%;

  17.   position: fixed;

  18.   right: 0;

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

  20. }

  21. #drupalchat-wrapper *,

  22. #drupalchat-wrapper *:before,

  23. #drupalchat-wrapper *:after {

  24.   -webkit-box-sizing: content-box;

  25.      -moz-box-sizing: content-box;

  26.           box-sizing: content-box;

  27. }

  28. #drupalchat {

  29.   /*background: #333333;

  30.   border: 1px solid #1D1D1D;*/

  31.   border-bottom: none;

  32.   float: left;

  33.   font-family: Arial, sans-serif;

  34. }

  35. #drupalchat ul {

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

  37.   float: right;

  38.   list-style: none;

  39.   margin: 0;

  40.   padding: 0; 

  41.   width: 100%;

  42. }

  43. #drupalchat ul li {

  44.   background: #333333;	

  45.   float: left;

  46.   margin: 0;

  47.   padding: 0;

  48.   position: relative;

  49.   list-style: none;

  50.   margin-right: 10px;

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

  52. }

  53. #drupalchat ul li.last a {

  54.   border-right: none;

  55. }

  56. 

  57. #drupalchat ul li a {

  58.   border-left: 1px solid #505050;

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

  60.   color: #fff;

  61.   float: left;

  62.   height: 16px;

  63. 	line-height: 16px;

  64. 	padding: 6px;

  65.   position: relative;

  66.   text-decoration: none;

  67.   width: auto;

  68. }

  69. #drupalchat ul li a:hover {

  70.   background-color: #4C4C4C;

  71. }

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

  73.   background: #4C4C4C url(images/subpanel_bar.png) repeat-x center 1px;

  74.   border-top: none; 

  75.   height: 18px;

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

  77.   position: relative;

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

  79. }

  80. 

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

  82. 	float: left;

  83. 	margin-top: 2px;

  84. }

  85. 

  86. #drupalchat img.icon {

  87. 	float: left;

  88. 	margin-right: 6px;

  89. 	padding: 0;

  90. }

  91. 

  92. #drupalchat ul li a.chat {

  93. 	width: 188px;

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

  95. }

  96. #drupalchat ul li a.chatboxhead {

  97. 	width: 213px;

  98. }

  99. 

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

  101.   color: #fff;

  102.   float: none;

  103.   height: auto;

  104.   padding: 0;

  105.   position: static;

  106.   width: auto;

  107. }

  108. #drupalchat ul li div a:hover {

  109.   text-decoration: underline;

  110. } 

  111. #drupalchat .subpanel {

  112.   border: 1px solid #1d1d1d;  

  113.   bottom: 29px;

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

  115.   left: 0px;

  116.   overflow: hidden;

  117.   position: absolute;

  118.   width: 150px;

  119. }

  120. #drupalchat #chatpanel .subpanel {

  121.   width: 200px;

  122. }

  123. #drupalchat .chatbox .subpanel {

  124.   width: 239px;

  125. }

  126. 

  127. /* Subpanel title */

  128. #drupalchat .subpanel_title {

  129.   background: #333333;

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

  131.   color: #fff;

  132.   cursor: pointer;  

  133.   font-weight: bold;

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

  135.   font-size: 13px;

  136. }

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

  138.   display: block;

  139.   float: left;

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

  141.   height: 9px;

  142.   width: 9px;

  143.   overflow: hidden;

  144.   margin-top: 5px;

  145.   margin-right: 6px;  

  146. }

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

  148.   display: block;

  149.   float: left;

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

  151.   height: 9px;

  152.   width: 9px;

  153.   overflow: hidden;

  154.   margin-top: 5px;

  155.   margin-right: 6px;  

  156. }

  157. #drupalchat .subpanel_title span {

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

  159.   opacity: 1.0;

  160.   -moz-opacity: 1.0;

  161.   font-size: 16px;

  162.   font-weight: bold;

  163.   float: right;

  164.   line-height: 0.6em;

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

  166. }

  167. #drupalchat .subpanel_title span.min {

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

  169. }

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

  171.   filter: alpha(opacity=75); /* For IE */

  172.   opacity: 0.75;

  173.   -moz-opacity: 0.75;

  174. }

  175. #drupalchat .subpanel_title span:hover {

  176.   filter: alpha(opacity=75); /* For IE */

  177.   opacity: 0.75;

  178.   -moz-opacity: 0.75;

  179. }

  180. #drupalchat .subpanel_title span.options {

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

  182.  width: 12px;

  183.  height: 12px;

  184. }

  185. #drupalchat .subpanel ul { 

  186.   background: #4C4C4C;

  187.   border: none;

  188.   margin: 0;

  189.   overflow: auto;

  190.   width: 100%;

  191. }

  192. #drupalchat .subpanel li {

  193.   background: #4C4C4C;

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

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

  196.   clear: both;

  197.   display: block;

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

  199.   margin: 0;

  200.   overflow: hidden;

  201.   padding: 0; 

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

  203. }

  204. #drupalchat .subpanel li.last {

  205.   border-bottom: none;

  206. }

  207. #drupalchat .subpanel li:hover {

  208.   background: #4498C7;

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

  210. }

  211. #drupalchat .subpanel li a span {

  212.   float: left;

  213.   margin: 0 8px;

  214.   padding-left: 20px;

  215. }

  216. #drupalchat .subpanel li a {

  217. 	border: none;

  218.   display: block;

  219.   height: 22px;

  220.   line-height: 22px;

  221.   margin: 0;

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

  223. }

  224. #drupalchat .subpanel li a:hover {

  225. 	background: transparent;

  226. 	text-decoration: none;

  227. }

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

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

  230. }

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

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

  233. }

  234. #drupalchat .subpanel li.link a {

  235.   padding-left: 8px;

  236. }

  237. 

  238. #drupalchat ul li a.chatboxhead {

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

  240. }

  241. 

  242. /* Chat options */

  243. #drupalchat .subpanel .chat_options {

  244. 	background: #D8D8D8;

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

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

  247. 	overflow: hidden;

  248. 	position: relative;

  249. }

  250. #drupalchat .subpanel .chat_options a {

  251. 	border-left: none;

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

  253. 	color: #333;

  254. 	float: left;

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

  256. }

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

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

  259. } 

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

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

  262. } 

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

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

  265. }

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

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

  268. }

  269. 

  270. /* Chatbox */ 

  271. .chatbox {

  272.   display: none;

  273.   position: absoloute;

  274.   z-index: 9999;

  275. }

  276. .chatboxblink {

  277.   background-color: #4498C7;

  278. }

  279. .chatboxcontent {

  280.   background-color: #4C4C4C;

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

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

  283.   color: #fff;

  284.   height: 200px;

  285.   overflow-y: auto;

  286.   overflow-x: auto;

  287.   padding: 7px;

  288. }

  289. .chatboxinput {

  290.   background-color: #4C4C4C;

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

  292.   padding: 5px;

  293. }

  294. .chatboxtextarea {

  295.   border: 1px solid #333333;

  296.   height: 44px;

  297.   margin: 0;

  298.   padding: 0;

  299.   overflow: hidden;

  300.   resize: none;

  301.   width: 226px;

  302. }

  303. .chatboxtextareaselected {

  304.   border: 2px solid #5DB1E0;

  305.   width: 226px;

  306. }

  307. .chatboxusername {

  308.   font-size: 13px;

  309.   margin-top: 2px;

  310.   border-top: 1px solid #EDEDED;

  311.   padding-top: 3px;

  312. }

  313. .chatboxusername a {

  314. 	border: none !important;

  315. 	font-weight: bold; 

  316. }

  317. .chatboxtime {

  318.   color: #999;

  319.   float: right;

  320.   font-size: 9px;

  321.   font-weight: normal;

  322. }

  323. .chatboxcontent p {

  324.   clear: both;

  325.   font-size: 13px;

  326.   line-height: 21px;

  327.   margin: 0 4px;

  328.   text-align: left;

  329. }

  330. #drupalchat .chatboxcontent p a {

  331.   border: none !important;

  332.   color: #00e; !important;

  333. }

  334. .drupalchat_userOffline {

  335.   background-color: #fff;

  336.   color: #C00;

  337.   font-size: 11px;

  338.   height: 15px;

  339.   width: 239px;

  340.   display: none;

  341.   text-align: center;

  342.   border-top-color: #EEE;

  343.   border-top-style: solid;

  344.   border-top-width: 1px;

  345. }

  346. #drupalchat .chatboxuserpicture {

  347.   float: left;

  348.   padding-right: 5px;

  349. }