芝麻web文件管理V1.00
编辑当前文件:/var/www/cognitio.in/wp-content/plugins/Ultimate_VC_Addons/assets/css/swatchbook.css
.ulsb-container { position: relative; width: 150px; height: 400px; margin: 30px auto 0 auto } .ulsb-container .ulsb-strip { position: absolute; top: 0; left: 0; width: 130px; background: #fff; height: 400px; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; text-align: center; background-image: url('../images/fabric.png'); -webkit-transform-origin: 25% 90%; -ms-transform-origin: 25% 90%; transform-origin: 25% 90%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 11px 11px 18px rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 11px 11px 18px rgba(0, 0, 0, 0.4) } .ulsb-container .ulsb-strip:nth-child(1) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1) } .ulsb-container .ulsb-strip:nth-child(2) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 2px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 2px 2px 1px rgba(0, 0, 0, 0.1) } .ulsb-container .ulsb-strip:nth-child(3) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 3px 3px 2px rgba(0, 0, 0, 0.2); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 3px 3px 2px rgba(0, 0, 0, 0.2) } .ulsb-container .ulsb-strip:nth-child(4) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 4px 4px 4px rgba(0, 0, 0, 0.2); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 4px 4px 4px rgba(0, 0, 0, 0.2) } .ulsb-container .ulsb-strip:nth-child(5) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 5px 5px 6px rgba(0, 0, 0, 0.3); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 5px 5px 6px rgba(0, 0, 0, 0.3) } .ulsb-container .ulsb-strip:nth-child(6) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 6px 6px 8px rgba(0, 0, 0, 0.3); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 6px 6px 8px rgba(0, 0, 0, 0.3) } .ulsb-container .ulsb-strip:nth-child(7) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 7px 7px 10px rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 7px 7px 10px rgba(0, 0, 0, 0.4) } .ulsb-container .ulsb-strip:nth-child(8) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 8px 8px 12px rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 8px 8px 12px rgba(0, 0, 0, 0.4) } .ulsb-container .ulsb-strip:nth-child(9) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 9px 9px 14px rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 9px 9px 14px rgba(0, 0, 0, 0.4) } .ulsb-container .ulsb-strip:nth-child(10) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 10px 10px 16px rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 10px 10px 16px rgba(0, 0, 0, 0.4) } .ulsb-container .ulsb-strip:nth-child(11) { -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 11px 11px 18px rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 11px 11px 18px rgba(0, 0, 0, 0.4) } .ulsb-container .ulsb-strip:last-child { background: #645b5c url('../images/cover.jpg') repeat center center; -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.2), 12px 12px 20px rgba(0, 0, 0, 0.6), inset 2px 2px 0 rgba(255, 255, 255, 0.1); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.2), 12px 12px 20px rgba(0, 0, 0, 0.6), inset 2px 2px 0 rgba(255, 255, 255, 0.1) } .ulsb-container .ulsb-strip:last-child:after { content: ''; position: absolute; bottom: 15px; left: 15px; width: 20px; height: 20px; -webkit-border-radius: 50%; border-radius: 50%; background: #ddd; background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #ddd), color-stop(48%, #58535e), color-stop(100%, #889396)); background: -webkit-linear-gradient(-45deg, #ddd 0, #58535e 48%, #889396 100%); background: -webkit-linear-gradient(315deg, #ddd 0, #58535e 48%, #889396 100%); background: linear-gradient(135deg, #ddd 0, #58535e 48%, #889396 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#889396', GradientType=1); -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.1); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.1) } .ulsb-container .ulsb-strip h4 { color: rgba(255, 255, 255, 0.9); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); font-weight: 700; font-size: 16px; line-height: 1.3em; border-top: 1px dashed rgba(0, 0, 0, 0.1); border-bottom: 1px dashed rgba(0, 0, 0, 0.1); margin: 5px; padding: 5px; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .ulsb-container .ulsb-strip:last-child h4 { background: rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1) } .ulsb-container .ulsb-strip:last-child h5 { font-size: 35px; white-space: nowrap; text-align: left; margin: 0; padding: 0; position: relative; line-height: 1.3em; width: 100%; height: -webkit-calc(100% - 75px); height: calc(100% - 75px); color: #111; text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1); text-transform: uppercase } .ulsb-container .ulsb-strip:last-child h5 span { -webkit-transform: rotate(-90deg) translateX(0) translateY(-50%); -ms-transform: rotate(-90deg) translateX(0) translateY(-50%); transform: rotate(-90deg) translateX(0) translateY(-50%); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; left: 100%; right: 0; bottom: 0; text-align: right; display: block } .ulsb-container.ulsb-style-2 .ulsb-strip:last-child h5 { -webkit-transform: rotateZ(90deg) translateX(58%) translateY(-105%); -ms-transform: rotateZ(90deg) translateX(58%) translateY(-105%); transform: rotateZ(90deg) translateX(58%) translateY(-105%) } .ulsb-container .ulsb-icon { display: inline-block; height: auto; width: 100%; margin: 20px auto; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .ulsb-container.ulsb-responsive { position: relative; width: 100%; height: 100%; display: block; float: left; margin: 10px 0 30px; padding: 0 } .ulsb-container.ulsb-responsive .ulsb-strip { position: relative; width: 130px; height: 400px; float: left; margin: 0 15px 15px 0; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 2px 2px 5px rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1), 2px 2px 5px rgba(0, 0, 0, 0.4) } .ulsb-container.ulsb-responsive .ulsb-strip:last-child:after { content: none }