154 lines
2.6 KiB
CSS
154 lines
2.6 KiB
CSS
/**
|
|
* @file
|
|
* Styling for tour module.
|
|
*/
|
|
|
|
/* Tab appearance. */
|
|
.toolbar .toolbar-bar .tour-toolbar-tab.toolbar-tab {
|
|
float: right; /* LTR */
|
|
}
|
|
[dir="rtl"] .toolbar .toolbar-bar .tour-toolbar-tab.toolbar-tab {
|
|
float: left;
|
|
}
|
|
|
|
/* Style the tour progress indicator. */
|
|
.tour-progress {
|
|
position: absolute;
|
|
right: 20px; /* LTR */
|
|
bottom: 20px;
|
|
}
|
|
[dir="rtl"] .tour-progress {
|
|
right: auto;
|
|
left: 20px;
|
|
}
|
|
|
|
/**
|
|
* The following are largely Shepherd's default styles, with a few modifications
|
|
* to facilitate a graceful transition from Joyride, the library used prior to
|
|
* Shepherd.
|
|
*/
|
|
.shepherd-footer {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 0 20px 20px;
|
|
}
|
|
|
|
.shepherd-footer .shepherd-button:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.shepherd-cancel-icon {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: transparent;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.shepherd-title {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.shepherd-header {
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
padding: 20px 50px 0 20px;
|
|
}
|
|
|
|
.shepherd-text {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.shepherd-text p {
|
|
margin: 0 0 1.4em;
|
|
}
|
|
|
|
.shepherd-element {
|
|
z-index: 110;
|
|
width: 300px;
|
|
background: #fff;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.shepherd-element {
|
|
left: 2.5%;
|
|
width: 85%;
|
|
}
|
|
}
|
|
|
|
.shepherd-enabled.shepherd-element {
|
|
opacity: 1;
|
|
}
|
|
|
|
.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.shepherd-element,
|
|
.shepherd-element *,
|
|
.shepherd-element ::after,
|
|
.shepherd-element ::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.shepherd-arrow,
|
|
.shepherd-arrow::before {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.shepherd-arrow::before {
|
|
content: "";
|
|
transform: rotate(45deg);
|
|
background: #fff;
|
|
}
|
|
|
|
.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
|
|
bottom: -8px;
|
|
}
|
|
|
|
.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
|
|
top: -8px;
|
|
}
|
|
|
|
.shepherd-element[data-popper-placement^=left] > .shepherd-arrow {
|
|
right: -8px;
|
|
}
|
|
|
|
.shepherd-element[data-popper-placement^=right] > .shepherd-arrow {
|
|
left: -8px;
|
|
}
|
|
|
|
.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,
|
|
.shepherd-target-click-disabled.shepherd-enabled.shepherd-target * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.shepherd-modal-overlay-container {
|
|
position: fixed;
|
|
z-index: 105;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
width: 100vw;
|
|
height: 0;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
fill-rule: evenodd;
|
|
}
|
|
|
|
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
|
|
height: 100vh;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
|
|
pointer-events: all;
|
|
}
|