PortableListUsers.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/**
 * @name            PortableListUsers
 * @version         v1.0
 * @author          Ursuul
 * @author          TheGoldenPatrik1
 * @description     Styles the PortableListUsers script.
 */

/* Universal */
#lu-throbber {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000000;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
}/**/

/* Desktop */
.list-users-desktop #lu-table {
    width: 100%;
}

.list-users-desktop #lu-table #lu-table-first {
    font-weight: bold;
}

.list-users-desktop #lu-table #lu-avatar {
    width: auto;
    height: 22px;
}

#WikiaBar #lu-link {
    cursor: pointer;
}/**/

/* Mobile */
.list-users-mobile {
    display: flex;
    flex-direction: column;
}

.list-users-mobile #lu-edits-select,
.list-users-mobile #lu-tally {
    margin-top: 5px;
}

.list-users-mobile #lu-list li {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 20px 30px minmax(50px, -webkit-min-content) minmax(40px, -webkit-min-content) -webkit-min-content;
    -ms-grid-rows: 20px 30px minmax(50px, min-content) minmax(40px, min-content) min-content;
    -ms-grid-columns: minmax(-webkit-min-content, 1fr) 10px -webkit-min-content 10px minmax(-webkit-min-content, 1fr);
    -ms-grid-columns: minmax(min-content, 1fr) 10px min-content 10px minmax(min-content, 1fr);
    grid-template:
        "border border border" 20px
        "username username username" 30px
        "edits avatar gender" minmax(50px, -webkit-min-content)
        "edited avatar registered" minmax(40px, -webkit-min-content)
        "groups groups groups" -webkit-min-content
        / minmax(-webkit-min-content, 1fr) -webkit-min-content minmax(-webkit-min-content, 1fr);
    grid-template:
        "border border border" 20px
        "username username username" 30px
        "edits avatar gender" minmax(50px, min-content)
        "edited avatar registered" minmax(40px, min-content)
        "groups groups groups" min-content
        / minmax(min-content, 1fr) min-content minmax(min-content, 1fr);
    grid-column-gap: 10px;
    align-items: start;
    justify-content: center;
    text-align: center;
    margin: 10px 0 20px;
    -webkit-text-size-adjust: 100%;
}

.list-users-mobile #lu-list li:before {
    content: "";
    grid-area: border;
    -ms-grid-column-align: stretch;
    justify-self: stretch;
    border-bottom: 1px solid;
}

.list-users-mobile #lu-list li:last-child {
    margin-bottom: 0;
}

.list-users-mobile #lu-list li #lu-list-user {
    grid-area: username;
}

.list-users-mobile #lu-list li #lu-list-editcount {
    grid-area: edits;
}

.list-users-mobile #lu-list li #lu-list-avatar {
    grid-area: avatar;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border: 1px solid;
    border-radius: 100%;
    margin-top: 7px;
}

.list-users-mobile #lu-list li #lu-avatar {
    width: auto;
    height: 60px;
}

.list-users-mobile #lu-list li #lu-list-gender {
    grid-area: gender;
}

.list-users-mobile #lu-list li #lu-list-last-edited {
    grid-area: edited;
}

.list-users-mobile #lu-list li #lu-list-registration {
    grid-area: registered;
}

.list-users-mobile #lu-list li #lu-list-groups {
    grid-area: groups;
    font-style: italic;
    padding-top: 5px;
}

.list-users-mobile #lu-list b {
    font-weight: bold;
}/**/