refactor styles
This commit is contained in:
@@ -0,0 +1,777 @@
|
||||
.panel.detail-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: min(100vw, var(--detail-panel-width));
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
box-shadow: 0 0 24px var(--shadow-soft);
|
||||
border-left: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.panel-header__leading,
|
||||
.panel-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.panel-header__title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
overflow: hidden;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
.panel-header > .panel-header__title:first-child {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.panel-header__actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
|
||||
.detail-panel .panel-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.detail-section__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.detail-section__title {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.quick-add {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quick-add__trigger {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.documents-sort__trigger.quick-add__trigger {
|
||||
padding: 0.25rem 0.5rem;
|
||||
min-height: 2.1rem;
|
||||
}
|
||||
|
||||
.quick-add__chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
white-space: nowrap;
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 0.18rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.quick-add__chip:hover,
|
||||
.quick-add__chip:focus-visible {
|
||||
border-style: solid;
|
||||
background: var(--selection-soft);
|
||||
color: var(--fg);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.quick-add__chip .icon-inline {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.quick-add__chip-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.quick-add__menu {
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.quick-add__form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.quick-add__form input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.quick-add__list {
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.quick-add__option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quick-add__swatch {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
.selection-assignment {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selection-assignment__menu {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 400;
|
||||
padding: 0.4rem 0;
|
||||
max-width: min(22rem, 90vw);
|
||||
}
|
||||
|
||||
.selection-assignment__header {
|
||||
padding: 0.4rem 0.75rem 0.3rem;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.selection-assignment__header input {
|
||||
width: 100%;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--surface-subtle);
|
||||
color: var(--fg);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.selection-assignment__header input:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--selection-border);
|
||||
box-shadow: 0 0 0 2px color-mix(in oklch, var(--selection) 25%, transparent);
|
||||
}
|
||||
|
||||
.selection-assignment__list {
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.selection-assignment__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.selection-assignment__label {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.selection-assignment__spinner {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.selection-assignment__label--nowrap {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.selection-assignment__indent {
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.selection-assignment__folder-label {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
min-width: 0;
|
||||
max-width: 16rem;
|
||||
}
|
||||
|
||||
.selection-assignment__folder-name {
|
||||
font-weight: 500;
|
||||
color: var(--fg);
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.selection-assignment__folder-path {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.selection-assignment__slash {
|
||||
color: var(--muted);
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.selection-assignment__segment {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.selection-assignment__item--all .selection-assignment__icon {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.selection-assignment__item--partial .selection-assignment__icon {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.selection-assignment__icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.selection-assignment__icon--empty {
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 999px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.selection-assignment__label {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.selection-assignment__count {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.selection-assignment__empty {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.selection-assignment__create {
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.preview-pane {
|
||||
margin-top: 0.4rem;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.preview-pane__media {
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-image__content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
outline-color 120ms ease,
|
||||
box-shadow 120ms ease,
|
||||
filter 120ms ease,
|
||||
background-color 120ms ease;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.preview-image__content:hover,
|
||||
.preview-image__content:focus-visible {
|
||||
outline-color: var(--accent-focus);
|
||||
box-shadow:
|
||||
inset 0 0 0 999px var(--accent-elevated),
|
||||
0 6px 18px var(--accent-elevated-strong);
|
||||
}
|
||||
|
||||
.thumbnail-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.32rem;
|
||||
margin: 0.4rem 0 0.6rem;
|
||||
}
|
||||
|
||||
.thumbnail-image {
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.detail-panel .meta,
|
||||
.document-summary .meta {
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.detail-panel .detail-folder-path,
|
||||
.document-summary .detail-folder-path {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.detail-folder-path--block {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.detail-panel .detail-folder-path__link,
|
||||
.document-summary .detail-folder-path__link {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.detail-panel .detail-folder-path__link:hover,
|
||||
.detail-panel .detail-folder-path__link:focus-visible,
|
||||
.document-summary .detail-folder-path__link:hover,
|
||||
.document-summary .detail-folder-path__link:focus-visible {
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.detail-panel .detail-folder-path__separator,
|
||||
.document-summary .detail-folder-path__separator {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-panel .detail-folder-path__segment,
|
||||
.document-summary .detail-folder-path__segment {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.detail-panel .doc-title-row,
|
||||
.document-summary .doc-title-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
margin: 0.25rem 0 1.25rem;
|
||||
max-width: 100%;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.doc-title-row__primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.doc-title-row__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.doc-title-row__path {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.detail-panel .doc-title-edit,
|
||||
.document-summary .doc-title-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail-panel .doc-title-edit input,
|
||||
.document-summary .doc-title-edit input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.status-inline {
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.detail-meta__row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-meta__label {
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.detail-meta__value {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.detail-meta__row > .icon-button {
|
||||
margin: -0.25rem;
|
||||
}
|
||||
|
||||
.doc-issued-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
margin: 0.25rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.doc-issued-row__label {
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.doc-issued-row__value {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.doc-issued-edit {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.doc-issued-edit input[type='date'] {
|
||||
font: inherit;
|
||||
padding: 0.35rem 0.5rem;
|
||||
}
|
||||
|
||||
.status-inline.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.bulk-detail-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
.bulk-detail-actions .inline {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.bulk-move {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
.bulk-move select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.preview-stack {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.preview-stack--stacked {
|
||||
width: 100%;
|
||||
min-height: 420px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-stack--empty {
|
||||
width: 100%;
|
||||
min-height: 420px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-stack__item {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 120ms ease;
|
||||
filter: drop-shadow(0 2px 6px var(--shadow-soft));
|
||||
transform-origin: center;
|
||||
border-radius: 6px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.preview-stack .preview-stack__item.orientation-portrait {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.preview-stack .preview-stack__item.orientation-landscape {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.preview-pane__unsupported {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-subtle);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.preview-pane__unsupported-message {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.preview-pane__unsupported-filename {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.preview-pane__unsupported-download {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-pane__unsupported-download svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.preview-pane--stack {
|
||||
min-height: 460px;
|
||||
position: relative;
|
||||
--preview-nav-scale: 1;
|
||||
}
|
||||
|
||||
.preview-pane__nav-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.2em;
|
||||
height: 2.2em;
|
||||
padding: 0.45em;
|
||||
border-radius: 999px;
|
||||
background: var(--preview-nav-bg);
|
||||
color: var(--preview-nav-fg);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, opacity 0.15s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.preview-pane__nav-button:hover:not([disabled]) {
|
||||
background: var(--preview-nav-bg-hover);
|
||||
}
|
||||
|
||||
.preview-pane__nav-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.preview-pane__nav-button:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.preview-pane__nav {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.preview-pane__nav--overlay {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(var(--preview-nav-scale, 1));
|
||||
margin-top: 0;
|
||||
pointer-events: none;
|
||||
z-index: 20;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.preview-pane__nav--overlay .preview-pane__nav-button {
|
||||
pointer-events: auto;
|
||||
transform: scale(calc(1 / var(--preview-nav-scale, 1)));
|
||||
}
|
||||
|
||||
.preview-pane__media:hover .preview-pane__nav--overlay,
|
||||
.desk-item__card:hover .preview-pane__nav--overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.desk-card__nav {
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.bulk-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
margin: 0.4rem 0 0.6rem;
|
||||
}
|
||||
|
||||
.detail-field {
|
||||
margin: 0.9rem 0;
|
||||
}
|
||||
|
||||
.detail-field__label {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.detail-field__value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.detail-field__value .meta {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-panel dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-panel dt {
|
||||
font-weight: 600;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.detail-panel dd {
|
||||
margin: 0.2rem 0 0;
|
||||
}
|
||||
|
||||
.detail-panel .tag-list,
|
||||
.document-summary .tag-list,
|
||||
.correspondent-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag-list__empty {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-metadata__block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding: 0.75rem 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
Reference in New Issue
Block a user