gray out inactive controls
[mkgallery.git] / include / gallery.css
index e5c5e82a936ccb9978c4f2efa91ca3f4c0768ba9..e06e65af103a62f38f46680a75ae6e804e7e2981 100644 (file)
@@ -1,4 +1,6 @@
 /*
+       $Id$
+
        This is a part of mkgallery.pl suite
        http://www.average.org/mkgallery/
 */
@@ -77,14 +79,198 @@ table.picframe {
  background: url(loading.gif) center no-repeat;
 }
 
-.slideshowWindow {
+.slideshowContainer {
  background-color: black;
+ width: 100%;
 }
 
-.slideshowContainer {
- border: 1px solid #ccc;
- width: 99%;
- height: 95%;
- margin-bottom: 5px;
+.slideshowControls {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ height: 30px;
+ z-index: 3;
+ opacity: .15;
+ color: white;
+}
+
+.slideshowControls:hover {
+ opacity: 1;
+}
+
+.controlButton {
+ position: absolute;
+ bottom: 3px;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+}
+
+.controlButton#prev {
+ left: 3px;
+ background: url(left.png) no-repeat;
+}
+
+.controlButton#prevDisabled {
+ left: 3px;
+ background: url(leftDisabled.png) no-repeat;
+ cursor: default;
+}
+
+.controlButton#stop {
+ left: 28px;
+ background: url(stop.png) no-repeat;
+}
+
+.controlButton#play {
+ left: 28px;
+ background: url(play.png) no-repeat;
+}
+
+.controlButton#next {
+ left: 53px;
+ background: url(right.png) no-repeat;
+}
+
+.controlButton#nextDisabled {
+ left: 53px;
+ background: url(rightDisabled.png) no-repeat;
+ cursor: default;
+}
+
+.controlButton#exit {
+ left: 78px;
+ background: url(close.png) no-repeat;
+}
+
+.controlButton#comm {
+ left: 103px;
+ width: auto;
+ font-size: 20px;
+ margin-left: .5ex;
+ margin-right: .5ex;
+ padding-left: .5ex;
+ padding-right: .5ex;
+ background-color: rgba(0,0,0,.5);
+ cursor: default;
+}
+
+.controlButton#comm a {
+ color: white;
+ text-decoration: none;
+}
+
+.controlPosition {
+ vertical-align: middle;
+ font-size: 10px;
+ margin-right: 1ex;
 }
 
+.MultiBoxContainer {
+       position: absolute;
+       border: 2px solid #000;
+       background-color: #FFF;
+       display: none;
+       z-index: 2;
+       text-align: left;
+}
+
+.MultiBoxLoading {
+       background: url(loading.gif) no-repeat center;
+}
+
+.MultiBoxContent {
+       position: relative;
+       width: 100%;
+       height: 100%;
+       overflow: hidden;
+}
+
+.MultiBoxClose {
+       position: absolute;
+       top: 0px;
+       right: 0px;
+       background: url(close.png) no-repeat;
+       width: 24px;
+       height: 24px;
+       cursor: pointer;
+}
+
+
+.MultiBoxControlsContainer {
+       overflow: hidden;
+       height: 0px;
+       width: 100%;
+}
+
+.MultiBoxControls {
+       width: 100%;
+       height: auto;
+       position: relative;
+       background-color: #000000;
+}
+
+
+.MultiBoxPrevious {
+       position: absolute;
+       background: url(left.png) no-repeat;
+       width: 24px;
+       height: 24px;
+       left: 0px;
+       margin-top: 5px;
+       cursor: pointer;
+}
+
+.MultiBoxNext {
+       position: absolute;
+       background: url(right.png) no-repeat;
+       width: 24px;
+       height: 24px;
+       right: 0px;
+       margin-top: 5px;
+       cursor: pointer;
+}
+
+.MultiBoxNextDisabled {
+       cursor: default;
+       background: url(rightDisabled.png) no-repeat;
+}
+
+.MultiBoxPreviousDisabled {
+       cursor: default;
+       background: url(leftDisabled.png) no-repeat;
+}
+
+.MultiBoxTitle {
+       position: relative;
+       margin: 10px 0 0 35px;
+       float: left;
+       font-family: Verdana, Arial, Helvetica, sans-serif;
+       font-size: 11px;
+       color: #FFF;
+       font-weight: bold;
+       text-align: left;
+}
+
+.MultiBoxNumber {
+       position: relative;
+       width: 50px;
+       margin: 10px 35px 0 0;
+       float: right;
+       font-family: Verdana, Arial, Helvetica, sans-serif;
+       font-size: 11px;
+       color: #FFF;
+       text-align: right;
+}
+
+.MultiBoxDescription {
+       clear: left;
+       position: relative;
+       margin: 0 35px 0 35px;
+       padding-top: 5px;
+       font-family: Verdana, Arial, Helvetica, sans-serif;
+       font-size: 11px;
+       color: #FFF;
+       text-align: left;
+}