Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-28 15:23:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1603524 - FxR PC Preview UI tweaks r=Gijs

Browse Source 
This change updates colors and spacing for some of the UI elements.

Differential Revision: https://phabricator.services.mozilla.com/D56975

--HG--
extra : moz-landing-system : lando
This commit is contained in:
thomasmo 2019-12-13 18:33:44 +00:00
parent 2b418a81e1
commit 733252acc8
5 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
browser/fxr/content/fxrui.css
View File

@ -17,7 +17,7 @@ body {
.navbar_container {
width: 100%;
margin-top: 20px;
margin-block: 15px;
display: flex;
flex-direction: row;
@ -29,7 +29,7 @@ body {
.icon_container {
width: 44px;
height: 44px;
margin-inline-end: 10px;
margin: 5px;
border-radius: 22px;
border-width: 2px;
@ -41,6 +41,17 @@ body {
background-color: inherit;
-moz-context-properties: fill;
transition-property: transform;
transition-duration: 200ms;
}
.icon_container:hover {
transform: scale(1.25);
}
.icon_container:disabled {
transform: unset;
}
.icon_disabled_hide:disabled {
@ -48,6 +59,7 @@ body {
}
.icon_backward {
background-image: url("assets/icon-backward.svg");
margin-inline-start: 10px;
}
.icon_forward {
background-image: url("assets/icon-forward.svg");
@ -63,8 +75,7 @@ body {
}
.icon_prefs {
background-image: url("assets/icon-settings.svg");
margin-inline-end: 0px;
margin-inline-start: 10px;
margin-inline-end: 10px;
}
.urlbar_container {
@ -72,6 +83,7 @@ body {
flex-grow: 1;
padding: 0;
margin: 5px;
border-radius: 22px;
border: 2px solid transparent;

27
browser/fxr/content/fxrui_blue.css
View File

@ -7,6 +7,8 @@
* easier to map between the stylesheet and the design doc.
*/
:root {
--num01: #1D2E3B;
--num02: #4C495C;
--num03: #7D8896;
--num04: #B3BECC;
--num06: #FFFFFF;
@ -24,39 +26,38 @@
}
body {
background-color: var(--num06);
background-color: var(--num01);
color: var(--num06);
}
.icon_container {
border-color: var(--num08);
background-color: var(--num06);
fill: var(--num08);
background-color: var(--num02);
border-color: transparent;
fill: var(--num06);
}
.icon_container:hover {
background-color: var(--num07);
border-color: var(--num07);
background-color: var(--num01);
fill: var(--num06);
}
.icon_container:active {
background-color: var(--num09);
border-color: var(--num09);
background-color: var(--num04);
fill: var(--num06);
}
.icon_container:disabled {
background-color: var(--num16);
border-color: var(--num16);
fill: var(--num14);
}
.urlbar_container {
border-color:var(--num08);
background-color: var(--num06);
border-color: transparent;
background-color: var(--num02);
}
.urlbar_container:hover {
border-color:var(--num07);
border-color:var(--num04);
}
.urlbar_container:focus-within {
border-color:var(--num08);
background-color: var(--num01);
}
.urlbar_secure_icon {
@ -64,7 +65,7 @@ body {
}
.urlbar_input {
color: var(--num13);
color: var(--num06);
}
.urlbar_input::selection {
background-color: var(--num08);

2
browser/fxr/content/prefs.css
View File

@ -4,6 +4,8 @@
body {
margin: 10px 50px;
background-color: var(--num06);
color: var(--num13);
}
.plain_button {

2
browser/fxr/content/prefs.html
View File

@ -11,8 +11,8 @@
<head>
<title>Firefox Reality Settings</title>
<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" href="prefs.css" />
<link rel="stylesheet" href="fxrui_blue.css" />
<link rel="stylesheet" href="prefs.css" />
<script src="prefs.js"></script>
<script src="common.js"></script>
</head>

2
browser/fxr/content/prefs.js
View File

@ -27,7 +27,7 @@ window.addEventListener(
function initAboutInfo() {
// Bug 1586294 - Update FxR Desktop Settings to use Fluent
document.getElementById("eFxrVersion").textContent = "version 0.9";
document.getElementById("eFxrDate").textContent = "(2019-10-22)";
document.getElementById("eFxrDate").textContent = "(2019-12-17)";
document.getElementById("eFxVersion").textContent =
"Firefox version " + Services.appinfo.version;
}