@papermap/papermap 1.0.4 → 1.1.1

package/styles.css

@@ -1,4 +1,362 @@
-@tailwind base;
+.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}
+/* Custom Driver.js Tour Styles for Papermap - Premium Redesign */
+
+/* Overlay - above app UI (e.g. workspace selector z-[10001]) */
+.driver-overlay {
+  z-index: 99998 !important;
+  background-color: rgba(0, 0, 0, 0.4) !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  transition: all 0.4s ease-in-out !important;
+}
+
+.dark .driver-overlay {
+  background-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Popover container - above overlay, glassmorphism */
+.driver-popover.papermap-tour-popover {
+  z-index: 99999 !important;
+  background: rgba(255, 255, 255, 0.9) !important;
+  border-radius: 24px !important;
+  /* smooth rounded corners */
+  border: 1px solid rgba(0, 0, 0, 0.05) !important;
+  box-shadow:
+    0 24px 48px -12px rgba(0, 0, 0, 0.15),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
+  max-width: 420px !important;
+  padding: 0 !important;
+  color: #000 !important;
+  overflow: hidden !important;
+}
+
+/* Expand: modal-like size (create dashboard modal is sm:max-w-[500px]; we go larger for media) */
+.driver-popover.papermap-tour-popover.papermap-tour-popover--expand {
+  max-width: 640px !important;
+  min-width: 520px !important;
+}
+
+.driver-popover.papermap-tour-popover.papermap-tour-popover--expand .driver-popover-description img,
+.driver-popover.papermap-tour-popover.papermap-tour-popover--expand .driver-popover-description video {
+  max-width: 560px !important;
+  width: 100% !important;
+}
+
+/* Dark mode popover */
+.dark .driver-popover.papermap-tour-popover {
+  background: hsl(var(--card)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  box-shadow:
+    0 24px 48px -12px rgba(0, 0, 0, 0.8),
+    0 0 0 1px hsl(var(--border)),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
+  color: hsl(var(--foreground)) !important;
+}
+
+/* Arrow - adjust to be subtle or transparent */
+.driver-popover-arrow {
+  border-width: 8px !important;
+}
+
+.driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+/* Dark mode arrows */
+.dark .driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: hsl(var(--card)) !important;
+}
+
+.dark .driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: hsl(var(--card)) !important;
+}
+
+.dark .driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: hsl(var(--card)) !important;
+}
+
+.dark .driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: hsl(var(--card)) !important;
+}
+
+/* Title styling - Minimalist */
+.driver-popover-title {
+  font-family: 'Manrope', 'Inter', sans-serif !important;
+  font-size: 22px !important;
+  font-weight: 700 !important;
+  color: #000 !important;
+  margin: 0 !important;
+  padding: 32px 32px 12px 32px !important;
+  line-height: 1.2 !important;
+  letter-spacing: -0.02em !important;
+}
+
+.dark .driver-popover-title {
+  color: hsl(var(--foreground)) !important;
+}
+
+/* Description styling */
+.driver-popover-description {
+  font-family: 'Manrope', 'Inter', sans-serif !important;
+  font-size: 15px !important;
+  line-height: 1.6 !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  /* More subtle text */
+  margin: 0 !important;
+  padding: 0 32px 32px 32px !important;
+  font-weight: 400 !important;
+}
+
+.dark .driver-popover-description {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+/* Footer styling */
+.driver-popover-footer {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 24px 32px !important;
+  background: rgba(0, 0, 0, 0.03) !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+}
+
+.dark .driver-popover-footer {
+  background: rgba(0, 0, 0, 0.2) !important;
+  border-top: 1px solid hsl(var(--border)) !important;
+}
+
+.driver-popover-footer button {
+  text-shadow: none !important;
+}
+
+/* Progress text */
+.driver-popover-progress-text {
+  font-family: 'Manrope', 'Inter', sans-serif !important;
+  font-size: 13px !important;
+  font-weight: 700 !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  letter-spacing: 0.5px !important;
+}
+
+.dark .driver-popover-progress-text {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+/* Navigation buttons container */
+.driver-popover-navigation-btns {
+  display: flex !important;
+  align-items: center !important;
+  gap: 16px !important;
+}
+
+/* Button base styles */
+.driver-popover-btn {
+  padding: 0 20px !important;
+  font-family: 'TWK Lausanne', 'Manrope', 'Inter', sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  border-radius: 8px !important;
+  transition: all 0.2s ease !important;
+  cursor: pointer !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 12px !important;
+  outline: none !important;
+  height: 48px !important;
+}
+
+/* Next/Done button */
+.driver-popover-next-btn,
+.driver-popover-btn-group .driver-popover-btn:last-child {
+  background-color: #000000 !important;
+  color: #FFFFFF !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  box-shadow: none !important;
+  font-weight: 500 !important;
+}
+
+.driver-popover-next-btn:hover,
+.driver-popover-btn-group .driver-popover-btn:last-child:hover {
+  background-color: rgba(0, 0, 0, 0.9) !important;
+  border-color: rgba(0, 0, 0, 0.2) !important;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+.driver-popover-next-btn:active {
+  background-color: #000000 !important;
+  transform: none !important;
+  opacity: 0.9 !important;
+}
+
+.dark .driver-popover-next-btn,
+.dark .driver-popover-btn-group .driver-popover-btn:last-child {
+  background-color: hsl(var(--primary)) !important;
+  color: hsl(var(--primary-foreground)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+}
+
+.dark .driver-popover-next-btn:hover,
+.dark .driver-popover-btn-group .driver-popover-btn:last-child:hover {
+  background-color: hsl(var(--primary)) !important;
+  opacity: 0.9 !important;
+  border-color: hsl(var(--border)) !important;
+}
+
+.dark .driver-popover-next-btn:active {
+  background-color: hsl(var(--primary)) !important;
+  opacity: 0.8 !important;
+}
+
+/* Previous button */
+.driver-popover-prev-btn {
+  background: rgba(0, 0, 0, 0.05) !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  padding: 0 16px !important;
+  font-size: 13px !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  font-weight: 600 !important;
+}
+
+.driver-popover-prev-btn:hover {
+  color: #000 !important;
+  background: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+.dark .driver-popover-prev-btn {
+  background: hsl(var(--secondary)) !important;
+  color: hsl(var(--secondary-foreground)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+}
+
+.dark .driver-popover-prev-btn:hover {
+  background: hsl(var(--muted)) !important;
+  color: hsl(var(--foreground)) !important;
+  border-color: hsl(var(--border)) !important;
+}
+
+/* Expand toggle button (when step has expand: true) */
+.papermap-tour-expand-btn {
+  position: absolute !important;
+  top: 24px !important;
+  right: 52px !important;
+  width: 32px !important;
+  height: 32px !important;
+  z-index: 2 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background: transparent !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  border-radius: 6px !important;
+  padding: 0 !important;
+  transition: all 0.2s ease !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+.papermap-tour-expand-btn:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  color: #000 !important;
+}
+
+.papermap-tour-expand-btn svg {
+  flex-shrink: 0 !important;
+}
+
+.dark .papermap-tour-expand-btn {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+.dark .papermap-tour-expand-btn:hover {
+  background: hsl(var(--muted)) !important;
+  color: hsl(var(--foreground)) !important;
+}
+
+/* Close button */
+.driver-popover-close-btn {
+  position: absolute !important;
+  top: 24px !important;
+  right: 24px !important;
+  width: 24px !important;
+  height: 24px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background: transparent !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  border-radius: 4px !important;
+  font-size: 20px !important;
+  padding: 0 !important;
+  transition: all 0.2s ease !important;
+  border: none !important;
+}
+
+.driver-popover-close-btn:hover {
+  background: rgba(0, 0, 0, 0.1) !important;
+  color: #000 !important;
+}
+
+.dark .driver-popover-close-btn {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+.dark .driver-popover-close-btn:hover {
+  background: hsl(var(--muted)) !important;
+  color: hsl(var(--foreground)) !important;
+}
+
+/* Highlighted element */
+.driver-highlighted-element {
+  border-radius: 6px !important;
+  box-shadow:
+    0 0 0 4px rgba(0, 0, 0, 0.2),
+    0 0 0 5px rgba(255, 255, 255, 0.5) !important;
+  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
+}
+
+.dark .driver-highlighted-element {
+  box-shadow:
+    0 0 0 4px rgba(255, 255, 255, 0.1),
+    0 0 0 5px hsl(var(--border)) !important;
+}
+
+/* Animation */
+.driver-popover {
+  animation: driverPopoverSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+@keyframes driverPopoverSlide {
+  0% {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.driver-popover-skip-btn {
+  display: none !important;
+}@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -24,14 +382,20 @@
     --input: 240 5.9% 90%;
     --ring: 240 5.9% 10%;
     --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
 
+  /* Dark tokens match main app `globals.css` (elevated `bg-card` vs page background). */
   .dark {
-    --background: 240 10% 3.9%;
+    --background: 0 0% 0%;
     --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
+    --card: 0 0% 7%;
     --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
+    --popover: 0 0% 7%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 240 5.9% 10%;
@@ -46,6 +410,19 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  .bg-background {
+    background-color: hsl(var(--background));
+  }
+
+  .dark .bg-background {
+    background: #0a0a0a;
   }
 }
 
@@ -55,6 +432,8 @@
   }
   body {
     @apply bg-background text-foreground;
+    padding-left: var(--papermap-side-inset-left, 0px);
+    padding-right: var(--papermap-side-inset-right, 0px);
   }
 }