зеркало из https://github.com/mozilla/gecko-dev.git
599 строки
11 KiB
CSS
599 строки
11 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-gutter: 24px;
|
|
--sidebar-width: 200px;
|
|
--header-spacing: 40px;
|
|
--footer-spacing: 80px;
|
|
|
|
--card-border-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
|
|
}
|
|
|
|
: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;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-block: var(--header-spacing) var(--footer-spacing);
|
|
padding-inline: var(--content-area-gutter);
|
|
max-width: 96rem;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 500;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.content-container {
|
|
padding-inline: var(--content-area-gutter);
|
|
padding-block: 16px;
|
|
}
|
|
|
|
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-gutter: 12px;
|
|
}
|
|
.brand-logo > .brand-feature-name {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 65rem) {
|
|
body > main > section,
|
|
body > main > aside {
|
|
grid-column: 1 / -1;
|
|
grid-row: auto;
|
|
}
|
|
}
|
|
|
|
@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.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;
|
|
}
|
|
|
|
#colorways.no-collection {
|
|
display: block;
|
|
background: linear-gradient(51.95deg, #7542E5 -8.36%, #C953F2 98.73%);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#colorways,
|
|
#colorways.no-collection > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#colorways.no-collection > div {
|
|
height: 100%;
|
|
justify-content: flex-end;
|
|
background: url("chrome://browser/content/colorway-background.svg");
|
|
background-size: 100%;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#no-current-colorway-collection-notice {
|
|
color: #FFF;
|
|
font-size: 2em;
|
|
text-align: center;
|
|
margin: 0 1em 1em;
|
|
}
|
|
|
|
#colorways-collection-description,
|
|
#colorways-button {
|
|
margin: 0.4em 0;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
#colorways-collection-title {
|
|
margin: 0;
|
|
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;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
#colorways-collection-expiry-date > span {
|
|
display: inline-block;
|
|
color: var(--in-content-page-color);
|
|
background: var(--in-content-page-background);
|
|
border-radius: 1.5em;
|
|
padding: .2em 1em;
|
|
}
|
|
|
|
#colorways-collection-graphic {
|
|
max-width: 225px;
|
|
max-height: 225px;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.empty-container {
|
|
background-color: rgba(240, 240, 244, 0.4);
|
|
}
|
|
|
|
.placeholder-content {
|
|
text-align: center;
|
|
padding: 20px 0 10px;
|
|
}
|
|
|
|
.placeholder-text, .synced-tabs, .history {
|
|
color: var(--in-content-deemphasized-text);
|
|
}
|
|
|
|
.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 {
|
|
color: var(--in-content-deemphasized-text);
|
|
grid-area: head;
|
|
margin: 0;
|
|
padding-block: 4px;
|
|
}
|
|
|
|
.page-section-header > .twisty {
|
|
color: var(--in-content-deemphasized-text);
|
|
grid-area: twisty;
|
|
justify-self: end;
|
|
margin-block: 0;
|
|
min-width: 32px;
|
|
padding-inline: 7px;
|
|
}
|
|
|
|
.page-section-header > .section-description {
|
|
grid-area: desc;
|
|
color: var(--in-content-deemphasized-text)
|
|
}
|
|
|
|
.setup-step {
|
|
padding: var(--card-padding);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
/* Bug 1770534 - Only use the zap-gradient for built-in, color-neutral themes */
|
|
.setup-step {
|
|
border: none;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
.setup-step::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 > .step-body {
|
|
display: flex;
|
|
align-content: space-between;
|
|
align-items: center;
|
|
margin-block: 8px;
|
|
padding-block: 8px;
|
|
}
|
|
|
|
.setup-step > .step-body > .step-content {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.setup-step > .step-body > button.primary {
|
|
white-space: nowrap;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.setup-step > footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-block: 0 8px;
|
|
}
|
|
|
|
.setup-step > footer > progress {
|
|
margin-block: 0 8px;
|
|
}
|
|
|
|
/* 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:not(.loading) > .loading-content {
|
|
display: none;
|
|
}
|
|
|
|
.synced-tabs-container > .loading-content {
|
|
text-align: center;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
background: url(chrome://global/skin/icons/loading-dial.svg) no-repeat center top;
|
|
background-size: 32px;
|
|
margin-top: 32px;
|
|
padding: 48px 16px 16px;
|
|
}
|
|
|
|
.closed-tabs-list {
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
.closed-tab-li {
|
|
display: grid;
|
|
grid-template-columns: min-content repeat(8, 1fr);
|
|
column-gap: 16px;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.closed-tab-li:hover {
|
|
background-color: var(--in-content-button-background-hover);
|
|
color: var(--in-content-button-text-color-hover);
|
|
}
|
|
|
|
.closed-tab-li:hover:active {
|
|
background-color: var(--in-content-button-background-active);
|
|
}
|
|
|
|
.closed-tab-li-title {
|
|
grid-column: span 5;
|
|
padding-inline-start: 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.closed-tab-li-url {
|
|
grid-column: span 2;
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.closed-tab-li-time {
|
|
text-align: end;
|
|
}
|
|
|
|
.closed-tab-li-url,
|
|
.closed-tab-li-time,
|
|
.synced-tab-li-device,
|
|
.synced-tab-li-url,
|
|
.synced-tab-li-time,
|
|
.synced-tab-li-url-device {
|
|
color: var(--in-content-deemphasized-text);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.closed-tab-li-title,
|
|
.closed-tab-li-url,
|
|
.synced-tab-li:not(:first-child) > .synced-tab-li-title,
|
|
.synced-tab-li-device,
|
|
.synced-tab-li-url-device {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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-li,
|
|
.synced-tab-li-placeholder {
|
|
box-sizing: border-box;
|
|
border: 1px solid #CFCFD8;
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: min-content repeat(2, 1fr) minmax(min-content, auto);
|
|
grid-template-rows: auto auto;
|
|
grid-template-areas:
|
|
"favicon title title title"
|
|
"favicon url-device url-device time"
|
|
}
|
|
|
|
.synced-tab-li:hover {
|
|
box-shadow: 0px 2px 6px rgba(58, 57, 68, 0.2);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.synced-tab-li:not(:first-child) {
|
|
align-content: center;
|
|
}
|
|
|
|
@media only screen and (max-width: 60rem) {
|
|
.synced-tab-li {
|
|
grid-template-areas:
|
|
"favicon title title title"
|
|
"favicon url-device url-device url-device"
|
|
}
|
|
.synced-tab-li:not(:first-child) > .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: url-device;
|
|
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 {
|
|
padding-top: 20px;
|
|
grid-area: first;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: auto;
|
|
grid-template-areas:
|
|
"favicon favicon badge badge"
|
|
"title title title title"
|
|
"domain domain domain time"
|
|
"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-li-title {
|
|
font-size: .85em;
|
|
}
|
|
|
|
.synced-tab-li-url {
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.synced-tab-li:first-child > .synced-tab-li-url {
|
|
align-self: end;
|
|
grid-area: domain;
|
|
}
|
|
|
|
.synced-tab-li-title {
|
|
grid-area: title;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.synced-tab-li:first-child > .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-url-device {
|
|
grid-area: url-device;
|
|
padding-top: 4px
|
|
}
|
|
|
|
.synced-tab-li:first-child > .synced-tab-li-device {
|
|
grid-area: device;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.synced-tab-li-time {
|
|
grid-area: time;
|
|
justify-self: end;
|
|
color: var(--in-content-deemphasized-text);
|
|
align-self: end;
|
|
}
|
|
|
|
.synced-tab-li:first-child > .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');
|
|
}
|
|
|
|
.favicon {
|
|
background-size: cover;
|
|
}
|
|
|
|
.favicon, .icon, .synced-tab-li-favicon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.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: #2AC3A2;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.badge-text {
|
|
font-weight: 400;
|
|
font-size: .75em;
|
|
letter-spacing: 0.02em;
|
|
margin-inline-start: 4px;
|
|
color: #000000;
|
|
}
|