Fossil

Check-in [b7f2c9f329]
Login

Check-in [b7f2c9f329]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment: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.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | copybtn.js-responsive
Files: files | file ages | folders
SHA3-256: b7f2c9f329971d045495df744c625f9347d925111f25fd48ea3a367f44ba868d
User & Date: florian 2025-08-12 15:20:00.000
Context
2025-08-12
15:27
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. ... (Closed-Leaf check-in: 2bc2f7249c user: florian tags: copybtn.js-responsive)
15:20
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. ... (check-in: b7f2c9f329 user: florian tags: copybtn.js-responsive)
15:04
Revamp the Copy Buttons for a more responsive user experience. See the [branch/copybtn.js-responsive | wiki page linked to this branch] for more details. ... (check-in: 32c3a210c8 user: florian tags: copybtn.js-responsive)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/default.css.
1134
1135
1136
1137
1138
1139
1140
1141



1142
1143
1144
1145
1146
1147

1148
1149
1150
1151
1152
1153
1154



1155
1156
1157
1158
1159
1160
1161
}
label {
  white-space: nowrap;
}
label[for] {
  cursor: pointer;
}
button.copy-button {



  width: 14px;
  height: 14px;
/*Note: .24em is slightly smaller than the average width of a normal space.*/
  margin: -2px .24em 0 0;
  padding: 0;
  border: 0;

  background: none;
  font-size: inherit; /* Required for horizontal spacing. */
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
}
button.copy-button-flipped {



/*Note: .16em is suitable for element grouping.*/
  margin: -2px 0 0 .16em;
}
button.copy-button span {
  display: block;
  width: 100%;
  height: 100%;







|
>
>
>






>






|
>
>
>







1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
}
label {
  white-space: nowrap;
}
label[for] {
  cursor: pointer;
}
button.copy-button,
button.copy-button:hover,
button.copy-button:focus,
button.copy-button:active {
  width: 14px;
  height: 14px;
/*Note: .24em is slightly smaller than the average width of a normal space.*/
  margin: -2px .24em 0 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: inherit; /* Required for horizontal spacing. */
  vertical-align: middle;
  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%;