diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/glodaFacetView.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/glodaFacetView.css | 723 |
1 files changed, 723 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/glodaFacetView.css b/comm/mail/themes/shared/mail/glodaFacetView.css new file mode 100644 index 0000000000..2707545185 --- /dev/null +++ b/comm/mail/themes/shared/mail/glodaFacetView.css @@ -0,0 +1,723 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://messenger/skin/messenger.css"); +@import url("chrome://messenger/skin/colors.css"); +@import url("chrome://messenger/skin/layout.css"); +@import url("chrome://messenger/skin/widgets.css"); + +html, +body { + margin: 0; + padding: 0; +} + +body { + height: 100%; + overflow-y: auto; +} + +#body { + --dateColor: var(--color-gray-20); + --dateTextColor: var(--color-gray-90); + --barColor: var(--selected-item-color); + --barHlColor: var(--linkColor); + --dateHLColor: var(--selected-item-color); + --panelHoverColor: inherit; + --linkColor: var(--color-blue-70); +} + +@media (prefers-color-scheme: dark) { + #body { + --dateColor: var(--color-gray-60); + --dateTextColor: var(--color-white); + --linkColor: var(--color-blue-30); + } +} + +@media (prefers-contrast) { + #body { + --panelHoverColor: SelectedItemText; + --linkColor: -moz-NativehyperlinkText; + } +} + +#gloda-facet-view { + display: flex; + background-color: var(--layout-background-0); + color: var(--layout-color-0); + align-items: stretch; +} + +.facets-sidebar { + width: 20em; + max-width: 20em; + padding: 4px; + padding-inline-start: 1em; + background-color: var(--layout-background-1); + color: var(--layout-color-1); +} + +#main-column { + flex: 1; + padding-inline-start: 1em; + min-height: 100vh; +} + +#header { + max-width: 60em; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 2em; +} + +#data-column { + margin-top: 1em; + margin-inline-end: 1em; + max-width: 60em; + display: flex; + flex-direction: column; +} + +.popup-menu { + position: absolute; + display: block; + z-index: 100; + overflow: hidden; + padding: 3px; + border: 1px solid var(--arrowpanel-border-color); + border-radius: 8px; + background-color: var(--arrowpanel-background); + box-shadow: 0 0 4px hsla(210, 4%, 10%, .2); +} + +.popup-menuitem { + font: menu; + padding: 4px 10px; + border-radius: 3px; +} + +.popup-menuitem:hover, +.popup-menuitem:focus { + background-color: var(--arrowpanel-dimmed); + color: var(--panelHoverColor); +} + +.popup-menu[variety="remainder"] .undo { + display: none; +} +.popup-menu[variety="include"] .top { + display: none; +} +.popup-menu[variety="include"] .bottom { + display: none; +} +.popup-menu[variety="exclude"] .top { + display: none; +} +.popup-menu[variety="exclude"] .bottom { + display: none; +} + +.popup-menuitem:focus { + cursor: pointer; +} + +.popup-menu[variety="invisible"] { + display: none; +} + +/* ===== Query Explanation ===== */ + +#query-explanation { + padding-inline-start: 0; + font-size: small; +} + +.explanation-fulltext-label, +.explanation-query-label { + font-size: medium; + font-weight: bold; +} + +.explanation-fulltext-label, +.explanation-fulltext-term { + margin: 0 0.1em; +} + +.explanation-fulltext-criteria { + color: var(--layout-color-3); + margin: 0 0.1em; +} + +.explanation-query-label, +.explanation-query-involves, +.explanation-query-tagged { + margin-inline-end: 0.5ex; +} + +/* ===== Facets ===== */ + +h1, h2, h3 { + cursor: default; +} + +.facetious[uninitialized] { + display: none !important; +} + +.facetious { + display: list-item; /* take the whole column width */ + list-style: none; + padding: 2px; +} + +.facet-included-header[state="empty"], +.facet-excluded-header[state="empty"], +.facet-remaindered-header[needed="false"] { + display: none; +} + +.facet-included-header[state="empty"] + .facet-included, +.facet-excluded-header[state="empty"] + .facet-excluded, +.facet-remaindered:empty { + display: none; +} + +.facet-excluded > .bar > .bar-link { + text-decoration: line-through; /* strike the names of excluded facets */ +} + +.date-wrapper { + position: relative; + height: 80px; + display: block; + padding: 0; + padding-top: 0.5em; + margin-inline-end: 1em; + padding-inline-start: 2em; + padding-bottom: 1em; +} + +.gloda-timeline-button { + margin-inline-start: 8px; +} + +.gloda-timeline-button > img { + /* Icon is squashed. */ + width: 14px; + height: 10px; + margin-inline-end: 2px; + -moz-context-properties: fill; + fill: currentColor; +} + +.gloda-timeline-button[checked="true"] { + background: var(--toolbarbutton-active-background); + border-color: var(--toolbarbutton-active-bordercolor); + box-shadow: var(--toolbarbutton-active-boxshadow); +} + +.facet-date-zoom-out { + position: absolute; + top: -18px; + left: 0; + width: 24px !important; + height: 24px !important; + background-position: center center; + background-repeat: no-repeat; + border: 1px solid transparent; + border-radius: var(--button-border-radius); +} + +html[dir="rtl"] .facet-date-zoom-out { + left: auto; + right: 0; +} + +.facetious[type="date"][zoomedout="false"] .facet-date-zoom-out { + background-image: url("chrome://messenger/skin/icons/zoomout.svg"); + cursor: pointer; + -moz-context-properties: fill; + fill: currentColor; +} + +.facetious[type="date"][zoomedout="false"] .facet-date-zoom-out:hover { + fill: var(--selected-item-text-color); + background-color: var(--selected-item-color); + border-color: Field; +} + +.date-vis-frame { + position: absolute; + top: 0; + left: 0; +} + +html[dir="rtl"] .date-vis-frame { + left: auto; + right: 0; +} + +/* === Boolean Facet === */ + +#facet-fromMe, #facet-toMe, #facet-star, #facet-attachmentTypes { + display: inline-block; /* override the general .facetious list-item style */ +} + +/* special case: hide these two facets when they don't match */ +#facet-star[disabled], #facet-attachmentTypes[disabled] { + display: none; +} + +.facet-checkbox-bubble { + display: inline-flex; + padding: 2px; + padding-inline-end: 6px; + border-radius: var(--button-border-radius); + cursor: pointer; +} + +.facet-checkbox-bubble > input { + display: none; +} + +facet-boolean[disabled] { + opacity: 0.6; +} + +facet-boolean[disabled] > .facet-checkbox-bubble, +facet-boolean-filtered[disabled] > .facet-checkbox-bubble { + cursor: default; +} + +facet-boolean:not([disabled]):hover > .facet-checkbox-bubble, +facet-boolean-filtered:not([disabled]):hover > .facet-checkbox-bubble, +facet-boolean[checked="true"]:not([disabled]) > .facet-checkbox-bubble, +facet-boolean-filtered[checked="true"]:not([disabled]) > .facet-checkbox-bubble { + background-color: var(--selected-item-color); + color: var(--selected-item-text-color); +} + +.facet-checkbox-label, +.facet-checkbox-count { + margin: 3px; +} + +.facetious:not(:hover) > .facet-checkbox-count { + color: var(--layout-color-3); +} +.facet-checkbox-count:empty { + display: none; +} +.facet-checkbox-count::before { + content: "("; +} +.facet-checkbox-count::after { + content: ")"; +} + +/* === Boolean Filtered === */ + +facet-boolean-filtered:not([checked]) > .facet-filter-list { + display: none +} + +.facet-filter-list { + display: block; +} + +/* === Discrete Facet === */ + +.facet-content { + max-height: 32em; + overflow: auto; +} + +.facet-more { + display: none; + margin: 1px; + margin-top: 0.5em; + cursor: pointer; +} + +.facet-more[needed="true"] { + display: inline-block; +} + +html[dir="rtl"] .bar-count { + right: auto; + left: 3px; +} + +.barry { + margin: 0; + padding: 0; + border-top: 1px solid var(--layout-color-3); +} + +.bar { + position: relative; + cursor: pointer; + border-bottom: 1px solid var(--layout-color-3); +} + +.bar[selected="true"] { + background-color: var(--selected-item-color); + color: var(--selected-item-text-color); +} + +.bar:hover, +.bar:focus { + background-color: var(--selected-item-color); + outline: none; +} + +.bar-link { + text-decoration: none; + display: block; + color: var(--linkColor); + padding-top: 0.3em; + padding-bottom: 0.3em; + padding-inline-start: 0.5em; + padding-inline-end: 4em; + position: relative; + z-index: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.bar-count { + position: absolute; + display: block; + right: 0; + margin-inline-end: 8px; + line-height: 1.6em; + color: var(--layout-color-3); +} + +html[dir="rtl"] .bar-link { + padding: 0.3em 0.5em 0.3em 2em; +} + +.bar:hover > .bar-link, +.bar:hover > .bar-count, +.bar:focus > .bar-link, +.bar:focus > .bar-count { + color: var(--selected-item-text-color); +} + +.bar[selected="true"]> .bar-link { + color: var(--selected-item-text-color); +} +.bar[selected="true"] > .bar-count { + color: var(--selected-item-text-color); +} + +/* ===== Results ===== */ + +.results-message-header { + display: none; /* $('.results-message-header').show() is run if there are results */ + border-bottom: 2px solid hsla(0, 0%, 60%, 0.25); + padding: 4px 2px; + padding-inline-end: 0; + margin-bottom: 0.5em; +} + +#results[state="some"] .results-message-header { + display: flex; + align-items: center; +} + +.results-message-count { + font-weight: 600; + font-size: 1rem; + margin: 0; +} + +.results-message-showall-button { + appearance: none !important; + color: var(--linkColor); + cursor: pointer; + padding: 4px; + border-radius: var(--button-border-radius); + padding-inline-end: 20px; + margin-inline-end: 2px; + -moz-context-properties: fill; + fill: currentColor; + background-image: url("chrome://messenger/skin/icons/new-window.svg"); + background-position: right 4px center; + background-size: 11px; + background-repeat: no-repeat; +} + +.results-message-showall-button:hover, +.results-message-showall-button:focus { + background-color: var(--selected-item-color); + color: var(--selected-item-text-color); +} + +.results-message-sort-bar { + flex: 1; + display: flex; + justify-content: end; +} + +#sortby { + appearance: none; + min-height: 24px; + color: inherit; + margin: 1px 5px; + padding-block: 0; + padding-inline: 4px 20px; + border: 1px solid var(--button-border-color); + border-radius: var(--button-border-radius); + background-color: var(--button-background-color); + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + background-position: right 4px center; + background-repeat: no-repeat; + background-size: auto 12px; + -moz-context-properties: fill; + fill: currentColor; +} + +#sortby:dir(rtl) { + background-position-x: left 4px; +} + +#sortby:hover, +#sortby:focus { + background-color: var(--button-hover-background-color); + cursor: pointer; +} + +/* ===== Messages ===== */ + +.message { + display: block; + font-family: sans-serif; + font-size: small; + padding: 3px 5px; + border: 1px solid transparent; + border-bottom-color: lightgrey; + border-radius: var(--button-border-radius); + color: var(--layout-color-1); + overflow: hidden; +} +.message:not(:first-child) { + border-top-style: none; +} +.message:last-child { + border-bottom-color: transparent; +} + +.message:hover { + border-color: lightgrey; + box-shadow: 0 0 1px lightgrey inset, 0 0 1px lightgrey inset, 0 0 1px lightgrey inset; +} + +.message:hover .message-subject { + color: var(--selected-item-color); +} + +.message .message-subject:hover, +.message .message-subject:focus { + background-color: var(--selected-item-color); + color: var(--selected-item-text-color); +} + +.message:focus, +.message[unread="true"]:focus { + border: 1px dotted lightgrey; + padding: 1em 0; +} + +.message-header { + margin-bottom: 0.5em; +} +.message-meta { + float: inline-end; + padding-inline-start: 2em; + text-align: end; + max-width: 20em; + max-height: 10em; + overflow: hidden; + color: var(--layout-color-3); +} + +.message-attachments { + text-align: end; + overflow: hidden; +} + +.message-attachment { + max-width: 20em; + text-align: start; + display: inline-block; + white-space: nowrap; + padding-inline-start: 1ex; +} + +.message-attachment::after { + content: ", "; +} +.message-attachment:last-child::after { + content: ""; +} + +.message-attachment-icon { + display: inline-block; + width: 16px; + height: 16px; + background: url("chrome://messenger/skin/icons/attach.svg") transparent no-repeat center right; + -moz-context-properties: fill; + fill: currentColor; +} + +html[dir="rtl"] .message-attachment-icon { + background-position: center left; +} + +.message-line { + position: relative; +} + +.message-addresses-group { + text-align: end; +} + +.message-star[starred="true"] { + display: inline-block; + width: 12px !important; + height: 12px; + background-image: url("chrome://messenger/skin/icons/flagged.svg"); + background-size: contain; + -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity; + fill: #f4bc44; + fill-opacity: 1; + stroke: #f4bc44; + stroke-opacity: 1; +} + +.message-addresses-group { + padding-inline-start: 1em; +} + +.message-subject-group { + padding-inline-start: 2px; /* to line up the subjects with the "Top N messages out of M" */ +} + +.message-author, .message-recipients { + text-align: end; + display: inline; + color: var(--layout-color-1); +} + +.message-subject { + color: var(--linkColor); + font-size: medium; +} + +.message-subject:hover { + cursor: pointer; +} + +.message-body { + color: var(--layout-color-1); + margin-inline-start: 1em; + font-family: monospace; + font-size: medium; + white-space: pre-wrap; +} + +.message-body-fulltext-match { + color: var(--selected-item-text-color); + background-color: var(--selected-item-color); + border-radius: var(--button-border-radius); +} + +.message-recipients-group { + margin-inline-start: 0.5em; + font-size: small; +} + +.message-tag { + display: inline-block; /* to avoid splitting 'To' and 'Do' e.g. */ + margin-inline-start: 3px; + padding: 0 0.5ex; + border-radius: 3px; + border: 1px solid color-mix(in srgb, currentColor 50%, transparent); +} + +.show-more { + display: none; /* $('.show-more').show() is run if there are results */ + float: inline-end; + margin-block: 5px 2em; + margin-inline-end: 1em; + cursor: pointer; + align-self: flex-end; +} + +div.loading, +div.empty { + margin: 0 auto; + text-align: center; +} + +span.loading, +span.empty { + color: var(--layout-color-2); + background-color: var(--layout-background-2); + border: 1px outset var(--layout-border-2); + border-radius: var(--button-border-radius); +} + +img.loading, +img.empty { + margin: 0 1ex; + padding: 0; + border: none; + vertical-align: middle; +} + +html[dir="rtl"] img.empty { + transform: scaleX(-1); +} + +div.empty { + display: none; +} + +span.empty { + background-color: inherit; + border: none; + font-size: large; + color: var(--color-blue-70); + -moz-context-properties: fill; + fill: currentColor; +} + +#facet-date { + max-height: 104px; + padding-top: 2px; + padding-bottom: 2px; + overflow: visible; + /* Put facet-date at the top */ + order: -1; +} + +#facet-date[hide="true"] { + max-height: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (prefers-reduced-motion: no-preference) { + #facet-date, + .results-message-showall-button { + transition: all 200ms ease; + } +} |