vee
3099 lines
61 KiB
CSS
3099 lines
61 KiB
CSS
/* Self-extension workspace ------------------------------------------------- */
|
|
|
|
[data-extension-type="light"] { --extension-card-color: #eab858; }
|
|
[data-extension-type="sound"] { --extension-card-color: #658bd5; }
|
|
[data-extension-type="action"] { --extension-card-color: #db7468; }
|
|
[data-extension-type="doll"] { --extension-card-color: #cb86a4; }
|
|
[data-extension-type="mechanical"] { --extension-card-color: #758e94; }
|
|
[data-extension-type="other"] { --extension-card-color: #579a88; }
|
|
|
|
.console-v2 .v2-extension-sidebar,
|
|
.console-v2 .v2-extension-footer,
|
|
.console-v2 .v2-self-extension,
|
|
.console-v2 .v2-extension-profile-title {
|
|
display: none;
|
|
}
|
|
|
|
.console-v2[data-module="self-extension"] .v2-sidebar > .v2-sidebar-footer:not(.v2-extension-footer),
|
|
.console-v2[data-module="self-extension"] .v2-operation-shell,
|
|
.console-v2[data-module="self-extension"] .v2-output-shell {
|
|
display: none;
|
|
}
|
|
|
|
.console-v2[data-module="self-extension"] .v2-extension-sidebar {
|
|
min-height: 0;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
margin-top: clamp(22px, 3.5vh, 42px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.console-v2[data-module="self-extension"] .v2-extension-footer {
|
|
display: grid;
|
|
}
|
|
|
|
.console-v2.v2-sidebar-collapsed[data-module="self-extension"] .v2-extension-sidebar,
|
|
.console-v2.v2-sidebar-collapsed[data-module="self-extension"] .v2-extension-footer {
|
|
display: none;
|
|
}
|
|
|
|
.console-v2[data-module="self-extension"] .main-panel {
|
|
grid-template-rows: 36px minmax(0, 1fr);
|
|
}
|
|
|
|
.console-v2[data-module="self-extension"] .v2-self-extension {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
position: relative;
|
|
display: block;
|
|
grid-row: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.v2-extension-pet {
|
|
--pet-x: 0px;
|
|
--pet-y: 0px;
|
|
width: clamp(154px, 15vw, 196px);
|
|
aspect-ratio: 1;
|
|
position: fixed;
|
|
right: max(18px, env(safe-area-inset-right));
|
|
bottom: max(18px, env(safe-area-inset-bottom));
|
|
z-index: 24;
|
|
display: block;
|
|
transform: translate3d(var(--pet-x), var(--pet-y), 0);
|
|
filter: drop-shadow(0 12px 14px rgba(9, 66, 63, 0.18));
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.v2-extension-pet-bubble {
|
|
position: absolute;
|
|
right: calc(100% - 36px);
|
|
bottom: calc(100% - 42px);
|
|
width: 176px;
|
|
max-width: calc(100vw - 24px);
|
|
box-sizing: border-box;
|
|
padding: 10px 12px;
|
|
color: #285153;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
border: 1px solid rgba(14, 119, 115, 0.18);
|
|
border-radius: 11px 11px 2px 11px;
|
|
box-shadow: 0 9px 24px rgba(22, 72, 70, 0.12);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
line-height: 1.5;
|
|
overflow-wrap: break-word;
|
|
opacity: 0;
|
|
transform: translateY(5px) scale(0.96);
|
|
transform-origin: right bottom;
|
|
transition: 170ms ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.v2-extension-pet:hover .v2-extension-pet-bubble,
|
|
.v2-extension-pet[data-mood="talking"] .v2-extension-pet-bubble,
|
|
.v2-extension-pet[data-mood="happy"] .v2-extension-pet-bubble {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
.v2-extension-pet-body {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: block;
|
|
padding: 0;
|
|
color: inherit;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
cursor: grab;
|
|
appearance: none;
|
|
}
|
|
|
|
.v2-extension-pet[data-dragging="true"] .v2-extension-pet-body {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.v2-extension-pet-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: contain;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.v2-extension-pet-entrance-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 4;
|
|
display: block;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
}
|
|
|
|
.v2-extension-pet[data-entering="true"] .v2-extension-pet-entrance-canvas {
|
|
opacity: 1;
|
|
}
|
|
|
|
.v2-extension-pet[data-entering="true"] .v2-extension-pet-image,
|
|
.v2-extension-pet[data-entering="true"] .v2-extension-pet-tail-canvas,
|
|
.v2-extension-pet[data-entering="true"] .v2-extension-pet-blink,
|
|
.v2-extension-pet[data-entering="true"] .v2-extension-pet-mouth-closed {
|
|
opacity: 0;
|
|
}
|
|
|
|
.v2-extension-pet[data-entering="true"] .v2-extension-pet-bubble {
|
|
opacity: 0;
|
|
transform: translateY(5px) scale(0.96);
|
|
}
|
|
|
|
.v2-extension-pet[data-entering="true"] .v2-extension-pet-body {
|
|
cursor: default;
|
|
}
|
|
|
|
.v2-extension-pet-tail-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
display: block;
|
|
object-fit: contain;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.v2-extension-pet[data-tail-waving="true"] .v2-extension-pet-tail-canvas {
|
|
opacity: 1;
|
|
}
|
|
|
|
.v2-extension-pet[data-tail-waving="true"] .v2-extension-pet-image {
|
|
opacity: 0;
|
|
}
|
|
|
|
.v2-extension-pet-blink {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 28ms linear;
|
|
}
|
|
|
|
.v2-extension-pet[data-blinking="true"] .v2-extension-pet-blink {
|
|
opacity: 1;
|
|
}
|
|
|
|
.v2-extension-pet-blink-eye {
|
|
position: absolute;
|
|
top: 31.3%;
|
|
height: 6.2%;
|
|
background: #919baa;
|
|
border-radius: 48%;
|
|
}
|
|
|
|
.v2-extension-pet-blink-eye.left {
|
|
left: 23.7%;
|
|
width: 4%;
|
|
}
|
|
|
|
.v2-extension-pet-blink-eye.right {
|
|
left: 35.9%;
|
|
width: 5.3%;
|
|
}
|
|
|
|
.v2-extension-pet-blink-eye::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 48%;
|
|
right: 12%;
|
|
left: 12%;
|
|
height: 27%;
|
|
border-top: 2px solid #050606;
|
|
border-radius: 50% 50% 0 0;
|
|
}
|
|
|
|
.v2-extension-pet-mouth-closed {
|
|
position: absolute;
|
|
left: 27%;
|
|
top: 39.8%;
|
|
z-index: 3;
|
|
width: 7%;
|
|
height: 5.9%;
|
|
border-radius: 46%;
|
|
background:
|
|
linear-gradient(#050606, #050606) center top / 1.5px 34% no-repeat,
|
|
#fbfaf7;
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
.v2-extension-pet-mouth-closed::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 13%;
|
|
left: 13%;
|
|
width: 38%;
|
|
height: 34%;
|
|
border-bottom: 1.5px solid #050606;
|
|
border-radius: 0 0 70% 70%;
|
|
transform: rotate(-7deg);
|
|
}
|
|
|
|
.v2-extension-pet-mouth-closed::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 13%;
|
|
right: 13%;
|
|
width: 38%;
|
|
height: 34%;
|
|
border-bottom: 1.5px solid #050606;
|
|
border-radius: 0 0 70% 70%;
|
|
transform: rotate(7deg);
|
|
}
|
|
|
|
.v2-extension-sidebar > .v2-field-caption {
|
|
display: block;
|
|
margin: 0 0 8px;
|
|
color: #788888;
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.v2-extension-mode-switch {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 7px;
|
|
}
|
|
|
|
.v2-extension-mode-switch button {
|
|
min-height: var(--v2-sidebar-item-height);
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 15px;
|
|
color: #637677;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 13px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: 160ms ease;
|
|
}
|
|
|
|
.v2-extension-mode-switch button svg {
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
|
|
.v2-extension-mode-switch button:hover {
|
|
color: var(--v2-accent-strong);
|
|
background: color-mix(in srgb, var(--v2-accent-soft) 34%, white);
|
|
border-color: color-mix(in srgb, var(--v2-accent) 10%, white);
|
|
}
|
|
|
|
.v2-extension-mode-switch button.active {
|
|
color: #111f20;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
border-color: color-mix(in srgb, var(--v2-accent) 18%, white);
|
|
box-shadow: 0 10px 28px color-mix(in srgb, var(--v2-accent) 10%, transparent);
|
|
}
|
|
|
|
.v2-extension-mode-switch button.active svg {
|
|
color: var(--v2-accent);
|
|
}
|
|
|
|
.v2-extension-sidebar .v2-divider {
|
|
margin-top: clamp(14px, 2vh, 20px);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.v2-extension-config-stack {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding-left: 9px;
|
|
border-left: 1px solid color-mix(in srgb, var(--v2-accent) 14%, transparent);
|
|
}
|
|
|
|
.v2-extension-config-card {
|
|
min-width: 0;
|
|
min-height: var(--v2-sidebar-card-height);
|
|
display: grid;
|
|
grid-template-columns: 28px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
border: 1px solid rgba(255, 255, 255, 0.78);
|
|
border-radius: var(--v2-sidebar-card-radius);
|
|
}
|
|
|
|
.v2-extension-config-card > svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
color: var(--v2-accent);
|
|
}
|
|
|
|
.v2-extension-config-card small,
|
|
.v2-extension-config-card strong {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-config-card small {
|
|
color: #819091;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.v2-extension-config-card strong {
|
|
margin-top: 2px;
|
|
color: #263d3f;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.v2-extension-config-card > span {
|
|
padding: 3px 5px;
|
|
color: var(--v2-accent-strong);
|
|
background: color-mix(in srgb, var(--v2-accent-soft) 68%, white);
|
|
border-radius: 5px;
|
|
font: 800 7px "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
.v2-extension-config-card.unavailable > svg,
|
|
.v2-extension-config-card.unavailable > span {
|
|
color: #9a7044;
|
|
}
|
|
|
|
.v2-extension-config-card[data-state="offline"] > svg,
|
|
.v2-extension-config-card[data-state="offline"] > span {
|
|
color: #a85f43;
|
|
background: #fff0e9;
|
|
}
|
|
|
|
.v2-extension-metrics {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.v2-extension-metrics > div {
|
|
min-height: 44px;
|
|
display: grid;
|
|
grid-template-columns: 24px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 7px 9px;
|
|
background: color-mix(in srgb, var(--v2-accent-soft) 62%, white);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.v2-extension-metrics svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--v2-accent);
|
|
}
|
|
|
|
.v2-extension-metrics span {
|
|
color: #566c6e;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.v2-extension-metrics strong {
|
|
color: var(--v2-accent-strong);
|
|
font-size: 17px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.v2-extension-view {
|
|
--v2-extension-view-pad: clamp(13px, 1.7vw, 24px);
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: var(--v2-module-title-block) var(--v2-extension-view-pad) var(--v2-extension-view-pad);
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at 31% -10%, rgba(216, 244, 241, 0.72), transparent 26%),
|
|
rgba(255, 255, 255, 0.93);
|
|
border: 1px solid rgba(117, 145, 145, 0.14);
|
|
border-radius: clamp(17px, 1.4vw, 24px);
|
|
box-shadow: var(--v2-shadow);
|
|
}
|
|
|
|
.v2-extension-view[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.v2-extension-study {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: clamp(10px, 1.4vh, 16px);
|
|
}
|
|
|
|
.v2-extension-control {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
|
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
gap: clamp(9px, 1.2vh, 14px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.v2-extension-control > .v2-extension-heading,
|
|
.v2-extension-control > .v2-extension-command-row {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.v2-extension-heading {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding-inline: max(0px, calc(var(--v2-module-title-inline) - var(--v2-extension-view-pad)));
|
|
}
|
|
|
|
.v2-extension-heading h1 {
|
|
margin: 4px 0 3px;
|
|
color: var(--v2-ink);
|
|
font-size: clamp(24px, 2.3vw, 37px);
|
|
font-weight: 900;
|
|
letter-spacing: -0.045em;
|
|
line-height: 1.08;
|
|
}
|
|
|
|
.v2-extension-heading p {
|
|
margin: 0;
|
|
color: var(--v2-muted);
|
|
font-size: 10px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.v2-extension-heading-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.v2-extension-heading-actions > button {
|
|
min-height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 12px;
|
|
color: #fff;
|
|
background: var(--v2-accent);
|
|
border: 0;
|
|
border-radius: 10px;
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-heading-actions > button svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.v2-extension-heading-actions > button.v2-extension-reset-action {
|
|
color: #607273;
|
|
background: #f1f4f3;
|
|
border: 1px solid #dfe6e4;
|
|
}
|
|
|
|
.v2-extension-heading-actions > button.v2-extension-reset-action:hover {
|
|
color: #8f4f42;
|
|
background: #fff3ee;
|
|
border-color: #efd8cf;
|
|
}
|
|
|
|
.v2-extension-hardware-grid {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
gap: clamp(8px, 1vw, 13px);
|
|
}
|
|
|
|
.v2-extension-type-card {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
gap: 7px;
|
|
overflow: hidden;
|
|
padding: clamp(9px, 1vw, 13px);
|
|
background: color-mix(in srgb, var(--extension-card-color) 3%, #f7f9f8);
|
|
border: 1px solid color-mix(in srgb, var(--extension-card-color) 18%, #e5e9e8);
|
|
border-radius: clamp(13px, 1.1vw, 18px);
|
|
}
|
|
|
|
.v2-extension-type-card[data-extension-connected="true"] {
|
|
--extension-card-color: var(--v2-accent);
|
|
}
|
|
|
|
.v2-extension-type-card[data-extension-connected="false"] {
|
|
--extension-card-color: #98a5a4;
|
|
}
|
|
|
|
.v2-extension-type-card[data-extension-connected="false"] .v2-extension-capability.preview > i,
|
|
.v2-extension-type-card[data-extension-connected="false"] > footer button {
|
|
color: #778584;
|
|
}
|
|
|
|
.v2-extension-type-card::before {
|
|
content: "";
|
|
width: 3px;
|
|
position: absolute;
|
|
inset: 12px auto 12px 0;
|
|
background: var(--extension-card-color);
|
|
border-radius: 0 4px 4px 0;
|
|
opacity: 0.76;
|
|
}
|
|
|
|
.v2-extension-type-card > header {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: 34px minmax(0, 1fr) auto 25px 25px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.v2-extension-type-icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: color-mix(in srgb, var(--extension-card-color) 82%, #31494a);
|
|
background: color-mix(in srgb, var(--extension-card-color) 13%, white);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.v2-extension-type-icon svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.v2-extension-type-card > header > div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.v2-extension-type-card > header small {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
color: #647677;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.v2-extension-type-card select {
|
|
width: 100%;
|
|
height: 23px;
|
|
padding: 0 20px 0 6px;
|
|
overflow: hidden;
|
|
color: #243b3d;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
border: 1px solid #dce7e4;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.v2-extension-no-device {
|
|
display: block;
|
|
overflow: hidden;
|
|
color: #8a9999;
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-type-card > header > strong {
|
|
color: color-mix(in srgb, var(--extension-card-color) 75%, #3e5556);
|
|
font: 850 13px "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
.v2-extension-type-card > header > button {
|
|
width: 25px;
|
|
height: 25px;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
color: #647879;
|
|
background: rgba(255, 255, 255, 0.75);
|
|
border: 1px solid #e2e9e7;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-type-card > header > button:hover {
|
|
color: var(--v2-accent-strong);
|
|
border-color: color-mix(in srgb, var(--v2-accent) 30%, #e2e9e7);
|
|
}
|
|
|
|
.v2-extension-type-card > header > button svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.v2-extension-capability-grid {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
gap: 5px;
|
|
}
|
|
|
|
.v2-extension-capability {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
padding: 6px;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.88);
|
|
border: 1px solid #e4eae8;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
button.v2-extension-capability.preview {
|
|
grid-template-rows: auto auto auto;
|
|
align-content: center;
|
|
color: #677879;
|
|
border-style: dashed;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-capability > button:first-child {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 0;
|
|
color: inherit;
|
|
background: transparent;
|
|
border: 0;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-capability span {
|
|
display: block;
|
|
overflow: hidden;
|
|
color: #243a3c;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
line-height: 1.25;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-capability small {
|
|
display: block;
|
|
margin-top: 3px;
|
|
overflow: hidden;
|
|
color: #899696;
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-capability.preview > i {
|
|
margin-top: 4px;
|
|
color: var(--v2-accent);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.v2-extension-capability > div {
|
|
min-width: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 3px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.v2-extension-capability > div button {
|
|
min-height: 24px;
|
|
padding: 0 6px;
|
|
color: #fff;
|
|
background: var(--v2-accent);
|
|
border: 0;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-capability > div button + button {
|
|
width: 19px;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
color: #7d8d8e;
|
|
background: #eef2f1;
|
|
}
|
|
|
|
.v2-extension-capability > div svg {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.v2-extension-capability.learned {
|
|
background: color-mix(in srgb, var(--extension-card-color) 7%, white);
|
|
border-color: color-mix(in srgb, var(--extension-card-color) 24%, #dfe8e6);
|
|
}
|
|
|
|
.v2-extension-type-card > footer {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #839091;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.v2-extension-type-card > footer > span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-type-card > footer > div {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.v2-extension-type-card > footer button {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
color: var(--v2-accent);
|
|
background: rgba(255, 255, 255, 0.78);
|
|
border: 1px solid #e0e7e5;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-type-card > footer button:disabled {
|
|
color: #bec8c7;
|
|
cursor: default;
|
|
}
|
|
|
|
.v2-extension-type-card > footer button svg {
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.v2-extension-type-card > footer b {
|
|
min-width: 23px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.v2-extension-command-row {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) clamp(210px, 20vw, 280px);
|
|
gap: 12px;
|
|
}
|
|
|
|
.v2-extension-composer {
|
|
min-width: 0;
|
|
min-height: 74px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
border: 1px solid color-mix(in srgb, var(--v2-accent) 15%, #e0e5e4);
|
|
border-radius: 16px;
|
|
box-shadow: 0 11px 32px rgba(29, 78, 78, 0.08);
|
|
}
|
|
|
|
.v2-extension-composer textarea {
|
|
width: 100%;
|
|
height: 72px;
|
|
min-height: 72px;
|
|
padding: 18px 64px 15px 18px;
|
|
resize: none;
|
|
color: var(--v2-ink);
|
|
background: transparent;
|
|
border: 0;
|
|
outline: 0;
|
|
font: 700 14px/1.5 inherit;
|
|
}
|
|
|
|
.v2-extension-composer textarea::placeholder {
|
|
color: #a0abab;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.console-v2 .v2-extension-composer .primary-action {
|
|
width: 36px;
|
|
height: 36px;
|
|
min-height: 36px;
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
z-index: 3;
|
|
display: grid;
|
|
place-items: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #fff;
|
|
background: linear-gradient(145deg, var(--v2-accent), var(--v2-accent-strong));
|
|
border: 0;
|
|
border-radius: 50%;
|
|
box-shadow: 0 7px 16px color-mix(in srgb, var(--v2-accent) 21%, transparent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.console-v2 .v2-extension-composer .primary-action:disabled {
|
|
opacity: 0.7;
|
|
cursor: wait;
|
|
}
|
|
|
|
.console-v2 .v2-extension-composer .primary-action span {
|
|
display: none;
|
|
}
|
|
|
|
.console-v2 .v2-extension-composer .primary-action svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.v2-extension-execution-state {
|
|
min-width: 0;
|
|
min-height: 74px;
|
|
display: grid;
|
|
grid-template-rows: auto auto auto 4px;
|
|
align-content: center;
|
|
gap: 2px;
|
|
padding: 10px 13px;
|
|
background: #f3f5f4;
|
|
border: 1px solid #e7ebea;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.v2-extension-execution-state > span,
|
|
.v2-extension-execution-state > strong,
|
|
.v2-extension-execution-state > small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-execution-state > span {
|
|
color: #819090;
|
|
font-size: 8px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.v2-extension-execution-state > strong {
|
|
color: #2d4345;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.v2-extension-execution-state > small {
|
|
color: #839091;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.v2-extension-run-progress {
|
|
height: 4px;
|
|
margin-top: 5px;
|
|
overflow: hidden;
|
|
background: #dfe6e4;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.v2-extension-run-progress i {
|
|
width: 0;
|
|
height: 100%;
|
|
display: block;
|
|
background: var(--v2-accent);
|
|
border-radius: inherit;
|
|
transition: width 180ms ease;
|
|
}
|
|
|
|
.v2-extension-execution-state[data-state="success"] {
|
|
background: #eef9f5;
|
|
border-color: #d3eee5;
|
|
}
|
|
|
|
.v2-extension-execution-state[data-state="error"],
|
|
.v2-extension-execution-state[data-state="warning"] {
|
|
background: #fff5f0;
|
|
border-color: #f0ddd4;
|
|
}
|
|
|
|
.v2-extension-execution-state[data-state="error"] .v2-extension-run-progress i,
|
|
.v2-extension-execution-state[data-state="warning"] .v2-extension-run-progress i {
|
|
background: #ca7054;
|
|
}
|
|
|
|
.v2-extension-control-grid {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(104px, 0.38fr) minmax(0, 1fr);
|
|
gap: 8px;
|
|
padding: 8px;
|
|
overflow: hidden;
|
|
background: #f1f4f3;
|
|
border-radius: 19px;
|
|
}
|
|
|
|
.v2-extension-action-board {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: 9px;
|
|
padding: clamp(11px, 1.2vw, 16px);
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border: 1px solid #e4e9e8;
|
|
border-radius: 17px;
|
|
}
|
|
|
|
.v2-extension-action-board > header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.v2-extension-action-board h2 {
|
|
margin: 3px 0 0;
|
|
color: var(--v2-ink);
|
|
font-size: clamp(17px, 1.4vw, 22px);
|
|
font-weight: 900;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.v2-extension-action-board > header > strong {
|
|
color: #7c898a;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.v2-extension-learned-grid,
|
|
.v2-extension-vehicle-grid {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-content: start;
|
|
gap: 7px;
|
|
overflow: hidden;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.v2-extension-vehicle-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
grid-auto-rows: minmax(0, 1fr);
|
|
align-content: stretch;
|
|
}
|
|
|
|
.v2-extension-learned-action {
|
|
min-width: 0;
|
|
min-height: 50px;
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(0, 1fr) 16px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 9px;
|
|
color: #314647;
|
|
background: color-mix(in srgb, var(--extension-card-color) 5%, #f7f9f8);
|
|
border: 1px solid color-mix(in srgb, var(--extension-card-color) 18%, #e0e7e5);
|
|
border-radius: 11px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
|
|
}
|
|
|
|
.console-v2[data-module="self-extension"]
|
|
.v2-extension-control
|
|
.v2-extension-learned-action {
|
|
--extension-card-color: var(--v2-accent);
|
|
}
|
|
|
|
.v2-extension-control .v2-extension-learned-action:hover,
|
|
.v2-extension-control .v2-extension-learned-action:focus-visible {
|
|
background: color-mix(in srgb, var(--v2-accent) 10%, white);
|
|
border-color: color-mix(in srgb, var(--v2-accent) 42%, #dce7e4);
|
|
box-shadow: 0 5px 14px color-mix(in srgb, var(--v2-accent) 10%, transparent);
|
|
}
|
|
|
|
.v2-extension-learned-action > span {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: color-mix(in srgb, var(--extension-card-color) 82%, #31494a);
|
|
background: color-mix(in srgb, var(--extension-card-color) 14%, white);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.v2-extension-learned-action > span svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.v2-extension-learned-action small,
|
|
.v2-extension-learned-action strong {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-learned-action small {
|
|
color: #849192;
|
|
font-size: 7px;
|
|
}
|
|
|
|
.v2-extension-learned-action strong {
|
|
margin-top: 2px;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.v2-extension-learned-action > svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
color: var(--v2-accent);
|
|
}
|
|
|
|
.v2-extension-empty {
|
|
min-height: 170px;
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
color: #829091;
|
|
text-align: center;
|
|
background: #f7f9f8;
|
|
border: 1px dashed #dbe4e2;
|
|
border-radius: 13px;
|
|
}
|
|
|
|
.v2-extension-empty > svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-bottom: 8px;
|
|
color: var(--v2-accent);
|
|
}
|
|
|
|
.v2-extension-empty strong {
|
|
color: #33494a;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.v2-extension-empty span {
|
|
margin: 4px 0 10px;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.v2-extension-empty button {
|
|
min-height: 30px;
|
|
padding: 0 10px;
|
|
color: #fff;
|
|
background: var(--v2-accent);
|
|
border: 0;
|
|
border-radius: 8px;
|
|
font-size: 8px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-vehicle-card {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(40px, auto);
|
|
gap: 5px;
|
|
padding: 7px;
|
|
overflow: hidden;
|
|
background: linear-gradient(145deg, #fbfcfc, #f4f8f7);
|
|
border: 1px solid #e3e9e7;
|
|
border-radius: 12px;
|
|
transition: 160ms ease;
|
|
}
|
|
|
|
.v2-extension-vehicle-card::before {
|
|
content: "";
|
|
width: 3px;
|
|
position: absolute;
|
|
inset: 9px auto 9px 0;
|
|
background: #73aaa6;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
.v2-extension-vehicle-card[data-execution-state="running"] {
|
|
border-color: #6eb9b3;
|
|
box-shadow: 0 0 0 2px rgba(69, 164, 156, 0.11);
|
|
}
|
|
|
|
.v2-extension-vehicle-card[data-execution-state="running"]::before {
|
|
background: #1b9288;
|
|
animation: extension-vehicle-pulse 900ms ease-in-out infinite alternate;
|
|
}
|
|
|
|
.v2-extension-vehicle-card[data-execution-state="succeeded"]::before {
|
|
background: #239668;
|
|
}
|
|
|
|
.v2-extension-vehicle-card[data-execution-state="failed"]::before {
|
|
background: #c76557;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > header {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > header > span {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--v2-accent);
|
|
background: var(--v2-accent-soft);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > header svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card strong,
|
|
.v2-extension-vehicle-card small {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-vehicle-card strong {
|
|
color: #2e4445;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card small {
|
|
margin-top: 2px;
|
|
color: #8b9797;
|
|
font: 700 9px "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > header > b {
|
|
align-self: start;
|
|
padding: 3px 5px;
|
|
color: var(--v2-accent-strong);
|
|
background: var(--v2-accent-soft);
|
|
border-radius: 999px;
|
|
font: 900 7px "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
.v2-extension-parameter-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.v2-extension-parameter-list > span {
|
|
max-width: 100%;
|
|
padding: 3px 5px;
|
|
overflow: hidden;
|
|
color: #587071;
|
|
background: #fff;
|
|
border: 1px solid #e0e8e6;
|
|
border-radius: 6px;
|
|
font-size: 7px;
|
|
font-weight: 750;
|
|
line-height: 1.1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > footer {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-rows: auto auto auto;
|
|
align-content: end;
|
|
gap: 2px;
|
|
padding: 5px 6px;
|
|
background: rgba(231, 241, 239, 0.62);
|
|
border: 1px solid rgba(71, 122, 118, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > footer small,
|
|
.v2-extension-vehicle-card > footer strong,
|
|
.v2-extension-vehicle-card > footer span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > footer small {
|
|
margin: 0;
|
|
color: #839292;
|
|
font-size: 7px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > footer strong {
|
|
color: #294849;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > footer span {
|
|
color: #778989;
|
|
font-size: 7px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card[data-execution-state="running"] > footer {
|
|
color: var(--v2-accent-strong);
|
|
background: var(--v2-accent-soft);
|
|
}
|
|
|
|
.v2-extension-vehicle-card[data-execution-state="failed"] > footer {
|
|
background: #fff1ed;
|
|
border-color: #f0d9d0;
|
|
}
|
|
|
|
.v2-extension-twin-board {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr);
|
|
overflow: hidden;
|
|
border-radius: 17px;
|
|
}
|
|
|
|
.v2-extension-control > .v2-extension-control-grid,
|
|
.v2-extension-control > .v2-extension-twin-board {
|
|
grid-row: 3;
|
|
}
|
|
|
|
.v2-extension-control > .v2-extension-control-grid {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.v2-extension-control > .v2-extension-twin-board {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.v2-extension-control > #extensionVehicleStateSummary {
|
|
grid-column: 2;
|
|
grid-row: 4;
|
|
}
|
|
|
|
.v2-extension-control > #extensionRunPlan {
|
|
grid-column: 1;
|
|
grid-row: 4;
|
|
}
|
|
|
|
.v2-extension-twin-board > header {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.v2-extension-twin-board h2 {
|
|
margin: 3px 0 1px;
|
|
color: var(--v2-ink);
|
|
font-size: clamp(17px, 1.4vw, 22px);
|
|
font-weight: 900;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.v2-extension-twin-board p {
|
|
margin: 0;
|
|
color: #778989;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.v2-extension-twin-board > header > span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 5px 8px;
|
|
color: #416663;
|
|
background: #e8f5f2;
|
|
border-radius: 999px;
|
|
font-size: 7px;
|
|
font-weight: 850;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-twin-board > header > span i {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #24a277;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 3px rgba(36, 162, 119, 0.12);
|
|
}
|
|
|
|
.v2-extension-twin-host {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: #e8eeec;
|
|
border: 1px solid rgba(92, 132, 129, 0.16);
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.v2-extension-twin-host > .twin-band {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-rows: 42px minmax(0, 1fr);
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.76);
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.v2-extension-twin-host .twin-heading {
|
|
min-height: 0;
|
|
padding: 5px 10px;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
border-bottom: 1px solid rgba(113, 141, 140, 0.12);
|
|
}
|
|
|
|
.v2-extension-twin-host .twin-heading h3 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.v2-extension-twin-host .twin-stage {
|
|
width: 100%;
|
|
height: 100% !important;
|
|
min-height: 0;
|
|
background:
|
|
radial-gradient(ellipse at 55% 82%, rgba(62, 119, 115, 0.13), transparent 38%),
|
|
linear-gradient(165deg, #f0f5f3 0%, #e3ebe8 100%);
|
|
}
|
|
|
|
.v2-extension-twin-host #seatTwinCanvas {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.v2-extension-twin-host .twin-readout {
|
|
display: none;
|
|
}
|
|
|
|
.v2-extension-twin-host .vehicle-system-hud {
|
|
top: 12px;
|
|
left: 12px;
|
|
transform: scale(0.9);
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.v2-extension-twin-waiting {
|
|
height: 100%;
|
|
display: grid;
|
|
place-content: center;
|
|
justify-items: center;
|
|
gap: 8px;
|
|
color: #738585;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.v2-extension-twin-waiting svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--v2-accent);
|
|
animation: extension-spin 1s linear infinite;
|
|
}
|
|
|
|
.v2-extension-run-plan {
|
|
min-height: 38px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 9px;
|
|
overflow-x: auto;
|
|
background: #183436;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.v2-extension-run-plan[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.v2-extension-run-plan span {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 5px 7px;
|
|
overflow: hidden;
|
|
color: rgba(255, 255, 255, 0.64);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 7px;
|
|
font-size: 7px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-run-plan span i {
|
|
color: #88d7cd;
|
|
font: 800 6px "SFMono-Regular", Consolas, monospace;
|
|
font-style: normal;
|
|
}
|
|
|
|
.v2-extension-run-plan span.active {
|
|
color: #153637;
|
|
background: #91dfd5;
|
|
}
|
|
|
|
.v2-extension-run-plan span.done {
|
|
color: #fff;
|
|
background: rgba(55, 168, 139, 0.55);
|
|
}
|
|
|
|
/* Dialogs ---------------------------------------------------------------- */
|
|
|
|
.v2-extension-dialog {
|
|
width: min(650px, calc(100vw - 40px));
|
|
max-height: calc(100dvh - 40px);
|
|
margin: auto;
|
|
padding: 0;
|
|
overflow: auto;
|
|
color: var(--v2-ink);
|
|
background: #fff;
|
|
border: 0;
|
|
border-radius: 20px;
|
|
box-shadow: 0 34px 100px rgba(7, 36, 33, 0.32);
|
|
}
|
|
|
|
.v2-extension-dialog::backdrop {
|
|
background: rgba(12, 36, 33, 0.58);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.v2-extension-dialog > header,
|
|
.v2-extension-dialog form > header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 18px 20px 14px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
border-bottom: 1px solid var(--v2-line);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.v2-extension-dialog h2 {
|
|
margin: 3px 0 2px;
|
|
font-size: 20px;
|
|
font-weight: 900;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.v2-extension-dialog header p {
|
|
margin: 0;
|
|
color: var(--v2-muted);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.v2-extension-dialog header > button {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
color: #728182;
|
|
background: #f1f4f3;
|
|
border: 0;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-dialog header > button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.v2-extension-dialog form > label,
|
|
.v2-extension-reset-dialog > label {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin: 15px 20px 0;
|
|
color: #4c6263;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.v2-extension-dialog input,
|
|
.v2-extension-dialog select {
|
|
width: 100%;
|
|
min-height: 40px;
|
|
padding: 0 11px;
|
|
color: var(--v2-ink);
|
|
background: #fff;
|
|
border: 1px solid #dbe4e2;
|
|
border-radius: 10px;
|
|
outline: 0;
|
|
}
|
|
|
|
.v2-extension-dialog input:focus,
|
|
.v2-extension-dialog select:focus {
|
|
border-color: color-mix(in srgb, var(--v2-accent) 52%, #dbe4e2);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-accent) 10%, transparent);
|
|
}
|
|
|
|
.v2-extension-primary,
|
|
.v2-extension-danger {
|
|
min-height: 41px;
|
|
margin: 16px 20px 20px;
|
|
padding: 0 15px;
|
|
color: #fff;
|
|
background: var(--v2-accent);
|
|
border: 0;
|
|
border-radius: 11px;
|
|
font-size: 10px;
|
|
font-weight: 850;
|
|
cursor: pointer;
|
|
}
|
|
|
|
form > .v2-extension-primary {
|
|
width: calc(100% - 40px);
|
|
}
|
|
|
|
.v2-extension-primary:disabled,
|
|
.v2-extension-danger:disabled {
|
|
opacity: 0.42;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.v2-extension-danger {
|
|
width: calc(100% - 40px);
|
|
background: #b9584f;
|
|
}
|
|
|
|
.v2-extension-type-chooser {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 7px;
|
|
padding: 16px 20px 0;
|
|
}
|
|
|
|
.v2-extension-type-chooser > button {
|
|
min-width: 0;
|
|
min-height: 51px;
|
|
display: grid;
|
|
grid-template-columns: 32px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
color: #4e6263;
|
|
background: #fff;
|
|
border: 1px solid #e0e7e5;
|
|
border-radius: 11px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-type-chooser > button > span {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: color-mix(in srgb, var(--extension-card-color) 82%, #31494a);
|
|
background: color-mix(in srgb, var(--extension-card-color) 14%, white);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.v2-extension-type-chooser > button > span svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.v2-extension-type-chooser strong,
|
|
.v2-extension-type-chooser small {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-type-chooser strong {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.v2-extension-type-chooser small {
|
|
margin-top: 2px;
|
|
color: #879494;
|
|
font-size: 7px;
|
|
}
|
|
|
|
.v2-extension-type-chooser > button.active {
|
|
background: color-mix(in srgb, var(--extension-card-color) 5%, white);
|
|
border-color: color-mix(in srgb, var(--extension-card-color) 48%, #e0e7e5);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--extension-card-color) 32%, transparent);
|
|
}
|
|
|
|
.v2-extension-preset-preview {
|
|
margin: 13px 20px 0;
|
|
padding: 11px;
|
|
background: #f3f6f5;
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.v2-extension-preset-preview > span {
|
|
color: #778788;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.v2-extension-preset-preview > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.v2-extension-preset-preview i {
|
|
padding: 4px 6px;
|
|
color: var(--v2-accent-strong);
|
|
background: var(--v2-accent-soft);
|
|
border-radius: 6px;
|
|
font-size: 7px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.v2-extension-learn-steps {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 14px 20px 0;
|
|
color: #96a3a3;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.v2-extension-learn-steps span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.v2-extension-learn-steps b {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: #edf2f0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.v2-extension-learn-steps span.active {
|
|
color: var(--v2-accent-strong);
|
|
font-weight: 850;
|
|
}
|
|
|
|
.v2-extension-learn-steps span.active b {
|
|
color: #fff;
|
|
background: var(--v2-accent);
|
|
}
|
|
|
|
.v2-extension-learn-steps > i {
|
|
width: 42px;
|
|
height: 1px;
|
|
margin: 0 7px;
|
|
background: #dfe6e4;
|
|
}
|
|
|
|
.v2-extension-learn-page {
|
|
padding: 18px 20px 20px;
|
|
}
|
|
|
|
.v2-extension-learn-page[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.v2-extension-learn-target {
|
|
display: grid;
|
|
grid-template-columns: 48px minmax(0, 1fr) 18px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 13px;
|
|
background: #f4f9f7;
|
|
border: 1px solid #d7e6e2;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.v2-extension-learn-target > span {
|
|
width: 48px;
|
|
height: 48px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--v2-accent);
|
|
background: var(--v2-accent-soft);
|
|
border-radius: 13px;
|
|
}
|
|
|
|
.v2-extension-learn-target > span svg {
|
|
width: 23px;
|
|
height: 23px;
|
|
}
|
|
|
|
.v2-extension-learn-target > svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
color: #a0acab;
|
|
}
|
|
|
|
.v2-extension-learn-target small,
|
|
.v2-extension-learn-target strong {
|
|
display: block;
|
|
}
|
|
|
|
.v2-extension-learn-target small {
|
|
color: var(--v2-accent);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.v2-extension-learn-target strong {
|
|
margin-top: 3px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.v2-extension-learn-fields {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 0.7fr 0.6fr;
|
|
gap: 8px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.v2-extension-learn-fields label {
|
|
display: grid;
|
|
gap: 5px;
|
|
color: #5f7273;
|
|
font-size: 8px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.v2-extension-learn-page > .v2-extension-primary {
|
|
width: 100%;
|
|
margin: 14px 0 0;
|
|
}
|
|
|
|
.v2-extension-learning-page,
|
|
.v2-extension-test-page {
|
|
min-height: 340px;
|
|
text-align: center;
|
|
}
|
|
|
|
.v2-extension-learn-animation {
|
|
width: 105px;
|
|
height: 105px;
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
margin: 15px auto 0;
|
|
background: var(--v2-accent-soft);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.v2-extension-learn-animation > span {
|
|
width: 54px;
|
|
height: 54px;
|
|
display: grid;
|
|
z-index: 1;
|
|
place-items: center;
|
|
color: #fff;
|
|
background: var(--v2-accent);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.v2-extension-learn-animation > span svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.v2-extension-learn-animation > i {
|
|
width: 105px;
|
|
height: 105px;
|
|
position: absolute;
|
|
border: 1px solid var(--v2-accent);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.v2-extension-learn-animation[data-state="listening"] > i {
|
|
animation: extension-wave 1.8s infinite;
|
|
}
|
|
|
|
.v2-extension-learn-animation[data-state="listening"] > i:last-child {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
.v2-extension-learning-page h3,
|
|
.v2-extension-test-page h3 {
|
|
margin: 15px 0 5px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.v2-extension-learning-page p,
|
|
.v2-extension-test-page p {
|
|
margin: 0 auto;
|
|
color: #7d8b8c;
|
|
font-size: 9px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.v2-extension-learning-page > strong {
|
|
display: block;
|
|
margin-top: 8px;
|
|
color: var(--v2-accent);
|
|
font-size: 22px;
|
|
}
|
|
|
|
.v2-extension-dialog-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.35fr;
|
|
gap: 8px;
|
|
max-width: 410px;
|
|
margin: 17px auto 0;
|
|
}
|
|
|
|
.v2-extension-dialog-actions button {
|
|
min-height: 40px;
|
|
margin: 0;
|
|
color: #607273;
|
|
background: #fff;
|
|
border: 1px solid #dce4e2;
|
|
border-radius: 10px;
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-extension-dialog-actions .v2-extension-primary {
|
|
color: #fff;
|
|
background: var(--v2-accent);
|
|
border-color: var(--v2-accent);
|
|
}
|
|
|
|
.v2-extension-test-page > span {
|
|
width: 80px;
|
|
height: 80px;
|
|
display: grid;
|
|
place-items: center;
|
|
margin: 28px auto 0;
|
|
color: #fff;
|
|
background: #35a879;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 12px rgba(53, 168, 121, 0.1);
|
|
}
|
|
|
|
.v2-extension-test-page > span svg {
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
|
|
.v2-extension-toast-stack {
|
|
width: min(330px, calc(100vw - 34px));
|
|
position: fixed;
|
|
right: 18px;
|
|
bottom: 18px;
|
|
z-index: 120;
|
|
display: grid;
|
|
gap: 7px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.v2-extension-toast {
|
|
padding: 11px 13px;
|
|
color: #fff;
|
|
background: #193b3c;
|
|
border-radius: 10px;
|
|
box-shadow: 0 14px 36px rgba(11, 42, 39, 0.25);
|
|
font-size: 10px;
|
|
line-height: 1.45;
|
|
animation: extension-toast-in 170ms ease both;
|
|
}
|
|
|
|
.v2-extension-toast.success {
|
|
background: #18745a;
|
|
}
|
|
|
|
.v2-extension-toast.error {
|
|
background: #913f43;
|
|
}
|
|
|
|
@keyframes extension-wave {
|
|
0% { transform: scale(0.58); opacity: 0.8; }
|
|
100% { transform: scale(1.28); opacity: 0; }
|
|
}
|
|
|
|
@keyframes extension-vehicle-pulse {
|
|
from { opacity: 0.45; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes extension-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes extension-toast-in {
|
|
from { transform: translateY(8px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@media (max-height: 820px) {
|
|
.console-v2[data-module="self-extension"] .main-panel {
|
|
grid-template-rows: 36px minmax(0, 1fr);
|
|
}
|
|
|
|
.console-v2[data-module="self-extension"] .v2-extension-sidebar {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.v2-extension-sidebar .v2-section-heading h2 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.v2-extension-sidebar > .v2-field-caption {
|
|
margin-bottom: 5px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.v2-extension-mode-switch button {
|
|
min-height: 41px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.v2-extension-sidebar .v2-divider {
|
|
margin-top: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.v2-extension-config-card,
|
|
.v2-extension-metrics > div {
|
|
min-height: 38px;
|
|
}
|
|
|
|
.v2-extension-view {
|
|
--v2-extension-view-pad: 10px;
|
|
padding: var(--v2-module-title-block) var(--v2-extension-view-pad) var(--v2-extension-view-pad);
|
|
}
|
|
|
|
.v2-extension-heading h1 {
|
|
font-size: 23px;
|
|
}
|
|
|
|
.v2-extension-heading p {
|
|
display: none;
|
|
}
|
|
|
|
.v2-extension-type-card {
|
|
gap: 5px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.v2-extension-capability {
|
|
padding: 4px;
|
|
}
|
|
|
|
.v2-extension-command-row {
|
|
grid-template-columns: minmax(0, 1fr) 210px;
|
|
}
|
|
|
|
.v2-extension-composer,
|
|
.v2-extension-composer textarea,
|
|
.v2-extension-execution-state {
|
|
min-height: 62px;
|
|
height: 62px;
|
|
}
|
|
|
|
.v2-extension-composer textarea {
|
|
padding-top: 13px;
|
|
}
|
|
|
|
.console-v2 .v2-extension-composer .primary-action {
|
|
width: 32px;
|
|
height: 32px;
|
|
min-height: 32px;
|
|
right: 9px;
|
|
bottom: 9px;
|
|
}
|
|
|
|
.v2-extension-action-board {
|
|
gap: 5px;
|
|
padding: 7px;
|
|
}
|
|
|
|
.v2-extension-action-board h2,
|
|
.v2-extension-twin-board h2 {
|
|
margin-top: 1px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.v2-extension-control-grid {
|
|
grid-template-rows: minmax(92px, 0.32fr) minmax(0, 1fr);
|
|
gap: 6px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.v2-extension-learned-action {
|
|
min-height: 40px;
|
|
padding: 5px 7px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card {
|
|
gap: 3px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > header {
|
|
grid-template-columns: 24px minmax(0, 1fr) auto;
|
|
gap: 5px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > header > span {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.v2-extension-parameter-list {
|
|
gap: 2px;
|
|
}
|
|
|
|
.v2-extension-parameter-list > span {
|
|
padding: 2px 4px;
|
|
font-size: 6.5px;
|
|
}
|
|
|
|
.v2-extension-vehicle-card > footer {
|
|
padding: 4px 5px;
|
|
}
|
|
|
|
.v2-extension-twin-board {
|
|
gap: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.v2-extension-run-plan {
|
|
min-height: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1366px) {
|
|
.v2-extension-heading h1 {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.v2-extension-hardware-grid {
|
|
gap: 8px;
|
|
}
|
|
|
|
.v2-extension-type-card {
|
|
padding: 8px;
|
|
}
|
|
|
|
.v2-extension-capability-grid {
|
|
gap: 4px;
|
|
}
|
|
|
|
.v2-extension-capability {
|
|
padding: 5px;
|
|
}
|
|
|
|
.v2-extension-command-row {
|
|
grid-template-columns: minmax(0, 1fr) 220px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 2000px) {
|
|
.console-v2[data-module="self-extension"] .main-panel {
|
|
grid-template-rows: 42px minmax(0, 1fr);
|
|
}
|
|
|
|
.v2-extension-view {
|
|
padding: 24px;
|
|
border-radius: 26px;
|
|
}
|
|
|
|
.v2-extension-capability-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-template-rows: repeat(3, minmax(0, 1fr));
|
|
gap: 7px;
|
|
}
|
|
|
|
}
|
|
|
|
/* Unified extension capability mirror ------------------------------------ */
|
|
|
|
.v2-extension-sync-mount {
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
gap: 6px;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
background: linear-gradient(145deg, #102b2d, #173c3d);
|
|
border: 1px solid rgba(40, 165, 154, 0.2);
|
|
border-radius: 17px;
|
|
box-shadow: 0 14px 34px rgba(17, 49, 50, 0.15);
|
|
}
|
|
|
|
.v2-extension-sync-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.v2-extension-sync-heading small {
|
|
color: #66bdb5;
|
|
font: 850 8px/1.2 "SFMono-Regular", Consolas, monospace;
|
|
letter-spacing: 0.14em;
|
|
}
|
|
|
|
.v2-extension-sync-heading h3 {
|
|
margin: 3px 0 0;
|
|
color: #f3fffd;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.v2-extension-sync-heading > span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #a9c3c0;
|
|
font-size: 8px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-sync-heading > span i {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #758e8c;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.v2-extension-sync-heading > span[data-state="online"] i {
|
|
background: #25c896;
|
|
box-shadow: 0 0 0 5px rgba(37, 200, 150, 0.1);
|
|
}
|
|
|
|
.v2-extension-sync-heading > span[data-state="listening"] i {
|
|
background: #e6b45f;
|
|
}
|
|
|
|
.v2-extension-gateway {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: 34px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 8px;
|
|
background: rgba(255, 255, 255, 0.055);
|
|
border: 1px solid rgba(130, 210, 202, 0.09);
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.v2-extension-gateway > span {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #77d3c9;
|
|
background: rgba(77, 190, 179, 0.1);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.v2-extension-gateway > span svg {
|
|
width: 16px;
|
|
}
|
|
|
|
.v2-extension-gateway > div {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.v2-extension-gateway strong {
|
|
color: #effbf9;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.v2-extension-gateway small {
|
|
overflow: hidden;
|
|
color: #91aaa8;
|
|
font-size: 8px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-gateway > b {
|
|
padding: 4px 6px;
|
|
color: #74c5bd;
|
|
background: rgba(90, 186, 177, 0.08);
|
|
border-radius: 6px;
|
|
font: 800 7px "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
.v2-extension-device-list {
|
|
min-height: 0;
|
|
max-height: 124px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.v2-extension-sync-mount[data-has-devices="true"] .v2-extension-gateway {
|
|
display: none;
|
|
}
|
|
|
|
.v2-extension-synced-device {
|
|
padding: 8px;
|
|
background: rgba(255, 255, 255, 0.045);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.v2-extension-synced-device header {
|
|
display: grid;
|
|
grid-template-columns: 28px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.v2-extension-synced-device header > span {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #76cfc6;
|
|
background: rgba(87, 191, 180, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.v2-extension-synced-device header svg {
|
|
width: 14px;
|
|
}
|
|
|
|
.v2-extension-synced-device header > div {
|
|
display: grid;
|
|
gap: 1px;
|
|
}
|
|
|
|
.v2-extension-synced-device header strong {
|
|
color: #effaf8;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.v2-extension-synced-device header small,
|
|
.v2-extension-synced-device header b {
|
|
color: #8da7a5;
|
|
font-size: 7px;
|
|
}
|
|
|
|
.v2-extension-synced-device > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.v2-extension-synced-device > div span {
|
|
padding: 3px 6px;
|
|
color: #b9d8d4;
|
|
background: rgba(95, 190, 180, 0.08);
|
|
border-radius: 999px;
|
|
font-size: 7px;
|
|
}
|
|
|
|
.v2-extension-sync-mount .v2-extension-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
min-height: 34px;
|
|
color: #668986;
|
|
background: rgba(255, 255, 255, 0.035);
|
|
border: 0;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.v2-extension-empty > svg {
|
|
width: 19px;
|
|
}
|
|
|
|
.v2-extension-empty div {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.v2-extension-empty strong {
|
|
color: #bad0cd;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.v2-extension-empty span {
|
|
font-size: 7px;
|
|
}
|
|
|
|
.v2-extension-linkage {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: 25px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding-top: 7px;
|
|
border-top: 1px solid rgba(134, 203, 197, 0.1);
|
|
}
|
|
|
|
.v2-extension-linkage > svg {
|
|
width: 15px;
|
|
color: #6faaa5;
|
|
}
|
|
|
|
.v2-extension-linkage > div {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 1px;
|
|
}
|
|
|
|
.v2-extension-linkage small {
|
|
color: #708f8c;
|
|
font-size: 7px;
|
|
}
|
|
|
|
.v2-extension-linkage strong {
|
|
overflow: hidden;
|
|
color: #c2d8d5;
|
|
font-size: 8px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-extension-linkage > span {
|
|
color: #69bfb6;
|
|
font: 800 7px "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
/* NFC toy discovery and IR-learning entry ------------------------------- */
|
|
|
|
.v2-extension-sync-mount {
|
|
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.v2-extension-sync-heading > div:first-child {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: end;
|
|
column-gap: 8px;
|
|
}
|
|
|
|
.v2-extension-sync-heading > div:first-child > small {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.v2-extension-sync-heading > div:first-child > h3 {
|
|
min-width: 0;
|
|
}
|
|
|
|
.v2-extension-nfc-launch {
|
|
min-height: 25px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 4px 7px;
|
|
color: #dffffa;
|
|
background: rgba(74, 194, 182, 0.14);
|
|
border: 1px solid rgba(111, 221, 210, 0.22);
|
|
border-radius: 7px;
|
|
font-size: 7.5px;
|
|
font-weight: 850;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: 150ms ease;
|
|
}
|
|
|
|
.v2-extension-nfc-launch:hover {
|
|
color: #fff;
|
|
background: rgba(74, 194, 182, 0.24);
|
|
border-color: rgba(111, 221, 210, 0.4);
|
|
}
|
|
|
|
.v2-extension-nfc-launch svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.v2-nfc-inline {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: 35px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 9px;
|
|
color: #d9efec;
|
|
background: linear-gradient(135deg, rgba(88, 197, 186, 0.11), rgba(255, 255, 255, 0.035));
|
|
border: 1px solid rgba(108, 209, 199, 0.14);
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.v2-nfc-inline[data-state="recognized"] {
|
|
background: linear-gradient(135deg, rgba(36, 184, 137, 0.16), rgba(255, 255, 255, 0.04));
|
|
border-color: rgba(65, 211, 161, 0.28);
|
|
}
|
|
|
|
.v2-nfc-inline[data-state="new-card"] {
|
|
background: linear-gradient(135deg, rgba(226, 172, 74, 0.15), rgba(255, 255, 255, 0.04));
|
|
border-color: rgba(236, 184, 92, 0.27);
|
|
}
|
|
|
|
.v2-nfc-inline-icon {
|
|
position: relative;
|
|
width: 35px;
|
|
height: 35px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #71d4ca;
|
|
background: rgba(75, 190, 179, 0.12);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.v2-nfc-inline[data-state="recognized"] .v2-nfc-inline-icon {
|
|
color: #70e1b6;
|
|
background: rgba(55, 200, 149, 0.13);
|
|
}
|
|
|
|
.v2-nfc-inline[data-state="new-card"] .v2-nfc-inline-icon {
|
|
color: #efc070;
|
|
background: rgba(226, 172, 74, 0.12);
|
|
}
|
|
|
|
.v2-nfc-inline-icon svg {
|
|
width: 17px;
|
|
}
|
|
|
|
.v2-nfc-inline[data-state="waiting"] .v2-nfc-inline-icon b {
|
|
position: absolute;
|
|
inset: 4px;
|
|
border: 1px solid rgba(112, 215, 204, 0.35);
|
|
border-radius: 9px;
|
|
animation: extension-nfc-pulse 1.8s ease-out infinite;
|
|
}
|
|
|
|
.v2-nfc-inline > div {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.v2-nfc-inline small {
|
|
color: #68bcb4;
|
|
font: 800 7px/1.2 "SFMono-Regular", Consolas, monospace;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.v2-nfc-inline strong,
|
|
.v2-nfc-inline p {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-nfc-inline strong {
|
|
color: #effbf9;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.v2-nfc-inline p {
|
|
color: #8eaaa7;
|
|
font-size: 7.5px;
|
|
}
|
|
|
|
.v2-nfc-inline > div > div {
|
|
display: flex;
|
|
gap: 3px;
|
|
margin-top: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.v2-nfc-inline > div > div i {
|
|
flex: 0 0 auto;
|
|
padding: 2px 5px;
|
|
color: #b9ddd8;
|
|
background: rgba(96, 196, 185, 0.09);
|
|
border-radius: 999px;
|
|
font-size: 6.5px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.v2-nfc-inline > button {
|
|
min-height: 29px;
|
|
padding: 0 8px;
|
|
color: #123c3a;
|
|
background: #83d8cf;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
font-size: 7.5px;
|
|
font-weight: 850;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-nfc-dialog {
|
|
width: min(900px, calc(100vw - 28px));
|
|
max-width: 900px;
|
|
max-height: min(860px, calc(100dvh - 28px));
|
|
padding: 0;
|
|
overflow: auto;
|
|
color: #203d3d;
|
|
background: #f4f8f7;
|
|
border: 1px solid #dce8e6;
|
|
border-radius: 24px;
|
|
box-shadow: 0 30px 80px rgba(17, 52, 52, 0.28);
|
|
}
|
|
|
|
.v2-nfc-dialog > header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 3;
|
|
padding: 22px 24px 17px;
|
|
background: rgba(248, 251, 250, 0.94);
|
|
border-bottom: 1px solid #e0e9e7;
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.v2-nfc-dialog > header h2 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.v2-nfc-stage {
|
|
margin: 20px 24px 16px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
border: 1px solid #dfe9e7;
|
|
border-radius: 19px;
|
|
box-shadow: 0 12px 32px rgba(30, 73, 71, 0.07);
|
|
}
|
|
|
|
.v2-nfc-stage > header {
|
|
display: grid;
|
|
grid-template-columns: 46px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 15px 17px;
|
|
background: linear-gradient(135deg, #153b3c, #1c514e);
|
|
}
|
|
|
|
.v2-nfc-stage > header > span {
|
|
width: 46px;
|
|
height: 46px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #99e6de;
|
|
background: rgba(114, 219, 208, 0.12);
|
|
border: 1px solid rgba(139, 230, 221, 0.16);
|
|
border-radius: 13px;
|
|
}
|
|
|
|
.v2-nfc-stage > header svg {
|
|
width: 22px;
|
|
}
|
|
|
|
.v2-nfc-stage > header > div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.v2-nfc-stage > header small {
|
|
color: #76c5bd;
|
|
font: 850 9px/1.2 "SFMono-Regular", Consolas, monospace;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.v2-nfc-stage > header h3 {
|
|
margin: 3px 0;
|
|
color: #f5fffd;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.v2-nfc-stage > header p {
|
|
margin: 0;
|
|
color: #a5c5c1;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.v2-nfc-stage > header > b {
|
|
padding: 6px 8px;
|
|
color: #9cb3b0;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 7px;
|
|
font: 850 8px "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
.v2-nfc-stage > header > b[data-state="online"] {
|
|
color: #8de8c1;
|
|
background: rgba(52, 202, 147, 0.11);
|
|
}
|
|
|
|
.v2-nfc-body {
|
|
min-height: 260px;
|
|
padding: 18px;
|
|
}
|
|
|
|
.v2-nfc-waiting {
|
|
min-height: 224px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
text-align: left;
|
|
}
|
|
|
|
.v2-nfc-reader-visual {
|
|
position: relative;
|
|
width: 104px;
|
|
height: 104px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #177d76;
|
|
background: radial-gradient(circle, #ecf9f7 0 31%, #dff3ef 32% 43%, #f5fbfa 44%);
|
|
border: 1px solid #d6eeea;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.v2-nfc-reader-visual svg {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.v2-nfc-reader-visual b {
|
|
position: absolute;
|
|
inset: 18px;
|
|
border: 1px solid rgba(38, 156, 144, 0.28);
|
|
border-radius: 22px;
|
|
animation: extension-nfc-pulse 1.8s ease-out infinite;
|
|
}
|
|
|
|
.v2-nfc-reader-visual b:last-child {
|
|
animation-delay: 900ms;
|
|
}
|
|
|
|
.v2-nfc-waiting.offline .v2-nfc-reader-visual,
|
|
.v2-nfc-waiting.offline .v2-nfc-reader-visual b {
|
|
color: #879a98;
|
|
border-color: #dce5e3;
|
|
animation: none;
|
|
}
|
|
|
|
.v2-nfc-waiting > div {
|
|
max-width: 390px;
|
|
}
|
|
|
|
.v2-nfc-waiting small,
|
|
.v2-nfc-detected-heading small,
|
|
.v2-nfc-recognized-heading small,
|
|
.v2-nfc-capability-heading small {
|
|
color: #6f9793;
|
|
font: 850 9px/1.3 "SFMono-Regular", Consolas, monospace;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.v2-nfc-waiting strong {
|
|
display: block;
|
|
margin: 7px 0 6px;
|
|
color: #183f3e;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.v2-nfc-waiting p {
|
|
margin: 0;
|
|
color: #6c8381;
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.v2-nfc-detected-heading,
|
|
.v2-nfc-recognized-heading {
|
|
display: grid;
|
|
grid-template-columns: 54px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 16px;
|
|
background: #f6faf9;
|
|
border: 1px solid #e2ecea;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.v2-nfc-detected-heading > span,
|
|
.v2-nfc-recognized-heading > span {
|
|
width: 54px;
|
|
height: 54px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #147a73;
|
|
background: #e3f4f1;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.v2-nfc-detected-heading svg,
|
|
.v2-nfc-recognized-heading svg {
|
|
width: 25px;
|
|
}
|
|
|
|
.v2-nfc-recognized-heading > i,
|
|
.v2-nfc-recognized-heading > i svg {
|
|
width: 27px;
|
|
height: 27px;
|
|
color: #27a878;
|
|
}
|
|
|
|
.v2-nfc-detected-heading strong,
|
|
.v2-nfc-recognized-heading strong {
|
|
display: block;
|
|
margin: 3px 0;
|
|
color: #183f3e;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.v2-nfc-detected-heading p,
|
|
.v2-nfc-recognized-heading p {
|
|
margin: 0;
|
|
color: #718784;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.v2-nfc-create-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr;
|
|
gap: 12px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.v2-nfc-create-grid label,
|
|
.v2-nfc-existing {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.v2-nfc-create-grid label > span,
|
|
.v2-nfc-existing > span {
|
|
color: #55706e;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.v2-nfc-create-grid input,
|
|
.v2-nfc-create-grid select,
|
|
.v2-nfc-existing select {
|
|
width: 100%;
|
|
height: 42px;
|
|
padding: 0 12px;
|
|
color: #183d3b;
|
|
background: #fff;
|
|
border: 1px solid #d5e3e0;
|
|
border-radius: 10px;
|
|
outline: none;
|
|
}
|
|
|
|
.v2-nfc-create-grid input:focus,
|
|
.v2-nfc-create-grid select:focus,
|
|
.v2-nfc-existing select:focus {
|
|
border-color: #42a69d;
|
|
box-shadow: 0 0 0 3px rgba(66, 166, 157, 0.1);
|
|
}
|
|
|
|
.v2-nfc-primary-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.v2-nfc-primary-actions button,
|
|
.v2-nfc-recognized-actions button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.v2-nfc-primary-actions svg,
|
|
.v2-nfc-recognized-actions svg {
|
|
width: 15px;
|
|
}
|
|
|
|
.v2-nfc-existing {
|
|
margin-top: 14px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid #e3ecea;
|
|
}
|
|
|
|
.v2-nfc-existing > div {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.v2-nfc-existing button,
|
|
.v2-nfc-recognized-actions > button:last-child {
|
|
padding: 0 16px;
|
|
color: #3a6865;
|
|
background: #eef6f4;
|
|
border: 1px solid #d4e5e2;
|
|
border-radius: 10px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-nfc-capability-heading {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin: 18px 2px 10px;
|
|
}
|
|
|
|
.v2-nfc-capability-heading strong {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: #193f3d;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.v2-nfc-capability-heading > span {
|
|
color: #4d817c;
|
|
font-size: 10px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.v2-nfc-capability-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.v2-nfc-capability-card {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
background: #f7faf9;
|
|
border: 1px solid #e1eae8;
|
|
border-radius: 11px;
|
|
transition: 150ms ease;
|
|
}
|
|
|
|
.v2-nfc-capability-card:hover {
|
|
transform: translateY(-1px);
|
|
border-color: #91c8c1;
|
|
box-shadow: 0 6px 16px rgba(34, 93, 88, 0.08);
|
|
}
|
|
|
|
.v2-nfc-capability-card.learned {
|
|
background: #f0faf6;
|
|
border-color: #cfe9de;
|
|
}
|
|
|
|
.v2-nfc-capability-primary {
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 62px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 18px;
|
|
grid-template-rows: auto auto;
|
|
gap: 3px 8px;
|
|
padding: 10px 11px;
|
|
text-align: left;
|
|
background: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.v2-nfc-capability-primary span {
|
|
overflow: hidden;
|
|
color: #244744;
|
|
font-size: 11px;
|
|
font-weight: 850;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-nfc-capability-primary small {
|
|
overflow: hidden;
|
|
color: #78908d;
|
|
font-size: 8px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.v2-nfc-capability-primary svg {
|
|
grid-column: 2;
|
|
grid-row: 1 / 3;
|
|
align-self: center;
|
|
width: 15px;
|
|
color: #3c988e;
|
|
}
|
|
|
|
.v2-nfc-capability-card.pending .v2-nfc-capability-primary svg {
|
|
color: #9baaa8;
|
|
}
|
|
|
|
.v2-nfc-relearn {
|
|
width: 100%;
|
|
min-height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
padding: 5px 9px;
|
|
color: #397b75;
|
|
background: rgba(255, 255, 255, 0.58);
|
|
border: 0;
|
|
border-top: 1px solid #d9ebe4;
|
|
cursor: pointer;
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.v2-nfc-relearn:hover {
|
|
color: #175f59;
|
|
background: #fff;
|
|
}
|
|
|
|
.v2-nfc-relearn svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.v2-nfc-recognized-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.v2-nfc-recognized-actions button {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.v2-nfc-recognized-actions button:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
.v2-nfc-footnote {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0 24px 22px;
|
|
color: #738a87;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.v2-nfc-footnote svg {
|
|
width: 15px;
|
|
color: #398e86;
|
|
}
|
|
|
|
@keyframes extension-nfc-pulse {
|
|
from { transform: scale(0.72); opacity: 0.8; }
|
|
to { transform: scale(1.48); opacity: 0; }
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.v2-nfc-dialog {
|
|
width: calc(100vw - 14px);
|
|
max-height: calc(100dvh - 14px);
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.v2-nfc-dialog > header,
|
|
.v2-nfc-stage > header,
|
|
.v2-nfc-body {
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.v2-nfc-stage {
|
|
margin: 12px;
|
|
}
|
|
|
|
.v2-nfc-stage > header {
|
|
grid-template-columns: 40px minmax(0, 1fr);
|
|
}
|
|
|
|
.v2-nfc-stage > header > span {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.v2-nfc-stage > header > b {
|
|
grid-column: 1 / -1;
|
|
justify-self: start;
|
|
}
|
|
|
|
.v2-nfc-waiting {
|
|
min-height: 250px;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.v2-nfc-create-grid,
|
|
.v2-nfc-capability-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.v2-nfc-recognized-heading,
|
|
.v2-nfc-detected-heading {
|
|
grid-template-columns: 46px minmax(0, 1fr);
|
|
}
|
|
|
|
.v2-nfc-recognized-heading > span,
|
|
.v2-nfc-detected-heading > span {
|
|
width: 46px;
|
|
height: 46px;
|
|
}
|
|
|
|
.v2-nfc-recognized-heading > i {
|
|
display: none;
|
|
}
|
|
}
|