Begin reimplementing compose
This commit is contained in:
324
core/static/css/compose-panel.css
Normal file
324
core/static/css/compose-panel.css
Normal file
@@ -0,0 +1,324 @@
|
||||
.compose-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-shell-head {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-shell-eyebrow,
|
||||
.compose-shell .compose-meta-line,
|
||||
.compose-shell .compose-empty,
|
||||
.compose-shell .compose-typing,
|
||||
.compose-shell .compose-msg-meta,
|
||||
.compose-shell .compose-reply-banner-label {
|
||||
color: var(--bulma-text-weak, #6b7280);
|
||||
}
|
||||
|
||||
.compose-shell .compose-shell-eyebrow {
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.compose-shell .compose-contact-switch,
|
||||
.compose-shell .compose-platform-switch {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-status {
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-status .button {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-status-line {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-status-line.is-warning,
|
||||
.compose-shell .compose-status-line.is-danger {
|
||||
color: var(--bulma-danger, #cc0f35);
|
||||
}
|
||||
|
||||
.compose-shell .compose-status-line.is-success {
|
||||
color: var(--bulma-success, #257953);
|
||||
}
|
||||
|
||||
.compose-shell .compose-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
min-height: 24rem;
|
||||
max-height: 68vh;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--bulma-border, #dbdbdb);
|
||||
background: var(--bulma-scheme-main-bis, #f7f8fa);
|
||||
}
|
||||
|
||||
.compose-shell .compose-empty,
|
||||
.compose-shell .compose-typing {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-row.is-in {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.compose-shell .compose-row.is-out {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.compose-shell .compose-row.is-deleted .compose-bubble {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.compose-shell .compose-row.is-target-flash .compose-bubble,
|
||||
.compose-shell .compose-row.compose-reply-selected .compose-bubble {
|
||||
box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.24);
|
||||
}
|
||||
|
||||
.compose-shell .compose-bubble {
|
||||
width: fit-content;
|
||||
max-width: min(42rem, 100%);
|
||||
padding: 0.75rem 0.875rem;
|
||||
border: 1px solid var(--bulma-border, #dbdbdb);
|
||||
border-radius: 1rem;
|
||||
background: var(--bulma-scheme-main, #fff);
|
||||
}
|
||||
|
||||
.compose-shell .compose-bubble.is-out {
|
||||
border-color: rgba(50, 115, 220, 0.2);
|
||||
background: var(--bulma-link-light, #eef6fc);
|
||||
}
|
||||
|
||||
.compose-shell .compose-reply-ref {
|
||||
margin-bottom: 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 3px solid var(--bulma-border, #dbdbdb);
|
||||
}
|
||||
|
||||
.compose-shell .compose-reply-link {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--bulma-link, #3273dc);
|
||||
font-size: 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.compose-shell .compose-reply-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.compose-shell .compose-source-badge-wrap {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-source-badge {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.compose-shell .compose-media {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-media:last-of-type {
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-image {
|
||||
display: block;
|
||||
max-width: min(26rem, 100%);
|
||||
max-height: 24rem;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-body {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.compose-shell .compose-image-fallback.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compose-shell .compose-body + .compose-edit-history,
|
||||
.compose-shell .compose-media + .compose-body,
|
||||
.compose-shell .compose-body + .compose-reactions,
|
||||
.compose-shell .compose-reactions + .compose-msg-meta,
|
||||
.compose-shell .compose-edit-history + .compose-reactions,
|
||||
.compose-shell .compose-edit-history + .compose-msg-meta {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-edit-history {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-edit-history summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.compose-shell .compose-edit-history ul {
|
||||
margin: 0.5rem 0 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-edit-diff {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-edit-old {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.compose-shell .compose-edit-arrow {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.compose-shell .compose-reactions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-reaction-chip {
|
||||
min-height: 1.7rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-msg-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-msg-flag {
|
||||
font-size: 0.6875rem;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.compose-shell .compose-msg-flag.is-edited {
|
||||
color: var(--bulma-warning-dark, #7a5a00);
|
||||
}
|
||||
|
||||
.compose-shell .compose-msg-flag.is-deleted {
|
||||
color: var(--bulma-danger, #cc0f35);
|
||||
}
|
||||
|
||||
.compose-shell .compose-reply-btn {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-send-safety {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.compose-shell .compose-reply-banner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--bulma-border, #dbdbdb);
|
||||
border-radius: 0.75rem;
|
||||
background: var(--bulma-scheme-main-bis, #f7f8fa);
|
||||
}
|
||||
|
||||
.compose-shell .compose-reply-banner.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compose-shell .compose-reply-banner-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.compose-shell .compose-reply-banner-text {
|
||||
flex: 1 1 12rem;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.compose-shell .compose-composer-capsule {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--bulma-border, #dbdbdb);
|
||||
border-radius: 0.875rem;
|
||||
background: var(--bulma-scheme-main-bis, #f7f8fa);
|
||||
}
|
||||
|
||||
.compose-shell .compose-textarea {
|
||||
flex: 1 1 auto;
|
||||
min-height: 2.75rem;
|
||||
max-height: 8rem;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.compose-shell .compose-send-btn {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.compose-shell .compose-persistent-cancel {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.compose-shell.is-send-success .compose-composer-capsule {
|
||||
border-color: rgba(35, 209, 96, 0.55);
|
||||
}
|
||||
|
||||
.compose-shell.is-send-fail .compose-composer-capsule {
|
||||
border-color: rgba(255, 56, 96, 0.55);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.compose-shell .compose-thread {
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.compose-shell .compose-bubble {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.compose-shell .compose-composer-capsule {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.compose-shell .compose-send-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user