mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 12:00:11 +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>
|
||||
|
||||
<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.touchSwipe.js"></script>
|
||||
@ -162,7 +163,7 @@ $(document).ready(function(){
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="viewer">
|
||||
<div class="viewer dark">
|
||||
|
||||
<!-- Splash screen -->
|
||||
<div class="splash noSwipe">
|
||||
@ -300,7 +301,7 @@ $(document).ready(function(){
|
||||
|
||||
<div class="top-toolbar">
|
||||
<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 class="right-set">
|
||||
<div class="button prev-bookmark">
|
||||
@ -334,7 +335,7 @@ $(document).ready(function(){
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="button info" style="opacity: 0.3">
|
||||
<div class="button info">
|
||||
<a href="javascript:alert('not implemented yet...')">
|
||||
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
@ -918,7 +919,6 @@ $(document).ready(function(){
|
||||
var t = parseInt($('#transition_duration').attr('value'))
|
||||
t = t == null ? TRANSITION_DURATION : t
|
||||
t = t < 25 ? 25 : t
|
||||
console.log(t)
|
||||
TRANSITION_DURATION = t
|
||||
setTransitionDuration($('.scaler'), t)
|
||||
setTransitionDuration($('.magazine'), t)
|
||||
|
||||
@ -4,16 +4,23 @@
|
||||
**********************************************************************/
|
||||
|
||||
/*************************************** main structural elements ****/
|
||||
|
||||
.viewer {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.magazine {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.magazine .cover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.article {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.article .cover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.page {
|
||||
@ -22,8 +29,109 @@
|
||||
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 {
|
||||
font-family: arial;
|
||||
}
|
||||
|
||||
34
magazine.css
34
magazine.css
@ -265,7 +265,6 @@ body {
|
||||
.top-toolbar, .bottom-toolbar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
@ -287,6 +286,11 @@ body {
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.page-view-mode .top-toolbar,
|
||||
.page-view-mode .bottom-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* title */
|
||||
.top-toolbar .title,
|
||||
.bottom-toolbar .title {
|
||||
@ -304,12 +308,14 @@ body {
|
||||
text-align: right;
|
||||
}
|
||||
/* toolbar links */
|
||||
.top-toolbar a, .bottom-toolbar a {
|
||||
.top-toolbar a,
|
||||
.bottom-toolbar a {
|
||||
color: silver;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* toolbar controls */
|
||||
.top-toolbar .controls, .bottom-toolbar .controls {
|
||||
.top-toolbar .controls,
|
||||
.bottom-toolbar .controls {
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* toolbar buttons */
|
||||
@ -327,11 +333,6 @@ body {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
/* page view mode */
|
||||
.page-view-mode .top-toolbar,
|
||||
.page-view-mode .bottom-toolbar {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
/* page indicator */
|
||||
.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... */
|
||||
.unanimated {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user