MEF

src/isnd/Views/Packages/Details.cshtml

@@ -1,5 +1,4 @@
 @model PackageDetailViewModel
-
 @{
     ViewData["Title"] = "Details";
 }
@@ -24,7 +23,6 @@
         </dd>
         <dt>
             @Html.DisplayNameFor(model => model.latest.FullString)
-            
         </dt>
         <dd>
             <a href="@Model.latest.NugetLink" >@Html.DisplayFor(model => model.latest.FullString)</a>
@@ -32,15 +30,15 @@
             <i class="extinfo">(version count : @Model.totalHits)</i>
         </dd>
     </dl>
+    
     <h4>Integration</h4>
     <hr />
-        <pre>
-        <code 
-         title="click pour copie" 
-         onclick="navigator.clipboard.writeText(this.innerText);alert('copié')">&lt;PackageReference Include="@Model.pkgid" Version="@Model.latest.FullString" /&gt;</code>
-        </pre>
+    <div class="shadowbox">
+        <button class="far fa-copy" style="float:right" onclick="navigator.clipboard.writeText($('#code').text());this.innerText='copied'" >copy</button>
+        <pre><code id="code" >&lt;PackageReference Include="@Model.pkgid" Version="@Model.latest.FullString" /&gt;</code></pre> 
     </div>
     <div>
     @Html.ActionLink("Edit", "Edit", new { pkgid = Model.pkgid, version = Model.latest.FullString }) |
     <a asp-action="Index">Back to List</a>
     </div>
+</div>

src/isnd/wwwroot/css/site.css

@@ -7835,7 +7835,15 @@ a.text-dark:hover, a.text-dark:focus {
   font-size: small;
   font-family: cursive; }
 
-pre code {
-  color: #a9ffff;
-  background-color: #2e2d2d;
+.shadowbox {
+  color: #000;
+  font-family: Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); }
+
+.fa-copy {
   cursor: copy; }

src/isnd/wwwroot/css/site.scss

@@ -95,8 +95,18 @@ background-color: black;
     font-family: cursive;
 }
 
-pre code {
-    color: rgb(169, 255, 255);
-    background-color: rgb(46, 45, 45);
+
+.shadowbox {
+  color:#000;
+  font-family: Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}
+
+.fa-copy {
     cursor: copy;
 }