clipperz/password-manager-mirror
1
0
Fork 0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-29 18:37:35 +01:00
Code Issues Releases Wiki Activity

General improvements to the UI

Browse Source 
More work still needed, but still a meaningful step forward.
This commit is contained in:
Giulio Cesare Solaroli
2015-02-04 23:44:32 +01:00
parent 3d17482db4
commit dac835b5c6
12 changed files with 414 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/delta/scss/clipperz.scss
View File

@@ -32,6 +32,11 @@ body:after {
input {
font-family: "clipperz-font";
}
textarea {
font-family: "clipperz-font";
}
@import "core/sizes";
//@import "sizes/narrow";

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

@@ -228,6 +228,9 @@ div.cardContent {
@include flex($cardListWidth, 0);
overflow-y: scroll;
z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
div.cardToolbar.narrow {
}
@@ -247,7 +250,8 @@ div.cardContent {
position: relative;
bottom: 0px;
font-size: 75pt;
color: blue;
// color: blue;
color: #aaa;
width: 100px;
height: 100px;
@@ -258,6 +262,12 @@ div.cardContent {
margin-bottom: 10px;
cursor: pointer;
&:hover {
// color: $clipperz-orange;
color: green;
// color: brown;
};
}
}
@@ -284,6 +294,10 @@ div.cardContent {
background-color: white;
}
}
.mask {
background-color: rgba(255, 255, 255, 0.8);
}
}
& > div.view /*, & > div.editWrapper > div.edit */ {

2
frontend/delta/scss/core/tagEditor.scss
View File

@@ -1,7 +1,7 @@
.tagEditor {
&.readWrite {
border: 1px solid red;
// border: 1px solid red;
}
ul {

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

@@ -1,8 +1,11 @@
$cardListHeight: 48px;
$faviconSize: 32px;
$padding: ($cardListHeight - $faviconSize) / 2;
$cardArchivedColor: #ccc;
$cardToolbarBackgroundColor: brown;
$cardArchivedColor: #eee;
$cardToolbarBackgroundColor: #e38800;
//$cardToolbarBackgroundColor: $clipperz-blue;
$iconMargin: 6px;
$labelColor: gray;
div.cardList {
// background-color: $yellow;
@@ -14,21 +17,32 @@ div.cardList {
}
ul {
background-color: #e38800;
li {
cursor: pointer;
border-bottom: 1px solid #eee;
background-color: white;
transition: margin-left 0.3s ease-in-out;
@include flexbox();
@include flex-direction(row);
&.selected {
background-color: yellow;
// background-color: yellow;
// background-color: brown;
// background-color: $clipperz-blue;
// color: white;
margin-left: 50px;
box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2);
}
&.archived {
// background-color: pink;
background-color: $cardArchivedColor;
color: #999;
}
.favicon {
@@ -187,12 +201,13 @@ $cardViewBasePadding: 10px;
}
.edit {
// box-shadow: inset 2px 0 6px 0 rgba(0,0,0, 0.1);
.cardDetailToolbar {
// background-color: purple;
background-color: $cardToolbarBackgroundColor;
color: white;
// @include icon-font();
// font-size: 20pt;
// box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1);
}
}
}
@@ -244,7 +259,7 @@ $cardViewBasePadding: 10px;
@include user-select(text);
font-size: 24pt;
width: 100%;
// width: 100%;
padding: $cardViewBasePadding;
// height: 52px;
// line-height: 32px;
@@ -252,20 +267,32 @@ $cardViewBasePadding: 10px;
}
input.cardLabel {
width: 100%;
height: 52px;
}
.tagEditor {
padding: $cardViewBasePadding;
// background-color: cyan;
}
.cardNotes {
padding: $cardViewBasePadding;
width: 100%;
border: 0px;
font-size: 10pt;
font-style: italic;
white-space: pre-wrap;
word-wrap: break-word;
// background-color: gold;
}
.dropArea {
border: 3px dashed red;
// border: 3px dashed red;
background-color: #ccc;
width: 100%;
height: 40px;
}
@@ -273,6 +300,8 @@ $cardViewBasePadding: 10px;
.cardField {
@include flexbox;
@include flex-direction(row);
background-color: rgba(255, 255, 255, 0.75);
// border-bottom: 1px solid #eee;
// background-color: lightgreen;
@@ -280,53 +309,110 @@ $cardViewBasePadding: 10px;
// border: 4px dotted red;
display: none;
}
.fieldEditAction {
@include flex(none);
width: 32px;
// background-color: pink;
// @include flexbox;
// @include flex-direction(column);
.removeField {
@include align-self(flex-start);
@include icon-font();
display: block;
margin: $iconMargin;
cursor: pointer;
color: #ccc;
font-size: 20pt;
&:hover {
color: rgb(155, 0, 0);
};
}
.toggleLock {
@include align-self(flex-end);
@include icon-font();
display: block;
margin: $iconMargin;
margin-left: $iconMargin * 2;
cursor: pointer;
color: #ccc;
font-size: 20pt;
&:hover {
color: #888;
};
}
}
.fieldValues {
@include flex(1);
padding: $cardViewBasePadding;
.fieldLabel {
color: gray;
color: $labelColor;
border-bottom: 1px dotted #ddd;
padding-bottom: 4px;
margin-bottom: 4px;
input {
font-size: 12pt;
color: $labelColor;
border: 0px;
width: 100%;
}
}
.fieldValue {
font-size: 18pt;
line-height: 28px;
@include user-select(text);
white-space: pre-wrap;
word-wrap: break-word;
border: 0px;
width: 100%;
&.hidden {
font-family: clipperz-password;
font-size: 23pt;
}
}
.removeField {
@include icon-font();
cursor: pointer;
color: gray;
font-size: 20pt;
&:hover {
color: red;
};
}
}
.fieldAction {
@include flex(none);
@include align-self(center);
// @include align-self(center);
@include align-self(flex-start);
}
.action {
width: 32px;
height: 32px;
@include icon-font();
font-size: 20pt;
color: #aaa;
// width: 32px;
width: 20px;
// height: 32px;
height: 20px;
// font-size: 20pt;
font-size: 15pt;
margin: $iconMargin;
}
}
.newCardField {
@include icon-font();
margin: $iconMargin;
cursor: pointer;
color: gray;
color: #ccc;
font-size: 20pt;
&:hover {

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

@@ -21,6 +21,10 @@
&.recentCards:before {
content: "recent";
}
&.untaggedCards {
padding-left: 70px;
}
}
}
@@ -125,7 +129,9 @@
}
}
$selectionColor: yellow;
//$selectionColor: yellow;
$selectionColor: $clipperz-orange;
#selections.ALL {
li.allCards {