You are here

livechat.css in LiveChat 8.3

[data-tooltip] {
  display: inline-block;
  position: relative;
  cursor: help;
  padding: 0px;
}
/* Tooltip styling */
[data-tooltip]:before {
  content: attr(data-tooltip);
  font-style: normal;
  display: none;
  position: absolute;
  background: #eee;
  color: rgba(0, 0, 0, 0.73);
  padding: 7px;
  font-size: 12px;
  line-height: 1.2;
  min-width: 120px;
  text-align: center;
  border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
  top: 50%;
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
  bottom: 100%;
  margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
  left: 100%;
  margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
  top: 100%;
  margin-top: 6px;
}
[data-tooltip-position="left"]:before {
  right: 100%;
  margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
  content: '';
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
  left: 50%;
  margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
  top: 50%;
  margin-top: -6px;
}
[data-tooltip-position="top"]:after {
  bottom: 100%;
  border-width: 6px 6px 0;
  border-top-color: #eee;
}
[data-tooltip-position="right"]:after {
  left: 100%;
  border-width: 6px 6px 6px 0;
  border-right-color: #eee;
}
[data-tooltip-position="bottom"]:after {
  top: 100%;
  border-width: 0 6px 6px;
  border-bottom-color: #eee;
}
[data-tooltip-position="left"]:after {
  right: 100%;
  border-width: 6px 0 6px 6px;
  border-left-color: #eee;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  display: block;
  z-index: 50;
}

@media only screen and (max-width:975px) {
  #livechat_panel, #login_panel {
    flex-direction: column;
  }
  .livechat_screenshot {
    height: 250px!important;
    background-position: center 1.5em!important;
  }
}

.livechat-admin-settings-form .edit-submit {
  background-image: linear-gradient(to bottom, white, white);
  border: none;
  font-size: 85%;
  text-decoration: underline;
  color: #999;
  text-shadow: none;
  outline-style: none;
  margin-left: 0px;
  padding-left: 0px;
}

.livechat-admin-settings-form .edit-submit:hover {
  background-image: linear-gradient(to bottom, white, white);
  border: none;
  box-shadow: none;
  border-shadow: none;
  color: #999;
  text-shadow: none;
  outline-style: none;
}

.livechat-admin-settings-form .edit-submit:focus {
  background-image: linear-gradient(to bottom, white, white);
  border: none;
  box-shadow: none;
  border-shadow: none;
  color: #999;
  text-shadow: none;
  outline-style: none;
}

#edit-webapp-link-container > a:nth-child(3) {
  margin-left: 7px;
}

#edit-save-advanced {
  border-radius: 0.143rem;
  margin-left: 0px;
  margin-top: 8px;
  margin-bottom: 13px;
}

iframe#login-with-livechat,
#login_form {
  margin-left: 5px;
  width: 214px;
  height: 43px;
  border: none;
}

.livechat_logo2 {
  width: 600px;
  height: 330px;
  background: url(../img/livechat-drupal-is-here@2x.png);
  background-size: 600px;
  background-repeat: no-repeat;
}

.livechat_screenshot {
  width: 100%;
  height: 400px;
  background: url(../img/livechat-app.png);
  background-size: 650px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.or-delimiter {
  margin-top: 8px;
}

.fadein, .fadeout {
  opacity: 0;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.fadein {
  opacity: 1;
}

.question_mark {
  width: 15px;
  height: 15px;
  background: url(../img/question_mark.png);
  background-size: 15px;
  background-repeat: no-repeat;
  opacity: 0.8;
  margin-bottom: -4px;
  margin-left: 0px;
  padding: 1px;
  display: inline-block;
  background-position: 0px 1px;
}

.disable_advanced_settings {
  opacity: 0.2;
  pointer-events: none;
}

File

css/livechat.css
View source
  1. [data-tooltip] {
  2. display: inline-block;
  3. position: relative;
  4. cursor: help;
  5. padding: 0px;
  6. }
  7. /* Tooltip styling */
  8. [data-tooltip]:before {
  9. content: attr(data-tooltip);
  10. font-style: normal;
  11. display: none;
  12. position: absolute;
  13. background: #eee;
  14. color: rgba(0, 0, 0, 0.73);
  15. padding: 7px;
  16. font-size: 12px;
  17. line-height: 1.2;
  18. min-width: 120px;
  19. text-align: center;
  20. border-radius: 4px;
  21. }
  22. /* Dynamic horizontal centering */
  23. [data-tooltip-position="top"]:before,
  24. [data-tooltip-position="bottom"]:before {
  25. left: 50%;
  26. -ms-transform: translateX(-50%);
  27. -moz-transform: translateX(-50%);
  28. -webkit-transform: translateX(-50%);
  29. transform: translateX(-50%);
  30. }
  31. /* Dynamic vertical centering */
  32. [data-tooltip-position="right"]:before,
  33. [data-tooltip-position="left"]:before {
  34. top: 50%;
  35. -ms-transform: translateY(-50%);
  36. -moz-transform: translateY(-50%);
  37. -webkit-transform: translateY(-50%);
  38. transform: translateY(-50%);
  39. }
  40. [data-tooltip-position="top"]:before {
  41. bottom: 100%;
  42. margin-bottom: 6px;
  43. }
  44. [data-tooltip-position="right"]:before {
  45. left: 100%;
  46. margin-left: 6px;
  47. }
  48. [data-tooltip-position="bottom"]:before {
  49. top: 100%;
  50. margin-top: 6px;
  51. }
  52. [data-tooltip-position="left"]:before {
  53. right: 100%;
  54. margin-right: 6px;
  55. }
  56. /* Tooltip arrow styling/placement */
  57. [data-tooltip]:after {
  58. content: '';
  59. display: none;
  60. position: absolute;
  61. width: 0;
  62. height: 0;
  63. border-color: transparent;
  64. border-style: solid;
  65. }
  66. /* Dynamic horizontal centering for the tooltip */
  67. [data-tooltip-position="top"]:after,
  68. [data-tooltip-position="bottom"]:after {
  69. left: 50%;
  70. margin-left: -6px;
  71. }
  72. /* Dynamic vertical centering for the tooltip */
  73. [data-tooltip-position="right"]:after,
  74. [data-tooltip-position="left"]:after {
  75. top: 50%;
  76. margin-top: -6px;
  77. }
  78. [data-tooltip-position="top"]:after {
  79. bottom: 100%;
  80. border-width: 6px 6px 0;
  81. border-top-color: #eee;
  82. }
  83. [data-tooltip-position="right"]:after {
  84. left: 100%;
  85. border-width: 6px 6px 6px 0;
  86. border-right-color: #eee;
  87. }
  88. [data-tooltip-position="bottom"]:after {
  89. top: 100%;
  90. border-width: 0 6px 6px;
  91. border-bottom-color: #eee;
  92. }
  93. [data-tooltip-position="left"]:after {
  94. right: 100%;
  95. border-width: 6px 0 6px 6px;
  96. border-left-color: #eee;
  97. }
  98. /* Show the tooltip when hovering */
  99. [data-tooltip]:hover:before,
  100. [data-tooltip]:hover:after {
  101. display: block;
  102. z-index: 50;
  103. }
  104. @media only screen and (max-width:975px) {
  105. #livechat_panel, #login_panel {
  106. flex-direction: column;
  107. }
  108. .livechat_screenshot {
  109. height: 250px!important;
  110. background-position: center 1.5em!important;
  111. }
  112. }
  113. .livechat-admin-settings-form .edit-submit {
  114. background-image: linear-gradient(to bottom, white, white);
  115. border: none;
  116. font-size: 85%;
  117. text-decoration: underline;
  118. color: #999;
  119. text-shadow: none;
  120. outline-style: none;
  121. margin-left: 0px;
  122. padding-left: 0px;
  123. }
  124. .livechat-admin-settings-form .edit-submit:hover {
  125. background-image: linear-gradient(to bottom, white, white);
  126. border: none;
  127. box-shadow: none;
  128. border-shadow: none;
  129. color: #999;
  130. text-shadow: none;
  131. outline-style: none;
  132. }
  133. .livechat-admin-settings-form .edit-submit:focus {
  134. background-image: linear-gradient(to bottom, white, white);
  135. border: none;
  136. box-shadow: none;
  137. border-shadow: none;
  138. color: #999;
  139. text-shadow: none;
  140. outline-style: none;
  141. }
  142. #edit-webapp-link-container > a:nth-child(3) {
  143. margin-left: 7px;
  144. }
  145. #edit-save-advanced {
  146. border-radius: 0.143rem;
  147. margin-left: 0px;
  148. margin-top: 8px;
  149. margin-bottom: 13px;
  150. }
  151. iframe#login-with-livechat,
  152. #login_form {
  153. margin-left: 5px;
  154. width: 214px;
  155. height: 43px;
  156. border: none;
  157. }
  158. .livechat_logo2 {
  159. width: 600px;
  160. height: 330px;
  161. background: url(../img/livechat-drupal-is-here@2x.png);
  162. background-size: 600px;
  163. background-repeat: no-repeat;
  164. }
  165. .livechat_screenshot {
  166. width: 100%;
  167. height: 400px;
  168. background: url(../img/livechat-app.png);
  169. background-size: 650px;
  170. background-repeat: no-repeat;
  171. background-size: contain;
  172. background-position: center;
  173. }
  174. .or-delimiter {
  175. margin-top: 8px;
  176. }
  177. .fadein, .fadeout {
  178. opacity: 0;
  179. -moz-transition: opacity 0.4s ease-in-out;
  180. -o-transition: opacity 0.4s ease-in-out;
  181. -webkit-transition: opacity 0.4s ease-in-out;
  182. transition: opacity 0.4s ease-in-out;
  183. }
  184. .fadein {
  185. opacity: 1;
  186. }
  187. .question_mark {
  188. width: 15px;
  189. height: 15px;
  190. background: url(../img/question_mark.png);
  191. background-size: 15px;
  192. background-repeat: no-repeat;
  193. opacity: 0.8;
  194. margin-bottom: -4px;
  195. margin-left: 0px;
  196. padding: 1px;
  197. display: inline-block;
  198. background-position: 0px 1px;
  199. }
  200. .disable_advanced_settings {
  201. opacity: 0.2;
  202. pointer-events: none;
  203. }