guide.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. .driver-fix-stacking {
  2. z-index: 2000 !important;
  3. }
  4. div#driver-highlighted-element-stage {
  5. outline: 9999px solid rgba(0, 0, 0, 0.75);
  6. background: none !important;
  7. }
  8. div#driver-page-overlay {
  9. background: none;
  10. }
  11. div#driver-popover-item {
  12. padding: 0;
  13. background: rgba(27, 27, 28, 0.8);
  14. box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
  15. border-radius: 4px 4px 4px 4px;
  16. opacity: 1;
  17. border: 1px solid #000000;
  18. max-width: 650px;
  19. width: 360px;
  20. .driver-popover-tip.left {
  21. border-color: transparent #000 transparent transparent;
  22. top: 25px;
  23. &.position-center {
  24. top: 30%;
  25. }
  26. &.position-bottom {
  27. top: auto;
  28. bottom: 50%;
  29. }
  30. }
  31. .driver-popover-tip.right {
  32. border-color: transparent transparent transparent #000;
  33. top: 25px;
  34. }
  35. .driver-popover-title {
  36. font: inherit;
  37. font-size: 16px;
  38. padding: 20px;
  39. color: #ccc;
  40. border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  41. position: relative;
  42. .close {
  43. position: absolute;
  44. top: 50%;
  45. right: 20px;
  46. font-size: 16px;
  47. transform: translateY(-50%);
  48. }
  49. img {
  50. vertical-align: -5px;
  51. height: 22px;
  52. }
  53. }
  54. .driver-popover-description {
  55. padding: 0 20px;
  56. font-size: 14px;
  57. font-weight: normal;
  58. color: #fff;
  59. margin: 10px 0 30px;
  60. line-height: 21px;
  61. img {
  62. display: block;
  63. margin: 40px auto 10px;
  64. }
  65. }
  66. .driver-popover-footer {
  67. text-align: center;
  68. padding-bottom: 40px;
  69. button {
  70. float: none !important;
  71. height: 34px;
  72. outline: none;
  73. border-radius: 4px;
  74. font-size: 14px;
  75. box-sizing: border-box;
  76. width: 130px;
  77. color: var(--colors-color);
  78. border: 1px solid #00c8af;
  79. background: #00c8af;
  80. color: #fff;
  81. text-shadow: none;
  82. &:empty {
  83. display: none !important;
  84. }
  85. }
  86. .driver-navigation-btns {
  87. float: none;
  88. }
  89. button.driver-disabled {
  90. color: #444444;
  91. border-color: #444444;
  92. background: none;
  93. }
  94. }
  95. &.video-layout {
  96. .video-btns {
  97. position: absolute;
  98. left: 0;
  99. right: 0;
  100. margin-top: 30px;
  101. text-align: center;
  102. }
  103. .video-btn {
  104. position: absolute;
  105. width: 130px;
  106. text-align: center;
  107. height: 33px;
  108. border-radius: 4px;
  109. color: #00c8af;
  110. border: 1px solid;
  111. text-decoration: none;
  112. line-height: 33px;
  113. transform: translateX(-100%);
  114. margin-left: -10px;
  115. }
  116. .driver-popover-footer button {
  117. margin-left: 10px;
  118. transform: translateX(50%);
  119. }
  120. }
  121. }
  122. .edit-goto.help {
  123. .help-content {
  124. .help-p {
  125. font-weight: 400;
  126. font-size: 32px;
  127. letter-spacing: 5px;
  128. margin: 10px auto 40px;
  129. }
  130. }
  131. }