+ {{ app['phraseanet.registry'].get('GV_homeTitle') }} {{ block('title') }}
+
+
+
-
-
-
- | - {{ app['phraseanet.registry'].get('GV_homeTitle') }} - {{ block('title') }} - | -- | -
-
-
+
+
{% endblock %}
diff --git a/templates/web/developers/application.html.twig b/templates/web/developers/application.html.twig
index 8955491554..66b29e6b11 100644
--- a/templates/web/developers/application.html.twig
+++ b/templates/web/developers/application.html.twig
@@ -2,89 +2,98 @@
{% use "developers/header.html.twig" with header as parent_header %}
+{% block title %}
+ {% trans 'Client application' %}
+{% endblock %}
+
{% block head %}
{{ block('parent_header') }}
{% endblock %}
+{% set selected = "" %}
+
{% block content %}
+
+
{% block menu %}
-
+
{% endblock %}
-
-
+
+
+
+
diff --git a/templates/web/account/reset-email.html.twig b/templates/web/account/reset-email.html.twig
index 16faa6184c..a210b688ae 100644
--- a/templates/web/account/reset-email.html.twig
+++ b/templates/web/account/reset-email.html.twig
@@ -45,14 +45,16 @@ $(document).ready(function() {
{% endblock %}
+{% set selected = "" %}
+
{% block content %}
-{% if updateMsg is not none %}
-
+
-
{% block content %}{% endblock %}
- © Copyright Alchemy 2005-{{ "now"|date("Y") }}
+
+
+
+
-
-{% else %}
+ {% if updateMsg is not none %}
+ {{ updateMsg }}
- {% trans 'admin::compte-utilisateur retour a mon compte'%}
-
+
+ {% else %}
{% if noticeMsg is not none %}
{{ updateMsg }}
+ {% trans 'admin::compte-utilisateur retour a mon compte'%}
+
@@ -68,7 +70,7 @@ $(document).ready(function() {
@@ -94,14 +96,14 @@ $(document).ready(function() {
-
{{ app['authentication'].getUser().get_login() }}
+{{ app['authentication'].getUser().get_login() }}
-
+
- +
{% trans 'admin::compte-utilisateur: Pourquoi me demande-t-on mon mot de passe pour changer mon adresse email ?'%}
{% trans 'admin::compte-utilisateur: Votre adresse e-mail sera utilisee lors de la perte de votre mot de passe afin de pouvoir le reinitialiser, il est important que vous soyez la seule personne a pouvoir la changer.'%} - +
{% endif %}
{% endblock %}
diff --git a/templates/web/account/sessions.html.twig b/templates/web/account/sessions.html.twig
index a6a4b86635..ed38285ab7 100644
--- a/templates/web/account/sessions.html.twig
+++ b/templates/web/account/sessions.html.twig
@@ -1,76 +1,81 @@
{% extends 'account/base.html.twig' %}
{% block title %}
- {% trans 'Mes sessions' %}
+ {% trans 'Access history' %}
{% endblock %}
+{% set selected = "sessions" %}
+
{% block content %}
-{% trans 'admin::compte-utilisateur: Votre adresse e-mail sera utilisee lors de la perte de votre mot de passe afin de pouvoir le reinitialiser, il est important que vous soyez la seule personne a pouvoir la changer.'%} - +
-
-
-
+
| - | -- {% trans 'Date de connexion' %} - | -- {% trans 'Dernier access' %} - | -- {% trans 'IP' %} - | -- {% trans 'Browser' %} - | -- {% trans 'ecran' %} - | -- {% trans 'Session persistante' %} - | -||||||||||||||
- {% if app['session'].get('phrasea_session_id') != row.Id() %}
- 
- {% endif %}
- |
- - {{ app['date-formatter'].getDate(row.getCreated()) }} - | -- {{ app['date-formatter'].getDate(row.getUpdated()) }} - | -- {% set geoname = app['geonames'].find_geoname_from_ip(row.getIpAddress()) %} - - {% if geoname['city'] %} - {% set ip_infos = geoname['city'] ~ ' (' ~ geoname['country'] ~ ')' %} - {% elseif geoname['fips'] %} - {% set ip_infos = geoname['fips'] ~ ' (' ~ geoname['country'] ~ ')' %} - {% elseif geoname['country'] %} - {% set ip_infos = geoname['country'] %} - {% else %} - {% set ip_infos = '' %} - {% endif %} - - {{ row.getIpAddress() }} - {{ ip_infos }} - | -- {{ row.getBrowserName() }} {{ row.getBrowserVersion() }} - | -- {{ row.getScreenWidth() }} x {{ row.getScreenHeight() }} - | -- {% if row.getToken %}{{ yes }}{% endif %} - | +
| + | + {% trans 'Date de connexion' %} + | ++ {% trans 'Dernier access' %} + | ++ {% trans 'IP' %} + | ++ {% trans 'Browser' %} + | ++ {% trans 'ecran' %} + | ++ {% trans 'Session persistante' %} + |
|---|
+ {% endif %}
+
+
+
-
-
+
-
-
-
{% endblock %}
diff --git a/templates/web/developers/application_form.html.twig b/templates/web/developers/application_form.html.twig
index f6b3db5fd3..3a2db272d2 100644
--- a/templates/web/developers/application_form.html.twig
+++ b/templates/web/developers/application_form.html.twig
@@ -2,50 +2,56 @@
{% use "developers/header.html.twig" with header as parent_header %}
+{% block title %}
+ {% trans 'new client application' %}
+{% endblock %}
+
{% block head %}
{{ block('parent_header') }}
{% endblock %}
+{% set selected = "" %}
+
{# form input macro #}
-{% macro input(name, value, violations, property, type, size) %}
+{% macro input(name, value, violations, property, class='', type, size) %}
{% if violations is none %}
-
+
{% else %}
{% set hasError = "false" %}
{% for violation in violations %}
{% if violation.getPropertyPath == property and hasError == "false" %}
{% set hasError = "true" %}
-
- {% trans 'Application' %}
+ -{% trans 'Application' %}
- -
-
--
-
-
- - {{application.get_name}} - {{application.get_description }} --
-
{% trans 'settings OAuth' %}
-{% trans 'Les parametres oauth de votre application.' %}
-| Client ID | -{{application.get_client_id}} | -|
| Client Secret | -{{application.get_client_secret}} | -|
| {% trans 'URL de callback' %} | - {% if application.get_type == constant('API_OAuth2_Application::DESKTOP_TYPE') %} -- {{application.get_redirect_uri}} - | - {% else %} -{{application.get_redirect_uri}} - - - | - {%endif%} -
| Authorize endpoint | -{{app['phraseanet.registry'].get('GV_ServerName')}}api/oauthv2/authorize | -|
| Access endpoint | -{{app['phraseanet.registry'].get('GV_ServerName')}}api/oauthv2/token | -|
| {% trans 'Activer le grant_type de type password pour votre application' %} | -- |
+
+
-{{application.get_description }}
+ {% trans 'Votre token d\'access' %}
-{% trans 'Les paramétres oauth de votre application.' %}
-| - {% trans 'Token' %} - | -- - {% if not token is none %} - {{token|default('')}} - {% else %} - {% trans 'Le token n\'a pas encore ete genere' %} - {% endif %} - - | -
| - | - |
-
+
+
+
+
+
+
+
+
+
{% trans 'settings OAuth' %}
+{% trans 'Les parametres oauth de votre application.' %}
+ +| Client ID | +{{application.get_client_id()}} | +|
| Client Secret | +{{application.get_client_secret}} | +|
| {% trans 'URL de callback' %} | + {% if application.get_type == constant('API_OAuth2_Application::DESKTOP_TYPE') %} ++ {{application.get_redirect_uri}} + | + {% else %} ++ {{application.get_redirect_uri}} + + + | + {%endif%} +
| Authorize endpoint | +{{app['phraseanet.registry'].get('GV_ServerName')}}api/oauthv2/authorize | +|
| Access endpoint | +{{app['phraseanet.registry'].get('GV_ServerName')}}api/oauthv2/token | +|
| {% trans 'Activer le grant_type de type password pour votre application' %} | ++ |
{% trans 'Votre token d\'access' %}
+{% trans 'Les paramétres oauth de votre application.' %}
+ +| + {% trans 'Token' %} + | ++ + {% if not token is none %} + {{token|default('')}} + {% else %} + {% trans 'Le token n\'a pas encore ete genere' %} + {% endif %} + + + | +
{{ violation.getInvalidValue }} - {{violation.getMessage}}
+
+ {{ violation.getInvalidValue }} - {{violation.getMessage}}
{% endif %}
{% endfor %}
{% if hasError == "false" %}
-
+
{% endif %}
{% endif %}
{% endmacro %}
{# form textare macro #}
-{% macro textarea(name, value, violations,property, rows, cols) %}
+{% macro textarea(name, value, violations,property, rows, cols, class='') %}
{% if violations is none %}
-
+
{% else %}
{% set hasError = "false" %}
{% for violation in violations %}
{% if violation.getPropertyPath == property and hasError == "false" %}
{% set hasError = "true" %}
-
- {{violation.getMessage}}
+
+ {{violation.getMessage}}
{% endif %}
{% endfor %}
{% if hasError == "false" %}
-
+
{% endif %}
{% endif %}
{% endmacro %}
{% block content %}
-
-
-
-
{% endblock %}
diff --git a/templates/web/developers/applications.html.twig b/templates/web/developers/applications.html.twig
index b340d37660..19215b6591 100644
--- a/templates/web/developers/applications.html.twig
+++ b/templates/web/developers/applications.html.twig
@@ -2,61 +2,63 @@
{% use "developers/header.html.twig" with header as parent_header %}
+{% block title %}
+ {% trans 'Client applications' %}
+{% endblock %}
+
{% block head %}
{{ block('parent_header') }}
{% endblock %}
+{% set selected = "developer" %}
+
{% block content %}
-
-
-
+
{% endblock %}
diff --git a/templates/web/developers/header.html.twig b/templates/web/developers/header.html.twig
index 519ebe6d2f..7944361bbd 100644
--- a/templates/web/developers/header.html.twig
+++ b/templates/web/developers/header.html.twig
@@ -26,14 +26,6 @@
jQuery.ajax(opts);
});
- var $url_callback_event = function(event) {
- if ( event.type == "mouseover" ) {
- $(this).find(".modifier_callback").show();
- } else {
- $(this).find(".modifier_callback").hide();
- }
- };
-
var $event = function(event){
if ( event.type == "mouseover" ) {
$(this).find(".delete_app").show();
@@ -42,8 +34,6 @@
}
};
- $(".url_callback").live("mouseover mouseout", $url_callback_event);
-
$(".app-list li").live("mouseover mouseout", $event);
$(".modifier_callback").live("click", function(){
@@ -68,8 +58,6 @@
$(".url_callback_input").empty().append(callback);
else
$(".url_callback_input").empty().append(cur_value);
- $this.hide();
- $(".url_callback").live("mouseover mouseout", $url_callback_event);
}
}
$.ajax(option);
diff --git a/www/skins/account/css/.placeholder b/www/skins/account/css/.placeholder
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/www/skins/account/css/geonames.css b/www/skins/account/css/geonames.css
new file mode 100644
index 0000000000..3d9d04816e
--- /dev/null
+++ b/www/skins/account/css/geonames.css
@@ -0,0 +1,21 @@
+
+.geoname_city_finder div.box{
+ cursor:pointer;
+ text-align:left;
+ padding:3px ;
+ color:white;
+}
+
+.geoname_city_finder div.boxI{
+ background-color:#666666;
+ border:1px solid #666666;
+}
+
+.geoname_city_finder div.boxP{
+ background-color:#444444;
+ border:1px solid #444444;
+}
+
+.geoname_city_finder div.box.selected{
+ border:1px solid red;
+}
diff --git a/www/skins/account/geonames.css b/www/skins/account/geonames.css
deleted file mode 100644
index 74c4f72d21..0000000000
--- a/www/skins/account/geonames.css
+++ /dev/null
@@ -1,18 +0,0 @@
-
-.geoname_city_finder div.box{
- cursor:pointer;
- text-align:left;
- padding:3px ;
- color:white;
-}
-.geoname_city_finder div.boxI{
- background-color:#666666;
- border:1px solid #666666;
-}
-.geoname_city_finder div.boxP{
- background-color:#444444;
- border:1px solid #444444;
-}
-.geoname_city_finder div.box.selected{
- border:1px solid red;
-}
diff --git a/www/skins/account/js/geonames.js b/www/skins/account/js/geonames.js
new file mode 100644
index 0000000000..7a7e52d3ca
--- /dev/null
+++ b/www/skins/account/js/geonames.js
@@ -0,0 +1,196 @@
+
+var ajaxGeoRunning = false;
+var ajaxGeo = false;
+
+function initialize_geoname_field(box)
+{
+ $(box).bind('keyup', function(event) {
+ checkCity(event, $(this));
+ return false;
+ }).bind('keydown', function(event) {
+ goCity(event, $(this));
+ }).bind('focus', function(event) {
+ checkCity(event, $(this));
+ return false;
+ }) .bind('blur', function() {
+ var city_finder = $(this).parent().find('.geoname_city_finder');
+ if ($('div.box.selected', city_finder).length > 0)
+ {
+ selectCity($(this));
+ }
+ else
+ {
+ if ($('div.box', city_finder).length > 0)
+ {
+ $(this).val('');
+ }
+ $(this).parent().find('.geoname_city_finder').empty();
+ }
+
+ if (ajaxGeoRunning) {
+ ajaxGeo.abort();
+ }
+
+ ajaxGeoRunning = false;
+
+ return false;
+ });
+
+ $(box).attr('autocomplete', 'off').addClass('geoname_initialized');
+
+ var form_name = $(box).attr('name');
+
+ $(box).attr('name', form_name + '_geoname_name');
+
+ $('').insertAfter($(box));
+ $('').insertAfter($(box));
+
+ var city_finder = $(box).parent().find('.geoname_city_finder');
+
+ console.log($(box), city_finder);
+
+}
+
+function checkCity(event, keybox)
+{
+ var geoname_id = $(keybox).next().val();
+
+ var city_finder = $(keybox).parent().find('.geoname_city_finder');
+
+ var badCodes = [9, 16, 17, 18, 20, 27, 33, 34, 35, 36, 37, 39, 45, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123];
+
+ if ($.inArray(event.keyCode, badCodes) >= 0)
+ return false;
+
+ if (event.keyCode == 40)
+ {
+ var el = $('div.box.selected', city_finder);
+
+ el.removeClass('selected');
+
+ if (el.next(':not(.unselectable)').length == 0)
+ el = $('div.box:not(.unselectable):first', city_finder);
+ else
+
+ el = el.next(':not(.unselectable)');
+ el.addClass('selected');
+
+ city_finder.scrollTop(city_finder.scrollTop() + $(el).position().top - ((city_finder.height() - $(el).outerHeight()) / 2));
+
+ return false;
+ }
+ else
+ {
+
+ if (event.keyCode == 38)
+ {
+ el = $('div.box.selected', city_finder);
+ el.removeClass('selected');
+ if (el.prev(':not(.unselectable)').length == 0)
+ el = $('div.box:not(.unselectable):last', city_finder);
+ else
+ el = el.prev(':not(.unselectable)');
+ el.addClass('selected');
+ city_finder.scrollTop(city_finder.scrollTop() + $(el).position().top - ((city_finder.height() - $(el).outerHeight()) / 2));
+ return false;
+ }
+ else
+ {
+ if (event.keyCode == 13)
+ {
+ event.preventDefault();
+ return false;
+ }
+ else
+ {
+ $('div.box.selected', city_finder).removeClass('selected');
+ }
+ }
+ }
+
+ if ($.trim($(keybox).val()) == '')
+ {
+ $(keybox).next().val('');
+ return;
+ }
+
+ ajaxGeo = $.ajax({
+ type: "POST",
+ url: "/include/geonames.feedback.php",
+ dataType: 'html',
+ data: {
+ action: "FIND",
+ city: $(keybox).val()
+ },
+ beforeSend: function() {
+ if (ajaxGeoRunning)
+ ajaxGeo.abort();
+ ajaxGeoRunning = true;
+ city_finder.css({
+ top: ($(keybox).position().top + $(keybox).outerHeight()),
+ left: $(keybox).position().left
+ })
+ city_finder.empty().append('|
+
+
-
- Phraseanet Developer Center-{% trans 'Mes applications' %}- {% if applications|length > 0 %} -
- {% trans 'Aucune application creee.' %}
-
- {% endif %}
+ {% endif %}
|
- - - | -
+
+
+
+ {% trans 'Demarrer avec l\'API Phraseanet' %}
+
+
+ {% trans 'Decouvrez la documentation' %}
+
+
+ {% trans 'Creer une nouvelle applications' %}
+
+
+ {% trans 'Creez une application pour commencer a utiliser l\'API Phraseanet' %}
+Running
');
+ },
+ success: function(data) {
+ ajaxGeoRunning = false;
+ city_finder.empty().append(data);
+ if (geoname_id != '')
+ $('div:not(.unselectable):first', city_finder).addClass('selected');
+ else
+ {
+ var geo_el = $('#geo_' + geoname_id);
+ if (geo_el.length > 0)
+ {
+ geo_el.addClass('selected');
+ city_finder.scrollTop(city_finder.scrollTop() + geo_el.position().top - ((city_finder.height() - geo_el.outerHeight()) / 2));
+ }
+ }
+ $('div.box:not(.unselectable)', city_finder).bind('mouseover', function() {
+ $('div.selected', city_finder).removeClass('selected');
+ $(this).addClass('selected');
+ }).bind('click', function() {
+ selectCity(keybox);
+ });
+ return false;
+ }
+ , error: function() {
+ return;
+ }
+ , timeout: function() {
+ return;
+ }
+
+ });
+ return false;
+}
+
+function goCity(event, keybox)
+{
+ if (event.keyCode == 13)
+ {
+ event.preventDefault();
+ selectCity(keybox);
+ return false;
+ }
+}
+function selectCity(keybox)
+{
+ var city_finder = $(keybox).parent().find('.geoname_city_finder')
+ var val = '',
+ id = '',
+ el = $('div.selected div:first', city_finder);
+ if (el.length == 0)
+ el = false;
+ else
+ {
+ val = el.text();
+ id = $('div.selected', city_finder).attr('id').substr(4);
+ }
+ $(keybox).val(val);
+ $(keybox).next().val(id);
+ city_finder.empty();
+// $(keybox).trigger('blur');
+
+ $(keybox).parent().find('.geoname_city_finder').empty();
+}
\ No newline at end of file
diff --git a/www/skins/account/less/responsive.less b/www/skins/account/less/responsive.less
new file mode 100644
index 0000000000..c4f2ac873b
--- /dev/null
+++ b/www/skins/account/less/responsive.less
@@ -0,0 +1,2 @@
+
+@import "variables.less";
\ No newline at end of file
diff --git a/www/skins/account/less/skin.less b/www/skins/account/less/skin.less
new file mode 100644
index 0000000000..b8ea063950
--- /dev/null
+++ b/www/skins/account/less/skin.less
@@ -0,0 +1,421 @@
+/*
+ * HTML5 Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+
+/*
+ * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+ */
+
+img {
+ vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+ resize: vertical;
+}
+
+/* ==========================================================================
+ Chrome Frame prompt
+ ========================================================================== */
+
+.chromeframe {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
+}
+
+/* ==========================================================================
+ Author's custom styles
+ ========================================================================== */
+
+html,
+body {
+ background: @background;
+ color: @textColor;
+ -webkit-font-smoothing: antialiased;
+ text-shadow: 0 0 1px rgba(0,0,0,0.3);
+ cursor: default;
+ height: 100%;
+}
+
+/** Reset style */
+
+ul {
+ margin: 0;
+ padding: 0;
+}
+
+/** Button style */
+
+.btn {
+ @glow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 7px rgba(0, 0, 0, 1);
+ .glow(@glow);
+ .border-radius(@borderRadiusSmall);
+ text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+
+.btn-success {
+ .gradient (@btnSuccessBackground, 0.7);
+}
+
+.btn-info {
+ .gradient (@btnInfoBackground, 0.7);
+}
+
+.btn-success:hover {
+ .gradient (@btnSuccessBackgroundHighlight, 0.7);
+}
+
+.btn-info:hover {
+ .gradient (@btnInfoBackgroundHighlight, 0.7);
+}
+
+.btn-flat {
+ filter:progid:DXImageTransform.Microsoft.Gradient(enabled='false');
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ background-image:none;
+ border:0;
+ text-shadow: none;
+}
+
+/** Helpers style */
+
+.full-height {
+ height: 100%;
+}
+
+.full-width {
+ width: 100%;
+}
+
+.text-error {
+ color: @colorError;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}
+
+.one-line {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.no-overflow {
+ overflow: hidden;
+}
+
+.fixed-table {
+ table-layout: fixed;
+ width:100%;
+}
+
+.rounded {
+ .border-radius(@borderRadiusSmall);
+}
+
+/** Recaptcha style */
+
+#recaptcha_widget .btn-toolbar {
+ width: 300px;
+}
+
+#recaptcha_widget .btn-toolbar .btn {
+ min-width: 20%;
+}
+
+#recaptcha_widget table tr td {
+ text-align: center;
+}
+
+#recaptcha_image {
+ width: 100% !important;
+}
+
+#recaptcha_image img {
+ width: 100% !important;
+}
+
+/** Alert style */
+
+.alert {
+ padding: 0px;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.5);
+ line-height: 16px;
+ @glow: 0 1px 7px rgba(0, 0, 0, 1);
+ .glow(@glow);
+}
+
+.alert .alert-block-close {
+ width:45px;
+ text-align: center;
+ font-size:36px
+}
+
+.alert table {
+ border-collapse: separate;
+}
+
+.alert .alert-block-logo {
+ width: 45px;
+ vertical-align: top;
+ text-align: center;
+}
+
+.alert .alert-block-close a:hover {
+ text-decoration: none;
+}
+
+.alert.alert-success .alert-block-content {
+ border-right: 1px solid lighten(@successBackground, 10%);
+}
+
+.alert.alert-success .alert-block-close {
+ border-left: 1px solid darken(@successBackground, 20%);
+}
+
+.alert.alert-error .alert-block-content {
+ border-right: 1px solid lighten(@errorBackground, 10%);
+}
+
+.alert.alert-error .alert-block-close {
+ border-left: 1px solid darken(@errorBackground, 20%);
+}
+
+.alert.alert-info .alert-block-content {
+ border-right: 1px solid lighten(@infoBackground, 10%);
+}
+
+.alert.alert-info .alert-block-close {
+ border-left: 1px solid darken(@infoBackground, 20%);
+}
+
+.alert.alert-warning .alert-block-content {
+ border-right: 1px solid lighten(@warningBackground, 10%);
+}
+
+.alert.alert-warning .alert-block-close {
+ border-left: 1px solid darken(@warningBackground, 20%);
+}
+
+.alert .close {
+ position: static;
+}
+
+.alert table {
+ table-layout: fixed;
+ width: 100%;
+}
+
+.alert table td {
+ padding: 9px 5px;
+}
+
+/** app css */
+
+.help-block-error {
+ border: 1px solid @colorError;
+}
+
+.well-large {
+ padding: 20px;
+}
+
+.close {
+ color: @white;
+ opacity: 1;
+}
+
+#main-bar {
+ margin-top: 40px;
+}
+
+.brand .section-title {
+ color: @grayLight;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
+ min-height: 30px;
+}
+
+legend {
+ color: @grayLighter;
+}
+
+.footer {
+ padding: 20px 0px;
+}
+
+h1, h2, h3, h4 {
+ font-weight: 100;
+}
+
+.content{
+ min-height: 500px;
+}
+
+.url_callback_input input {
+ margin: 0;
+}
+
+/* Landscape phones and down */
+@media (max-width: 480px) {
+
+}
+
+/* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ Theses examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+
+@media print,
+ (-o-min-device-pixel-ratio: 5/4),
+ (-webkit-min-device-pixel-ratio: 1.25),
+ (min-resolution: 120dpi) {
+ /* Style adjustments for high resolution devices */
+}
+
+/* ==========================================================================
+ Print styles.
+ Inlined to avoid required HTTP connection: h5bp.com/r
+ ========================================================================== */
+
+@media print {
+ * {
+ background: transparent !important;
+ color: #000 !important; /* Black prints faster: h5bp.com/s */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+
+ /*
+ * Don't show links for images, or javascript/internal links
+ */
+
+ .ir a:after,
+ a[href^="javascript:"]:after,
+ a[href^="#"]:after {
+ content: "";
+ }
+
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+
+ thead {
+ display: table-header-group; /* h5bp.com/t */
+ }
+
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+
+ img {
+ max-width: 100% !important;
+ }
+
+ @page {
+ margin: 0.5cm;
+ }
+
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+}
diff --git a/www/skins/account/less/style.less b/www/skins/account/less/style.less
new file mode 100644
index 0000000000..204f3017a2
--- /dev/null
+++ b/www/skins/account/less/style.less
@@ -0,0 +1,60 @@
+// CSS Reset
+@import "../../../assets/bootstrap/less/reset.less";
+
+// Core variables and mixins
+@import "../../../assets/bootstrap/less/variables.less";
+@import "variables.less";
+@import "../../../assets/bootstrap/less/mixins.less";
+
+// Grid system and page structure
+@import "../../../assets/bootstrap/less/scaffolding.less";
+@import "../../../assets/bootstrap/less/grid.less";
+@import "../../../assets/bootstrap/less/layouts.less";
+
+// Base CSS
+@import "../../../assets/bootstrap/less/type.less";
+@import "../../../assets/bootstrap/less/code.less";
+@import "../../../assets/bootstrap/less/forms.less";
+@import "../../../assets/bootstrap/less/tables.less";
+
+// Components: common
+@import "../../../assets/bootstrap/less/sprites.less";
+@import "../../../assets/bootstrap/less/dropdowns.less";
+@import "../../../assets/bootstrap/less/wells.less";
+@import "../../../assets/bootstrap/less/component-animations.less";
+@import "../../../assets/bootstrap/less/close.less";
+
+// Components: Buttons & Alerts
+@import "../../../assets/bootstrap/less/buttons.less";
+@import "../../../assets/bootstrap/less/button-groups.less";
+@import "../../../assets/bootstrap/less/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
+
+// Components: Nav
+@import "../../../assets/bootstrap/less/navs.less";
+@import "../../../assets/bootstrap/less/navbar.less";
+@import "../../../assets/bootstrap/less/breadcrumbs.less";
+@import "../../../assets/bootstrap/less/pagination.less";
+@import "../../../assets/bootstrap/less/pager.less";
+
+// Components: Popovers
+@import "../../../assets/bootstrap/less/modals.less";
+@import "../../../assets/bootstrap/less/tooltip.less";
+@import "../../../assets/bootstrap/less/popovers.less";
+
+// Components: Misc
+@import "../../../assets/bootstrap/less/thumbnails.less";
+@import "../../../assets/bootstrap/less/media.less";
+@import "../../../assets/bootstrap/less/labels-badges.less";
+@import "../../../assets/bootstrap/less/progress-bars.less";
+@import "../../../assets/bootstrap/less/accordion.less";
+@import "../../../assets/bootstrap/less/carousel.less";
+@import "../../../assets/bootstrap/less/hero-unit.less";
+
+// Utility classes
+@import "../../../assets/bootstrap/less/utilities.less"; // Has to be last to override when necessary
+
+// Responsive
+@import "../../../assets/bootstrap/less/responsive.less";
+@import "responsive.less";
+
+@import "skin.less";
diff --git a/www/skins/account/less/variables.less b/www/skins/account/less/variables.less
new file mode 100644
index 0000000000..12025b894d
--- /dev/null
+++ b/www/skins/account/less/variables.less
@@ -0,0 +1,340 @@
+// Variables
+// --------------------------------------------------
+
+.glow(@glow) {
+ box-shadow: @glow;
+ -webkit-box-shadow: @glow;
+ -moz-box-shadow: @glow;
+}
+
+.gradient (@colorButton, @multiplier){
+ @colorHsl: lightness(@colorButton) * @multiplier;
+
+ background: -moz-linear-gradient(@colorButton, hsl(hue(@colorButton), saturation(@colorButton), @colorHsl)); /* FF 3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @colorButton), color-stop(100%, hsl(hue(@colorButton), saturation(@colorButton), @colorHsl))); /*Safari 4+, Chrome 2+*/
+ background: -webkit-linear-gradient(@colorButton, hsl(hue(@colorButton), saturation(@colorButton), @colorHsl)); /* Safari 5.1+, Chrome 10+ */
+ background: -o-linear-gradient(@colorButton, hsl(hue(@colorButton), saturation(@colorButton), @colorHsl)); /* Opera 11.10 */
+/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); IE6 & IE7
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; IE8+ */
+ background: linear-gradient(@colorButton, hsl(hue(@colorButton), saturation(@colorButton), @colorHsl)); /* the standard */
+}
+
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+@black: #000;
+@grayDarker: #222;
+@grayDark: #333;
+@gray: #555;
+@grayLight: #999;
+@grayLighter: #eee;
+@white: #fff;
+
+
+// Accent colors
+// -------------------------
+@blue: #049cdb;
+@blueDark: #0064cd;
+@green: #46a546;
+@red: #9d261d;
+@yellow: #ffc40d;
+@orange: #f89406;
+@pink: #c3325f;
+@purple: #7a43b6;
+
+
+// Own variables
+// ----------------------------
+
+@colorError: #af3030;
+@colorSuccess: #108946;
+@colorFacebook: #3b5a97;
+@colorGooglePlus: #ba2828;
+@colorViadeo: #242424;
+@colorTwitter: #2fa3dc;
+@colorLinkedin: #025b8e;
+@colorGithub: #908c8b;
+@backgroundSideBar: #1a1a1a;
+@background: #141414;
+@defaultFontFamily: 'tahoma', lucida grande,verdana,arial,sans-serif;
+@sideBarGlow: 0 0 15px rgba(0, 0, 0, 1);
+@dropDownLanguageGlow: 0 0 15px rgba(0, 0, 0, 1);
+@sideBarBlockBorderColorBottom: @black;
+@sideBarBlockBorderColorTop: #232222;
+@identityPhraseanetBackgroundColor: #f2f2f2;
+@identityPhraseanetColor: #323232;
+@identityPhraseanetIconColor: #b3b3b3;
+@languageCaretColor: @white;
+
+// Scaffolding
+// -------------------------
+@bodyBackground: @background;
+@textColor: @white;
+
+
+// Links
+// -------------------------
+@linkColor: #08c;
+@linkColorHover: darken(@linkColor, 15%);
+
+
+// Typography
+// -------------------------
+@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@serifFontFamily: Georgia, "Times New Roman", Times, serif;
+@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
+
+@baseFontSize: 14px;
+@baseFontFamily: @defaultFontFamily;
+@baseLineHeight: 20px;
+@altFontFamily: @serifFontFamily;
+
+@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
+@headingsFontWeight: bold; // instead of browser default, bold
+@headingsColor: inherit; // empty to use BS default, @textColor
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+@fontSizeLarge: @baseFontSize * 1.25; // ~18px
+@fontSizeSmall: @baseFontSize * 0.85; // ~12px
+@fontSizeMini: @baseFontSize * 0.75; // ~11px
+
+@paddingLarge: 11px 19px; // 44px
+@paddingSmall: 2px 10px; // 26px
+@paddingMini: 0 6px; // 22px
+
+@baseBorderRadius: 4px;
+@borderRadiusLarge: 6px;
+@borderRadiusSmall: 3px;
+
+
+// Tables
+// -------------------------
+@tableBackground: transparent; // overall background-color
+@tableBackgroundAccent: lighten(@background, 5%); // for striping
+@tableBackgroundHover: #f5f5f5; // for hover
+@tableBorder: #ddd; // table and cell border
+
+// Buttons
+// -------------------------
+@btnBackground: @white;
+@btnBackgroundHighlight: darken(@white, 10%);
+@btnBorder: #bbb;
+
+@btnPrimaryBackground: lighten(@background, 15%);
+@btnPrimaryBackgroundHighlight: darken(@background, 10%);
+
+@btnInfoBackground: #1c607f;
+@btnInfoBackgroundHighlight: darken(@btnInfoBackground, 10%);
+
+@btnSuccessBackground: #1ea062;
+@btnSuccessBackgroundHighlight: darken(@btnSuccessBackground, 10%);
+
+@btnWarningBackground: lighten(@orange, 15%);
+@btnWarningBackgroundHighlight: @orange;
+
+@btnDangerBackground: #ee5f5b;
+@btnDangerBackgroundHighlight: #bd362f;
+
+@btnInverseBackground: #444;
+@btnInverseBackgroundHighlight: @grayDarker;
+
+
+// Forms
+// -------------------------
+@inputBackground: @white;
+@inputBorder: lighten(@background, 5%);
+@inputBorderRadius: @baseBorderRadius;
+@inputDisabledBackground: @grayLighter;
+@formActionsBackground: @background;
+@inputHeight: 30px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+
+// Dropdowns
+// -------------------------
+@dropdownBackground: @backgroundSideBar;
+@dropdownBorder: rgba(0,0,0,.2);
+@dropdownDividerTop: #e5e5e5;
+@dropdownDividerBottom: @white;
+
+@dropdownLinkColor: @white;
+@dropdownLinkColorHover: @gray;
+@dropdownLinkColorActive: @white;
+
+@dropdownLinkBackgroundActive: @linkColor;
+@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+@zindexDropdown: 1000;
+@zindexPopover: 1010;
+@zindexTooltip: 1030;
+@zindexFixedNavbar: 1030;
+@zindexModalBackdrop: 1040;
+@zindexModal: 1050;
+
+
+// Sprite icons path
+// -------------------------
+@iconSpritePath: "../img/glyphicons-halflings.png";
+@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
+
+
+// Input placeholder text color
+// -------------------------
+@placeholderText: @grayLight;
+
+
+// Hr border color
+// -------------------------
+@hrBorder: @grayLighter;
+
+
+// Horizontal forms , lists
+// -------------------------
+@horizontalComponentOffset: 180px;
+
+
+// Wells
+// -------------------------
+@wellBackground: #f5f5f5;
+
+
+// Navbar
+// -------------------------
+@navbarCollapseWidth: 979px;
+@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
+
+@navbarHeight: 40px;
+@navbarBackgroundHighlight: lighten(@background, 5%);
+@navbarBackground: @background;
+@navbarBorder: darken(@navbarBackground, 12%);
+
+@navbarText: @white;
+@navbarLinkColor: @linkColor;
+@navbarLinkColorHover: @white;
+@navbarLinkColorActive: @linkColor;
+@navbarLinkBackgroundHover: @background;
+@navbarLinkBackgroundActive: lighten(@background, 15%);
+
+@navbarBrandColor: @white;
+
+// Inverted navbar
+@navbarInverseBackground: #111111;
+@navbarInverseBackgroundHighlight: #222222;
+@navbarInverseBorder: #252525;
+
+@navbarInverseText: @grayLight;
+@navbarInverseLinkColor: @grayLight;
+@navbarInverseLinkColorHover: @white;
+@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
+@navbarInverseLinkBackgroundHover: transparent;
+@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
+
+@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
+@navbarInverseSearchBackgroundFocus: @white;
+@navbarInverseSearchBorder: @navbarInverseBackground;
+@navbarInverseSearchPlaceholderColor: #ccc;
+
+@navbarInverseBrandColor: @navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+@paginationBackground: #fff;
+@paginationBorder: #ddd;
+@paginationActiveBackground: #f5f5f5;
+
+
+// Hero unit
+// -------------------------
+@heroUnitBackground: @grayLighter;
+@heroUnitHeadingColor: inherit;
+@heroUnitLeadColor: inherit;
+
+
+// Form states and alerts
+// -------------------------
+@warningText: @white;
+@warningBackground: @grayDark;
+@warningBorder: darken(spin(@warningBackground, -10), 3%);
+
+@errorText: @white;
+@errorBackground: #c9322b;
+@errorBorder: darken(spin(@errorBackground, -10), 3%);
+
+@successText: @white;
+@successBackground: #1f914f;
+@successBorder: darken(spin(@successBackground, -10), 5%);
+
+@infoText: @white;
+@infoBackground: #4889af;
+@infoBorder: darken(spin(@infoBackground, -10), 7%);
+
+
+// Tooltips and popovers
+// -------------------------
+@tooltipColor: #fff;
+@tooltipBackground: #000;
+@tooltipArrowWidth: 5px;
+@tooltipArrowColor: @tooltipBackground;
+
+@popoverBackground: #fff;
+@popoverArrowWidth: 10px;
+@popoverArrowColor: #fff;
+@popoverTitleBackground: darken(@popoverBackground, 3%);
+
+// Special enhancement for popovers
+@popoverArrowOuterWidth: @popoverArrowWidth + 1;
+@popoverArrowOuterColor: rgba(0,0,0,.25);
+
+
+
+// GRID
+// --------------------------------------------------
+
+
+// Default 940px grid
+// -------------------------
+@gridColumns: 12;
+@gridColumnWidth: 60px;
+@gridGutterWidth: 20px;
+@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// 1200px min
+@gridColumnWidth1200: 70px;
+@gridGutterWidth1200: 30px;
+@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
+
+// 768px-979px
+@gridColumnWidth768: 42px;
+@gridGutterWidth768: 20px;
+@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
+
+
+// Fluid grid
+// -------------------------
+@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
+@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
+
+// 1200px min
+@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
+@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
+
+// 768px-979px
+@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
+@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);