Mercurial > hg > digilib

changeset 1566:a0dcfe71b999

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
reverted last change to css; add html/css version with dark color scheme
author hertzhaft
date Fri, 04 Nov 2016 01:01:16 +0100
parents 52b494fe393f
children 54d53b949bd2
files webapp/src/main/webapp/jquery/digilib-dark.html webapp/src/main/webapp/jquery/jquery.digilib-dark.css webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.measure.css
diffstat 4 files changed, 676 insertions(+), 121 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/digilib-dark.html	Fri Nov 04 01:01:16 2016 +0100
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="description" content="Image Viewer, Bibliotheca Hertziana">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="author" content="Robert Casties (MPIWG Berlin)">
+    <meta name="author" content="Martin Raspe (Bibliotheca Hertziana, Rom)">
+    <meta name="copyright" content="2016 by MPI für Wissenschaftsgeschichte, Berlin/Bibliotheca Hertziana, Rom">
+    <meta name="robots" content="noindex,nofollow">
+
+    <title>Digilib</title>
+
+    <script type="text/javascript" src="jquery.js"></script>
+    <script type="text/javascript" src="jquery.cookie.js"></script>
+    <script type="text/javascript" src="jquery.digilib.js"></script>
+    <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
+    <script type="text/javascript" src="jquery.range.js"></script>
+    <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
+    <script type="text/javascript" src="jquery.digilib.dialogs.js"></script>
+    <script type="text/javascript" src="jquery.digilib.sliders.js"></script>
+    <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
+    <script type="text/javascript" src="jquery.digilib.marks.js"></script>
+    <script type="text/javascript" src="jquery.digilib.regions.js"></script>
+    <link rel="stylesheet" type="text/css" href="jquery.digilib-dark.css" />
+    <link rel="stylesheet" type="text/css" href="jquery.digilib.buttons-full-32-sprite.css" />
+
+    <script type="text/javascript">
+        $(document).ready(function(){
+            var $div = $('div#digilib');
+            var opts = {
+                interactionMode: 'fullscreen',
+                showRegionNumbers: true,
+                showZoomInfo: true,
+                previewImgWidth: 4096,
+                previewImgHeight: 2048,
+                maxBgSize: 100000
+                };
+            $div.digilib(opts);
+        });
+    </script>
+  </head>
+
+  <body>
+    <div id="digilib">
+      <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p>
+      <img src="http://digilib.sourceforge.net/images/digilib-logo-big.png" />
+    </div>
+  </body>
+</html>
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/jquery.digilib-dark.css	Fri Nov 04 01:01:16 2016 +0100
@@ -0,0 +1,514 @@
+/* 
+ * CSS style file for jQuery digilib
+ *
+ * Martin Raspe, Robert Casties, 2016
+ */
+* {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body {
+  background-color: #303030;
+}
+
+div.dl-digilib .dl-disabled {
+    display: none;
+}
+
+div.dl-digilib,
+div.dl-digilib button,
+div.dl-digilib input {
+   font-family: Verdana, Arial, Helvetica, sans-serif;
+   font-size: 12px;
+}
+
+div.dl-digilib div.dl-scaler {
+	background-color: gray;
+	z-index: 0;
+	width: 0px;
+	height: 0px;
+}
+
+div.dl-digilib div.dl-area {
+  display: none;
+	position: absolute;
+	border: 2px solid lightgreen;
+}
+
+div.dl-digilib div.dl-areaoverlay {
+	position: absolute;
+	z-index: 100;
+	/* background-image:url('.'); */
+}
+
+div.dl-digilib div.dl-birdview {
+	border: 1px solid black;
+	z-index: 10;
+}
+
+div.dl-digilib div.dl-birdzoom {
+    position: absolute;
+    border: 2px solid lightgreen;
+    z-index: 100;
+}
+
+div.dl-digilib div.dl-mark {
+	position: absolute;
+	color: white;
+	background: url('img/mark-bg-16.png');
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	font-size: 11px;
+	height: 16px;
+	width: 16px;
+	padding-top: 1px;
+	text-align: center;
+	z-index: 10;
+}
+
+div.dl-digilib div.dl-annotationmark {
+    position: absolute;
+    color: black;
+    background: url('img/annotationmark-bg-16.png');
+    /* background-color: yellow; */
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    font-size: 11px;
+    height: 16px;
+    width: 16px;
+    padding-top: 1px;
+    text-align: center;
+    z-index: 10;
+}
+
+div.dl-digilib div.dl-annotationregion {
+    background-color: rgba(255, 255, 10, 0.3);
+    /* border: 1px solid black; */
+    padding: 2px 4px;
+    color: black;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    font-size: 11px;
+}
+div.dl-digilib div.dl-annotationregion:hover {
+    background-color: transparent;
+    border: 2px solid yellow;
+}
+    
+div.dl-digilib div.dl-about {
+	position: absolute;
+	padding: 10px;	
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
+	text-align: center;
+	display: none;
+	z-index: 100;
+}
+
+div.dl-digilib div.dl-region {
+	position: absolute;
+	border: none;
+  color: white;
+  font-size: 11px;
+	background-color: red;
+    opacity: 0.3;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+}
+
+div.dl-digilib div.dl-region a:link,
+div.dl-digilib div.dl-region a:visited {
+    color: white;
+}
+
+div.dl-digilib div.dl-region:hover {
+	background-color: transparent;
+	border: 2px solid red;
+}
+
+div.dl-digilib div.dl-regionArea {
+	background-color: red;
+	border: none;
+    opacity: 0.3;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+}
+
+div.dl-digilib div.dl-regionHTML {
+	background-color: blue;
+}
+
+div.dl-digilib div.dl-regionHTML:hover {
+	background-color: transparent;
+	border: 2px solid blue;
+}
+
+div.dl-digilib div.dl-region a.dl-regionnumber {
+    color: white;
+    text-decoration: none;
+	font-weight: bold;
+	font-size: 11px;
+	text-align: center;
+    padding: 0px 2px;
+    margin-right: 4px;
+    border: 1px solid white;
+    display: inline-block;
+}
+
+div.dl-digilib map.dl-regioncontent {
+    display: none;
+}
+
+div.dl-digilib div.dl-highlightregion {
+	background-color: transparent;
+	border: 5px solid lightgreen;
+	opacity: 0.8;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+}
+
+div.dl-digilib div.dl-findregion {
+	background-color: transparent;
+	border: 5px solid lightgreen;
+	opacity: 0.8;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+}
+
+div.dl-digilib select.dl-finddata {
+  border: 1px solid black;
+  width: 240px;
+}
+
+div.dl-digilib #dl-calibration {
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;	width: 400px;
+	display: none;
+	z-index: 100;
+	}
+
+div.dl-digilib #dl-ruler {
+	width: 100%;
+	height: 100%;
+	padding-bottom: 10px;
+	font-size: 12px;
+	text-align: center;
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
+	background: url('img/ruler-top.gif') 0px -1px repeat-x;
+	}
+
+div.dl-digilib #dl-cm {
+	padding: 5px;
+	margin-top: 10px;
+	}
+
+div.dl-digilib #dl-calibrationError {
+	color: red;
+	padding: 10px;
+	display: none;
+	}
+
+div.dl-digilib #dl-calibrationInput {
+	margin: 0px 10px;
+	}
+
+div.dl-digilib .dl-error {
+	color: red;
+	}
+
+div.dl-digilib table.dl-rgbslider td.dl-rgb {
+    width: 180px;
+    padding: 6px;
+    color: silver;
+    border: 1px solid black;
+    background-color: #303030;
+    border-radius: 5px;
+}
+
+div.dl-digilib div.dl-rgbslider {
+  display: none;
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;	padding: 10px;
+	position: absolute;
+  top: 0px;	
+}
+
+div.dl-digilib div.dl-rgbsliderpreview,
+div.dl-digilib div.dl-singlesliderpreview {
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
+	margin: 10px 0px;
+}
+
+div.dl-digilib table.dl-rgbslider,
+div.dl-digilib table.dl-rgbslidergrey,
+div.dl-digilib table.dl-rgbsliderpreview,
+div.dl-digilib table.dl-singleslider,
+div.dl-digilib table.dl-singleslidergrey,
+div.dl-digilib table.dl-singlesliderpreview {
+    width: 100%;
+    border-collapse: collapse;
+    }
+
+div.dl-digilib table.dl-rgbslidergrey td,
+div.dl-digilib table.dl-rgbsliderpreview td,
+div.dl-digilib table.dl-singleslidergrey td,
+div.dl-digilib table.dl-singlesliderpreview td {
+    height: 20px;
+    }
+
+div.dl-digilib td.dl-color div {
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;    text-align: center;
+  padding: 20px 0px;
+  margin: 0px 20px 20px 0px;
+}
+
+div.dl-digilib td.dl-r div {
+  background-color: #800000;
+  padding: 2px;
+  }
+
+div.dl-digilib td.dl-g div {
+  background-color: #008000;
+  padding: 2px;
+  }
+
+div.dl-digilib td.dl-b div {
+  background-color: #000080;
+  padding: 2px;
+  }
+
+div.dl-digilib div.dl-singleslider {
+  display: none;
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
+	width: 300px;
+	padding: 10px;
+	position: absolute;
+  top: 0px;	
+  z-index: 100;
+}
+
+div.dl-digilib div.dl-slider {
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
+	margin: 30px;
+	z-index: 100;
+	height: 6px;
+	}
+
+div.dl-digilib div.dl-regionInfo {
+  display: none;
+  position: absolute;
+  overflow: visible;
+	padding: 10px;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 12px;
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
+  width: 300px;
+	z-index: 100;
+}
+
+div.dl-digilib div.dl-regionInfo a {
+  color: white;
+  text-decoration: none;
+  font-size: 11px;
+	font-weight: bold;
+	width: 300px;
+}
+
+.dl-infobutton {
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
+	padding: 0px 4px;
+}
+
+div.dl-info {
+    display: none;
+    margin: 10px;
+}
+
+div.dl-infoheader {
+    margin-bottom: 20px;
+}
+
+/* scroll arrows */
+div.dl-digilib table.dl-scalertable {
+	border: 0;
+	padding: 0;
+}
+div.dl-digilib table.dl-scalertable td {
+    padding: 0;
+}
+div.dl-digilib table.dl-scalertable td.dl-arrow {
+}
+div.dl-digilib table.dl-scalertable td.dl-arrow:hover {
+    background-color: black;
+	opacity: 0.3;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+}
+
+div.dl-digilib table.dl-scalertable img.button {
+    opacity: 1;
+}
+
+/* special definitions for fullscreen */
+div.dl-digilib.dl-fullscreen div.dl-buttons {
+	position: fixed;
+	right: 0px;
+	top: 0px;
+	padding: 2px;
+	background-color: transparent;
+	z-index: 200;
+}
+
+div.dl-digilib.dl-fullscreen div.dl-buttons div.dl-button {
+	margin-bottom: 3px;
+}
+
+div.dl-digilib.dl-fullscreen div.dl-buttons div.dl-button:hover {
+	background-image: url('img/fullscreen/corona.png');
+	background-repeat: no-repeat;
+}
+
+div.dl-digilib.dl-fullscreen div.dl-button-on {
+	background-image: url('img/fullscreen/whitedisc.png');
+	background-repeat: no-repeat;
+}
+
+div.dl-digilib.dl-fullscreen div.dl-birdview {
+	position: fixed;
+	bottom: 8px;
+	right: 48px;
+}
+
+/* no borders for button images */
+div.dl-digilib a img.dl-button {
+    border:none;
+}
+
+/* SVG */
+div.dl-digilib .dl-svg-handle {
+	stroke: blue;
+}
+div.dl-digilib .dl-svg-handle:hover {
+	fill: red;
+}
+div.dl-digilib .dl-svg-annotationregion {
+    fill: rgba(255, 255, 10, 0.3);
+    stroke: none;
+}
+div.dl-digilib .dl-svg-annotationregion:hover {
+    fill: transparent;
+    stroke: yellow;
+    stroke-width: 2px;
+}
+
+
+/* special definitions for embedded */
+div.dl-digilib.dl-embedded {
+	position: relative;
+}
+
+div.dl-digilib.dl-embedded div.dl-buttons {
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	padding: 1px;
+	background-color: gray;
+	opacity: 0.5;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	z-index: 100;
+}
+
+div.dl-digilib.dl-embedded div.dl-buttons div.dl-button:hover {
+	background-color: black;
+}
+
+div.dl-digilib.dl-embedded div.dl-button-on {
+	background-color: green;
+}
+
+div.dl-digilib.dl-embedded div.dl-birdview {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+}
+
+.range-input {
+  position: relative;
+  height: 25px;
+}
+
+.range-rail {
+  background: url('img/range-rail-x.png') repeat-x 0 -2px;
+  height: 10px;
+}
+
+.range-selection {
+  position: absolute;
+  background: #aaa;
+  height: 3px;
+  top: 5px;
+  border-top: 1px solid #999;
+}
+
+.range-handle {
+  display: block;
+  position: absolute;
+  top: 0px;
+  background: url('img/range-thumb.png') no-repeat 0 -12px;
+  width:14px;
+  height: 26px;
+  border-radius: 10px;
+}
+
+#dl-zoominfo {
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
+	padding: 5px;
+	position: fixed;
+	right: 5px;
+	bottom: 10px;
+}
+
+button, input[type=button], input[type=submit], input[type=text], #dl-calibrationInput {
+  color: silver;
+	border: 1px solid black;
+	background-color: #303030;
+	border-radius: 5px;
+	padding: 3px;
+}
+
+button:hover, input[type=button]:hover, input[type=submit]:hover {
+  border-color: silver;
+}
+
+input[type=text]:focus, #dl-calibrationInput:focus {
+	background-color: darkgray;
+	color: black;
+}
+
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Wed Nov 02 02:52:57 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Fri Nov 04 01:01:16 2016 +0100
@@ -97,10 +97,8 @@
 	position: absolute;
 	padding: 10px;	
 	font-family: Verdana, Arial, Helvetica, sans-serif;
-	color: silver;
-	border: 1px solid black;
-	background-color: #303030;
-	border-radius: 5px;
+	border: 2px solid aqua;
+	background-color: silver;
 	text-align: center;
 	display: none;
 	z-index: 100;
@@ -109,11 +107,11 @@
 div.dl-digilib div.dl-region {
 	position: absolute;
 	border: none;
-  color: white;
+    color: white;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
-  font-size: 11px;
+    font-size: 11px;
 	background-color: red;
-  opacity: 0.3;
+    opacity: 0.3;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 }
 
@@ -130,7 +128,7 @@
 div.dl-digilib div.dl-regionArea {
 	background-color: red;
 	border: none;
-  opacity: 0.3;
+    opacity: 0.3;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 }
 
@@ -442,13 +440,4 @@
 	right: 0px;
 }
 
-#dl-zoominfo {
-  position: fixed;
-  bottom: 10px;
-  right: 10px;
-  padding: 3px;
-  border: 1px solid black;
-  border-radius: 5px;
-  background-color: #303030;
-  color: silver;
-}
+
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.css	Wed Nov 02 02:52:57 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.css	Fri Nov 04 01:01:16 2016 +0100
@@ -5,189 +5,189 @@
  */
 
 div#dl-measure-toolbar {
-    font-size: 90%;
-    display: none;
-	border: 1px solid grey;
-	border-radius: 20px;
-	background-color: silver;
-    padding: 5px;
-    position: absolute;
-    z-index: 20;
+  font-size: 90%;
+  display: none;
+  border: 1px solid grey;
+  border-radius: 20px;
+  background-color: silver;
+  padding: 5px;
+  position: absolute;
+  z-index: 20;
 }
 
 div#dl-measure-info {
-    font-size: 90%;
-    display: none;
-	border: 1px solid grey;
-	border-radius: 5px;
-	background-color:rgba(255, 255, 255, 0.3);
-    padding: 5px;
-    position: absolute;
-    z-index: 20;
+  font-size: 90%;
+  display: none;
+  border: 1px solid grey;
+  border-radius: 5px;
+  background-color:rgba(255, 255, 255, 0.3);
+  padding: 5px;
+  position: absolute;
+  z-index: 20;
 }
 
 div#dl-measure-info div.head {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 div#dl-measure-info em {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 input#dl-measure-value1 {
-    font-size: 100%;
-    width: 8em;
-    text-align: right;
+  font-size: 100%;
+  width: 8em;
+  text-align: right;
 }
 
 input#dl-measure-value1:disabled {
-    color: black;
-	background-color: silver;
-	border: none;
+  color: black;
+  background-color: silver;
+  border: none;
 }
 
 span.dl-measure-label {
-    padding: 0px 5px;
-    }
+  padding: 0px 5px;
+}
 
 span#dl-measure-shapeinfo {
-    display: inline-block;
-    width: 5em;
-    text-align: right;
-    }
+  display: inline-block;
+  width: 5em;
+  text-align: right;
+}
 
 span#dl-measure-value2 {
-    display: inline-block;
-    width: 6em;
-    }
+  display: inline-block;
+  width: 6em;
+}
 
 span.dl-measure-number {
-    display: inline-block;
-    color: lightgreen;
-    background-color: #606060;
-    padding: 2px;
-    width: 4em;
-    text-align: center;
-    }
+  display: inline-block;
+  color: lightgreen;
+  background-color: #606060;
+  padding: 2px;
+  width: 4em;
+  text-align: center;
+}
 
 select#dl-measure-shape, select#dl-measure-unit1, select#dl-measure-unit2 {
-    font-size: 100%;
-    border: none;
-    background-color: silver;
-    /* width: 12em; */
-    margin: 0px 2px;
-    }
+  font-size: 100%;
+  border: none;
+  background-color: silver;
+  /* width: 12em; */
+  margin: 0px 2px;
+}
 
 select#dl-measure-shape  {
-    color: lightgreen;
-    background-color: #606060;
-    width: 9em;
-    }
+  color: lightgreen;
+  background-color: #606060;
+  width: 9em;
+}
 
 /* select#dl-measure-shape:focus  {
-    color: black;
-    background-color: white;
-    }
+  color: black;
+  background-color: white;
+  }
 */
 
 option:disabled {
-    color: black;
+  color: black;
 }
 
 button.dl-drawing {
-    background-color: lightgreen;
+  background-color: lightgreen;
 }
 
 option.dl-units {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 img#dl-measure-move {
-    vertical-align: middle;
-    margin: 0px 0px 4px 4px;
+  vertical-align: middle;
+  margin: 0px 0px 4px 4px;
 }
 
 img#dl-measure-info {
-    vertical-align: middle;
-    margin: 0px 4px 4px 4px;
+  vertical-align: middle;
+  margin: 0px 4px 4px 4px;
 }
 
 .dl-measure-shape {
-    pointer-events: visibleStroke;
+  pointer-events: visibleStroke;
 }
 
 .dl-measure-shape:hover {
-    stroke: lightcyan;
+  stroke: lightcyan;
 }
 
 .dl-measure-selected {
-    stroke: cyan;
+  stroke: cyan;
 }
 
 .dl-measure-guide {
-    stroke: blue;
-    stroke-dasharray: 10 5;
-    fill: none;
+  stroke: blue;
+  stroke-dasharray: 10 5;
+  fill: none;
 }
 
 .dl-measure-constr {
-    stroke: cornsilk;
-    stroke-dasharray: 3 3;
-    fill: none;
+  stroke: cornsilk;
+  stroke-dasharray: 3 3;
+  fill: none;
 }
 
 .dl-measure-handle {
-    stroke: blue;
-    fill: none;
+  stroke: blue;
+  fill: none;
 }
 
 
 span.dl-measure-color {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    vertical-align: middle;
-    margin: 1px;
-    border: 1px solid black;
-    background-color: darkgray;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
+  margin: 1px;
+  border: 1px solid black;
+  background-color: darkgray;
 }
 
 div.colorPicker-palette {
-    width: 140px;
-    position: absolute;
-    border: 1px solid grey;
-	border-radius: 10px;
-    background-color: silver;
-    padding: 5px;
-    z-index: 9999;
+  width: 140px;
+  position: absolute;
+  border: 1px solid grey;
+  border-radius: 10px;
+  background-color: silver;
+  padding: 5px;
+  z-index: 9999;
 }
 
 div.colorPicker_hexWrap {
-    width: 100%;
-    float:left
+  width: 100%;
+  float:left
 }
 
 div.colorPicker_hexWrap label {
-    font-size: 90%;
-    color: #2F2F2F;
-    margin: 5px 2px;
-    width: 25%
+  font-size: 90%;
+  color: #2F2F2F;
+  margin: 5px 2px;
+  width: 25%
 }
 
 div.colorPicker_hexWrap input {
-    font-size: 90%;
-    margin: 5px 2px;
-    padding: 0;
-    width: 100px;
-    border: 1px solid #000;
+  font-size: 90%;
+  margin: 5px 2px;
+  padding: 0;
+  width: 100px;
+  border: 1px solid #000;
 }
 
 div.colorPicker-swatch {
-    height: 12px;
-    width: 12px;
-    border: 1px solid #000;
-    margin: 1px;
-    float: left;
-    cursor: pointer;
-    line-height: 12px;
+  height: 12px;
+  width: 12px;
+  border: 1px solid #000;
+  margin: 1px;
+  float: left;
+  cursor: pointer;
+  line-height: 12px;
 }