Fossil SCM

Use equal horizontal spacing for normal and "flipped" Copy Buttons (where the latter are positioned after the text to be copied). The idea is for the buttons to be tied to "their" text without spaces in between, resulting in a somewhat narrower spacing to emphasize the connection, but to have normal HTML whitespace on the other side.

florian 2025-08-12 15:26 copybtn.js-responsive
Commit 2bc2f7249c6469637ab377ad1cdc7b3bc6672b8d1576ff7ef6771f9fbc8c5d74
+1 -2
--- src/default.css
+++ src/default.css
@@ -1157,12 +1157,11 @@
11571157
}
11581158
button.copy-button-flipped,
11591159
button.copy-button-flipped:hover,
11601160
button.copy-button-flipped:focus,
11611161
button.copy-button-flipped:active {
1162
-/*Note: .16em is suitable for element grouping.*/
1163
- margin: -2px 0 0 .16em;
1162
+ margin: -2px 0 0 .24em;
11641163
}
11651164
button.copy-button span {
11661165
display: block;
11671166
width: 100%;
11681167
height: 100%;
11691168
--- src/default.css
+++ src/default.css
@@ -1157,12 +1157,11 @@
1157 }
1158 button.copy-button-flipped,
1159 button.copy-button-flipped:hover,
1160 button.copy-button-flipped:focus,
1161 button.copy-button-flipped:active {
1162 /*Note: .16em is suitable for element grouping.*/
1163 margin: -2px 0 0 .16em;
1164 }
1165 button.copy-button span {
1166 display: block;
1167 width: 100%;
1168 height: 100%;
1169
--- src/default.css
+++ src/default.css
@@ -1157,12 +1157,11 @@
1157 }
1158 button.copy-button-flipped,
1159 button.copy-button-flipped:hover,
1160 button.copy-button-flipped:focus,
1161 button.copy-button-flipped:active {
1162 margin: -2px 0 0 .24em;
 
1163 }
1164 button.copy-button span {
1165 display: block;
1166 width: 100%;
1167 height: 100%;
1168
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -1236,11 +1236,11 @@
12361236
"raw/"+a.src
12371237
].forEach(function(url){
12381238
const imgUrl = D.append(D.addClass(D.span(), 'monospace'), url);
12391239
const urlCopy = D.button();
12401240
const li = D.li(ul);
1241
- D.append(li, urlCopy, " ", imgUrl);
1241
+ D.append(li, urlCopy, imgUrl);
12421242
F.copyButton(urlCopy, {copyFromElement: imgUrl});
12431243
});
12441244
});
12451245
return this;
12461246
};
12471247
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -1236,11 +1236,11 @@
1236 "raw/"+a.src
1237 ].forEach(function(url){
1238 const imgUrl = D.append(D.addClass(D.span(), 'monospace'), url);
1239 const urlCopy = D.button();
1240 const li = D.li(ul);
1241 D.append(li, urlCopy, " ", imgUrl);
1242 F.copyButton(urlCopy, {copyFromElement: imgUrl});
1243 });
1244 });
1245 return this;
1246 };
1247
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -1236,11 +1236,11 @@
1236 "raw/"+a.src
1237 ].forEach(function(url){
1238 const imgUrl = D.append(D.addClass(D.span(), 'monospace'), url);
1239 const urlCopy = D.button();
1240 const li = D.li(ul);
1241 D.append(li, urlCopy, imgUrl);
1242 F.copyButton(urlCopy, {copyFromElement: imgUrl});
1243 });
1244 });
1245 return this;
1246 };
1247

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button