feat: initialize governed postbox module
This commit is contained in:
@@ -0,0 +1,640 @@
|
||||
.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,
|
||||
.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 {
|
||||
flex: 0 0 auto;
|
||||
min-height: 54px;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
border-bottom: var(--border-line);
|
||||
background: var(--panel-header);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.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-total {
|
||||
min-width: 24px;
|
||||
height: 22px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: var(--line);
|
||||
color: var(--text-strong);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.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-empty {
|
||||
min-height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 7px;
|
||||
padding: 30px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.postbox-empty.compact {
|
||||
min-height: 180px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.postbox-empty strong {
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.postbox-empty p,
|
||||
.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 {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.postbox-form-grid.two-columns {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.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-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-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: 1180px) {
|
||||
.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: 640px) {
|
||||
.postbox-form-grid.two-columns,
|
||||
.postbox-provenance dl,
|
||||
.postbox-admin-properties {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.postbox-message-detail {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user