/*{{{ .Coverselle */ .Coverselle { .transition(background .25s); background-repeat: no-repeat; background-position: center; background-image: url("../images/Coverselle/loading.gif"); &, .box { text-align: center; width: 100%; display: block; position: relative; overflow: hidden; margin: 0px auto; height: 220px + 4px; white-space: nowrap; font-size: 0; } .box { position: absolute; left: 0; padding-top: 20px; } item { z-index: 0; .m-transition(width .25s, height .25s, margin .25s, background .25s); cursor: pointer; margin: 0px auto; margin-left: -160px; .box-shadow(~"0px 0px 20px #353130"); border: 1px solid #333333; border: 1px solid darken(@mid-panel-color,20%); border: 0px; background-color: darken(@mid-panel-color,20%); vertical-align: middle; vertical-align: top; display: inline-block; position: relative; overflow: hidden; text-align: center; margin-top: 10px; margin-bottom: 10px; .box-sizing(border-box); width: 160px; height: 160px; &:first-child { margin-left: 0px; } item-info { .transition(all .25s); position: relative; position: absolute; left: -10px; bottom: -15px; white-space: normal; width: 180px; overflow: hidden; text-overflow: ellipsis; font-size: @font-size-small; .opacity(0); item-price, item-artist, item-name, item-more { display: block; background-color: rgba(0,0,0,.7); padding: .2em 0; color: #FFF; } item-more + item-more { padding-top: 0px; } item-artist { padding-bottom: .1em; } item-name { padding-top: .1em; color: #DDCC77; } item-more { background-color: rgba(0,0,0,.35); } item-price { background-color: rgba(0,0,0,.15); padding-bottom: 9px; .buttons { display: block; padding-top: 6px; height: 32px; overflow: hidden; .btn { #gradient > .vertical(@start-color: @button-color1; @end-color: @button-color2); border-color: @mood-text-color; border-radius: 4px; color: @red-panel-color; padding: 1px 10px; height: 26px; > b { font-weight: normal; font-size: 120%; } &:focus, &:hover { #gradient > .vertical(@start-color: lighten(@red-panel-color,10%); @end-color: darken(@red-panel-color,10%)); color: lighten(@light-panel-color,10%); } &.action-price, &.cart { #gradient > .vertical(@start-color: lighten(@red-panel-color,10%); @end-color: darken(@red-panel-color,10%)); color: lighten(@light-panel-color,10%); &:focus, &:hover { #gradient > .vertical(@start-color: lighten(@red-panel-color,15%); @end-color: darken(@red-panel-color,5%)); color: lighten(@light-panel-color,10%); } } &.cart { padding-left: 5px; padding-right: 5px; width: 28px; } &.old-price { background: none; color: @red-panel-color; border: 1px solid transparent; text-decoration: line-through; padding-left: 8px; padding-right: 4px; cursor: default; } } } } } album-shade { .transition(all .5s); background-color: rgba(0,0,0,.3); background-position: center; background-repeat: no-repeat; background-size: 200px 200px; height: 200px; width: 200px; display: inline-block; margin: 0 auto; } background-repeat: no-repeat; background-position: center; background-size: 160px 160px; &.prev { border-right-width: 0px; album-cover { float: left; } } &.next { border-left-width: 0px; album-cover { float: right; } } &.dist0 { z-index: 10; album-shade { background-color: rgba(0,0,0,.15); } } &.dist1 { z-index: 10 - 1; } &.dist2 { z-index: 10 - 2; } &.dist3 { z-index: 10 - 3; } &.dist4 { z-index: 10 - 4; } &.dist5 { z-index: 10 - 5; } &.dist6 { z-index: 10 - 6; } &.dist7 { z-index: 10 - 7; } &.dist8 { z-index: 10 - 8; } &.dist9 { z-index: 10 - 9; } &.this { z-index: 10; border: 2px solid @background-color; border: 2px solid #FFF; .box-shadow(~"0px 0px 10px 6px #993300"); border-radius: 4px; margin-top: 0px; margin-bottom: 0px; width: 180px + 4px; height: 180px + 4px; item-info { bottom: 0px; left: 0px; .opacity(.95); } album-shade { background-color: rgba(0,0,0,0); } background-size: 180px 180px; } } .go { z-index: 100; width: 50px; height: 50px; position: absolute; top: 90px; background-image: url("../images/Coverselle/go-left.png"); background-repeat: no-repeat; background-size: 40px 40px; background-position: center; .opacity(.25); .transition(all .25s); &.active { .opacity(1); cursor: pointer; } &.go-left { left: 0px; } &.go-right { right: 0px; background-image: url("../images/Coverselle/go-right.png"); } &.active:hover { background-size: 50px 50px; .opacity(.9); } &.active.waiting { background-size: 56px 56px; .opacity(.35); } } } /*}}}*/