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,
.light .viewer {
	background: white;
}

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

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

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

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

.light .navigator {
	opacity: 0.9;
}

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

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

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

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

/* XXX we do not want this to be inherited from the viewer */
.magazine .light .page,
.magazine.light .page,
.light.page {
	background: white;
	color: black;
}


.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;
}
.dark .splash * {
	color: silver;
}
.dark .splash #spinner {
	color: white;
}


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

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

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

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

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

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

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

.dark .navigator {
}

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

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

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

.dark .navigator .bar .bookmark {
	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 {
	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;
}


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