Make the new doxygen clipboard feature work and look good

CSS rules copied from doxygen default stylesheet generated with: doxygen -w html new_header.html new_footer.html new_stylesheet.css
SFML · May 8, 2024 · 9111429 · 9111429
1 parent b9e4e63
commit 9111429
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/doc/doxygen.css b/doc/doxygen.css
@@ -147,12 +147,53 @@ div.fragment {
 
     font-family: Consolas, "Liberation Mono", Courier, monospace;
     font-size: 10pt;
+    position: relative;
     padding: 0.5em 1em;
     background-color: #f5f5f5;
     border: 1px solid #bbb;
     border-radius(5px);
 }
 
+.clipboard {
+    width: 24px;
+    height: 24px;
+    right: 5px;
+    top: 5px;
+    opacity: 0;
+    position: absolute;
+    display: inline;
+    overflow: auto;
+    fill: black;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.clipboard.success {
+    border: 1px solid black;
+    border-radius: 4px;
+}
+
+.fragment:hover .clipboard, .clipboard.success {
+    opacity: .28;
+}
+
+.clipboard:hover, .clipboard.success {
+    opacity: 1 !important;
+}
+
+.clipboard:active:not([class~=success]) svg {
+    transform: scale(.91);
+}
+
+.clipboard.success svg {
+    fill: #2EC82E;
+}
+
+.clipboard.success {
+    border-color: #2EC82E;
+}
+
 div.line {
     min-height: 13px;
     text-wrap: unrestricted;

diff --git a/doc/header.html.in b/doc/header.html.in
@@ -6,6 +6,7 @@
         <link rel="stylesheet" type="text/css" href="doxygen.css" title="default" media="screen,print" />
         <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript" src="dynsections.js"></script>
+        <script type="text/javascript" src="clipboard.js"></script>
         <script type="text/javascript" src="cookie.js"></script>
         <link rel="stylesheet" type="text/css" href="search/search.css" />
         <link rel="stylesheet" type="text/css" href="searchOverrides.css" />