new help section explaining classes and their mechanics
This commit is contained in:
Warren H
+266
-14
@@ -232,6 +232,67 @@ button:focus-visible {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.top-conviction-meter {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
padding: 6px 8px 7px;
|
||||
border: 1px solid rgba(242, 166, 90, 0.34);
|
||||
border-left: 2px solid #d98b43;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, rgba(34, 20, 8, 0.92), rgba(14, 17, 12, 0.76));
|
||||
box-shadow: inset 12px 0 20px rgba(242, 166, 90, 0.08);
|
||||
pointer-events: none;
|
||||
text-shadow: 0 1px 3px #000;
|
||||
}
|
||||
|
||||
.top-conviction-meter > span:first-child {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.top-conviction-meter b {
|
||||
color: #f3bd79;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.top-conviction-meter small {
|
||||
color: #fff0bd;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.top-conviction-pips {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.top-conviction-pips i {
|
||||
height: 5px;
|
||||
border: 1px solid rgba(232, 188, 116, 0.24);
|
||||
border-radius: 1px;
|
||||
background: rgba(46, 31, 15, 0.85);
|
||||
transform: skewX(-12deg);
|
||||
}
|
||||
|
||||
.top-conviction-pips i.is-filled {
|
||||
border-color: #ffd37a;
|
||||
background: linear-gradient(90deg, #dc8737, #ffd77d);
|
||||
box-shadow: 0 0 7px rgba(255, 190, 84, 0.7);
|
||||
}
|
||||
|
||||
.top-conviction-meter.is-full {
|
||||
border-color: rgba(255, 216, 114, 0.72);
|
||||
border-left-color: #ffe091;
|
||||
box-shadow: inset 12px 0 22px rgba(255, 186, 71, 0.13), 0 0 10px rgba(255, 196, 88, 0.16);
|
||||
}
|
||||
|
||||
.top-party-member {
|
||||
position: relative;
|
||||
min-height: 42px;
|
||||
@@ -258,6 +319,17 @@ button:focus-visible {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.top-party-member.is-beacon {
|
||||
border-color: rgba(255, 218, 105, 0.7);
|
||||
border-right-color: #ffdf79;
|
||||
background: linear-gradient(90deg, rgba(46, 39, 13, 0.94), rgba(18, 23, 13, 0.78));
|
||||
box-shadow: inset -10px 0 18px rgba(255, 218, 92, 0.12), 0 0 10px rgba(255, 216, 89, 0.2);
|
||||
}
|
||||
|
||||
.top-party-member.is-beacon .portrait-dot {
|
||||
box-shadow: 0 0 9px rgba(255, 228, 132, 0.72), inset 0 0 8px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.portrait-dot {
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
@@ -354,6 +426,7 @@ button:focus-visible {
|
||||
}
|
||||
|
||||
.renew-pip { background: #5bd58e; color: #062012; }
|
||||
.beacon-pip { background: #ffe17a; color: #382b05; box-shadow: 0 0 9px rgba(255, 224, 116, 0.88); }
|
||||
.debuff-pip { background: #f05b41; color: white; box-shadow: 0 0 7px #d84b35; }
|
||||
.barrier-pip { background: #f0ce61; color: #2e2508; box-shadow: 0 0 7px rgba(240, 206, 97, 0.75); }
|
||||
.tank-aura-pip { background: #68bdf0; color: #062132; box-shadow: 0 0 7px rgba(104, 189, 240, 0.75); }
|
||||
@@ -835,6 +908,14 @@ button:focus-visible {
|
||||
|
||||
.party-frame:hover { border-color: rgba(232, 200, 114, 0.35); }
|
||||
.party-frame.is-selected { border-color: rgba(232, 200, 114, 0.66); border-left-color: var(--gold); background: linear-gradient(90deg, rgba(65, 57, 29, 0.42), rgba(12, 26, 22, 0.9)); transform: translateX(2px); }
|
||||
.party-frame.is-beacon {
|
||||
border-color: rgba(255, 218, 105, 0.62);
|
||||
border-right-color: #ffdf79;
|
||||
background: linear-gradient(90deg, rgba(52, 44, 15, 0.94), rgba(18, 29, 19, 0.88));
|
||||
box-shadow: inset -14px 0 20px rgba(255, 216, 89, 0.11), 0 0 9px rgba(255, 218, 105, 0.16);
|
||||
}
|
||||
.party-frame.is-beacon.is-selected { border-left-color: #fff0a8; }
|
||||
.party-frame.is-beacon .party-avatar { box-shadow: 0 0 10px rgba(255, 226, 125, 0.62), inset 0 0 12px rgba(255, 255, 255, 0.16); }
|
||||
.party-frame.is-down { filter: grayscale(0.9); opacity: 0.48; }
|
||||
|
||||
.party-avatar {
|
||||
@@ -908,6 +989,7 @@ button:focus-visible {
|
||||
}
|
||||
|
||||
.shield-effect { border: 1px solid #63bfff; color: #9edbff; background: #153d58; }
|
||||
.beacon-effect { border: 1px solid #ffe078; color: #fff2b0; background: #5c4912; box-shadow: 0 0 8px rgba(255, 224, 120, 0.7); }
|
||||
.renew-effect { border: 1px solid #59c888; color: #b5f1cd; background: #163e29; }
|
||||
.earth-shield-effect { border: 1px solid #d2b66c; color: #fff0ae; background: #51451b; }
|
||||
.spirit-link-effect { border: 1px solid #a28cff; color: #e2d8ff; background: #352759; box-shadow: 0 0 7px rgba(162, 140, 255, 0.5); }
|
||||
@@ -1526,6 +1608,11 @@ button:focus-visible {
|
||||
.screen-label small { display: none; }
|
||||
.display { box-shadow: 0 0 0 3px #080d0c, 0 0 0 4px rgba(152, 181, 171, 0.1), 0 12px 35px rgba(0,0,0,0.55); }
|
||||
.top-party { width: 25%; gap: 2px; }
|
||||
.top-conviction-meter { gap: 3px; padding: 3px 4px 4px; }
|
||||
.top-conviction-meter b { font-size: 5px; }
|
||||
.top-conviction-meter small { font-size: 6px; }
|
||||
.top-conviction-pips { gap: 2px; }
|
||||
.top-conviction-pips i { height: 3px; }
|
||||
.top-party-member { min-height: 29px; grid-template-columns: 19px 1fr; gap: 4px; padding: 2px 4px 4px 2px; }
|
||||
.portrait-dot { width: 18px; height: 18px; font-size: 8px; }
|
||||
.top-party-copy strong { font-size: 7px; }
|
||||
@@ -2035,21 +2122,30 @@ button:focus-visible {
|
||||
.home-header > span { margin-left: auto; color: #8fa39b; font-size: 10px; }
|
||||
.home-header > span b { color: #dce9e4; }
|
||||
.home-header > i { color: #6ecaa7; font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: 0.08em; }
|
||||
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 78px); grid-auto-rows: 78px; gap: 10px; margin-top: 18px; }
|
||||
.mode-card { position: relative; display: grid; grid-template-columns: 54px 1fr 17px; align-items: center; gap: 12px; padding: 13px; overflow: hidden; text-align: left; }
|
||||
.home-mode-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
|
||||
.home-mode-section { --mode-section-color: var(--teal); min-width: 0; padding: 8px; border: 1px solid rgba(150,190,175,.19); border-top: 2px solid var(--mode-section-color); background: linear-gradient(145deg, color-mix(in srgb, var(--mode-section-color), transparent 94%), rgba(4,13,11,.72)); }
|
||||
.home-mode-section.is-pvp { --mode-section-color: #e47ba5; }
|
||||
.home-mode-section > header { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
|
||||
.home-mode-section > header > span { display: grid; }
|
||||
.home-mode-section > header small { color: #70857d; font-size: 6px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
|
||||
.home-mode-section > header strong { color: var(--mode-section-color); font: 600 12px "Cinzel", serif; letter-spacing: .07em; text-transform: uppercase; }
|
||||
.home-mode-section > header > b { color: #71867e; font-size: 6px; letter-spacing: .1em; text-transform: uppercase; }
|
||||
.mode-grid { display: grid; gap: 6px; margin-top: 6px; }
|
||||
.mode-grid-pve { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 61px); }
|
||||
.mode-grid-pvp { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, 61px); }
|
||||
.mode-card { position: relative; min-width: 0; display: grid; grid-template-columns: 37px minmax(0, 1fr) 10px; align-items: center; gap: 7px; padding: 7px; overflow: hidden; text-align: left; }
|
||||
.mode-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(110deg, rgba(69,153,131,0.13), transparent 60%); pointer-events: none; }
|
||||
.home-mode-section.is-pvp .mode-card::after { background: linear-gradient(110deg, rgba(228,123,165,.13), transparent 64%); }
|
||||
.home-mode-section.is-pvp .mode-card > i { border-color: rgba(228,123,165,.5); color: #f0a1bf; }
|
||||
.mode-card-blockbreaker::after { background: linear-gradient(110deg, rgba(54,217,239,.15), rgba(232,90,169,.1) 54%, rgba(147,219,84,.12)); }
|
||||
.mode-card-blockbreaker > i { border-radius: 5px; color: #baf77e; box-shadow: inset 0 0 13px rgba(54,217,239,.09); }
|
||||
.mode-card-aether-assault::after { background: linear-gradient(110deg, rgba(66, 222, 242, .18), rgba(100, 110, 225, .11) 62%, transparent); }
|
||||
.mode-card-aether-assault > i { border-radius: 5px; color: #8cf5ff; box-shadow: inset 0 0 13px rgba(66, 222, 242, .1); }
|
||||
.mode-card.is-wide { grid-row: 1 / 3; }
|
||||
.mode-card > i { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(232,200,114,0.42); border-radius: 50%; color: var(--gold); background: rgba(2,9,7,0.45); font-family: "Cinzel", serif; font-size: 20px; font-style: normal; }
|
||||
.mode-card.is-wide > i { width: 64px; height: 64px; font-size: 27px; }
|
||||
.mode-card > i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(232,200,114,0.42); border-radius: 50%; color: var(--gold); background: rgba(2,9,7,0.45); font-family: "Cinzel", serif; font-size: 15px; font-style: normal; }
|
||||
.mode-card > span { z-index: 1; display: flex; flex-direction: column-reverse; }
|
||||
.mode-card small { color: #72887f; font-size: 8px; text-transform: uppercase; }
|
||||
.mode-card strong { font-family: "Cinzel", serif; font-size: 14px; font-weight: 500; }
|
||||
.mode-card.is-wide strong { font-size: 19px; }
|
||||
.mode-card > b { color: var(--gold); font-size: 21px; font-weight: 400; }
|
||||
.mode-card small { overflow: hidden; color: #72887f; font-size: 6px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
||||
.mode-card strong { overflow: hidden; font-family: "Cinzel", serif; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mode-card > b { color: var(--gold); font-size: 16px; font-weight: 400; }
|
||||
.home-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
|
||||
.home-secondary-actions button { min-height: 58px; display: grid; grid-template-columns: 34px 1fr 12px; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; }
|
||||
.home-secondary-actions button > i { color: var(--teal); font-size: 20px; font-style: normal; }
|
||||
@@ -2094,6 +2190,119 @@ button:focus-visible {
|
||||
.change-save span { font-size: 10px; font-weight: 700; }
|
||||
.change-save small { color: #647971; font-size: 7px; }
|
||||
|
||||
/* Class field guide */
|
||||
|
||||
.class-help-surface { padding: 0 24px 18px; }
|
||||
.class-help-header { height: 58px; grid-template-columns: 176px minmax(0, 1fr) auto auto; }
|
||||
.class-help-header > small { color: #71877e; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
|
||||
|
||||
.guide-class-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
|
||||
.guide-class-tabs button {
|
||||
--guide-color: var(--gold);
|
||||
min-width: 0;
|
||||
height: 50px;
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 5px 7px;
|
||||
text-align: left;
|
||||
}
|
||||
.guide-class-tabs button > i { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--guide-color), transparent 36%); border-radius: 50%; color: var(--guide-color); font: normal 13px "Cinzel", serif; }
|
||||
.guide-class-tabs button > span { min-width: 0; display: grid; }
|
||||
.guide-class-tabs strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.guide-class-tabs small { overflow: hidden; color: #657a72; font-size: 6px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
||||
.guide-class-tabs button.is-selected { border-color: color-mix(in srgb, var(--guide-color), transparent 26%); background: linear-gradient(135deg, color-mix(in srgb, var(--guide-color), transparent 86%), rgba(6, 17, 14, .9)); }
|
||||
|
||||
.guide-class-intro {
|
||||
--guide-color: var(--gold);
|
||||
min-height: 64px;
|
||||
display: grid;
|
||||
grid-template-columns: 45px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
margin-top: 8px;
|
||||
padding: 8px 12px;
|
||||
border-left: 3px solid var(--guide-color);
|
||||
background: linear-gradient(90deg, color-mix(in srgb, var(--guide-color), transparent 89%), rgba(6, 17, 14, .72));
|
||||
}
|
||||
.guide-class-intro > i { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--guide-color), transparent 35%); color: var(--guide-color); font: normal 21px "Cinzel", serif; transform: rotate(45deg); }
|
||||
.guide-class-intro > span { min-width: 0; display: grid; }
|
||||
.guide-class-intro small { color: var(--guide-color); font-size: 7px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
|
||||
.guide-class-intro h2 { margin: 1px 0; font: 500 14px "Cinzel", serif; }
|
||||
.guide-class-intro p { margin: 0; overflow: hidden; color: #81968e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.guide-class-intro > b { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--guide-color), transparent 70%); color: #aebfb8; background: rgba(3, 11, 9, .5); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
|
||||
|
||||
.guide-ability-grid { height: calc(100% - 206px); min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
|
||||
.guide-ability-card {
|
||||
--ability-color: var(--gold);
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
gap: 5px 9px;
|
||||
padding: 9px;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.guide-ability-card::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--ability-color), transparent 87%), transparent 45%); }
|
||||
.guide-ability-card.is-selected { border-color: color-mix(in srgb, var(--ability-color), transparent 24%); box-shadow: inset 3px 0 var(--ability-color); background: linear-gradient(120deg, color-mix(in srgb, var(--ability-color), transparent 88%), rgba(7, 18, 15, .92)); }
|
||||
.guide-ability-icon { position: relative; z-index: 1; align-self: start; display: grid; justify-items: center; gap: 4px; }
|
||||
.guide-ability-icon > b { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ability-color), transparent 36%); border-radius: 50%; color: var(--ability-color); background: rgba(2, 9, 7, .62); font: 500 19px "Cinzel", serif; }
|
||||
.guide-ability-icon > small { color: #7b9188; font-size: 7px; font-weight: 700; }
|
||||
.guide-ability-copy { position: relative; z-index: 1; min-width: 0; display: grid; align-content: start; gap: 4px; }
|
||||
.guide-ability-copy > strong { overflow: hidden; font: 500 11px "Cinzel", serif; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
|
||||
.guide-ability-copy > small { display: -webkit-box; overflow: hidden; color: #84978f; font-size: 8px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
|
||||
.guide-ability-meta { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 4px; padding-top: 5px; border-top: 1px solid color-mix(in srgb, var(--ability-color), transparent 82%); }
|
||||
.guide-ability-meta > b { color: #71867e; font-size: 6px; letter-spacing: .06em; text-transform: uppercase; }
|
||||
.class-help-surface > .controller-legend { position: absolute; right: 25px; bottom: 5px; }
|
||||
|
||||
.class-help-context { padding: 0 22px 10px; }
|
||||
.class-help-context .context-header { height: 40px; margin: 0 -22px; padding: 0 22px; }
|
||||
.guide-context-class {
|
||||
--guide-color: var(--gold);
|
||||
min-height: 79px;
|
||||
display: grid;
|
||||
grid-template-columns: 52px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.guide-context-class > i { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--guide-color), transparent 35%); border-radius: 50%; color: var(--guide-color); background: color-mix(in srgb, var(--guide-color), transparent 92%); font: normal 22px "Cinzel", serif; }
|
||||
.guide-context-class > span { min-width: 0; display: grid; }
|
||||
.guide-context-class small { color: var(--guide-color); font-size: clamp(6px, 1.35cqw, 8px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.guide-context-class h2 { margin: 1px 0; font: 500 clamp(13px, 2.7cqw, 17px) "Cinzel", serif; }
|
||||
.guide-context-class p { margin: 1px 0 0; color: #80948d; font-size: clamp(7px, 1.48cqw, 9px); line-height: 1.2; }
|
||||
|
||||
.guide-core-loop { padding: 7px 0; border-bottom: 1px solid var(--line); }
|
||||
.guide-core-loop > header { display: flex; justify-content: space-between; color: #71867e; font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
|
||||
.guide-core-loop > header b { color: var(--gold); }
|
||||
.guide-core-loop > p { min-height: 25px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 6px; margin: 2px 0 0; color: #a4b5ae; font-size: clamp(7px, 1.55cqw, 9px); line-height: 1.15; }
|
||||
.guide-core-loop > p i { color: #72887f; font-size: 7px; font-style: normal; }
|
||||
|
||||
.guide-selected-detail { --ability-color: var(--gold); flex: 1; min-height: 0; padding-top: 7px; overflow: hidden; }
|
||||
.guide-selected-detail > header { min-height: 38px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; }
|
||||
.guide-selected-detail > header > i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ability-color), transparent 32%); border-radius: 50%; color: var(--ability-color); font: normal 16px "Cinzel", serif; }
|
||||
.guide-selected-detail > header > span { display: grid; }
|
||||
.guide-selected-detail > header small { color: #6e827a; font-size: 6px; letter-spacing: .1em; text-transform: uppercase; }
|
||||
.guide-selected-detail h3 { margin: 0; font: 500 clamp(12px, 2.6cqw, 16px) "Cinzel", serif; }
|
||||
.guide-selected-detail > p { margin: 3px 0 5px; color: #aabbb4; font-size: clamp(7px, 1.55cqw, 9px); line-height: 1.2; }
|
||||
.guide-selected-detail > aside { display: grid; grid-template-columns: 47px 1fr; gap: 6px; padding: 5px 7px; border-left: 2px solid var(--ability-color); background: color-mix(in srgb, var(--ability-color), transparent 93%); }
|
||||
.guide-selected-detail > aside b { color: var(--ability-color); font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.guide-selected-detail > aside span { color: #879b93; font-size: clamp(6px, 1.4cqw, 8px); line-height: 1.15; }
|
||||
.guide-synergy-list { display: grid; gap: 3px; margin-top: 5px; }
|
||||
.guide-synergy-list > span { color: #6c8179; font-size: 6px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
|
||||
.guide-synergy-list article { min-height: 34px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid rgba(145, 181, 168, .14); background: rgba(5, 16, 13, .72); }
|
||||
.guide-synergy-list article > i { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ability-color), transparent 58%); border-radius: 50%; color: var(--ability-color); font-size: 10px; font-style: normal; }
|
||||
.guide-synergy-list article > span { min-width: 0; display: grid; }
|
||||
.guide-synergy-list article strong { font-size: clamp(7px, 1.48cqw, 9px); }
|
||||
.guide-synergy-list article small { overflow: hidden; color: #748980; font-size: clamp(6px, 1.28cqw, 8px); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.guide-synergy-list article > b { padding: 2px 4px; color: var(--ability-color); background: color-mix(in srgb, var(--ability-color), transparent 91%); font-size: 5px; letter-spacing: .06em; }
|
||||
|
||||
/* Profile */
|
||||
|
||||
.profile-surface { padding: 0 30px; }
|
||||
@@ -2470,11 +2679,19 @@ button:focus-visible {
|
||||
.version-actions button small { font-size: 6px; }
|
||||
.home-header { height: 35px; }
|
||||
.home-header > span, .home-header > i { font-size: 5px; }
|
||||
.mode-grid { grid-template-rows: repeat(2, 43px); grid-auto-rows: 43px; gap: 5px; margin-top: 6px; }
|
||||
.mode-card { grid-template-columns: 25px 1fr 8px; gap: 4px; padding: 4px; }
|
||||
.mode-card > i, .mode-card.is-wide > i { width: 23px; height: 23px; font-size: 10px; }
|
||||
.mode-card strong, .mode-card.is-wide strong { font-size: 8px; }
|
||||
.mode-card small { font-size: 5px; }
|
||||
.home-mode-sections { gap: 5px; margin-top: 5px; }
|
||||
.home-mode-section { padding: 4px; }
|
||||
.home-mode-section > header { min-height: 17px; gap: 3px; }
|
||||
.home-mode-section > header small,
|
||||
.home-mode-section > header > b { font-size: 4px; }
|
||||
.home-mode-section > header strong { font-size: 7px; }
|
||||
.mode-grid { gap: 3px; margin-top: 3px; }
|
||||
.mode-grid-pve,
|
||||
.mode-grid-pvp { grid-template-rows: repeat(3, 39px); }
|
||||
.mode-card { grid-template-columns: 25px minmax(0, 1fr) 7px; gap: 4px; padding: 4px; }
|
||||
.mode-card > i { width: 23px; height: 23px; font-size: 10px; }
|
||||
.mode-card strong { font-size: 7px; }
|
||||
.mode-card small { font-size: 4px; }
|
||||
.home-secondary-actions { gap: 5px; margin-top: 5px; }
|
||||
.home-secondary-actions button { min-height: 34px; grid-template-columns: 18px 1fr 6px; gap: 4px; padding: 3px 6px; }
|
||||
.home-secondary-actions button > i { font-size: 10px; }
|
||||
@@ -2759,6 +2976,41 @@ button:focus-visible {
|
||||
.gear-passive-ability-filter button { min-height: 14px; padding: 1px 2px; font-size: 3px; }
|
||||
}
|
||||
|
||||
@media (min-width: 761px) {
|
||||
.home-secondary-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.home-secondary-actions button { grid-template-columns: 27px minmax(0, 1fr) 8px; gap: 6px; padding-right: 8px; padding-left: 8px; }
|
||||
.home-secondary-actions button > i { font-size: 17px; }
|
||||
.home-secondary-actions strong { font-size: 10px; }
|
||||
.home-secondary-actions small { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.class-help-surface { padding: 0 10px 8px; }
|
||||
.class-help-header { grid-template-columns: 125px minmax(0, 1fr) auto; }
|
||||
.class-help-header > small { display: none; }
|
||||
.guide-class-tabs { gap: 3px; margin-top: 5px; }
|
||||
.guide-class-tabs button { height: 38px; grid-template-columns: 20px minmax(0, 1fr); gap: 3px; padding: 3px 4px; }
|
||||
.guide-class-tabs button > i { width: 19px; height: 19px; font-size: 8px; }
|
||||
.guide-class-tabs strong { font-size: 6px; }
|
||||
.guide-class-tabs small { display: none; }
|
||||
.guide-class-intro { min-height: 47px; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 6px; margin-top: 5px; padding: 4px 7px; }
|
||||
.guide-class-intro > i { width: 28px; height: 28px; font-size: 13px; }
|
||||
.guide-class-intro small { font-size: 5px; }
|
||||
.guide-class-intro h2 { font-size: 9px; }
|
||||
.guide-class-intro p { font-size: 5px; }
|
||||
.guide-class-intro > b { padding: 2px 4px; font-size: 4px; }
|
||||
.guide-ability-grid { height: calc(100% - 144px); gap: 3px; margin-top: 5px; }
|
||||
.guide-ability-card { grid-template-columns: 27px minmax(0, 1fr); gap: 2px 4px; padding: 4px; }
|
||||
.guide-ability-icon > b { width: 25px; height: 25px; font-size: 11px; }
|
||||
.guide-ability-icon > small { font-size: 4px; }
|
||||
.guide-ability-copy { gap: 2px; }
|
||||
.guide-ability-copy > strong { font-size: 6px; }
|
||||
.guide-ability-copy > small { font-size: 5px; -webkit-line-clamp: 2; }
|
||||
.guide-ability-meta { padding-top: 2px; }
|
||||
.guide-ability-meta > b { font-size: 3px; }
|
||||
.class-help-surface > .controller-legend { display: none; }
|
||||
}
|
||||
|
||||
/* Appearance Lab */
|
||||
|
||||
.appearance-surface { padding: 0 24px 15px; }
|
||||
|
||||
Reference in New Issue
Block a user