update popover styling etc

hyperaudio · Aug 22, 2024 · 216698f · 216698f
1 parent 16c79a0
commit 216698f
Showing 1 changed file with 47 additions and 3 deletions.
diff --git a/wp-hyperaudio/hyperaudio.php b/wp-hyperaudio/hyperaudio.php
@@ -139,7 +139,42 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
 
   .hyperaudio-transcript a {
     text-decoration:none !important;
-  }';
+  }
+    
+  #popover {
+    position: absolute;
+    background-color: #f9f9f9;
+    
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    display: none;
+    z-index: 1;
+    font-size: small;
+    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
+  }
+
+  #popover a {
+    text-decoration: none; 
+    color: #303030;
+    cursor: pointer;
+  }
+
+  #clipboard-text {
+    font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
+    font-size: 0.8em;
+    line-height: 1.2;
+  }
+
+  #clipboard-confirm {
+    font-size: medium;
+  }
+
+  #clipboard-dialog {
+    width: 50%;
+  }
+  ';
 
   if (!is_null($fontfamily)) {
     $o .=' .hyperaudio-transcript {
@@ -170,8 +205,7 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
   }
 
 
-  $o .=' 
-  .share-this-popover{max-width:8em;pointer-events:none;-webkit-filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));-webkit-animation:a .3s;animation:a .3s}.share-this-popover:before{content:"";position:absolute;bottom:100%;left:50%;width:0;height:0;margin:.25em -.5em;border-width:.5em .5em 0;border-style:solid;border-color:#333 transparent}.share-this-popover>ul{pointer-events:auto;list-style:none;padding:0;margin:-.75em 0 0;white-space:nowrap;background:#333;color:#fff;border-radius:.25em;position:absolute;left:50%;-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.share-this-popover>ul>li{display:inline-block;width:2em;height:2em;line-height:2em;text-align:center}.share-this-popover>ul>li>a{display:inline-block;width:100%;height:100%;color:inherit;box-sizing:border-box;padding:.35em}.share-this-popover>ul>li>a:focus,.share-this-popover>ul>li>a:hover{background:hsla(0,0%,100%,.25)}@media (pointer:coarse){.share-this-popover{font-size:150%}.share-this-popover:before{bottom:auto;top:100%;border-width:0 .5em .5em;margin-top:0}.share-this-popover>ul{top:100%;transform:translateX(-50%);margin:.5em 0 0}}@media (max-width:575px){.share-this-popover{left:0!important;right:0!important;width:auto!important;max-width:none}.share-this-popover:before{bottom:auto;top:100%;border-width:0 .5em .5em;margin-top:0}.share-this-popover>ul{top:100%;transform:translateX(-50%);margin:.5em 0 0;left:0;width:100%;transform:none;border-radius:0;text-align:center}}@-webkit-keyframes a{0%{-webkit-transform:translateY(-3em);opacity:0}80%{-webkit-transform:translateY(.5em);opacity:1}to{-webkit-transform:translateY(0)}}@keyframes a{0%{transform:translateY(-3em);opacity:0}80%{transform:translateY(.5em);opacity:1}to{transform:translateY(0)}}</style>';
+  $o .='</style>';
 
   $o .='<!--<p>
     <form id="searchForm" style="float:right">
@@ -206,6 +240,16 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
     }
 
     $o .= '</video>';
+
+    $o .= '<div id="popover"><a id="popover-btn">Copy to clipboard <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="-130 -110 600 600"><path d="m161,152.9h190c0.1,0 0.1,0 0.2,0 10.8,0 19.6-7.1 19.6-16 0-1.5-14.1-82.7-14.1-82.7-1.3-7.9-9.6-13.8-19.4-13.8l-61.7,.1v-13.5c0-8.8-8.8-16-19.6-16-10.8,0-19.6,7.1-19.6,16v13.6l-61.8,.1c-9.8,0-18,5.9-19.4,13.8l-13.7,80.3c-1.2,14.3 13.5,18.1 19.5,18.1z" fill="currentcolor"/><path d="m427.5,78.9h-26.8c0,0 9.3,53.5 9.3,58 0,30.4-26.4,55.2-58.8,55.2h-190.2c-19.6,0.4-63.3-14.7-58.1-63.9l8.4-49.2h-26.8c-10.8,0-19.6,8.8-19.6,19.6v382.9c0,10.8 8.8,19.6 19.6,19.6h343c10.8,0 19.6-8.8 19.6-19.6v-383c0-10.8-8.8-19.6-19.6-19.6zm-76.5,320.1h-190c-10.8,0-19.6-8.8-19.6-19.6 0-10.8 8.8-19.6 19.6-19.6h190c10.8,0 19.6,8.8 19.6,19.6 0,10.8-8.7,19.6-19.6,19.6zm0-110.3h-190c-10.8,0-19.6-8.8-19.6-19.6 0-10.8 8.8-19.6 19.6-19.6h190c10.8,0 19.6,8.8 19.6,19.6 0,10.8-8.7,19.6-19.6,19.6z" fill="currentcolor"/></svg></a></div>
+
+  <dialog id="clipboard-dialog">
+      <h4>The following text has been copied to the clipboard</h4>
+      <p id=clipboard-text></p>
+      <div style="text-align: right;">
+        <button id="clipboard-confirm">ok</button>
+      </div>
+  </dialog>';
   }
 
   $o .='</div>';