2031 lines
36 KiB
CSS
2031 lines
36 KiB
CSS
.image-node-toolbar {
|
|
position: absolute;
|
|
z-index: 18;
|
|
min-height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
max-width: min(1180px, calc(100vw - 28px));
|
|
padding: 4px;
|
|
overflow-x: auto;
|
|
border: 1px solid rgba(226, 230, 236, 0.95);
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow: 0 12px 34px rgba(17, 24, 39, 0.16);
|
|
transform: translateX(-50%);
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.image-node-toolbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.image-node-toolbar button {
|
|
height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
flex: 0 0 auto;
|
|
padding: 0 10px;
|
|
border-radius: 7px;
|
|
color: #2f3640;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.image-node-toolbar button span {
|
|
min-width: 0;
|
|
}
|
|
|
|
.image-node-toolbar button:hover,
|
|
.image-node-toolbar button:focus-visible {
|
|
color: #141820;
|
|
background: rgba(12, 12, 13, 0.06);
|
|
}
|
|
|
|
.image-node-toolbar button:disabled {
|
|
color: #a5abb5;
|
|
cursor: not-allowed;
|
|
background: transparent;
|
|
}
|
|
|
|
.image-node-toolbar .toolbar-primary-item {
|
|
padding-right: 13px;
|
|
border-right: 1px solid #eceff3;
|
|
border-radius: 7px 0 0 7px;
|
|
}
|
|
|
|
.image-node-toolbar .toolbar-icon-item {
|
|
width: 32px;
|
|
padding: 0;
|
|
}
|
|
|
|
.image-node-toolbar.hide-tool-labels button:not(.toolbar-icon-item) {
|
|
width: 32px;
|
|
padding: 0;
|
|
}
|
|
|
|
.image-node-toolbar.hide-tool-labels button:not(.toolbar-icon-item) span {
|
|
display: none;
|
|
}
|
|
|
|
.image-node-toolbar.hide-tool-labels .toolbar-primary-item {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.vector-result-toolbar {
|
|
position: absolute;
|
|
z-index: 18;
|
|
min-height: 46px;
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(226, 230, 236, 0.96);
|
|
border-radius: 22px;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow: 0 12px 34px rgba(17, 24, 39, 0.14);
|
|
transform: translateX(-50%);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.vector-result-label,
|
|
.vector-result-toolbar button {
|
|
min-width: 68px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 0 20px;
|
|
color: #252932;
|
|
font-size: 18px;
|
|
font-weight: 620;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.vector-result-toolbar button {
|
|
min-width: 54px;
|
|
padding: 0 17px;
|
|
border-left: 1px solid rgba(229, 232, 238, 0.94);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.vector-result-toolbar button:hover,
|
|
.vector-result-toolbar button:focus-visible {
|
|
background: rgba(12, 12, 13, 0.06);
|
|
}
|
|
|
|
.toolbar-more-trigger {
|
|
position: relative;
|
|
}
|
|
|
|
.toolbar-trigger-dot {
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 5px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: #ff4b3e;
|
|
}
|
|
|
|
.image-tool-popover {
|
|
z-index: 80;
|
|
display: grid;
|
|
gap: 6px;
|
|
min-width: 118px;
|
|
padding: 8px;
|
|
border: 1px solid #e2e6ec;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
box-shadow: 0 18px 44px rgba(17, 24, 39, 0.16);
|
|
}
|
|
|
|
.image-tool-popover button {
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 9px;
|
|
border-radius: 7px;
|
|
color: #2d3440;
|
|
background: transparent;
|
|
font-size: 12px;
|
|
font-weight: 820;
|
|
}
|
|
|
|
.image-tool-popover button:hover {
|
|
background: #f2f4f7;
|
|
}
|
|
|
|
.image-toolbar-more-popover {
|
|
z-index: 80;
|
|
display: grid;
|
|
gap: 8px;
|
|
width: 248px;
|
|
padding: 8px;
|
|
border: 1px solid #e2e6ec;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
box-shadow: 0 18px 48px rgba(17, 24, 39, 0.18);
|
|
}
|
|
|
|
.toolbar-more-list {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.toolbar-more-list button {
|
|
min-height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 0 9px;
|
|
border-radius: 8px;
|
|
color: #2d3440;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
text-align: left;
|
|
}
|
|
|
|
.toolbar-more-list button span {
|
|
flex: 1;
|
|
}
|
|
|
|
.toolbar-more-list button:hover {
|
|
background: #f2f4f7;
|
|
}
|
|
|
|
.toolbar-menu-separator {
|
|
height: 1px;
|
|
background: #eceff3;
|
|
}
|
|
|
|
.image-action-panel {
|
|
position: absolute;
|
|
z-index: 19;
|
|
border: 1px solid #dfe3ea;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow: 0 14px 36px rgba(17, 24, 39, 0.13);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.mask-control-panel {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto auto;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.mask-control-panel input[type="text"],
|
|
.mask-control-panel input:not([type]),
|
|
.image-side-panel input {
|
|
min-width: 0;
|
|
height: 34px;
|
|
border: 1px solid #e2e6ec;
|
|
border-radius: 8px;
|
|
padding: 0 10px;
|
|
outline: 0;
|
|
color: #20252e;
|
|
background: #fff;
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.quick-edit-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 96px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border-color: rgba(223, 227, 234, 0.96);
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.985);
|
|
box-shadow:
|
|
0 1px 2px rgba(17, 24, 39, 0.08),
|
|
0 18px 44px rgba(17, 24, 39, 0.14);
|
|
}
|
|
|
|
.quick-edit-editor-shell {
|
|
min-height: 58px;
|
|
padding: 12px 16px 4px;
|
|
}
|
|
|
|
.quick-edit-panel textarea {
|
|
width: 100%;
|
|
min-height: 48px;
|
|
max-height: 142px;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
resize: none;
|
|
background: transparent;
|
|
color: #272c35;
|
|
font: inherit;
|
|
font-size: 14px;
|
|
font-weight: 450;
|
|
line-height: 25px;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.quick-edit-panel textarea::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.quick-edit-panel textarea::placeholder {
|
|
color: #9aa1ad;
|
|
}
|
|
|
|
.quick-edit-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 0 6px 6px 8px;
|
|
}
|
|
|
|
.quick-edit-run-button {
|
|
display: inline-flex;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: #303030;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 560;
|
|
line-height: 18px;
|
|
transition:
|
|
background-color 150ms ease,
|
|
opacity 150ms ease;
|
|
}
|
|
|
|
.quick-edit-run-button:hover:not(:disabled) {
|
|
background: #444;
|
|
}
|
|
|
|
.quick-edit-run-button:disabled {
|
|
cursor: default;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.quick-edit-credit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 1px;
|
|
padding-left: 2px;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
}
|
|
|
|
.mask-control-panel input[type="range"],
|
|
.labeled-slider input {
|
|
accent-color: #111;
|
|
}
|
|
|
|
.eraser-control-toolbar {
|
|
min-height: 58px;
|
|
width: max-content;
|
|
max-width: calc(100vw - 64px);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
overflow: visible;
|
|
border-color: rgba(212, 217, 225, 0.95);
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 16px 42px rgba(17, 24, 39, 0.15);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.eraser-control-title {
|
|
height: 36px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 0 6px;
|
|
color: #2f3640;
|
|
font-size: 15px;
|
|
font-weight: 720;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.eraser-control-title svg {
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.eraser-control-separator {
|
|
width: 1px;
|
|
height: 28px;
|
|
background: #eceff3;
|
|
}
|
|
|
|
.eraser-brush-button,
|
|
.eraser-color-button,
|
|
.eraser-reset-button,
|
|
.eraser-apply-button {
|
|
flex: 0 0 auto;
|
|
height: 40px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.eraser-brush-button,
|
|
.eraser-color-button,
|
|
.eraser-reset-button {
|
|
width: 40px;
|
|
color: #4a5360;
|
|
background: transparent;
|
|
}
|
|
|
|
.eraser-brush-button.active {
|
|
color: #2f3640;
|
|
background: #e8ebef;
|
|
}
|
|
|
|
.eraser-reset-button:hover:not(:disabled),
|
|
.eraser-brush-button:hover:not(:disabled),
|
|
.eraser-color-button:hover:not(:disabled) {
|
|
background: #f1f3f6;
|
|
}
|
|
|
|
.eraser-color-button {
|
|
background: transparent;
|
|
}
|
|
|
|
.eraser-color-swatch {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: block;
|
|
border: 1px solid rgba(17, 24, 39, 0.14);
|
|
border-radius: 999px;
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.64),
|
|
0 1px 4px rgba(17, 24, 39, 0.12);
|
|
}
|
|
|
|
.eraser-reset-button:disabled,
|
|
.eraser-apply-button:disabled {
|
|
opacity: 0.42;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.eraser-size-slider {
|
|
flex: 0 0 132px;
|
|
width: 132px;
|
|
accent-color: #6daaf8;
|
|
}
|
|
|
|
.eraser-apply-button {
|
|
min-width: 66px;
|
|
padding: 0 14px;
|
|
color: #fff;
|
|
background: #2f3640;
|
|
font-size: 14px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.eraser-apply-button:hover:not(:disabled) {
|
|
background: #171d26;
|
|
}
|
|
|
|
.ghost-panel-button,
|
|
.panel-primary-button {
|
|
height: 34px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.ghost-panel-button {
|
|
min-width: 34px;
|
|
color: #5f6672;
|
|
background: #f4f6f8;
|
|
}
|
|
|
|
.panel-primary-button {
|
|
min-width: 34px;
|
|
color: #fff;
|
|
background: #050505;
|
|
}
|
|
|
|
.panel-primary-button.text {
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.panel-primary-button.full {
|
|
width: 100%;
|
|
}
|
|
|
|
.image-mask-overlay {
|
|
position: absolute;
|
|
z-index: 17;
|
|
overflow: hidden;
|
|
border: 1px dashed rgba(47, 128, 255, 0.72);
|
|
background: rgba(47, 128, 255, 0.08);
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.mockup-drop-overlay {
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: visible;
|
|
border: 2px solid rgba(47, 128, 255, 0.95);
|
|
border-radius: 2px;
|
|
background: rgba(47, 128, 255, 0.06);
|
|
pointer-events: none;
|
|
transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
|
|
}
|
|
|
|
.mockup-drop-overlay.active {
|
|
border-color: #2f80ff;
|
|
background: rgba(47, 128, 255, 0.12);
|
|
box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.12);
|
|
}
|
|
|
|
.mockup-drop-overlay.compact {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.mockup-slot-handle {
|
|
position: absolute;
|
|
width: 9px;
|
|
height: 9px;
|
|
border: 2px solid #2f80ff;
|
|
background: #fff;
|
|
box-shadow: 0 1px 4px rgba(17, 24, 39, 0.18);
|
|
}
|
|
|
|
.mockup-slot-handle.top-left {
|
|
left: -6px;
|
|
top: -6px;
|
|
}
|
|
|
|
.mockup-slot-handle.top-right {
|
|
right: -6px;
|
|
top: -6px;
|
|
}
|
|
|
|
.mockup-slot-handle.bottom-left {
|
|
left: -6px;
|
|
bottom: -6px;
|
|
}
|
|
|
|
.mockup-slot-handle.bottom-right {
|
|
right: -6px;
|
|
bottom: -6px;
|
|
}
|
|
|
|
.mockup-drop-chip {
|
|
max-width: calc(100% - 32px);
|
|
min-height: 34px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 0 13px;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
background: rgba(38, 42, 51, 0.62);
|
|
box-shadow: 0 10px 28px rgba(17, 24, 39, 0.18);
|
|
font-size: 13px;
|
|
font-weight: 720;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.mockup-drop-overlay.compact .mockup-drop-chip {
|
|
min-height: 28px;
|
|
padding: 0 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.mockup-drop-chip span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.image-mask-overlay.eraser-mask-overlay {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
.eraser-shortcut-hint {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 64px;
|
|
z-index: 160;
|
|
max-width: calc(100vw - 48px);
|
|
height: 72px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 22px;
|
|
border: 1px solid rgba(229, 232, 238, 0.94);
|
|
border-radius: 22px;
|
|
color: #2f3640;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 18px 44px rgba(17, 24, 39, 0.1);
|
|
font-size: 18px;
|
|
font-weight: 520;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
transform: translateX(-50%);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.eraser-shortcut-hint kbd {
|
|
min-width: 58px;
|
|
height: 42px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 12px;
|
|
border: 1px solid rgba(214, 219, 228, 0.92);
|
|
border-radius: 8px;
|
|
color: #59616d;
|
|
background: linear-gradient(180deg, #fff, #f7f8fa);
|
|
box-shadow:
|
|
0 1px 1px rgba(17, 24, 39, 0.04),
|
|
inset 0 -2px 0 rgba(17, 24, 39, 0.04);
|
|
font-family: inherit;
|
|
font-size: 18px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.eraser-brush-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.eraser-brush-path {
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-miterlimit: 1;
|
|
vector-effect: non-scaling-stroke;
|
|
shape-rendering: geometricPrecision;
|
|
}
|
|
|
|
.eraser-brush-cursor {
|
|
fill: rgba(94, 108, 255, 0.66);
|
|
stroke: rgba(255, 255, 255, 0.88);
|
|
stroke-width: 2;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.eraser-brush-cursor[data-subtracting="true"] {
|
|
fill: transparent;
|
|
stroke: #fff;
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
.mask-mark {
|
|
position: absolute;
|
|
display: block;
|
|
border-radius: 999px;
|
|
background: rgba(75, 139, 255, 0.32);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(75, 139, 255, 0.48),
|
|
0 0 0 1px rgba(255, 255, 255, 0.32);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.move-object-overlay {
|
|
overflow: hidden;
|
|
border: 0;
|
|
background: transparent;
|
|
touch-action: none;
|
|
}
|
|
|
|
.move-object-canvas-layer {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.move-destination-frame {
|
|
position: absolute;
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
box-sizing: border-box;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.move-destination-frame > div {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.move-destination-handle {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #fff;
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.move-destination-handle.top-left {
|
|
top: -5px;
|
|
left: -5px;
|
|
}
|
|
|
|
.move-destination-handle.top-right {
|
|
top: -5px;
|
|
right: -5px;
|
|
}
|
|
|
|
.move-destination-handle.bottom-right {
|
|
right: -5px;
|
|
bottom: -5px;
|
|
}
|
|
|
|
.move-destination-handle.bottom-left {
|
|
bottom: -5px;
|
|
left: -5px;
|
|
}
|
|
|
|
.move-object-panel {
|
|
width: 300px;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.move-object-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.move-object-panel-header strong {
|
|
flex: 1;
|
|
color: #20242a;
|
|
font-size: 16px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.move-object-panel-header button {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
color: #70757d;
|
|
background: transparent;
|
|
}
|
|
|
|
.move-object-panel-header button:hover:not(:disabled) {
|
|
background: #f2f3f5;
|
|
}
|
|
|
|
.move-object-panel-header button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.move-object-field-label,
|
|
.move-object-recognition-row {
|
|
min-width: 0;
|
|
}
|
|
|
|
.move-object-field-label {
|
|
color: #6f737b;
|
|
font-size: 14px;
|
|
font-weight: 560;
|
|
}
|
|
|
|
.move-object-panel input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 36px;
|
|
border: 1px solid #e3e5e8;
|
|
border-radius: 10px;
|
|
padding: 0 12px;
|
|
outline: 0;
|
|
color: #20252e;
|
|
background: #fff;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
}
|
|
|
|
.move-object-recognition-row {
|
|
min-height: 38px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 10px;
|
|
border-radius: 10px;
|
|
color: #16191f;
|
|
background: #f3f3f3;
|
|
font-size: 14px;
|
|
font-weight: 560;
|
|
}
|
|
|
|
.move-object-thumb {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
flex: 0 0 auto;
|
|
overflow: hidden;
|
|
border-radius: 7px;
|
|
color: #6b7280;
|
|
background: #e7e7e7;
|
|
}
|
|
|
|
.move-object-panel .move-object-label-input {
|
|
flex: 1 1 auto;
|
|
height: 34px;
|
|
min-width: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
outline: 0;
|
|
color: #16191f;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.move-object-panel .move-object-label-input::placeholder {
|
|
color: #858a93;
|
|
font-weight: 560;
|
|
}
|
|
|
|
.move-object-reselect-button {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
flex: 0 0 auto;
|
|
border-radius: 8px;
|
|
color: #73777f;
|
|
background: transparent;
|
|
}
|
|
|
|
.move-object-reselect-button:hover:not(:disabled) {
|
|
color: #282d35;
|
|
background: rgba(17, 24, 39, 0.06);
|
|
}
|
|
|
|
.move-object-reselect-button:disabled {
|
|
opacity: 0.44;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.move-object-reselect-button > svg {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.move-object-hint {
|
|
color: #a2a5ab;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.move-object-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.6fr;
|
|
gap: 10px;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.move-object-actions .ghost-panel-button,
|
|
.move-object-actions .panel-primary-button {
|
|
height: 42px;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.move-object-actions .panel-primary-button {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.move-object-credit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.crop-overlay {
|
|
overflow: visible;
|
|
border: 0;
|
|
background: transparent;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.crop-selection {
|
|
position: absolute;
|
|
min-width: 12px;
|
|
min-height: 12px;
|
|
border: 1.5px solid rgba(255, 255, 255, 0.98);
|
|
background: transparent;
|
|
box-shadow:
|
|
0 0 0 1px rgba(17, 24, 39, 0.18),
|
|
0 0 0 9999px rgba(13, 14, 16, 0.38);
|
|
cursor: move;
|
|
touch-action: none;
|
|
}
|
|
|
|
.crop-selection::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 1px solid rgba(47, 128, 255, 0.18);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.crop-rule {
|
|
position: absolute;
|
|
display: block;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.crop-rule-v {
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
}
|
|
|
|
.crop-rule-v.first {
|
|
left: 33.333%;
|
|
}
|
|
|
|
.crop-rule-v.second {
|
|
left: 66.666%;
|
|
}
|
|
|
|
.crop-rule-h {
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
}
|
|
|
|
.crop-rule-h.first {
|
|
top: 33.333%;
|
|
}
|
|
|
|
.crop-rule-h.second {
|
|
top: 66.666%;
|
|
}
|
|
|
|
.crop-resize-handle {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 12px;
|
|
height: 12px;
|
|
padding: 0;
|
|
border: 1.5px solid rgba(180, 185, 194, 0.95);
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
box-shadow: 0 1px 6px rgba(17, 24, 39, 0.18);
|
|
touch-action: none;
|
|
}
|
|
|
|
.crop-resize-handle.handle-top-left {
|
|
left: 0;
|
|
top: 0;
|
|
transform: translate(-50%, -50%);
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.crop-resize-handle.handle-top {
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translate(-50%, -50%);
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
.crop-resize-handle.handle-top-right {
|
|
right: 0;
|
|
top: 0;
|
|
transform: translate(50%, -50%);
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
.crop-resize-handle.handle-right {
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translate(50%, -50%);
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.crop-resize-handle.handle-bottom-right {
|
|
right: 0;
|
|
bottom: 0;
|
|
transform: translate(50%, 50%);
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.crop-resize-handle.handle-bottom {
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translate(-50%, 50%);
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
.crop-resize-handle.handle-bottom-left {
|
|
left: 0;
|
|
bottom: 0;
|
|
transform: translate(-50%, 50%);
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
.crop-resize-handle.handle-left {
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.crop-resize-handle:hover,
|
|
.crop-resize-handle:focus-visible {
|
|
border-color: rgba(47, 128, 255, 0.86);
|
|
outline: none;
|
|
}
|
|
|
|
.crop-toolbar-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border-color: rgba(224, 226, 230, 0.98);
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow:
|
|
0 1px 2px rgba(17, 24, 39, 0.08),
|
|
0 18px 42px rgba(17, 24, 39, 0.14);
|
|
transform: none;
|
|
}
|
|
|
|
.crop-node-meta {
|
|
position: absolute;
|
|
z-index: 19;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
color: #4b8cff;
|
|
font-size: 15px;
|
|
font-weight: 560;
|
|
line-height: 22px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.crop-node-title {
|
|
min-width: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.crop-node-title svg {
|
|
flex: 0 0 auto;
|
|
fill: #4b8cff;
|
|
stroke: #4b8cff;
|
|
}
|
|
|
|
.crop-node-size {
|
|
flex: 0 0 auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.crop-toolbar-header {
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.crop-toolbar-header strong {
|
|
color: #1f2329;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.crop-size-row {
|
|
display: grid;
|
|
grid-template-columns: 97px 28px 97px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
padding: 0 7px 12px;
|
|
}
|
|
|
|
.crop-size-input {
|
|
min-width: 0;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0 8px;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
background: #f4f4f5;
|
|
color: #30343a;
|
|
}
|
|
|
|
.crop-size-input span {
|
|
flex: 0 0 auto;
|
|
color: #6f747c;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.crop-size-input input {
|
|
min-width: 0;
|
|
width: 100%;
|
|
border: 0;
|
|
outline: 0;
|
|
color: #2b3036;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
font-weight: 560;
|
|
line-height: 1;
|
|
}
|
|
|
|
.crop-aspect-button {
|
|
width: 28px;
|
|
height: 32px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
color: #7b8088;
|
|
background: transparent;
|
|
}
|
|
|
|
.crop-aspect-button:hover:not(:disabled),
|
|
.crop-aspect-button.active {
|
|
color: #2f343b;
|
|
background: #f1f2f4;
|
|
}
|
|
|
|
.crop-presets {
|
|
min-height: 0;
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.crop-presets-title {
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
color: #70757d;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
}
|
|
|
|
.crop-presets-list {
|
|
max-height: min(400px, calc(100vh - 320px));
|
|
overflow-y: auto;
|
|
padding-bottom: 8px;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.crop-presets-list::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.crop-presets-list::-webkit-scrollbar-thumb {
|
|
border: 2px solid #fff;
|
|
border-radius: 999px;
|
|
background: #c6c8cc;
|
|
}
|
|
|
|
.crop-preset-group-trigger {
|
|
width: 100%;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 8px;
|
|
border-radius: 8px;
|
|
color: #2c3036;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
text-align: left;
|
|
}
|
|
|
|
.crop-preset-group-trigger:hover:not(:disabled),
|
|
.crop-preset-group.open .crop-preset-group-trigger {
|
|
background: #f4f4f5;
|
|
}
|
|
|
|
.crop-preset-chevron {
|
|
width: 14px;
|
|
color: #727780;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
transition: transform 0.16s ease;
|
|
}
|
|
|
|
.crop-preset-group.open .crop-preset-chevron {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.crop-preset-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 0 4px 6px 37px;
|
|
}
|
|
|
|
.crop-preset-option {
|
|
min-width: 0;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
overflow: hidden;
|
|
padding: 0 0 0 2px;
|
|
border-radius: 8px;
|
|
color: #30343a;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.crop-preset-option:hover:not(:disabled) {
|
|
color: #171b21;
|
|
background: #f4f4f5;
|
|
}
|
|
|
|
.crop-preset-option-icon {
|
|
flex: 0 0 auto;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 5px;
|
|
color: #6f747c;
|
|
background: #f4f4f5;
|
|
}
|
|
|
|
.crop-preset-option-label {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: left;
|
|
}
|
|
|
|
.crop-preset-option-size {
|
|
flex: 0 0 auto;
|
|
color: #777b82;
|
|
font-size: 12px;
|
|
font-weight: 480;
|
|
}
|
|
|
|
.crop-toolbar-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
padding: 12px 12px;
|
|
border-top: 1px solid transparent;
|
|
}
|
|
|
|
.crop-cancel-button,
|
|
.crop-apply-button {
|
|
height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
}
|
|
|
|
.crop-cancel-button {
|
|
border: 1px solid #dedfe3;
|
|
color: #343940;
|
|
background: #fff;
|
|
}
|
|
|
|
.crop-cancel-button:hover:not(:disabled) {
|
|
background: #f7f8fa;
|
|
}
|
|
|
|
.crop-apply-button {
|
|
color: #fff;
|
|
background: #2f2f31;
|
|
}
|
|
|
|
.crop-apply-button:hover:not(:disabled) {
|
|
background: #18191b;
|
|
}
|
|
|
|
.expand-canvas-overlay {
|
|
position: absolute;
|
|
z-index: 30;
|
|
overflow: visible;
|
|
pointer-events: auto;
|
|
touch-action: none;
|
|
}
|
|
|
|
.expand-mask-layer,
|
|
.expand-frame-layer,
|
|
.expand-source-frame {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.expand-source-preview {
|
|
position: absolute;
|
|
overflow: visible;
|
|
cursor: move;
|
|
touch-action: none;
|
|
}
|
|
|
|
.expand-source-preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: fill;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.expand-node-meta {
|
|
position: absolute;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
color: #4b8cff;
|
|
font-size: 15px;
|
|
font-weight: 560;
|
|
line-height: 22px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.expand-node-title {
|
|
min-width: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.expand-node-title svg {
|
|
flex: 0 0 auto;
|
|
fill: #4b8cff;
|
|
stroke: #4b8cff;
|
|
}
|
|
|
|
.expand-node-size {
|
|
flex: 0 0 auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.expand-toolbar-panel {
|
|
z-index: 80;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: visible;
|
|
padding: 0;
|
|
border-color: rgba(224, 226, 230, 0.98);
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.985);
|
|
box-shadow:
|
|
0 1px 2px rgba(17, 24, 39, 0.08),
|
|
0 18px 42px rgba(17, 24, 39, 0.14);
|
|
transform: none;
|
|
}
|
|
|
|
.expand-toolbar-header {
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.expand-toolbar-header strong {
|
|
flex: 1;
|
|
color: #1f2329;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.expand-close-button {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
color: #71757c;
|
|
background: transparent;
|
|
}
|
|
|
|
.expand-close-button:hover {
|
|
color: #242830;
|
|
background: #f1f2f4;
|
|
}
|
|
|
|
.expand-section-label {
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
color: #70757d;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
}
|
|
|
|
.expand-scale-control {
|
|
position: relative;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.expand-select-trigger,
|
|
.expand-preset-trigger {
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
border-radius: 8px;
|
|
color: #2b3036;
|
|
background: #f4f4f5;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
text-align: left;
|
|
}
|
|
|
|
.expand-select-trigger {
|
|
width: 216px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.expand-preset-trigger {
|
|
width: 120px;
|
|
padding: 0 8px 0 10px;
|
|
}
|
|
|
|
.expand-select-trigger:hover:not(:disabled),
|
|
.expand-preset-trigger:hover:not(:disabled) {
|
|
background: #eeeeef;
|
|
}
|
|
|
|
.expand-scale-menu {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 36px;
|
|
z-index: 3;
|
|
width: 216px;
|
|
display: grid;
|
|
gap: 2px;
|
|
padding: 5px;
|
|
border: 1px solid #e1e2e5;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.14);
|
|
}
|
|
|
|
.expand-scale-menu button {
|
|
height: 30px;
|
|
padding: 0 8px;
|
|
border-radius: 7px;
|
|
color: #30343a;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
text-align: left;
|
|
}
|
|
|
|
.expand-scale-menu button:hover,
|
|
.expand-scale-menu button[aria-selected="true"] {
|
|
background: #f4f4f5;
|
|
}
|
|
|
|
.expand-preset-row {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 6px 16px 6px 13px;
|
|
color: #70757d;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
}
|
|
|
|
.expand-ratio-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.expand-ratio-option {
|
|
min-width: 0;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 8px 0 2px;
|
|
border-radius: 8px;
|
|
color: #30343a;
|
|
background: transparent;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
text-align: left;
|
|
}
|
|
|
|
.expand-ratio-option:hover:not(:disabled),
|
|
.expand-ratio-option.active {
|
|
background: #f0f0f1;
|
|
}
|
|
|
|
.expand-ratio-check {
|
|
width: 20px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
color: #343940;
|
|
}
|
|
|
|
.expand-ratio-icon {
|
|
flex: 0 0 auto;
|
|
width: 22px;
|
|
height: 22px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 5px;
|
|
color: #727780;
|
|
background: #f4f4f5;
|
|
}
|
|
|
|
.expand-original-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: block;
|
|
background:
|
|
linear-gradient(currentColor, currentColor) left top / 5px 1px no-repeat,
|
|
linear-gradient(currentColor, currentColor) left top / 1px 5px no-repeat,
|
|
linear-gradient(currentColor, currentColor) right top / 5px 1px no-repeat,
|
|
linear-gradient(currentColor, currentColor) right top / 1px 5px no-repeat,
|
|
linear-gradient(currentColor, currentColor) left bottom / 5px 1px no-repeat,
|
|
linear-gradient(currentColor, currentColor) left bottom / 1px 5px no-repeat,
|
|
linear-gradient(currentColor, currentColor) right bottom / 5px 1px no-repeat,
|
|
linear-gradient(currentColor, currentColor) right bottom / 1px 5px no-repeat;
|
|
}
|
|
|
|
.expand-ratio-label {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.expand-toolbar-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.expand-cancel-button,
|
|
.expand-run-button {
|
|
height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-weight: 520;
|
|
}
|
|
|
|
.expand-cancel-button {
|
|
border: 1px solid #dedfe3;
|
|
color: #343940;
|
|
background: #fff;
|
|
}
|
|
|
|
.expand-cancel-button:hover:not(:disabled) {
|
|
background: #f7f8fa;
|
|
}
|
|
|
|
.expand-run-button {
|
|
gap: 5px;
|
|
color: #fff;
|
|
background: #2f2f31;
|
|
}
|
|
|
|
.expand-run-button:hover:not(:disabled) {
|
|
background: #18191b;
|
|
}
|
|
|
|
.expand-run-button:disabled {
|
|
opacity: 0.44;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.expand-credit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 1px;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
}
|
|
|
|
.image-side-panel {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
transform: none;
|
|
}
|
|
|
|
.adjust-floating-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border-color: rgba(224, 226, 230, 0.98);
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
box-shadow:
|
|
0 1px 2px rgba(17, 24, 39, 0.08),
|
|
0 16px 38px rgba(17, 24, 39, 0.11);
|
|
transform: none;
|
|
}
|
|
|
|
.adjust-panel-header {
|
|
flex: 0 0 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.adjust-panel-header strong {
|
|
flex: 1;
|
|
color: #1f2329;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.adjust-panel-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.adjust-panel-header-actions button {
|
|
height: 28px;
|
|
min-width: 28px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
color: #71757c;
|
|
background: transparent;
|
|
transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.adjust-panel-header-actions button:hover:not(:disabled),
|
|
.adjust-panel-header-actions button:focus-visible {
|
|
color: #262a31;
|
|
background: rgba(18, 18, 20, 0.06);
|
|
}
|
|
|
|
.adjust-panel-header-actions button:disabled {
|
|
opacity: 0.42;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.adjust-panel-tabs {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin: 0 12px 16px;
|
|
padding: 2px;
|
|
border-radius: 10px;
|
|
background: #f3f3f4;
|
|
}
|
|
|
|
.adjust-panel-tabs button {
|
|
height: 28px;
|
|
flex: 1 1 0;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
color: #70747b;
|
|
background: transparent;
|
|
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.adjust-panel-tabs button.active {
|
|
border-color: #e1e2e5;
|
|
color: #30343a;
|
|
background: #fff;
|
|
box-shadow:
|
|
0 1px 2px rgba(17, 24, 39, 0.06),
|
|
0 0 0 1px rgba(255, 255, 255, 0.72) inset;
|
|
}
|
|
|
|
.adjust-panel-tabs button:disabled {
|
|
opacity: 0.46;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.adjust-panel-scroll {
|
|
position: relative;
|
|
min-height: 0;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 20px 38px 16px;
|
|
scrollbar-color: #bebebe transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.adjust-panel-scroll::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.adjust-panel-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.adjust-panel-scroll::-webkit-scrollbar-thumb {
|
|
border: 2px solid #fff;
|
|
border-radius: 999px;
|
|
background: #bebebe;
|
|
}
|
|
|
|
.adjust-slider-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 17px;
|
|
}
|
|
|
|
.adjust-section-divider {
|
|
height: 1px;
|
|
margin: 3px 0 11px;
|
|
background: #e6e6e6;
|
|
}
|
|
|
|
.adjust-value-slider {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 9px;
|
|
}
|
|
|
|
.adjust-value-slider-label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
color: #24282f;
|
|
font-size: 13px;
|
|
font-weight: 430;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.adjust-value-slider-label b {
|
|
min-width: 28px;
|
|
color: #676b72;
|
|
font-size: 13px;
|
|
font-weight: 430;
|
|
line-height: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.adjust-value-slider-rail {
|
|
position: relative;
|
|
height: 14px;
|
|
cursor: pointer;
|
|
touch-action: none;
|
|
}
|
|
|
|
.adjust-value-slider-rail[aria-disabled="true"] {
|
|
cursor: not-allowed;
|
|
opacity: 0.46;
|
|
}
|
|
|
|
.adjust-value-slider-track,
|
|
.adjust-value-slider-fill {
|
|
position: absolute;
|
|
top: 50%;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.adjust-value-slider-track {
|
|
left: 0;
|
|
right: 0;
|
|
background: #e3e3e3;
|
|
}
|
|
|
|
.adjust-value-slider-fill {
|
|
background: #333;
|
|
}
|
|
|
|
.adjust-value-slider-rail.is-temperature .adjust-value-slider-track {
|
|
background: linear-gradient(90deg, #2eb6ff 15%, #134c8a 40%, #333 50%, #866912 60%, #ffcc01 85%);
|
|
}
|
|
|
|
.adjust-value-slider-rail.is-tint .adjust-value-slider-track {
|
|
background: linear-gradient(90deg, #ff4ce4 15%, #4c102a 40%, #333 50%, #145135 60%, #3db160 85%);
|
|
}
|
|
|
|
.adjust-value-slider-thumb {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 14px;
|
|
height: 14px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border: 2px solid #fff;
|
|
border-radius: 999px;
|
|
background: #333;
|
|
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.16);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.adjust-value-slider-thumb i {
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
}
|
|
|
|
.adjust-panel-bottom-fade {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 10px;
|
|
bottom: 0;
|
|
height: 40px;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.segmented-panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 4px;
|
|
padding: 3px;
|
|
border-radius: 9px;
|
|
background: #f3f5f7;
|
|
}
|
|
|
|
.segmented-panel button {
|
|
height: 30px;
|
|
border-radius: 7px;
|
|
color: #59616d;
|
|
background: transparent;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.segmented-panel button.active {
|
|
color: #151922;
|
|
background: #fff;
|
|
box-shadow: 0 1px 5px rgba(17, 24, 39, 0.08);
|
|
}
|
|
|
|
.flip-rotate-panel {
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
width: max-content;
|
|
max-width: calc(100vw - 28px);
|
|
padding: 0 6px;
|
|
overflow: hidden;
|
|
border-color: rgba(226, 230, 236, 0.98);
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow: 0 12px 34px rgba(17, 24, 39, 0.14);
|
|
}
|
|
|
|
.flip-rotate-title,
|
|
.flip-rotate-angle {
|
|
height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
border-radius: 8px;
|
|
color: #303640;
|
|
}
|
|
|
|
.flip-rotate-title {
|
|
gap: 7px;
|
|
min-width: 0;
|
|
padding: 0 10px;
|
|
font-size: 15px;
|
|
font-weight: 680;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.flip-rotate-title svg,
|
|
.flip-rotate-angle svg,
|
|
.flip-rotate-icon-button svg {
|
|
flex: 0 0 auto;
|
|
stroke-width: 2.15;
|
|
}
|
|
|
|
.flip-rotate-divider {
|
|
width: 1px;
|
|
align-self: stretch;
|
|
margin: 0 5px;
|
|
background: #e7eaf0;
|
|
}
|
|
|
|
.flip-rotate-angle {
|
|
gap: 2px;
|
|
min-width: 72px;
|
|
padding: 0 6px;
|
|
font-size: 15px;
|
|
font-weight: 620;
|
|
cursor: text;
|
|
}
|
|
|
|
.flip-rotate-angle:focus-within,
|
|
.flip-rotate-angle:hover,
|
|
.flip-rotate-icon-button:hover,
|
|
.flip-rotate-icon-button:focus-visible,
|
|
.flip-rotate-icon-button.active {
|
|
background: rgba(12, 12, 13, 0.06);
|
|
}
|
|
|
|
.flip-rotate-angle-drag {
|
|
width: 20px;
|
|
height: 24px;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
border-radius: 7px;
|
|
color: #303640;
|
|
background: transparent;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.flip-rotate-angle-drag:disabled {
|
|
color: #a5abb5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.flip-rotate-angle input {
|
|
min-width: 0;
|
|
height: 30px;
|
|
border: 0;
|
|
outline: 0;
|
|
padding: 0 2px;
|
|
color: #20252e;
|
|
background: transparent;
|
|
font: inherit;
|
|
text-align: right;
|
|
}
|
|
|
|
.flip-rotate-angle span {
|
|
color: #687080;
|
|
}
|
|
|
|
.flip-rotate-icon-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
padding: 0;
|
|
border-radius: 8px;
|
|
color: #303640;
|
|
background: transparent;
|
|
}
|
|
|
|
.flip-rotate-icon-button:disabled {
|
|
color: #a5abb5;
|
|
cursor: not-allowed;
|
|
background: transparent;
|
|
}
|
|
|
|
.panel-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.panel-title-row strong {
|
|
color: #242933;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.panel-title-row button {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 7px;
|
|
color: #687080;
|
|
background: #f4f6f8;
|
|
}
|
|
|
|
.labeled-slider {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.labeled-slider span {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #626977;
|
|
font-size: 11px;
|
|
font-weight: 780;
|
|
}
|
|
|
|
.labeled-slider b {
|
|
color: #252a33;
|
|
}
|