kamishibai 0.6.2

data/public/css/config.css

@@ -0,0 +1,3 @@
+/*
+this file has intentionally left blank
+*/

data/public/css/reader.css

@@ -0,0 +1,119 @@
+#icontainer {
+	text-align: center;
+}
+.icontainer-normal_height {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+	background-color: black;
+}
+.normal_height {
+	width: auto;
+	height: 100%;
+}
+.full_height {
+	width: 50%;
+	height: auto;
+}
+#container {
+	float: left;
+	width: 100%;
+	background-color: black;
+	/* overflow: hidden; */
+}
+#cleft, #cright, #cbutton {
+	opacity: 0;
+}
+#cleft, #cright {
+	position: fixed;
+	width: 20%;
+	height: 100%;
+	/* float: left; */
+}
+#cleft {
+	/* hidden button to nav page */
+	background-color: yellow;
+	left: 0%;
+	z-index: 9;
+}
+#cright {
+	/* hidden button to nav page */
+	background-color: cyan;
+	left: 80%;
+	z-index: 8;
+}
+#cbutton {
+	/* hidden button to bring up menu */
+	background-color: green;
+	position: fixed;
+	left: 20%;
+	top: 50%;
+	width: 60%;
+	height: 50%;
+	z-index: 7;
+}
+#cleft a, #cright a, #cbutton a {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+#booktitle {
+	width: 100%;
+	text-align: center;
+	background-color: #afafaf;
+}
+#ileft, #iright {
+	/* float: left; */
+	/* display: block; */
+	/* opacity: 0.1; */
+}
+#ibar {
+	/* black bar between 2 images */
+	display: none;
+	width: 1%;
+	height: 20px;
+	/* float: left; */
+	background-color: black;
+}
+#menu {
+	width: 100%;
+	height: 180px;
+	bottom: 0%;
+	position: fixed;
+	z-index: 10;
+	background-color: grey;
+	text-align: center;
+}
+
+body {
+	background-color: black;
+}
+
+#pageslider-value {
+	width: 30px;
+}
+#pageslider {
+	width: 100%;
+	margin-top: 6px;
+}
+.d_row {
+	display: inline-block;
+	text-align: center;
+	margin-top: 20px;
+	width: 100%;
+}
+.ps {
+	display: inline-block;
+}
+.ps-1 {
+	width: 40px;
+	vertical-align: top;
+}
+.ps-2 {
+	width: 700px;
+}
+.ui-slider-handle {
+	/* make the slider handle into a circle */
+	border-radius: 50%;
+}

data/public/css/styles.css

@@ -0,0 +1,30 @@
+body {
+	background-color: #f5f5f5;
+}
+
+a, span.link {
+	color: blue;
+	text-decoration:underline;
+	cursor: hand;
+	cursor: pointer;
+}
+
+a:visited, span.visited {
+	color: purple;
+	text-decoration:underline;
+	cursor: hand;
+	cursor: pointer;
+}
+
+a:active, span.active {
+	color: red;
+	text-decoration:underline;
+	cursor: hand;
+	cursor: pointer;
+}
+
+.ui-page { -webkit-backface-visibility: hidden; }
+
+.hidden {
+	display: none;
+}

data/public/css/tablet_browse.css

@@ -0,0 +1,247 @@
+@media all and (max-width: 799px) {
+	/* portrait mode */
+	#searchbox-holder {
+		width: 50%;
+	}
+	#leftbox {
+		right: 50%;
+	}
+	#bookinfo {
+		left: 50%;
+		width: 50%;
+	}
+	#rcontainer {
+		left: 50%;
+		width: 50%;
+	}
+}
+@media all and (min-width: 800px) {
+	/* landscape mode */
+	#searchbox-holder {
+		width: 40%;
+	}
+	#leftbox {
+		right: 60%;
+	}
+	#bookinfo {
+		left: 40%;
+		width: 60%;
+	}
+	#rcontainer {
+		left: 40%;
+		width: 60%;
+	}
+}
+#window {
+	/* using this to trap everything in here to prevent the overflow of the element */
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+#menu {
+	z-index: 10;
+	top: 0px;
+	border-bottom: solid 1px #000;
+	height: 40px;
+	text-align: center;
+	background: linear-gradient(#DDD, #BBB) repeat scroll 0% 0% #BBB;
+}
+#searchbox-holder {
+	float: left;
+	position: absolute;
+	top: 41px;
+	left: 0px;
+	height: 40px;
+	margin: 0px;
+	padding-top: 5px;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+/*#searchbox {
+	position: absolute;
+	width: 80%;
+}*/
+#leftbox {
+	/*float: left;*/
+	position: absolute;
+	top: 81px;
+	left: 0px;
+	/*width: 50%;*/
+	margin: 0px;
+	bottom: 0px;
+	overflow: hidden;
+	overflow-y: scroll;
+	-webkit-overflow-scrolling: touch;
+}
+#bookinfo {
+	float: left;
+	position: absolute;
+	top: 42px;
+	height: 80px;
+	/* font-size: 20px; */
+	font-height: 1em;
+	font-weight: bold;
+	border-left: solid 1px #000;
+	border-bottom: solid 1px #000;
+	background: linear-gradient( rgb(255, 255, 255), rgb(241, 241, 241) );
+	background: -webkit-linear-gradient( rgb(255, 255, 255), rgb(241, 241, 241) );
+}
+#bookinfo > div:first-child {
+	font-size: 1.3em;
+}
+#bookinfo > div:first-child+span {
+	font-size: 0.7em;
+}
+#bookinfo * {
+	margin-top: 5px;
+	margin-left: 15px;
+}
+
+.ui-li-divider {
+	/* divider for the leftbox */
+	cursor: default;
+	padding: 0.5em 15px;
+	font-size: 14px;
+	font-weight: 700;
+
+	margin: 0px;
+	/*padding: 0px;*/
+	display: block;
+	position: relative;
+	overflow: visible;
+	text-align: left;
+	border-width: 1px 0px 0px;
+
+	list-style: none outside none;
+	font-family: Helvetica, Arial, sans-serif;
+
+	border: 1px solid #456F9A;
+	background: linear-gradient(#6FACD5, #497BAE) repeat scroll 0% 0% #5E87B0;
+
+	color: #FFF;
+	/*text-shadow: 0px 1px 0px #FFF;*/
+}
+
+.li-title {
+	/*
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	border: 1px solid #9c9c9c;
+	background-color: #bfbbb9;
+	*/
+	background: linear-gradient( rgb(255, 255, 255), rgb(241, 241, 241) );
+	/* webkit don't support css with background linear-gradient, call it by -webkit-liner-gradient */
+	background: -webkit-linear-gradient( rgb(255, 255, 255), rgb(241, 241, 241) );
+
+	/* new */
+	padding: 0.7em 15px;
+	display: block;
+	background: linear-gradient(#FFF, #F1F1F1) repeat scroll 0% 0% transparent;
+	font-family: Helvetica, Arial, sans-serif;
+	text-decoration: none;
+	border: 1px solid #BBB;
+	font-weight: 700;
+	color: #333;
+	text-shadow: 0px 1px 0px #FFF;
+	/*padding: 0px;*/
+	margin: 0px;
+
+	position: relative;
+	overflow: visible;
+	text-align: left;
+}
+.li-title:hover {
+	background: linear-gradient( rgb(200, 200, 200), rgb(241, 241, 241) );
+	background: -webkit-linear-gradient( rgb(200, 200, 200), rgb(241, 241, 241) );
+}
+.li-title:active {
+	background: linear-gradient( rgb(100, 200, 200), rgb(140, 241, 241) );
+	background: -webkit-linear-gradient( rgb(100, 200, 200), rgb(140, 241, 241) );
+}
+
+#rcontainer {
+	float: left;
+	position: absolute;
+	top: 123px;
+	bottom: 0px;
+	border-left: solid 1px #000;
+	overflow: hidden;
+	overflow-y: scroll;
+	-webkit-overflow-scrolling: touch;
+
+	display: inline-block;
+
+	list-style: none;
+    margin: 0 auto;
+    padding: 0;
+}
+#rcontainer ul {
+	list-style: none;
+    margin: 0 auto;
+    padding: 0;
+}
+#rcontainer ul li {
+	float: left;
+	width: 160px;
+	height: 220px;
+	/*background-color: #dedede;*/
+	position: relative;
+	margin: 15px;
+	display: table;
+	list-style: none;
+}
+#rcontainer ul li.reading {
+	background-color: #ffece6;
+}
+#rcontainer ul li.read {
+	/* background-color: #33cc66; */
+}
+#rcontainer ul li.active {
+	background-color: red;
+}
+#rcontainer ul li:hover {
+	/*background-color: yellow;*/
+}
+#rcontainer ul li a {
+	/* top: 0px;
+	left: 0px;
+	position: relative; */
+	width: 100%;
+	height: 100%;
+	display: table-cell;
+	text-decoration: none;
+	overflow: hidden;
+	/*background-color: yellow;
+	 opacity: 0.3; */
+}
+#rcontainer ul li a span {
+	position: absolute;
+	bottom: 0px;
+	font-size: smaller;
+	height: 42px;
+	width: 160px;
+	overflow: hidden;
+	display: inline-block;
+	color: #000;
+	/*background-color: #efe1e1;*/
+}
+#rcontainer li a img {
+	min-height: 100px;
+	min-width: 50px;
+	max-width: 160px;
+	max-height: 170px;
+	position: absolute;
+	bottom: 48px;
+	display: block;
+	border-style: solid;
+	border-width: 1px;
+	border-color: #000;
+	box-shadow: 0px 0px 5px #999;
+	/*transform: rotate(10deg);*/
+}

data/public/css/tablet_reader.css

@@ -0,0 +1,323 @@
+* {
+	margin: 0;
+	padding: 0;
+
+	/* prevent select from functioning */
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+input[type="text"] {
+	width: 2em;
+}
+
+.ui-bar-a > * {
+	margin: 15px;
+}
+.ui-btn > * {
+	margin: 1em;
+}
+
+#container {
+	z-index: 1000;
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	background-color: grey;
+}
+
+#currentinfo {
+	z-index: 9999;
+	position: fixed;
+	color: #ffffff;
+	bottom: 0px;
+	right: 0px;
+	/*width: 15em;*/
+	padding-bottom: 10px;
+	height: 1em;
+	background-color: #000000;
+	opacity: 0.5;
+}
+
+#booktitle {
+	text-align: center;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	max-height: 0px;
+	overflow: hidden;
+	z-index: 99;
+	transition: max-height 0.3s;
+}
+#readermenu {
+	text-align: center;
+	position: fixed;
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	max-height: 0px;
+	overflow: hidden;
+	z-index: 99;
+	transition: max-height 0.3s;
+}
+#readermenu > div {
+	min-width: 50%;
+	max-width: 80%;
+	display: inline-block;
+}
+.showtop {
+	max-height: 500px !important;
+}
+.gap {
+	margin: 15px;
+}
+.gap > input {
+	vertical-align: middle;
+}
+
+html, body { height:100%; }
+body {
+	padding:0;
+	margin:0;
+	/* background:#333; */
+	-webkit-user-select:none;
+	-moz-user-select:none;
+	-ms-user-select:none;
+	-o-user-select:none;
+	user-select:none;
+	-webkit-text-size-adjust:none;
+	-moz-text-size-adjust:none;
+	-ms-text-size-adjust:none;
+	-o-text-size-adjust:none;
+	text-size-adjust:none;
+	
+	/*color:#eee;*/
+	font-family:helvetica;
+	/*font-size:12px;*/
+	
+}
+
+#wrapper0 {
+	position:absolute; z-index:1;
+	top:0px; bottom:0px; left:0;
+	width:100%;
+	background:#aaa;
+	overflow:auto;
+}
+#wrapper1 {
+	position:absolute; z-index:1;
+	top:0px; bottom:0px; left:0;
+	width:100%;
+	background:#aaa;
+	overflow:auto;
+}
+#wrapper2 {
+	position:absolute; z-index:1;
+	top:0px; bottom:0px; left:0;
+	width:100%;
+	background:#aaa;
+	overflow:auto;
+}
+
+
+#wrapper {
+	width:100%;
+	min-width:320px;
+	height:100%;
+}
+
+#nav {
+	position:absolute;
+	z-index:100;
+	top:8px;
+	width:200px;
+	height:20px;
+	left:50%;
+	background:rgba(0,0,0,0.75);
+	padding:0;
+	margin:0 0 0 -100px;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	-ms-border-radius:10px;
+	-o-border-radius:10px;
+	border-radius:10px;
+}
+
+#nav li {
+	display:block;
+	float:left;
+	width:14px;
+	height:14px; line-height:14px;
+	-webkit-border-radius:7px;
+	-moz-border-radius:7px;
+	-ms-border-radius:7px;
+	-o-border-radius:7px;
+	border-radius:7px;
+	background:rgba(255,255,255,0.1);
+	overflow:hidden;
+	padding:0;
+	margin:3px 11px 0 0;
+	text-align:center;
+}
+
+#nav li#prev {
+	margin-left:5px;
+	background:transparent;
+}
+
+#nav li#next {
+	margin-right:0;
+	background:transparent;
+}
+
+#nav li.selected {
+	background:rgba(255,255,255,0.4);
+}
+
+#swipeview-slider > div {
+	position:relative;
+	display:-webkit-box;
+	display:-moz-box;
+	display:-ms-box;
+	display:-o-box;
+	display:box;
+	-webkit-box-orient:vertical;
+	-moz-box-orient:vertical;
+	-ms-box-orient:vertical;
+	-o-box-orient:vertical;
+	box-orient:vertical;
+	-webkit-box-pack:center;
+	-moz-box-pack:center;
+	-ms-box-pack:center;
+	-o-box-pack:center;
+	box-pack:center;
+	-webkit-box-align:center;
+	-mox-box-align:center;
+	-ms-box-align:center;
+	-o-box-align:center;
+	box-align:center;
+	overflow:hidden;
+}
+
+#swipeview-slider img {
+	display:block;
+	-webkit-transition-duration:.4s;
+	-moz-transition-duration:.4s;
+	-ms-transition-duration:.4s;
+	-o-transition-duration:.4s;
+	transition-duration:.4s;
+	-webkit-transition-property:opacity;
+	-moz-transition-property:opacity;
+	-ms-transition-property:opacity;
+	-o-transition-property:opacity;
+	transition-property:opacity;
+	opacity:1;
+	pointer-events:none;
+
+	/* me add */
+	width: auto;
+	height: auto;
+	max-width: 100%;
+	max-height: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	object-fit: contain;
+}
+
+#wrapper > div > .swipeview-loading {
+	/*background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#444), to(#555)),
+		-webkit-gradient(linear, 0 0, 100% 0, from(#777), to(#777));*/
+	/*background-position:50% 50%, 50% 50%;*/
+	/*background-size:200px 140px, 210px 150px;*/
+	/*background-repeat:no-repeat;*/
+}
+
+#wrapper > div > .swipeview-loading img,
+#swipeview-slider img.loading {
+	-webkit-transition-duration:0s;
+	opacity:0;
+}
+
+#swipeview-slider > * {
+	/*background-color: black;*/
+	background-color: #efefef;
+}
+
+#swipeview-masterpage-0 img, #swipeview-masterpage-1 img, #swipeview-masterpage-2 img {
+	/*max-width: 150%;
+	max-height: 150%;*/
+}
+
+#swipeview-slider > div > div {
+	font-size: 6em;
+	position: fixed;
+	text-align: center;
+	width: 2em;
+	height: 1.5em;
+	top: 50%;
+	left: 50%;
+	margin: -2em 0 0 -1em;
+	background-image: url('/images/spinner.gif');
+	background-size: 32px 32px;
+	background-repeat: no-repeat;
+	background-position: bottom center;
+	/*background-color: #eff;*/
+
+	-webkit-transition-duration:0s;
+	opacity: 0;
+	z-index: -9;
+	/*display: none;*/
+}
+
+#swipeview-slider > div > div.loading {
+	opacity: 1;
+}
+
+
+/* bits from jquery mobile ui */
+.ui-btn {
+	/*display: block;*/
+	text-align: center;
+	cursor: pointer;
+	position: relative;
+	margin: 0.5em 0px;
+	padding: 0px;
+	z-index: 10;
+}
+.ui-bar-a {
+	border: 1px solid #333;
+	background: #111 linear-gradient(#3C3C3C, #111) repeat scroll 0% 0%;
+	color: #FFF;
+	font-weight: 700;
+	text-shadow: 0px -1px 0px #000;
+	font-family: Helvetica,Arial,sans-serif;
+	opacity: 0.9;
+}
+.ui-btn-up-a {
+	font-family: Helvetica,Arial,sans-serif;
+	text-decoration: none;
+	border: 1px solid #111;
+	background: #333 linear-gradient(#444, #2D2D2D) repeat scroll 0% 0%;
+	font-weight: 700;
+	color: #FFF;
+	text-shadow: 0px 1px 0px #111;
+}
+.ui-shadow {
+	box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
+}
+.ui-btn-corner-all {
+    background-clip: padding-box;
+    border-radius: 1em;
+}
+
+#pageinput {
+	color: black;
+}