MediaWiki:Gadget-copyTable.css: Difference between revisions
Appearance
Content deleted Content added
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* |
/* Wrapper around each table (added by the gadget JS). It is the block that: |
||
- is full-width (the table is width:100%, so the wrapper must be a block; |
|||
NOT inline-block, which shrink-wraps and collapses the table's width:100%); |
|||
table's width:100%. position:relative anchors the copy button. */ |
|||
- is the horizontal SCROLL CONTAINER (overflow-x:auto works on this block, |
|||
never on the <table> element itself); |
|||
- clears the float so the unit drops below a right-floated infobox; |
|||
- anchors the copy button (position:relative). */ |
|||
.copy-table-wrapper { |
.copy-table-wrapper { |
||
position: relative; |
position: relative; |
||
display: block; |
display: block; |
||
max-width: 100%; |
max-width: 100%; |
||
clear: both; |
|||
overflow-x: auto; |
|||
} |
} |
||
| Line 34: | Line 40: | ||
opacity: 1; |
opacity: 1; |
||
color: #00af89; |
color: #00af89; |
||
} |
|||
.copy-table-wrapper { |
|||
position: relative; |
|||
display: block; |
|||
max-width: 100%; |
|||
clear: both; /* drop the whole unit (table + button) below the floated infobox */ |
|||
} |
} |
||
Revision as of 00:17, 11 June 2026
/* Wrapper around each table (added by the gadget JS). It is the block that:
- is full-width (the table is width:100%, so the wrapper must be a block;
NOT inline-block, which shrink-wraps and collapses the table's width:100%);
- is the horizontal SCROLL CONTAINER (overflow-x:auto works on this block,
never on the <table> element itself);
- clears the float so the unit drops below a right-floated infobox;
- anchors the copy button (position:relative). */
.copy-table-wrapper {
position: relative;
display: block;
max-width: 100%;
clear: both;
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;
}