Differences From Artifact [f44516ec9b]:

• File src/default.css — part of check-in [b7f2c9f329] at 2025-08-12 15:20:00 on branch copybtn.js-responsive — Add some higher-specificity CSS declarations to prevent dark-mode skins from overriding the relevant styles of the Copy Button layout, so users don't need to sync their skin customizations with the changes on this branch. (user: florian size: 46902)

To Artifact [6bd927a6f0]:

• File src/default.css — part of check-in [2bc2f7249c] at 2025-08-12 15:27:00 on branch copybtn.js-responsive — 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. (user: florian size: 46852) [more...]

1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170

  user-select: none;
  cursor: pointer;
}
button.copy-button-flipped,
button.copy-button-flipped:hover,
button.copy-button-flipped:focus,
button.copy-button-flipped:active {
/*Note: .16em is suitable for element grouping.*/
  margin: -2px 0 0 .16em;
}
button.copy-button span {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

<
|

1155
1156
1157
1158
1159
1160
1161

1162
1163
1164
1165
1166
1167
1168
1169

  user-select: none;
  cursor: pointer;
}
button.copy-button-flipped,
button.copy-button-flipped:hover,
button.copy-button-flipped:focus,
button.copy-button-flipped:active {

  margin: -2px 0 0 .24em;
}
button.copy-button span {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;