Updating mechanics for OS protocols
This commit is contained in:
+233
-25
@@ -9006,6 +9006,47 @@ a.secondary:active {
|
||||
padding: 0 9px !important;
|
||||
font-size: var(--shd-type-telemetry) !important;
|
||||
}
|
||||
.builder-radio-toggle {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 5px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--shd-border);
|
||||
background: var(--shd-builder-canvas);
|
||||
color: var(--shd-text);
|
||||
text-align: left;
|
||||
}
|
||||
.builder-radio-toggle > img,
|
||||
.builder-radio-toggle > i {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.builder-radio-toggle > span {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
.builder-radio-toggle b,
|
||||
.builder-radio-toggle small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.builder-radio-toggle em {
|
||||
color: var(--shd-orange);
|
||||
font-size: var(--shd-type-telemetry);
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
.builder-radio-toggle:hover,
|
||||
.builder-radio-toggle:focus-visible {
|
||||
border-color: var(--shd-orange);
|
||||
}
|
||||
.builder-radio-grid > div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--builder-radio-columns), minmax(0, 1fr));
|
||||
@@ -9131,6 +9172,40 @@ a.secondary:active {
|
||||
gap: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.builder-talent-slot {
|
||||
min-width: 0;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--shd-border-soft);
|
||||
}
|
||||
.builder-talent-slot:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
.builder-exotic-talent > div:first-child {
|
||||
min-height: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--shd-border);
|
||||
background: var(--shd-builder-canvas);
|
||||
}
|
||||
.builder-exotic-talent > div:first-child > .item-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.builder-exotic-talent > div:first-child > span {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
.builder-exotic-talent small {
|
||||
color: var(--shd-orange);
|
||||
font-size: var(--shd-type-telemetry);
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
.builder-rolls.required > div {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr);
|
||||
}
|
||||
@@ -9178,7 +9253,7 @@ a.secondary:active {
|
||||
}
|
||||
.builder-core-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
.builder-range-grid.weapon-damage {
|
||||
@@ -9278,6 +9353,8 @@ a.secondary:active {
|
||||
}
|
||||
.loadout-slots > header,
|
||||
.summary-section > header {
|
||||
height: auto;
|
||||
min-height: 36px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -9356,6 +9433,116 @@ a.secondary:active {
|
||||
min-height: 680px;
|
||||
padding: 12px;
|
||||
border-top: 2px solid var(--shd-orange);
|
||||
container-type: inline-size;
|
||||
}
|
||||
.builder-editor-columns,
|
||||
.builder-specialization-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.builder-editor-lane {
|
||||
min-width: 0;
|
||||
align-content: start;
|
||||
}
|
||||
.builder-editor-lane + .builder-editor-lane {
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--shd-border);
|
||||
}
|
||||
.builder-editor-lane > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.builder-editor-lane .builder-weapon-controls {
|
||||
grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.65fr);
|
||||
}
|
||||
.builder-editor-lane .builder-equipment-controls {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.builder-editor-lane
|
||||
.builder-equipment-controls
|
||||
> .builder-radio-grid:last-child:nth-child(3) {
|
||||
grid-column: auto;
|
||||
}
|
||||
.builder-editor-lane .builder-weapon-controls .builder-fixed {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
.builder-editor-lane .builder-range-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
}
|
||||
.builder-editor-lane .range-value-inputs {
|
||||
grid-template-columns: minmax(0, 1fr) 72px;
|
||||
}
|
||||
.builder-editor-lane .builder-rolls.required > div,
|
||||
.builder-editor-lane .builder-chip-rolls > div {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(150px, 0.72fr);
|
||||
}
|
||||
.builder-specialization-layout .builder-ability-chip-panels {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.builder-focus-abilities {
|
||||
display: grid;
|
||||
gap: var(--shd-gap-xs);
|
||||
}
|
||||
.builder-focus-abilities > button {
|
||||
min-width: 0;
|
||||
min-height: 58px;
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: var(--shd-gap-sm);
|
||||
padding: var(--shd-gap-sm);
|
||||
border: 1px solid var(--shd-border);
|
||||
background: var(--shd-builder-canvas);
|
||||
color: var(--shd-text);
|
||||
text-align: left;
|
||||
}
|
||||
.builder-focus-abilities > button:hover,
|
||||
.builder-focus-abilities > button:focus-visible {
|
||||
border-color: var(--shd-orange);
|
||||
}
|
||||
.builder-focus-abilities img {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
.builder-focus-abilities span {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
.builder-focus-abilities small,
|
||||
.builder-focus-abilities b {
|
||||
color: var(--shd-text-muted);
|
||||
font-size: var(--shd-type-telemetry);
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
.builder-focus-abilities strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.builder-focus-abilities b {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.builder-specialization-layout .builder-specialization-identity {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
.builder-specialization-layout .builder-specialization-identity > b {
|
||||
grid-column: 1/-1;
|
||||
width: max-content;
|
||||
}
|
||||
@container (max-width: 700px) {
|
||||
.builder-editor-columns,
|
||||
.builder-specialization-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.builder-editor-lane + .builder-editor-lane {
|
||||
padding-top: 12px;
|
||||
padding-left: 0;
|
||||
border-top: 1px solid var(--shd-border);
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
.loadout-editor-head {
|
||||
display: flex;
|
||||
@@ -9688,11 +9875,12 @@ a.secondary:active {
|
||||
}
|
||||
.summary-core {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
border-top: 1px solid #303536;
|
||||
border-bottom: 1px solid #303536;
|
||||
}
|
||||
.summary-core > div {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
@@ -9707,13 +9895,18 @@ a.secondary:active {
|
||||
height: 22px;
|
||||
}
|
||||
.summary-core span {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
color: #687072;
|
||||
font-size: var(--shd-type-telemetry);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.summary-core b {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #d6d9da;
|
||||
font-size: var(--shd-type-telemetry);
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.summary-scroll {
|
||||
max-height: calc(100vh - 340px);
|
||||
@@ -9726,14 +9919,15 @@ a.secondary:active {
|
||||
}
|
||||
.summary-stat,
|
||||
.summary-bonus {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(70px, auto);
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-top: 1px solid #252a2b;
|
||||
}
|
||||
.summary-stat > span,
|
||||
.summary-bonus > span {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
font-size: var(--shd-type-telemetry);
|
||||
@@ -9744,10 +9938,14 @@ a.secondary:active {
|
||||
font-size: var(--shd-type-telemetry);
|
||||
}
|
||||
.summary-stat > b {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: #d9dbdc;
|
||||
font-size: var(--shd-type-telemetry);
|
||||
}
|
||||
.summary-bonus em {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--shd-success);
|
||||
font-size: var(--shd-type-telemetry);
|
||||
font-style: normal;
|
||||
@@ -12003,10 +12201,7 @@ a.secondary:active {
|
||||
}
|
||||
.loadout-workspace {
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(300px, 350px) minmax(480px, 1fr) minmax(
|
||||
290px,
|
||||
340px
|
||||
);
|
||||
grid-template-columns: minmax(300px, 350px) minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.loadout-workspace > *,
|
||||
@@ -12040,8 +12235,20 @@ a.secondary:active {
|
||||
}
|
||||
.loadout-summary {
|
||||
min-width: 0;
|
||||
position: static;
|
||||
grid-column: 1/3;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
background: var(--shd-surface);
|
||||
}
|
||||
.loadout-summary .summary-scroll {
|
||||
max-height: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
|
||||
}
|
||||
.builder-editor-lane .builder-radio-grid:not(.icon-only) > div {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.builder-picker-current > * {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -12118,11 +12325,13 @@ a.secondary:active {
|
||||
.loadout-summary {
|
||||
position: static;
|
||||
grid-column: 1/3;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
.summary-scroll {
|
||||
max-height: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 1050px) {
|
||||
@@ -12699,10 +12908,9 @@ a.secondary:active {
|
||||
}
|
||||
.mod-secondary-pool-option {
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(220px, 0.9fr) repeat(
|
||||
3,
|
||||
minmax(285px, 1fr)
|
||||
) 30px;
|
||||
grid-template-columns:
|
||||
30px minmax(220px, 0.9fr) repeat(3, minmax(285px, 1fr))
|
||||
30px;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
@@ -12814,10 +13022,9 @@ a.secondary:active {
|
||||
}
|
||||
|
||||
.skill-chip-profile-option.selectable {
|
||||
grid-template-columns: 32px minmax(210px, 1.2fr) repeat(
|
||||
3,
|
||||
minmax(130px, 1fr)
|
||||
) 34px;
|
||||
grid-template-columns:
|
||||
32px minmax(210px, 1.2fr) repeat(3, minmax(130px, 1fr))
|
||||
34px;
|
||||
}
|
||||
|
||||
.skill-chip-profile-option > div:first-child,
|
||||
@@ -15494,18 +15701,23 @@ a.secondary:active {
|
||||
.builder-ability-chip-panels > section {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(48px, auto) auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: var(--shd-gap-sm);
|
||||
padding: var(--shd-gap-sm);
|
||||
border: 1px solid var(--shd-border);
|
||||
background: var(--shd-surface);
|
||||
}
|
||||
.builder-ability-chip-panels header {
|
||||
height: auto;
|
||||
position: static;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: var(--shd-gap-sm);
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.builder-ability-chip-panels header img {
|
||||
width: 38px;
|
||||
@@ -15528,13 +15740,6 @@ a.secondary:active {
|
||||
.builder-ability-chip-panels header b {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.builder-ability-chip-panels > section > p {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
color: var(--shd-text-muted);
|
||||
font-size: var(--shd-type-supporting);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.builder-ability-chip-panels > section > div {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
@@ -15600,6 +15805,9 @@ a.secondary:active {
|
||||
background: var(--shd-model-surface);
|
||||
}
|
||||
.builder-focus-tree > section > header {
|
||||
height: auto;
|
||||
min-height: 32px;
|
||||
position: static;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 8px;
|
||||
|
||||
Reference in New Issue
Block a user