PortableMag/css/magazine-themes.css

/**********************************************************************
* magazine customization 
*
**********************************************************************/

/********************************************************* Viewer ****/

.splash {
	background: #444;
}
.splash * {
	color: white;
}
.splash #spinner {
	color: white;
}


.viewer {
	background: #555;
}

.magazine {
	box-shadow: 10px 10px 50px 10px #444;
}


.magazine:before,
.magazine:after {
	color: #666;
}

.button svg * {
	stroke: silver;
}
.button.info svg * {
	stroke: gray;
	fill: gray;
}

.magazine .cover {
}

.article {
	background: transparent;
}

.article .cover {
}

.page {
	background: silver;

	font-family: Arial;
}

.cover {
	background: white;
}


.top-toolbar, .bottom-toolbar {
	font-size: 14px;
	color: silver;
	box-shadow: 5px 5px 50px 5px #444 inset;
}

.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;
}

.overlay > div:first-child {
	background: #555;
	color: silver;
}
.overlay > div:last-child {
	color: white;
	background: #555;
	box-shadow: 5px 5px 200px 30px #444;
}



/**************************************************** light-viewer ***/

.light-viewer {
}

.light-viewer .splash {
	background: white;
}
.light-viewer .splash * {
	color: gray;
}
.light-viewer .splash #spinner {
	color: gray;
}


.light-viewer.viewer,
.light-viewer .viewer {
	background: white;
}

.light-viewer .magazine:before,
.light-viewer .magazine:after {
	color: #eee;
}
.light-viewer .magazine {
	box-shadow: 10px 10px 50px 10px #ddd;
}

.light-viewer .top-toolbar,
.light-viewer .bottom-toolbar {
	font-size: 14px;
	color: silver;
	background: white;
	box-shadow: 5px 5px 50px 20px #eee;
}
.light-viewer .top-toolbar a,
.light-viewer .bottom-toolbar a {
	color: silver;
	text-decoration: none;
}

.light-viewer .bottom-toolbar .page-number {
	color: silver;
}

.light-viewer .button svg * {
	stroke: gray;
}
.light-viewer .button.info svg * {
	stroke: silver;
	fill: silver;
}

.light-viewer .navigator {
	opacity: 0.9;
}

.light-viewer .navigator .bar {
	background: silver;
}

.light-viewer .navigator .bar .indicator {
	background: orange;
}

.light-viewer .navigator .bar .article {
	background: silver;
}

.light-viewer .navigator .bar .bookmark {
	background: red;
}

.light-viewer .overlay > div:first-child {
	background: white;
	color: #ccc;
}
.light-viewer .overlay > div:last-child {
	color: gray;
	background: white;
	box-shadow: 5px 5px 200px 30px #eee;
}


/***************************************************** dark viewer ***/

.dark-viewer {
}

.dark-viewer .splash {
	background: black;
}
.dark-viewer .splash * {
	color: silver;
}
.dark-viewer .splash #spinner {
	color: white;
}


.dark-viewer.viewer,
.dark-viewer .viewer {
	background: #111;
}

.dark-viewer .magazine {
	box-shadow: 10px 10px 50px 10px #000;
}

.dark-viewer .magazine:before,
.dark-viewer .magazine:after {
	color: #222;
}

.dark-viewer .top-toolbar,
.dark-viewer .bottom-toolbar {
	font-size: 14px;
	color: gray;
	background: black;
	box-shadow: none;
}

.dark-viewer .top-toolbar a,
.dark-viewer .bottom-toolbar a {
	color: gray;
	text-decoration: none;
}

.dark-viewer .bottom-toolbar .page-number {
	color: #555;
}

.dark-viewer .button svg * {
	stroke: gray;
}
.dark-viewer .button.info svg * {
	fill: gray;
}

.dark-viewer .navigator {
}

.dark-viewer .navigator .bar {
	background: silver;
}

.dark-viewer .navigator .bar .indicator {
	background: yellow;
}

.dark-viewer .navigator .bar .article {
	background: white;
}

.dark-viewer .navigator .bar .bookmark {
	background: red;
}

.dark-viewer .overlay > div:first-child {
	background: black;
	color: gray;
}
.dark-viewer .overlay > div:last-child {
	color: white;
	background: black;
	box-shadow: 5px 5px 200px 30px black;
}


/******************************************************* Magazine ****/

.magazine {
	background: transparent;
}

.magazine .cover {
}

.article {
	background: transparent;
}

.article .cover {
}

.page {
	background: silver;

	font-family: Arial;
}

.cover {
	background: white;
}


.page-number-text {
	color: gray;
}

::selection {
}
::-moz-selection {
}



/*********************************************************** 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;
}

.dark ::selection {
	background: yellow;
	color: white;
}
.dark ::-moz-selection {
	background: yellow;
	color: white;
}



/*********************************************************************/

/*********************************************************************/

.shadowless.light.viewer {
	background: #f0f0f0;
}
.shadowless.light.viewer .magazine:before,
.shadowless.light.viewer .magazine:after {
	color: #e8e8e8;
}

.shadowless.viewer .magazine,
.shadowless.viewer .top-toolbar,
.shadowless.viewer .bottom-toolbar {
	box-shadow: none;
}


/*********************************************************************/