diff options
Diffstat (limited to 'browser/components/firefoxview/firefoxview.css')
| -rw-r--r-- | browser/components/firefoxview/firefoxview.css | 951 |
1 files changed, 951 insertions, 0 deletions
diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css new file mode 100644 index 0000000000..20536e7ac5 --- /dev/null +++ b/browser/components/firefoxview/firefoxview.css @@ -0,0 +1,951 @@ +/* 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/. */ + +:host, +:root { + --content-area-padding-inline: 24px; + --content-area-padding-block: 16px; + --header-spacing: 40px; + --footer-spacing: 80px; + + --success-fill-color: #2AC3A2; + --success-background-color: #87FFD1; + --success-box-text-color: #15141A; + + --details-grid-column: 1; + --recently-closed-tabs-grid-row: 2; + + --info-icon-background-color: #0090ED; +} + +:root { + /* align the base font-size on root element with that of <body> + so rem-based layout widths and break-points behave predictably */ + font-size: 15px; + /* override --in-content-page-background from common-shared.css */ + background-color: transparent; + --fxview-background-color: var(--newtab-background-color, var(--in-content-page-background)); + --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor); + --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor); + --fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color)); + --fxview-text-color-hover: var(--newtab-text-primary-color); + --fxview-contrast-border: color-mix(in hsl, currentColor 45%, transparent); + --fxview-extra-contrast-border: color-mix(in hsl, currentColor 85%, transparent); + --in-content-zap-gradient: linear-gradient(var(--fxview-extra-contrast-border), var(--fxview-extra-contrast-border)); + --card-border-zap-gradient: var(--in-content-zap-gradient); + --fxview-text-secondary-color: color-mix(in srgb, currentColor 70%, transparent); + --newtab-background-color-secondary: #FFF; + + /* ensure utility button hover states match those of the rest of the page */ + --in-content-button-background-hover: var(--fxview-element-background-hover); + --in-content-button-background-active: var(--fxview-element-background-active); + --in-content-button-text-color-hover: var(--fxview-text-color-hover); +} + +body { + display: flex; + justify-content: center; + padding-block: var(--header-spacing) var(--footer-spacing); + padding-inline: var(--content-area-padding-inline); + max-width: 96rem; + margin-inline: auto; + background-color: var(--fxview-background-color); + color: var(--newtab-text-primary-color); +} + +:root:not([lwt-newtab]) { + --in-content-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%); +} + +@media (prefers-color-scheme: dark) { + :root { + --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white); + --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white); + --newtab-background-color-secondary: #42414d; + } +} + +@media (prefers-contrast) { + :root { + --fxview-element-background-hover: ButtonText; + --fxview-element-background-active: ButtonText; + --fxview-text-color-hover: ButtonFace; + --fxview-text-secondary-color: currentColor; + } +} + +h1 { + color: var(--fxview-text-primary-color); + font-weight: 600; + font-size: 1.5em; +} + +.content-container { + padding-inline: var(--content-area-padding-inline); + padding-block: var(--content-area-padding-block); +} + +#logo-container { + flex: 0 0 auto; +} + +body > main { + flex: 1 1 auto; + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: max-content 1fr; +} + +body > main > details { + grid-column: var(--details-grid-column); +} + +@media (max-width: 76rem) { + :host, + :root { + --content-area-padding-inline: 12px; + } + .brand-logo > .brand-feature-name { + display: none; + } +} + +@media (max-width: 65rem) { + :root { + --recently-closed-tabs-grid-row: 3; + --details-grid-column: 1 / -1; + } +} + +@media (max-width: 45rem) { + :host, + :root { + --header-spacing: 16px; + --footer-spacing: 16px; + } +} + +@media (max-width: 28rem) { + body { + flex-wrap: wrap; + } +} + +.brand-logo { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 1.75em; + white-space: nowrap; +} + +.brand-logo > .brand-icon { + display: inline-block; + background: url("chrome://branding/content/about-logo.png") no-repeat center; + background-size: 32px; + min-width: 40px; + height: 32px; +} + +.brand-logo > .brand-feature-name { + margin-inline-start: 8px; + flex: 1 1 auto; + font-weight: 600; +} + +[hidden] { + display: none !important; +} + +button.ghost-button, +button.ghost-button:not(.semi-transparent):enabled:is(:hover, :active) { + color: inherit; +} + +@media (prefers-contrast) { + button.ghost-button:not(.semi-transparent):enabled:is(:hover, :active) { + background-color: ButtonText; + color: ButtonFace; + } +} + +button.primary { + white-space: nowrap; + min-width: fit-content; +} + +button.close { + background-image: url(chrome://global/skin/icons/close.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.card, +.synced-tab-a, +.synced-tab-li-placeholder, +.empty-container { + background-color: var(--newtab-background-color-secondary); + border: 1px solid var(--fxview-contrast-border); +} + +#collapsible-tabs-container, +#tabpickup-tabs-container { + margin-block-start: 0.5em; +} + +.empty-container { + border-radius: 4px; +} + +.error-state { + text-align: center; + padding-block: 0 1.3em; + padding-inline: 1em; + border: 1px solid var(--fxview-contrast-border); + border-radius: 4px; +} + +.error-state > h3 { + font-weight: 600; + display: inline-block; + margin-bottom: 0; +} + +.placeholder-content { + color: var(--fxview-text-secondary-color); + display: flex; + padding: 1.8em 1.1em; +} + +#recently-closed-empty-image, +#tab-pickup-empty-image { + margin-inline-end: 1.1em; + -moz-context-properties: fill, stroke, fill-opacity; + fill: var(--fxview-background-color); + stroke: var(--fxview-text-primary-color); + fill-opacity: 0.07; +} + +@media (prefers-color-scheme: dark) { + #recently-closed-empty-image, + #tab-pickup-empty-image { + fill: var(--newtab-background-color-secondary); + fill-opacity: 0.15; + } +} + +.placeholder-text { + margin: 0; +} + +.placeholder-header { + margin-block: 0 0.27em; + font-weight: 600; +} + +.placeholder-body { + margin-block: 0; + line-height: 1.3em; +} + +.page-section-header { + column-gap: 16px; + cursor: pointer; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: 1fr auto; + grid-template-areas: + "twisty head" + "none desc"; + list-style-type: none; + position: relative; + z-index: 1; +} + +@media (prefers-contrast) { + .page-section-header { + color: WindowText; + } + .page-section-header:focus-visible { + box-shadow: none; + outline: var(--in-content-focus-outline); + outline-offset: var(--in-content-focus-outline-offset); + } +} + +.page-section-header > h1 { + grid-area: head; + margin: 0; + padding-block: 4px; +} + +/* the twisty is just an ornament; the whole summary parent node is clickable */ +.page-section-header > .twisty { + background-image: url("chrome://global/skin/icons/arrow-right.svg"); + display: inline-block; + grid-area: twisty; + align-self: center; + justify-self: start; + padding-block: 4px; + padding-inline: 8px; + fill: currentColor; + border-radius: 4px; + margin-block: 0; +} + +[dir="rtl"] .page-section-header > .twisty { + background-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +@media (prefers-contrast) { + .page-section-header > .twisty { + border: 1px solid ButtonText; + } +} + +details[open] > .page-section-header > .twisty { + background-image: url("chrome://global/skin/icons/arrow-down.svg"); +} + +.page-section-header:hover > .twisty { + background-color: var(--fxview-element-background-hover); + color: var(--fxview-text-color-hover); +} + +.page-section-header:hover:active > .twisty { + background-color: var(--fxview-element-background-active); +} + +.page-section-header > .section-description { + grid-area: desc; + margin-block: 4px 8px; + font-weight: inherit; + font-size: inherit; + line-height: inherit; +} + +.card-body { + display: flex; + flex-grow: 1; + align-content: space-between; + align-items: center; + gap: 8px; +} +@media only screen and (max-width: 45rem) { + .card-body { + flex-wrap: wrap; + } +} + +.card-body > button.primary { + margin-inline-start: 0; + z-index: 1; +} + +.card-body > .step-content, +.zap-card > button.close { + z-index: 1; +} + +.setup-step { + padding: var(--card-padding); + margin-block: 0.5em 1em; +} + +/* Bug 1770534 - Only use the zap-gradient for built-in, color-neutral themes */ +.zap-card { + border: none; + position: relative; +} +.zap-card::before { + content: ""; + position: absolute; + inset: 0; + border: 1px solid transparent; + border-radius: 4px; + background-origin: border-box; + background-image: var(--card-border-zap-gradient); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask-composite: exclude; +} + +.setup-step > h2 { + margin-block: 0 8px; +} + +.setup-step > .card-body { + margin-block: 8px; + padding-block: 8px; +} +.setup-step > .card-body > .step-content { + flex: 1 1 auto; +} + +.setup-step > footer { + display: flex; + flex-direction: column; + margin-block: 0 8px; +} + +.step-progress { + background-color: #E0E0E6; + border-radius: 8px; + border-style: none; + height: 8px; + margin-block: 0 8px; + margin-inline: 0 2px; +} + +.step-progress::-moz-progress-bar { + background-color: var(--success-fill-color); + border-radius: 8px; +} + +@media (prefers-contrast) { + .step-progress { + background-color: SelectedItemText; + border: 1px solid SelectedItem; + } + + .step-progress::-moz-progress-bar { + background-color: SelectedItem; + } +} + +.message-box { + display: flex; + align-items: center; + margin-block: 8px; + gap: 8px; +} + +.message-content { + flex: 1 1 auto; +} + +.message-content > .message-header { + font-size: 1em; + margin-block: 0 0.33em; +} + +.message-content > .message-description { + margin-block: 0 0.33em; +} + +.confirmation-message-box { + background-color: var(--success-background-color); + color: var(--success-box-text-color); + border-color: var(--success-fill-color); +} +.confirmation-message-box > .message-content { + text-align: center; +} +.confirmation-message-box > .message-content > .message-header { + font-size: inherit; + display: inline; +} +/* ensure we get the local color values as container doesnt change color with theme */ +.confirmation-message-box > .icon-button { + color: inherit; +} +.confirmation-message-box > button.icon-button:enabled:is(:hover, :active) { + background-color: color-mix(in srgb, var(--success-background-color) 90%, currentColor); +} +@media (prefers-contrast) { + .confirmation-message-box > button.icon-button { + border-color: ButtonText; + } + .confirmation-message-box > button.icon-button:enabled:is(:hover, :active) { + background-color: ButtonText; + color: ButtonFace; + } +} + +#tab-pickup-container { + grid-row: 1; +} + +/* 117px is the total height of the collapsible-tabs-container; setting that size + for the second row stabilizes the layout so it doesn't shift when collapsibled */ +#recently-closed-tabs-container { + grid-row: var(--recently-closed-tabs-grid-row); + display: grid; + grid-template-rows: max-content 117px; +} + +#recently-closed-tabs-container > p { + margin-top: 0; +} + +.synced-tabs-container.loading > .card, +.synced-tabs-container.loading > tab-pickup-list, +.synced-tabs-container.loading > .placeholder-content, +.synced-tabs-container:not(.loading) > .loading-content { + display: none; +} + +.synced-tabs-container > .loading-content { + text-align: center; + color: var(--fxview-text-secondary-color); + margin-top: 40px; + padding: 20px 16px 16px; +} + +.closed-tabs-list { + padding-inline-start: 0; + margin-block-start: 0; + display: grid; + grid-template-columns: min-content repeat(5, 1fr) repeat(2, min-content); + column-gap: 8px; + row-gap: 8px; +} + +.closed-tab-li { + display: grid; + grid-template-columns: subgrid; + grid-column: span 8; + margin-block-end: 0.5em; + border-radius: 4px; + align-items: center; +} + +.closed-tab-li-main { + display: grid; + grid-template-columns: subgrid; + grid-column: span 7; + padding: 0.5em; + cursor: pointer; + align-items: center; + user-select: none; + border-radius: 4px; +} + +@media (prefers-contrast) { + span.closed-tab-li-main, + button.closed-tab-li-dismiss { + color: ButtonText; + border-radius: 4px; + border: 1px solid ButtonText; + } +} + + .closed-tab-li-main:hover { + background-color: var(--fxview-element-background-hover); + color: var(--fxview-text-color-hover); + } + +.closed-tab-li-main:hover .closed-tab-li-title { + text-decoration-line: underline; +} + +.closed-tab-li-main:active { + background-color: var(--fxview-element-background-active); + color: var(--fxview-text-color-hover); +} + +.closed-tab-li-main:focus-visible { + box-shadow: none; + outline: var(--in-content-focus-outline); + outline-offset: var(--in-content-focus-outline-offset); + border-radius: 4px; +} + +.closed-tab-li-title { + padding-inline-start: 10px; + font-weight: 500; + grid-column: span 3; + color: currentColor !important; +} + +.closed-tab-li-url { + padding-inline-start: 8px; + text-decoration-line: underline; + grid-column: span 2; + color: var(--fxview-text-secondary-color) !important; +} + +.closed-tab-li-time { + white-space: nowrap; + text-align: end; +} + +.closed-tab-li-dismiss { + background-image: url("chrome://global/skin/icons/close.svg"); + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + color: var(--fxview-text-secondary-color); + -moz-context-properties: fill; + fill: var(--fxview-text-secondary-color); + min-width: 33px; + padding: 0.5em; + margin: 0; + cursor: pointer; + user-select: none; +} + +.closed-tab-li-dismiss:hover { + background-color: var(--in-content-button-background-hover); + fill: var(--in-content-button-text-color-hover); +} + +.synced-tab-a, +.synced-tab-a:hover, +.synced-tab-a:active, +.synced-tab-a:hover:active, +.synced-tab-a:visited { + color: inherit; + text-decoration: none; + height: 100%; +} + +@media (prefers-contrast) { + .synced-tab-a { + border-color: FieldText; + } + .synced-tab-a, + .synced-tab-a:hover, + .synced-tab-a:active, + .synced-tab-a:hover:active, + .synced-tab-a:visited { + color: LinkText; + } + .synced-tab-a:focus-visible { + box-shadow: none; + outline: var(--in-content-focus-outline); + outline-offset: var(--in-content-focus-outline-offset); + } +} + +.closed-tab-li-url, +.closed-tab-li-time, +.synced-tab-li-device, +.synced-tab-li-url, +.synced-tab-li-time { + font-weight: 400; + color: var(--fxview-text-secondary-color); +} + +.closed-tab-li-title, +.closed-tab-li-url, +.synced-tab-li:not(:first-child) > .synced-tab-a > .synced-tab-li-title, +.synced-tab-li-device { + overflow: hidden; +} + +.closed-tab-li-title, +.synced-tab-li:not(:first-child) > .synced-tab-a > .synced-tab-li-title, +.synced-tab-li-device { + text-overflow: ellipsis; + white-space: nowrap; +} + +.synced-tab-li-url, +.closed-tab-li-url { + word-break: break-word; +} + +.synced-tabs-list { + padding: 0; + margin-block-start: 0; + list-style: none; + display: grid; + grid-template-columns: 4fr 4fr; + column-gap: 16px; + row-gap: 8px; + + grid-template-areas: + "first second" + "first third"; +} + +@media only screen and (max-width: 43rem) { + .synced-tabs-list { + grid-template-columns: 1fr; + grid-template-areas: + "first" + "second" + "third"; + } + + body { + flex-flow: column; + } + + #logo-container .brand-logo { + justify-content: center; + } +} + +.synced-tab-a, +.synced-tab-li-placeholder { + box-sizing: border-box; + border-radius: 4px; + padding: 7px; + display: grid; + column-gap: 8px; + row-gap: 2px; + align-items: center; + grid-template-columns: min-content repeat(2, 1fr) minmax(min-content, auto); + grid-template-rows: auto 1fr auto; + grid-template-areas: + "favicon title title title" + "favicon domain domain domain" + "favicon device device time"; +} + +.synced-tab-a:hover { + box-shadow: 0px 2px 14px var(--fxview-contrast-border); +} + +.synced-tab-li:not(:first-child) > .synced-tab-a { + align-content: center; +} + +@media only screen and (max-width: 60rem) { + .synced-tab-li > .synced-tab-a, + .synced-tab-li-placeholder { + grid-template-areas: + "favicon title title title" + "favicon domain domain domain" + "favicon device device device"; + } + .synced-tab-li:not(:first-child) > .synced-tab-a > .synced-tab-li-time { + display: none; + } +} + +.synced-tab-li-placeholder { + row-gap: 1em; + grid-template-areas: + "favicon title title title" + "favicon domain domain domain"; + grid-template-rows: auto auto; +} + +.li-placeholder-favicon { + grid-area: favicon; + align-self: start; + width: 16px; + height: 16px; +} + +.li-placeholder-title { + grid-area: title; + height: .8em; + margin-block: .1em; /* simulate line-height */ + width: 100%; +} + +.li-placeholder-domain { + grid-area: domain; + height: .6em; + margin-block: .1em; /* simulate line-height */ + width: 100%; +} + +.li-placeholder-favicon, +.li-placeholder-title, +.li-placeholder-domain { + display: inline-block; + background-color: currentColor; opacity: 0.08; + border-radius: 4px; +} + +.synced-tab-li:first-child { + grid-area: first; +} + +.synced-tab-li:first-child > .synced-tab-a { + padding: 15px; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: auto auto 1fr auto; + grid-template-areas: + "favicon badge badge badge" + "title title title title" + "domain domain domain domain" + "device device device time"; + row-gap: 4px; +} + +.synced-tab-li:nth-child(2) { + grid-area: second; +} + +.synced-tab-li:nth-child(3) { + grid-area: third; +} + +.synced-tab-li-url, +.synced-tab-li-device, +.synced-tab-li:not(:first-child) > .synced-tab-a > .synced-tab-li-title { + font-size: .85em; +} + +.synced-tab-li-time { + font-size: .75em; +} + +.synced-tab-li-url { + text-decoration-line: underline; + grid-area: domain; + align-self: start; +} + +.synced-tab-li-title { + grid-area: title; + font-weight: 500; +} + +.synced-tab-li:first-child > .synced-tab-a > .synced-tab-li-title { + color: inherit; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + align-self: start; +} + +.synced-tab-li-device { + grid-area: device; +} + +.synced-tab-li-time { + grid-area: time; + justify-self: end; + align-self: end; + white-space: nowrap; +} + +.synced-tab-li:first-child > .synced-tab-a > .synced-tab-li-time { + align-self: center; +} + +.synced-tab-li .favicon { + grid-area: favicon; + align-self: start; +} + +@media (prefers-contrast) { + .synced-tab-li .favicon { + color: LinkText; + } +} + +.synced-tab-li .icon { + vertical-align: bottom; + margin-inline-end: 5px; +} + +.icon { + background-position: center center; + background-repeat: no-repeat; + display: inline-block; + -moz-context-properties: fill; + fill: currentColor; +} + +.history { + background-image: url('chrome://browser/skin/history.svg'); +} + +.phone { + background-image: url('chrome://browser/skin/device-phone.svg'); +} + +.desktop { + background-image: url('chrome://browser/skin/device-desktop.svg'); +} + +.tablet { + background-image: url('chrome://browser/skin/device-tablet.svg'); +} + +.synced-tabs { + background-image: url('chrome://browser/skin/synced-tabs.svg'); +} + +.info { + background-image: url('chrome://global/skin/icons/info-filled.svg'); +} + +.error-state > .info { + vertical-align: text-top; + margin-inline-end: 7px; + margin-top: 1px; + color: var(--info-icon-background-color); +} + +.favicon { + background-size: cover; + -moz-context-properties: fill; + fill: currentColor; +} + +.favicon, .icon, .synced-tab-li-favicon { + width: 16px; + height: 16px; +} + +.sync { + background-image: url(chrome://browser/skin/sync.svg); + background-size: cover; + height: 19px; + width: 19px; + color: var(--fxview-text-secondary-color); +} + +@keyframes syncRotate { + from { transform: rotate(0); } + to { transform: rotate(360deg); } +} + +@media (prefers-reduced-motion: no-preference) { + .sync { + animation: syncRotate 0.8s linear infinite; + } +} + +.last-active-badge { + height: 1.25em; + background-color: #E3FFF3; + grid-area: badge; + border-radius: 2em; + justify-self: end; + text-align: center; + padding: 0.3em 1em; + font-size: 0.75em; +} + +.synced-tab-li:not(:first-child) .last-active-badge { + display: none; +} + +.dot { + height: 8px; + width: 8px; + background-color: var(--success-fill-color); + border-radius: 50%; + display: inline-block; +} + +.badge-text { + font-weight: 400; + letter-spacing: 0.02em; + margin-inline-start: 4px; + color: #000000; +} + +@media (prefers-contrast) { + .last-active-badge { + border: 1px solid CanvasText; + background-color: Canvas; + } + .dot { + background-color: FieldText; + } + .badge-text { + color: FieldText; + } +} |