Update Healer Man server
This commit is contained in:
phenom committed
1 parent
cc3b2fa4d5
commit
daa417ec17
46 files changed
+1334
-172
No files matched your search
+214
-42
@@ -1965,45 +1965,135 @@ html[data-display-layout="thor-preview"], html[data-display-layout="thor-preview
|
||||
}
|
||||
|
||||
/* Login */
|
||||
.login-screen { display: grid; grid-template-columns: minmax(340px, 1fr) 390px; grid-template-rows: 58px 1fr 28px; column-gap: clamp(24px, 5vw, 72px); }
|
||||
.login-screen > .front-brand { grid-column: 1; grid-row: 1; align-self: start; }
|
||||
.login-hero { grid-column: 1; grid-row: 2; align-self: center; max-width: 500px; padding: 0 0 18px clamp(6px, 3vw, 36px); }
|
||||
.login-rune { display: flex; width: 210px; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--front-green-bright); }
|
||||
.login-rune i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(195, 222, 145, 0.46)); }
|
||||
.login-rune i:last-child { transform: scaleX(-1); }
|
||||
.login-rune span { font-family: Georgia, serif; font-size: 24px; text-shadow: 0 0 18px rgba(180, 225, 119, 0.55); }
|
||||
.login-hero h1 { margin: 8px 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(35px, 5.5vw, 64px); font-weight: 400; line-height: 0.92; letter-spacing: -0.035em; }
|
||||
.login-hero h1 em { color: var(--front-green-bright); font-weight: 400; }
|
||||
.login-hero > p:not(.front-kicker) { max-width: 470px; margin: 0; color: var(--front-dim); font-size: 12px; line-height: 1.55; }
|
||||
.login-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
|
||||
.login-pill-row span { padding: 5px 8px; border: 1px solid rgba(193, 216, 164, 0.14); border-radius: 999px; color: #b7c5b3; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
.login-form {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
align-self: center;
|
||||
padding: clamp(21px, 3vw, 31px);
|
||||
border: 1px solid var(--front-line);
|
||||
border-radius: 18px 5px 18px 5px;
|
||||
background: linear-gradient(150deg, rgba(13, 30, 22, 0.95), rgba(6, 15, 11, 0.94));
|
||||
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
|
||||
.login-screen {
|
||||
--login-ice: #9fd9df;
|
||||
--login-gold: #d2b16d;
|
||||
--login-gold-bright: #f1d99a;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(98px, 1fr) auto 25px;
|
||||
place-items: center;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(2, 8, 16, .22), rgba(2, 7, 12, .12) 36%, rgba(1, 5, 9, .72) 100%),
|
||||
radial-gradient(circle at 50% 42%, transparent 0 22%, rgba(0, 4, 8, .34) 72%),
|
||||
url("./assets/ui/login/frozen-gateway.webp") center 43% / cover no-repeat,
|
||||
#071019;
|
||||
color: #f4eddd;
|
||||
}
|
||||
.login-form header { margin-bottom: 15px; }
|
||||
.login-form header span { display: block; color: var(--front-gold); font-size: 8px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; }
|
||||
.login-form header strong { display: block; margin: 4px 0; font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
|
||||
.login-form header small { color: var(--front-dim); font-size: 9px; }
|
||||
.login-form > label, .appearance-controls > label { display: block; margin: 8px 0 4px; color: #bdc9ba; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
.login-form > input, .appearance-controls > input {
|
||||
.login-screen::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: linear-gradient(90deg, rgba(1,4,8,.48), transparent 24% 76%, rgba(1,4,8,.48));
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
.login-screen .front-grain { opacity: .1; mix-blend-mode: screen; }
|
||||
.login-title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
align-self: start;
|
||||
min-width: min(360px, 90vw);
|
||||
padding-top: clamp(2px, 1.8vh, 15px);
|
||||
text-align: center;
|
||||
filter: drop-shadow(0 4px 10px rgba(0,0,0,.9));
|
||||
}
|
||||
.login-title__crest {
|
||||
display: grid;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 0 auto -8px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(217,190,124,.62);
|
||||
background: radial-gradient(circle, #314956 0 37%, #15252e 38% 53%, #8d7748 55% 58%, #1a1714 60%);
|
||||
box-shadow: 0 0 0 3px rgba(8,15,19,.78), 0 0 24px rgba(120,205,217,.34), inset 0 0 12px rgba(150,224,232,.3);
|
||||
color: #c6edf0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.login-title__crest i { font: normal 24px Georgia, serif; text-shadow: 0 0 8px #7ed7df; transform: rotate(-45deg); }
|
||||
.login-title p { margin: 10px 0 0; color: var(--login-gold-bright); font-size: 8px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; }
|
||||
.login-title h1 {
|
||||
margin: 0;
|
||||
color: #f6ebd0;
|
||||
font: 600 clamp(35px, 5vw, 54px) Georgia, "Times New Roman", serif;
|
||||
line-height: .95;
|
||||
letter-spacing: -.055em;
|
||||
text-shadow: 0 2px 0 #4b381d, 0 0 4px #000, 0 0 24px rgba(136,210,218,.25);
|
||||
}
|
||||
.login-title h1 em { color: var(--login-ice); font-weight: 400; }
|
||||
.login-title small { color: #c8d4d2; font-family: Georgia, serif; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 5px #000; }
|
||||
.login-form {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
grid-row: 2;
|
||||
width: min(420px, calc(100vw - 28px));
|
||||
align-self: end;
|
||||
padding: 22px 24px 15px;
|
||||
border: 1px solid rgba(176, 146, 84, .74);
|
||||
border-radius: 3px 3px 13px 13px;
|
||||
background:
|
||||
linear-gradient(145deg, rgba(255,255,255,.045), transparent 30%),
|
||||
linear-gradient(180deg, rgba(21,30,33,.97), rgba(7,13,17,.98));
|
||||
box-shadow: 0 0 0 3px rgba(4,9,12,.86), 0 0 0 4px rgba(91,78,51,.7), 0 24px 60px rgba(0,0,0,.72), inset 0 0 38px rgba(85,122,128,.08);
|
||||
backdrop-filter: blur(7px);
|
||||
}
|
||||
.login-form::before, .login-form::after {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border-color: rgba(222,190,121,.55);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
.login-form::before { left: 7px; border-top: 1px solid; border-left: 1px solid; }
|
||||
.login-form::after { right: 7px; border-top: 1px solid; border-right: 1px solid; }
|
||||
.login-form__ornament { position: absolute; top: -10px; left: 50%; display: flex; width: 150px; align-items: center; gap: 7px; color: var(--login-gold-bright); transform: translateX(-50%); }
|
||||
.login-form__ornament i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--login-gold)); }
|
||||
.login-form__ornament i:last-child { transform: scaleX(-1); }
|
||||
.login-form__ornament span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(215,183,113,.7); background: #101a1e; color: transparent; transform: rotate(45deg); }
|
||||
.login-form__ornament span::after { color: var(--login-gold-bright); content: "+"; font: 15px Georgia, serif; transform: rotate(-45deg); }
|
||||
.login-form header { margin-bottom: 11px; text-align: center; }
|
||||
.login-form header span { display: block; color: var(--login-ice); font-size: 8px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
|
||||
.login-form header strong { display: block; margin: 2px 0; color: #f4e5c4; font: 400 24px Georgia, serif; text-shadow: 0 1px 0 #000; }
|
||||
.login-form header small { color: #9eacac; font-size: 9px; }
|
||||
.login-form > label { display: block; margin: 7px 0 4px; color: #d1c4a4; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
|
||||
.login-form > input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
height: 40px;
|
||||
padding: 0 11px;
|
||||
border: 1px solid rgba(200, 219, 177, 0.18);
|
||||
border-radius: 7px;
|
||||
background: rgba(2, 8, 5, 0.66);
|
||||
color: var(--front-cream);
|
||||
border: 1px solid rgba(171,151,104,.48);
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(180deg, rgba(1,5,8,.9), rgba(8,16,20,.82));
|
||||
color: #f5ecda;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
box-shadow: inset 0 2px 7px rgba(0,0,0,.65);
|
||||
}
|
||||
.login-form__actions { display: grid; gap: 7px; margin-top: 15px; }
|
||||
.login-form > input::placeholder { color: #657476; }
|
||||
.login-form > input.is-login-field-active { border-color: var(--login-gold-bright); box-shadow: inset 0 2px 7px rgba(0,0,0,.65), 0 0 0 2px rgba(225,190,110,.14), 0 0 15px rgba(130,211,219,.13); }
|
||||
.login-form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
|
||||
.login-form__actions .front-button {
|
||||
min-height: 45px;
|
||||
border-color: rgba(163,143,94,.38);
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(180deg, rgba(50,61,61,.8), rgba(20,29,31,.86));
|
||||
}
|
||||
.login-form__actions .front-button:hover { border-color: rgba(224,192,119,.68); background: linear-gradient(180deg, rgba(61,74,73,.9), rgba(24,35,37,.92)); }
|
||||
.login-form__actions .front-button--primary { grid-column: 1 / -1; justify-content: center; border-color: rgba(226,194,118,.76); background: linear-gradient(180deg, #806936, #473817); box-shadow: inset 0 1px 0 rgba(255,236,179,.22), 0 0 16px rgba(193,157,80,.08); text-align: center; }
|
||||
.login-form__actions .front-button--primary:hover { background: linear-gradient(180deg, #967b40, #55421c); }
|
||||
.login-form__actions .front-button--primary small { color: #d3c398; }
|
||||
.login-form__actions .front-button--quiet { border-color: rgba(117,151,156,.24); background: linear-gradient(180deg, rgba(30,48,53,.72), rgba(13,25,29,.78)); }
|
||||
.login-form footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(171,151,104,.18); color: #7f9294; font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
|
||||
.login-form footer span { color: #a9c5c5; }
|
||||
.login-form footer i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #73b68b; box-shadow: 0 0 7px #73b68b; }
|
||||
.login-lore { position: relative; z-index: 2; grid-row: 3; margin: 9px 0 0; color: rgba(225,224,211,.7); font: italic 9px Georgia, serif; letter-spacing: .08em; text-shadow: 0 2px 5px #000; }
|
||||
.login-screen .controller-legend { color: #8e9b9d; text-shadow: 0 1px 4px #000; }
|
||||
.login-screen .controller-legend b { color: var(--login-gold-bright); }
|
||||
.login-screen :is(button, input):focus-visible, .login-screen .is-controller-selected { outline-color: var(--login-gold-bright) !important; box-shadow: 0 0 0 3px rgba(225,190,110,.2), 0 0 15px rgba(130,211,219,.2) !important; }
|
||||
.single-display-frame:has(.login-screen) .single-context-toggle { border-color: rgba(176,146,84,.58); border-radius: 3px; background: rgba(11,20,24,.94); box-shadow: 0 0 0 2px rgba(4,9,12,.72), 0 12px 35px rgba(0,0,0,.55); }
|
||||
.single-display-frame:has(.login-screen) .single-context-toggle small { color: #f1d99a; }
|
||||
.appearance-controls > label { display: block; margin: 8px 0 4px; color: #bdc9ba; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
|
||||
.appearance-controls > input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid rgba(200,219,177,.18); border-radius: 7px; background: rgba(2,8,5,.66); color: var(--front-cream); font: inherit; font-size: 12px; }
|
||||
|
||||
/* Character silhouette preview */
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||
@@ -2184,7 +2274,7 @@ html[data-display-layout="thor-preview"], html[data-display-layout="thor-preview
|
||||
.dungeon-select-list > header { position: relative; }
|
||||
.dungeon-select-list > header h1 { margin: 3px 0 10px; font: 28px Georgia, serif; font-weight: 400; }
|
||||
.dungeon-select-list > header > small { position: absolute; right: 0; bottom: 14px; color: var(--front-dim); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
|
||||
.dungeon-category-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 3px 10px; }
|
||||
.dungeon-category-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 3px 10px; }
|
||||
.dungeon-category-tab { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border: 1px solid rgba(204,224,180,.13); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
|
||||
.dungeon-category-tab strong { color: var(--front-dim); font: 14px Georgia, serif; font-weight: 400; }
|
||||
.dungeon-category-tab small { color: var(--front-dim); font-size: 6px; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
|
||||
@@ -2446,17 +2536,74 @@ html[data-display-layout="thor-preview"], html[data-display-layout="thor-preview
|
||||
.companion-panel > header > b { color: var(--front-green-bright); font-size: 7px; letter-spacing: .15em; }
|
||||
.companion-panel > main { min-height: 0; overflow: hidden; }
|
||||
.companion-panel > footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--front-line); color: var(--front-dim); font-size: 7px; letter-spacing: .08em; }
|
||||
.companion-login {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(3,8,13,.78), rgba(2,7,11,.94)),
|
||||
url("./assets/ui/login/frozen-gateway.webp") center / cover no-repeat,
|
||||
#071019;
|
||||
}
|
||||
.companion-login .front-grain { opacity: .08; }
|
||||
.companion-login .front-brand .brand-sigil { border-color: rgba(217,190,124,.5); color: #a9e0e4; box-shadow: inset 0 0 16px rgba(114,199,207,.18); }
|
||||
.companion-login :is(.front-brand small, .companion-kicker) { color: #f1d99a; }
|
||||
.companion-login > header > b { color: #9fd9df; }
|
||||
.companion-login > main { display: grid; align-content: center; padding: 12px 24px; }
|
||||
.companion-login h2 { max-width: 390px; margin: 6px 0 15px; font: 28px Georgia, serif; }
|
||||
.companion-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.companion-feature-grid article { display: flex; min-height: 100px; flex-direction: column; justify-content: space-between; padding: 11px; border: 1px solid var(--front-line); border-radius: 9px; background: rgba(255,255,255,.025); }
|
||||
.companion-feature-grid article > b { color: var(--front-gold); font: 18px Georgia, serif; }
|
||||
.companion-login .companion-feature-grid article { border-color: rgba(176,146,84,.3); border-radius: 3px; background: linear-gradient(180deg, rgba(31,42,44,.86), rgba(10,18,21,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
|
||||
.companion-login .companion-feature-grid article > b { color: #d2b16d; }
|
||||
.companion-feature-grid article span { display: flex; flex-direction: column; }
|
||||
.companion-feature-grid article strong { font-size: 9px; }
|
||||
.companion-feature-grid article small { margin-top: 3px; color: var(--front-dim); font-size: 7px; line-height: 1.35; }
|
||||
.companion-login-keyboard { grid-template-rows: 44px minmax(0, 1fr) 31px; }
|
||||
.companion-login-keyboard > main { display: grid; grid-template-rows: 48px minmax(0, 1fr); align-content: stretch; gap: 6px; padding: 7px 0; }
|
||||
.login-keyboard-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
|
||||
.login-keyboard-fields button {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 5px 9px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(159,217,223,.2);
|
||||
border-radius: 3px;
|
||||
background: rgba(5,13,17,.86);
|
||||
color: #899a9c;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.login-keyboard-fields button.is-active { border-color: rgba(241,217,154,.78); color: #f4eddd; background: linear-gradient(180deg, rgba(45,55,55,.9), rgba(17,27,30,.92)); box-shadow: inset 0 0 14px rgba(128,200,207,.08); }
|
||||
.login-keyboard-fields small, .login-keyboard-fields strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.login-keyboard-fields small { color: #9fd9df; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
|
||||
.login-keyboard-fields strong { margin-top: 2px; font: 13px Georgia, serif; }
|
||||
.login-keyboard-grid { display: grid; min-height: 0; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 4px; }
|
||||
.login-keyboard-key {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 2px;
|
||||
border: 1px solid rgba(160,182,180,.25);
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(180deg, rgba(43,54,56,.94), rgba(17,26,29,.96));
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 3px rgba(0,0,0,.32);
|
||||
color: #f1ead8;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
.login-keyboard-key:hover { border-color: rgba(241,217,154,.58); background: linear-gradient(180deg, rgba(58,70,71,.96), rgba(23,34,37,.98)); }
|
||||
.login-keyboard-key.is-controller-selected { z-index: 2; border-color: #f1d99a; outline: 2px solid #f1d99a !important; outline-offset: -2px; background: linear-gradient(180deg, #806936, #473817); box-shadow: inset 0 1px 0 rgba(255,236,179,.24), 0 0 13px rgba(149,216,222,.32) !important; }
|
||||
.login-keyboard-key.is-unavailable { color: #657174; background: rgba(10,17,20,.82); }
|
||||
.login-keyboard-key--mode, .login-keyboard-key--field, .login-keyboard-key--space,
|
||||
.login-keyboard-key--backspace, .login-keyboard-key--clear, .login-keyboard-key--done { color: #c7dadd; background: linear-gradient(180deg, rgba(35,57,62,.94), rgba(13,29,33,.96)); }
|
||||
.login-keyboard-key--login { border-color: rgba(226,194,118,.58); color: #fff0c5; background: linear-gradient(180deg, #755f30, #403213); }
|
||||
.login-keyboard-key--create, .login-keyboard-key--offline { border-color: rgba(176,146,84,.38); color: #eadbb8; }
|
||||
.companion-login-keyboard > footer strong { overflow: hidden; color: #9fd9df; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.companion-login-keyboard > footer b { color: #f1d99a; }
|
||||
.companion-roster > main { display: grid; grid-template-columns: 190px 1fr; gap: 11px; padding: 9px 0; }
|
||||
.companion-dungeon-browser { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
|
||||
.companion-category-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
|
||||
.companion-category-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
|
||||
.companion-category-tabs button { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 7px; border: 1px solid rgba(204,224,180,.13); border-radius: 6px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; }
|
||||
.companion-category-tabs button.is-active { border-color: rgba(218,192,102,.52); background: rgba(111,126,66,.22); }
|
||||
.companion-category-tabs strong { color: var(--front-gold); font: 11px Georgia, serif; font-weight: 400; }
|
||||
@@ -2589,10 +2736,17 @@ html[data-display-surface="bottom"] .single-context-toggle { display: none; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.front-surface--top { padding: 11px; }
|
||||
.login-screen { display: block; overflow: auto; }
|
||||
.login-screen > .front-brand { position: absolute; top: 12px; left: 13px; }
|
||||
.login-hero { display: none; }
|
||||
.login-form { width: min(390px, calc(100% - 16px)); margin: 48px auto 28px; padding: 18px; }
|
||||
.login-screen { display: grid; grid-template-rows: minmax(94px, 1fr) auto 62px; overflow: auto; background-position: center 42%; }
|
||||
.login-title { min-width: min(330px, 88vw); padding-top: max(3px, env(safe-area-inset-top)); }
|
||||
.login-title__crest { width: 38px; height: 38px; }
|
||||
.login-title h1 { font-size: clamp(34px, 11vw, 46px); }
|
||||
.login-title small { font-size: 8px; }
|
||||
.login-form { width: min(410px, calc(100vw - 24px)); padding: 20px 17px 13px; }
|
||||
.login-form > input { height: 44px; font-size: 16px; }
|
||||
.login-form__actions .front-button { min-height: 48px; }
|
||||
.login-form__actions .front-button span { font-size: 11px; }
|
||||
.login-form__actions .front-button small { font-size: 7px; }
|
||||
.login-form footer, .login-lore { display: none; }
|
||||
.controller-legend { display: none; }
|
||||
.character-select-screen { display: grid; grid-template-columns: 43% 57%; grid-template-rows: 48px minmax(0,1fr); }
|
||||
.roster-header { grid-column: 1 / 3; }
|
||||
@@ -2692,11 +2846,29 @@ html[data-display-surface="bottom"] .single-context-toggle { display: none; }
|
||||
}
|
||||
|
||||
@media (max-height: 500px) {
|
||||
.login-form { padding: 16px 20px; }
|
||||
.login-form header { margin-bottom: 8px; }
|
||||
.login-form__actions { grid-template-columns: 1fr 1fr 1fr; }
|
||||
.login-screen { grid-template-columns: minmax(190px, .8fr) minmax(380px, 1.2fr); grid-template-rows: 1fr; gap: 20px; overflow: auto; background-position: center 40%; }
|
||||
.login-title { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; padding-left: 10px; }
|
||||
.login-title h1 { font-size: clamp(32px, 5vw, 42px); }
|
||||
.login-form { grid-column: 2; grid-row: 1; align-self: center; width: min(560px, 100%); padding: 16px 20px 11px; }
|
||||
.login-form header { margin-bottom: 7px; }
|
||||
.login-form header strong { font-size: 20px; }
|
||||
.login-form > label { margin-top: 5px; }
|
||||
.login-form > input { height: 36px; }
|
||||
.login-form__actions { grid-template-columns: 1.1fr 1fr 1fr; margin-top: 9px; }
|
||||
.login-form__actions .front-button--primary { grid-column: auto; }
|
||||
.login-form__actions .front-button { min-width: 0; }
|
||||
.login-form__actions small { display: none; }
|
||||
.login-form footer, .login-lore { display: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 620px) and (max-height: 500px) {
|
||||
.login-screen { display: grid; grid-template-columns: 1fr; grid-template-rows: 54px auto; gap: 4px; align-content: center; background-position: center; }
|
||||
.login-title { grid-column: 1; grid-row: 1; align-self: start; display: grid; grid-template-columns: 36px auto; width: min(420px, calc(100vw - 24px)); align-items: center; justify-content: center; gap: 0 12px; padding: 0; }
|
||||
.login-title__crest { grid-row: 1 / 3; width: 32px; height: 32px; margin: 0; }
|
||||
.login-title p { align-self: end; margin: 0; font-size: 6px; text-align: left; }
|
||||
.login-title h1 { align-self: start; font-size: 27px; text-align: left; }
|
||||
.login-title small { display: none; }
|
||||
.login-form { grid-column: 1; grid-row: 2; width: min(480px, calc(100vw - 24px)); }
|
||||
}
|
||||
|
||||
.world-transition {
|
||||
|
||||
Reference in new issue
Block a user