зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1392552 - [Onboarding] update notification layout and style based on new spec;r=rexboy
MozReview-Commit-ID: Lbpz53ctvJt --HG-- extra : rebase_source : 8b7b7aac81973c5dc1c64bf3510d6ca3cd1d550e
This commit is contained in:
gasolin
Родитель
d0e85b25fd
Коммит
f1a8845e05
|
|
@ -78,8 +78,8 @@
|
|||
top: 15px;
|
||||
offset-inline-end: 15px;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
|
@ -336,14 +336,12 @@
|
|||
-moz-outline-radius: 2px;
|
||||
}
|
||||
|
||||
.onboarding-tour-action-button:hover:not([disabled]) ,
|
||||
#onboarding-notification-action-btn:hover {
|
||||
.onboarding-tour-action-button:hover:not([disabled]) {
|
||||
background: #0060df;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.onboarding-tour-action-button:active:not([disabled]),
|
||||
#onboarding-notification-action-btn:active {
|
||||
.onboarding-tour-action-button:active:not([disabled]) {
|
||||
background: #003EAA;
|
||||
}
|
||||
|
||||
|
|
@ -352,7 +350,8 @@
|
|||
}
|
||||
|
||||
/* Tour Icons */
|
||||
#onboarding-tour-singlesearch {
|
||||
#onboarding-tour-singlesearch,
|
||||
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-singlesearch] #onboarding-notification-tour-title::before {
|
||||
background-image: url("img/icons_singlesearch.svg");
|
||||
}
|
||||
|
||||
|
|
@ -361,7 +360,8 @@
|
|||
background-image: url("img/icons_singlesearch-colored.svg");
|
||||
}
|
||||
|
||||
#onboarding-tour-private-browsing {
|
||||
#onboarding-tour-private-browsing,
|
||||
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-private-browsing] #onboarding-notification-tour-title::before {
|
||||
background-image: url("img/icons_private.svg");
|
||||
}
|
||||
|
||||
|
|
@ -370,7 +370,8 @@
|
|||
background-image: url("img/icons_private-colored.svg");
|
||||
}
|
||||
|
||||
#onboarding-tour-addons {
|
||||
#onboarding-tour-addons,
|
||||
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-addons] #onboarding-notification-tour-title::before {
|
||||
background-image: url("img/icons_addons.svg");
|
||||
}
|
||||
|
||||
|
|
@ -379,7 +380,8 @@
|
|||
background-image: url("img/icons_addons-colored.svg");
|
||||
}
|
||||
|
||||
#onboarding-tour-customize {
|
||||
#onboarding-tour-customize,
|
||||
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-customize] #onboarding-notification-tour-title::before {
|
||||
background-image: url("img/icons_customize.svg");
|
||||
}
|
||||
|
||||
|
|
@ -388,7 +390,8 @@
|
|||
background-image: url("img/icons_customize-colored.svg");
|
||||
}
|
||||
|
||||
#onboarding-tour-default-browser {
|
||||
#onboarding-tour-default-browser ,
|
||||
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-default-browser] #onboarding-notification-tour-title::before {
|
||||
background-image: url("img/icons_default.svg");
|
||||
}
|
||||
|
||||
|
|
@ -397,7 +400,8 @@
|
|||
background-image: url("img/icons_default-colored.svg");
|
||||
}
|
||||
|
||||
#onboarding-tour-sync {
|
||||
#onboarding-tour-sync,
|
||||
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-sync] #onboarding-notification-tour-title::before {
|
||||
background-image: url("img/icons_sync.svg");
|
||||
}
|
||||
|
||||
|
|
@ -406,7 +410,8 @@
|
|||
background-image: url("img/icons_sync-colored.svg");
|
||||
}
|
||||
|
||||
#onboarding-tour-library {
|
||||
#onboarding-tour-library,
|
||||
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-library] #onboarding-notification-tour-title::before {
|
||||
background-image: url("img/icons_library.svg");
|
||||
}
|
||||
|
||||
|
|
@ -415,7 +420,8 @@
|
|||
background-image: url("img/icons_library-colored.svg");
|
||||
}
|
||||
|
||||
#onboarding-tour-performance {
|
||||
#onboarding-tour-performance,
|
||||
#onboarding-notification-bar[data-target-tour-id=onboarding-tour-performance] #onboarding-notification-tour-title::before {
|
||||
background-image: url("img/icons_performance.svg");
|
||||
}
|
||||
|
||||
|
|
@ -432,7 +438,7 @@
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 122px;
|
||||
height: 100px;
|
||||
min-width: 640px;
|
||||
background: var(--onboarding-notification-bar-background-color);
|
||||
border-top: 2px solid #e9e9e9;
|
||||
|
|
@ -448,7 +454,7 @@
|
|||
#onboarding-notification-close-btn {
|
||||
position: absolute;
|
||||
offset-block-start: 50%;
|
||||
offset-inline-end: 34px;
|
||||
offset-inline-end: 24px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
|
@ -464,7 +470,7 @@
|
|||
|
||||
#onboarding-notification-body {
|
||||
width: 500px;
|
||||
margin: 0 15px;
|
||||
margin: 0 18px;
|
||||
color: #0c0c0d;
|
||||
display: inline-block;
|
||||
max-height: 100%;
|
||||
|
|
@ -474,12 +480,27 @@
|
|||
}
|
||||
|
||||
#onboarding-notification-body * {
|
||||
font-size: 13px
|
||||
font-size: 12px;
|
||||
font-weight: 200;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#onboarding-notification-tour-title {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
color: #0f1126;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#onboarding-notification-tour-title::before {
|
||||
content: "";
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
float: inline-start;
|
||||
margin-top: 2px;
|
||||
margin-inline-end: 2px;
|
||||
}
|
||||
|
||||
#onboarding-notification-tour-icon {
|
||||
|
|
@ -491,18 +512,23 @@
|
|||
}
|
||||
|
||||
#onboarding-notification-action-btn {
|
||||
background: #0a84ff;
|
||||
/* With 1px transparent border, could see a border in the high-constrast mode */
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
background: #fbfbfb;
|
||||
/* With 1px border, could see a border in the high-constrast mode */
|
||||
border: 1px solid #c1c1c1;
|
||||
border-radius: 2px;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
color: #202340;
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 720px) {
|
||||
#onboarding-notification-body {
|
||||
width: 340px;
|
||||
}
|
||||
#onboarding-notification-action-btn:hover {
|
||||
background-color: #ebebeb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#onboarding-notification-action-btn:active {
|
||||
background-color: #dadada;
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче