| .body--light { |
| --tour-dialog-background-color-primary: white; |
| --tour-dialog-background-color-secondary: #f2f2f2; |
| --tour-dialog-text-color: black; |
| |
| .vjt-actions button { |
| border: 1px solid var(--tour-dialog-background-color-secondary); |
| } |
| } |
| |
| .body--dark { |
| --tour-dialog-background-color-primary: #23241f; |
| --tour-dialog-background-color-secondary: #33332f; |
| --tour-dialog-text-color: white; |
| |
| .vjt-actions button { |
| border: 2px solid var(--tour-dialog-background-color-secondary); |
| } |
| } |
| |
| #vjt-tooltip { |
| background-color: var(--tour-dialog-background-color-primary); |
| color: var(--tour-dialog-text-color); |
| border: 2px solid var(--q-primary); |
| box-shadow: |
| 0 1px 5px rgb(0 0 0 / 20%), |
| 0 2px 2px rgb(0 0 0 / 14%), |
| 0 3px 1px -2px rgb(0 0 0 / 12%); |
| border-radius: 12px; |
| padding: 12px !important; |
| } |
| |
| #vjt-arrow:before { |
| background-color: var(--tour-dialog-background-color-primary); |
| } |
| |
| #vjt-tooltip[data-popper-placement^='top'] #vjt-arrow:before { |
| border-right: 2px solid var(--q-primary); |
| border-bottom: 2px solid var(--q-primary); |
| border-top: 2px solid var(--tour-dialog-background-color-primary); |
| border-left: 2px solid var(--tour-dialog-background-color-primary); |
| } |
| #vjt-tooltip[data-popper-placement^='bottom'] #vjt-arrow:before { |
| border-top: 2px solid var(--q-primary); |
| border-left: 2px solid var(--q-primary); |
| border-bottom: 2px solid var(--tour-dialog-background-color-primary); |
| border-right: 2px solid var(--tour-dialog-background-color-primary); |
| } |
| #vjt-tooltip[data-popper-placement^='left'] #vjt-arrow:before { |
| border-top: 2px solid var(--q-primary); |
| border-right: 2px solid var(--q-primary); |
| border-bottom: 2px solid var(--tour-dialog-background-color-primary); |
| border-left: 2px solid var(--tour-dialog-background-color-primary); |
| } |
| #vjt-tooltip[data-popper-placement^='right'] #vjt-arrow:before { |
| border-bottom: 2px solid var(--q-primary); |
| border-left: 2px solid var(--q-primary); |
| border-top: 2px solid var(--tour-dialog-background-color-primary); |
| border-right: 2px solid var(--tour-dialog-background-color-primary); |
| } |
| |
| .vjt-actions button { |
| color: var(--tour-dialog-text-color); |
| } |
| |
| .vjt-actions button:hover { |
| background-color: var(--tour-dialog-background-color-secondary); |
| color: var(--tour-dialog-text-color); |
| } |