Rustrician.io Stylesheet

#user-area div.dropdown > a:nth-child(1), /* Profile pic */
#user-area > a:nth-child(1), /* Login text */
#donate,
#creator-info,
#banner,
#logo {
    display: none;
}

#user-area,
#topbarContainer {
    padding: 0;
    background-color: transparent;
}

/*
Move the top bar to the bottom right corner (right end of footer).
This causes the user area to move to the same position since it's a child.
The footer's static height is easier to work with. Conversely, the toolbar
dynamically resizes and therefore has greater risk of element overlapping.
*/
#topbarContainer {
    position: absolute;

    /* Force it to the bottom */
    top: unset;
    bottom: 0;

    /* Be as narrow as possible to avoid blocking hover of other buttons */
    left: unset;

    right: 0; /* Align it to the right end */
    padding: 10px; /* Same as the margins of the Steam login image */

    /* Same height as the footer, but account for the different padding */
    max-height: calc((38px + 4px * 2) - (10px * 2));
    height: calc((38px + 4px * 2) - (10px * 2));
}

#user-area {
    position: static; /* Unnecessary but feels safer than absolute */
    visibility: hidden; /* Hide all the login text */
    float: right; /* Move the username to the right */
    height: 100%; /* Important for centring the username later */
}

/* Cancel out the hidden visibility only for the children */
#user-area > * {
    visibility: visible;
}

/*
This is the container for the Steam login image.
Move it to the same position as the footer and
Set its dimensions to be the same as the footer.
*/
#login-link {
    /*
    Absolute has to be used because its normally positioned too
    far down due to the hidden text above displacing the image.
    */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    height: 100%;
    width: 100%;
}

/* Move the Steam login image to the right end of the footer */
#login-link > img:nth-child(1) {
    /* Already has a top margin of 10px; copy that for the other sides */
    margin-right: 10px;
    margin-bottom: 10px;

    height: calc(100% - 10px * 2); /* Subtract the top and bottom margins */
    float: right;
}

/* Vertically centre the username */
#user-area .dropdown {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Copy the btn-clear style for the username */
#user-name {
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #cfcfcf;
    padding: 0px 4px; /* Remove vertical padding; it makes it too tall */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    /* margin: 1px 3px; */
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    cursor: pointer;
    white-space: nowrap;
}

/* Copy the btn-clear style for the username */
#user-name:hover {
    background-color: #a7a7a7;
    color: white;
}

/*
Increase the space between the username and the Steam logo.
Looks weird with the default margin of 2px despite other buttons using that.
Maybe it's cause the image is on the right in this case.
*/
#user-name > img {
    margin-left: 6px !important;
}

/*
Align the dropdown popup to the bottom right corner,
with the bottom edge touching the top of the footer
*/
#user-area .dropdown-content {
    position: fixed;
    bottom: calc(38px + 4px * 2);
    /* Add padding of footer */
    right: 0;
}

/* Make the app take up the full height of the viewport */
#appContainer {
    position: static;
    height: calc(100vh - 38px - 4px * 2); /* Subtract height of footer */
}

/* Make the loading overlay take up the full height of the viewport */
#loading {
    position: fixed;
    top: unset;
    bottom: unset;
    height: calc(100vh - 38px - 4px * 2); /* Subtract height of footer */
}

/*
When panning starts, #outlineContainer becomes a child of this element.
This element is the first child, just like #outlineContainer normally is.
This means the style applies to both the wrapper div and #outlineContainer.
*/
#graphContainer > div:first-child {
    left: unset !important;
    top: 10px !important;
    right: 10px !important;
    bottom: unset !important;
    position: absolute !important;
}

#outlineContainer {
    position: static !important;  /* This only applies when panning */
    background-color: rgba(255, 255, 255, 0.85);
}

/* Remove size restrictions to prevent scrollbars in small viewports */
#toolbarContainer,
#graphContainer {
    min-width: unset;
    max-height: unset;
}

/*
Reset the tooltip position when its hidden.
When the tooltip is hidden, it remains in its last visible position.
When resizing the viewport, the tooltip will remain at its old position,
causing a scroll bar to appear.
*/
.mxTooltip[style*="visibility: hidden"] {
    left: unset !important;
    top: unset !important;
}

/* Prevent the user area from overlapping the logo */
@media screen and (max-width: 540px) {
    #footer-logo {
        display: none;
    }
}