1 | ul.thumbnails { overflow: hidden; background: inherit; } |
---|
2 | |
---|
3 | ul.thumbnails .gdthumb { position: relative; overflow: hidden; float: left; display: inline; background: inherit !important; } |
---|
4 | ul.thumbnails .gdthumb a { position: absolute; z-index:0; } |
---|
5 | |
---|
6 | ul.thumbnails .gdthumb a img.thumbnail, ul.thumbnails .gdthumb a img.thumbnail:hover { border: 0 none; margin: 0; padding: 0; top: 0; border-radius: 0; } |
---|
7 | |
---|
8 | ul.thumbnails .gdthumb.animate img { -webkit-transition: 700ms; -moz-transition: 700ms; -o-transition: 700ms; transition: 700ms; } |
---|
9 | ul.thumbnails .gdthumb.animate:hover img { transform: scale(1.5,1.5) rotate(10deg); -ms-transform: scale(1.5,1.5) rotate(10deg); -webkit-transform: scale(1.5,1.5) rotate(10deg); -o-transform: scale(1.5,1.5) rotate(10deg); -moz-transform: scale(1.5,1.5) rotate(10deg); } |
---|
10 | |
---|
11 | ul.thumbnails .gdthumb .thumbLegend { position: absolute; z-index: 1; height: 5em; left:0; right:0; padding:5px 0; width:100%; background:rgba(0,0,0,0.7); text-align:center; overflow:hidden; color:#aaa; padding-left: 4px; padding-right: 4px; } |
---|
12 | ul.thumbnails .gdthumb.slide .thumbLegend { background: inherit; height: auto; } |
---|
13 | |
---|
14 | ul.thumbnails .thumbLegend .thumbName { display:block; color:#eee; } |
---|
15 | ul.thumbnails .thumbLegend .thumbName span { display:block; overflow: hidden; text-overflow:ellipsis; } |
---|
16 | ul.thumbnails .thumbLegend .thumbTitle { font-weight:bold; color:#eee; } |
---|
17 | .thumbnailCategories li { width: auto; } |
---|
18 | |
---|
19 | /* Top overlay */ |
---|
20 | ul.thumbnails .gdthumb .thumbLegend.top { bottom:auto; top:-6em; -webkit-transition:all 200ms ease-out; -moz-transition:all 200ms ease-out; -ms-transition:all 200ms ease-out; -o-transition:all 200ms ease-out; transition:all 200ms ease-out; } |
---|
21 | ul.thumbnails .gdthumb:hover .thumbLegend.top { top:0px; } |
---|
22 | |
---|
23 | /* Top Static overlay */ |
---|
24 | ul.thumbnails .gdthumb .thumbLegend.top_static { } |
---|
25 | |
---|
26 | /* Bottom overlay */ |
---|
27 | ul.thumbnails .gdthumb .thumbLegend.bottom { bottom:-6em; top:auto; -webkit-transition:all 200ms ease-out; -moz-transition:all 200ms ease-out; -ms-transition:all 200ms ease-out; -o-transition:all 200ms ease-out; transition:all 200ms ease-out; } |
---|
28 | ul.thumbnails .gdthumb:hover .thumbLegend.bottom { bottom:0px; } |
---|
29 | |
---|
30 | /* Bottom Static overlay */ |
---|
31 | ul.thumbnails .gdthumb .thumbLegend.bottom_static { bottom:0; top:auto; } |
---|
32 | |
---|
33 | /* "Overlay" overlay */ |
---|
34 | ul.thumbnails .gdthumb .thumbLegend.overlay { visibility: hidden; top: 0; bottom: 0; height: auto; opacity: 0; cursor: pointer; } |
---|
35 | ul.thumbnails .gdthumb:hover .thumbLegend.overlay { visibility: visible; opacity: 1; transition: opacity 200ms linear; -o-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; } |
---|
36 | ul.thumbnails .gdthumb .thumbLegend.overlay .thumbName { position: absolute; bottom: 0px; width: 100%; text-align: left; padding-left: 1em; padding-bottom: 0.8em; } |
---|
37 | ul.thumbnails .gdthumb .thumbLegend.overlay .thumbTitle { font-size: 1.2em; } |
---|
38 | |
---|
39 | /* "Overlay Ex" overlay */ |
---|
40 | ul.thumbnails .gdthumb .thumbLegend.overlay-ex { visibility: hidden; top: 0; bottom: 0; height: auto; opacity: 0; cursor: pointer; padding: 0; background-color: rgba(6, 6, 6, 0.8); } |
---|
41 | ul.thumbnails .gdthumb:hover .thumbLegend.overlay-ex { visibility: visible; opacity: 1; transition: opacity 200ms linear; -o-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; } |
---|
42 | |
---|
43 | ul.thumbnails .gdthumb .thumbLegend.overlay-ex .thumbName { position: absolute; bottom: 0px; width: 100%; text-align: left; top: 0; } |
---|
44 | ul.thumbnails .gdthumb .thumbLegend.overlay-ex .thumbTitle { position: absolute; left: 10px; right: 10px; top: 10px;font-size: 1.2em; text-transform: uppercase; } |
---|
45 | ul.thumbnails .gdthumb .thumbLegend.overlay-ex .thumbInfo { position: absolute; bottom: 10px; left: 10px; right: 10px; padding-top: 6px; border-top: 1px solid #aaa; text-align: left; } |
---|
46 | ul.thumbnails .gdthumb .thumbLegend.overlay-ex .thumbInfo span { display: inline-block; } |
---|
47 | ul.thumbnails .gdthumb .overlay-ex.thumbLegend .thumbInfo .item-num { background-color: #cc3333; min-width: 15px; height: 16px; display: block; color: #fff; float: left; line-height: 16px; padding: 1px; padding-top: 0px; padding-right: 4px; padding-left: 4px; margin-top: 5px; margin-right: 6px; font-size: 10px; text-align: center; } |
---|
48 | ul.thumbnails .gdthumb .overlay-ex.thumbLegend .thumbInfo .hit-num { background-color: #036FE5; min-width: 15px; height: 16px; display: block; color: #fff; float: left; line-height: 16px; padding: 1px; padding-top: 0px; padding-right: 4px; padding-left: 4px; margin-top: 4px; margin-right: 6px; font-size: 10px; text-align: center; } |
---|
49 | ul.thumbnails .gdthumb .overlay-ex.thumbLegend .thumbInfo .rank-num { float: right; margin-top: 2px; vertical-align: middle; height: 20px; line-height: 20px; } |
---|
50 | ul.thumbnails .gdthumb .overlay-ex.thumbLegend .thumbInfo .glyphicon { padding-top: 3px; font-size: 17px; } |
---|
51 | |
---|
52 | ul.thumbnails.nowrap .gdthumb .thumbLegend { white-space: nowrap; overflow: hidden; height: auto; } |
---|
53 | |
---|
54 | body.theme-whitehawk .gdthumb.slide { border: 1px solid #000; } |
---|
55 | body.theme-whitehawk .gdthumb.slide .thumbLegend.bottom_static { background: #FFF; color: #555; } |
---|
56 | body.theme-whitehawk .gdthumb.slide .thumbLegend.bottom_static .thumbTitle { color: #555; } |
---|
57 | body.theme-whitehawk .gdthumb.slide .thumbLegend.bottom_static .thumbName { color: #555; } |
---|