clean + dedup

capsule-prototype/css/popup.css

@@ -62,7 +62,7 @@
 	z-index: 10000000;    	
 	text-align: center;
 	display: none;
-	top: 0px;
+	top: 0;
 }
 
 #popupAlertSpace {
@@ -114,7 +114,6 @@
 	margin: 1vh 0 1vh 0;
 	line-height: 1.2em;
 	padding: 1.2em 2.4em 1.2em 2.4em;
-	padding: 1.2em 0;
 	width: 9vw;
 	border-radius: 3px;
 	border: 1px solid rgba(255,255,255,.15);
@@ -164,7 +163,6 @@
 
 .popupSettingsInput {
 	width: 23vw;
-	display: inline-block;
 	margin-bottom: 1vh;
 	font-size: .9em;
 	line-height: 1.2em;
@@ -190,9 +188,6 @@
 	font-size: 1.2em;
 }
 
-#popupSettingsCredits, #popupSettingsCreationDate {
-}
-
 #popupAlert {
 	width: 46vw;
 	background: #142E33;
@@ -211,7 +206,7 @@
 	font-weight: 200;
 }
 
-#popupAlertInput, #popupAlertTextarea {
+#popupAlertInput, #popupAlertTextarea, #popupAddLinkInput {
 	background: rgba(0, 0, 0, .05);
 	box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset;
 	border: 0;
@@ -225,10 +220,11 @@
 	font-size: 0.9em;
 	cursor: pointer;
 	padding-bottom: 0;
+}
 
+#popupAlertInput, #popupAlertTextarea {
 	line-height: 1.4em;
 	padding: 2vh 1vw;
-
 	margin: 3vh 0 1.5vh 0;
 }
 
@@ -239,18 +235,15 @@
 
 .popupAlertButton, .popupAddLinkButton, .popupSettingsButton {
 	width: 9vw;
-
 	font-weight: 400;
 	font-size: 0.7em;
 	line-height: 1.2em;
-
 	cursor: pointer;
 	text-transform: uppercase;
 	text-align: center;
 	display: inline-block;
 	border-radius: 3px;
 	padding: 1.1em 0;
-
 	color: rgba(255,255,255,.5);
 	background: rgba(255,255,255,.15);
 	box-shadow: 0 1px 3px rgba(0,0,0,.1);
@@ -269,7 +262,6 @@
 }
 
 #popupAddLink {
-
 	width: 40vw;
 	margin-top: 25vh;
 	padding: 5vh 0 6vh 0;
@@ -294,22 +286,8 @@ background: var(--rk-greyblue);
 }
 
 #popupAddLinkInput {
-	background: rgba(0,0,0,.05);
-	box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
-	border: 0;
-	border-radius: 3px;
-	color: rgba(255,255,255,.85);
-	width: 30vw;
-	display: inline-block;
-
-	font-weight: 200;
-	font-size: 0.9em;
-	cursor: pointer;
-	padding-bottom: 0;
-
 	line-height: 1.2em;
 	padding: 1.0em 1vw;
-
 	margin: 2vh 0 1.5vh 0;
 }
 
@@ -387,7 +365,7 @@ background: var(--rk-greyblue);
 	box-shadow: 0 1px 3px rgba(0,0,0,.35);
 }
 
-#closePopupEdit {
+#closePopupEdit, #closePopupMosaic {
 	width: 40px;
 	height: 40px;
 	font-weight: 200;
@@ -398,22 +376,15 @@ background: var(--rk-greyblue);
 	cursor: pointer;
 	border-radius: 3px;
 	position: fixed;
+}
+
+#closePopupEdit {
 	top: 15vh;
 	right: 25.5vw;
 	z-index: 110;
 }
 
 #closePopupMosaic {
-	width: 40px;
-	height: 40px;
-	font-weight: 200;
-	color: rgba(255,255,255,.25);
-	font-size: 30px;
-	text-align: center;
-	line-height: 40px;
-	cursor: pointer;
-	border-radius: 3px;
-	position: fixed;
 	top: 2vh;
 	right: 34vw;
 	z-index: 110;
@@ -660,39 +631,6 @@ color: rgba(255,255,255,.75);   /*#FFF; */
 	color: #fff
 }
 
-@media screen and (max-width: 1000px) {
-	#popupEdit {
-		margin-top: 5vh;
-		font-size: 2.4vw;
-	}
-	#popupLeft {
-		width: 30vw;
-		min-height: 60vh;
-		padding: 5vh 0 3vh 0;
-	}
-	#popupRight {
-		width: 56vw;
-		min-height: 60vh;
-		padding: 5vh 3vw 4vh 3vw;
-	}
-	#popupImg {
-		max-width: 25vw;
-		max-height: 25vw;
-	}
-	#closePopupEdit {
-		top: 5vh;
-		right: 4vw;
-		z-index: 110;
-	}
-	.popupRightItem {
-		width: 56vw;
-		margin-bottom: 2vh;
-		font-size: 1em;
-		line-height: 1.2em;
-	}
-}
-
-
 @media screen and (max-width: 1000px) {
 	#popupEdit {
 		margin-top: 5vh;

capsule-prototype/index.html

@@ -200,6 +200,10 @@
 		</div>
 	</div>
 
+  <div id='edit_modal' class='flex-col'>
+    <img id='annotation_img_edit' />
+  </div>
+
   <div id='left_menu' class='flex-col editmode left_menu'>
     <div class='flex-col'>
     <a id='btn_home' class='left_menu_item flex-col' href="javascript:window.app.rekall.Rekall('openUrl', 'home')"><i class='fas fa-home fa-3x left_menu_item_icn'></i>Go back to my capsules</a>