fontawesome 5

pull/1631/head
antelle 2 years ago
parent 8925a48822
commit 63b7b32e9c
No known key found for this signature in database
GPG Key ID: 63C9777AAB7C563C

@ -111,13 +111,6 @@ module.exports = function (grunt) {
expand: true,
nonull: true
},
fonts: {
src: 'node_modules/font-awesome/fonts/fontawesome-webfont.*',
dest: 'tmp/fonts/',
nonull: true,
expand: true,
flatten: true
},
'desktop-html': {
src: 'dist/index.html',
dest: 'tmp/desktop/app/index.html',

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M339 314.9L175.4 32h161.2l163.6 282.9H339zm-137.5 23.6L120.9 480h310.5L512 338.5H201.5zM154.1 67.4L0 338.5 80.6 480 237 208.8 154.1 67.4z"/></svg>

Before

Width:  |  Height:  |  Size: 217 B

@ -1 +0,0 @@
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="256" height="256" version="1.1" viewBox="0 0 256 256"><g transform="translate(296.64282,-100.61434)"><g transform="translate(222.85714,-11.428576)"><g transform="matrix(0.83394139,0,0,0.83394139,-86.101383,10.950635)"><path d="m-419.5 365.94c-18.48-4.62-28.77-19.31-28.81-41.1-0.01-6.97 0.49-10.31 2.23-14.79 4.26-10.99 15.55-19.27 30.41-22.33 7.39-1.52 9.67-3.15 9.67-6.92 0-1.18 0.88-4.71 1.95-7.83 4.88-14.2 13.93-26.03 23.59-30.87 10.11-5.07 15.22-6.21 27.45-6.14 17.38 0.09 26.04 3.86 38.17 16.6l6.67 7 5.97-2.07c28.91-10.01 57.73 7.03 60.06 35.49l0.64 7.79 5.69 2.04c16.26 5.83 23.9 18.06 22.52 36.04-0.91 11.76-6.4 21.15-15.11 25.81l-4.09 2.19-91 0.18c-69.93 0.13-92.16-0.11-96-1.07zM-487.72 353.36" fill="#000"/><path d="m-487.72 353.36c-10.79-2.56-22.22-12.09-27.58-22.99-3.04-6.18-3.2-7.09-3.2-18.03 0-10.4 0.26-12.07 2.68-17.23 5.1-10.89 14.88-18.75 27.15-21.84 2.59-0.65 5.02-1.69 5.41-2.31 0.38-0.62 0.81-4 0.95-7.5 0.85-21.78 15.15-40.97 35.1-47.14 10.78-3.33 24.33-2.51 36.05 2.18 3.72 1.49 3.3 1.81 11.16-8.5 4.65-6.1 14.05-13.68 21.74-17.55 8.3-4.17 16.94-6.09 27.26-6.07 28.86 0.07 53.73 18.12 62.92 45.67 2.94 8.8 2.79 11.27-0.67 11.34-1.51 0.03-5.85 0.86-9.63 1.85l-6.88 1.79-6.28-6.28c-17.7-17.7-46.59-21.53-71.15-9.42-9.81 4.84-17.7 11.78-23.65 20.83-4.25 6.45-9.66 18.48-9.66 21.47 0 2.12-1.72 3.18-9.05 5.58-22.69 7.44-35.94 24.63-35.93 46.62 0 8 2.06 17.8 4.93 23.41 1.08 2.11 1.68 4.13 1.34 4.47-0.88 0.88-29.11 0.58-33.01-0.35z" /></g></g></g></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

@ -1 +0,0 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M465.69 311.917V200.083H363.175v111.834zm-69.897-18.639a4.66 4.66 0 01-4.659-4.659v-65.237a4.66 4.66 0 014.659-4.66h37.278a4.66 4.66 0 014.66 4.66v65.237a4.66 4.66 0 01-4.66 4.66h-37.278z"/><path d="M400.453 251.34v-23.299h27.959v23.299zm0 32.618v-23.299h27.959v23.299zM46.31 187.656v136.688c0 8.564 6.968 15.532 15.532 15.532h21.746V204.742a4.66 4.66 0 019.319 0v135.134h245.415c8.565 0 15.533-6.968 15.533-15.532V187.656c0-8.564-6.968-15.532-15.533-15.532H61.842c-8.565 0-15.532 6.968-15.532 15.532zm241.936 68.6c.122 9.637-7.529 17.293-17.166 17.416-9.359-.354-17.016-8.006-16.662-17.366-.122-9.636 7.529-17.293 16.889-16.938 9.637-.124 17.293 7.528 16.939 16.888zm-41.921-28.528a4.658 4.658 0 011.679 6.372c-3.865 6.631-5.909 14.266-5.909 22.082v.014c-.143 8.152 1.746 15.601 5.603 22.206a4.66 4.66 0 01-8.048 4.7c-4.73-8.099-7.057-17.196-6.873-26.984v-.021c0-9.381 2.48-18.637 7.176-26.69a4.657 4.657 0 016.372-1.679zm-23.7-17.48a4.659 4.659 0 011.395 6.441c-7.725 11.993-11.78 25.622-11.613 39.406-.164 14.287 3.794 28.031 11.327 39.791a4.66 4.66 0 01-7.849 5.027c-8.511-13.288-12.909-28.806-12.799-44.815-.13-15.503 4.387-30.927 13.099-44.455a4.66 4.66 0 016.44-1.395zm-22.433-16.741a4.656 4.656 0 011.272 6.466c-11.136 16.59-17.074 35.936-17.174 55.945-.244 20.163 5.497 39.619 16.606 56.34a4.66 4.66 0 01-7.762 5.158c-11.901-17.914-18.172-38.71-18.172-60.224 0-.452.003-.901.008-1.354.108-21.815 6.594-42.941 18.756-61.059a4.66 4.66 0 016.466-1.272z"/></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

@ -150,7 +150,7 @@ const ChalRespCalculator = {
header: Locale.yubiKeyNoKeyHeader,
body: Locale.yubiKeyNoKeyBody.replace('{}', serial),
buttons: [Alerts.buttons.cancel],
iconSvg: 'usb-token',
icon: 'usb-token',
cancel: () => {
logger.info('No key alert closed');
@ -173,7 +173,7 @@ const ChalRespCalculator = {
header: Locale.yubiKeyTouchRequestedHeader,
body: Locale.yubiKeyTouchRequestedBody.replace('{}', serial),
buttons: [Alerts.buttons.cancel],
iconSvg: 'usb-token',
icon: 'usb-token',
cancel: () => {
logger.info('Touch alert closed');

@ -3,10 +3,10 @@ const IconMap = [
'globe',
'exclamation-triangle',
'server',
'thumb-tack',
'thumbtack',
'comments-o',
'puzzle-piece',
'pencil-square-o',
'edit',
'plug',
'newspaper-o',
'paperclip',
@ -22,13 +22,13 @@ const IconMap = [
'cog',
'clipboard',
'paper-plane-o',
'television',
'tv',
'bolt',
'inbox',
'floppy-o',
'hdd-o',
'dot-circle-o',
'expeditedssl',
'save',
'hdd',
'dot-circle',
'user-lock',
'terminal',
'print',
'map-signs',
@ -38,11 +38,11 @@ const IconMap = [
'archive',
'credit-card',
'windows',
'clock-o',
'clock',
'search',
'flask',
'gamepad',
'trash-o',
'trash',
'sticky-note-o',
'ban',
'question-circle',
@ -53,19 +53,19 @@ const IconMap = [
'unlock-alt',
'lock',
'check',
'pencil',
'picture-o',
'pencil-alt',
'image',
'book',
'list-alt',
'user-secret',
'cutlery',
'utensils',
'home',
'star-o',
'star',
'linux',
'map-pin',
'apple',
'wikipedia-w',
'usd',
'dollar-sign',
'calendar',
'mobile'
];

@ -6,6 +6,7 @@ const Links = {
BetaWebApp: 'https://beta.keeweb.info',
License: 'https://github.com/keeweb/keeweb/blob/master/LICENSE',
LicenseApache: 'https://opensource.org/licenses/Apache-2.0',
LicenseLinkCCBY40: 'https://creativecommons.org/licenses/by/4.0/',
UpdateDesktop: 'https://github.com/keeweb/keeweb/releases/download/v{ver}/UpdateDesktop.zip',
ReleaseNotes: 'https://github.com/keeweb/keeweb/blob/master/release-notes.md#release-notes',
SelfHostedDropbox: 'https://github.com/keeweb/keeweb#self-hosting',

@ -4,4 +4,3 @@ import 'hbs-helpers/ifeq';
import 'hbs-helpers/ifneq';
import 'hbs-helpers/ifemptyoreq';
import 'hbs-helpers/res';
import 'hbs-helpers/svg';

@ -1,9 +0,0 @@
import Handlebars from 'hbs';
Handlebars.registerHelper('svg', (name, cls) => {
const icon = require(`svg/${name}.svg`).default;
if (typeof cls === 'string') {
return `<svg class="${cls}"` + icon.substr(4);
}
return icon;
});

@ -48,7 +48,7 @@ function getIcon(ext) {
case 'log':
case 'rtf':
case 'pem':
return 'file-text-o';
return 'file-alt-o';
case 'html':
case 'htm':
case 'js':

@ -71,7 +71,7 @@ class YubiKeyOtpModel extends ExternalOtpDeviceModel {
id: this.entryId(code.title, code.user),
device: this,
deviceSubId: serial,
icon: 'clock-o',
icon: 'clock',
title: code.title,
user: code.user,
needsTouch: code.needsTouch

@ -42,7 +42,7 @@ class MenuModel extends Model {
this.trashSection = new MenuSectionModel([
{
locTitle: 'menuTrash',
icon: 'trash',
icon: 'trash-alt',
shortcut: Keys.DOM_VK_D,
filterKey: 'trash',
filterValue: true,

@ -11,7 +11,7 @@ class StorageGDrive extends StorageBase {
name = 'gdrive';
enabled = true;
uipos = 30;
iconSvg = 'google-drive';
icon = 'google-drive';
_baseUrl = 'https://www.googleapis.com/drive/v3';
_baseUrlUpload = 'https://www.googleapis.com/upload/drive/v3';

@ -8,7 +8,7 @@ class StorageOneDrive extends StorageBase {
name = 'onedrive';
enabled = true;
uipos = 40;
iconSvg = 'onedrive';
icon = 'onedrive';
_baseUrl = 'https://graph.microsoft.com/v1.0/me';

@ -15,7 +15,6 @@ const MaxRequestRetries = 3;
class StorageBase {
name = null;
icon = null;
iconSvg = null;
enabled = false;
system = false;
uipos = null;

@ -241,7 +241,7 @@ class AutoTypeSelectView extends View {
if (entry.fields.otp) {
options.push({
value: '{TOTP}',
icon: 'clock-o',
icon: 'clock',
text: Locale.autoTypeSelectionOtp
});
}

@ -236,7 +236,7 @@ class DetailsView extends View {
if (fieldView.isHidden()) {
moreOptions.push({
value: 'add:' + fieldView.model.name,
icon: 'pencil',
icon: 'pencil-alt',
text: Locale.detMenuAddField.replace('{}', fieldView.model.title)
});
}
@ -263,7 +263,7 @@ class DetailsView extends View {
text: Locale.detMenuHideEmpty
});
}
moreOptions.push({ value: 'otp', icon: 'clock-o', text: Locale.detSetupOtp });
moreOptions.push({ value: 'otp', icon: 'clock', text: Locale.detSetupOtp });
if (AutoType.enabled) {
moreOptions.push({
value: 'auto-type',
@ -457,7 +457,7 @@ class DetailsView extends View {
return;
}
this.model.initOtpGenerator();
this.model.initOtpGenerator?.();
if (this.model.external) {
return;
}
@ -824,7 +824,7 @@ class DetailsView extends View {
Alerts.yesno({
header: Locale.detDelToTrash,
body: Locale.detDelToTrashBody,
icon: 'trash',
icon: 'trash-alt',
success: doMove
});
} else {
@ -865,19 +865,19 @@ class DetailsView extends View {
if (this.model.external) {
options.push({
value: 'det-copy-otp',
icon: 'clipboard',
icon: 'copy',
text: Locale.detMenuCopyOtp
});
} else {
options.push({
value: 'det-copy-password',
icon: 'clipboard',
icon: 'copy',
text: Locale.detMenuCopyPassword
});
}
options.push({
value: 'det-copy-user',
icon: 'clipboard',
icon: 'copy',
text: Locale.detMenuCopyUser
});
}
@ -887,7 +887,7 @@ class DetailsView extends View {
if (canCopy) {
options.push({
value: 'copy-to-clipboard',
icon: 'copy',
icon: 'clipboard',
text: Locale.detCopyEntryToClipboard
});
}

@ -321,9 +321,9 @@ class FieldView extends View {
const actions = [];
if (this.value) {
actions.push({ name: 'copy', icon: 'clipboard' });
actions.push({ name: 'copy', icon: 'copy' });
}
actions.push({ name: 'edit', icon: 'pencil' });
actions.push({ name: 'edit', icon: 'pencil-alt' });
if (this.value instanceof kdbxweb.ProtectedValue) {
actions.push({ name: 'reveal', icon: 'eye' });
}

@ -51,7 +51,7 @@ class IconSelectView extends View {
return;
}
this.downloadingFavicon = true;
this.$el.find('.icon-select__icon-download>i').addClass('fa-spinner fa-spin');
this.$el.find('.icon-select__icon-download>i').addClass('fa-spinner spin');
this.$el
.find('.icon-select__icon-download')
.removeClass('icon-select__icon--download-error');
@ -62,7 +62,7 @@ class IconSelectView extends View {
img.onload = () => {
this.setSpecialImage(img, 'download');
this.$el.find('.icon-select__icon-download img').remove();
this.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner fa-spin');
this.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner spin');
this.$el
.find('.icon-select__icon-download')
.addClass('icon-select__icon--custom-selected')
@ -71,7 +71,7 @@ class IconSelectView extends View {
};
img.onerror = (e) => {
logger.error('Favicon download error: ' + url, e);
this.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner fa-spin');
this.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner spin');
this.$el
.find('.icon-select__icon-download')
.removeClass('icon-select__icon--custom-selected')

@ -39,64 +39,64 @@ class ListSearchView extends View {
this.sortOptions = [
{
value: 'title',
icon: 'sort-alpha-asc',
icon: 'sort-alpha-down',
loc: () =>
StringFormat.capFirst(Locale.title) + ' ' + this.addArrow(Locale.searchAZ)
},
{
value: '-title',
icon: 'sort-alpha-desc',
icon: 'sort-alpha-down-alt',
loc: () =>
StringFormat.capFirst(Locale.title) + ' ' + this.addArrow(Locale.searchZA)
},
{
value: 'website',
icon: 'sort-alpha-asc',
icon: 'sort-alpha-down',
loc: () =>
StringFormat.capFirst(Locale.website) + ' ' + this.addArrow(Locale.searchAZ)
},
{
value: '-website',
icon: 'sort-alpha-desc',
icon: 'sort-alpha-down-alt',
loc: () =>
StringFormat.capFirst(Locale.website) + ' ' + this.addArrow(Locale.searchZA)
},
{
value: 'user',
icon: 'sort-alpha-asc',
icon: 'sort-alpha-down',
loc: () => StringFormat.capFirst(Locale.user) + ' ' + this.addArrow(Locale.searchAZ)
},
{
value: '-user',
icon: 'sort-alpha-desc',
icon: 'sort-alpha-down-alt',
loc: () => StringFormat.capFirst(Locale.user) + ' ' + this.addArrow(Locale.searchZA)
},
{
value: 'created',
icon: 'sort-numeric-asc',
icon: 'sort-numeric-down',
loc: () => Locale.searchCreated + ' ' + this.addArrow(Locale.searchON)
},
{
value: '-created',
icon: 'sort-numeric-desc',
icon: 'sort-numeric-down-alt',
loc: () => Locale.searchCreated + ' ' + this.addArrow(Locale.searchNO)
},
{
value: 'updated',
icon: 'sort-numeric-asc',
icon: 'sort-numeric-down',
loc: () => Locale.searchUpdated + ' ' + this.addArrow(Locale.searchON)
},
{
value: '-updated',
icon: 'sort-numeric-desc',
icon: 'sort-numeric-down-alt',
loc: () => Locale.searchUpdated + ' ' + this.addArrow(Locale.searchNO)
},
{
value: '-attachments',
icon: 'sort-amount-desc',
icon: 'sort-amount-down',
loc: () => Locale.searchAttachments
},
{ value: '-rank', icon: 'sort-amount-desc', loc: () => Locale.searchRank }
{ value: '-rank', icon: 'sort-amount-down', loc: () => Locale.searchRank }
];
this.sortIcons = {};
this.sortOptions.forEach((opt) => {

@ -162,20 +162,16 @@ class OpenView extends View {
getLastOpenFiles() {
return this.model.fileInfos.map((fileInfo) => {
let icon = 'file-text';
let icon = 'file-alt';
const storage = Storage[fileInfo.storage];
if (storage && storage.icon) {
icon = storage.icon;
}
if (storage && storage.iconSvg) {
icon = null;
}
return {
id: fileInfo.id,
name: fileInfo.name,
path: this.getDisplayedPath(fileInfo),
icon,
iconSvg: storage ? storage.iconSvg : undefined
icon
};
});
}
@ -807,7 +803,7 @@ class OpenView extends View {
Alerts.alert({
header: Locale.openSelectFile,
body: Locale.openSelectFileBody,
icon: storage.icon || 'files-o',
icon: storage.icon || 'file-alt-o',
buttons: [{ result: '', title: Locale.alertCancel }],
esc: '',
click: '',
@ -1064,7 +1060,7 @@ class OpenView extends View {
Alerts.alert({
header: Locale.openChalRespHeader,
iconSvg: 'usb-token',
icon: 'usb-token',
buttons: [{ result: '', title: Locale.alertCancel }],
esc: '',
click: '',

@ -12,6 +12,7 @@ class SettingsAboutView extends View {
version: RuntimeInfo.version,
licenseLink: Links.License,
licenseLinkApache: Links.LicenseApache,
licenseLinkCCBY40: Links.LicenseLinkCCBY40,
repoLink: Links.Repo,
donationLink: Links.Donation,
isDesktop: Features.isDesktop

@ -85,7 +85,6 @@ class SettingsFileView extends View {
storageProviders.push({
name: prv.name,
icon: prv.icon,
iconSvg: prv.iconSvg,
own: name === fileStorage,
backup: prv.backup
});
@ -337,7 +336,7 @@ class SettingsFileView extends View {
Alerts.alert({
header: '',
body: '',
icon: storage.icon || 'files-o',
icon: storage.icon || 'file-alt-o',
buttons: [Alerts.buttons.ok, Alerts.buttons.cancel],
esc: '',
opaque: true,

@ -327,7 +327,7 @@
}
&:before {
@include position(absolute, 0 0 null null);
@include fa-icon();
@include fa-icon;
cursor: pointer;
padding: 0.3em $base-padding-h;
}

@ -36,8 +36,7 @@
outline: focused-outline();
}
}
&-i,
&-svg {
&-i {
font-size: 4em;
}
&-text {
@ -46,15 +45,8 @@
color: var(--medium-color);
}
}
&-svg {
line-height: 0;
> svg {
@include size(1em);
}
}
@include mobile() {
&-i,
&-svg {
&-i {
font-size: 4.6em;
}
&-text {
@ -62,8 +54,7 @@
}
.open__icons--lower & {
margin: 14px;
&-i,
&-svg {
&-i {
font-size: 4.2em;
margin-bottom: 0.1em;
}
@ -105,6 +96,8 @@
right: 0;
}
color: var(--muted-color);
line-height: 3em;
height: 3em;
> i {
font-size: 3em;
@include mobile {
@ -304,13 +297,8 @@
}
&-icon {
width: 2em;
&--svg > svg {
vertical-align: middle;
@include size(1em);
path {
fill: var(--muted-color);
}
}
position: relative;
top: 0.1em;
}
&-text {
flex-grow: 1;

@ -142,16 +142,12 @@
display: inline-block;
margin-right: $base-padding-h;
text-align: center;
> i,
> svg {
> i {
display: block;
font-size: 3em;
padding: $base-padding-px;
margin: auto;
}
> svg {
@include size(1em);
}
&:hover {
transition: color $base-duration $base-timing;
color: var(--medium-color);

@ -7,6 +7,7 @@
@import 'colors';
@import 'variables';
@import 'media';
@import 'icon-font';
@import 'body';
@import 'grid-settings';
@import 'buttons';

@ -85,13 +85,3 @@
}
}
}
.svg-btn {
svg path {
transition: fill $base-duration $base-timing;
fill: var(--text-color);
}
&:hover svg path {
fill: var(--medium-color);
}
}

@ -0,0 +1,181 @@
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
src: url('fontawesome.woff2') format('woff2');
}
@mixin fa-icon {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
font-style: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
display: inline-block;
}
.fa {
@include fa-icon;
}
$fa-glyph-counter: 61440; // 0xf000
@function next-fa-glyph() {
$fa-glyph-counter: $fa-glyph-counter + 1 !global;
$lo-part: $fa-glyph-counter % 256;
$hi-part: ($fa-glyph-counter - $lo-part) / 256;
$hex-num-str: str-slice(#{rgb($hi-part, $lo-part, 1)}, 2, 5);
$glyph: unquote('"\\#{$hex-num-str}"');
@return $glyph;
}
// icons listed below will be automatically added to the generated icon font, see build/loaders/fontawesome-loader.js
// if the icon has "-o" suffix, it will be used from the "regular" font, otherwise from "solid" or "brands"
// -o is used because it's similar to an empty bullet and this used to be a convention in fontawesome 4
$fa-var-square: next-fa-glyph();
$fa-var-square-o: next-fa-glyph();
$fa-var-check-square-o: next-fa-glyph();
$fa-var-bookmark: next-fa-glyph();
$fa-var-bookmark-o: next-fa-glyph();
$fa-var-eye: next-fa-glyph();
$fa-var-eye-slash: next-fa-glyph();
$fa-var-bolt: next-fa-glyph();
$fa-var-unlock: next-fa-glyph();
$fa-var-lock: next-fa-glyph();
$fa-var-check: next-fa-glyph();
$fa-var-times: next-fa-glyph();
$fa-var-folder: next-fa-glyph();
$fa-var-folder-open: next-fa-glyph();
$fa-var-ban: next-fa-glyph();
$fa-var-dropbox: next-fa-glyph();
$fa-var-google-drive: next-fa-glyph();
$fa-var-plus: next-fa-glyph();
$fa-var-ellipsis-h: next-fa-glyph();
$fa-var-ellipsis-v: next-fa-glyph();
$fa-var-magic: next-fa-glyph();
$fa-var-cog: next-fa-glyph();
$fa-var-server: next-fa-glyph();
$fa-var-file-alt: next-fa-glyph();
$fa-var-file-alt-o: next-fa-glyph();
$fa-var-file-code-o: next-fa-glyph();
$fa-var-file-pdf-o: next-fa-glyph();
$fa-var-file-archive-o: next-fa-glyph();
$fa-var-file-word-o: next-fa-glyph();
$fa-var-file-excel-o: next-fa-glyph();
$fa-var-file-powerpoint-o: next-fa-glyph();
$fa-var-file-image-o: next-fa-glyph();
$fa-var-file-video-o: next-fa-glyph();
$fa-var-file-audio-o: next-fa-glyph();
$fa-var-onedrive: next-fa-glyph();
$fa-var-question: next-fa-glyph();
$fa-var-sign-out-alt: next-fa-glyph();
$fa-var-sync-alt: next-fa-glyph();
$fa-var-level-down-alt: next-fa-glyph();
$fa-var-tag: next-fa-glyph();
$fa-var-tags: next-fa-glyph();
$fa-var-th-large: next-fa-glyph();
$fa-var-trash: next-fa-glyph();
$fa-var-trash-alt: next-fa-glyph();
$fa-var-keyboard-o: next-fa-glyph();
$fa-var-puzzle-piece: next-fa-glyph();
$fa-var-usb: next-fa-glyph();
$fa-var-info: next-fa-glyph();
$fa-var-info-circle: next-fa-glyph();
$fa-var-key: next-fa-glyph();
$fa-var-globe: next-fa-glyph();
$fa-var-exclamation-triangle: next-fa-glyph();
$fa-var-thumbtack: next-fa-glyph();
$fa-var-comments-o: next-fa-glyph();
$fa-var-edit: next-fa-glyph();
$fa-var-plug: next-fa-glyph();
$fa-var-newspaper-o: next-fa-glyph();
$fa-var-paperclip: next-fa-glyph();
$fa-var-camera: next-fa-glyph();
$fa-var-wifi: next-fa-glyph();
$fa-var-link: next-fa-glyph();
$fa-var-battery-three-quarters: next-fa-glyph();
$fa-var-bars: next-fa-glyph();
$fa-var-barcode: next-fa-glyph();
$fa-var-certificate: next-fa-glyph();
$fa-var-bullseye: next-fa-glyph();
$fa-var-desktop: next-fa-glyph();
$fa-var-envelope-o: next-fa-glyph();
$fa-var-clipboard: next-fa-glyph();
$fa-var-paper-plane-o: next-fa-glyph();
$fa-var-tv: next-fa-glyph();
$fa-var-inbox: next-fa-glyph();
$fa-var-save: next-fa-glyph();
$fa-var-hdd: next-fa-glyph();
$fa-var-dot-circle: next-fa-glyph();
$fa-var-user-lock: next-fa-glyph();
$fa-var-terminal: next-fa-glyph();
$fa-var-print: next-fa-glyph();
$fa-var-map-signs: next-fa-glyph();
$fa-var-flag-checkered: next-fa-glyph();
$fa-var-wrench: next-fa-glyph();
$fa-var-laptop: next-fa-glyph();
$fa-var-archive: next-fa-glyph();
$fa-var-credit-card: next-fa-glyph();
$fa-var-windows: next-fa-glyph();
$fa-var-clock: next-fa-glyph();
$fa-var-search: next-fa-glyph();
$fa-var-flask: next-fa-glyph();
$fa-var-gamepad: next-fa-glyph();
$fa-var-sticky-note-o: next-fa-glyph();
$fa-var-question-circle: next-fa-glyph();
$fa-var-cube: next-fa-glyph();
$fa-var-folder-o: next-fa-glyph();
$fa-var-folder-open-o: next-fa-glyph();
$fa-var-database: next-fa-glyph();
$fa-var-unlock-alt: next-fa-glyph();
$fa-var-pencil-alt: next-fa-glyph();
$fa-var-image: next-fa-glyph();
$fa-var-book: next-fa-glyph();
$fa-var-list-alt: next-fa-glyph();
$fa-var-user-secret: next-fa-glyph();
$fa-var-utensils: next-fa-glyph();
$fa-var-home: next-fa-glyph();
$fa-var-star: next-fa-glyph();
$fa-var-linux: next-fa-glyph();
$fa-var-map-pin: next-fa-glyph();
$fa-var-apple: next-fa-glyph();
$fa-var-wikipedia-w: next-fa-glyph();
$fa-var-dollar-sign: next-fa-glyph();
$fa-var-calendar: next-fa-glyph();
$fa-var-mobile: next-fa-glyph();
$fa-var-spinner: next-fa-glyph();
$fa-var-minus-circle: next-fa-glyph();
$fa-var-keeweb: next-fa-glyph();
$fa-var-copy: next-fa-glyph();
$fa-var-clone: next-fa-glyph();
$fa-var-chevron-down: next-fa-glyph();
$fa-var-chevron-left: next-fa-glyph();
$fa-var-qrcode: next-fa-glyph();
$fa-var-sort-alpha-down: next-fa-glyph();
$fa-var-sort-alpha-down-alt: next-fa-glyph();
$fa-var-sort-numeric-down: next-fa-glyph();
$fa-var-sort-numeric-down-alt: next-fa-glyph();
$fa-var-sort-amount-down: next-fa-glyph();
$fa-var-language: next-fa-glyph();
$fa-var-circle: next-fa-glyph();
$fa-var-circle-o: next-fa-glyph();
$fa-var-arrow-circle-left: next-fa-glyph();
$fa-var-cloud-download-alt: next-fa-glyph();
$fa-var-caret-down: next-fa-glyph();
$fa-var-long-arrow-alt-left: next-fa-glyph();
$fa-var-long-arrow-alt-right: next-fa-glyph();
$fa-var-github-alt: next-fa-glyph();
$fa-var-code: next-fa-glyph();
$fa-var-html5: next-fa-glyph();
$fa-var-chrome: next-fa-glyph();
$fa-var-firefox-browser: next-fa-glyph();
$fa-var-safari: next-fa-glyph();
$fa-var-opera: next-fa-glyph();
$fa-var-edge: next-fa-glyph();
$fa-var-twitter: next-fa-glyph();
$fa-var-paint-brush: next-fa-glyph();
$fa-var-at: next-fa-glyph();

@ -25,6 +25,24 @@
animation: shake 50s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s;
}
.rotate-90,
.fa.rotate-90:before {
transform: rotate(90deg);
}
.spin {
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes flip3d {
from {
transform: rotateY(0);

@ -30,11 +30,6 @@
&__icon {
font-size: $modal-icon-size;
text-align: center;
&--svg {
fill: var(--text-color);
width: 1.4em;
align-self: center;
}
}
&__header {
user-select: text;

@ -1,7 +1,6 @@
$fa-font-path: '~font-awesome/fonts';
@import '~normalize.css/normalize';
@import '~font-awesome/scss/font-awesome';
@import '~pikaday/scss/pikaday';
@import '~bourbon';

@ -1,6 +1,6 @@
<div class="details__attachment-preview">
<div class="details__subview-close">
<i class="fa fa-chevron-left details__subview-close-pre"></i>{{res 'detHistoryReturn'}} <i class="fa fa-external-link-square details__subview-close-post"></i>
<i class="fa fa-chevron-left details__subview-close-pre"></i>{{res 'detHistoryReturn'}} <i class="fa fa-arrow-circle-left details__subview-close-post"></i>
</div>
<div class="details__attachment-preview-data"></div>
<i class="fa details__attachment-preview-icon"></i>

@ -1,13 +1,13 @@
<div class="details__history">
<div class="details__subview-close">
<i class="fa fa-chevron-left details__subview-close-pre"></i>{{res 'detHistoryReturn'}} <i class="fa fa-external-link-square details__subview-close-post"></i>
<i class="fa fa-chevron-left details__subview-close-pre"></i>{{res 'detHistoryReturn'}} <i class="fa fa-arrow-circle-left details__subview-close-post"></i>
</div>
<div class="details__history-desc muted-color">{{res 'detHistoryClickPoint'}}</div>
<div class="details__history-top">
<div class="details__history-timeline">
<div class="details__history-timeline-axis"></div>
<div class="details__history-arrow-prev"><i class="fa fa-long-arrow-left"></i></div>
<div class="details__history-arrow-next"><i class="fa fa-long-arrow-right"></i></div>
<div class="details__history-arrow-prev"><i class="fa fa-long-arrow-alt-left"></i></div>
<div class="details__history-arrow-next"><i class="fa fa-long-arrow-alt-right"></i></div>
</div>
</div>
<div class="details__history-body">

@ -47,7 +47,7 @@
{{#if deleted~}}
<i class="details__buttons-trash-del fa fa-minus-circle" title="{{res 'detDelEntryPerm'}}" tip-placement="top"></i>
{{~else~}}
<i class="details__buttons-trash fa fa-trash-o" title="{{res 'detDelEntry'}}" tip-placement="top"></i>
<i class="details__buttons-trash fa fa-trash-alt" title="{{res 'detDelEntry'}}" tip-placement="top"></i>
{{~/if~}}
<div class="details__attachments">
<input type="file" class="details__attachment-input-file hide-by-pos" multiple />

@ -4,9 +4,9 @@
data-file-id="{{file.id}}" id="footer__db--{{file.id}}">
<i class="fa fa-{{#if file.active}}unlock{{else}}lock{{/if}}"></i> {{file.name}}
{{#if file.syncing~}}
<i class="fa fa-refresh fa-spin footer__db-sign"></i>
<i class="fa fa-sync-alt spin footer__db-sign"></i>
{{~else if file.syncError~}}
<i class="fa {{#if file.modified}}fa-circle{{else}}fa-circle-thin{{/if}} footer__db-sign footer__db-sign--error"
<i class="fa {{#if file.modified}}fa-circle{{else}}fa-circle-o{{/if}} footer__db-sign footer__db-sign--error"
title="{{res 'footerSyncError'}}: {{file.syncError}}"></i>
{{~else if file.modified~}}
<i class="fa fa-circle footer__db-sign"></i>
@ -25,5 +25,5 @@
{{/if}}
</div>
<div class="footer__btn footer__btn-generate" title="{{res 'footerTitleGen'}}" tip-placement="top" id="footer__btn-generate"><i class="fa fa-bolt"></i></div>
<div class="footer__btn footer__btn-lock" title="{{res 'footerTitleLock'}}" tip-placement="top-left" id="footer__btn-lock"><i class="fa fa-sign-out"></i></div>
<div class="footer__btn footer__btn-lock" title="{{res 'footerTitleLock'}}" tip-placement="top-left" id="footer__btn-lock"><i class="fa fa-sign-out-alt"></i></div>
</div>

@ -1,6 +1,6 @@
<div class="gen-ps">
<div class="back-button">
{{res 'retToApp'}} <i class="fa fa-external-link-square"></i>
{{res 'retToApp'}} <i class="fa fa-arrow-circle-left"></i>
</div>
<div class="scroller">
<div class="gen-ps__content">

@ -1,6 +1,6 @@
<div class="gen">
<div>{{res 'genLen'}}: <span class="gen__length-range-val">{{opt.length}}</span>
<i class="fa fa-refresh gen__btn-refresh gen__top-btn" title="{{res 'genNewPass'}}"></i>
<i class="fa fa-sync-alt gen__btn-refresh gen__top-btn" title="{{res 'genNewPass'}}"></i>
{{#unless showToggleButton}}
<input type="checkbox" id="gen__check-hide" class="gen__check-hide" {{#if hide}}checked{{/if}}>
<label for="gen__check-hide" class="fa gen__top-btn gen__check-hide-label"

@ -1,6 +1,6 @@
<div class="grp">
<div class="back-button">
{{res 'retToApp'}} <i class="fa fa-external-link-square"></i>
{{res 'retToApp'}} <i class="fa fa-arrow-circle-left"></i>
</div>
<div class="scroller">
<div class="grp__content">
@ -43,7 +43,7 @@
<div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
{{#unless readonly}}
<div class="grp__buttons">
<i class="grp__buttons-trash fa fa-trash-o" title="{{res 'grpTrash'}}" tip-placement="right"></i>
<i class="grp__buttons-trash fa fa-trash-alt" title="{{res 'grpTrash'}}" tip-placement="right"></i>
</div>
{{/unless}}
</div>

@ -9,7 +9,7 @@
{{#if canDownloadFavicon}}
<span class="icon-select__icon icon-select__icon-btn icon-select__icon-download"
data-val="special" data-special="download" title="{{res 'iconFavTitle'}}">
<i class="fa fa-cloud-download"></i>
<i class="fa fa-cloud-download-alt"></i>
</span>
{{/if}}
<span class="icon-select__icon icon-select__icon-btn icon-select__icon-select"

@ -1,7 +1,7 @@
<div class="import-csv">
<div class="import-csv__top">
<div class="back-button">
{{res 'retToApp'}} <i class="fa fa-external-link-square"></i>
{{res 'retToApp'}} <i class="fa fa-arrow-circle-left"></i>
</div>
<h1>{{res 'importCsvTitle'}}</h1>
</div>

@ -1,5 +1,5 @@
<div class="empty-block muted-color">
<div class="empty-block__icon"><i class="fa fa-key"></i></div>
<div class="empty-block__icon"><i class="fa fa-keeweb"></i></div>
<h1 class="empty-block__title">{{res 'listEmptyTitle'}}</h1>
<p class="empty-block__text">
{{#res 'listEmptyAdd'}} <i class="fa fa-plus"></i>{{/res}}

@ -14,7 +14,7 @@
<i class="fa fa-plus"></i>
</div>
<div class="list__search-btn-sort" title="{{res 'searchSort'}}">
<i class="fa fa-sort-alpha-asc"></i>
<i class="fa fa-sort-alpha-down"></i>
</div>
<div class="list__search-adv {{#unless advEnabled}}hide{{/unless}}">
<div class="list__search-adv-text">{{res 'searchSearchIn'}}:</div>

@ -2,8 +2,6 @@
<div class="modal__content">
{{#if icon}}
<i class="modal__icon fa fa-{{icon}}"></i>
{{else if iconSvg}}
{{{svg iconSvg 'modal__icon modal__icon--svg'}}}
{{/if}}
<div class="modal__header">{{header}}</div>
<div class="modal__body">

@ -2,7 +2,7 @@
{{#if loading}}
<div class="open-chal-resp__head">
<p>
<i class="open-chal-resp__icon fa fa-spinner fa-spin"></i> {{res 'openChalRespLoading'}}
<i class="open-chal-resp__icon fa fa-spinner spin"></i> {{res 'openChalRespLoading'}}
</p>
</div>
{{else if error}}

@ -19,7 +19,7 @@
<button class="btn-silent open__config-btn-cancel">{{res 'alertCancel'}}</button>
<button class="open__config-btn-ok">
<span class="open__config-btn-ok-text">{{res 'alertOk'}}</span>
<i class="open__config-btn-ok-spinner fa fa-spinner fa-spin"></i>
<i class="open__config-btn-ok-spinner fa fa-spinner spin"></i>
</button>
</div>
{{/if}}

@ -13,9 +13,9 @@
<div class="open__icon-text">{{res 'openNew'}}</div>
</div>
{{/if}}
<div class="open__icon open__icon-yubikey svg-btn {{#unless canOpenYubiKey}}hide{{/unless}}"
<div class="open__icon open__icon-yubikey {{#unless canOpenYubiKey}}hide{{/unless}}"
tabindex="3" id="open__icon-yubikey">
<div class="open__icon-svg">{{{svg 'usb-token'}}}</div>
<i class="fa fa-usb-token open__icon-i"></i>
<div class="open__icon-text">YubiKey</div>
</div>
{{#if canOpenDemo}}
@ -34,17 +34,16 @@
{{/if}}
{{#if showLogo}}
<div class="open__icon open__icon-more id=open__icon-more">
<i class="fa fa-key open__icon-i"></i>
<i class="fa fa-keeweb open__icon-i"></i>
<div class="open__icon-text">KeeWeb</div>
</div>
{{/if}}
</div>
<div class="open__icons open__icons--lower hide">
{{#each storageProviders as |prv|}}
<div class="open__icon open__icon-storage svg-btn" data-storage="{{prv.name}}" tabindex="{{add @index 6}}"
<div class="open__icon open__icon-storage" data-storage="{{prv.name}}" tabindex="{{add @index 6}}"
id="open__icon-storage--{{prv.name}}">
{{#if prv.icon}}<i class="fa fa-{{prv.icon}} open__icon-i"></i>{{/if}}
{{#if prv.iconSvg}}<div class="open__icon-svg">{{{svg prv.iconSvg}}}</div>{{/if}}
<div class="open__icon-text">{{res prv.name}}</div>
</div>
{{/each}}
@ -81,8 +80,8 @@
<div class="open__pass-field-wrap">
<input class="open__pass-input" name="password" type="password" size="30" autocomplete="new-password" maxlength="1024"
placeholder="{{#if canOpen}}{{res 'openClickToOpen'}}{{/if}}" readonly tabindex="23" />
<div class="open__pass-enter-btn" tabindex="24"><i class="fa fa-level-down fa-rotate-90"></i></div>
<div class="open__pass-opening-icon"><i class="fa fa-spinner fa-spin"></i></div>
<div class="open__pass-enter-btn" tabindex="24"><i class="fa fa-level-down-alt rotate-90"></i></div>
<div class="open__pass-opening-icon"><i class="fa fa-spinner spin"></i></div>
</div>
<div class="open__settings">
<div class="open__settings-key-file hide" tabindex="25">
@ -92,7 +91,7 @@
</div>
<div class="open__settings-yubikey {{#if canUseChalRespYubiKey}}open__settings-yubikey--present{{/if}} hide"
tabindex="26" title="YubiKey">
<div class="open__settings-yubikey__text">YK</div> {{{svg 'usb-token' 'open__settings-yubikey-img'}}}
<div class="open__settings-yubikey__text">YK</div> <i class="fa fa-usb-token open__settings-yubikey-img"></i>{
</div>
</div>
<div class="open__last">
@ -100,7 +99,6 @@
<div class="open__last-item" data-id="{{file.id}}" title="{{file.path}}" tabindex="{{add @index 30}}"
id="open__last-item--{{file.id}}">
{{#if file.icon}}<i class="fa fa-{{file.icon}} open__last-item-icon"></i>{{/if}}
{{#if file.iconSvg}}<div class="open__last-item-icon open__last-item-icon--svg">{{{svg file.iconSvg}}}</div>{{/if}}
<span class="open__last-item-text">{{file.name}}</span>
{{#if ../canRemoveLatest}}<i class="fa fa-times open__last-item-icon-del"></i>{{/if}}
</div>

@ -15,7 +15,8 @@
<li><a href="https://lodash.com/" target="_blank">lodash</a><span class="muted-color">, a modern JavaScript utility library delivering modularity, performance & extras</span></li>
<li><a href="https://jquery.com/" target="_blank">jQuery</a><span class="muted-color">, fast, small, and feature-rich JavaScript library</span></li>
<li><a href="https://marked.js.org/" target="_blank">marked</a><span class="muted-color">, a markdown parser and compiler</span></li>
<li><a href="https://github.com/cure53/DOMPurify" target="_blank">dompurify</a><span class="muted-color">, a DOM-only, super-fast, uber-tolerant XSS sanitizer</span></li>
<li><a href="https://github.com/cure53/DOMPurify" target="_blank">dompurify</a><span class="muted-color">, a DOM-only, super-fast, uber-tolerant XSS sanitizer, </span>
<a href="{{licenseLinkApache}}" class="muted-color" target="_blank">Apache-2.0 license</a></li>
<li><a href="https://github.com/TomFrost/node-phonetic" target="_blank">node-phonetic</a><span class="muted-color">, generates unique, pronounceable names</span></li>
</ul>
@ -30,7 +31,7 @@
<h3>UI components</h3>
<ul>
<li><a href="https://github.com/Diokuz/baron" target="_blank">baron</a><span class="muted-color">, native scroll with custom scrollbar</span></li>
<li><a href="https://dbushell.github.io/Pikaday/" target="_blank">pikaday</a><span class="muted-color">, a refreshing JavaScript datepicker</span></li>
<li><a href="https://github.com/Pikaday/Pikaday" target="_blank">pikaday</a><span class="muted-color">, a refreshing JavaScript datepicker</span></li>
</ul>
<h3>Desktop modules</h3>
@ -51,7 +52,7 @@
<h3>Styles</h3>
<ul>
<li><a href="https://sass-lang.com/" target="_blank">sass</a><span class="muted-color">, syntactically awesome stylesheets</span></li>
<li><a href="https://bourbon.io/" target="_blank">bourbon</a><span class="muted-color">, a simple and lightweight mixin library for Sass</span></li>
<li><a href="https://bourbon.io/" target="_blank">bourbon</a><span class="muted-color">, a lightweight Sass tool set</span></li>
<li><a href="https://github.com/thoughtbot/bitters" target="_blank">bitters</a><span class="muted-color">, styles, variables and structure for
Bourbon projects</span></li>
<li><a href="https://necolas.github.io/normalize.css/" target="_blank">normalize.css</a><span class="muted-color">, a modern, HTML5-ready alternative
@ -60,8 +61,8 @@
<h3>Graphics</h3>
<ul>
<li><a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">fontawesome</a><span class="muted-color">, the iconic font
and CSS toolkit</span></li>
<li><a href="https://fontawesome.com/" target="_blank">fontawesome</a><span class="muted-color">, the iconic SVG, font, and CSS toolkit, </span>
<a href="{{licenseLinkApache}}" class="muted-color" target="_blank">CC BY 4.0 License</a></li>
</ul>
<h2>{{res 'setAboutLic'}}</h2>

@ -31,9 +31,8 @@
{{/ifneq}}
{{#each storageProviders as |prv|}}
{{#unless prv.own}}
<div class="settings__file-save-to settings__file-save-to-storage svg-btn" data-storage="{{prv.name}}">
<div class="settings__file-save-to settings__file-save-to-storage" data-storage="{{prv.name}}">
{{#if prv.icon}}<i class="fa fa-{{prv.icon}}"></i>{{/if}}
{{#if prv.iconSvg}}{{{svg prv.iconSvg}}}{{/if}}
<span>{{res prv.name}}</span>
</div>
{{/unless}}
@ -59,7 +58,7 @@
<h2>{{res 'settings'}}</h2>
<label for="settings__file-master-pass" class="settings__file-master-pass-label input-base">{{res 'setFilePass'}}:
<span class="settings__file-master-pass-warning">
<i class="fa fa-warning"></i> <span id="settings__file-master-pass-warning-text">{{res 'setFilePassChange'}}</span>
<i class="fa fa-exclamation-triangle"></i> <span id="settings__file-master-pass-warning-text">{{res 'setFilePassChange'}}</span>
</span>
</label>
<div class="hide">
@ -71,7 +70,7 @@
<div id="settings__file-confirm-master-pass-group">
<label for="settings__file-confirm-master-pass" class="settings__file-master-pass-label input-base">{{res 'setFileConfirmPass'}}:
<span class="settings__file-confirm-master-pass-warning">
<i class="fa fa-warning"></i> {{res 'setFilePassNotMatch'}}
<i class="fa fa-exclamation-triangle"></i> {{res 'setFilePassNotMatch'}}
</span>
</label>
<input type="password" class="settings__input input-base" id="settings__file-confirm-master-pass" autocomplete="confirm-password" />

@ -18,9 +18,9 @@
</li>
<li>
<i class="fa fa-chrome"></i>
<i class="fa fa-firefox"></i>
<i class="fa fa-firefox-browser"></i>
<i class="fa fa-opera"></i>
<i class="fa fa-compass"></i>
<i class="fa fa-safari"></i>
<i class="fa fa-edge"></i>
<a href="{{webAppLink}}" target="_blank">{{res 'setHelpWebApp'}}</a>
</li>

@ -1,6 +1,6 @@
<div class="settings">
<div class="settings__back-button">
<i class="fa fa-chevron-left settings__back-button-pre"></i>{{res 'retToApp'}} <i class="fa fa-external-link-square settings__back-button-post"></i>
<i class="fa fa-chevron-left settings__back-button-pre"></i>{{res 'retToApp'}} <i class="fa fa-arrow-circle-left settings__back-button-post"></i>
</div>
<div class="scroller">
</div>

@ -15,7 +15,7 @@
{{#each files as |file|}}
{{#unless file.dir}}
<div class="open-list__file {{#unless file.kdbx}}open-list__file--another{{/unless}}" data-path="{{file.path}}">
<i class="open-list__file-icon fa fa-{{#if file.kdbx}}key{{else}}file-text-o{{/if}}"></i>
<i class="open-list__file-icon fa fa-{{#if file.kdbx}}keeweb{{else}}file-text-o{{/if}}"></i>
<span class="open-list__file-text">{{file.name}}</span>
</div>
{{/unless}}

@ -1,6 +1,6 @@
<div class="tag">
<div class="back-button">
{{res 'retToApp'}} <i class="fa fa-external-link-square"></i>
{{res 'retToApp'}} <i class="fa fa-arrow-circle-left"></i>
<