You are here

Home » API reference » DrupalChat 7

light.css in DrupalChat 7

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

CSS Stylesheet for the DrupalChat modules 'light' theme.

Author: Fenda

File

themes/light/light.css
View source 
  1. 

  2. /**

  3.  * @file

  4.  * CSS Stylesheet for the DrupalChat modules 'light' 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: #e5e5e5;*/

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

  31.   border-bottom: none;

  32.   float: left;

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

  34. }

  35. #drupalchat ul {

  36.   /*border-top: 1px solid #fff;*/ /*--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: #e5e5e5;

  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 #b5b5b5;

  52. }

  53. #drupalchat ul li.last a {

  54.   border-right: none;

  55. }

  56. 

  57. #drupalchat ul li a {

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

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

  60.   color: #333;

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

  71. }

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

  73.   background: #fff 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 #b5b5b5;

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

  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.   /*color: #fff;*/

  111. }

  112. #drupalchat .subpanel {

  113.   border: 1px solid #b5b5b5;  

  114.   bottom: 29px;

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

  116.   left: 0px;

  117.   overflow: hidden;

  118.   position: absolute;

  119.   width: 150px;

  120. }

  121. #drupalchat #chatpanel .subpanel {

  122.   width: 200px;

  123. }

  124. #drupalchat .chatbox .subpanel {

  125.   width: 239px;

  126. }

  127. 

  128. /* Subpanel title */

  129. #drupalchat .subpanel_title {

  130.   background: #222;

  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;

  160.   -moz-opacity: 1;

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

  187.   border: none;

  188.   margin: 0;

  189.   overflow: auto;

  190.   width: 100%;

  191. }

  192. #drupalchat .subpanel li {

  193.   background: #fff;

  194.   clear: both;

  195.   display: block;

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

  197.   margin: 0;

  198.   overflow: hidden;

  199.   padding: 0; 

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

  201. }

  202. #drupalchat .subpanel li:hover {

  203.   background: #EEE;

  204. }

  205. #drupalchat .subpanel li a span {

  206.   float: left;

  207.   margin: 0 8px;

  208.   padding-left: 20px;

  209. }

  210. #drupalchat .subpanel li a {

  211. 	border: none;

  212.   display: block;

  213. 	font-weight: normal;

  214.   height: 22px;

  215.   line-height: 22px;

  216.   margin: 0;

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

  218. }

  219. #drupalchat .subpanel li a:hover {

  220. 	background: transparent;

  221. 	text-decoration: none;

  222. }

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

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

  225. }

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

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

  228. }

  229. #drupalchat .subpanel li.link a {

  230.   padding-left: 8px;

  231. }

  232. 

  233. #drupalchat ul li a.chatboxhead {

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

  235. }

  236. 

  237. /* Chat options */

  238. #drupalchat .subpanel .chat_options {

  239. 	background: #F9F9F9;

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

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

  242. 	/*border: 1px solid #ccc;*/

  243. 	overflow: hidden;

  244. 	position: relative;

  245. }

  246. #drupalchat .subpanel .item-list {

  247. 	/*border-left: 1px solid #ccc;

  248. 	border-right: 1px solid #ccc;*/

  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. #drupalchat ul li a.chatboxblink {

  277.   background-color: #516ea6;

  278. 	color: #fff;

  279. }

  280. .chatboxcontent {

  281.   background-color: #fff;

  282.   color: #fff;

  283.   height: 200px;

  284.   overflow-y: hidden;

  285.   overflow-x: hidden;

  286.   padding: 7px;

  287. }

  288. 

  289. .chatboxinput {

  290.   background-color: #fff;

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

  292.   padding: 5px;

  293. }

  294. .drupalchat_userOffline {

  295.   background-color: #fff;

  296.   color: #C00;

  297.   font-size: 11px;

  298.   height: 15px;

  299.   width: 239px;

  300.   display: none;

  301.   text-align: center;

  302.   border-top-color: #EEE;

  303.   border-top-style: solid;

  304.   border-top-width: 1px;

  305. }

  306. .chatboxtextarea {

  307.   border: 1px solid #b5b5b5;

  308.   height: 44px;

  309.   margin: 0;

  310.   padding: 0;

  311.   overflow: hidden;

  312.   resize: none;

  313.   width: 226px;

  314. }

  315. .chatboxtextareaselected {

  316.   border: 1px solid #b5b5b5;

  317.   width: 226px;

  318. }

  319. .chatboxusername {

  320.   font-size: 13px;

  321.   margin-top: 3px;

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

  323.   padding-top: 3px;

  324.   width: 215px;

  325. }

  326. .chatboxusername a {

  327. 	border: none !important;

  328. 	font-weight: bold; 

  329. }

  330. .chatboxusername a:hover {

  331. 	color: #333 !important;

  332. }

  333. .chatboxtime {

  334.   color: #777;

  335.   float: right;

  336.   font-size: 9px;

  337.   font-weight: normal;

  338. }

  339. .chatboxcontent p {

  340.   clear: both;

  341.   color: #222;

  342.   font-size: 13px;

  343.   line-height: 21px;

  344.   margin: 0 4px;

  345.   text-align: left;

  346.   width: 210px;

  347. }

  348. #drupalchat .chatboxcontent p a {

  349.   border: none !important;

  350.   color: #00e; !important;

  351. }

  352. #drupalchat .drupalchatnousers {

  353.   display: block !important;

  354.   font-weight: normal !important;

  355.   height: 22px !important;

  356.   line-height: 22px !important;

  357.   margin: 0 !important;

  358.   padding: 3px 0 3px 8px !important;

  359.   color: #222 !important;

  360.   cursor: pointer;

  361. }

  362. #drupalchat .drupalchatnousers:hover {

  363.   /*color: #FFF !important;*/

  364. }

  365. #drupalchat .drupalchat_popup{

  366.   width: 70px;

  367.   /*height: 100px;*/

  368.   position: absolute;

  369.   display: none;

  370.   z-index: 200;

  371.   background: #FFF;

  372.   border: 1px solid #b5b5b5;

  373.   border-bottom: 2px solid #b5b5b5;

  374. }

  375. #drupalchat .drupalchat_popup ul { 

  376.   background: #fff;

  377.   border: none;

  378.   margin: 0;

  379.   overflow: auto;

  380.   width: 100%;

  381. }

  382. #drupalchat .drupalchat_popup li {

  383.   background: #fff;

  384.   clear: both;

  385.   display: block;

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

  387.   margin: 0;

  388.   overflow: hidden;

  389.   padding: 0; 

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

  391. }

  392. #drupalchat .drupalchat_popup li:hover {

  393.   background: #516ea6;

  394. }

  395. #drupalchat .drupalchat_popup li a span {

  396.   float: left;

  397.   margin: 0 8px;

  398.   padding-left: 20px;

  399. }

  400. #drupalchat .drupalchat_popup li a {

  401. 	border: none;

  402.   display: block;

  403. 	font-weight: normal;

  404.   height: 12px;

  405.   line-height: 12px;

  406.   margin: 0;

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

  408. }

  409. #drupalchat .drupalchat_popup li a:hover {

  410. 	background: transparent;

  411. 	text-decoration: none;

  412. }

  413. 

  414. #drupalchat .chatboxuserpicture {

  415.   float: left;

  416.   padding-right: 5px;

  417. }