content & style opti, new tool annotation
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
This commit is contained in:
parent
0db35a0d2c
commit
6e1472d2fb
21 changed files with 1112 additions and 194 deletions
|
|
@ -148,7 +148,17 @@
|
|||
min-height: 42px;
|
||||
padding: 0;
|
||||
border-color: var(--color-border);
|
||||
background: rgba(21, 26, 48, 0.72);
|
||||
background: rgba(21, 26, 48, 0.88);
|
||||
}
|
||||
|
||||
.toolbox-icon-picker-menu button:hover {
|
||||
border-color: rgba(196, 181, 253, 0.32);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box,
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(196, 181, 253, 0.2)) border-box;
|
||||
box-shadow:
|
||||
0 0 12px rgba(139, 92, 246, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.toolbox-icon-picker-menu button.active {
|
||||
|
|
@ -208,11 +218,11 @@
|
|||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
z-index: 300;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 40px);
|
||||
justify-content: flex-end;
|
||||
width: max-content;
|
||||
max-width: min(280px, calc(100vw - 48px));
|
||||
max-width: calc(100vw - 48px);
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
|
|
@ -425,8 +435,18 @@
|
|||
font-weight: 900;
|
||||
}
|
||||
|
||||
.layout-switch button:hover {
|
||||
border-color: rgba(196, 181, 253, 0.22);
|
||||
background: rgba(21, 26, 48, 0.5);
|
||||
color: var(--color-text-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.layout-switch button.active {
|
||||
background: var(--gradient-brand);
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.66), rgba(139, 92, 246, 0.36)) border-box;
|
||||
color: white;
|
||||
box-shadow: var(--shadow-primary);
|
||||
}
|
||||
|
|
@ -544,6 +564,11 @@
|
|||
-webkit-mask-image: url("/static/icons/calculator.svg");
|
||||
}
|
||||
|
||||
.module-icon-map {
|
||||
mask-image: url("/static/icons/map.svg");
|
||||
-webkit-mask-image: url("/static/icons/map.svg");
|
||||
}
|
||||
|
||||
.notepad {
|
||||
display: block;
|
||||
width: calc(100% - 32px);
|
||||
|
|
@ -673,6 +698,10 @@ textarea:focus {
|
|||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.88);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -781,9 +810,6 @@ textarea:focus {
|
|||
}
|
||||
|
||||
.counter-actions button {
|
||||
min-width: 0;
|
||||
min-height: 34px;
|
||||
padding: 0;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
|
|
@ -903,7 +929,10 @@ textarea:focus {
|
|||
background: rgba(5, 7, 17, 0.24);
|
||||
}
|
||||
|
||||
.calculator-action-button {
|
||||
.calculator-action-button,
|
||||
.calculator-entry > button:not(.calculator-entry-summary, .calculator-entry-value),
|
||||
.counter-actions button,
|
||||
.link-item button {
|
||||
display: inline-flex;
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
|
|
@ -913,7 +942,7 @@ textarea:focus {
|
|||
padding: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.24);
|
||||
background: rgba(21, 26, 48, 0.88);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
|
|
@ -922,21 +951,6 @@ textarea:focus {
|
|||
opacity: 0.48;
|
||||
}
|
||||
|
||||
.calculator-action-button.danger {
|
||||
border-color: rgba(251, 113, 133, 0.2);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(251, 113, 133, 0.1), rgba(7, 10, 24, 0.32));
|
||||
color: #fecdd3;
|
||||
}
|
||||
|
||||
.calculator-action-button.danger:hover {
|
||||
border-color: rgba(251, 113, 133, 0.54);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(251, 113, 133, 0.2), rgba(7, 10, 24, 0.44));
|
||||
color: #fff1f2;
|
||||
box-shadow: 0 0 14px rgba(251, 113, 133, 0.16);
|
||||
}
|
||||
|
||||
.calculator-action-button .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -995,14 +1009,58 @@ textarea:focus {
|
|||
|
||||
.calculator-root-button:hover,
|
||||
.calculator-action-button:hover:not(:disabled),
|
||||
.checklist-qty-controls button:hover,
|
||||
.calculator-entry > button:not(.calculator-entry-summary, .calculator-entry-value, .danger):hover,
|
||||
.counter-actions button:not(.danger):hover,
|
||||
.link-item button:not(.danger):hover,
|
||||
.calculator-scroll-toggle:hover,
|
||||
.calculator-scroll-toggle.active {
|
||||
border-color: rgba(196, 181, 253, 0.32);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box,
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(196, 181, 253, 0.2)) border-box;
|
||||
color: var(--color-text-primary);
|
||||
box-shadow:
|
||||
0 0 12px rgba(139, 92, 246, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.calculator-action-button.danger,
|
||||
.calculator-entry > button.danger,
|
||||
.counter-actions button.danger,
|
||||
.link-item button.danger {
|
||||
border-color: rgba(251, 113, 133, 0.2);
|
||||
background: rgba(21, 26, 48, 0.88);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.calculator-action-button.danger:hover:not(:disabled),
|
||||
.calculator-entry > button.danger:hover,
|
||||
.counter-actions button.danger:hover,
|
||||
.link-item button.danger:hover {
|
||||
border-color: rgba(251, 113, 133, 0.56);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(80, 25, 42, 0.72), rgba(48, 18, 34, 0.82)) padding-box,
|
||||
linear-gradient(135deg, rgba(251, 113, 133, 0.56), rgba(196, 181, 253, 0.16)) border-box;
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
0 0 14px rgba(251, 113, 133, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.calculator-action-button.danger:hover .ui-icon,
|
||||
.calculator-entry > button.danger:hover .ui-icon,
|
||||
.counter-actions button.danger:hover .ui-icon,
|
||||
.link-item button.danger:hover .ui-icon {
|
||||
background-color: #fff;
|
||||
filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.26));
|
||||
}
|
||||
|
||||
.calculator-scroll-toggle.active {
|
||||
background: rgba(139, 92, 246, 0.18);
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(72, 43, 160, 0.82), rgba(45, 52, 146, 0.8)) padding-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.58), rgba(139, 92, 246, 0.32)) border-box;
|
||||
}
|
||||
|
||||
.calculator-scroll-toggle.active i {
|
||||
|
|
@ -1156,16 +1214,8 @@ textarea:focus {
|
|||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.calculator-entry > button.danger {
|
||||
min-width: 34px;
|
||||
.calculator-entry > button:not(.calculator-entry-summary, .calculator-entry-value) {
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calculator-entry > button:not(.calculator-entry-summary, .calculator-entry-value, .danger) {
|
||||
min-width: 34px;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calculator-entry-list li.active > .calculator-entry > .calculator-entry-summary,
|
||||
|
|
@ -1221,9 +1271,7 @@ textarea:focus {
|
|||
.link-item button {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
|
|
@ -1250,6 +1298,10 @@ textarea:focus {
|
|||
box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.12);
|
||||
}
|
||||
|
||||
.annotation-dropzone {
|
||||
min-height: 58px;
|
||||
}
|
||||
|
||||
.paste-target {
|
||||
min-height: 46px;
|
||||
margin: 0 var(--space-4) var(--space-4);
|
||||
|
|
@ -1267,11 +1319,157 @@ textarea:focus {
|
|||
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
|
||||
}
|
||||
|
||||
.image-annotation-module {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.annotation-workspace {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.annotation-stage {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 38%),
|
||||
rgba(5, 7, 17, 0.48);
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.annotation-media {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.annotation-stage-preview {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.annotation-preview-actions {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.annotation-preview-actions .calculator-action-button {
|
||||
background: rgba(21, 26, 48, 0.94);
|
||||
box-shadow:
|
||||
0 6px 18px rgba(5, 7, 17, 0.28),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.annotation-stage-preview .annotation-marker:hover {
|
||||
z-index: 2;
|
||||
border-color: rgba(196, 181, 253, 0.9);
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(5, 7, 17, 0.72),
|
||||
0 0 14px rgba(139, 92, 246, 0.34),
|
||||
0 0 24px rgba(196, 181, 253, 0.22);
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
|
||||
.annotation-stage img,
|
||||
.annotation-media img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: min(62vh, 620px);
|
||||
object-fit: contain;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.annotation-marker {
|
||||
position: absolute;
|
||||
display: inline-grid;
|
||||
left: clamp(0px, calc(var(--marker-x, 50%) - 15px), calc(100% - 30px));
|
||||
top: clamp(0px, calc(var(--marker-y, 50%) - 15px), calc(100% - 30px));
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
min-height: 30px;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(246, 196, 83, 0.72);
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
border-radius: var(--radius-pill);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.9), rgba(196, 181, 253, 0.5)) border-box;
|
||||
color: #fff;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(5, 7, 17, 0.72),
|
||||
0 0 16px rgba(246, 196, 83, 0.22);
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.annotation-marker:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.annotation-marker-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.annotation-marker-list li {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: 28px minmax(0, 1fr) auto;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.annotation-marker-list li > span {
|
||||
display: inline-grid;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(246, 196, 83, 0.32);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(246, 196, 83, 0.1);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.annotation-marker-list input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 34px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.annotation-empty {
|
||||
margin: 0;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.shots {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: var(--space-3);
|
||||
padding: 0 var(--space-4) var(--space-4);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.shots figure {
|
||||
|
|
@ -1307,6 +1505,13 @@ textarea:focus {
|
|||
background: var(--color-bg-deep);
|
||||
}
|
||||
|
||||
.shot-delete-button {
|
||||
.shot-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.shot-actions .shot-annotate-button,
|
||||
.shot-actions .shot-delete-button {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue