public.component.assets.css.less.onpage-help.less Maven / Gradle / Ivy
.enable_onpage_help() when(@enable-onpage-help = true) {
.onpage-help-backdrop {
position: absolute;
z-index: 99990;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
filter: alpha(opacity=5);
background-color: rgba(0,0,0,0.05);
}
.onpage-help-section {
display: block;
position: absolute;
z-index: 100000;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4DFFFFFF', endColorstr='#4DFFFFFF',GradientType=0 );
background-color: rgba(255,255,255,0.3);
border: 1px dashed #8BBCD3;
border-radius:4px;
transition: background-color 0.2s, border-color 0.2s;
-webkit-transition: background-color 0.2s, border-color 0.2s;
text-align: center;
vertical-align: middle;
outline: none !important;
}
.onpage-help-section > .ie-hover-fix {
/* ie8-9 fix*/
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #FFF;
filter: alpha(opacity=1);
}
.onpage-help-section {
&:focus, &:active {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33C9D8EA', endColorstr='#33C9D8EA',GradientType=0 );
background-color: rgba(201,216,234,0.2);
border-color: #77ACC4;
}
&:hover {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66C9D8EA', endColorstr='#66C9D8EA',GradientType=0 );
background-color: rgba(201,216,234,0.4);
border-color: #77ACC4;
border-style: solid;
}
> .help-icon-1 {
font-size: 36px;
display: inline-block;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
opacity: 0;
filter:alpha(opacity=0);
color: #FFF;
text-shadow: 0 0 2px black;
background-color: #85B8DB;
border: 2px solid #FFF;
border-radius: 100%;
box-shadow: 0 0 2px 1px rgba(0,0,0,0.4);
width: 48px;
height: 48px;
line-height: 46px;
transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
}
&:focus > .help-icon-1,
&:active > .help-icon-1 {
opacity: 0.5;
}
&:hover > .help-icon-1 {
opacity: 1;
filter:alpha(opacity=100);
}
&.help-section-small > .help-icon-1 {
font-size: 18px;
width: 28px;
height: 28px;
line-height: 26px;
border-radius: 12px;
}
&.help-section-smaller > .help-icon-1 {
font-size: 14px;
width: 20px;
height: 20px;
line-height: 17px;
border-radius: 8px;
}
> .help-icon-2 {
position: absolute;
z-index: 2;
left: -4px;
top: -4px;
width: 18px;
height: 18px;
line-height: 16px;
display: block;
font-size: 16px;
color: orange;
background-color: #FFF;
border: 1px solid orange;
border-radius: 4px;
opacity: 1;
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
&:hover > .help-icon-2 {
color: #59A34E;
border-color: #59A34E;
transform: scale(1.25);
-webkit-transform: scale(1.25);
}
}
.onpage-help-modal {
z-index: 100010;
}
.onpage-help-modal + .modal-backdrop {
z-index: 100009;
}
.onpage-help-modal-buttons button{
border-radius: 100%;
border-width: 2px !important;
&:focus {
outline: none !important;
}
&.disabled {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
}
.onpage-help-content {
max-width: 800px;
margin: 0 auto;
}
.code-modal.onpage-help-modal {
.modal-dialog {
margin-top: 6px;
margin-bottom: 6px;
}
.modal-header {
padding-top: 6px;
padding-bottom: 6px;
}
.modal-body {
padding: 10px 12px
}
}
.onpage-help-modal pre {
border-width: 0;
box-shadow: none;
border-radius: 0;
margin-top: 8px;
}
.onpage-help-modal .modal-title code {
font-size: 13px;
}
.onpage-help-modal .modal-body {
font-size: 14px;
}
}
.enable_onpage_help();
© 2015 - 2025 Weber Informatics LLC | Privacy Policy