duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 23:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Polish wired editor UI and variable handling

Browse Source
This commit is contained in:
Lorenzune
2026-04-08 16:18:16 +02:00
parent 0ebd37d91b
commit 5e9e3e1e4c
22 changed files with 926 additions and 1029 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/index.css
+222 -48
View File
@@ -182,7 +182,7 @@ body {
@apply pointer-events-none relative h-[130px] w-[90px] bg-position-[center_-8px] bg-no-repeat;
}
.nitro-card-shell {
.nitro-card-shell:not(.nitro-wired) {
border: 2px solid #000 !important;
border-radius: 10px;
background: #f2f2eb;
@@ -192,7 +192,7 @@ body {
max-height: calc(100vh - 16px);
}
.nitro-card-header-shell {
.nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell {
border: 2px solid #3c88a6;
border-bottom-color: #000;
border-radius: 8px 8px 0 0;
@@ -200,7 +200,7 @@ body {
padding: 5px;
}
.nitro-card-header-shell.builders-club-card-header {
.nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell.builders-club-card-header {
border-color: #d79d2e;
border-bottom-color: #000;
background: linear-gradient(180deg, #d89f2d 0%, #c68515 100%);
@@ -274,7 +274,7 @@ body {
filter: brightness(0.96);
}
.nitro-card-content-shell {
.nitro-card-shell:not(.nitro-wired) .nitro-card-content-shell {
border: 0;
border-top: 0;
border-radius: 0 0 8px 8px;
@@ -283,8 +283,8 @@ body {
color: #000;
}
.nitro-card-shell,
.nitro-card-content-shell {
.nitro-card-shell:not(.nitro-wired),
.nitro-card-shell:not(.nitro-wired) .nitro-card-content-shell {
h1,
h2,
h3,
@@ -385,13 +385,13 @@ body {
}
@media (max-width: 991.98px) {
.nitro-card-shell {
.nitro-card-shell:not(.nitro-wired) {
width: min(calc(100vw - 16px), 100%) !important;
max-width: calc(100vw - 16px) !important;
max-height: calc(100vh - 16px) !important;
}
.nitro-card-header-shell {
.nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell {
padding: 4px;
}
@@ -403,7 +403,7 @@ body {
font-size: 17px;
}
.nitro-card-content-shell {
.nitro-card-shell:not(.nitro-wired) .nitro-card-content-shell {
padding: 8px !important;
}
@@ -417,8 +417,8 @@ body {
padding: 4px 9px;
}
.nitro-card-shell,
.nitro-card-content-shell {
.nitro-card-shell:not(.nitro-wired),
.nitro-card-shell:not(.nitro-wired) .nitro-card-content-shell {
p,
label,
li,
@@ -814,70 +814,190 @@ body {
}
.nitro-wired {
background: #d5d5d5;
border: 1px solid #8f8f8f !important;
background: #efefef;
border: 1px solid #8d8d8d !important;
border-radius: 6px !important;
box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 rgba(0, 0, 0, 0.18) !important;
box-shadow: inset 0 0 0 1px #fff !important;
color: #000;
outline: none !important;
overflow: hidden;
.nitro-wired__header {
min-height: 22px !important;
max-height: 22px !important;
background: linear-gradient(180deg, #f1f1f1 0%, #dfdfdf 45%, #c8c8c8 46%, #d7d7d7 100%) !important;
border-bottom: 1px solid #9b9b9b;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
padding-top: 0 !important;
min-height: 21px !important;
max-height: 21px !important;
position: absolute !important;
inset: 0 0 auto 0;
z-index: 3;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
pointer-events: auto;
span {
.nitro-card-title {
display: block;
color: #000 !important;
font-size: 12px !important;
font-weight: 700;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) !important;
letter-spacing: 0.01em;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 21px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
pointer-events: none;
}
> .flex::before {
content: none;
}
> .flex::after {
content: none;
}
.nitro-card-close-button {
right: 6px !important;
width: 18px;
height: 18px;
min-width: 18px;
border: 1px solid #777;
border-radius: 5px;
background: linear-gradient(180deg, #f9f9f9 0%, #cacaca 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.nitro-card-close-button::before,
.nitro-card-close-button::after {
left: 50%;
top: 50%;
width: 10px;
height: 2px;
background: #6a6a6a;
margin: 0;
}
}
.ubuntu-close-button {
transform: scale(0.82);
transform-origin: center;
.nitro-wired__content {
position: relative;
background: #efefef !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
gap: 0 !important;
overflow: visible !important;
}
.nitro-wired__content {
background: #d9d9d9 !important;
padding: 4px !important;
gap: 4px !important;
overflow: visible !important;
.nitro-wired__body {
display: flex;
flex-direction: column;
padding: 8px 10px 10px;
gap: 6px;
font-size: 12px;
line-height: 1.2;
}
.nitro-wired__section {
display: flex;
flex-direction: column;
gap: 3px;
gap: 5px;
}
.nitro-wired__summary {
position: relative;
min-height: 56px;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 22px 10px 7px 12px;
background: linear-gradient(180deg, #e5e5e5 0%, #d7d7d7 100%);
overflow: hidden;
color: #000;
}
.nitro-wired__summary-bg {
position: absolute;
width: auto;
height: auto;
top: 50%;
z-index: 0;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.nitro-wired__summary-bg--left {
left: 50%;
transform: translate(-150%, -50%);
opacity: 0.45;
}
.nitro-wired__summary-bg--right {
left: 50%;
top: 72%;
transform: translate(-46%, -50%);
opacity: 0.24;
}
.nitro-wired__summary-copy {
position: relative;
z-index: 1;
}
.nitro-wired__summary-copy {
display: flex;
flex-direction: column;
min-width: 0;
gap: 1px;
}
.nitro-wired__summary-kind {
color: #000;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.nitro-wired__summary-title {
color: #4a4a4a !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.02;
text-align: left !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
word-break: break-word;
}
.nitro-wired__section--body {
overflow: visible !important;
}
.nitro-wired__section .font-bold {
.nitro-wired__section .font-bold:not(.nitro-wired__summary-title) {
width: 100%;
font-weight: 400 !important;
text-align: center;
font-size: 13px !important;
font-weight: 700 !important;
text-align: left;
}
.nitro-wired__summary-description,
.nitro-wired__furni-selector-description,
.nitro-wired__picker-label {
font-size: 12px;
line-height: 1.15;
}
.nitro-wired__source-row,
.nitro-wired__give-var-section-title,
.nitro-wired__advanced-toggle {
font-size: 12px;
}
.nitro-wired__divider,
hr {
height: 1px;
border: 0;
background: #a6a6a6;
box-shadow: 0 1px 0 #f8f8f8;
background: #bababa;
box-shadow: 0 1px 0 #fff;
margin: 0 !important;
}
@@ -918,14 +1038,47 @@ body {
.form-check-input[type='checkbox']:checked,
input[type='checkbox']:checked {
background:
linear-gradient(135deg, transparent 0 46%, #ffffff 46% 54%, transparent 54% 100%),
linear-gradient(45deg, transparent 0 30%, #4a4a4a 30% 42%, transparent 42% 100%),
linear-gradient(180deg, #d9d9d9 0%, #c8c8c8 100%);
background: linear-gradient(180deg, #d9d9d9 0%, #c8c8c8 100%);
border-color: #767676;
}
.form-check-input[type='checkbox']:checked::before,
.form-check-input[type='checkbox']:checked::after,
input[type='checkbox']:checked::before,
input[type='checkbox']:checked::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 2px;
border-radius: 2px;
background: #111111;
transform-origin: center;
}
.form-check-input[type='checkbox']:checked::before,
input[type='checkbox']:checked::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.form-check-input[type='checkbox']:checked::after,
input[type='checkbox']:checked::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.form-check {
display: flex;
align-items: center;
gap: 4px;
}
.form-check-label {
margin-left: 1px;
}
.form-control,
.form-select,
input[type='text'],
input[type='number'],
textarea {
@@ -935,7 +1088,7 @@ body {
background: #f6f6f6 !important;
color: #000 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
font-size: 11px;
font-size: 12px;
padding: 3px 6px;
}
@@ -945,10 +1098,10 @@ body {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 20px !important;
min-height: 22px !important;
border: 1px solid #8e8e8e !important;
border-radius: 5px !important;
background: linear-gradient(180deg, #f6f6f6 0%, #e4e4e4 49%, #d0d0d0 50%, #ececec 100%) !important;
border-radius: 6px !important;
background: linear-gradient(180deg, #fcfcfc 0%, #e8e8e8 46%, #d5d5d5 47%, #efefef 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
color: #000 !important;
padding-top: 0 !important;
@@ -966,9 +1119,17 @@ body {
font-weight: 700;
}
&.nitro-card-shell {
resize: none !important;
}
.nitro-wired__actions {
padding-top: 2px;
}
.nitro-slider-wrapper {
align-items: center;
gap: 2px;
gap: 4px;
}
.nitro-wired__advanced-toggle {
@@ -1591,6 +1752,19 @@ body {
}
}
.nitro-card-shell.nitro-wired {
border: 1px solid #8d8d8d !important;
border-color: #8d8d8d !important;
box-shadow: inset 0 0 0 1px #fff !important;
outline: none !important;
}
.nitro-card-shell.nitro-wired .nitro-card-header-shell,
.nitro-card-shell.nitro-wired .nitro-card-content-shell {
border: 0 !important;
box-shadow: none !important;
}
/* ── Avatar Editor ─────────────────────────────────────────────────────── */
.color-picker-frame {