guida.js/dist/styles.d.ts

A modern, lightweight onboarding library with spotlight highlighting and smooth animations

export declare const DEFAULT_STYLES = "\n/* Guida.js Onboarding Styles */\n.guida-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 10000;\n  pointer-events: none;\n}\n\n.guida-backdrop {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(2px);\n  transition: clip-path 0.3s ease-in-out;\n}\n\n.guida-highlight {\n  position: relative;\n  z-index: 10001;\n  border-radius: 8px;\n  transition: all 0.3s ease-in-out;\n}\n\n.guida-highlight::before {\n  content: '';\n  position: absolute;\n  top: -4px;\n  left: -4px;\n  right: -4px;\n  bottom: -4px;\n  border: 2px solid #007acc;\n  border-radius: 12px;\n  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2),\n              0 0 20px rgba(0, 122, 204, 0.3);\n  pointer-events: none;\n  z-index: -1;\n  animation: guida-pulse 2s infinite;\n}\n\n@keyframes guida-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2),\n                0 0 20px rgba(0, 122, 204, 0.3);\n  }\n  50% {\n    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.4),\n                0 0 30px rgba(0, 122, 204, 0.5);\n  }\n}\n\n.guida-tooltip {\n  position: fixed;\n  z-index: 10002;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  padding: 0;\n  opacity: 0;\n  transform: scale(0.9) translateY(10px);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  pointer-events: auto;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  max-width: 400px;\n  min-width: 300px;\n}\n\n.guida-tooltip.guida-visible {\n  opacity: 1;\n  transform: scale(1) translateY(0);\n}\n\n.guida-tooltip-content {\n  padding: 16px;\n}\n\n.guida-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 12px;\n  gap: 12px;\n}\n\n.guida-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #1a1a1a;\n  line-height: 1.3;\n  flex: 1;\n}\n\n.guida-progress {\n  background: #f8f9fa;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 11px;\n  color: #6c757d;\n  font-weight: 500;\n  white-space: nowrap;\n  border: 1px solid #e9ecef;\n}\n\n.guida-tooltip-content p {\n  margin: 0 0 16px 0;\n  color: #495057;\n  line-height: 1.4;\n  font-size: 13px;\n}\n\n.guida-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n.guida-navigation {\n  display: none;\n}\n\n.guida-controls {\n  display: flex;\n  gap: 6px;\n  justify-content: space-between;\n  flex-wrap: wrap;\n}\n\n.guida-btn {\n  padding: 6px 12px;\n  border-radius: 4px;\n  border: none;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  min-width: 50px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.guida-btn-secondary {\n  background: #f8f9fa;\n  color: #495057;\n  border: 1px solid #dee2e6;\n}\n\n.guida-btn-secondary:hover {\n  background: #e9ecef;\n  border-color: #adb5bd;\n}\n\n.guida-btn-text {\n  background: transparent;\n  color: #6c757d;\n  border: 1px solid #dee2e6;\n  min-width: 45px;\n}\n\n.guida-btn-text:hover {\n  background: #f8f9fa;\n  border-color: #adb5bd;\n  color: #495057;\n}\n\n.guida-skip {\n  background: transparent;\n  color: #6c757d;\n  border: 1px solid #dee2e6;\n}\n\n.guida-skip:hover {\n  background: #f8f9fa;\n  border-color: #adb5bd;\n}\n\n.guida-next {\n  background: #007acc;\n  color: white;\n  min-width: 60px;\n}\n\n.guida-next:hover {\n  background: #0056b3;\n}\n\n.guida-close {\n  background: #dc3545;\n  color: white;\n  min-width: 45px;\n}\n\n.guida-close:hover {\n  background: #c82333;\n}\n\n/* Tooltip arrows */\n.guida-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border: 8px solid transparent;\n}\n\n.guida-arrow-top {\n  bottom: -16px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-top-color: white;\n}\n\n.guida-arrow-bottom {\n  top: -16px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-bottom-color: white;\n}\n\n.guida-arrow-left {\n  right: -16px;\n  top: 50%;\n  transform: translateY(-50%);\n  border-left-color: white;\n}\n\n.guida-arrow-right {\n  left: -16px;\n  top: 50%;\n  transform: translateY(-50%);\n  border-right-color: white;\n}\n\n/* Completion styles */\n.guida-completion {\n  text-align: center;\n}\n\n.guida-completion-icon {\n  font-size: 48px;\n  margin-bottom: 16px;\n}\n\n.guida-completion h3 {\n  color: #28a745;\n  margin-bottom: 12px;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .guida-tooltip {\n    max-width: calc(100vw - 40px);\n    min-width: 280px;\n  }\n  \n  .guida-tooltip-content {\n    padding: 20px;\n  }\n  \n  .guida-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  \n  .guida-actions {\n    flex-direction: column;\n  }\n  \n  .guida-btn {\n    width: 100%;\n  }\n}\n\n/* Dark theme support */\n@media (prefers-color-scheme: dark) {\n  .guida-tooltip {\n    background: #2d2d2d;\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n  \n  .guida-header h3 {\n    color: #ffffff;\n  }\n  \n  .guida-tooltip-content p {\n    color: #cccccc;\n  }\n  \n  .guida-progress {\n    background: #404040;\n    color: #cccccc;\n  }\n  \n  .guida-skip {\n    background: transparent;\n    color: #cccccc;\n    border-color: #555 !important;\n  }\n  \n  .guida-skip:hover {\n    background: #404040;\n    border-color: #666 !important;\n  }\n  \n  .guida-arrow-top {\n    border-top-color: #2d2d2d;\n  }\n  \n  .guida-arrow-bottom {\n    border-bottom-color: #2d2d2d;\n  }\n  \n  .guida-arrow-left {\n    border-left-color: #2d2d2d;\n  }\n  \n  .guida-arrow-right {\n    border-right-color: #2d2d2d;\n  }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .guida-backdrop {\n    background-color: rgba(0, 0, 0, 0.9);\n  }\n  \n  .guida-highlight::before {\n    border-color: #ffffff;\n    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5),\n                0 0 20px rgba(255, 255, 255, 0.8);\n  }\n  \n  .guida-tooltip {\n    border: 2px solid #000000;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .guida-backdrop,\n  .guida-tooltip,\n  .guida-highlight,\n  .guida-btn {\n    transition: none;\n  }\n  \n  .guida-highlight::before {\n    animation: none;\n  }\n}\n";