734 lines
12 KiB
CSS
734 lines
12 KiB
CSS
.postbox-page {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr);
|
|
height: calc(100vh - 115px);
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
}
|
|
|
|
.postbox-page *,
|
|
.postbox-page *::before,
|
|
.postbox-page *::after,
|
|
.postbox-admin-page *,
|
|
.postbox-admin-page *::before,
|
|
.postbox-admin-page *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.postbox-shell {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns:
|
|
minmax(250px, 310px)
|
|
minmax(290px, 370px)
|
|
minmax(360px, 1fr);
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--panel);
|
|
}
|
|
|
|
.postbox-directory,
|
|
.postbox-message-list,
|
|
.postbox-detail {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: var(--panel);
|
|
}
|
|
|
|
.postbox-directory,
|
|
.postbox-message-list {
|
|
border-right: var(--border-line);
|
|
}
|
|
|
|
.postbox-directory {
|
|
background: var(--panel-soft);
|
|
}
|
|
|
|
.postbox-bar-title,
|
|
.postbox-icon-actions,
|
|
.postbox-scope-row,
|
|
.postbox-item-title,
|
|
.postbox-message-heading,
|
|
.postbox-message-meta,
|
|
.postbox-detail-status,
|
|
.postbox-detail-byline,
|
|
.postbox-access-explanation,
|
|
.postbox-attachments > div,
|
|
.postbox-participants > div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.postbox-bar-title {
|
|
min-width: 0;
|
|
gap: 8px;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.postbox-bar-title strong {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.postbox-icon-actions {
|
|
gap: 5px;
|
|
}
|
|
|
|
.postbox-scope-control {
|
|
flex: 0 0 auto;
|
|
border-bottom: var(--border-line);
|
|
padding: 9px 10px;
|
|
}
|
|
|
|
.postbox-scope-control > label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.postbox-scope-row {
|
|
gap: 6px;
|
|
}
|
|
|
|
.postbox-scope-row select {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.postbox-directory-list,
|
|
.postbox-messages {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 7px;
|
|
}
|
|
|
|
.postbox-directory-list,
|
|
.postbox-messages {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.postbox-message-filters {
|
|
flex: 0 0 auto;
|
|
display: grid;
|
|
gap: 7px;
|
|
border-bottom: var(--border-line);
|
|
padding: 8px 9px;
|
|
}
|
|
|
|
.postbox-search-row {
|
|
width: 100%;
|
|
}
|
|
|
|
.postbox-search-row input {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.postbox-message-list > .data-grid-pagination {
|
|
flex: 0 0 auto;
|
|
flex-wrap: wrap;
|
|
gap: 7px 12px;
|
|
border-top: var(--border-line);
|
|
}
|
|
|
|
.postbox-message-list > .data-grid-pagination .data-grid-page-controls {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.postbox-directory-list .selection-list,
|
|
.postbox-messages .selection-list,
|
|
.postbox-admin-list .selection-list {
|
|
gap: 4px;
|
|
}
|
|
|
|
.postbox-directory-item,
|
|
.postbox-message-item,
|
|
.postbox-admin-list .selection-list-item {
|
|
display: grid;
|
|
min-height: 64px;
|
|
gap: 4px;
|
|
align-content: center;
|
|
text-align: left;
|
|
}
|
|
|
|
.postbox-item-title,
|
|
.postbox-message-heading {
|
|
min-width: 0;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.postbox-item-title strong,
|
|
.postbox-message-heading strong {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--text-strong);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.postbox-item-context,
|
|
.postbox-item-address,
|
|
.postbox-message-preview,
|
|
.postbox-message-meta {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.postbox-message-item.is-read strong {
|
|
font-weight: 550;
|
|
}
|
|
|
|
.postbox-message-item.is-unread strong {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.postbox-message-heading time {
|
|
flex: 0 0 auto;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.postbox-message-meta {
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.postbox-message-meta span {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.postbox-message-list > .alert {
|
|
flex: 0 0 auto;
|
|
margin: 8px 10px 0;
|
|
}
|
|
|
|
.postbox-message-detail {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 20px 24px 28px;
|
|
}
|
|
|
|
.postbox-message-detail > header,
|
|
.postbox-provenance,
|
|
.postbox-body,
|
|
.postbox-participants,
|
|
.postbox-attachments {
|
|
border-bottom: var(--border-line);
|
|
padding-bottom: 18px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.postbox-detail-status {
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.postbox-message-detail h1 {
|
|
max-width: 900px;
|
|
margin: 12px 0 9px;
|
|
color: var(--text-strong);
|
|
font-size: 24px;
|
|
font-weight: 650;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.postbox-detail-byline {
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.postbox-provenance h2,
|
|
.postbox-participants h2,
|
|
.postbox-attachments h2 {
|
|
margin: 0 0 10px;
|
|
color: var(--text-strong);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.postbox-provenance dl,
|
|
.postbox-admin-properties {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(170px, 1fr));
|
|
gap: 10px 18px;
|
|
margin: 0;
|
|
}
|
|
|
|
.postbox-provenance dt,
|
|
.postbox-admin-properties dt {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.postbox-provenance dd,
|
|
.postbox-admin-properties dd {
|
|
min-width: 0;
|
|
margin: 3px 0 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.postbox-body p {
|
|
max-width: 900px;
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.postbox-participants,
|
|
.postbox-attachments {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.postbox-participants > div,
|
|
.postbox-attachments > div {
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
border: var(--border-line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
padding: 9px 10px;
|
|
}
|
|
|
|
.postbox-participants > div strong {
|
|
min-width: 90px;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.postbox-attachments > p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.postbox-attachments > div span {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.postbox-attachments > div strong,
|
|
.postbox-attachments > div small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.postbox-attachments > div small {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.postbox-access-explanation {
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
border-left: 3px solid var(--green);
|
|
background: var(--success-soft);
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.postbox-access-explanation p {
|
|
margin: 3px 0 0;
|
|
color: var(--muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.postbox-note {
|
|
max-width: 470px;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.postbox-dialog {
|
|
width: min(720px, calc(100vw - 32px));
|
|
max-width: none;
|
|
}
|
|
|
|
.postbox-template-dialog {
|
|
width: min(900px, calc(100vw - 32px));
|
|
}
|
|
|
|
.postbox-form-grid input,
|
|
.postbox-form-grid select {
|
|
width: 100%;
|
|
}
|
|
|
|
.postbox-toggle-field {
|
|
min-height: 62px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
.postbox-routing-section {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
gap: 14px;
|
|
border-top: var(--border-line);
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.postbox-routing-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
}
|
|
|
|
.postbox-routing-heading > div:first-child {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.postbox-routing-heading span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.postbox-relation-options {
|
|
min-height: 38px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: center;
|
|
gap: 8px 14px;
|
|
}
|
|
|
|
.postbox-relation-options label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
color: var(--text-strong);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.postbox-relation-options input {
|
|
width: auto;
|
|
}
|
|
|
|
.postbox-template-preview {
|
|
display: grid;
|
|
gap: 12px;
|
|
border-top: var(--border-line);
|
|
margin-top: 18px;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.postbox-preview-targets {
|
|
max-height: 280px;
|
|
display: grid;
|
|
gap: 1px;
|
|
overflow: auto;
|
|
background: var(--border-color);
|
|
border: var(--border-line);
|
|
}
|
|
|
|
.postbox-preview-targets > div {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
background: var(--surface);
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.postbox-preview-targets > div > div:first-child {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.postbox-preview-targets span,
|
|
.postbox-preview-targets small {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.postbox-preview-targets code {
|
|
overflow: hidden;
|
|
color: var(--text-strong);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.postbox-preview-status {
|
|
flex: 0 0 auto;
|
|
display: grid;
|
|
justify-items: end;
|
|
gap: 4px;
|
|
}
|
|
|
|
.postbox-form-note {
|
|
margin: 15px 0 0;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.postbox-dialog-actions {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.postbox-source-selector {
|
|
max-height: 310px;
|
|
display: grid;
|
|
gap: 5px;
|
|
overflow: auto;
|
|
border: var(--border-line);
|
|
margin: 16px 0 0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.postbox-source-selector legend {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.postbox-source-selector label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
border-radius: var(--radius-sm);
|
|
padding: 7px 8px;
|
|
}
|
|
|
|
.postbox-source-selector label:hover {
|
|
background: var(--sidebar-hover-bg);
|
|
}
|
|
|
|
.postbox-source-selector label span {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.postbox-source-selector small {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.postbox-message-dialog {
|
|
width: min(720px, calc(100vw - 32px));
|
|
}
|
|
|
|
.postbox-compose-grid {
|
|
grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr);
|
|
}
|
|
|
|
.postbox-compose-wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.postbox-compose-grid textarea {
|
|
width: 100%;
|
|
min-height: 180px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.postbox-quick-detail {
|
|
display: grid;
|
|
gap: 7px;
|
|
margin-top: 12px;
|
|
border-top: var(--border-line);
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.postbox-quick-detail > span,
|
|
.postbox-quick-detail > p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.postbox-quick-detail > p {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
|
|
.postbox-dialog-actions.end {
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.postbox-admin-page > .segmented-control {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.postbox-admin-workspace {
|
|
min-height: 520px;
|
|
display: grid;
|
|
grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
|
|
border: var(--border-line);
|
|
background: var(--panel);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.postbox-admin-list {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
max-height: 680px;
|
|
overflow: auto;
|
|
border-right: var(--border-line);
|
|
background: var(--panel-soft);
|
|
padding: 8px;
|
|
}
|
|
|
|
.postbox-admin-detail {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
max-height: 680px;
|
|
overflow: auto;
|
|
padding: 20px 24px 26px;
|
|
}
|
|
|
|
.postbox-admin-detail-heading {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
border-bottom: var(--border-line);
|
|
padding-bottom: 17px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.postbox-admin-detail-heading h2 {
|
|
margin: 2px 0 4px;
|
|
color: var(--text-strong);
|
|
font-size: 20px;
|
|
}
|
|
|
|
.postbox-admin-detail-heading p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.postbox-detail-kicker {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.postbox-admin-properties {
|
|
border-bottom: var(--border-line);
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
.postbox-revision-history {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.postbox-revision-history h3 {
|
|
margin: 0 0 9px;
|
|
color: var(--text-strong);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.postbox-revision-history > div {
|
|
display: grid;
|
|
grid-template-columns: minmax(120px, 1fr) minmax(160px, 2fr) auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border-top: var(--border-line);
|
|
padding: 9px 0;
|
|
}
|
|
|
|
.postbox-revision-history > div span:not(.status-badge) {
|
|
color: var(--muted);
|
|
}
|
|
|
|
@media (max-width: 1280px) {
|
|
.postbox-shell {
|
|
grid-template-columns: minmax(230px, 290px) minmax(280px, 340px) minmax(330px, 1fr);
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.postbox-page {
|
|
height: auto;
|
|
min-height: calc(100vh - 115px);
|
|
overflow: auto;
|
|
}
|
|
|
|
.postbox-shell {
|
|
grid-template-columns: 1fr;
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
.postbox-directory,
|
|
.postbox-message-list {
|
|
min-height: 260px;
|
|
max-height: 42vh;
|
|
border-right: 0;
|
|
border-bottom: var(--border-line);
|
|
}
|
|
|
|
.postbox-detail {
|
|
min-height: 440px;
|
|
}
|
|
|
|
.postbox-admin-workspace {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.postbox-admin-list {
|
|
max-height: 260px;
|
|
border-right: 0;
|
|
border-bottom: var(--border-line);
|
|
}
|
|
|
|
.postbox-admin-detail-heading {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.postbox-provenance dl,
|
|
.postbox-admin-properties {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.postbox-message-detail {
|
|
padding: 16px;
|
|
}
|
|
|
|
.postbox-routing-heading {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
}
|