artabro/wire/modules/Inputfield/InputfieldImage/InputfieldImage.css

2 lines
15 KiB
CSS
Raw Permalink Normal View History

2024-08-27 11:35:37 +02:00
.InputfieldImage .InputfieldHeader .InputfieldImageListToggle{float:right;padding-right:.75em;position:relative}.InputfieldImage .InputfieldHeader .InputfieldImageListToggle--active{opacity:.5}.InputfieldImage .InputfieldHeader .InputfieldImageListToggle:first-child{padding-right:1em}.InputfieldImage .InputfieldHeader .InputfieldImageSizeSlider{float:right;width:100px;position:relative;top:8px;right:1em}.InputfieldImage .InputfieldHeader .InputfieldImageSizeSlider .ui-slider-handle{outline:none}.InputfieldImage.InputfieldFileEmpty .InputfieldImageListToggle,.InputfieldImage.InputfieldFileEmpty .InputfieldImageSizeSlider,.InputfieldImage.InputfieldStateCollapsed .InputfieldImageListToggle,.InputfieldImage.InputfieldStateCollapsed .InputfieldImageSizeSlider{display:none}.InputfieldImageErrors{padding-left:0;margin-left:0}.InputfieldImageErrors li{margin-bottom:.5em;margin-top:0;color:#fff;background-color:#fc3a3f;padding:.3em .5em}.gridImages{list-style:none;padding-left:0;position:relative;margin:0;margin-right:-0.6em;display:block;list-style:none}.gridImage .gridImage__overflow,.InputfieldImageEditAll .gridImage .gridImage__overflow img,.InputfieldImageEdit__image{background-color:#fefefe;background-image:linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);background-size:16px 16px;background-position:0 0,8px 8px}.gridImage{list-style:none;position:relative;display:inline-block;box-shadow:0 1px 3px rgba(0,0,0,.2);border-radius:2px;background:#fff;padding:.4em;vertical-align:top;border:1px dashed transparent}li.gridImage{display:inline-block;margin:0 .6em .6em 0}.gridImage__overflow{width:100%;height:100%;overflow:hidden;position:relative}.gridImage__overflow>img{position:absolute;top:50%;left:50%;-ms-transform:translate3d(-50%, -50%, 0);transform:translate3d(-50%, -50%, 0)}.gridImage.gridImagePlaceholder .gridImage__overflow{background:#fff}.gridImage.ui-sortable-placeholder{display:inline-block;border-radius:2px;border:1px dashed #ccc;padding:.4em;visibility:visible !important;vertical-align:top;background-color:transparent;box-shadow:none}.gridImage.ui-sortable-placeholder::after{content:" ";display:block}.gridImage__hover{position:absolute;top:0;left:0;width:100%;height:100%;padding:.4em}.gridImage__inner{position:relative;width:100%;height:100%}.gridImage:hover .gridImage__inner{background:rgba(62,185,152,.7)}.gridImage__resize{position:absolute;display:block;height:100%;width:100%;line-height:130px;text-align:center;color:#fff;font-size:1.3em;cursor:move;text-shadow:0 0 7px rgba(62,185,152,.7)}.gridImage__resize.pw-resizing{text-shadow:none;background:rgba(0,0,0,.7)}.gridImage__progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;color:#3eb998;width:100%;height:10px;background:transparent;position:absolute;bottom:0;left:0}.gridImage__progress::-webkit-progress-bar{background-color:inherit}.gridImage__progress[value]::-webkit-progress-value{background-color:#3eb998}.gridImage__progress[value]::-moz-progress-bar{background-color:#3eb998}.gridImage__progress[value="-1"]{background-color:#e83561}.gridImage__btn{position:relative;float:left;background:#fff;padding:.2em .6em;color:#aaa;z-index:2;cursor:pointer}.gridImage .gridImage__btn{display:none}.gridImage__btn--single{display:block !important;position:static}.gridImage__btn>input{display:none}.gridImage:hover .gridImage__btn{display:block}.gridImage:hover .gridImage__btn:hover{display:block;color:#e83561;background-color:#fff}.gridImage__edit{position:absolute;display:block;height:100%;width:100%;line-height:130px;text-align:center;color:#fff !important;font-size:1.3em;cursor:move;text-shadow:0 0 7px rgba(62,185,152,.7);display:none}.gridImage__edit span{cursor:pointer}.gridImage:hover .gridImage__edit{display:block}.gridImage__edit:hover{color:#fff}.gridImage__tooltip{pointer-events:none;position:absolute;bottom:100%;padding:20px;-webkit-filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));filter:drop-shadow(0 0