github.com/slspeek/camlistore_namedsearch@v0.0.0-20140519202248-ed6f70f7721a/server/camlistored/ui/detail.css (about) 1 /* TODO(aa): All this needs to get renamed to image-detail */ 2 .detail-view { 3 background: black; 4 left: 0; 5 position: absolute; 6 overflow: hidden; 7 top: 0; 8 } 9 10 .detail-view-img { 11 opacity: 0; 12 position: absolute; 13 transition: opacity 200ms linear; 14 } 15 16 .detail-view-img-loaded { 17 opacity: 1; 18 } 19 20 .detail-img-leave { 21 transition: opacity 200ms linear; 22 opacity: 1; 23 } 24 .detail-img-leave.detail-img-leave-active { 25 opacity: 0; 26 } 27 28 .detail-view-sidebar { 29 background: #f9f9f9; 30 bottom: 0; 31 overflow: auto; 32 position: absolute; 33 right: 0; 34 top: 0; 35 } 36 37 .detail-view-piggy { 38 position: absolute; 39 } 40 41 .detail-view-piggy.detail-view-piggy-backward { 42 -webkit-transform: scaleX(-1); 43 transform: scaleX(-1); 44 } 45 46 .detail-piggy-leave { 47 transition: opacity 200ms linear; 48 opacity: 1; 49 } 50 51 .detail-piggy-leave.detail-piggy-leave-active { 52 opacity: 0; 53 } 54 55 .detail-title { 56 font-size: inherit; 57 margin: 0; 58 } 59 60 .detail-description { 61 margin-bottom: 0; 62 } 63 64 /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ 65 *, *:before, *:after { 66 -moz-box-sizing: border-box; 67 -webkit-box-sizing: border-box; 68 box-sizing: border-box; 69 } 70 71 .cam-detail { 72 position: absolute; 73 background: #222; 74 left: 0; 75 top: 0; 76 width: 100%; 77 overflow: hidden; 78 } 79 80 .cam-detail iframe { 81 background: white; 82 } 83 84 .cam-detail-aspect-nav { 85 position: absolute; 86 bottom: 0; 87 left: 0; 88 width: 100%; 89 } 90 91 .cam-detail-aspect-nav a { 92 color: #bbb; 93 display: inline-block; 94 font-family: 'Open Sans', sans-serif; 95 font-size: 14px; 96 margin-left: 1em; 97 padding: 0.5ex; 98 } 99 100 .cam-detail-aspect-nav a:hover { 101 color: #ddd; 102 }