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 {
position: fixed;
z-index: 20;
overflow: scroll;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
width: 300px;
height: 100%;
@ -635,7 +635,9 @@ div.overlay {
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%; }
min-height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
#selections ul.defaultSet {
-webkit-box-flex: none;
-webkit-flex: none;
@ -684,7 +686,7 @@ div.overlay {
-moz-flex: 300px 0;
-ms-flex: 300px 0;
flex: 300px 0;
overflow-y: scroll; }
height: 100%; }
#mainPanel.extra-wide .subpanel.cardContent {
-webkit-box-flex: 4;
-webkit-flex: 4;
@ -759,7 +761,7 @@ div.overlay {
#extraFeaturesPanel {
position: fixed;
z-index: 20;
overflow: scroll;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
width: 300px;
height: 100%;
@ -886,11 +888,10 @@ div.cardContent {
-moz-flex: 1 0;
-ms-flex: 1 0;
flex: 1 0;
overflow-y: scroll;
overflow-y: auto;
z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.1); }
div.cardContent div.cardListColumn.column div.cardList {
overflow-y: scroll;
padding-bottom: 120px; }
div.cardContent div.cardListColumn.column div.addCardButton {
font-family: 'clipperz-icons';
@ -905,22 +906,12 @@ div.cardContent {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
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) */
box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9);
position: relative;
bottom: 0px;
font-size: 75pt;
color: #aaa;
background-color: white;
width: 100px;
height: 100px;
float: right;
@ -929,7 +920,7 @@ div.cardContent {
margin-bottom: 10px;
cursor: pointer; }
div.cardContent div.cardListColumn.column div.addCardButton:hover {
color: green; }
color: #1863a1; }
div.cardContent div.cardDetail.column {
-webkit-box-flex: 2;
-webkit-flex: 2;
@ -1011,7 +1002,7 @@ div.cardContent {
-moz-flex: auto;
-ms-flex: auto;
flex: auto;
overflow-y: scroll; }
overflow-y: auto; }
#cardDetailPage > .view, #cardDetailPage > .editWrapper > .edit {
display: -webkit-box;
@ -1068,7 +1059,7 @@ div.cardContent {
-moz-flex: auto;
-ms-flex: auto;
flex: auto;
overflow-y: scroll; }
overflow-y: auto; }
.cardDetailToolbar {
-webkit-box-flex: none;
@ -1270,7 +1261,7 @@ div.dialogBox {
margin: 0px; }
#loginPage {
overflow: scroll;
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
#loginPage div.loginForm {
display: -webkit-box;
@ -1476,9 +1467,7 @@ div.dialogBox {
#selections {
background-color: black;
color: white;
font-size: 18pt;
overflow: scroll;
-webkit-overflow-scrolling: touch; }
font-size: 18pt; }
#selections ul.defaultSet {
font-weight: bold;
padding-top: 10px;
@ -1673,12 +1662,14 @@ div.dialogBox {
div.cardList.loadingCard li.selected {
background-color: gray; }
div.cardList ul {
background-color: #e38800; }
background-color: #1863a1; }
div.cardList ul li {
cursor: pointer;
border-bottom: 1px solid #eee;
background-color: white;
transition: margin-left 0.3s ease-in-out;
white-space: pre-wrap;
word-wrap: break-word;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
@ -1777,7 +1768,7 @@ div.cardList.narrow.EXPIRED ul li:after {
#cardDetailPage .view.archived, .cardDetail .view.archived {
background-color: #eeeeee; }
#cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
background-color: #e38800;
background-color: #1863a1;
color: white; }
#cardDetailPage .view .cardDetailToolbar.narrow, .cardDetail .view .cardDetailToolbar.narrow {
font-size: 24pt; }
@ -1843,8 +1834,10 @@ div.cardList.narrow.EXPIRED ul li:after {
padding: 5px 10px;
border-bottom: 1px solid black; }
#cardDetailPage .edit .cardDetailToolbar, .cardDetail .edit .cardDetailToolbar {
background-color: #e38800;
background-color: #1863a1;
color: white; }
#cardDetailPage .edit .cardField:hover, .cardDetail .edit .cardField:hover {
background-color: #eee; }
.cardDetailToolbar.edit li {
font-weight: 100; }
@ -2055,13 +2048,16 @@ div.dialog {
font-weight: bold;
padding-bottom: 20px; }
div.dialog div.answers div.button {
border: 1px solid black;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4;
margin-left: 10px;
padding: 5px 10px; }
padding: 5px 15px;
background-color: #ddd; }
div.dialog div.answers div.button.isDefault {
font-weight: bold;
color: white;
background-color: blue; }
background-color: #666; }
body {
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 flex-direction(column);
min-height: 100%;
@include overflow-scroll;
ul.defaultSet {
@include flex(none);
@ -33,7 +34,9 @@
ul.tagList {
@include flex(auto);
margin-left: 0px;
// overflow-y: scroll;
// min-height: 100%;
// @include overflow-scroll;
li {
// @include flexbox();
@ -69,8 +72,9 @@
&.selection {
@include flex($selectionPanelWidth, 0);
// height: 100%;
overflow-y: scroll;
height: 100%;
// overflow-y: scroll;
// @include overflow-scroll;
}
&.cardContent {
@ -226,7 +230,8 @@ div.cardContent {
div.cardListColumn.column {
@include flex($cardListWidth, 0);
overflow-y: scroll;
// overflow-y: scroll;
overflow-y: auto;
z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
@ -235,7 +240,6 @@ div.cardContent {
}
div.cardList {
overflow-y: scroll;
padding-bottom: 120px;
ul {
@ -245,13 +249,15 @@ div.cardContent {
div.addCardButton {
@include icon-font();
@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;
bottom: 0px;
font-size: 75pt;
// color: blue;
color: #aaa;
background-color: white;
width: 100px;
height: 100px;
@ -265,7 +271,8 @@ div.cardContent {
&:hover {
// color: $clipperz-orange;
color: green;
color: $clipperz-blue;
// color: green;
// color: brown;
};
}
@ -317,7 +324,8 @@ div.cardContent {
.content {
@include flex(auto);
overflow-y: scroll;
// overflow-y: scroll;
overflow-y: auto;
}
}
}
@ -365,7 +373,8 @@ div.cardContent {
*/
.content {
@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 () {
overflow: scroll;
// overflow-y: scroll;
overflow-y: auto;
-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;
$faviconSize: 32px;
$padding: ($cardListHeight - $faviconSize) / 2;
$cardArchivedColor: #eee;
$cardToolbarBackgroundColor: #e38800;
//$cardToolbarBackgroundColor: $clipperz-blue;
//$cardToolbarBackgroundColor: #e38800;
$cardToolbarBackgroundColor: $clipperz-blue;
$iconMargin: 6px;
$labelColor: gray;
@ -26,6 +33,9 @@ div.cardList {
background-color: white;
transition: margin-left 0.3s ease-in-out;
white-space: pre-wrap;
word-wrap: break-word;
@include flexbox();
@include flex-direction(row);
@ -209,6 +219,12 @@ $cardViewBasePadding: 10px;
// 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.button {
border: 1px solid black;
@include border-radius(4);
// border: 1px solid black;
margin-left: 10px;
padding: 5px 10px;
padding: 5px 15px;
background-color: #ddd;
&.isDefault {
font-weight: bold;
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;
color: $main-alternate-text-color;
font-size: 18pt;
@include overflow-scroll;
// @include overflow-scroll;
// height: 100%;
$iconColumnWidth: 40px;