366 lines
		
	
	
		
			6.9 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			366 lines
		
	
	
		
			6.9 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /**
 | |
| * @file
 | |
| * @brief    boxplus: a lightweight pop-up window engine shipped with sigplus
 | |
| * @author   Levente Hunyadi
 | |
| * @version  0.9.2
 | |
| * @remarks  Copyright (C) 2009-2010 Levente Hunyadi
 | |
| * @remarks  Licensed under GNU/GPLv3, see http://www.gnu.org/licenses/gpl-3.0.html
 | |
| * @see      http://hunyadi.info.hu/projects/boxplus
 | |
| */
 | |
| 
 | |
| #boxplus .boxplus-background {
 | |
| position:fixed;
 | |
| width:100%;
 | |
| height:100%;
 | |
| left:0;
 | |
| top:0;
 | |
| background-color:black;  /* fallback for browsers that do not support rgba */
 | |
| background-color:rgba(0,0,0,0.6);
 | |
| cursor:default;
 | |
| z-index:9999;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-dialog {
 | |
| position:absolute;
 | |
| min-width:100px;
 | |
| min-height:100px;
 | |
| left:0;
 | |
| top:0;
 | |
| margin:0;
 | |
| border:0 solid gray;
 | |
| padding:10px;
 | |
| color:black;
 | |
| z-index:10000;
 | |
| background:transparent none no-repeat scroll center center;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-dialog div {
 | |
| margin:0;
 | |
| border:0 none transparent;
 | |
| padding:0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-dialog > .boxplus-title {
 | |
| display:none;
 | |
| position:absolute;
 | |
| top:0;
 | |
| }
 | |
| 
 | |
| /* Progress indicator */
 | |
| #boxplus .boxplus-dialog .boxplus-progress {
 | |
| position:absolute;
 | |
| left:0;
 | |
| right:0;
 | |
| top:0;
 | |
| bottom:0;
 | |
| height:32px;
 | |
| width:32px;
 | |
| margin:auto;
 | |
| background:transparent url(loading.png) no-repeat scroll 0 0;
 | |
| }
 | |
| 
 | |
| /* Panels */
 | |
| #boxplus .boxplus-main {
 | |
| height:100%;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-sideways {
 | |
| float:right;
 | |
| width:250px;
 | |
| overflow:auto;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-sideways > div {
 | |
| margin:10px;
 | |
| }
 | |
| 
 | |
| /* Image viewer */
 | |
| #boxplus .boxplus-viewer {
 | |
| direction:ltr;
 | |
| position:relative;
 | |
| width:600px;
 | |
| height:400px;
 | |
| overflow:hidden;
 | |
| text-align:left;  /* overridden for body by many templates */
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-content {
 | |
| position:absolute;
 | |
| height:100%;
 | |
| width:100%;
 | |
| overflow:auto;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > img {
 | |
| display:block;
 | |
| position:absolute;
 | |
| margin:0;
 | |
| border:0 none transparent;
 | |
| padding:0;
 | |
| width:100%;
 | |
| height:100%;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > video,
 | |
| #boxplus .boxplus-viewer > iframe {
 | |
| position:absolute;
 | |
| height:100%;
 | |
| width:100%;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-object {
 | |
| position:absolute;
 | |
| width:100%;
 | |
| }
 | |
| 
 | |
| /* Navigation controls in viewer */
 | |
| #boxplus .boxplus-viewer > .boxplus-prev {
 | |
| position:absolute;
 | |
| width:57px;
 | |
| left:0;
 | |
| height:100%;
 | |
| background:transparent none no-repeat scroll left center;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-prev:hover {
 | |
| background:transparent url(navigation.png) no-repeat scroll -57px center;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-next {
 | |
| position:absolute;
 | |
| width:57px;
 | |
| right:0;
 | |
| height:100%;
 | |
| background:transparent none no-repeat scroll left center;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-next:hover {
 | |
| background:transparent url(navigation.png) no-repeat scroll 0 center;
 | |
| }
 | |
| 
 | |
| /* Image resizer */
 | |
| #boxplus .boxplus-viewer > .boxplus-resizer > * {
 | |
| position:absolute;
 | |
| top:6px;
 | |
| right:6px;
 | |
| width:20px;
 | |
| height:20px;
 | |
| background:transparent url(resize.png) no-repeat scroll 0 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-resizer > .boxplus-shrink {
 | |
| background-position:0 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-resizer > .boxplus-shrink:hover {
 | |
| background-position:0 -20px;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-resizer > .boxplus-enlarge {
 | |
| background-position:-20px 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-resizer > .boxplus-enlarge:hover {
 | |
| background-position:-20px -20px;
 | |
| }
 | |
| 
 | |
| /* Thumbnail navigation */
 | |
| #boxplus .boxplus-thumbs {
 | |
| display:block;
 | |
| overflow:hidden;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-thumbs {
 | |
| position:absolute;
 | |
| width:100%;
 | |
| bottom:0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-thumbs.boxplus-disabled {
 | |
| display:block !important;
 | |
| visibility:hidden !important;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-bottom > .boxplus-thumbs, #boxplus .boxplus-sideways > .boxplus-thumbs {
 | |
| position:relative;
 | |
| height:80px;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-thumbs {
 | |
| height:80px;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-thumbs > .boxplus-rewind {
 | |
| position:absolute;
 | |
| width:22px;
 | |
| left:0;
 | |
| height:100%;
 | |
| background:transparent url(buttons.png) no-repeat scroll -22px center;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-thumbs > .boxplus-forward {
 | |
| position:absolute;
 | |
| width:22px;
 | |
| right:0;
 | |
| height:100%;
 | |
| background:transparent url(buttons.png) no-repeat scroll 0 center;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-thumbs > ul {
 | |
| display:table-row;
 | |
| position:absolute;
 | |
| bottom:0;
 | |
| margin:0;
 | |
| border:0 none transparent;
 | |
| padding:4px 0;
 | |
| list-style-type:none;
 | |
| list-style-image:none;
 | |
| white-space:nowrap;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-thumbs > ul {
 | |
| visibility:hidden;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-thumbs:hover > ul {
 | |
| visibility:visible;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-thumbs > ul > li {
 | |
| margin:0;
 | |
| border:0 none transparent;
 | |
| padding:0;
 | |
| display:table-cell;
 | |
| background:transparent none no-repeat scroll 0 0 !important;
 | |
| text-align:center;
 | |
| vertical-align:middle;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-thumbs > ul > li > img {
 | |
| margin:4px;
 | |
| border:1px solid gray;
 | |
| padding:1px;
 | |
| max-width:60px;
 | |
| max-height:60px;
 | |
| vertical-align:middle;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-thumbs > ul > li.boxplus-active > img,
 | |
| #boxplus .boxplus-thumbs > ul > li > img:hover {
 | |
| border:1px solid red !important;
 | |
| }
 | |
| 
 | |
| /* Image caption */
 | |
| #boxplus .boxplus-bottom > .boxplus-caption {
 | |
| position:relative;
 | |
| margin:5px 0 0 0;
 | |
| max-height:60px;
 | |
| overflow:auto;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-title {
 | |
| font-weight:bold;
 | |
| }
 | |
| 
 | |
| /* Navigation controls under caption */
 | |
| #boxplus .boxplus-dialog .boxplus-controls {
 | |
| position:relative;
 | |
| margin:3px 0 0 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controls > div {
 | |
| display:inline-block;
 | |
| height:22px;
 | |
| width:22px;
 | |
| margin:2px;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controls > .boxplus-hidden {
 | |
| display:none;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controls > .boxplus-prev {
 | |
| background:transparent url(buttons.png) no-repeat scroll -22px 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controls > .boxplus-next {
 | |
| background:transparent url(buttons.png) no-repeat scroll 0 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controls > .boxplus-close {
 | |
| background:transparent url(buttons.png) no-repeat scroll -88px 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controls > .boxplus-start {
 | |
| background:transparent url(buttons.png) no-repeat scroll -110px 0;
 | |
| }
 | |
| 
 | |
| 
 | |
| 
 | |
| #boxplus .boxplus-controls > .boxplus-stop {
 | |
| background:transparent url(buttons.png) no-repeat scroll -132px 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controls > .boxplus-download {
 | |
| background:transparent url(buttons.png) no-repeat scroll -154px 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controls > .boxplus-metadata {
 | |
| background:transparent url(buttons.png) no-repeat scroll -176px 0;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-viewer > .boxplus-prev,
 | |
| #boxplus .boxplus-viewer > .boxplus-next,
 | |
| #boxplus .boxplus-thumbs,
 | |
| #boxplus .boxplus-thumbs > ul {
 | |
| background-image:url(transparent.gif);
 | |
| }
 | |
| 
 | |
| #boxplus div.boxplus-left {
 | |
| text-align:left;
 | |
| }
 | |
| 
 | |
| #boxplus div.boxplus-center {
 | |
| text-align:center;
 | |
| }
 | |
| 
 | |
| #boxplus div.boxplus-right {
 | |
| text-align:right;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-hidden {
 | |
| visibility:hidden;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-unavailable {
 | |
| display:none !important;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-disabled {
 | |
| display:none !important;
 | |
| }
 | |
| 
 | |
| #boxplus > span {
 | |
| display:none;
 | |
| }
 | |
| 
 | |
| 
 | |
| /* Phoca Edit */
 | |
| #boxplus .boxplus-dialog .boxplus-controlsclose {
 | |
| position:absolute;
 | |
| top: 5px;
 | |
| right: 5px;
 | |
| margin:3px 0 0 0;
 | |
| z-index: 1000;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controlsclose > div {
 | |
| 	display:inline-block;
 | |
| 	height:22px;
 | |
| 	width:22px;
 | |
| 	margin:2px;
 | |
| }
 | |
| 
 | |
| #boxplus .boxplus-controlsclose > .boxplus-close {
 | |
| 	background:transparent url(buttons.png) no-repeat scroll -88px 0;
 | |
| } |