clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of github.com:clipperz/password-manager

Browse Source 
Conflicts:
	frontend/delta/scss/style/selectionPanel.scss

Reverted some settings to fix issues in the narrow view
This commit is contained in:
Giulio Cesare Solaroli 2015-02-08 11:11:06 +01:00
commit 2d4bb33be4
6 changed files with 126 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
frontend/delta/css/clipperz.css
View File

@ -1,26 +1,3 @@
/*
Copyright 2008-2013 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
@charset "UTF-8"; @charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 v2.0 | 20110126
@ -614,7 +591,7 @@ div.overlay {
.mainPage > #selectionPanel { .mainPage > #selectionPanel {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
overflow-y: auto; overflow: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
width: 300px; width: 300px;
height: 100%; height: 100%;
@ -635,9 +612,7 @@ div.overlay {
-moz-flex-direction: column; -moz-flex-direction: column;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
min-height: 100%; min-height: 100%; }
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
#selections ul.defaultSet { #selections ul.defaultSet {
-webkit-box-flex: none; -webkit-box-flex: none;
-webkit-flex: none; -webkit-flex: none;
@ -659,7 +634,8 @@ div.overlay {
-moz-flex: auto; -moz-flex: auto;
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto;
margin-left: 0px; } margin-left: 0px;
overflow: auto; }
#selections .showArchivedCards { #selections .showArchivedCards {
-webkit-box-flex: none; -webkit-box-flex: none;
-webkit-flex: none; -webkit-flex: none;
@ -685,8 +661,7 @@ div.overlay {
-moz-box-flex: 300px; -moz-box-flex: 300px;
-moz-flex: 300px 0; -moz-flex: 300px 0;
-ms-flex: 300px 0; -ms-flex: 300px 0;
flex: 300px 0; flex: 300px 0; }
height: 100%; }
#mainPanel.extra-wide .subpanel.cardContent { #mainPanel.extra-wide .subpanel.cardContent {
-webkit-box-flex: 4; -webkit-box-flex: 4;
-webkit-flex: 4; -webkit-flex: 4;
@ -761,7 +736,7 @@ div.overlay {
#extraFeaturesPanel { #extraFeaturesPanel {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
overflow-y: auto; overflow: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
width: 300px; width: 300px;
height: 100%; height: 100%;
@ -888,7 +863,7 @@ div.cardContent {
-moz-flex: 1 0; -moz-flex: 1 0;
-ms-flex: 1 0; -ms-flex: 1 0;
flex: 1 0; flex: 1 0;
overflow-y: auto; overflow: auto;
z-index: 5; z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.1); } box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.1); }
div.cardContent div.cardListColumn.column div.cardList { div.cardContent div.cardListColumn.column div.cardList {
@ -906,12 +881,22 @@ div.cardContent {
-webkit-border-radius: 50px; -webkit-border-radius: 50px;
-moz-border-radius: 50px; -moz-border-radius: 50px;
border-radius: 50px; border-radius: 50px;
box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9); background-image: -ms-radial-gradient(center, circle farthest-corner, white 0%, transparent 100%);
/* IE10 */
background-image: -moz-radial-gradient(center, circle farthest-corner, white 0%, transparent 100%);
/* Mozilla Firefox */
background-image: -o-radial-gradient(center, circle farthest-corner, white 0%, transparent 100%);
/* Opera */
background-image: -webkit-radial-gradient(center, circle farthest-corner, white 0%, transparent 100%);
/* Webkit (Chrome 11+) */
background-image: radial-gradient(center, circle farthest-corner, white 0%, transparent 100%);
/* Proposed W3C Markup */
background-image: -webkit-gradient(radial, center center, 0, center center, 495, color-stop(0, white), color-stop(1, transparent));
/* Webkit (Safari/Chrome 10) */
position: relative; position: relative;
bottom: 0px; bottom: 0px;
font-size: 75pt; font-size: 75pt;
color: #aaa; color: #aaa;
background-color: white;
width: 100px; width: 100px;
height: 100px; height: 100px;
float: right; float: right;
@ -920,7 +905,7 @@ div.cardContent {
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; } cursor: pointer; }
div.cardContent div.cardListColumn.column div.addCardButton:hover { div.cardContent div.cardListColumn.column div.addCardButton:hover {
color: #1863a1; } color: green; }
div.cardContent div.cardDetail.column { div.cardContent div.cardDetail.column {
-webkit-box-flex: 2; -webkit-box-flex: 2;
-webkit-flex: 2; -webkit-flex: 2;
@ -1002,7 +987,7 @@ div.cardContent {
-moz-flex: auto; -moz-flex: auto;
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto;
overflow-y: auto; } overflow: auto; }
#cardDetailPage > .view, #cardDetailPage > .editWrapper > .edit { #cardDetailPage > .view, #cardDetailPage > .editWrapper > .edit {
display: -webkit-box; display: -webkit-box;
@ -1058,8 +1043,7 @@ div.cardContent {
-moz-box-flex: auto; -moz-box-flex: auto;
-moz-flex: auto; -moz-flex: auto;
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto; }
overflow-y: auto; }
.cardDetailToolbar { .cardDetailToolbar {
-webkit-box-flex: none; -webkit-box-flex: none;
@ -1261,7 +1245,7 @@ div.dialogBox {
margin: 0px; } margin: 0px; }
#loginPage { #loginPage {
overflow-y: auto; overflow: scroll;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
#loginPage div.loginForm { #loginPage div.loginForm {
display: -webkit-box; display: -webkit-box;
@ -1467,7 +1451,9 @@ div.dialogBox {
#selections { #selections {
background-color: black; background-color: black;
color: white; color: white;
font-size: 18pt; } font-size: 18pt;
overflow: scroll;
-webkit-overflow-scrolling: touch; }
#selections ul.defaultSet { #selections ul.defaultSet {
font-weight: bold; font-weight: bold;
padding-top: 10px; padding-top: 10px;
@ -1508,14 +1494,19 @@ div.dialogBox {
content: "recent"; } content: "recent"; }
#selections ul.defaultSet li.untaggedCards { #selections ul.defaultSet li.untaggedCards {
padding-left: 35px; } padding-left: 35px; }
#selections .search form {
padding: 2px;
position: relative;
box-sizing: border-box;
width: 95%; }
#selections .search form input { #selections .search form input {
font-family: "clipperz-font"; font-family: "clipperz-font";
color: #999; color: #999;
font-size: 18pt; font-size: 18pt;
padding: 0px 30px; padding: 0px 30px;
margin: 0px 5px; margin: 0px 5px;
width: 290px; width: 100%;
vertical-align: middle; } box-sizing: border-box; }
#selections .search form label { #selections .search form label {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "$foo","$bar"; -webkit-font-feature-settings: "$foo","$bar";
@ -1528,9 +1519,10 @@ div.dialogBox {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-size: 18pt; font-size: 18pt;
padding-left: 5px; padding-left: 5px;
margin-left: -295px; position: absolute;
color: #666; top: 9px;
vertical-align: sub; } left: 9px;
color: #666; }
#selections .search form .searchClear { #selections .search form .searchClear {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "$foo","$bar"; -webkit-font-feature-settings: "$foo","$bar";
@ -1541,12 +1533,14 @@ div.dialogBox {
font-feature-settings: "$foo","$bar"; font-feature-settings: "$foo","$bar";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-border-radius: 4px; -webkit-border-radius: 50%;
-moz-border-radius: 4px; -moz-border-radius: 50%;
border-radius: 4px; border-radius: 50%;
background-color: #aaa; background-color: #aaa;
color: white; color: white;
margin-left: 230px; position: absolute;
right: 9px;
top: 9px;
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
font-size: 10pt; } font-size: 10pt; }
@ -1741,7 +1735,7 @@ div.cardList ul {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
background-color: white; background-color: white;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.1s ease-in-out, padding-right 0.1s ease-in-out;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
display: -webkit-box; display: -webkit-box;
@ -1756,8 +1750,9 @@ div.cardList ul {
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; } flex-direction: row; }
div.cardList ul li.selected { div.cardList ul li.selected {
margin-left: 50px; margin-left: 40px;
box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2); } padding-right: 0px;
box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); }
div.cardList ul li.archived { div.cardList ul li.archived {
background-color: #eeeeee; background-color: #eeeeee;
color: #999; } color: #999; }
@ -1787,7 +1782,7 @@ div.cardList ul {
padding-right: 8px; } padding-right: 8px; }
div.cardList.narrow { div.cardList.narrow {
overflow-y: auto; overflow: scroll;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
div.cardList.narrow.loadingCard li.selected:after { div.cardList.narrow.loadingCard li.selected:after {
color: white; color: white;
@ -2125,16 +2120,13 @@ div.dialog {
font-weight: bold; font-weight: bold;
padding-bottom: 20px; } padding-bottom: 20px; }
div.dialog div.answers div.button { div.dialog div.answers div.button {
-webkit-border-radius: 4; border: 1px solid black;
-moz-border-radius: 4;
border-radius: 4;
margin-left: 10px; margin-left: 10px;
padding: 5px 15px; padding: 5px 10px; }
background-color: #ddd; }
div.dialog div.answers div.button.isDefault { div.dialog div.answers div.button.isDefault {
font-weight: bold; font-weight: bold;
color: white; color: white;
background-color: #666; } background-color: blue; }
body { body {
font-family: "clipperz-font"; font-family: "clipperz-font";
@ -2193,5 +2185,3 @@ This configuration is now located in the first script included in the index_temp
} }
} }
*/ */
/*# sourceMappingURL=clipperz.css.map */

22
frontend/delta/scss/core/layout.scss
View File

@ -21,7 +21,6 @@
@include flexbox(); @include flexbox();
@include flex-direction(column); @include flex-direction(column);
min-height: 100%; min-height: 100%;
@include overflow-scroll;
ul.defaultSet { ul.defaultSet {
@include flex(none); @include flex(none);
@ -34,9 +33,8 @@
ul.tagList { ul.tagList {
@include flex(auto); @include flex(auto);
margin-left: 0px; margin-left: 0px;
// overflow-y: scroll;
// min-height: 100%; overflow:auto;
// @include overflow-scroll;
li { li {
// @include flexbox(); // @include flexbox();
@ -72,9 +70,8 @@
&.selection { &.selection {
@include flex($selectionPanelWidth, 0); @include flex($selectionPanelWidth, 0);
height: 100%; // height: 100%;
// overflow-y: scroll; // overflow-y: scroll;
// @include overflow-scroll;
} }
&.cardContent { &.cardContent {
@ -231,7 +228,7 @@ div.cardContent {
div.cardListColumn.column { div.cardListColumn.column {
@include flex($cardListWidth, 0); @include flex($cardListWidth, 0);
// overflow-y: scroll; // overflow-y: scroll;
overflow-y: auto; overflow:auto;
z-index: 5; z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1); box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
@ -240,6 +237,7 @@ div.cardContent {
} }
div.cardList { div.cardList {
// overflow-y: scroll;
padding-bottom: 120px; padding-bottom: 120px;
ul { ul {
@ -249,15 +247,13 @@ div.cardContent {
div.addCardButton { div.addCardButton {
@include icon-font(); @include icon-font();
@include border-radius(50px); @include border-radius(50px);
// @include radial-gradient (white, rgba(0, 0, 0, 0)); @include radial-gradient (white, rgba(0, 0, 0, 0));
box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9);
position: relative; position: relative;
bottom: 0px; bottom: 0px;
font-size: 75pt; font-size: 75pt;
// color: blue; // color: blue;
color: #aaa; color: #aaa;
background-color: white;
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -271,8 +267,7 @@ div.cardContent {
&:hover { &:hover {
// color: $clipperz-orange; // color: $clipperz-orange;
color: $clipperz-blue; color: green;
// color: green;
// color: brown; // color: brown;
}; };
} }
@ -325,7 +320,7 @@ div.cardContent {
.content { .content {
@include flex(auto); @include flex(auto);
// overflow-y: scroll; // overflow-y: scroll;
overflow-y: auto; overflow:auto;
} }
} }
} }
@ -374,7 +369,6 @@ div.cardContent {
.content { .content {
@include flex(auto); @include flex(auto);
// overflow-y: scroll; // overflow-y: scroll;
overflow-y: auto;
} }
} }
} }

3
frontend/delta/scss/core/mixin.scss
View File

@ -155,8 +155,7 @@
} }
@mixin overflow-scroll () { @mixin overflow-scroll () {
// overflow-y: scroll; overflow: scroll;
overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

10
frontend/delta/scss/style/card.scss
View File

@ -31,7 +31,8 @@ div.cardList {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
background-color: white; background-color: white;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.1s ease-in-out, padding-right 0.1s ease-in-out;
// padding-right:40px; // prevent new lines on selection
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
@ -44,8 +45,9 @@ div.cardList {
// background-color: brown; // background-color: brown;
// background-color: $clipperz-blue; // background-color: $clipperz-blue;
// color: white; // color: white;
margin-left: 50px; margin-left: 40px;
box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2); padding-right: 0px; // prevent new lines on selection
box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2);
} }
&.archived { &.archived {
@ -226,7 +228,7 @@ $cardViewBasePadding: 10px;
&:hover { &:hover {
background-color: #eee; background-color: #eee;
} }
} }
} }
} }

8
frontend/delta/scss/style/dialogBox.scss
View File

@ -14,16 +14,14 @@ div.dialog {
div.answers { div.answers {
div.button { div.button {
@include border-radius(4); border: 1px solid black;
// border: 1px solid black;
margin-left: 10px; margin-left: 10px;
padding: 5px 15px; padding: 5px 10px;
background-color: #ddd;
&.isDefault { &.isDefault {
font-weight: bold; font-weight: bold;
color: white; color: white;
background-color: #666; background-color: blue;
} }
} }
} }

27
frontend/delta/scss/style/selectionPanel.scss
View File

@ -2,7 +2,7 @@
background-color: $main-alternate-color; background-color: $main-alternate-color;
color: $main-alternate-text-color; color: $main-alternate-text-color;
font-size: 18pt; font-size: 18pt;
// @include overflow-scroll; @include overflow-scroll;
// height: 100%; // height: 100%;
$iconColumnWidth: 40px; $iconColumnWidth: 40px;
@ -43,15 +43,19 @@
.search { .search {
form { form {
padding:2px;
position:relative;
box-sizing:border-box;
width:95%;
input { input {
font-family: "clipperz-font"; font-family: "clipperz-font";
color: #999; color: #999;
font-size: 18pt; font-size: 18pt;
padding: 0px 30px; padding: 0px 30px;
margin: 0px 5px; margin: 0px 5px;
// width: $selectionPanelWidth - $iconColumnWidth - 10px; width: 100%;
width: $selectionPanelWidth - ($spacing * 2); box-sizing:border-box;
vertical-align: middle;
} }
label { label {
@ -59,17 +63,20 @@
font-size: 18pt; font-size: 18pt;
padding-left: $spacing; padding-left: $spacing;
// padding-right:5px; // padding-right:5px;
margin-left: -$selectionPanelWidth + $spacing; position:absolute;
top:9px;
left:9px;
color: #666; color: #666;
vertical-align: sub;
} }
.searchClear { .searchClear {
@include icon-font(); @include icon-font();
@include border-radius(4px); @include border-radius(50%);
background-color: #aaa; background-color: #aaa;
color: white; color: white;
margin-left: $selectionPanelWidth - $iconColumnWidth - 30px; position:absolute;
right:9px;
top:9px;
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
font-size: 10pt; font-size: 10pt;
@ -156,7 +163,7 @@
} }
} }
span.count { span.count {
background-color: gray; background-color: gray;
font-size: 10pt; font-size: 10pt;
margin-right: 12px; margin-right: 12px;
@ -166,7 +173,7 @@ span.count {
color: white; color: white;
font-weight: 300; font-weight: 300;
vertical-align: middle; vertical-align: middle;
} }
//$selectionColor: yellow; //$selectionColor: yellow;