[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;
}
View source
- [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;
- }