lzstealth/pulse-signage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Add template animation editor

Browse Source
This commit is contained in:
lzstealth
2026-08-03 17:27:42 +01:00
parent e95928f31c
commit ed8d51580e
35 changed files with 3173 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/css/theme-custom.css
+102 -14
View File
@@ -190,6 +190,82 @@
max-width: 14rem;
}
.template-preview-card .card-body {
gap: 0.75rem 1rem;
}
.template-preview-card.is-previewing {
border-color: rgba(var(--bs-primary-rgb), 0.45);
}
.template-preview-card.is-previewing .card-header {
position: relative;
}
.template-preview-card.is-previewing .card-title {
position: relative;
padding-right: 6.25rem;
}
.template-preview-card.is-previewing .card-title::after {
content: ' previewing';
position: absolute;
top: 50%;
left: calc(100% + 0.35rem);
color: var(--bs-primary);
font-size: 0.8em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
transform: translateY(-50%);
}
.template-preview-card .btn-group {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
.template-preview-card .btn-group .btn {
width: 100%;
}
.template-preview-card[hidden] {
display: none !important;
}
.template-designer-form--previewing .designer-stage {
box-shadow: none !important;
overflow: hidden;
}
.template-designer-form--previewing .designer-overlay {
cursor: progress;
}
.template-designer-form--previewing .designer-rect {
transition: none !important;
}
.template-designer-form--previewing .resize-handle {
display: none;
}
.template-designer-form--previewing .region-item,
.template-designer-form--previewing .template-details-card,
.template-designer-form--previewing .template-options-card,
.template-designer-form--previewing .region-info-card {
opacity: 0.84;
}
.template-designer-form--previewing .region-item [disabled],
.template-designer-form--previewing .template-details-card [disabled],
.template-designer-form--previewing .template-options-card [disabled],
.template-designer-form--previewing .region-info-card [disabled] {
cursor: not-allowed;
}
.announcement-icon-picker {
position: relative;
}
@@ -1401,7 +1477,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
position: relative;
width: 100%;
min-height: 18rem;
/* overflow: hidden; */
overflow: visible;
border: 1px solid var(--bs-border-color);
border-radius: 0;
background: var(--bs-body-bg);
@@ -1431,11 +1507,16 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
.designer-overlay {
z-index: 2;
cursor: default;
--designer-overlay-scale: 1;
}
.designer-rect {
position: absolute;
border: 2px solid rgba(13, 110, 253, 0.95);
overflow: visible;
z-index: 3;
border: 0;
outline: 2px solid rgba(13, 110, 253, 0.95);
outline-offset: -2px;
background: rgba(13, 110, 253, 0.12);
box-sizing: border-box;
border-radius: 0;
@@ -1445,20 +1526,20 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
}
.designer-rect.selected {
border-color: rgba(25, 135, 84, 1);
outline-color: rgba(25, 135, 84, 1);
background: rgba(25, 135, 84, 0.14);
}
.designer-rect-label {
position: absolute;
left: 0.4rem;
top: 0.35rem;
left: calc(6px * var(--designer-overlay-scale, 1));
top: calc(6px * var(--designer-overlay-scale, 1));
max-width: 100%;
padding: 0.15rem 0.45rem;
padding: calc(2px * var(--designer-overlay-scale, 1)) calc(7px * var(--designer-overlay-scale, 1));
border-radius: 999px;
background: rgba(33, 37, 41, 0.92);
color: #fff;
font-size: 0.75rem;
font-size: calc(0.75rem * var(--designer-overlay-scale, 1));
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
@@ -1471,8 +1552,10 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
.resize-handle {
position: absolute;
width: 0.8rem;
height: 0.8rem;
z-index: 4;
width: 12px;
height: 12px;
box-sizing: border-box;
border-radius: 999px;
border: 2px solid #fff;
background: rgba(13, 110, 253, 1);
@@ -1482,28 +1565,28 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
.resize-handle.nw {
left: 0;
top: 0;
transform: translate(-50%, -50%);
transform: translate(-40%, -40%);
cursor: nwse-resize;
}
.resize-handle.ne {
right: 0;
top: 0;
transform: translate(50%, -50%);
transform: translate(40%, -40%);
cursor: nesw-resize;
}
.resize-handle.sw {
left: 0;
bottom: 0;
transform: translate(-50%, 50%);
transform: translate(-40%, 40%);
cursor: nesw-resize;
}
.resize-handle.se {
right: 0;
bottom: 0;
transform: translate(50%, 50%);
transform: translate(40%, 40%);
cursor: nwse-resize;
}
@@ -1641,6 +1724,10 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.region-field-grid--animation {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.region-field-grid > label {
display: grid;
gap: 0.35rem;
@@ -1877,7 +1964,8 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
.region-field-grid--identity,
.region-field-grid--position,
.region-field-grid--size {
.region-field-grid--size,
.region-field-grid--animation {
grid-template-columns: 1fr;
}
}