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
|
|
@ -145,9 +145,16 @@ input[type="checkbox"]:focus-visible {
|
|||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.themed-scrollbar,
|
||||
.legacy-scrollbar {
|
||||
scrollbar-color: rgb(79, 26, 114) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.filter-options::-webkit-scrollbar,
|
||||
.drawer-panel::-webkit-scrollbar,
|
||||
.damage-table-wrap::-webkit-scrollbar,
|
||||
.themed-scrollbar::-webkit-scrollbar,
|
||||
.legacy-scrollbar::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
width: 6px;
|
||||
|
|
@ -158,6 +165,7 @@ input[type="checkbox"]:focus-visible {
|
|||
.filter-options::-webkit-scrollbar-track,
|
||||
.drawer-panel::-webkit-scrollbar-track,
|
||||
.damage-table-wrap::-webkit-scrollbar-track,
|
||||
.themed-scrollbar::-webkit-scrollbar-track,
|
||||
.legacy-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
|
|
@ -167,11 +175,16 @@ input[type="checkbox"]:focus-visible {
|
|||
.filter-options::-webkit-scrollbar-thumb,
|
||||
.drawer-panel::-webkit-scrollbar-thumb,
|
||||
.damage-table-wrap::-webkit-scrollbar-thumb,
|
||||
.themed-scrollbar::-webkit-scrollbar-thumb,
|
||||
.legacy-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(79, 26, 114)), color-stop(1, rgb(44, 1, 135)));
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
body.is-modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.primary {
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background:
|
||||
|
|
@ -224,18 +237,22 @@ input[type="checkbox"]:focus-visible {
|
|||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-action-button,
|
||||
.import-icon-button,
|
||||
.toolbox-icon-button,
|
||||
.card-icon-button,
|
||||
.drawer-action-button,
|
||||
.drawer-close-button,
|
||||
.filter-reset-button,
|
||||
.screenshot-viewer-button,
|
||||
.module-edit-button,
|
||||
.module-delete-button,
|
||||
.shot-delete-button,
|
||||
.tool-quick-add-button {
|
||||
:is(
|
||||
.sidebar-action-button,
|
||||
.import-icon-button,
|
||||
.toolbox-icon-button,
|
||||
.card-icon-button,
|
||||
.drawer-action-button,
|
||||
.drawer-close-button,
|
||||
.filter-reset-button,
|
||||
.screenshot-viewer-button,
|
||||
.module-edit-button,
|
||||
.module-delete-button,
|
||||
.shot-annotate-button,
|
||||
.shot-delete-button,
|
||||
.checklist-delete-button,
|
||||
.tool-quick-add-button
|
||||
) {
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
|
|
@ -257,35 +274,43 @@ input[type="checkbox"]:focus-visible {
|
|||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sidebar-action-button .ui-icon,
|
||||
.import-icon-button .ui-icon,
|
||||
.toolbox-icon-button .ui-icon,
|
||||
.card-icon-button .ui-icon,
|
||||
.drawer-action-button .ui-icon,
|
||||
.drawer-close-button .ui-icon,
|
||||
.filter-reset-button .ui-icon,
|
||||
.screenshot-viewer-button .ui-icon,
|
||||
.module-edit-button .ui-icon,
|
||||
.module-delete-button .ui-icon,
|
||||
.shot-delete-button .ui-icon,
|
||||
.tool-quick-add-button .ui-icon {
|
||||
:is(
|
||||
.sidebar-action-button,
|
||||
.import-icon-button,
|
||||
.toolbox-icon-button,
|
||||
.card-icon-button,
|
||||
.drawer-action-button,
|
||||
.drawer-close-button,
|
||||
.filter-reset-button,
|
||||
.screenshot-viewer-button,
|
||||
.module-edit-button,
|
||||
.module-delete-button,
|
||||
.shot-annotate-button,
|
||||
.shot-delete-button,
|
||||
.checklist-delete-button,
|
||||
.tool-quick-add-button
|
||||
) .ui-icon {
|
||||
transition:
|
||||
background-color var(--duration-fast) var(--ease-standard),
|
||||
filter var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sidebar-action-button:hover,
|
||||
.import-icon-button:hover,
|
||||
.toolbox-icon-button:hover,
|
||||
.card-icon-button:hover,
|
||||
.drawer-action-button:hover,
|
||||
.drawer-close-button:hover,
|
||||
.filter-reset-button:hover,
|
||||
.screenshot-viewer-button:hover,
|
||||
.module-edit-button:hover,
|
||||
.module-delete-button:hover,
|
||||
.shot-delete-button:hover,
|
||||
.tool-quick-add-button:hover {
|
||||
:is(
|
||||
.sidebar-action-button,
|
||||
.import-icon-button,
|
||||
.toolbox-icon-button,
|
||||
.card-icon-button,
|
||||
.drawer-action-button,
|
||||
.drawer-close-button,
|
||||
.filter-reset-button,
|
||||
.screenshot-viewer-button,
|
||||
.module-edit-button,
|
||||
.module-delete-button,
|
||||
.shot-annotate-button,
|
||||
.shot-delete-button,
|
||||
.checklist-delete-button,
|
||||
.tool-quick-add-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,
|
||||
|
|
@ -296,18 +321,21 @@ input[type="checkbox"]:focus-visible {
|
|||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.sidebar-action-button.primary,
|
||||
.import-icon-button.primary,
|
||||
.toolbox-icon-button.primary,
|
||||
.card-icon-button.primary,
|
||||
.drawer-action-button.primary,
|
||||
.drawer-close-button.primary,
|
||||
.filter-reset-button.primary,
|
||||
.screenshot-viewer-button.primary,
|
||||
.module-edit-button.primary,
|
||||
.module-delete-button.primary,
|
||||
.shot-delete-button.primary,
|
||||
.tool-quick-add-button.primary {
|
||||
:is(
|
||||
.sidebar-action-button,
|
||||
.import-icon-button,
|
||||
.toolbox-icon-button,
|
||||
.card-icon-button,
|
||||
.drawer-action-button,
|
||||
.drawer-close-button,
|
||||
.filter-reset-button,
|
||||
.screenshot-viewer-button,
|
||||
.module-edit-button,
|
||||
.module-delete-button,
|
||||
.shot-annotate-button,
|
||||
.shot-delete-button,
|
||||
.tool-quick-add-button
|
||||
).primary {
|
||||
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,
|
||||
|
|
@ -318,18 +346,21 @@ input[type="checkbox"]:focus-visible {
|
|||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.sidebar-action-button.primary:hover,
|
||||
.import-icon-button.primary:hover,
|
||||
.toolbox-icon-button.primary:hover,
|
||||
.card-icon-button.primary:hover,
|
||||
.drawer-action-button.primary:hover,
|
||||
.drawer-close-button.primary:hover,
|
||||
.filter-reset-button.primary:hover,
|
||||
.screenshot-viewer-button.primary:hover,
|
||||
.module-edit-button.primary:hover,
|
||||
.module-delete-button.primary:hover,
|
||||
.shot-delete-button.primary:hover,
|
||||
.tool-quick-add-button.primary:hover {
|
||||
:is(
|
||||
.sidebar-action-button,
|
||||
.import-icon-button,
|
||||
.toolbox-icon-button,
|
||||
.card-icon-button,
|
||||
.drawer-action-button,
|
||||
.drawer-close-button,
|
||||
.filter-reset-button,
|
||||
.screenshot-viewer-button,
|
||||
.module-edit-button,
|
||||
.module-delete-button,
|
||||
.shot-annotate-button,
|
||||
.shot-delete-button,
|
||||
.tool-quick-add-button
|
||||
).primary:hover {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(109, 40, 217, 0.98), rgba(67, 56, 202, 0.96)) padding-box,
|
||||
|
|
@ -342,30 +373,32 @@ input[type="checkbox"]:focus-visible {
|
|||
inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.sidebar-action-button:hover .ui-icon,
|
||||
.import-icon-button:hover .ui-icon,
|
||||
.toolbox-icon-button:hover .ui-icon,
|
||||
.card-icon-button:hover .ui-icon,
|
||||
.drawer-action-button:hover .ui-icon,
|
||||
.drawer-close-button:hover .ui-icon,
|
||||
.filter-reset-button:hover .ui-icon,
|
||||
.screenshot-viewer-button:hover .ui-icon,
|
||||
.module-edit-button:hover .ui-icon,
|
||||
.tool-quick-add-button:hover .ui-icon {
|
||||
:is(
|
||||
.sidebar-action-button,
|
||||
.import-icon-button,
|
||||
.toolbox-icon-button,
|
||||
.card-icon-button,
|
||||
.drawer-action-button,
|
||||
.drawer-close-button,
|
||||
.filter-reset-button,
|
||||
.screenshot-viewer-button,
|
||||
.module-edit-button,
|
||||
.module-delete-button,
|
||||
.shot-annotate-button,
|
||||
.shot-delete-button,
|
||||
.checklist-delete-button,
|
||||
.tool-quick-add-button
|
||||
):hover .ui-icon {
|
||||
background-color: #c4b5fd;
|
||||
filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.28));
|
||||
}
|
||||
|
||||
.card-icon-button.danger,
|
||||
.module-delete-button.danger,
|
||||
.shot-delete-button.danger {
|
||||
:is(.card-icon-button, .module-delete-button, .shot-delete-button, .checklist-delete-button).danger {
|
||||
border-color: rgba(251, 113, 133, 0.2);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.card-icon-button.danger:hover,
|
||||
.module-delete-button.danger:hover,
|
||||
.shot-delete-button.danger:hover {
|
||||
:is(.card-icon-button, .module-delete-button, .shot-delete-button, .checklist-delete-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,
|
||||
|
|
@ -376,9 +409,7 @@ input[type="checkbox"]:focus-visible {
|
|||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.card-icon-button.danger:hover .ui-icon,
|
||||
.module-delete-button.danger:hover .ui-icon,
|
||||
.shot-delete-button.danger:hover .ui-icon {
|
||||
:is(.card-icon-button, .module-delete-button, .shot-delete-button, .checklist-delete-button).danger:hover .ui-icon {
|
||||
background-color: #fff;
|
||||
filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.26));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -195,13 +195,26 @@
|
|||
.filter-logic button {
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
background: var(--color-primary-soft);
|
||||
border-color: rgba(246, 196, 83, 0.24);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(72, 43, 160, 0.72), rgba(45, 52, 146, 0.68)) padding-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.46), rgba(139, 92, 246, 0.28)) border-box;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.filter-logic button:hover {
|
||||
border-color: rgba(246, 196, 83, 0.52);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(109, 40, 217, 0.86), rgba(67, 56, 202, 0.82)) padding-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.72), rgba(196, 181, 253, 0.42)) border-box;
|
||||
box-shadow:
|
||||
0 0 14px rgba(139, 92, 246, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
|
|
|||
|
|
@ -66,6 +66,11 @@
|
|||
-webkit-mask-image: url("/static/icons/calculator.svg");
|
||||
}
|
||||
|
||||
.ui-icon-map {
|
||||
mask-image: url("/static/icons/map.svg");
|
||||
-webkit-mask-image: url("/static/icons/map.svg");
|
||||
}
|
||||
|
||||
.ui-icon-scrollable {
|
||||
mask-image: url("/static/icons/scrollable.svg");
|
||||
-webkit-mask-image: url("/static/icons/scrollable.svg");
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
display: grid;
|
||||
place-items: center;
|
||||
padding: var(--space-5);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.screenshot-viewer-backdrop {
|
||||
|
|
@ -15,9 +16,11 @@
|
|||
}
|
||||
|
||||
.screenshot-viewer {
|
||||
--viewer-content-max-height: min(80vh, calc(100vh - 140px));
|
||||
--viewer-image-height: 400px;
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: min(1120px, calc(100vw - 32px));
|
||||
width: min(1500px, calc(100vw - 32px));
|
||||
max-height: calc(100vh - 48px);
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
|
|
@ -38,15 +41,106 @@
|
|||
flex: 0 0 40px;
|
||||
}
|
||||
|
||||
.screenshot-viewer img {
|
||||
display: block;
|
||||
.screenshot-viewer-body {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.screenshot-viewer-body.has-annotation-side {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
|
||||
gap: var(--space-4);
|
||||
align-items: start;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
.screenshot-viewer-media {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - 170px);
|
||||
justify-self: center;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.screenshot-viewer-media.can-annotate {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.screenshot-viewer-image-frame {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.screenshot-viewer-image-frame img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: var(--viewer-content-max-height);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.screenshot-viewer-marker {
|
||||
display: inline-grid;
|
||||
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-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);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.screenshot-viewer-side {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
height: min(var(--viewer-image-height), var(--viewer-content-max-height));
|
||||
max-height: min(var(--viewer-image-height), var(--viewer-content-max-height));
|
||||
overflow: hidden;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.045), transparent 62%),
|
||||
rgba(7, 10, 24, 0.38);
|
||||
}
|
||||
|
||||
.screenshot-viewer-side strong {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.screenshot-viewer-side .annotation-marker-list {
|
||||
min-width: 0;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.drawer[aria-hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -166,6 +260,7 @@ body.is-resizing-drawer * {
|
|||
display: grid;
|
||||
place-items: center;
|
||||
padding: var(--space-5);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.tool-add-modal-root {
|
||||
|
|
@ -175,6 +270,7 @@ body.is-resizing-drawer * {
|
|||
display: grid;
|
||||
place-items: center;
|
||||
padding: var(--space-5);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.confirm-backdrop {
|
||||
|
|
|
|||
|
|
@ -139,6 +139,14 @@
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.screenshot-viewer-body.has-annotation-side {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.screenshot-viewer-side {
|
||||
height: min(280px, 32vh);
|
||||
}
|
||||
|
||||
.module-column {
|
||||
display: contents;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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