tour.css in Open Social 8.6
.joyride-close-tip {
color: #4d4d4d;
font-weight: bold;
font-size: 2em;
line-height: 1;
right: 0px;
top: 0px;
padding: 7px 13px;
height: 45px;
width: 45px;
-webkit-transition: .3s background-color ease;
transition: .3s background-color ease;
}
.joyride-close-tip:focus, .joyride-close-tip:hover {
background-color: black;
}
.joyride-modal-bg {
display: block !important;
pointer-events: none;
z-index: 1060;
background: rgba(0, 0, 0, 0.5);
}
.joyride-tip-guide {
background: transparent;
z-index: 1070;
}
.joyride-tip-guide .joyride-nub.top {
top: 0;
border-bottom: 28px solid white;
border-top: none;
}
.joyride-tip-guide .joyride-nub.top + .joyride-content-wrapper {
top: 28px;
}
.joyride-tip-guide .joyride-nub.bottom {
bottom: 0;
border-top: 28px solid white;
border-bottom: none;
}
.joyride-tip-guide .joyride-nub.bottom + .joyride-content-wrapper {
bottom: 28px;
}
.joyride-tip-guide .joyride-nub.left {
left: 0;
border-right: 28px solid white;
border-left: none;
}
.joyride-tip-guide .joyride-nub.left + .joyride-content-wrapper {
left: 28px;
}
.joyride-tip-guide .joyride-nub.right {
right: 0;
border-left: 28px solid white;
border-right: none;
}
.joyride-tip-guide .joyride-nub.right + .joyride-content-wrapper {
right: 28px;
}
.joyride-tip-guide .tour-progress {
position: absolute;
bottom: 25px;
}
.joyride-tip-guide .joyride-tip-remove {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
}
.joyride-tip-guide .joyride-tip-remove:hover {
text-decoration: underline;
}
.joyride-content-wrapper {
background: white;
color: #4d4d4d;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
padding: 20px 50px 35px 20px;
}
.tour-tip-body,
.tour-tip-label {
text-align: left;
}
.tour-tip-label {
font-size: 1.5rem;
}
.joyride-nub {
z-index: 1;
border-left: 28px solid transparent;
border-right: 28px solid transparent;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
}
@media (min-width: 600px) {
.joyride-tip-guide {
width: 450px;
}
.joyride-tip-guide .joyride-nub.top {
left: -25px;
}
.joyride-tip-guide .joyride-nub.top + .joyride-content-wrapper {
left: -40px;
}
.joyride-tip-guide .joyride-nub.bottom {
left: -25px;
}
.joyride-tip-guide .joyride-nub.bottom + .joyride-content-wrapper {
left: -40px;
}
.joyride-tip-guide .joyride-nub.left {
top: -25px;
}
.joyride-tip-guide .joyride-nub.left + .joyride-content-wrapper {
top: -45px;
}
.joyride-tip-guide .joyride-nub.right {
top: -25px;
}
.joyride-tip-guide .joyride-nub.right + .joyride-content-wrapper {
top: -45px;
}
.joyride-content-wrapper {
padding: 35px 65px 35px 35px;
}
}
@media (max-width: 599px) {
.joyride-tip-guide {
display: none !important;
}
}
File
themes/socialbase/assets/css/tour.css
View source
- .joyride-close-tip {
- color: #4d4d4d;
- font-weight: bold;
- font-size: 2em;
- line-height: 1;
- right: 0px;
- top: 0px;
- padding: 7px 13px;
- height: 45px;
- width: 45px;
- -webkit-transition: .3s background-color ease;
- transition: .3s background-color ease;
- }
-
- .joyride-close-tip:focus, .joyride-close-tip:hover {
- background-color: black;
- }
-
- .joyride-modal-bg {
- display: block !important;
- pointer-events: none;
- z-index: 1060;
- background: rgba(0, 0, 0, 0.5);
- }
-
- .joyride-tip-guide {
- background: transparent;
- z-index: 1070;
- }
-
- .joyride-tip-guide .joyride-nub.top {
- top: 0;
- border-bottom: 28px solid white;
- border-top: none;
- }
-
- .joyride-tip-guide .joyride-nub.top + .joyride-content-wrapper {
- top: 28px;
- }
-
- .joyride-tip-guide .joyride-nub.bottom {
- bottom: 0;
- border-top: 28px solid white;
- border-bottom: none;
- }
-
- .joyride-tip-guide .joyride-nub.bottom + .joyride-content-wrapper {
- bottom: 28px;
- }
-
- .joyride-tip-guide .joyride-nub.left {
- left: 0;
- border-right: 28px solid white;
- border-left: none;
- }
-
- .joyride-tip-guide .joyride-nub.left + .joyride-content-wrapper {
- left: 28px;
- }
-
- .joyride-tip-guide .joyride-nub.right {
- right: 0;
- border-left: 28px solid white;
- border-right: none;
- }
-
- .joyride-tip-guide .joyride-nub.right + .joyride-content-wrapper {
- right: 28px;
- }
-
- .joyride-tip-guide .tour-progress {
- position: absolute;
- bottom: 25px;
- }
-
- .joyride-tip-guide .joyride-tip-remove {
- position: absolute;
- right: 10px;
- bottom: 10px;
- font-size: 12px;
- }
-
- .joyride-tip-guide .joyride-tip-remove:hover {
- text-decoration: underline;
- }
-
- .joyride-content-wrapper {
- background: white;
- color: #4d4d4d;
- -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
- padding: 20px 50px 35px 20px;
- }
-
- .tour-tip-body,
- .tour-tip-label {
- text-align: left;
- }
-
- .tour-tip-label {
- font-size: 1.5rem;
- }
-
- .joyride-nub {
- z-index: 1;
- border-left: 28px solid transparent;
- border-right: 28px solid transparent;
- border-top: 28px solid transparent;
- border-bottom: 28px solid transparent;
- }
-
- @media (min-width: 600px) {
- .joyride-tip-guide {
- width: 450px;
- }
- .joyride-tip-guide .joyride-nub.top {
- left: -25px;
- }
- .joyride-tip-guide .joyride-nub.top + .joyride-content-wrapper {
- left: -40px;
- }
- .joyride-tip-guide .joyride-nub.bottom {
- left: -25px;
- }
- .joyride-tip-guide .joyride-nub.bottom + .joyride-content-wrapper {
- left: -40px;
- }
- .joyride-tip-guide .joyride-nub.left {
- top: -25px;
- }
- .joyride-tip-guide .joyride-nub.left + .joyride-content-wrapper {
- top: -45px;
- }
- .joyride-tip-guide .joyride-nub.right {
- top: -25px;
- }
- .joyride-tip-guide .joyride-nub.right + .joyride-content-wrapper {
- top: -45px;
- }
- .joyride-content-wrapper {
- padding: 35px 65px 35px 35px;
- }
- }
-
- @media (max-width: 599px) {
- .joyride-tip-guide {
- display: none !important;
- }
- }