diff --git a/app/overlay.ejs b/app/overlay.ejs index b067cb6..242fe08 100644 --- a/app/overlay.ejs +++ b/app/overlay.ejs @@ -2,7 +2,7 @@ #serverSelectContent { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: center; align-items: center; height: 75%; } @@ -19,19 +19,21 @@ display: flex; flex-direction: column; align-items: center; - overflow-y: scroll; - padding: 0px 5px; - height: 65%; + justify-content: center; + max-height: 65%; + min-height: 40%; } -#serverSelectList::-webkit-scrollbar { +#serverSelectListScrollable { + padding: 0px 5px; + overflow-y: scroll; +} +#serverSelectListScrollable::-webkit-scrollbar { width: 2px; } - -#serverSelectList::-webkit-scrollbar-track { +#serverSelectListScrollable::-webkit-scrollbar-track { display: none; } - -#serverSelectList::-webkit-scrollbar-thumb { +#serverSelectListScrollable::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50); } @@ -42,20 +44,28 @@ display: flex; justify-content: flex-start; align-items: center; - margin: 5px 0px; opacity: 0.6; transition: 0.25s ease; cursor: pointer; position: relative; + background: rgba(131, 131, 131, 0.25); } .serverListing[selected] { cursor: default; - background: rgba(255, 255, 255, 0.25); 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; @@ -105,6 +115,7 @@ padding: 0px 8.1px; cursor: pointer; transition: 0.25s ease; + min-height: 20.67px; } #serverSelectConfirm:hover, #serverSelectConfirm:focus { @@ -207,57 +218,59 @@