mirror of
https://github.com/zen-browser/desktop.git
synced 2025-09-05 19:08:18 +00:00
chore: Update CSS and build configurations for welcome page
This commit is contained in:
Mauro Balades
@@ -22,10 +22,11 @@ export MOZ_SOURCE_REPO=https://github.com/zen-browser/desktop
|
||||
export MOZ_SOURCE_CHANGESET=${changeset}
|
||||
export MOZ_INCLUDE_SOURCE_INFO=1
|
||||
|
||||
ac_add_options --enable-bootstrap
|
||||
ac_add_options --enable-application=browser
|
||||
|
||||
if test "$ZEN_RELEASE"; then
|
||||
ac_add_options --enable-bootstrap
|
||||
|
||||
ac_add_options --enable-release
|
||||
ac_add_options --disable-debug
|
||||
ac_add_options --disable-debug-symbols
|
||||
|
||||
@@ -15,21 +15,35 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: .1s;
|
||||
transition: 2s;
|
||||
-moz-transform: scale(1.1); /* zoom */
|
||||
}
|
||||
|
||||
body.gradient-background {
|
||||
}
|
||||
|
||||
#first-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
margin: 20px;
|
||||
border-radius: 15px;
|
||||
margin: 15px;
|
||||
background: var(--zen-dialog-background);
|
||||
width: 100%;
|
||||
width: 55%;
|
||||
position: relative;
|
||||
padding: 5% 4%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#buttons-footer {
|
||||
margin-top: auto;
|
||||
padding: 10px;
|
||||
width: -moz-available;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#second-view {
|
||||
@@ -39,28 +53,37 @@ body {
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 40px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#footer-buttons button {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
|
||||
justify-content: start;
|
||||
width: -moz-available;
|
||||
height: 100%;
|
||||
margin: 32px;
|
||||
}
|
||||
|
||||
.page-split:not([hidden="true"]) {
|
||||
flex-direction: row;
|
||||
margin: auto;
|
||||
justify-content: space-around;
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin: 35px 0 20px 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#enableFeatures .card {
|
||||
width: auto;
|
||||
.page-split:not([hidden="true"]) {
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.page-split > div:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:not(#theme) .card h3 {
|
||||
@@ -127,6 +150,7 @@ p {
|
||||
display: inline-block;
|
||||
height: 82px;
|
||||
width: 82px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.asset {
|
||||
@@ -199,59 +223,88 @@ input[type='checkbox'] {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#dots {
|
||||
#circular-progress {
|
||||
--size: 220px;
|
||||
--half-size: calc(var(--size) / 2);
|
||||
--stroke-width: 20px;
|
||||
--radius: calc((var(--size) - var(--stroke-width)) / 2);
|
||||
--circumference: calc(var(--radius) * pi * 2);
|
||||
--dash: calc((var(--progress) * var(--circumference)) / 100);
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
width: 55px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
transition: all .1s;
|
||||
background: light-dark(#000, #fff);
|
||||
cursor: pointer;
|
||||
#circular-progress circle {
|
||||
cx: var(--half-size);
|
||||
cy: var(--half-size);
|
||||
r: var(--radius);
|
||||
stroke-width: var(--stroke-width);
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background: var(--zen-primary-color);
|
||||
#circular-progress circle.bg {
|
||||
stroke: var(--zen-dialog-background);
|
||||
}
|
||||
|
||||
#colorList {
|
||||
width: 500px;
|
||||
border-radius: 99px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
border: 1px solid var(--zen-colors-primary) !important;
|
||||
}
|
||||
|
||||
#dragBall {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: calc(5px / 2);
|
||||
#circular-progress circle.fg {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: var(--half-size) var(--half-size);
|
||||
stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
|
||||
transition: stroke-dasharray 0.3s linear 0s;
|
||||
stroke: var(--zen-primary-color);
|
||||
}
|
||||
|
||||
#colorListWrapper {
|
||||
position: relative;
|
||||
width: 500px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#colorPreview {
|
||||
margin-left: 10px;
|
||||
border-radius: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -60px;
|
||||
transform: translateY(-50%);
|
||||
#colorListWrapper > div {
|
||||
border-radius: 999px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border: 3px solid transparent;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#colorListWrapper > div.selected {
|
||||
border: 3px solid light-dark(#000, #fff);
|
||||
}
|
||||
|
||||
#welcome {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#themeList {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
#themeList > svg {
|
||||
border: 3px solid transparent;
|
||||
border-radius: 15px;
|
||||
height: -moz-available;
|
||||
}
|
||||
|
||||
#themeList > svg:nth-child(1) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#themeList > svg.selected {
|
||||
border: 3px solid var(--zen-colors-primary);
|
||||
}
|
||||
|
||||
#searchList.cardGroup {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
#searchList .card {
|
||||
width: -moz-available !important;
|
||||
margin: 20px;
|
||||
padding: 80px 0 !important;
|
||||
}
|
||||
|
||||
@@ -26,19 +26,14 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
<script src="chrome://browser/content/zenThemeModifier.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="gradient-background">
|
||||
<div id="first-view">
|
||||
<div class="page" id="welcome">
|
||||
<img class="icon" src="chrome://branding/content/about-logo.png" />
|
||||
<h1 data-l10n-id="welcome-dialog-welcome"></h1>
|
||||
|
||||
<p data-l10n-id="welcome-dialog-welcome-subtext"></p>
|
||||
|
||||
<button
|
||||
id="welcomeNext"
|
||||
class="primary"
|
||||
data-l10n-id="welcome-dialog-get-started"
|
||||
></button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="page page-split" id="import">
|
||||
@@ -53,11 +48,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
id="importBrowser"
|
||||
data-l10n-id="welcome-dialog-import-action"
|
||||
></button>
|
||||
<button
|
||||
class="text-link ghost-button"
|
||||
id="importNext"
|
||||
data-l10n-id="welcome-dialog-skip"
|
||||
></button>
|
||||
</hbox>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,19 +58,70 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
<p data-l10n-id="welcome-dialog-theme-subtext"></p>
|
||||
</div>
|
||||
<div>
|
||||
<h1 data-l10n-id="welcome-dialog-theme-header-1"></h1>
|
||||
<div id="themeList" class="cardGroup"></div>
|
||||
<h1 data-l10n-id="welcome-dialog-theme-header-2"></h1>
|
||||
<h2 data-l10n-id="welcome-dialog-theme-header-1"></h2>
|
||||
<div id="colorListWrapper">
|
||||
<canvas id="colorList" class="cardGroup"></canvas>
|
||||
<div id="dragBall"></div>
|
||||
<div id="colorPreview"></div>
|
||||
</div>
|
||||
<button
|
||||
id="themeNext"
|
||||
class="primary"
|
||||
data-l10n-id="welcome-dialog-theme-action"
|
||||
></button>
|
||||
<h2 data-l10n-id="welcome-dialog-theme-header-2"></h2>
|
||||
<div id="themeList" class="cardGroup">
|
||||
<svg width="700" height="700" viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_404_2706)">
|
||||
<rect width="700" height="700" fill="#F4F4F4"/>
|
||||
<g filter="url(#filter0_d_404_2706)">
|
||||
<path d="M107 130C107 103.49 128.49 82 155 82H700V738H107V130Z" fill="white"/>
|
||||
<path d="M155 82.5H699.5V737.5H107.5V130C107.5 103.766 128.766 82.5 155 82.5Z" stroke="black" stroke-opacity="0.2"/>
|
||||
</g>
|
||||
<mask id="path-3-inside-1_404_2706" fill="white">
|
||||
<path d="M257 83H700V701H257V83Z"/>
|
||||
</mask>
|
||||
<path d="M257 83H700V701H257V83Z" fill="#F1F1F1"/>
|
||||
<path d="M258 701V83H256V701H258Z" fill="black" fill-opacity="0.1" mask="url(#path-3-inside-1_404_2706)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_404_2706" x="103" y="82" width="601" height="664" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_404_2706"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_404_2706" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_404_2706">
|
||||
<rect width="700" height="700" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg width="700" height="700" viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_404_2709)">
|
||||
<rect width="700" height="700" fill="#515151"/>
|
||||
<g filter="url(#filter0_d_404_2709)">
|
||||
<path d="M107 130C107 103.49 128.49 82 155 82H700V727H107V130Z" fill="#717171"/>
|
||||
<path d="M155 82.5H699.5V726.5H107.5V130C107.5 103.766 128.766 82.5 155 82.5Z" stroke="white" stroke-opacity="0.57"/>
|
||||
</g>
|
||||
<mask id="path-3-inside-1_404_2709" fill="white">
|
||||
<path d="M257 83H700V701H257V83Z"/>
|
||||
</mask>
|
||||
<path d="M257 83H700V701H257V83Z" fill="#565656"/>
|
||||
<path d="M258 701V83H256V701H258Z" fill="black" fill-opacity="0.1" mask="url(#path-3-inside-1_404_2709)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_404_2709" x="103" y="82" width="601" height="653" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_404_2709"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_404_2709" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_404_2709">
|
||||
<rect width="700" height="700" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -91,21 +132,23 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
</div>
|
||||
<div>
|
||||
<div id="searchList" class="cardGroup"></div>
|
||||
<button
|
||||
id="searchNext"
|
||||
class="primary"
|
||||
data-l10n-id="welcome-dialog-search-action"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page" id="thanks">
|
||||
<h1 data-l10n-id="welcome-dialog-thanks"></h1>
|
||||
<p data-l10n-id="welcome-dialog-thanks-subtext"></p>
|
||||
</div>
|
||||
<div id="buttons-footer">
|
||||
<button
|
||||
id="thanksNext"
|
||||
id="back"
|
||||
data-l10n-id="welcome-dialog-back-action"
|
||||
disabled
|
||||
></button>
|
||||
<button
|
||||
id="next"
|
||||
class="primary"
|
||||
data-l10n-id="welcome-dialog-thanks-action"
|
||||
data-l10n-id="welcome-dialog-next-action"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -114,7 +157,13 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="dots"></div>
|
||||
<svg
|
||||
width="250" height="250" viewBox="0 0 250 250"
|
||||
id="circular-progress" style="--progress: 50"
|
||||
>
|
||||
<circle class="bg"></circle>
|
||||
<circle class="fg"></circle>
|
||||
</svg>
|
||||
|
||||
<script src="./welcome.js"></script>
|
||||
<script src="chrome://browser/content/contentTheme.js"></script>
|
||||
|
||||
@@ -90,11 +90,6 @@ class Page {
|
||||
*/
|
||||
constructor(id) {
|
||||
this.element = document.getElementById(id)
|
||||
this.nextEl = document.getElementById(`${id}Next`)
|
||||
|
||||
this.nextEl.addEventListener('click', () => {
|
||||
this.pages.next()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -117,7 +112,7 @@ class Page {
|
||||
class Themes extends Page {
|
||||
constructor(id) {
|
||||
super(id)
|
||||
|
||||
|
||||
this.loadThemes()
|
||||
}
|
||||
|
||||
@@ -130,95 +125,40 @@ class Themes extends Page {
|
||||
)
|
||||
const themeList = document.getElementById('themeList');
|
||||
|
||||
const themeElements = []
|
||||
const themeElements = ["firefox-compact-light@mozilla.org", "firefox-compact-dark@mozilla.org"];
|
||||
|
||||
themes.forEach((theme) => {
|
||||
const container = document.createElement('div')
|
||||
container.classList.add('card');
|
||||
container.classList.add('card-no-hover');
|
||||
|
||||
//if (theme.id == "firefox-compact-dream@mozilla.org" || theme.id == "firefox-compact-galaxy@mozilla.org") {
|
||||
// container.setAttribute('disabled', 'true')
|
||||
//}
|
||||
|
||||
if (theme.isActive) {
|
||||
container.classList.add('selected')
|
||||
}
|
||||
|
||||
container.addEventListener('click', () => {
|
||||
themeElements.forEach((theme, i) => {
|
||||
let container = themeList.children[i];
|
||||
container.addEventListener('click', (() => {
|
||||
if (container.hasAttribute('disabled')) {
|
||||
return
|
||||
}
|
||||
document.body.classList.add('normal-background');
|
||||
themeElements.forEach((el) => el.classList.remove('selected'))
|
||||
for (const el of themeList.children) {
|
||||
el.classList.remove('selected')
|
||||
}
|
||||
container.classList.add('selected')
|
||||
theme.enable()
|
||||
})
|
||||
|
||||
const img = document.createElement('img')
|
||||
img.src = theme.icons['32']
|
||||
|
||||
const name = document.createElement('h3')
|
||||
name.textContent = theme.name
|
||||
|
||||
//container.appendChild(img)
|
||||
container.appendChild(name)
|
||||
|
||||
themeList.appendChild(container)
|
||||
themeElements.push(container)
|
||||
themes.find((t) => t.id === theme).enable()
|
||||
}).bind(this, i, container, theme))
|
||||
})
|
||||
}
|
||||
|
||||
setColorBar() {
|
||||
const colorList = document.getElementById('colorList');
|
||||
const ctx = colorList.getContext('2d');
|
||||
let gradient = ctx.createLinearGradient(0, 0, 500, 20);
|
||||
colorList.width = 500;
|
||||
colorList.height = 20;
|
||||
const colorList = document.getElementById('colorListWrapper');
|
||||
const colors = ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787',
|
||||
'#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff']
|
||||
|
||||
gradient.addColorStop(0.1, '#aac7ff');
|
||||
gradient.addColorStop(0.2, '#74d7cb');
|
||||
gradient.addColorStop(0.3, '#a0d490');
|
||||
gradient.addColorStop(0.4, '#dec663');
|
||||
gradient.addColorStop(0.5, '#ffb787');
|
||||
gradient.addColorStop(0.6, '#ffb1c0');
|
||||
gradient.addColorStop(0.7, '#ddbfc3');
|
||||
gradient.addColorStop(0.8, '#f6b0ea');
|
||||
gradient.addColorStop(0.9, '#d4bbff');
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, 1000, 150);
|
||||
|
||||
const dragBall = document.getElementById('dragBall');
|
||||
dragBall.style.left = `17px`;
|
||||
dragBall.addEventListener('mousedown', (e) => {
|
||||
const rect = colorList.getBoundingClientRect();
|
||||
e.preventDefault();
|
||||
|
||||
const onMouseMove = (ev) => {
|
||||
var x = ev.clientX - rect.left;
|
||||
dragBall.style.left = `${x - 17/2}px`;
|
||||
if (x < 17) {
|
||||
dragBall.style.left = `${17/2}px`;
|
||||
x = 17;
|
||||
} else if (x > rect.width - 17) {
|
||||
dragBall.style.left = `${rect.width - 17 - (17/2)}px`;
|
||||
x = rect.width - 17 - (17/2);
|
||||
}
|
||||
const data = ctx.getImageData(x - 17, 1, 1, 1).data;
|
||||
let color = `#${data[0].toString(16)}${data[1].toString(16)}${data[2].toString(16)}`;
|
||||
document.getElementById("colorPreview").style.backgroundColor = color;
|
||||
colors.forEach((color) => {
|
||||
const container = document.createElement('div')
|
||||
container.classList.add('color')
|
||||
container.style.backgroundColor = color
|
||||
container.setAttribute('data-color', color)
|
||||
container.addEventListener('click', (() => {
|
||||
Services.prefs.setStringPref('zen.theme.accent-color', color);
|
||||
}
|
||||
colorList.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'))
|
||||
container.classList.add('selected')
|
||||
}).bind(this, color, container))
|
||||
|
||||
const onMouseUp = () => {
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
document.getElementById("colorPreview").style.backgroundColor = '';
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
colorList.appendChild(container)
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -297,7 +237,6 @@ class Import extends Page {
|
||||
MigrationUtils.showMigrationWizard(window, {
|
||||
zenBlocking: true,
|
||||
});
|
||||
this.nextEl.click()
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -316,19 +255,24 @@ class Pages {
|
||||
|
||||
this.pages.forEach((page) => page.setPages(this))
|
||||
|
||||
const dots = document.getElementById("dots");
|
||||
for (let i = 0; i < this.pages.length; i++) {
|
||||
let dot = document.createElement("span");
|
||||
dot.classList.add("dot");
|
||||
dot.setAttribute("data-index", i);
|
||||
dot.onclick = (e) => {
|
||||
this.currentPage = parseInt(e.target.getAttribute("data-index"));
|
||||
this._displayCurrentPage();
|
||||
}
|
||||
dots.appendChild(dot);
|
||||
}
|
||||
this._displayCurrentPage();
|
||||
console.log("Welcome pages initialized.")
|
||||
|
||||
this.nextEl = document.getElementById(`next`)
|
||||
this.prevEl = document.getElementById(`back`)
|
||||
|
||||
this.nextEl.addEventListener('click', () => {
|
||||
this.next()
|
||||
this.prevEl.removeAttribute('disabled')
|
||||
})
|
||||
|
||||
this.prevEl.addEventListener('click', () => {
|
||||
this.currentPage--
|
||||
this._displayCurrentPage()
|
||||
if (this.pages.currentPage === 1) {
|
||||
this.prevEl.setAttribute('disabled', 'true')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
next() {
|
||||
@@ -355,16 +299,16 @@ class Pages {
|
||||
}
|
||||
|
||||
_displayCurrentPage() {
|
||||
let dots = document.getElementsByClassName("dot");
|
||||
for (let i = 0; i < dots.length; i++) {
|
||||
dots[i].classList.remove("active");
|
||||
}
|
||||
dots[this.currentPage].classList.add("active");
|
||||
|
||||
let progress = document.getElementById('circular-progress');
|
||||
progress.style.setProperty('--progress', ((this.currentPage + 1) / this.pages.length) * 100);
|
||||
for (const page of this.pages) {
|
||||
page.hide()
|
||||
}
|
||||
|
||||
if (this.currentPage >= 1) {
|
||||
document.body.classList.remove('gradient-background')
|
||||
} else {
|
||||
document.body.classList.add('gradient-background')
|
||||
}
|
||||
this.pages[this.currentPage].show()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,29 +6,21 @@ welcome-dialog-welcome = 👋 Welcome to { -brand-short-name }
|
||||
welcome-dialog-welcome-subtext = Fast. Beautiful. Private.
|
||||
welcome-dialog-get-started = Get started
|
||||
|
||||
welcome-dialog-skip = Not now
|
||||
|
||||
welcome-dialog-import = 😍 Bring your favourites to { -brand-short-name }
|
||||
welcome-dialog-import-subtext = Pick up where you left off in your last browser
|
||||
welcome-dialog-import-action = Import
|
||||
welcome-dialog-import-action = Import your data
|
||||
|
||||
welcome-dialog-theme = 🎨 Choose a theme
|
||||
welcome-dialog-theme = Make yourself at home
|
||||
welcome-dialog-theme-subtext = Personalize your experience with your favorite look!
|
||||
welcome-dialog-theme-action = Continue
|
||||
|
||||
welcome-dialog-theme-header-1 = 1. Choose a theme
|
||||
welcome-dialog-theme-header-2 = 2. Find your perfect color
|
||||
welcome-dialog-theme-header-1 = Choose your perfect color
|
||||
welcome-dialog-theme-header-2 = Choose your theme
|
||||
|
||||
welcome-dialog-search = 🔍 Choose a search engine
|
||||
welcome-dialog-search-subtext = Select your preferred search engine to tailor your browsing experience!
|
||||
welcome-dialog-search-action = Next
|
||||
|
||||
welcome-dialog-thanks = Thanks You So Much! ❤️
|
||||
welcome-dialog-thanks-subtext = Your appreciation means the world to us!
|
||||
welcome-dialog-thanks-action = Start Browsing!
|
||||
|
||||
# About Welcome Page
|
||||
welcome-page-description = An experimental Firefox fork that enhances focus and increases work productivity due to its hyper minimalistic UI and built-in tools
|
||||
welcome-page-version = You are using { -brand-full-name }
|
||||
welcome-page-build-id = Build { -build-id }
|
||||
welcome-page-other-downloads = If this is not the release you want, feel free to checkout other downloads at https://pulsebrowser.app/download
|
||||
welcome-dialog-back-action = Back
|
||||
welcome-dialog-next-action = Next
|
||||
|
||||
@@ -24,5 +24,5 @@ html|button:not(:is(
|
||||
)) {
|
||||
transition: .2s;
|
||||
border-radius: 6px !important;
|
||||
min-width: 100px !important;
|
||||
min-width: 80px !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user