/**
* SeekQuarry/Yioop --
* Open Source Pure PHP Search Engine, Crawler, and Indexer
*
* Copyright (C) 2009 - 2026 Chris Pollett chris@pollett.org
*
* LICENSE:
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*
* END LICENSE
*
* Styles for the user-mail feature: inbox listing, message view,
* compose form, account-edit form, and the mobile-specific layout
* tweaks. Loaded via the INCLUDE_STYLES mechanism in
* SocialComponent::userMailBaseData. Kept separate from search.css
* because the rules are exclusively for the mail feature and would
* otherwise inflate the global stylesheet.
*
* @author Chris Pollett chris@pollett.org
* @license https://www.gnu.org/licenses/ GPL3
* @link https://www.seekquarry.com/
* @copyright 2009 - 2026
* @filesource
*/
.mail-inbox-heading
{
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin-bottom: 0;
padding-right: 6px;
}
.mail-inbox-heading-title
{
flex: 0 1 auto;
align-items: center;
display: inline-flex;
gap: 0.3em;
min-width: 0;
}
.mail-inbox-heading-count
{
color: #888;
font-weight: normal;
}
.mail-inbox-empty-text
{
margin: 0.5em 0;
}
.mail-filter-wrap
{
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: auto;
}
.mail-filter-icon
{
color: #888;
left: 8px;
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.mail-filter-input
{
border: 1px solid #ccc;
border-radius: 1em;
padding: 4px 28px 4px 28px;
width: 200px;
font-size: inherit;
font-family: inherit;
}
.mail-filter-clear
{
color: #888;
cursor: pointer;
font-size: 1.2em;
line-height: 1;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
.mail-filter-clear:hover
{
color: #333;
}
/* #small-margin-help is position: absolute with no top set, so it
normally sits at its static-flow position. On the mail page that
flow position falls below the tall mail-container (the inbox
layout) or below the tall full-width edit/clone screen, dropping
the help panel to the bottom of the page; anchoring its top just
below the nav bar keeps it beside the content it explains. The
sibling combinators scope this to the mail page, where
#small-margin-help follows either .mail-container (inbox) or
.mail-current-activity (the Add/Edit Account and Clone screens),
leaving every other activity's help panel untouched. */
.mail-container ~ #small-margin-help,
.mail-current-activity ~ #small-margin-help
{
top: 90px;
}
.mail-inbox-pane
{
display: flex;
flex-direction: column;
height: 100%;
}
.mail-inbox-form
{
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
box-sizing: border-box;
}
.mail-inbox-scroll
{
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #eee;
margin-top: 0.1in;
}
.mail-inbox-table
{
width: 100%;
border-collapse: collapse;
margin-top: 0.1in;
table-layout: fixed;
}
.mail-inbox-scroll .mail-inbox-table
{
margin-top: 0;
}
.mail-inbox-table th,
.mail-inbox-table td
{
text-align: left;
padding: 6px 8px;
border-bottom: 1px solid #eee;
vertical-align: top;
overflow-wrap: break-word;
word-wrap: break-word;
user-select: none;
}
#mail-col-from
{
width: 20%;
}
#mail-col-star
{
width: 44px;
}
#mail-col-date
{
width: 6em;
}
.mail-col-star-cell
{
text-align: center;
padding: 0;
}
.mail-col-star-header
{
display: inline-block;
padding: 4px 6px;
color: #888;
text-decoration: none;
font-size: 20px;
line-height: 1;
}
.mail-col-star-header:hover
{
color: #555;
}
.mail-col-star-header-active
{
color: #e8b40b;
}
.mail-col-star-header-active:hover
{
color: #c89708;
}
.mail-inbox-star
{
color: #bbb;
text-decoration: none;
font-size: 20px;
line-height: 1;
display: inline-block;
padding: 4px 6px;
}
.mail-inbox-star:hover
{
color: #888;
}
.mail-inbox-star-filled
{
color: #e8b40b;
}
.mail-inbox-star-filled:hover
{
color: #c89708;
}
.mail-inbox-bulk-bar
{
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
margin-top: 6px;
background-color: #e6f0fb;
border: 1px solid #b8d4ee;
border-radius: 4px;
font-size: 13px;
flex-wrap: wrap;
}
.mail-inbox-bulk-selection-required,
.mail-inbox-bulk-mode-required
{
display: none;
}
.mail-inbox-bulk-bar.has-selection
.mail-inbox-bulk-selection-required,
.mail-inbox-bulk-bar.selection-mode
.mail-inbox-bulk-mode-required
{
display: inline-block;
}
.mail-inbox-bulk-count
{
color: #555;
}
.mail-inbox-bulk-action,
.mail-inbox-bulk-destination,
.mail-inbox-bulk-destination-account
{
padding: 3px 6px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
}
/* On mobile the bulk bar wraps; give the two move destination
selects the full row width so the account picker and the folder
picker each sit on their own line instead of crowding the
action select and the count text. */
.mobile .mail-inbox-bulk-destination,
.mobile .mail-inbox-bulk-destination-account
{
flex-basis: 100%;
max-width: 100%;
}
.mail-inbox-bulk-mode-toggle,
.mail-inbox-bulk-select-toggle
{
padding: 3px 12px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
color: #555;
}
.mail-inbox-bulk-select-toggle
{
margin-left: auto;
}
.mail-inbox-bulk-mode-toggle:hover,
.mail-inbox-bulk-select-toggle:hover
{
background-color: #f0f0f0;
}
.mail-inbox-bulk-mode-toggle[aria-pressed="true"],
.mail-inbox-bulk-select-toggle[aria-pressed="true"]
{
background-color: #555;
border-color: #555;
color: #fff;
}
.mail-inbox-bulk-mode-toggle[aria-pressed="true"]:hover,
.mail-inbox-bulk-select-toggle[aria-pressed="true"]:hover
{
background-color: #444;
border-color: #444;
}
.mail-inbox-table th
{
background-color: #f0f0f0;
font-weight: bold;
font-size: 10pt;
position: sticky;
top: 0;
z-index: 2;
}
.mail-col-resizer
{
position: absolute;
top: 0;
right: 0;
width: 7px;
height: 100%;
cursor: col-resize;
user-select: none;
border-right: 1px solid #ccc;
}
.mail-container-resizer
{
width: 100%;
height: 6px;
cursor: row-resize;
user-select: none;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
}
.mail-container
{
position: relative;
/* reserve a gutter on the right the exact width of
.mail-container-h-resizer so the resizer sits in its own
lane instead of overlapping the content pane (and the close
button that floats to the content pane's right edge); keep
this padding and the resizer width in sync. border-box
keeps the reserved gutter from widening the container past
its 100% width. */
box-sizing: border-box;
padding-right: 6px;
}
.mail-container-h-resizer
{
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 100%;
cursor: col-resize;
user-select: none;
background-color: #f0f0f0;
border-left: 1px solid #ccc;
}
.mail-inbox-table tr
{
cursor: pointer;
}
.mail-inbox-table tr:hover td
{
background-color: #f8f8ff;
}
.mail-inbox-table tr.mail-inbox-row-selected td
{
background-color: #e0d8f5;
}
.mail-inbox-table tr.mail-inbox-row-selected:hover td
{
background-color: #d6cce8;
}
.mail-inbox-table tr.mail-inbox-row-unread td
{
font-weight: bold;
}
.mail-inbox-table tr.mail-inbox-row-placeholder td
{
color: #888;
font-style: italic;
}
.mail-inbox-table tr.mail-inbox-row-placeholder
{
cursor: default;
}
.mail-inbox-table a
{
text-decoration: none;
}
.mail-inbox-table a:hover
{
text-decoration: underline;
}
.mail-inbox-table td:last-child
{
position: relative;
}
.mail-inbox-row-swipe-delete
{
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 0 18px;
background-color: #b00020;
color: #fff;
border: none;
border-radius: 0;
font-size: 13px;
font-weight: bold;
cursor: pointer;
transform: translateX(100%);
transition: transform 0.18s ease-out;
z-index: 1;
}
.mail-inbox-table tr.mail-inbox-row-swipe-revealed
.mail-inbox-row-swipe-delete
{
transform: translateX(0);
}
.mail-col-sort-link
{
color: inherit;
cursor: pointer;
}
.mail-message-pane
{
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
padding: 0 4px;
box-sizing: border-box;
}
.mail-message-back
{
align-items: center;
display: flex;
flex-shrink: 0;
gap: 8px;
justify-content: space-between;
padding: 2px 4px;
}
.mail-message-actions
{
align-items: center;
display: inline-flex;
gap: 4px;
}
.mail-message-delete-form
{
display: inline-flex;
margin: 0;
padding: 0;
}
.mail-message-move-form
{
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
}
.mail-message-move-destination
{
font-size: 16pt;
padding: 6px 10px;
max-width: 200px;
}
.mobile .mail-message-move-destination
{
font-size: 12pt;
padding: 3px 6px;
max-width: 140px;
}
.mail-message-actions-reply-group
{
display: inline-flex;
align-items: center;
gap: 4px;
}
.mail-message-actions-trash-group
{
display: inline-flex;
align-items: center;
padding-inline-start: 8px;
margin-inline-start: 4px;
border-inline-start: 1px solid #ccc;
}
.mail-message-delete-button
{
background: transparent;
border: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
line-height: 1;
}
.mail-message-headers
{
flex-shrink: 0;
margin: 4px 2px 6px 2px;
padding: 8px 12px;
background-color: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 4px;
position: relative;
min-height: 28px;
}
[data-mail-pretty-only].none
{
display: none;
}
.mail-message-toggle-raw
{
position: absolute;
top: 6px;
right: 8px;
padding: 3px 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
color: #555;
}
.mail-message-toggle-raw:hover
{
background-color: #f0f0f0;
}
.mail-message-toggle-raw[aria-pressed="true"]
{
background-color: #e6e6e6;
color: #222;
}
.mail-message-load-images
{
flex-shrink: 0;
margin: 0 2px 6px 2px;
padding: 6px 10px;
background-color: #fff8e1;
border: 1px solid #ffe082;
border-radius: 4px;
font-size: 12px;
color: #555;
}
.mail-message-load-images-button
{
padding: 3px 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
color: #555;
}
.mail-message-load-images-button:hover
{
background-color: #f0f0f0;
}
.mail-message-notice
{
margin: 6px 2px;
padding: 6px 10px;
background-color: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 12px;
color: #555;
}
.mail-alias-list
{
margin: 6px 0 6px 1em;
max-height: 2.2in;
overflow-y: auto;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 4px 8px;
background-color: #fafafa;
}
.mail-alias-table
{
border-collapse: collapse;
width: 100%;
}
.mail-alias-name
{
padding-right: 1em;
}
.mail-alias-form
{
display: flex;
align-items: center;
gap: 0.4em;
}
.mail-alias-form .mail-alias-input,
.mail-alias-form .mail-alias-domain
{
height: 0.39in;
box-sizing: border-box;
margin: 0;
padding: 0 6px;
border: 1px solid #999;
border-radius: 5px;
font-size: 13pt;
position: relative;
top: 0;
vertical-align: middle;
}
.mail-alias-at
{
font-size: 13pt;
}
.mail-alias-form .mail-alias-add
{
height: 0.39in;
box-sizing: border-box;
margin: 0;
padding: 0 0.18in;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18pt;
line-height: 1;
top: 0;
}
.mail-dkim-badge-wrap
{
position: absolute;
top: 4px;
right: 64px;
}
.mobile .mail-message-toggle-raw,
.mobile .mail-dkim-badge-wrap
{
position: static;
display: inline-block;
vertical-align: middle;
margin-bottom: 6px;
}
.mobile .mail-dkim-badge-wrap
{
margin-left: 6px;
}
.mail-dkim-icon
{
padding: 2px;
background-color: transparent;
border: none;
cursor: pointer;
line-height: 0;
color: #757575;
}
.mail-dkim-icon.mail-dkim-pass
{
color: #2e7d32;
}
.mail-dkim-icon.mail-dkim-fail
{
color: #c62828;
}
.mail-dkim-icon.mail-dkim-no_key
{
color: #757575;
}
.mail-dkim-detail
{
position: absolute;
top: 26px;
right: 0;
z-index: 5;
width: 30em;
max-width: 80vw;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
font-size: 13px;
font-weight: normal;
text-align: left;
}
.mail-dkim-detail-title
{
font-weight: bold;
margin-bottom: 6px;
}
/* On a phone the detail's right-edge anchor (it hangs off the
badge, which itself sits 64px in from the header's right edge)
pushes a 30em panel off the left of the screen, cutting off the
labels. Lift it out of that anchor and pin it to the viewport as
a full-width sheet at the bottom, scrolling within itself when
it is taller than the screen. mail.css loads after search.css,
so this more specific rule wins. */
.mobile .mail-dkim-detail
{
position: fixed;
left: 8px;
right: 8px;
top: auto;
bottom: 8px;
width: auto;
max-width: none;
max-height: 70vh;
overflow-y: auto;
}
.mail-dkim-detail-table
{
width: 100%;
border-collapse: collapse;
}
.mail-dkim-detail-table th
{
text-align: left;
vertical-align: top;
padding: 2px 8px 2px 0;
color: #555;
font-weight: normal;
white-space: nowrap;
}
.mail-dkim-detail-table td
{
vertical-align: top;
padding: 2px 0;
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
word-break: break-all;
}
.mail-dkim-detail-summary
{
margin-top: 8px;
color: #333;
}
.mail-message-body-raw
{
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 10pt;
white-space: pre-wrap;
margin: 0;
}
.mail-message-header-row
{
display: flex;
gap: 0.5em;
align-items: baseline;
padding: 2px 0;
word-break: break-word;
}
.mail-message-header-label
{
font-weight: bold;
flex-shrink: 0;
min-width: 4em;
}
.mail-message-header-value
{
color: #333;
}
.mail-attachment-list
{
flex-shrink: 0;
margin: 6px 2px 4px 2px;
padding: 8px 12px;
background-color: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
.mail-attachment-heading
{
margin: 0 0 8px 0;
font-size: 1em;
}
.mail-attachment-list-header
{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5em;
margin-bottom: 8px;
}
.mail-attachment-list-header .mail-attachment-heading
{
margin: 0;
}
.mail-attachment-download-all
{
font-size: 13px;
color: #4a90e2;
text-decoration: none;
}
.mail-attachment-download-all:hover
{
text-decoration: underline;
}
.mail-attachment-grid
{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mail-attachment-card
{
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
background-color: #fff;
border: 1px solid #d0d0d0;
border-radius: 4px;
text-decoration: none;
color: inherit;
min-width: 200px;
max-width: 280px;
box-sizing: border-box;
}
.mail-attachment-card:hover
{
background-color: #f5f5f5;
border-color: #999;
}
.mail-attachment-thumb
{
flex-shrink: 0;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
border-radius: 3px;
overflow: hidden;
}
.mail-attachment-thumb img
{
width: 100%;
height: 100%;
object-fit: cover;
}
.mail-attachment-ext-label
{
font-size: 12px;
font-weight: bold;
color: #777;
letter-spacing: 0.5px;
}
.mail-attachment-info
{
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mail-attachment-filename
{
font-weight: bold;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mail-attachment-meta
{
font-size: 12px;
color: #777;
}
.mail-message-body
{
flex: 1 1 auto;
min-height: 0;
margin: 0 2px;
padding: 12px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: auto;
word-break: break-word;
}
.mail-message-body-text
{
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 10pt;
white-space: pre-wrap;
margin: 0;
}
.mail-message-body-html
{
font-size: 11pt;
line-height: 1.4;
}
.mail-message-body-html img
{
max-width: 100% !important;
height: auto !important;
}
.mail-message-inline-image
{
display: block;
height: auto;
margin: 0.4rem 0;
max-width: 100%;
}
.mail-message-body-html table
{
max-width: 100%;
}
/* The app's own .mobile p rule sets a 300px minimum width for
paragraphs, which is right for the chrome but leaks into a
rendered message: in a two-column newsletter it forces each
column past 300px, so the table cannot fit a phone and the
whole body overflows. Reset the minimum for message content so
its paragraphs and table cells shrink and wrap. mail.css loads
after search.css, so this equal-specificity rule wins. */
.mail-message-body-html p,
.mail-message-body-html td,
.mail-message-body-html th,
.mail-message-body-html table
{
min-width: 0;
}
.mail-blocked-image
{
display: none !important;
}
.mail-message-body-html a
{
word-break: break-all;
}
.mail-compose-pane
{
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
padding: 4px 6px 4px 0;
overflow: hidden;
}
.mail-compose-heading
{
flex-shrink: 0;
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 0.5em;
}
.mail-compose-form
{
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
margin-top: 0.1in;
}
.mail-compose-row
{
flex-shrink: 0;
margin-bottom: 0.15in;
}
.mail-compose-field
{
align-items: center;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
display: flex;
gap: 4px;
padding: 4px 6px;
width: 100%;
max-width: 100%;
}
.mail-compose-field-label
{
color: #555;
flex-shrink: 0;
padding: 0 4px;
}
.mail-compose-field-collapse
{
background: none;
border: 0;
border-radius: 12px;
cursor: pointer;
font-family: inherit;
font-size: inherit;
transition: background-color 0.12s, box-shadow 0.12s;
}
.mail-compose-field-collapse:hover,
.mail-compose-field-collapse:focus
{
background-color: #f0f0f0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
color: #000;
outline: none;
}
.mail-compose-field .mail-compose-input
{
background-color: transparent;
border: 0;
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
.mail-compose-field .mail-compose-input:focus
{
outline: none;
}
.mail-compose-recipient-toggles
{
align-items: center;
display: inline-flex;
flex-shrink: 0;
gap: 4px;
}
.mail-compose-recipient-toggle
{
background: none;
border: 0;
border-radius: 12px;
color: #555;
cursor: pointer;
font-family: inherit;
font-size: inherit;
padding: 2px 8px;
transition: background-color 0.12s, box-shadow 0.12s;
}
.mail-compose-recipient-toggle:hover,
.mail-compose-recipient-toggle:focus
{
background-color: #f0f0f0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
color: #000;
outline: none;
}
.mail-compose-body-row
{
flex: 1 1 auto;
min-height: 80px;
display: flex;
flex-direction: column;
}
.mail-compose-body-row .mail-compose-body
{
flex: 1 1 auto;
min-height: 0;
resize: none;
}
.mail-compose-attach-button
{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 6px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
line-height: 1;
color: #555;
}
.mail-compose-attach-button:hover
{
background-color: #e0e0e0;
}
.mail-compose-form.dragover
{
outline: 2px dashed #4a90e2;
outline-offset: -2px;
background-color: #f5faff;
}
.mail-compose-file-input
{
/* visually hidden but kept in the accessibility tree
so screen readers and keyboard users can still
activate it via the paperclip label. */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.mail-compose-attachments
{
flex-shrink: 0;
max-height: 25vh;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 4px 0;
}
.mail-compose-attachments:empty
{
display: none;
}
.mail-compose-attachment-card
{
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background-color: #fff;
border: 1px solid #d0d0d0;
border-radius: 4px;
min-width: 180px;
max-width: 260px;
box-sizing: border-box;
font-size: 13px;
}
.mail-compose-attachment-thumb
{
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
border-radius: 3px;
overflow: hidden;
}
.mail-compose-attachment-thumb img
{
width: 100%;
height: 100%;
object-fit: cover;
}
.mail-compose-attachment-ext-label
{
font-size: 11px;
font-weight: bold;
color: #777;
letter-spacing: 0.5px;
}
.mail-compose-attachment-info
{
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mail-compose-attachment-name
{
font-weight: bold;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mail-compose-attachment-size
{
font-size: 11px;
color: #777;
}
.mail-compose-attachment-remove
{
flex-shrink: 0;
padding: 2px 8px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
color: #555;
line-height: 1;
}
.mail-compose-attachment-remove:hover
{
background-color: #f0f0f0;
}
.mail-compose-from-row
{
display: flex;
align-items: baseline;
gap: 0.4em;
margin-bottom: 0.15in;
}
.mail-compose-from-row .mail-compose-label
{
display: inline;
margin-bottom: 0;
}
.mail-compose-label
{
display: block;
font-weight: bold;
margin-bottom: 0.05in;
}
.mail-compose-from
{
color: #555;
}
.mail-compose-body
{
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
padding: 6px 8px;
resize: vertical;
width: 100%;
max-width: 100%;
}
.mail-compose-buttons
{
display: flex;
gap: 0.5em;
justify-content: center;
margin-top: 0.2in;
}
.mail-compose-button
{
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
color: inherit;
cursor: pointer;
display: inline-block;
font-size: inherit;
padding: 6px 14px;
text-decoration: none;
}
.mail-compose-button:hover
{
background-color: #e0e0e0;
}
.mail-compose-send-split
{
display: inline-flex;
position: relative;
}
.mail-compose-send-split .mail-compose-button
{
margin: 0;
}
.mail-compose-send-button
{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
.mail-compose-schedule-toggle
{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 1px solid #ccc;
padding: 6px 10px;
}
.mail-compose-schedule-popover
{
position: absolute;
bottom: calc(100% + 4px);
inset-inline-end: 0;
min-width: 240px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
padding: 6px 0;
z-index: 10;
text-align: start;
}
.mail-compose-schedule-heading
{
color: #888;
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0.04em;
padding: 6px 14px 4px;
text-transform: uppercase;
}
.mail-compose-schedule-preset
{
background: transparent;
border: none;
cursor: pointer;
display: block;
font: inherit;
padding: 8px 14px;
text-align: left;
width: 100%;
}
.mail-compose-schedule-preset:hover
{
background-color: #f0f0f0;
}
.mail-compose-schedule-choose
{
border-top: 1px solid #eee;
}
.mail-compose-schedule-custom
{
padding: 6px 14px 10px;
}
.mail-compose-schedule-input
{
font: inherit;
padding: 4px 6px;
width: 100%;
box-sizing: border-box;
}
.mail-compose-schedule-status
{
align-self: center;
color: #555;
font-size: 0.9em;
}
.mail-compose-schedule-clear
{
background: transparent;
border: none;
color: #888;
cursor: pointer;
font-size: 1em;
padding: 0 4px;
}
.mail-compose-schedule-clear:hover
{
color: #333;
}
.mail-account-form .narrow-field
{
width: 100%;
max-width: 320px;
box-sizing: border-box;
}
.mail-account-form .table-label
{
max-width: 220px;
white-space: normal;
}
.mail-form-label-scope
{
display: block;
font-weight: normal;
}
.mail-back-mobile
{
display: none;
}
.mobile .mail-back-mobile
{
display: inline-block;
}
.mail-account-form .mail-form-actions
{
display: flex;
gap: 0.5em;
flex-wrap: wrap;
justify-content: center;
}
/* the "Incoming Mail (IMAP)" / "Outgoing Mail (SMTP)" section
headers span both columns and should read left-to-right, not
inherit the right-aligned .table-label used by field labels */
.html-ltr .mail-section-label
{
text-align: left;
padding-top: 8px;
}
.html-rtl .mail-section-label
{
text-align: right;
padding-top: 8px;
}
/* Save is a <button> (which carries UA padding) and Cancel is an
<a>; without an explicit horizontal padding the anchor's text
hugs its border and the two buttons look mismatched. Pin both
to the same box. */
.mail-account-form .button-box
{
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile .mail-inbox-table th,
.mobile .mail-inbox-table td
{
padding: 4px 6px;
font-size: 10pt;
}
.mobile .mail-filter-wrap
{
display: inline-flex;
flex: 1 1 6em;
min-width: 0;
margin-inline-start: 0.3em;
}
.mobile .mail-inbox-heading
{
flex-wrap: nowrap;
}
.mobile .mail-inbox-heading-title
{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.mobile .mail-filter-input
{
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.mobile .mail-current-activity .media-buttons-container,
.mobile .mail-current-activity .float-opposite
{
margin-inline-end: 6px;
margin-top: 10px;
position: relative;
z-index: 11;
}
.mobile .mail-compose-schedule-popover
{
inset-inline-start: auto;
inset-inline-end: 4px;
min-width: 0;
width: max-content;
max-width: 78vw;
}
/* iOS Safari auto-zooms when a focused field's font-size is under
16px, and that zoom is what forced the compose pane to scroll
horizontally on focus. Pinning the compose fields to 16px keeps
the page from zooming. */
.mobile .mail-compose-input,
.mobile .mail-compose-body,
.mobile .mail-filter-input
{
font-size: 16px;
}
/* On a narrow screen the alias list carried a left-only indent,
which pushed it off-centre, and the add-row's text field kept
its intrinsic width, which shoved the + button past the pane
border. Drop the asymmetric indent and let the alias field be
the flexible part of the row so the domain menu and + button
stay inside the pane. Logical properties keep this correct under
an RTL locale. */
.mobile .mail-alias-list
{
margin-inline-start: 0;
}
.mobile .mail-alias-form .mail-alias-input
{
flex: 1 1 auto;
min-width: 0;
}
.mobile .mail-alias-form .mail-alias-domain
{
flex: 0 1 auto;
min-width: 0;
max-width: 8em;
}
.mobile .mail-alias-form .mail-alias-add
{
flex: 0 0 auto;
}
.mobile #mail-col-from
{
width: 30%;
}
.mobile #mail-col-date
{
width: 5em;
}
/* On a narrow screen the two-column account/clone form table
stretches full width, which pushes a right-aligned label to one
edge and its control to the other (most visible on the clone
form's long "max most recent" row). Stacking each label above
its control keeps the pair together. Using display:block on the
cells (rather than a fixed text-align) keeps this correct in
both portrait and landscape and under an RTL locale, where the
label simply reads from the start edge. */
.mobile .mail-account-form table,
.mobile .mail-account-form tbody,
.mobile .mail-account-form tr
{
display: block;
width: 100%;
}
.mobile .mail-account-form th.table-label,
.mobile .mail-account-form td
{
display: block;
width: 100%;
box-sizing: border-box;
text-align: start;
max-width: none;
}
.user-accounts-folder-row
{
display: flex;
align-items: center;
gap: 4px;
user-select: none;
flex-wrap: wrap;
}
.user-accounts-folder-row a
{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
align-items: center;
}
.user-accounts-folder-label
{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
align-items: center;
padding: 4px 6px;
}
.user-accounts-folder-row.user-accounts-folder-noselect
{
padding: 0;
}
.user-accounts-folder-disclosure
{
flex: 0 0 12px;
width: 12px;
box-sizing: border-box;
padding: 0;
margin: 0;
text-align: center;
cursor: pointer;
color: #888;
visibility: hidden;
transition: transform 0.15s ease-out;
transform-origin: 50% 50%;
display: inline-block;
overflow: visible;
}
.user-accounts-folder-has-children
> .user-accounts-folder-disclosure
{
visibility: visible;
}
.user-accounts-folder-row.expanded
> .user-accounts-folder-disclosure
{
transform: rotate(90deg);
}
.user-accounts-folder-children
{
flex-basis: 100%;
list-style: none;
padding-left: 18px;
margin: 0;
}
.user-accounts-folder-row:not(.expanded)
> .user-accounts-folder-children
{
display: none;
}
.user-accounts-folder-icon
{
margin-right: 4px;
flex-shrink: 0;
}
.user-accounts-folder-name
{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-accounts-folder-unread
{
color: #888;
flex-shrink: 0;
font-feature-settings: "tnum";
font-size: 0.9em;
margin-left: 8px;
}
.user-accounts-folder-active .user-accounts-folder-unread
{
color: inherit;
}
.user-accounts-name
{
cursor: pointer;
user-select: none;
}
/* Grip handle shown on the left of a reorderable account row;
the only part that initiates a drag, so dragging does not fight
the click-to-expand behavior of the account name. */
/* Grip handle for a reorderable account row. It floats to the
inline-end (right in ltr, left in rtl via .float-opposite) and
sits on the same visual row as the account name rather than
above it, so reordering does not cost a row of vertical space
per account. Only the handle starts a drag, so the account-name
click-to-expand still works. The glyphs are rotated a quarter
turn so the two vertical-ellipsis characters read as a compact
horizontal grip. */
.user-accounts-drag-handle
{
cursor: grab;
user-select: none;
color: #999;
margin-top: 2px;
padding: 0 2px;
font-size: 12px;
line-height: 1;
letter-spacing: -3px;
transform: rotate(90deg);
}
.user-accounts-reorderable.user-accounts-dragging
{
opacity: 0.4;
}
.user-accounts-reorderable.user-accounts-drag-over
{
border-top: 2px solid #69c;
}
.user-accounts-reorderable.user-accounts-grabbed
{
outline: 2px dashed #69c;
}
.user-accounts-name.user-accounts-name-editing
{
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.user-accounts-name.user-accounts-name-editing
> .user-accounts-toggle
{
flex: 1 1 auto;
min-width: 0;
}
.user-accounts-name.user-accounts-name-editing
> .user-accounts-edit-toolbar
{
flex-basis: 100%;
margin-top: 2px;
margin-left: 0;
justify-content: center;
}
.user-accounts-folder-row > .user-accounts-edit-toolbar
{
flex-shrink: 0;
margin-left: auto;
}
.user-accounts-folder-row-editing
{
flex-wrap: nowrap;
}
.user-accounts-folder-row-editing
> a > .user-accounts-folder-unread
{
display: none;
}
.user-accounts-folder-row-editing
> .user-accounts-folder-children
{
display: none;
}
.user-accounts-new-folder-box
{
display: flex;
align-items: center;
gap: 4px;
padding: 4px 6px;
}
.user-accounts-new-folder-input
{
flex: 1 1 auto;
min-width: 0;
padding: 2px 6px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 10pt;
}
.mail-empty-pane
{
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 60vh;
padding: 12px;
text-align: center;
}
.mail-empty-pane .user-mail-warning
{
margin: 0 0 16px 0;
padding: 20px 32px;
font-size: 14pt;
border-radius: 12px;
}
.mail-empty-pane .button-box
{
height: auto;
padding: 2px 12px;
}
.mail-empty-or
{
margin: 0 0 16px 0;
color: #888;
font-style: italic;
}
.mail-inbox-answered
{
color: #888;
font-size: 0.9em;
}
.mail-scheduled-pane
{
padding: 0.2in;
}
.mail-scheduled-heading
{
margin-top: 0;
}
.mail-scheduled-empty
{
color: #555;
font-style: italic;
}
.mail-scheduled-table
{
border-collapse: collapse;
width: 100%;
}
.mail-scheduled-table th,
.mail-scheduled-table td
{
border-bottom: 1px solid #eee;
padding: 6px 10px;
text-align: left;
vertical-align: top;
}
.mail-scheduled-table th
{
color: #666;
font-size: 0.85em;
font-weight: bold;
text-transform: uppercase;
}
.mail-scheduled-status-pending
{
color: #666;
}
.mail-scheduled-status-failed
{
color: #c0392b;
font-weight: bold;
}
.mail-scheduled-status-sending
{
color: #2c80b4;
font-style: italic;
}
.mail-scheduled-cancel-form
{
margin: 0;
}
.mail-scheduled-cancel-button
{
background: transparent;
border: 1px solid #ccc;
border-radius: 3px;
color: inherit;
cursor: pointer;
font: inherit;
padding: 4px 10px;
}
.mail-scheduled-cancel-button:hover
{
background-color: #eee;
}
.mail-loading
{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 32px 16px;
color: #888;
}
.mail-loading-spinner
{
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-top-color: #888;
border-radius: 50%;
animation: mail-spin 0.7s linear infinite;
}
@keyframes mail-spin
{
to
{
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce)
{
.mail-loading-spinner
{
animation: none;
}
}
(c) 2026 Seekquarry - Open Source Search Engine Software