HeliosLauncher/app/overlay.ejs

<style text="text/css">
#serverSelectContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 75%;
}

#serverSelectHeader {
    font-family: 'Avenir Medium';
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 25px;
}

#serverSelectList {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 65%;
    min-height: 40%;
}
#serverSelectListScrollable {
    padding: 0px 5px;
    overflow-y: scroll;
}
#serverSelectListScrollable::-webkit-scrollbar {
    width: 2px;
}
#serverSelectListScrollable::-webkit-scrollbar-track {
    display: none;
}
#serverSelectListScrollable::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
}

.serverListing {
    border: none;
    padding: 0px;
    width: 375px;
    min-height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    opacity: 0.6;
    transition: 0.25s ease;
    cursor: pointer;
    position: relative;
    background: rgba(131, 131, 131, 0.25);
}
.serverListing[selected] {
    cursor: default;
    opacity: 1.0;
}
.serverListing:hover,
.serverListing:focus {
    outline: none;
    opacity: 1.0;
}
#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) {
    margin: 5px 0px;
}
#serverSelectListScrollable > .serverListing:first-child {
    margin-bottom: 5px;
}
#serverSelectListScrollable > .serverListing:last-child {
    margin-top: 5px;
}

.serverListingImg {
    margin: 0px 10px 0px 5px;
    border: 1px solid #fff;
    height: 50px;
    width: auto;
}

.serverListingDetails {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 50px;
}

.serverListingName {
    font-family: 'Avenir Book';
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.serverListingDescription {
    font-family: 'Avenir Book';
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
    color: #fff;
}

#serverSelectActions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

#serverSelectConfirm {
    background: none;
    border: 1px solid #ffffff;
    color: white;
    font-family: 'Avenir Medium';
    font-weight: bold;
    border-radius: 2px;
    padding: 0px 8.1px;
    cursor: pointer;
    transition: 0.25s ease;
    min-height: 20.67px;
}
#serverSelectConfirm:hover,
#serverSelectConfirm:focus {
    box-shadow: 0px 0px 10px 0px #fff;
    outline: none;
}
#serverSelectConfirm:active {
    border-color: rgba(255, 255, 255, 0.75);
    color: rgba(255, 255, 255, 0.75);
}

#serverSelectCancel {
    font-family: 'Avenir Book';
    font-weight: bold;
    font-size: 10px;
    text-decoration: none;
    padding-top: 2.5px;
    color: rgba(202, 202, 202, 0.75);
    transition: 0.25s ease;
}
#serverSelectCancel:hover {
    color: rgba(255, 255, 255, 0.75);
}
#serverSelectCancel:active {
    color: rgba(165, 165, 165, 0.75);
}

.serverListingInfo {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.serverListingVersion {
    font-size: 10px;
    color: #fff;
    font-family: 'Avenir Book';
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 12px;
    height: 12px;
    border-radius: 2px;
    background: rgba(31, 140, 11, 0.8);
    padding: 0px 2px;
}

.serverListingRevision {
    font-family: 'Avenir Book';
    color: #969696;
    font-size: 10px;
    line-height: 12px;
    padding: 0px 5px;
}

#serverListingStarWrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 12px;
    position: relative;
}

.serverListingStarTooltip {
    visibility: hidden;
    opacity: 0;
    width: 65px;
    background-color: rgba(0, 0, 0, 0.40);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    left: 130%;
    font-family: 'Avenir Book';
    font-size: 10px;
    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
}

.serverListingStarTooltip::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
}

#serverListingStarWrapper:hover .serverListingStarTooltip {
    visibility: visible;
    opacity: 1;
    transition-delay:0s;
}

</style>
<div id="overlayContainer" style="display: none;">
    <div id="serverSelectContent">
        <span id="serverSelectHeader">Available Servers</span>
        <div id="serverSelectList">
            <div id="serverSelectListScrollable">
                <button class="serverListing" selected>
                    <img class="serverListingImg" src="./assets/images/WesterosSealSquare.png"/>
                    <div class="serverListingDetails">
                        <span class="serverListingName">WesterosCraft Production Server</span>
                        <span class="serverListingDescription">Main WesterosCraft server. Connect to enter the Realm.</span>
                        <div class="serverListingInfo">
                            <div class="serverListingVersion">1.11.2</div>
                            <div class="serverListingRevision">3.4.17</div>
                            <div id="serverListingStarWrapper">
                                <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
                                    <defs>
                                        <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
                                    </defs>
                                    <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
                                    <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
                                </svg>
                                <span class="serverListingStarTooltip">Main Server</span>
                            </div>
                        </div>
                    </div>
                </button>
                <button class="serverListing">
                    <img class="serverListingImg" src="./assets/images/testserver.png"/>
                    <div class="serverListingDetails">
                        <span class="serverListingName">WesterosCraft Test Server</span>
                        <span class="serverListingDescription">Main testing server. Experimental changes live here.</span>
                        <div class="serverListingInfo">
                            <div class="serverListingVersion">1.11.2</div>
                            <div class="serverListingRevision">3.6.0</div>
                        </div>
                    </div>
                </button>
                <button class="serverListing">
                    <img class="serverListingImg" src="./assets/images/testserver.png"/>
                    <div class="serverListingDetails">
                        <span class="serverListingName">WesterosCraft 1.12.2 Test Server</span>
                        <span class="serverListingDescription">Tests for our version change to 1.12.2 are live here.</span>
                        <div class="serverListingInfo">
                            <div class="serverListingVersion">1.12.2</div>
                            <div class="serverListingRevision">4.0.1</div>
                        </div>
                    </div>
                </button>
                <button class="serverListing">
                    <img class="serverListingImg" src="./assets/images/testserver.png"/>
                    <div class="serverListingDetails">
                        <span class="serverListingName">EssosCraft Test Server</span>
                        <span class="serverListingDescription">Tests for our next project!</span>
                        <div class="serverListingInfo">
                            <div class="serverListingVersion">1.15.0</div>
                            <div class="serverListingRevision">9.7.2</div>
                        </div>
                    </div>
                </button>
            </div>
        </div>
        <div id="serverSelectActions">
            <button id="serverSelectConfirm">Select</button>
            <a href="javascript:void(0);" id="serverSelectCancel">Cancel</a>
        </div>
    </div>
    <div id="overlayContent" style="display: none;">
        <span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span>
        <span id="overlayDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud..</span>
        <div id="overlayActionContainer">
            <button id="overlayAcknowledge">Conare Iterum</button>
            <a href="javascript:void(0);" id="overlayDismiss" style="display: none;">Dismiss</a>
        </div>
    </div>
</div>