"Borrowed" this from epic wolf. Customisation follows.

2022-06-01 13:08:41 +02:00 · 2022-06-01 13:08:41 +02:00 · 52df7b1768
parent ffee939ae6
commit 52df7b1768
1 changed files with 117 additions and 0 deletions
--- a/patches/loginpage.css
+++ b/patches/loginpage.css
@ -0,0 +1,117 @@
+/*
+------------------------------------------
+Prettier login screen by u/TheEpicSnowWolf
+based on code by u/bass-blowfish
+------------------------------------------
+*/
+
+/* CONFIGURATION AREA */
+#join-game, .watermark {
+  /* Replace "url(data:image...)" with "url("PATH_TO YOUR_IMAGE")".
+     Keep as is if you don't want to add images. */
+  --login-world-logo: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
+  --login-footer-logo: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
+
+  /* Change this to adjust the size of the footer logo */
+  --login-footer-logo-height: 25px;
+
+  /* Here you can change the base and hover color for the buttons
+     on the login form. */
+  --login-button-color: rgb(150, 12, 16);
+  --login-button-color-hover: rgb(228, 9, 19);
+
+  /* Change to "inherit" if you want to keep the text title.
+     You then also need to remove the "World Logo" declaration. */
+  --login-show-text-title: none;
+}
+
+/* World Logo - REMOVE THIS IF YOU WANT A TEXT TITLE */
+#join-game #world-title {
+  background: var(--login-world-logo);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  height: 120px !important;
+  border: none;
+  box-shadow: none;
+}
+
+/* Footer Logo */
+body.vtt.players .watermark:before {
+  display: block;
+  content: " ";
+  background: var(--login-footer-logo);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 100%;
+  height: var(--login-footer-logo-height);
+  margin-top: calc(calc(var(--login-footer-logo-height) * -1) - 5px);
+  margin-bottom: 5px;
+}
+
+/* Hide world description and session info */
+#join-game .right.flexcol, #join-game .app:not(#world-title) h1, #join-game .left.flexcol .app:nth-of-type(2) {
+  display: none;
+}
+
+/* World title visibility */
+#join-game #world-title h1 {
+  display: var(--login-show-text-title);
+}
+
+/* Login mask width and position */
+#join-game {
+  width: 400px !important;
+  top: calc(50% - 300px) !important;
+}
+
+/* Restyle inputs */
+#join-game input, #join-game select, #join-game button {
+  min-height: 40px;
+  padding: 10px !important;
+  border: none !important;
+  font-size: 15px;
+  width: 100%;
+}
+
+/* Restyle buttons */
+#join-game button {
+  background: var(--login-button-color);
+  border: none;
+  color: #fff;
+  margin-bottom: 0px !important;
+}
+
+#join-game button:hover {
+  background: var(--login-button-color-hover);
+  box-shadow: none;
+}
+
+/* Top align form labels */
+#join-game .form-group {
+  clear: both;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+  margin-top: 0;
+  overflow: hidden;
+}
+
+#join-game .form-group label {
+  line-height: 31px;
+  width: 100%;
+}
+
+/* Hide placeholder text */
+#join-game input[type="password"]::placeholder {
+  color:transparent;
+}
+
+/* Change login button icon */
+#join-game button[name="join"] i.fas.fa-check {
+  display: none;
+}
+
+#join-game button[name="join"]:after {
+  content: "\1F846";
+}