diff --git a/src/notification/bar.html b/src/notification/bar.html
index bc43ed7cc8..43f56c19dd 100644
--- a/src/notification/bar.html
+++ b/src/notification/bar.html
@@ -1,4 +1,4 @@
-
+
@@ -24,15 +24,14 @@
diff --git a/src/notification/bar.js b/src/notification/bar.js
index fec7ed16f4..6798e789bf 100644
--- a/src/notification/bar.js
+++ b/src/notification/bar.js
@@ -25,33 +25,31 @@ document.addEventListener('DOMContentLoaded', () => {
? chrome.runtime.getURL('images/icon38_locked.png')
: chrome.runtime.getURL('images/icon38.png');
- document.getElementById('close').src = chrome.runtime.getURL('images/close.png');
- document.getElementById('close').alt = i18n.close;
-
- var closeButton = document.getElementById('close-button'),
- body = document.querySelector('body'),
- bodyRect = body.getBoundingClientRect();
-
- // i18n
- body.classList.add('lang-' + lang.slice(0, 2));
-
document.getElementById('logo-link').title = i18n.appName;
+
+ var neverButton = document.querySelector('#template-add .never-save');
+ neverButton.setAttribute('short-text', i18n.never);
+ neverButton.setAttribute('full-text', i18n.notificationNeverSave);
+
+ var selectFolder = document.querySelector('#template-add .select-folder');
+ selectFolder.setAttribute('aria-label', i18n.folder);
+
+ var addButton = document.querySelector('#template-add .add-save');
+ addButton.setAttribute('short-text', i18n.yes);
+ addButton.setAttribute('full-text', i18n.notificationAddSave);
+
+ var changeButton = document.querySelector('#template-change .change-save');
+ changeButton.setAttribute('short-text', i18n.yes);
+ changeButton.setAttribute('full-text', i18n.notificationChangeSave);
+
+ var closeIcon = document.getElementById('close');
+ closeIcon.src = chrome.runtime.getURL('images/close.png');
+ closeIcon.alt = i18n.close;
+
+ var closeButton = document.getElementById('close-button')
closeButton.title = i18n.close;
closeButton.setAttribute('aria-label', i18n.close);
- if (bodyRect.width < 768) {
- document.querySelector('#template-add .add-save').textContent = i18n.yes;
- document.querySelector('#template-add .never-save').textContent = i18n.never;
- document.querySelector('#template-add .select-folder').style.display = 'none';
- document.querySelector('#template-change .change-save').textContent = i18n.yes;
- } else {
- document.querySelector('#template-add .add-save').textContent = i18n.notificationAddSave;
- document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave;
- document.querySelector('#template-add .select-folder').style.display = isVaultLocked ? 'none' : 'initial';
- document.querySelector('#template-add .select-folder').setAttribute('aria-label', i18n.folder);
- document.querySelector('#template-change .change-save').textContent = i18n.notificationChangeSave;
- }
-
document.querySelector('#template-add .add-text').textContent = i18n.notificationAddDesc;
document.querySelector('#template-change .change-text').textContent = i18n.notificationChangeDesc;
diff --git a/src/notification/bar.scss b/src/notification/bar.scss
index 6982a3a91f..75603d3b07 100644
--- a/src/notification/bar.scss
+++ b/src/notification/bar.scss
@@ -1,4 +1,4 @@
-body {
+body {
background-color: #ffffff;
padding: 0;
margin: 0;
@@ -24,7 +24,6 @@
grid-template-columns: auto max-content;
}
-
.outer-wrapper > *, .inner-wrapper > * {
align-self: center;
}
@@ -77,6 +76,35 @@ button.neutral {
}
}
+
+@media screen and (min-width: 768px) {
+ .never-save::after {
+ content: attr(full-text);
+ }
+
+ .add-save::after {
+ content: attr(full-text);
+ }
+
+ .change-save::after {
+ content: attr(full-text);
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .never-save::after {
+ content: attr(short-text);
+ }
+
+ .add-save::after {
+ content: attr(short-text);
+ }
+
+ .change-save::after {
+ content: attr(short-text);
+ }
+}
+
@media (print) {
body {
display: none;