mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 03:50:16 +00:00
did some work on magazine styling, added dark and light themes...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
a2c77e8e82
commit
57ed5db808
10
index.html
10
index.html
@ -5,7 +5,8 @@
|
|||||||
<title>PortableMag</title>
|
<title>PortableMag</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="magazine.css">
|
<link rel="stylesheet" href="magazine.css">
|
||||||
<link rel="stylesheet" href="magazine-custom.css">
|
<link rel="stylesheet" href="magazine-themes.css">
|
||||||
|
<!--link rel="stylesheet" href="magazine-custom.css"-->
|
||||||
|
|
||||||
<script src="ext-lib/jquery.js"></script>
|
<script src="ext-lib/jquery.js"></script>
|
||||||
<script src="ext-lib/jquery.touchSwipe.js"></script>
|
<script src="ext-lib/jquery.touchSwipe.js"></script>
|
||||||
@ -162,7 +163,7 @@ $(document).ready(function(){
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="viewer">
|
<div class="viewer dark">
|
||||||
|
|
||||||
<!-- Splash screen -->
|
<!-- Splash screen -->
|
||||||
<div class="splash noSwipe">
|
<div class="splash noSwipe">
|
||||||
@ -300,7 +301,7 @@ $(document).ready(function(){
|
|||||||
|
|
||||||
<div class="top-toolbar">
|
<div class="top-toolbar">
|
||||||
<div class="left-set">
|
<div class="left-set">
|
||||||
<div class="button cover title"><a href="#home" class="magazine-title-text">Magazine Title</a></div>
|
<div class="button title"><a href="#home" class="magazine-title-text">Magazine Title</a></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-set">
|
<div class="right-set">
|
||||||
<div class="button prev-bookmark">
|
<div class="button prev-bookmark">
|
||||||
@ -334,7 +335,7 @@ $(document).ready(function(){
|
|||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="button info" style="opacity: 0.3">
|
<div class="button info">
|
||||||
<a href="javascript:alert('not implemented yet...')">
|
<a href="javascript:alert('not implemented yet...')">
|
||||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g>
|
<g>
|
||||||
@ -918,7 +919,6 @@ $(document).ready(function(){
|
|||||||
var t = parseInt($('#transition_duration').attr('value'))
|
var t = parseInt($('#transition_duration').attr('value'))
|
||||||
t = t == null ? TRANSITION_DURATION : t
|
t = t == null ? TRANSITION_DURATION : t
|
||||||
t = t < 25 ? 25 : t
|
t = t < 25 ? 25 : t
|
||||||
console.log(t)
|
|
||||||
TRANSITION_DURATION = t
|
TRANSITION_DURATION = t
|
||||||
setTransitionDuration($('.scaler'), t)
|
setTransitionDuration($('.scaler'), t)
|
||||||
setTransitionDuration($('.magazine'), t)
|
setTransitionDuration($('.magazine'), t)
|
||||||
|
|||||||
@ -4,16 +4,23 @@
|
|||||||
**********************************************************************/
|
**********************************************************************/
|
||||||
|
|
||||||
/*************************************** main structural elements ****/
|
/*************************************** main structural elements ****/
|
||||||
|
|
||||||
.viewer {
|
.viewer {
|
||||||
background: gray;
|
background: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.magazine {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.magazine .cover {
|
.magazine .cover {
|
||||||
background: white;
|
}
|
||||||
|
|
||||||
|
.article {
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article .cover {
|
.article .cover {
|
||||||
background: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
@ -22,8 +29,109 @@
|
|||||||
font-family: Arial;
|
font-family: Arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.top-toolbar, .bottom-toolbar {
|
||||||
|
font-size: 14px;
|
||||||
|
color: silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-toolbar .title,
|
||||||
|
.bottom-toolbar .title {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* toolbar links */
|
||||||
|
.top-toolbar a, .bottom-toolbar a {
|
||||||
|
color: silver;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: hand;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-toolbar .page-number {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigator {
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigator .bar {
|
||||||
|
background: silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigator .bar .indicator {
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigator .bar .article {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigator .bar .bookmark {
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-number-text {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**************************************************** light theme ****/
|
||||||
|
|
||||||
|
.light {
|
||||||
|
color: gray;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light.viewer {
|
||||||
|
}
|
||||||
|
|
||||||
|
.magazine {
|
||||||
|
}
|
||||||
|
|
||||||
|
.light .magazine .cover {
|
||||||
|
}
|
||||||
|
|
||||||
|
.light .article .cover {
|
||||||
|
}
|
||||||
|
|
||||||
|
.light .page {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**************************************************** dark theme ****/
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark.viewer {
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .magazine .cover {
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .article .cover {
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .page {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: arial;
|
font-family: arial;
|
||||||
}
|
}
|
||||||
|
|||||||
34
magazine.css
34
magazine.css
@ -265,7 +265,6 @@ body {
|
|||||||
.top-toolbar, .bottom-toolbar {
|
.top-toolbar, .bottom-toolbar {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1000;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@ -287,6 +286,11 @@ body {
|
|||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.page-view-mode .top-toolbar,
|
||||||
|
.page-view-mode .bottom-toolbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* title */
|
/* title */
|
||||||
.top-toolbar .title,
|
.top-toolbar .title,
|
||||||
.bottom-toolbar .title {
|
.bottom-toolbar .title {
|
||||||
@ -304,12 +308,14 @@ body {
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
/* toolbar links */
|
/* toolbar links */
|
||||||
.top-toolbar a, .bottom-toolbar a {
|
.top-toolbar a,
|
||||||
|
.bottom-toolbar a {
|
||||||
color: silver;
|
color: silver;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
/* toolbar controls */
|
/* toolbar controls */
|
||||||
.top-toolbar .controls, .bottom-toolbar .controls {
|
.top-toolbar .controls,
|
||||||
|
.bottom-toolbar .controls {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
/* toolbar buttons */
|
/* toolbar buttons */
|
||||||
@ -327,11 +333,6 @@ body {
|
|||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
/* page view mode */
|
|
||||||
.page-view-mode .top-toolbar,
|
|
||||||
.page-view-mode .bottom-toolbar {
|
|
||||||
height: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* page indicator */
|
/* page indicator */
|
||||||
.bottom-toolbar .page-number {
|
.bottom-toolbar .page-number {
|
||||||
@ -528,6 +529,23 @@ body {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page a,
|
||||||
|
.page a:visited,
|
||||||
|
.page a:active {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
.page a:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
/* keep this at the end... */
|
/* keep this at the end... */
|
||||||
.unanimated {
|
.unanimated {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user