Dariusz L
37179fd29d
Use transparent canvas backgrounds, rgba styling, and CSS custom properties (--lf-canvas-fill, --lf-surface-border, --lf-controls-surface, --lf-layers-surface, --lf-surface-shadow) so the editor's native color tints the node underneath. CanvasRenderer now clears the canvas each frame and reads the fill from CSS, avoiding alpha buildup and keeping the UI readable.
310 lines
6.2 KiB
CSS
310 lines
6.2 KiB
CSS
/* Layers Panel Styles */
|
|
.lf-layers-panel {
|
|
background: var(--lf-layers-surface, rgba(0, 0, 0, 0.2));
|
|
border: 1px solid var(--lf-surface-border, rgba(255, 255, 255, 0.14));
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
user-select: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.lf-layers-panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--lf-surface-border, rgba(255, 255, 255, 0.14));
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.lf-checkbox-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 0;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.lf-checkbox-container:hover {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.lf-checkbox-container input[type="checkbox"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.lf-checkbox-container .lf-custom-checkbox {
|
|
height: 16px;
|
|
width: 16px;
|
|
background-color: rgba(0, 0, 0, 0.18);
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
border-radius: 3px;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.lf-checkbox-container input:checked ~ .lf-custom-checkbox {
|
|
background-color: #3a76d6;
|
|
border-color: #3a76d6;
|
|
}
|
|
|
|
.lf-checkbox-container .lf-custom-checkbox::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
left: 5px;
|
|
top: 1px;
|
|
width: 4px;
|
|
height: 9px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.lf-checkbox-container input:checked ~ .lf-custom-checkbox::after {
|
|
display: block;
|
|
}
|
|
|
|
.lf-checkbox-container input:indeterminate ~ .lf-custom-checkbox {
|
|
background-color: #3a76d6;
|
|
border-color: #3a76d6;
|
|
}
|
|
|
|
.lf-checkbox-container input:indeterminate ~ .lf-custom-checkbox::after {
|
|
display: block;
|
|
content: "";
|
|
position: absolute;
|
|
top: 7px;
|
|
left: 3px;
|
|
width: 8px;
|
|
height: 2px;
|
|
background-color: white;
|
|
border: none;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.lf-checkbox-container:hover {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.lf-layers-panel-title {
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.lf-layers-panel-controls {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.lf-layers-btn {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
color: #ffffff;
|
|
padding: 4px 8px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.lf-layers-btn:hover {
|
|
background: rgba(255, 255, 255, 0.14);
|
|
}
|
|
|
|
.lf-layers-btn:active {
|
|
background: rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.lf-layers-btn:disabled {
|
|
background: rgba(0, 0, 0, 0.12);
|
|
color: #666666;
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.lf-layers-btn:disabled:hover {
|
|
background: rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.lf-layers-container {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.lf-layer-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 6px 4px;
|
|
margin-bottom: 2px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease;
|
|
position: relative;
|
|
gap: 6px;
|
|
}
|
|
|
|
.lf-layer-row:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.lf-layer-row.lf-selected {
|
|
background: rgba(90, 170, 255, 0.3) !important;
|
|
box-shadow: inset 0 0 0 1px rgba(124, 204, 255, 0.75);
|
|
}
|
|
|
|
.lf-layer-row.lf-dragging {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.lf-layer-thumbnail {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 1px solid #4a4a4a;
|
|
border-radius: 2px;
|
|
background: transparent;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lf-layer-thumbnail canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.lf-layer-thumbnail::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
linear-gradient(45deg, #555 25%, transparent 25%),
|
|
linear-gradient(-45deg, #555 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, #555 75%),
|
|
linear-gradient(-45deg, transparent 75%, #555 75%);
|
|
background-size: 8px 8px;
|
|
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.lf-layer-thumbnail canvas {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.lf-layer-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding: 2px 4px;
|
|
border-radius: 2px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.lf-layer-name.lf-editing {
|
|
background: rgba(0, 0, 0, 0.22);
|
|
border: 1px solid rgba(255, 255, 255, 0.28);
|
|
outline: none;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.lf-layer-name input {
|
|
background: transparent;
|
|
border: none;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
width: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
.lf-drag-insertion-line {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: #4a7bc8;
|
|
border-radius: 1px;
|
|
z-index: 1000;
|
|
box-shadow: 0 0 4px rgba(74, 123, 200, 0.6);
|
|
}
|
|
|
|
.lf-layers-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.lf-layers-container::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.lf-layers-container::-webkit-scrollbar-thumb {
|
|
background: #4a4a4a;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.lf-layers-container::-webkit-scrollbar-thumb:hover {
|
|
background: #5a5a5a;
|
|
}
|
|
|
|
.lf-layer-visibility-toggle {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.lf-layer-visibility-toggle:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Icon container styles */
|
|
.lf-layers-panel .lf-icon-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lf-layers-panel .lf-icon-container img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.lf-layers-panel .lf-icon-container.lf-visibility-hidden {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.lf-layers-panel .lf-icon-container.lf-visibility-hidden img {
|
|
filter: brightness(0) invert(1);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.lf-layers-panel .lf-icon-container.lf-fallback-text {
|
|
font-size: 10px;
|
|
color: #888888;
|
|
}
|