mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-08 04:09:03 +02:00
894 lines
21 KiB
CSS
894 lines
21 KiB
CSS
/* 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;
|
|
--sidebar-width: 200px;
|
|
--header-spacing: 40px;
|
|
--footer-spacing: 80px;
|
|
--card-border-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
|
|
|
|
--success-fill-color: #2AC3A2;
|
|
--success-background-color: #87FFD1;
|
|
--success-box-text-color: #15141A;
|
|
|
|
--colorways-figure-size: 225px;
|
|
--colorways-grid-template-areas:
|
|
"colorways-figure"
|
|
"colorways-header"
|
|
"colorways-description"
|
|
"colorways-button";
|
|
--colorways-grid-template-columns: auto auto;
|
|
--colorways-grid-template-rows: auto auto auto;
|
|
--colorways-figure-display: flex;
|
|
--colorways-header-flex-direction: column;
|
|
--colorways-no-collection-border-radius: 8px;
|
|
--colorways-no-collection-div-bg-position: center top;
|
|
--colorways-no-collection-div-bg-size: 100%;
|
|
--colorways-no-collection-div-padding-inline: var(--content-area-padding-inline);
|
|
--colorways-no-collection-div-padding-block: var(--content-area-padding-block);
|
|
--colorways-no-collection-notice-padding-block: 0 1em;
|
|
--colorways-no-collection-notice-padding-inline: 1em;
|
|
--colorways-no-collection-notice-height: auto;
|
|
--colorways-no-collection-notice-justify-content: center;
|
|
--colorways-no-collection-notice-margin: 0;
|
|
--colorways-no-collection-notice-width: auto;
|
|
--colorways-no-collection-notice-text-color: #FFF;
|
|
|
|
--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;
|
|
}
|
|
|
|
body {
|
|
--fxview-background-color: var(--newtab-background-color, var(--in-content-page-background));
|
|
--fxview-element-hover-color: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor);
|
|
--fxview-element-active-color: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor);
|
|
--fxview-contrast-border: color-mix(in hsl, currentColor 45%, transparent);
|
|
--fxview-text-secondary-color: color-mix(in srgb, currentColor 80%, transparent);
|
|
--newtab-background-color-secondary: #FFF;
|
|
--colorways-no-collection-notice-bg-color: transparent;
|
|
|
|
/* ensure utility button hover states match those of the rest of the page */
|
|
--in-content-button-background-hover: var(--fxview-element-hover-color);
|
|
--in-content-button-background-active: var(--fxview-element-active-color);
|
|
|
|
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);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
--fxview-element-hover-color: color-mix(in srgb, var(--fxview-background-color) 80%, white);
|
|
--fxview-element-active-color: color-mix(in srgb, var(--fxview-background-color) 60%, white);
|
|
--newtab-background-color-secondary: #42414d;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
color: var(--newtab-text-primary-color);
|
|
font-weight: 500;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.content-container {
|
|
padding-inline: var(--content-area-padding-inline);
|
|
padding-block: var(--content-area-padding-block);
|
|
}
|
|
|
|
body > nav {
|
|
flex: 0 0 var(--sidebar-width);
|
|
}
|
|
|
|
body > main {
|
|
flex: 1 1 auto;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
|
|
body > main > section {
|
|
grid-column: 1;
|
|
}
|
|
|
|
body > main > aside {
|
|
grid-column: 2;
|
|
grid-row: 1 / 3;
|
|
}
|
|
|
|
@media (max-width: 76rem) {
|
|
:host,
|
|
:root {
|
|
--sidebar-width: 40px;
|
|
--content-area-padding-inline: 12px;
|
|
}
|
|
.brand-logo > .brand-feature-name {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 65rem) {
|
|
body {
|
|
--colorways-no-collection-notice-bg-color: var(--newtab-background-color-secondary);
|
|
}
|
|
body > main > section,
|
|
body > main > aside {
|
|
grid-column: 1 / -1;
|
|
grid-row: auto;
|
|
}
|
|
:root {
|
|
--colorways-grid-template-areas:
|
|
"colorways-header colorways-figure"
|
|
"colorways-description colorways-figure"
|
|
"colorways-button colorways-figure";
|
|
--colorways-grid-template-columns: 1fr var(--colorways-figure-size);
|
|
--colorways-grid-template-rows: min-content min-content 1fr;
|
|
--colorways-header-flex-direction: row;
|
|
--colorways-no-collection-div-bg-position: right top;
|
|
--colorways-no-collection-div-bg-size: 230px;
|
|
--colorways-no-collection-div-padding-inline: 0 246px;
|
|
--colorways-no-collection-div-padding-block: 0;
|
|
--colorways-no-collection-notice-padding-block: 0;
|
|
--colorways-no-collection-notice-padding-inline: var(--colorways-no-collection-border-radius);
|
|
--colorways-no-collection-notice-height: 107px;
|
|
--colorways-no-collection-notice-justify-content: flex-start;
|
|
--colorways-no-collection-notice-margin: 1px;
|
|
--colorways-no-collection-notice-width: 100%;
|
|
--colorways-no-collection-notice-text-color: inherit;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 45rem) {
|
|
:host,
|
|
:root {
|
|
--header-spacing: 16px;
|
|
--footer-spacing: 16px;
|
|
--colorways-grid-template-areas:
|
|
"colorways-header"
|
|
"colorways-description"
|
|
"colorways-button";
|
|
--colorways-grid-template-columns: auto;
|
|
--colorways-grid-template-rows: auto;
|
|
--colorways-figure-display: none;
|
|
--colorways-header-flex-direction: column;
|
|
--colorways-no-collection-div-bg-size: 15%;
|
|
--colorways-no-collection-div-padding-inline: 0 15%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 28rem) {
|
|
body {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.brand-logo {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#colorways {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-areas: var(--colorways-grid-template-areas);
|
|
grid-template-columns: var(--colorways-grid-template-columns);
|
|
grid-template-rows: var(--colorways-grid-template-rows);
|
|
justify-items: start;
|
|
align-items: start;
|
|
}
|
|
|
|
#colorways.no-collection {
|
|
display: block;
|
|
background: linear-gradient(51.95deg, #7542E5 -8.36%, #C953F2 98.73%);
|
|
border-radius: var(--colorways-no-collection-border-radius);
|
|
}
|
|
|
|
#colorways.no-collection > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding-inline: var(--colorways-no-collection-div-padding-inline);
|
|
padding-block: var(--colorways-no-collection-div-padding-block);
|
|
justify-content: flex-end;
|
|
background: url("chrome://browser/content/colorway-background.svg");
|
|
background-size: var(--colorways-no-collection-div-bg-size);
|
|
background-position: var(--colorways-no-collection-div-bg-position);
|
|
background-repeat: no-repeat;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
#colorways > header {
|
|
grid-area: colorways-header;
|
|
display: flex;
|
|
flex-direction: var(--colorways-header-flex-direction);
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#no-current-colorway-collection-notice {
|
|
display: flex;
|
|
width: var(--colorways-no-collection-notice-width);
|
|
height: var(--colorways-no-collection-notice-height);
|
|
border-start-start-radius: calc(var(--colorways-no-collection-border-radius) - var(--colorways-no-collection-notice-margin));
|
|
border-end-start-radius: calc(var(--colorways-no-collection-border-radius) - var(--colorways-no-collection-notice-margin));
|
|
margin: var(--colorways-no-collection-notice-margin);
|
|
padding-block: var(--colorways-no-collection-notice-padding-block);
|
|
padding-inline: var(--colorways-no-collection-notice-padding-inline);
|
|
justify-content: var(--colorways-no-collection-notice-justify-content);
|
|
align-items: center;
|
|
font-size: 2em;
|
|
background-color: var(--colorways-no-collection-notice-bg-color);
|
|
color: var(--colorways-no-collection-notice-text-color);
|
|
}
|
|
|
|
#no-current-colorway-collection-notice,
|
|
#colorways-collection-description {
|
|
grid-area: colorways-description;
|
|
}
|
|
|
|
#colorways-collection-description,
|
|
#colorways-button {
|
|
margin: 0.4em 0;
|
|
}
|
|
|
|
#colorways-button {
|
|
grid-area: colorways-button;
|
|
}
|
|
|
|
#colorways-collection-title {
|
|
margin: 0;
|
|
margin-top: 0.3em;
|
|
margin-inline-end: 0.5em;
|
|
padding: 0;
|
|
font-size: 1.8em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#colorways-collection-expiry-date {
|
|
display: inline-block;
|
|
background: linear-gradient(to right, purple, pink, orange);
|
|
background-origin: border-box;
|
|
border-radius: 1.5em;
|
|
padding: 1px;
|
|
margin: 0.8em 0;
|
|
}
|
|
|
|
#colorways-collection-expiry-date > span {
|
|
display: inline-block;
|
|
background: var(--fxview-background-color);
|
|
border-radius: 1.5em;
|
|
padding: .3em 1em;
|
|
}
|
|
|
|
#colorways > figure {
|
|
display: var(--colorways-figure-display);
|
|
grid-area: colorways-figure;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--colorways-figure-size);
|
|
height: var(--colorways-figure-size);
|
|
margin: 0 0 1.5em;
|
|
}
|
|
|
|
#colorways-collection-figure {
|
|
max-width: var(--colorways-figure-size);
|
|
max-height: var(--colorways-figure-size);
|
|
object-fit: scale-down;
|
|
}
|
|
|
|
[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);
|
|
}
|
|
|
|
.empty-container {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.error-state {
|
|
text-align: center;
|
|
padding: 0 0 20px;
|
|
border: 1px solid var(--fxview-contrast-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.error-state > h3 {
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.placeholder-content {
|
|
text-align: center;
|
|
padding: 24px 16px;
|
|
}
|
|
|
|
.page-section-header {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
grid-template-rows: 1fr auto;
|
|
column-gap: 16px;
|
|
|
|
grid-template-areas:
|
|
"head head head head head head head twisty"
|
|
"desc desc desc desc desc desc desc desc";
|
|
}
|
|
|
|
.page-section-header > h1 {
|
|
grid-area: head;
|
|
margin: 0;
|
|
padding-block: 4px;
|
|
}
|
|
|
|
.page-section-header > .twisty {
|
|
grid-area: twisty;
|
|
justify-self: end;
|
|
margin-block: 0;
|
|
min-width: 32px;
|
|
padding-inline: 7px;
|
|
}
|
|
|
|
.page-section-header > .section-description {
|
|
grid-area: desc;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.setup-step {
|
|
padding: var(--card-padding);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
/* Bug 1770534 - Only use the zap-gradient for built-in, color-neutral themes */
|
|
.zap-card {
|
|
border: none;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
.zap-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
padding: 1px; /* the "border" thickness */
|
|
border-radius: 4px;
|
|
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: -moz-Dialog;
|
|
border: 1px solid ButtonText;
|
|
}
|
|
|
|
.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: 1.12em;
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* 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 {
|
|
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;
|
|
display: grid;
|
|
grid-template-columns: min-content repeat(5, 1fr) min-content;
|
|
column-gap: 8px;
|
|
}
|
|
|
|
.closed-tab-li {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
grid-column: span 7;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
}
|
|
|
|
.closed-tab-li:hover {
|
|
background-color: var(--fxview-element-hover-color);
|
|
}
|
|
|
|
.closed-tab-li:active {
|
|
background-color: var(--fxview-element-active-color);
|
|
}
|
|
|
|
.closed-tab-li-title {
|
|
grid-column: span 3;
|
|
padding-inline-start: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.closed-tab-li-url {
|
|
grid-column: span 2;
|
|
padding-inline-start: 8px;
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.closed-tab-li-time {
|
|
white-space: nowrap;
|
|
text-align: end;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.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;
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: 4fr 4fr;
|
|
column-gap: 16px;
|
|
row-gap: 8px;
|
|
|
|
grid-template-areas:
|
|
"first second"
|
|
"first third";
|
|
}
|
|
|
|
.synced-tab-a,
|
|
.synced-tab-li-placeholder {
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: min-content repeat(2, 1fr) minmax(min-content, auto);
|
|
grid-template-rows: 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 {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.li-placeholder-favicon {
|
|
grid-area: favicon;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-inline-end: 10px;
|
|
}
|
|
|
|
.li-placeholder-title {
|
|
grid-area: title;
|
|
height: 12px;
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.li-placeholder-domain {
|
|
grid-area: domain;
|
|
height: 8px;
|
|
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-top: 20px;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: auto;
|
|
grid-template-areas:
|
|
"favicon favicon badge badge"
|
|
"title title title title"
|
|
"domain domain domain domain"
|
|
"device device device time";
|
|
}
|
|
|
|
.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-time,
|
|
.synced-tab-li:not(:first-child) > .synced-tab-a > .synced-tab-li-title {
|
|
font-size: .85em;
|
|
}
|
|
|
|
.synced-tab-li-url {
|
|
text-decoration-line: underline;
|
|
grid-area: domain;
|
|
align-self: end;
|
|
}
|
|
|
|
.synced-tab-li:not(:first-child) > .synced-tab-a > .synced-tab-li-url {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.synced-tab-li-title {
|
|
grid-area: title;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.synced-tab-li:first-child > .synced-tab-a > .synced-tab-li-title {
|
|
color: inherit;
|
|
padding-top: 5px;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
height: 2.5em;
|
|
}
|
|
|
|
.synced-tab-li-device {
|
|
grid-area: device;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.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;
|
|
margin-inline-end: 10px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* the ordering of these two arrow icons is important for the toggleContainer to work correctly */
|
|
.arrow-up {
|
|
background-image: url("chrome://global/skin/icons/arrow-up.svg");
|
|
}
|
|
|
|
.arrow-down {
|
|
background-image: url("chrome://global/skin/icons/arrow-down.svg");
|
|
}
|
|
|
|
.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;
|
|
width: 6em;
|
|
background-color: #E3FFF3;
|
|
grid-area: badge;
|
|
border-radius: 2em;
|
|
justify-self: end;
|
|
text-align: center;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.dot {
|
|
height: 8px;
|
|
width: 8px;
|
|
background-color: var(--success-fill-color);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.badge-text {
|
|
font-weight: 400;
|
|
font-size: .75em;
|
|
letter-spacing: 0.02em;
|
|
margin-inline-start: 4px;
|
|
color: #000000;
|
|
}
|