mirror of
				http://git.whoc.org.uk/git/password-manager.git
				synced 2025-10-26 01:47:35 +02:00 
			
		
		
		
	Improved the styling of some elements
This commit is contained in:
		| @@ -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; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Giulio Cesare Solaroli
					Giulio Cesare Solaroli