MediaWiki:Gadget-copyTable.css: Difference between revisions
Appearance
Content deleted Content added
Created page with ".copy-table-btn { display: inline-block; margin-bottom: 4px; padding: 4px 10px; font-size: 13px; cursor: pointer; border: 1px solid #a2a9b1; border-radius: 3px; background: #f8f9fa; color: #202122; } .copy-table-btn:hover { background: #eaecf0; }" |
No edit summary |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Outer wrapper around each table (added by the gadget JS). It does NOT scroll; |
|||
it anchors the pinned copy button (position:relative), is full-width, and clears |
|||
a right-floated infobox so the unit drops below it. */ |
|||
.copy-table-wrapper { |
|||
position: relative; |
|||
display: block; |
|||
max-width: 100%; |
|||
clear: both; |
|||
} |
|||
/* Inner box that actually scrolls horizontally. overflow-x works here because it |
|||
is a block div — never on the <table> element itself. The button is its sibling |
|||
(in the non-scrolling wrapper), so it stays put while this box scrolls. */ |
|||
.copy-table-scroll { |
|||
overflow-x: auto; |
|||
} |
|||
/* Copy button: top-right corner, barely visible at rest, appears on hover */ |
|||
.copy-table-btn { |
.copy-table-btn { |
||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
padding: 5px; |
|||
line-height: 1; |
|||
border: 1px solid transparent; |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
cursor: pointer; |
cursor: pointer; |
||
opacity: 0.3; |
|||
transition: opacity 0.2s, background 0.2s, border-color 0.2s; |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
} |
} |
||
.copy-table-btn:hover { |
.copy-table-btn:hover { |
||
opacity: 1; |
|||
background: #ffffff; |
|||
border-color: #a2a9b1; |
|||
color: #202122; |
|||
} |
|||
/* Green checkmark after successful copy */ |
|||
.copy-table-btn--ok { |
|||
opacity: 1; |
|||
color: #00af89; |
|||
} |
} |
||
Latest revision as of 00:23, 11 June 2026
/* Outer wrapper around each table (added by the gadget JS). It does NOT scroll;
it anchors the pinned copy button (position:relative), is full-width, and clears
a right-floated infobox so the unit drops below it. */
.copy-table-wrapper {
position: relative;
display: block;
max-width: 100%;
clear: both;
}
/* Inner box that actually scrolls horizontally. overflow-x works here because it
is a block div — never on the <table> element itself. The button is its sibling
(in the non-scrolling wrapper), so it stays put while this box scrolls. */
.copy-table-scroll {
overflow-x: auto;
}
/* Copy button: top-right corner, barely visible at rest, appears on hover */
.copy-table-btn {
position: absolute;
top: 0px;
right: 0px;
padding: 5px;
line-height: 1;
border: 1px solid transparent;
border-radius: 4px;
background: rgba(255, 255, 255, 0.7);
color: #72777d;
cursor: pointer;
opacity: 0.3;
transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}
.copy-table-btn:hover {
opacity: 1;
background: #ffffff;
border-color: #a2a9b1;
color: #202122;
}
/* Green checkmark after successful copy */
.copy-table-btn--ok {
opacity: 1;
color: #00af89;
}