blob: aafdc0a7c0acdaefb432216852adddf55bf0bda4 [file] [log] [blame]
.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);
}