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

Improved the styling of some elements

Browse Source
This commit is contained in:
Giulio Cesare Solaroli 2015-02-06 16:33:38 +01:00
parent e92b03d76a
commit 782d7102c9
7 changed files with 72 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -614,7 +614,7 @@ div.overlay {
.mainPage > #selectionPanel { .mainPage > #selectionPanel {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
overflow: scroll; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
width: 300px; width: 300px;
height: 100%; height: 100%;
@ -635,7 +635,9 @@ 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;
@ -684,7 +686,7 @@ div.overlay {
-moz-flex: 300px 0; -moz-flex: 300px 0;
-ms-flex: 300px 0; -ms-flex: 300px 0;
flex: 300px 0; flex: 300px 0;
overflow-y: scroll; } 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;
@ -759,7 +761,7 @@ div.overlay {
#extraFeaturesPanel { #extraFeaturesPanel {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
overflow: scroll; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
width: 300px; width: 300px;
height: 100%; height: 100%;
@ -886,11 +888,10 @@ 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: scroll; overflow-y: 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 {
overflow-y: scroll;
padding-bottom: 120px; } padding-bottom: 120px; }
div.cardContent div.cardListColumn.column div.addCardButton { div.cardContent div.cardListColumn.column div.addCardButton {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
@ -905,22 +906,12 @@ div.cardContent {
-webkit-border-radius: 50px; -webkit-border-radius: 50px;
-moz-border-radius: 50px; -moz-border-radius: 50px;
border-radius: 50px; border-radius: 50px;
background-image: -ms-radial-gradient(center, circle farthest-corner, white 0%, transparent 100%); box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9);
/* 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;
@ -929,7 +920,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: green; } color: #1863a1; }
div.cardContent div.cardDetail.column { div.cardContent div.cardDetail.column {
-webkit-box-flex: 2; -webkit-box-flex: 2;
-webkit-flex: 2; -webkit-flex: 2;
@ -1011,7 +1002,7 @@ div.cardContent {
-moz-flex: auto; -moz-flex: auto;
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto;
overflow-y: scroll; } overflow-y: auto; }
#cardDetailPage > .view, #cardDetailPage > .editWrapper > .edit { #cardDetailPage > .view, #cardDetailPage > .editWrapper > .edit {
display: -webkit-box; display: -webkit-box;
@ -1068,7 +1059,7 @@ div.cardContent {
-moz-flex: auto; -moz-flex: auto;
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto;
overflow-y: scroll; } overflow-y: auto; }
.cardDetailToolbar { .cardDetailToolbar {
-webkit-box-flex: none; -webkit-box-flex: none;
@ -1270,7 +1261,7 @@ div.dialogBox {
margin: 0px; } margin: 0px; }
#loginPage { #loginPage {
overflow: scroll; overflow-y: auto;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
#loginPage div.loginForm { #loginPage div.loginForm {
display: -webkit-box; display: -webkit-box;
@ -1476,9 +1467,7 @@ 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;
@ -1673,12 +1662,14 @@ div.dialogBox {
div.cardList.loadingCard li.selected { div.cardList.loadingCard li.selected {
background-color: gray; } background-color: gray; }
div.cardList ul { div.cardList ul {
background-color: #e38800; } background-color: #1863a1; }
div.cardList ul li { div.cardList ul li {
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.3s ease-in-out;
white-space: pre-wrap;
word-wrap: break-word;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
@ -1777,7 +1768,7 @@ div.cardList.narrow.EXPIRED ul li:after {
#cardDetailPage .view.archived, .cardDetail .view.archived { #cardDetailPage .view.archived, .cardDetail .view.archived {
background-color: #eeeeee; } background-color: #eeeeee; }
#cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar { #cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
background-color: #e38800; background-color: #1863a1;
color: white; } color: white; }
#cardDetailPage .view .cardDetailToolbar.narrow, .cardDetail .view .cardDetailToolbar.narrow { #cardDetailPage .view .cardDetailToolbar.narrow, .cardDetail .view .cardDetailToolbar.narrow {
font-size: 24pt; } font-size: 24pt; }
@ -1843,8 +1834,10 @@ div.cardList.narrow.EXPIRED ul li:after {
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid black; } border-bottom: 1px solid black; }
#cardDetailPage .edit .cardDetailToolbar, .cardDetail .edit .cardDetailToolbar { #cardDetailPage .edit .cardDetailToolbar, .cardDetail .edit .cardDetailToolbar {
background-color: #e38800; background-color: #1863a1;
color: white; } color: white; }
#cardDetailPage .edit .cardField:hover, .cardDetail .edit .cardField:hover {
background-color: #eee; }
.cardDetailToolbar.edit li { .cardDetailToolbar.edit li {
font-weight: 100; } font-weight: 100; }
@ -2055,13 +2048,16 @@ 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 {
border: 1px solid black; -webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4;
margin-left: 10px; margin-left: 10px;
padding: 5px 10px; } padding: 5px 15px;
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: blue; } background-color: #666; }
body { body {
font-family: "clipperz-font"; font-family: "clipperz-font";

2
frontend/delta/css/clipperz.css.map
View File

File diff suppressed because one or more lines are too long

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

@ -21,6 +21,7 @@
@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);
@ -33,7 +34,9 @@
ul.tagList { ul.tagList {
@include flex(auto); @include flex(auto);
margin-left: 0px; margin-left: 0px;
// overflow-y: scroll;
// min-height: 100%;
// @include overflow-scroll;
li { li {
// @include flexbox(); // @include flexbox();
@ -69,8 +72,9 @@
&.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 {
@ -226,7 +230,8 @@ 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;
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);
@ -235,7 +240,6 @@ div.cardContent {
} }
div.cardList { div.cardList {
overflow-y: scroll;
padding-bottom: 120px; padding-bottom: 120px;
ul { ul {
@ -245,13 +249,15 @@ 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;
@ -265,7 +271,8 @@ div.cardContent {
&:hover { &:hover {
// color: $clipperz-orange; // color: $clipperz-orange;
color: green; color: $clipperz-blue;
// color: green;
// color: brown; // color: brown;
}; };
} }
@ -317,7 +324,8 @@ div.cardContent {
.content { .content {
@include flex(auto); @include flex(auto);
overflow-y: scroll; // overflow-y: scroll;
overflow-y: auto;
} }
} }
} }
@ -365,7 +373,8 @@ 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,7 +155,8 @@
} }
@mixin overflow-scroll () { @mixin overflow-scroll () {
overflow: scroll; // overflow-y: scroll;
overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

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

@ -1,9 +1,16 @@
// ARCHIVE - RESTORE
//
// background-color: #800;
// box-shadow: inset 0 2px 3px 0 rgba(0,0,0,0.3);
// color: #ccc;
$cardListHeight: 48px; $cardListHeight: 48px;
$faviconSize: 32px; $faviconSize: 32px;
$padding: ($cardListHeight - $faviconSize) / 2; $padding: ($cardListHeight - $faviconSize) / 2;
$cardArchivedColor: #eee; $cardArchivedColor: #eee;
$cardToolbarBackgroundColor: #e38800; //$cardToolbarBackgroundColor: #e38800;
//$cardToolbarBackgroundColor: $clipperz-blue; $cardToolbarBackgroundColor: $clipperz-blue;
$iconMargin: 6px; $iconMargin: 6px;
$labelColor: gray; $labelColor: gray;
@ -26,6 +33,9 @@ div.cardList {
background-color: white; background-color: white;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
white-space: pre-wrap;
word-wrap: break-word;
@include flexbox(); @include flexbox();
@include flex-direction(row); @include flex-direction(row);
@ -209,6 +219,12 @@ $cardViewBasePadding: 10px;
// box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1); // box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1);
} }
.cardField {
&:hover {
background-color: #eee;
}
}
} }
} }

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

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

2
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;