123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- .ttour-overlay {
- position: absolute;
- box-shadow: 0 0 0 99999px rgba(0,0,0,.8),inset 0 0 2px 0 #000
- }
-
- .ttour-wrapper {
- position: relative;
- height: 100%;
- width: 100%
- }
- 150
- .ttour-shadow {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- height: 100vh;
- width: 100vw
- }
-
- .ttour-tip {
- position: absolute;
- background-color: #fff;
- border-radius: 2px;
- font-family: sans-serif;
- min-width: 250px;
- max-width: 375px;
- box-shadow: 0 0 5px 0 rgba(0,0,0,.8);
- z-index:10000;
- }
- .ttour-tip.top {
- bottom: calc(100% + 10px);
- left: 8px;
- }
-
- .ttour-tip.right {
- top: -5px;
- left: calc(100% + 10px);
- }
-
- .ttour-tip.bottom {
- top: calc(100% + 10px);
- left: 0
- }
-
- .ttour-tip.left {
- right: calc(100% + 10px);
- top: -4px;
- }
-
- .ttour-header {
- padding: 15px 15px 10px 15px
- }
-
- .ttour-header h1 {
- margin: 0;
- font-size: 1.3em
- }
-
- .ttour-body {
- font-weight: 300;
- padding: 10px 15px
- }
-
- .ttour-footer {
- padding: 10px 15px;
- overflow: auto;
- position: relative
- }
-
- .ttour-bullets {
- position: absolute;
- top: 50%;
- left: 20px;
- transform: translateY(-50%)
- }
-
- .ttour-bullet {
- /*display: inline-block;*/
- border: 3px solid #ccc;
- border-radius: 50%;
- margin: 2px;
- display: none;
- }
-
- .ttour-bullet.active {
- border-color: #333
- }
-
- .ttour-footer button {
- cursor: pointer;
- float: right;
- border: none;
- padding: 8px 16px;
- font-size: 14px;
- transition: .3s ease-out
- }
-
- .ttour-footer button.prev {
- background-color: transparent;
- margin-right: 5px
- }
-
- .ttour-footer button.prev:hover {
- background-color: #efefef;
- }
-
- .ttour-footer button.next {
- color: #fff;
- background-color: #1e88e5;
- border-radius: 2px;
- box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)
- }
-
- .ttour-footer button.next:hover {
- background-color: #42a5f5;
- }
-
- .ttour-arrow {
- position: absolute;
- width: 14px;
- height: 14px;
- transform-origin: 0 0;
- background-color: #fff;
- box-shadow: -2px 2px 2px 0 rgba(0,0,0,.3)
- }
-
- .ttour-tip.right .ttour-arrow {
- top: 15px;
- left: 0;
- transform: rotate(45deg)
- }
-
- .ttour-tip.bottom .ttour-arrow {
- top: 0;
- left: 35px;
- transform: rotate(135deg)
- }
-
- .ttour-tip.left .ttour-arrow {
- right: -14px;
- top: 30px;
- transform: rotate(-136deg)
- }
-
- .ttour-tip.top .ttour-arrow {
- bottom: -14px;
- left: 10px;
- transform: rotate(-45deg)
- }
- .ttour-footer button.next:focus, .ttour-footer button.prev:focus {
- outline: 0px;
- }
|