PortableMag/magazine-themes.css

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

/*************************************** main structural elements ****/

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


.viewer {
	background: gray;
}

.magazine {
	background: transparent;
	box-shadow: 10px 10px 50px 10px #555;
}

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

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




/**************************************************** light theme ****/

.light {
}

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


.light.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.page {
	background: white;
	color: black;
}



/**************************************************** dark theme ****/

.dark {
}

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


.dark.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.page {
	background: black;
	color: white;
}



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

.magazine {
	background: transparent;
}

.magazine .cover {
}

.article {
	background: transparent;
}

.article .cover {
}

.page {
	background: silver;

	font-family: Arial;
}

.cover {
	background: white;
}


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



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

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


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