flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-31 12:00:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

split magazine themes and viewer themes (with magazine themes getting priority for convenience)...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-03-01 13:22:31 +04:00
parent 66841a2af1
commit e62a2e710f
5 changed files with 109 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index-old.html
View File

@ -170,7 +170,7 @@ $(document).ready(function(){
</head> </head>
<body> <body>
<div class="viewer dark"> <div class="viewer dark-viewer">
<!-- Splash screen --> <!-- Splash screen -->
<div class="splash noSwipe"> <div class="splash noSwipe">

2
index.html
View File

@ -158,7 +158,7 @@ $(document).ready(function(){
//setupNavigator() //setupNavigator()
setCurrentPage(0) setCurrentPage(0)
toggleThemes('dark') toggleThemes('dark-viewer')

4
layout.js
View File

@ -15,10 +15,10 @@ var INNERTIA_SCALE = 0.25
/********************************************************** layout ***/ /********************************************************** layout ***/
var toggleThemes = createCSSClassToggler('.chrome', [ var toggleThemes = createCSSClassToggler('.chrome', [
'light', 'light-viewer',
// this is the default (no class set)... // this is the default (no class set)...
'none', 'none',
'dark' 'dark-viewer'
]) ])

207
magazine-themes.css
View File

@ -3,7 +3,7 @@
* *
**********************************************************************/ **********************************************************************/
/*************************************** main structural elements ****/ /********************************************************* Viewer ****/
.splash { .splash {
background: gray; background: gray;
@ -21,10 +21,10 @@
} }
.magazine { .magazine {
background: transparent;
box-shadow: 10px 10px 50px 10px #555; box-shadow: 10px 10px 50px 10px #555;
} }
.magazine:before, .magazine:before,
.magazine:after { .magazine:after {
color: #888; color: #888;
@ -112,213 +112,159 @@
/**************************************************** light theme ****/ /**************************************************** light-viewer ***/
.light { .light-viewer {
} }
.light .splash { .light-viewer .splash {
background: white; background: white;
} }
.light .splash * { .light-viewer .splash * {
color: gray; color: gray;
} }
.light .splash #spinner { .light-viewer .splash #spinner {
color: gray; color: gray;
} }
.light.viewer, .light-viewer.viewer,
.light .viewer { .light-viewer .viewer {
background: white; background: white;
} }
.light .magazine:before, .light-viewer .magazine:before,
.light .magazine:after { .light-viewer .magazine:after {
color: #eee; color: #eee;
} }
.light .magazine { .light-viewer .magazine {
box-shadow: 10px 10px 50px 10px #ddd; box-shadow: 10px 10px 50px 10px #ddd;
} }
.light .top-toolbar, .light-viewer .top-toolbar,
.light .bottom-toolbar { .light-viewer .bottom-toolbar {
font-size: 14px; font-size: 14px;
color: silver; color: silver;
background: white; background: white;
box-shadow: 5px 5px 50px 20px #eee; box-shadow: 5px 5px 50px 20px #eee;
} }
.light .top-toolbar a, .light-viewer .top-toolbar a,
.light .bottom-toolbar a { .light-viewer .bottom-toolbar a {
color: silver; color: silver;
text-decoration: none; text-decoration: none;
} }
.light .bottom-toolbar .page-number { .light-viewer .bottom-toolbar .page-number {
color: silver; color: silver;
} }
.light .button svg * { .light-viewer .button svg * {
stroke: gray; stroke: gray;
} }
.light .button.info svg * { .light-viewer .button.info svg * {
stroke: silver; stroke: silver;
fill: silver; fill: silver;
} }
.light .navigator { .light-viewer .navigator {
opacity: 0.9; opacity: 0.9;
} }
.light .navigator .bar { .light-viewer .navigator .bar {
background: silver; background: silver;
} }
.light .navigator .bar .indicator { .light-viewer .navigator .bar .indicator {
background: orange; background: orange;
} }
.light .navigator .bar .article { .light-viewer .navigator .bar .article {
background: silver; background: silver;
} }
.light .navigator .bar .bookmark { .light-viewer .navigator .bar .bookmark {
background: red; background: red;
} }
/* XXX we do not want this to be inherited from the viewer */
.magazine .light .page,
.magazine.light .page, /***************************************************** dark viewer ***/
.light.page {
background: white; .dark-viewer {
color: black;
} }
.dark-viewer .splash {
.magazine .light .page.caption-top-arrow:before,
.magazine .light .page.caption-bottom-arrow:before,
.magazine.light .page.caption-top-arrow:before,
.magazine.light .page.caption-bottom-arrow:before,
.light.page.caption-top-arrow:before,
.light.page.caption-bottom-arrow:before {
background: white;
}
.magazine .light .page.caption-top-arrow .content,
.magazine .light .page.caption-bottom-arrow .content,
.magazine.light .page.caption-top-arrow .content,
.magazine.light .page.caption-bottom-arrow .content,
.light.page.caption-top-arrow .content,
.light.page.caption-bottom-arrow .content {
color: black;
background: white;
}
/**************************************************** dark theme ****/
.dark {
}
.dark .splash {
background: black; background: black;
} }
.dark .splash * { .dark-viewer .splash * {
color: silver; color: silver;
} }
.dark .splash #spinner { .dark-viewer .splash #spinner {
color: white; color: white;
} }
.dark.viewer, .dark-viewer.viewer,
.dark .viewer { .dark-viewer .viewer {
background: #111; background: #111;
} }
.dark .magazine { .dark-viewer .magazine {
box-shadow: 10px 10px 50px 10px #000; box-shadow: 10px 10px 50px 10px #000;
} }
.dark .magazine:before, .dark-viewer .magazine:before,
.dark .magazine:after { .dark-viewer .magazine:after {
color: #222; color: #222;
} }
.dark .top-toolbar, .dark-viewer .top-toolbar,
.dark .bottom-toolbar { .dark-viewer .bottom-toolbar {
font-size: 14px; font-size: 14px;
color: gray; color: gray;
background: black; background: black;
box-shadow: none; box-shadow: none;
} }
.dark .top-toolbar a, .dark-viewer .top-toolbar a,
.dark .bottom-toolbar a { .dark-viewer .bottom-toolbar a {
color: gray; color: gray;
text-decoration: none; text-decoration: none;
} }
.dark .bottom-toolbar .page-number { .dark-viewer .bottom-toolbar .page-number {
color: #555; color: #555;
} }
.dark .button svg * { .dark-viewer .button svg * {
stroke: gray; stroke: gray;
} }
.dark .button.info svg * { .dark-viewer .button.info svg * {
fill: gray; fill: gray;
} }
.dark .navigator { .dark-viewer .navigator {
} }
.dark .navigator .bar { .dark-viewer .navigator .bar {
background: silver; background: silver;
} }
.dark .navigator .bar .indicator { .dark-viewer .navigator .bar .indicator {
background: yellow; background: yellow;
} }
.dark .navigator .bar .article { .dark-viewer .navigator .bar .article {
background: white; background: white;
} }
.dark .navigator .bar .bookmark { .dark-viewer .navigator .bar .bookmark {
background: red; background: red;
} }
.magazine .dark .page,
.magazine.dark .page,
.dark.page {
background: black;
color: white;
}
.magazine .dark .page.caption-top-arrow:before,
.magazine .dark .page.caption-bottom-arrow:before,
.magazine.dark .page.caption-top-arrow:before,
.magazine.dark .page.caption-bottom-arrow:before,
.dark.page.caption-top-arrow:before,
.dark.page.caption-bottom-arrow:before {
background: black;
}
.magazine .dark .page.caption-top-arrow .content,
.magazine .dark .page.caption-bottom-arrow .content,
.magazine.dark .page.caption-top-arrow .content,
.magazine.dark .page.caption-bottom-arrow .content,
.dark.page.caption-top-arrow .content,
.dark.page.caption-bottom-arrow .content {
color: white;
background: black;
}
/******************************************************* Magazine ****/
/*********************************************************************/
.magazine { .magazine {
background: transparent; background: transparent;
@ -349,6 +295,59 @@
color: gray; color: gray;
} }
/*********************************************************** light ***/
.light .page,
.light.page {
background: white;
color: black;
}
.light .page.caption-top-arrow:before,
.light .page.caption-bottom-arrow:before,
.light.page.caption-top-arrow:before,
.light.page.caption-bottom-arrow:before {
background: white;
}
.light .page.caption-top-arrow .content,
.light .page.caption-bottom-arrow .content,
.light.page.caption-top-arrow .content,
.light.page.caption-bottom-arrow .content {
color: black;
background: white;
}
/*********************************************************** dark ***/
.dark .page,
.dark.page {
background: black;
color: white;
}
.dark .page.caption-top-arrow:before,
.dark .page.caption-bottom-arrow:before,
.dark.page.caption-top-arrow:before,
.dark.page.caption-bottom-arrow:before {
background: black;
}
.dark .page.caption-top-arrow .content,
.dark .page.caption-bottom-arrow .content,
.dark.page.caption-top-arrow .content,
.dark.page.caption-bottom-arrow .content {
color: white;
background: black;
}
/*********************************************************************/
/*********************************************************************/ /*********************************************************************/
.shadowless.light.viewer { .shadowless.light.viewer {

4
magazine.js
View File

@ -91,10 +91,10 @@ var toggleInlineEditorMode = createCSSClassToggler('.viewer', 'inline-editor-mod
// toggle between viewer themes... // toggle between viewer themes...
var toggleThemes = createCSSClassToggler('.viewer', [ var toggleThemes = createCSSClassToggler('.viewer', [
'light', 'light-viewer',
// this is the default (no class set)... // this is the default (no class set)...
'none', 'none',
'dark' 'dark-viewer'
]) ])
// toggle box-shadows, this is here mostly for performance reasons... // toggle box-shadows, this is here mostly for performance reasons...