61538fdde5
The server list is now centered. The minimum height was set to 40%, with a maximum of 65%. The UI will now scale to ideally fit the given number of servers. Four servers can be shown before scrolling enables.
291 lines
9.2 KiB
Plaintext
291 lines
9.2 KiB
Plaintext
<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 {
|
|
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 {
|
|
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">
|
|
<div 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>
|
|
</div>
|
|
<div 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>
|
|
</div>
|
|
<div 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>
|
|
</div>
|
|
<div 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>
|
|
</div>
|
|
</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> |