mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
feat: add advanced wired variable tools UI
This commit is contained in:
Lorenzune
@@ -615,6 +615,7 @@ body {
|
||||
background: #d9d9d9 !important;
|
||||
padding: 4px !important;
|
||||
gap: 4px !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.nitro-wired__section {
|
||||
@@ -623,6 +624,10 @@ body {
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.nitro-wired__section--body {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.nitro-wired__section .font-bold {
|
||||
width: 100%;
|
||||
font-weight: 400 !important;
|
||||
@@ -817,6 +822,513 @@ body {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-targets {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-target {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
padding: 0;
|
||||
border: 1px solid #8e8e8e;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
|
||||
transition: filter 0.12s ease-in-out;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-target:hover {
|
||||
filter: brightness(0.98);
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-target img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 12px;
|
||||
max-height: 12px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-target--furni.is-active {
|
||||
background: linear-gradient(180deg, #f7db6d 0%, #ddb948 100%);
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-target--user.is-active {
|
||||
background: linear-gradient(180deg, #74be68 0%, #4f9644 100%);
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-target--global.is-active {
|
||||
background: linear-gradient(180deg, #7bc4f0 0%, #5497d2 100%);
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-target--context.is-active {
|
||||
background: linear-gradient(180deg, #f0ad65 0%, #d68739 100%);
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-target.is-active {
|
||||
border-color: #4d4d4d;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-target:disabled {
|
||||
opacity: 0.72;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-select {
|
||||
min-height: 23px;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 23px;
|
||||
padding: 0 22px 0 8px;
|
||||
border: 1px solid #8e8e8e;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ededed 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-trigger::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -2px;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 5px solid #555;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-placeholder {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 2px);
|
||||
left: 0;
|
||||
z-index: 30;
|
||||
width: 202px;
|
||||
padding: 4px;
|
||||
border: 1px solid #8e8e8e;
|
||||
border-radius: 4px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-panel.is-portal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5001;
|
||||
margin: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid #d0d0d0;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-mode {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-mode.is-active {
|
||||
border-color: #8e8e8e;
|
||||
background: linear-gradient(180deg, #f3cc58 0%, #d2a93a 100%);
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-mode img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 13px;
|
||||
max-height: 13px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 24px;
|
||||
padding: 0 4px;
|
||||
margin-top: 4px;
|
||||
border: 1px solid #c4c4c4;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-search-icon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 10px;
|
||||
max-height: 10px;
|
||||
opacity: 0.75;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-search-input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-clear {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-clear img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 10px;
|
||||
max-height: 10px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-list,
|
||||
.nitro-wired__variable-picker-submenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 140px;
|
||||
margin-top: 4px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #c8c8c8;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
min-height: 20px;
|
||||
padding: 0 6px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-row:nth-child(even) {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-row:hover {
|
||||
background: #dfe8f6;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-row.is-selected {
|
||||
background: #d7dfea;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-row.is-disabled {
|
||||
color: #7b7b7b;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-row-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-row-arrow {
|
||||
flex: 0 0 auto;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 86px;
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-submenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
margin-top: 0;
|
||||
z-index: 5000;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-section-title {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-number {
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
min-height: 18px !important;
|
||||
height: 18px;
|
||||
padding: 0 4px !important;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nitro-wired__give-var-number--blurred {
|
||||
filter: blur(0.8px) !important;
|
||||
opacity: 0.78;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nitro-wired__resizable-textarea {
|
||||
min-height: 140px !important;
|
||||
resize: vertical !important;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-chevron {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.12s ease;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-chevron.is-open {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-section-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-mode-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-mode-block.is-inactive {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-mode-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-field-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-number {
|
||||
width: 74px;
|
||||
min-width: 74px;
|
||||
min-height: 20px !important;
|
||||
height: 20px;
|
||||
padding: 0 6px !important;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-textarea {
|
||||
min-height: 88px !important;
|
||||
resize: vertical !important;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-preview {
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-preview-entry {
|
||||
padding: 1px 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-subvariables {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-subvariable-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-subvariable-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nitro-wired__levelup-subvariable-token {
|
||||
width: 96px;
|
||||
min-width: 96px;
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #cfcfcf;
|
||||
border-radius: 6px;
|
||||
background: #f3f3f3;
|
||||
color: #9a9a9a;
|
||||
font-size: 11px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.nitro-wired__placeholder-preview {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #b7b7b7;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(180deg, #fbfbfb 0%, #efefef 100%);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
|
||||
.nitro-wired__placeholder-preview:hover {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
|
||||
border-color: #909090;
|
||||
}
|
||||
|
||||
.nitro-wired__placeholder-preview.is-copied {
|
||||
border-color: #73a753;
|
||||
background: linear-gradient(180deg, #f8fff2 0%, #eef9e2 100%);
|
||||
}
|
||||
|
||||
.nitro-wired__change-var-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nitro-wired__change-var-reference-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nitro-slider {
|
||||
height: 16px;
|
||||
}
|
||||
@@ -973,6 +1485,18 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-wired__variable-picker-portal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 5000;
|
||||
pointer-events: none;
|
||||
overflow: visible !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ── Avatar Editor misc ─────────────────────────────────────────────────── */
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user