Portati style dal js al css, prova redefinizione colori, modifiche

grafiche

css/custom_4.2.css

@@ -0,0 +1,234 @@
+/* custom.css   */ 
+
+/* success  rgb(117, 159, 154)  #759F9A */
+
+@font-face {
+  font-family: Humanist-777;
+  src: url(../fonts/Humanist-777-Font.otf);
+}
+
+
+html,
+body {
+  height: 100%;
+  background-color: #eaeae6 !important;
+  font-family: 'Humanist-777', 'Roboto';
+}
+
+body {
+  padding-top: 63px;
+}
+
+.menuNavigazione {
+  width: 15%;
+}
+
+.minimap {
+  width: 110px;
+  height: 700px;
+}
+
+.menuRicerca {
+  width: 30%;
+}
+
+.visCanto {
+  height: 500px;
+}
+
+.visInfo {
+  height: 200px;
+}
+ 
+.navbar {
+	border-bottom-width: 2px !important;
+	border-bottom-color: #cbcbc0 !important;
+}
+
+#displaycanto {
+	display: d-flex;
+	height: 450px;
+	overflow-y: scroll;
+}
+
+.doubleborder {
+	 z-index: 90;
+	 border-bottom-width: 8px !important;
+	 border-bottom-style: double !important;
+	 border-bottom-color: #cbcbc0 !important;
+}
+
+.custom-control-input:active~.custom-control-label::before {
+  background-color: rgba(117, 159, 154, 0.5) !important;
+  border-color: rgba(117, 159, 154, 0.5) !important;
+}
+.custom-control-input:focus:not(:checked)~.custom-control-label::before {
+  border-color: rgb(117, 159, 154)  !important;
+}
+.custom-control-input:checked~.custom-control-label::before {
+  border-color: rgb(117, 159, 154) !important;
+  background-color: rgb(117, 159, 154) !important;
+}
+
+ 
+.badge-outline-info {
+	padding: .1rem .15rem;
+	margin-left: .15rem;
+	margin-right: .2rem;
+	font-weight: 300;
+	vertical-align: super;
+    color: #5f8ec2;
+    border: 1px solid #5f8ec2;
+}
+
+.lista-risultati:hover {
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.navig-canto .sel-canto {
+  line-height: 1.2em;
+}
+
+.navig-canto:hover {
+  font-weight: 800;
+  color: #5f8ec2 !important;
+  cursor: pointer;
+}
+
+.ui-icon.inline { display:inline-block; }​
+
+.ui-state-disabled-opacity-1 {
+	opacity: 1 !important;
+}
+
+.ui-state-disabled-opacity-06 {
+	opacity: 0.6 !important;
+}
+
+.ui-selectable .ui-selecting { background: #759F9A; }
+.ui-selectable .ui-selected { background: #DEE2E6; color: #759F9A !important; }
+.ui-selectable { list-style-type: none; margin: 0; padding: 0; }
+ 
+.selCantiXX {
+	border:6px solid #f8f9fa;
+	border-collapse:collapse;
+	padding:0px;
+}
+
+#queryText {
+	width: 150px;
+	border-width: 2px !important;
+}
+
+
+/*
+Minimap
+*/
+
+.minimap__container {
+	/*position: fixed;*/
+	/*top: 160px;*/
+	/*left: 600px;*/
+	min-width: 20px;
+	z-index: 100;
+}
+
+.minimap__size {
+	position: relative;
+	z-index: 5;
+}
+
+.minimap__viewer {
+	width: 70px;
+	position:absolute;
+	top: 2px;
+	left: 1px;
+	transform-origin: 0 0;
+	z-index: 100;
+	/*border: 1px solid #0000009a;
+	border: 1px solid blue;
+	border: 1px solid #007bff;	*/
+	border: 1px solid #5f8ec2;
+}
+
+.minimap__content {
+	position:absolute;
+	top: 0;	
+	left: 0;	
+	width:100%;	
+	height: 100%;	
+	z-index: 10;	
+	transform-origin: 0 0;	
+}
+
+
+/* ------- customize colors -------- */   
+
+/* https://lingtalfi.com/bootstrap4-color-generator 
+   https://colordesigner.io/gradient-generator/?mode=lch#fafa6e-2A4858
+   https://colordesigner.io/#004056-2C858D-74CEB7-C9FFD5-FFFFCB
+   https://colordesigner.io/#fab37f-f1924e-4abd8c-00968e-106e7c
+   lida3 #4abd8c
+   lida4 #00968e
+   lida5 #106e7c
+   lida8 #fab37f
+   lida9 #f1924e
+
+spinner howto:   
+  gifsicle --change-color 204,232,159 250,179,127 ajax-loader.gif > 1.gif
+  gifsicle --change-color 224,128,192 241,146,78 1.gif > 2.gif
+  gifsicle --change-color 127,127,127 0,150,142 2.gif > 3.gif
+  gifsicle --change-color 127,204,255 16,110,124 3.gif > 4.gif
+  gifsicle --change-color 224,255,128 74,189,140 4.gif > lida-loader.gif
+   
+*/
+
+
+
+/*------------------------------------
+- Elements only
+#f8f9fa! important;
+#eaeae6 !important;
+
+lida10		#dbf2e8
+lida10g		#b6daca
+lida11		#fef0e5
+lida12		#edf9f3
+
+#9f757a
+
+https://bootstrap.build/app
+lida2:
+	$primary	rgb(95, 142, 194)	#5f8ec2
+	$secondary	$gray-600
+	$success	rgb(117, 159, 154)	#759F9A
+	$info		#935fc2
+	$warning	rgb(229, 194, 105)	#E5C269
+	$danger		#9f757a
+
+	$text-muted	$gray-700
+------------------------------------*/
+
+.bg-lida10 {
+    background-color: #c8d9d7 !important;
+}
+
+.bg-lida10g {
+    background-color: #faf3e1 !important;
+}
+
+.bg-lida11 {
+    background-color: #ece3e4 !important;
+}
+
+.bg-lida12 {
+	background-color: #e3eceb !important;
+}
+
+.bg-lida-vis {
+    background-color: #f8f9fa! important;
+}
+
+
+

js/minimap.js

@@ -70,7 +70,8 @@ function showMinimap() {
 		iFrameDoc.head.appendChild(cssLinkb);
 		iFrameDoc.head.appendChild(cssLinkscroll);
 
-		$('iframe').contents().find('body').css('backgroundColor', '#f8f9fa;');
+		let bgCanto = $(".visCanto").css('background-color');
+		$('iframe').contents().find('body').css('backgroundColor', bgCanto + ';');
 
 		getDimensionsDiv();
 
@@ -86,11 +87,10 @@ function showMinimap() {
 
 		var resizableWidth = $(visCantoClass)[0].clientWidth;
 		var resizableHeight = $(visCantoClass)[0].clientHeight;
+		var resizableRatio = resizableHeight/resizableWidth;
+		var heightRatio = resizableHeight/srcCantoHeight;
 
-		var resizableRatio = resizableHeight / resizableWidth;
-		var resizableHeightRatio = resizableHeight/srcCantoHeight;
-
-		let viewerHeight = (maxHeight*resizableHeightRatio)-2; // -2 = bordi
+		let viewerHeight = (maxHeight*heightRatio)-2; // -2 = bordi
 		let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2);
 
 		realScale = (maxHeight/miniCantoHeight);