mirror of
http://git.whoc.org.uk/git/password-manager.git
synced 2024-11-13 09:39:03 +01:00
Improved the styling of some elements
This commit is contained in:
parent
e92b03d76a
commit
782d7102c9
@ -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";
|
||||
|
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -155,7 +155,8 @@
|
||||
}
|
||||
|
||||
@mixin overflow-scroll () {
|
||||
overflow: scroll;
|
||||
// overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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,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;
|
||||
|
Loading…
Reference in New Issue
Block a user