infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

New settings page

pull/1/head
yflory 2017-07-10 18:29:23 +02:00
parent c02fa39524
commit 125018c8c3
10 changed files with 316 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
customize.dist/pages.js
View File

@ -278,10 +278,6 @@ define([
};
loadingScreen = loadingScreen; // TODO use this
Pages['/settings/'] = Pages['/settings/index.html'] = function () {
return h('div#container');
};
Pages['/user/'] = Pages['/user/index.html'] = function () {
return h('div#container');
};
@ -509,5 +505,13 @@ define([
return loadingScreen();
};
Pages['/settings/'] = Pages['/settings/index.html'] = function () {
return [
h('div#toolbar'),
h('div#container'),
loadingScreen()
];
};
return Pages;
});

21
customize.dist/src/less/cryptpad.less
View File

@ -27,6 +27,11 @@ html.cp, .cp body {
// override bootstrap colors
.btn-primary {
background-color: @cp-blue;
&:hover {
color: #fff;
background-color: #025aa5;
border-color: #01549b;
}
}
body {
@ -567,10 +572,12 @@ noscript {
/* Pin limit */
.limit-container {
display: inline-flex;
flex-flow: column-reverse;
width: 100%;
margin-top: 20px;
.cryptpad-limit-bar {
display: inline-block;
height: 26px;
width: 200px;
max-width: 40vw;
margin: 3px;
box-sizing: border-box;
@ -578,8 +585,10 @@ noscript {
background: white;
position: relative;
text-align: center;
line-height: 24px;
vertical-align: middle;
width: ~"calc(100% - 6px)";
height: 25px;
line-height: 25px;
.usage {
height: 100%;
display: inline-block;
@ -607,7 +616,11 @@ noscript {
}
}
.upgrade {
margin-left: 10px;
padding: 0;
line-height: 25px;
height: 25px;
margin: 0 3px;
border-radius: 0;
}
}

6
customize.dist/src/less/toolbar.less
View File

@ -24,6 +24,7 @@
.friendsColor { color: @toolbar-friends-bg; }
.whiteboardColor { color: @toolbar-whiteboard-bg; }
.driveColor { color: @toolbar-drive-bg; }
.settingsColor { color: @toolbar-settings-bg; }
.defaultColor { color: @toolbar-default-bg; }
.toolbar-container {
@ -261,6 +262,11 @@ body {
@color: @toolbar-friends-color;
.addToolbarColors(@color, @bgcolor);
}
&.app-settings {
@bgcolor: @toolbar-settings-bg;
@color: @toolbar-settings-color;
.addToolbarColors(@color, @bgcolor);
}
}

2
customize.dist/src/less/variables.less
View File

@ -101,6 +101,8 @@
@toolbar-friends-color: #fff;
@toolbar-default-bg: #ddd;
@toolbar-default-color: #000;
@toolbar-settings-bg: #0087ff;
@toolbar-settings-color: #fff;
@topbar-back: #fff;

9
customize.dist/template.js
View File

@ -12,7 +12,7 @@ $(function () {
var Messages = Cryptpad.Messages;
var $body = $('body');
var isMainApp = function () {
return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive)\/$/.test(location.pathname);
return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive|settings)\/$/.test(location.pathname);
};
var rightLink = function (ref, loc, txt) {
@ -160,6 +160,9 @@ $(function () {
} else if (/slide/.test(pathname)) {
$('body').append(h('body', Pages[pathname]()).innerHTML);
require([ '/slide/main.js' ], ready);
} else if (/^\/settings\//.test(pathname)) {
$('body').append(h('body', Pages[pathname]()).innerHTML);
require([ '/settings/main.js', ], ready);
}
});
@ -173,9 +176,7 @@ $(function () {
], function () {
$body.append($topbar).append($main).append($footer);
if (/^\/settings\//.test(pathname)) {
require([ '/settings/main.js', ], function () {});
} else if (/^\/profile\//.test(pathname)) {
if (/^\/profile\//.test(pathname)) {
require([ '/profile/main.js'], function () {});
} else if (/^\/user\//.test(pathname)) {
require([ '/user/main.js'], function () {});

24
customize.dist/translations/messages.fr.js
View File

@ -375,28 +375,37 @@ define(function () {
];
// Settings
out.settings_cat_account = "Compte";
out.settings_cat_drive = "CryptDrive";
out.settings_title = "Préférences";
out.settings_save = "Sauver";
out.settings_backupCategory = "Sauvegarde";
out.settings_backupTitle = "Créer ou restaurer une sauvegarde de vos données";
out.settings_backup = "Créer une sauvegarde";
out.settings_restore = "Restaurer une sauvegarde";
out.settings_resetTitle = "Vider votre drive";
out.settings_backup = "Sauvegarder";
out.settings_restore = "Restaurer";
out.settings_resetNewTitle = "Vider CryptDrive";
out.settings_resetButotn = "Supprimer";
out.settings_reset = "Supprimer tous les fichiers et dossiers de votre CryptDrive";
out.settings_resetPrompt = "Cette action va supprimer tous les pads de votre drive.<br>"+
"Êtes-vous sûr de vouloir continuer ?<br>" +
"Tapez “<em>I love CryptPad</em>” pour confirmer.";
out.settings_resetDone = "Votre drive est désormais vide!";
out.settings_resetError = "Texte de vérification incorrect. Votre CryptDrive n'a pas été modifié.";
out.settings_resetTips = "Astuces et informations dans CryptDrive";
out.settings_resetTipsAction ="Réinitialiser";
out.settings_resetTips = "Astuces";
out.settings_resetTipsButton = "Réinitialiser les astuces visibles dans CryptDrive";
out.settings_resetTipsDone = "Toutes les astuces sont de nouveau visibles.";
out.settings_importTitle = "Importer les pads récents de ce navigateur dans mon CryptDrive";
out.settings_importTitle = "Importer les pads récents de ce navigateur dans votre CryptDrive";
out.settings_import = "Importer";
out.settings_importConfirm = "Êtes-vous sûr de vouloir importer les pads récents de ce navigateur dans le CryptDrive de votre compte utilisateur ?";
out.settings_importDone = "Importation terminée";
out.settings_userFeedbackHint1 = "CryptPad peut envoyer des retours d'expérience très limités vers le serveur, de manière à nous permettre d'améliorer l'expérience des utilisateurs.";
out.settings_userFeedbackTitle = "Retour d'expérience";
out.settings_userFeedbackHint1 = "CryptPad peut envoyer des retours d'expérience très limités vers le serveur, de manière à nous permettre d'améliorer l'expérience des utilisateurs. ";
out.settings_userFeedbackHint2 = "Le contenu de vos pads et les clés de déchiffrement ne seront jamais partagés avec le serveur.";
out.settings_userFeedback = "Activer l'envoi de retours d'expérience";
@ -409,8 +418,9 @@ define(function () {
out.settings_pinningError = "Un problème est survenu";
out.settings_usageAmount = "Vos pads épinglés occupent {0} Mo";
out.settings_logoutEverywhereButton = "Se déconnecter";
out.settings_logoutEverywhereTitle = "Se déconnecter partout";
out.settings_logoutEverywhere = "Se déconnecter de toutes les autres sessions.";
out.settings_logoutEverywhere = "Se déconnecter de force de toutes les autres sessions.";
out.settings_logoutEverywhereConfirm = "Êtes-vous sûr ? Vous devrez vous reconnecter sur tous vos autres appareils.";
out.upload_serverError = "Erreur interne: impossible d'importer le fichier pour l'instant.";

20
customize.dist/translations/messages.js
View File

@ -387,28 +387,37 @@ define(function () {
out.register_alreadyRegistered = "This user already exists, do you want to log in?";
// Settings
out.settings_cat_account = "Account";
out.settings_cat_drive = "CryptDrive";
out.settings_title = "Settings";
out.settings_save = "Save";
out.settings_backupCategory = "Backup";
out.settings_backupTitle = "Backup or restore all your data";
out.settings_backup = "Backup";
out.settings_restore = "Restore";
out.settings_resetTitle = "Clean your drive";
out.settings_resetNewTitle = "Clean CryptDrive";
out.settings_resetButton = "Remove";
out.settings_reset = "Remove all the files and folders from your CryptDrive";
out.settings_resetPrompt = "This action will remove all the pads from your drive.<br>"+
"Are you sure you want to continue?<br>" +
"Type “<em>I love CryptPad</em>” to confirm.";
out.settings_resetDone = "Your drive is now empty!";
out.settings_resetError = "Incorrect verification text. Your CryptDrive has not been changed.";
out.settings_resetTips = "Tips in CryptDrive";
out.settings_resetTipsAction = "Reset";
out.settings_resetTips = "Tips";
out.settings_resetTipsButton = "Reset the available tips in CryptDrive";
out.settings_resetTipsDone = "All the tips are now visible again.";
out.settings_importTitle = "Import this browser's recent pads in my CryptDrive";
out.settings_importTitle = "Import this browser's recent pads in your CryptDrive";
out.settings_import = "Import";
out.settings_importConfirm = "Are you sure you want to import recent pads from this browser to your user account's CryptDrive?";
out.settings_importDone = "Import completed";
out.settings_userFeedbackHint1 = "CryptPad provides some very basic feedback to the server, to let us know how to improve your experience.";
out.settings_userFeedbackTitle = "Feedback";
out.settings_userFeedbackHint1 = "CryptPad provides some very basic feedback to the server, to let us know how to improve your experience. ";
out.settings_userFeedbackHint2 = "Your pad's content will never be shared with the server.";
out.settings_userFeedback = "Enable user feedback";
@ -421,8 +430,9 @@ define(function () {
out.settings_pinningError = "Something went wrong";
out.settings_usageAmount = "Your pinned pads occupy {0}MB";
out.settings_logoutEverywhereButton = "Log out";
out.settings_logoutEverywhereTitle = "Log out everywhere";
out.settings_logoutEverywhere = "Log out of all other web sessions";
out.settings_logoutEverywhere = "Force log out of all other web sessions";
out.settings_logoutEverywhereConfirm = "Are you sure? You will need to log in with all your devices.";
out.upload_serverError = "Server Error: unable to upload your file at this time.";

21
www/drive/file.less
View File

@ -317,27 +317,6 @@ span {
}
}
}
.limit-container {
display: inline-flex;
flex-flow: column-reverse;
width: 100%;
margin-top: 20px;
.upgrade {
padding: 0;
line-height: 25px;
height: 25px;
margin: 0 3px;
border-radius: 0;
}
.cryptpad-limit-bar {
width: ~"calc(100% - 6px)";
height: 25px;
line-height: 25px;
.usage {
height: 100%;
}
}
}
}
/* CONTENT */

193
www/settings/main.js
View File

@ -3,14 +3,16 @@ define([
'/common/cryptpad-common.js',
'/common/cryptget.js',
'/common/mergeDrive.js',
'/common/toolbar2.js',
'/bower_components/file-saver/FileSaver.min.js',
'/customize/header.js',
// '/customize/header.js',
'less!/customize/src/less/cryptpad.less',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'less!/customize/src/less/toolbar.less',
'less!/settings/main.less',
], function ($, Cryptpad, Crypt, Merge) {
], function ($, Cryptpad, Crypt, Merge, Toolbar) {
var saveAs = window.saveAs;
var USERNAME_KEY = 'cryptpad.username';
@ -34,6 +36,22 @@ define([
});
};
var categories = {
'account': [
'infoBlock',
'displayName',
'languageSelector',
'logoutEverywhere',
'resetTips',
'userFeedback'
],
'drive': [
'backupDrive',
'importLocalPads',
'resetDrive'
]
};
// Title block
var createTitle = function () {
return $('<h1>').text(Messages.settings_title);
@ -43,27 +61,25 @@ define([
var obj = store.proxy;
var $div = $('<div>', {'class': 'infoBlock'});
var $account = $('<div>', {'class': 'element'}).appendTo($div);
var accountName = obj.login_name || localStorage[Cryptpad.userNameKey];
var $label = $('<span>', {'class': 'label'}).text(Messages.user_accountName + ':');
var $label = $('<span>', {'class': 'label'}).text(Messages.user_accountName);
var $name = $('<span>').text(accountName || '');
if (!accountName) {
$label.text('');
$name.text(Messages.settings_anonymous);
}
$div.append($label).append($name);
$account.append($label).append($name);
var publicKey = obj.edPublic;
if (publicKey) {
var $key = $('<div>', {'class': 'element'}).appendTo($div);
var userHref = Cryptpad.getUserHrefFromKeys(accountName, publicKey);
var $pubLabel = $('<span>', {'class': 'label'})
.text(Messages.settings_publicSigningKey + ':');
.text(Messages.settings_publicSigningKey);
var $pubKey = $('<input>', {type: 'text', readonly: true})
.css({
width: '28em'
})
.val(userHref);
$div.append('<br>').append($pubLabel).append($pubKey);
$key.append($pubLabel).append($pubKey);
}
return $div;
@ -72,14 +88,14 @@ define([
// Create the block containing the display name field
var createDisplayNameInput = function (store) {
var obj = store.proxy;
var $div = $('<div>', {'class': 'displayName'});
var $div = $('<div>', {'class': 'displayName element'});
$('<label>', {'for' : 'displayName'}).text(Messages.user_displayName).appendTo($div);
$('<br>').appendTo($div);
var $inputBlock = $('<div>', {'class': 'inputBlock'}).appendTo($div);
var $input = $('<input>', {
'type': 'text',
'id': 'displayName',
'placeholder': Messages.anonymous}).appendTo($div);
var $save = $('<button>', {'class': 'btn btn-primary'}).text(Messages.settings_save).appendTo($div);
'placeholder': Messages.anonymous}).appendTo($inputBlock);
var $save = $('<button>', {'class': 'btn btn-primary'}).text(Messages.settings_save).appendTo($inputBlock);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
@ -115,11 +131,12 @@ define([
return $div;
};
var createResetTips = function () {
var $div = $('<div>', {'class': 'resetTips'});
var $div = $('<div>', {'class': 'resetTips element'});
$('<label>', {'for' : 'resetTips'}).text(Messages.settings_resetTips).appendTo($div);
$('<br>').appendTo($div);
var $button = $('<button>', {'id': 'resetTips', 'class': 'btn btn-primary'})
$('<span>', {'class': 'description'})
.text(Messages.settings_resetTipsButton).appendTo($div);
var $button = $('<button>', {'id': 'resetTips', 'class': 'btn btn-primary'})
.text(Messages.settings_resetTipsAction).appendTo($div);
$button.click(function () {
Object.keys(localStorage).forEach(function (k) {
@ -134,7 +151,7 @@ define([
};
var createBackupDrive = function (store) {
var obj = store.proxy;
var $div = $('<div>', {'class': 'backupDrive'});
var $div = $('<div>', {'class': 'backupDrive element'});
var exportFile = function () {
var sjson = JSON.stringify(obj);
@ -155,27 +172,29 @@ define([
});
};
$('<label>', {'for' : 'exportDrive'}).text(Messages.settings_backupTitle).appendTo($div);
$('<br>').appendTo($div);
$('<label>', {'for' : 'exportDrive'}).text(Messages.settings_backupCategory).appendTo($div);
$('<span>', {'class': 'description'})
.text(Messages.settings_backupTitle).appendTo($div);
/* add an export button */
var $export = Cryptpad.createButton('export', true, {}, exportFile);
$export.addClass('btn').addClass('btn-success').append(Messages.settings_backup);
$export.attr('class', 'btn btn-success').text(Messages.settings_backup);
$div.append($export);
/* add an import button */
var $import = Cryptpad.createButton('import', true, {}, importFile);
$import.addClass('btn').addClass('btn-warning').append(Messages.settings_restore);
$import.attr('class', 'btn btn-success').text(Messages.settings_restore);
$div.append($import);
return $div;
};
var createResetDrive = function (obj) {
var $div = $('<div>', {'class': 'resetDrive'});
$('<label>', {'for' : 'resetDrive'}).text(Messages.settings_resetTitle).appendTo($div);
$('<br>').appendTo($div);
var $button = $('<button>', {'id': 'resetDrive', 'class': 'btn btn-danger'})
var $div = $('<div>', {'class': 'resetDrive element'});
$('<label>', {'for' : 'resetDrive'}).text(Messages.settings_resetNewTitle).appendTo($div);
$('<span>', {'class': 'description'})
.text(Messages.settings_reset).appendTo($div);
var $button = $('<button>', {'id': 'resetDrive', 'class': 'btn btn-danger'})
.text(Messages.settings_resetButton).appendTo($div);
$button.click(function () {
Cryptpad.prompt(Messages.settings_resetPrompt, "", function (val) {
@ -192,14 +211,16 @@ define([
};
var createUserFeedbackToggle = function (obj) {
var $div = $('<div>', { 'class': 'userFeedback', });
var $label = $('<label>', { 'for': 'userFeedback'})
var $div = $('<div>', { 'class': 'userFeedback element'});
$('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
var $label = $('<label>', { 'for': 'userFeedback', 'class': 'noTitle' })
.text(Messages.settings_userFeedback);
$div.html('<hr />' + Messages.settings_userFeedbackHint1 + '<br />' +
Messages.settings_userFeedbackHint2).appendTo($div);
$('<br>').appendTo($div);
$('<span>', {'class': 'description'})
.append(Messages.settings_userFeedbackHint1)
.append(Messages.settings_userFeedbackHint2).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
@ -229,25 +250,21 @@ define([
};
var createUsageButton = function () {
var $div = $('<div>', { 'class': 'pinned-usage' })
.text(Messages.settings_usageTitle)
.append('<br>');
Cryptpad.createUsageBar(function (err, $bar) {
$div.find('.limit-container').remove();
$div.append($bar);
if (err) { return void console.error(err); }
APP.$usage.html('').append($bar);
}, true);
return $div;
};
var createLogoutEverywhere = function (obj) {
var proxy = obj.proxy;
var $div = $('<div>', { 'class': 'logoutEverywhere', });
var $div = $('<div>', { 'class': 'logoutEverywhere element'});
$('<label>', { 'for': 'logoutEverywhere'})
.text(Messages.settings_logoutEverywhereTitle).appendTo($div);
$('<br>').appendTo($div);
$('<span>', {'class': 'description'})
.text(Messages.settings_logoutEverywhere).appendTo($div);
var $button = $('<button>', { id: 'logoutEverywhere', 'class': 'btn btn-primary' })
.text(Messages.settings_logoutEverywhere)
.text(Messages.settings_logoutEverywhereButton)
.appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
@ -279,9 +296,10 @@ define([
var createImportLocalPads = function (obj) {
if (!Cryptpad.isLoggedIn()) { return; }
var $div = $('<div>', {'class': 'importLocalPads'});
$('<label>', {'for' : 'importLocalPads'}).text(Messages.settings_importTitle).appendTo($div);
$('<br>').appendTo($div);
var $div = $('<div>', {'class': 'importLocalPads element'});
$('<label>', {'for' : 'importLocalPads'}).text(Messages.settings_import).appendTo($div);
$('<span>', {'class': 'description'})
.text(Messages.settings_importTitle).appendTo($div);
var $button = $('<button>', {'id': 'importLocalPads', 'class': 'btn btn-primary'})
.text(Messages.settings_import).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
@ -304,31 +322,89 @@ define([
};
var createLanguageSelector = function () {
var $div = $('<div>', {'class': 'importLocalPads'});
var $div = $('<div>', {'class': 'languageSelector element'});
$('<label>').text(Messages.language).appendTo($div);
$('<br>').appendTo($div);
var $b = Cryptpad.createLanguageSelector().appendTo($div);
$b.find('button').addClass('btn btn-secondary');
return $div;
};
var hideCategories = function () {
APP.$rightside.find('> div').hide();
};
var showCategories = function (cat) {
hideCategories();
cat.forEach(function (c) {
APP.$rightside.find('.'+c).show();
});
};
var createLeftside = function () {
var $categories = $('<div>', {'class': 'categories'}).appendTo(APP.$leftside);
APP.$usage = $('<div>', {'class': 'usage'}).appendTo(APP.$leftside);
var active = 'account';
Object.keys(categories).forEach(function (key) {
var $category = $('<div>', {'class': 'category'}).appendTo($categories);
if (key === 'account') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
if (key === 'drive') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
if (key === active) {
$category.addClass('active');
}
$category.click(function () {
active = key;
$categories.find('.active').removeClass('active');
$category.addClass('active');
showCategories(categories[key]);
});
$category.append(Messages['settings_cat_'+key]);
});
showCategories(categories[active]);
};
var createToolbar = function () {
var displayed = ['useradmin', 'newpad', 'limit', 'upgrade'];
var configTb = {
displayed: displayed,
ifrw: window,
common: Cryptpad,
hideDisplayName: true,
$container: APP.$toolbar
};
var toolbar = APP.toolbar = Toolbar.create(configTb);
toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
};
var andThen = function (obj) {
APP.$container.append(createTitle());
APP.$container.append(createInfoBlock(obj));
APP.$container.append(createDisplayNameInput(obj));
APP.$container.append(createLanguageSelector());
APP.$leftside = $('<div>', {id: 'leftSide'}).appendTo(APP.$container);
var $rightside = APP.$rightside = $('<div>', {id: 'rightSide'}).appendTo(APP.$container);
createToolbar();
//$rightside.append(createTitle());
$rightside.append(createInfoBlock(obj));
$rightside.append(createDisplayNameInput(obj));
$rightside.append(createLanguageSelector());
if (Cryptpad.isLoggedIn()) {
APP.$container.append(createLogoutEverywhere(obj));
$rightside.append(createLogoutEverywhere(obj));
}
APP.$container.append(createResetTips());
APP.$container.append(createUsageButton(obj));
APP.$container.append(createBackupDrive(obj));
APP.$container.append(createImportLocalPads(obj));
APP.$container.append(createResetDrive(obj));
APP.$container.append(createUserFeedbackToggle(obj));
$rightside.append(createResetTips());
$rightside.append(createBackupDrive(obj));
$rightside.append(createImportLocalPads(obj));
$rightside.append(createResetDrive(obj));
$rightside.append(createUserFeedbackToggle(obj));
obj.proxy.on('change', [], refresh);
obj.proxy.on('remove', [], refresh);
createLeftside();
createUsageButton();
Cryptpad.removeLoadingScreen();
};
$(function () {
@ -342,6 +418,7 @@ define([
$main.removeClass('hidden');
APP.$container = $('#container');
APP.$toolbar = $('#toolbar');
Cryptpad.ready(function () {
//if (!Cryptpad.getUserHash()) { return redirectToMain(); }

127
www/settings/main.less
View File

@ -1,31 +1,110 @@
@import '/customize/src/less/variables.less';
@import '/customize/src/less/mixins.less';
@border: 1px solid #555;
@leftside-bg: #eee;
@leftside-color: #000;
@rightside-color: #000;
@description-color: #777;
@button-width: 400px;
@button-bg: #3066e5;
@button-alt-bg: #fff;
@button-red-bg: #e54e4e;
.cp {
input[type="text"] {
padding-left: 10px;
}
#mainBlock {
z-index: 1;
width: 1000px;
max-width: 90%;
margin: auto;
#container {
.infoBlock {
padding: 15px;
border: @border;
background: @dark-base;
.label {
#container {
font-size: 16px;
display: flex;
flex: 1;
min-height: 0;
#leftSide {
color: @leftside-color;
width: 250px;
background: @leftside-bg;
display: flex;
flex-flow: column;
.categories {
flex: 1;
.category {
.unselectable();
padding: 5px 20px;
margin: 15px 0;
cursor: pointer;
.fa {
width: 20px;
}
&:hover {
background: rgba(0,0,0,0.05);
}
&.active {
background: white;
}
}
}
}
#rightSide {
padding: 5px 20px;
color: @rightside-color;
overflow: auto;
.element {
label:not(.noTitle), .label {
display: block;
font-weight: bold;
text-decoration: underline;
margin-bottom: 0;
}
.description {
display: block;
color: @description-color;
margin-bottom: 5px;
}
margin-bottom: 20px;
}
[type="text"], button {
vertical-align: middle;
height: 40px;
box-sizing: border-box;
}
.userFeedback {
input {
vertical-align: middle;
margin-right: 5px;
}
}
.displayName {
input, button {
vertical-align: middle;
.languageSelector {
button.btn {
width: @button-width;
background-color: @button-alt-bg;
border-color: #adadad;
color: black;
&:hover {
background-color: darken(@button-alt-bg, 15%);
}
}
}
.infoBlock {
[type="text"] {
width: @button-width;
}
}
.inputBlock {
display: inline-flex;
width: @button-width;
input {
flex: 1;
border-radius: 0.25em 0 0 0.25em;
border: 1px solid #adadad;
border-right: 0px;
}
button {
border-radius: 0 0.25em 0.25em 0;
//border: 1px solid #adadad;
border-left: 0px;
}
}
.backupDrive {
@ -36,6 +115,22 @@
margin-right: 5px;
}
}
button.btn {
background-color: @button-bg;
border-color: darken(@button-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-bg, 10%);
}
&.btn-danger {
background-color: @button-red-bg;
border-color: darken(@button-red-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-red-bg, 10%);
}
}
}
&>div {
margin: 10px 0;
}