MediaWiki:Gadget-responsive-tables.css: Difference between revisions

From Path of Exile 2 Wiki
Jump to navigation Jump to search
(Prevent relative positioned elements from sitting on top of the sticky table header)
No edit summary
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
.c-responsive-table {
.c-responsive-table {
     margin-bottom: 20px;
     margin-bottom: 20px;
    max-width: -moz-fit-content;
     max-width: fit-content;
     max-width: fit-content;
}
}
.c-responsive-table__toolbar {
.c-responsive-table__toolbar {
     margin-bottom: 2px;
     margin-bottom: 2px;
}
}
.c-responsive-table__toolbar-button {
.c-responsive-table__toolbar-button {
     display: inline-block;
     display: inline-block;
Line 15: Line 16:
     background: #27292a;
     background: #27292a;
}
}
.c-responsive-table__toolbar-button:hover,
.c-responsive-table__toolbar-button:hover,
.c-responsive-table__toolbar-button:focus {
.c-responsive-table__toolbar-button:focus {
Line 21: Line 23:
     background: #343738;
     background: #343738;
}
}
.c-responsive-table__toolbar-button svg {
.c-responsive-table__toolbar-button svg {
     display: inline-block;
     display: inline-block;
Line 28: Line 31:
     height: 1em;
     height: 1em;
}
}
.c-responsive-table__scroll {
.c-responsive-table__scroll {
     overflow-y: auto;
     overflow-y: auto;
     overflow-x: auto;
     overflow-x: auto;
     max-height: 50vh;
     max-height: 50vh;
    max-width: fit-content;
}
}
@media screen and (min-height: 600px) {
@media screen and (min-height: 600px) {
     .c-responsive-table__scroll {
     .c-responsive-table__scroll {
Line 42: Line 48:
     overflow-y: visible;
     overflow-y: visible;
}
}
.c-responsive-table__table {
.c-responsive-table__table {
     margin: 0 !important;
     margin: 0 !important;
}
}
.c-responsive-table__table tr:first-of-type th {
.c-responsive-table__table tr:first-of-type th {
     position: sticky;
     position: sticky;
     top: -1px; /* Prevent row of pixels visible above table header when scrolled down. */
     top: -1px; /* Prevent row of pixels visible above table header when scrolled down. */
     z-index: 1;
     z-index: 1;
}
/* Mozilla hack to fix unnecessary horizontal scrollbar. */
@media screen and (min--moz-device-pixel-ratio:0) {
    .c-responsive-table__scroll {
        padding-right: 18px;
    }
}
}

Latest revision as of 20:36, 27 December 2024

.c-responsive-table {
    margin-bottom: 20px;
    max-width: fit-content;
}

.c-responsive-table__toolbar {
    margin-bottom: 2px;
}

.c-responsive-table__toolbar-button {
    display: inline-block;
    margin-right: 0.4em;
    border: none;
    font-size: 12px;
    color: #7c8489;
    background: #27292a;
}

.c-responsive-table__toolbar-button:hover,
.c-responsive-table__toolbar-button:focus {
    color: #a5b2bb;
    text-shadow: none;
    background: #343738;
}

.c-responsive-table__toolbar-button svg {
    display: inline-block;
    margin-right: 0.2em;
    vertical-align: -.125em;
    width: 1em;
    height: 1em;
}

.c-responsive-table__scroll {
    overflow-y: auto;
    overflow-x: auto;
    max-height: 50vh;
    max-width: fit-content;
}

@media screen and (min-height: 600px) {
    .c-responsive-table__scroll {
        max-height: 25vh;
    }
}
.c-responsive-table.is-expanded .c-responsive-table__scroll {
    max-height: none !important;
    overflow-y: visible;
}

.c-responsive-table__table {
    margin: 0 !important;
}

.c-responsive-table__table tr:first-of-type th {
    position: sticky;
    top: -1px; /* Prevent row of pixels visible above table header when scrolled down. */
    z-index: 1;
}