pip-webui
Version:
HTML5 UI for LOB applications
1 lines • 15.8 kB
CSS
@-webkit-keyframes blink-hint{0%,100%{opacity:.38}50%{opacity:1}}@-moz-keyframes blink-hint{0%,100%{opacity:.38}50%{opacity:1}}@-o-keyframes blink-hint{0%,100%{opacity:.38}50%{opacity:1}}@keyframes blink-hint{0%,100%{opacity:.38}50%{opacity:1}}.pip-picture{display:inline-block;position:relative;overflow:hidden}.pip-picture>img{display:block;top:0;left:0;width:100%;height:auto}.pip-picture>div{position:absolute;display:none;top:0;left:0;width:100%;height:100%;background-color:#eee}.pip-collage{display:block;width:100%;position:relative}.pip-collage .pip-collage-section{width:100%;height:200px;margin-top:8px;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-direction:column;-moz-box-flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.pip-collage .pip-collage-section:first-of-type{margin-top:0}.pip-collage .pip-full-width{width:100%}.pip-collage .pip-full-height{height:100%}.pip-collage .pip-picture-group{max-width:100%;max-height:100%}.pip-collage .pip-picture-container{display:block;position:relative;max-width:100%;max-height:100%}.pip-collage .pip-picture{position:absolute;left:0;right:0;top:0;bottom:0}.pip-collage .pip-picture.pip-top{top:4px}.pip-collage .pip-picture.pip-bottom{bottom:4px}.pip-collage .pip-picture.pip-left{left:4px}.pip-collage .pip-picture.pip-right{right:4px}.pip-collage .pip-picture div{background:0 0}.pip-avatar{display:inline-block;position:relative;overflow:hidden;outline:0}.pip-avatar>md-icon{display:block;position:relative}.pip-avatar>div{position:absolute;display:none;top:0;left:0;width:100%;height:100%}.pip-avatar>div>span{display:block;position:absolute;top:50%;left:50%;margin-top:-.5em;margin-left:-.5em;width:1em;height:1em;line-height:1em;font-size:74px;color:#c9c9c9;text-align:center;text-transform:uppercase}.pip-avatar,.pip-avatar md-icon{width:80px;height:80px}.pip-avatar{margin:0;padding:0}.pip-face md-icon,.pip-face-lg md-icon,.pip-face-md md-icon,.pip-face-sm-md md-icon,.pip-face-xl md-icon,.pip-face-xxl md-icon,.pip-sface md-icon,.pip-sface-lg md-icon,.pip-sface-md md-icon,.pip-sface-sm md-icon,.pip-sface-xl md-icon,.pip-sface-xxl md-icon{vertical-align:top;padding:0;position:relative}.pip-avatar md-icon.default_icon{width:48px;height:48px}.pip-avatar-color-0>div{background-color:#ef5350}.pip-avatar-color-1>div{background-color:#ec407a}.pip-avatar-color-2>div{background-color:#ab47bc}.pip-avatar-color-3>div{background-color:#7e57c2}.pip-avatar-color-4>div{background-color:#5c6bc0}.pip-avatar-color-5>div{background-color:#03a9f4}.pip-avatar-color-6>div{background-color:#00bcd4}.pip-avatar-color-7>div{background-color:#009688}.pip-avatar-color-8>div{background-color:#4caf50}.pip-avatar-color-9>div{background-color:#8bc34a}.pip-avatar-color-10>div{background-color:#cddc39}.pip-avatar-color-11>div{background-color:#ffc107}.pip-avatar-color-12>div{background-color:#ff9800}.pip-avatar-color-13>div{background-color:#ff5722}.pip-avatar-color-14>div{background-color:#795548}.pip-avatar-color-15>div{background-color:#607d8b}.pip-face-xxl{width:180px;height:180px;height:180px;border-radius:90px;text-align:center}.pip-face-xxl div,.pip-face-xxl img,.pip-face-xxl md-icon svg{border-radius:50%}.pip-face-xxl img{width:auto;height:auto}.pip-face-xxl md-icon{border-radius:50%;width:180px;height:180px;margin:0}.pip-face-xxl div md-icon.default_icon{width:112px;height:112px;margin-top:34px;fill:#fff;font-size:112px;font-family:arial}.pip-face-xl{width:100px;height:100px;height:100px;border-radius:50px;text-align:center}.pip-face-xl div,.pip-face-xl img,.pip-face-xl md-icon svg{border-radius:50%}.pip-face-xl img{width:auto;height:auto}.pip-face-xl md-icon{border-radius:50%;width:100px;height:100px;margin:0}.pip-face-xl div md-icon.default_icon{width:50px;height:50px;margin-top:25px;fill:#fff;font-size:50px;font-family:arial}.pip-face-lg{width:80px;height:80px;height:80px;border-radius:40px;text-align:center}.pip-face-lg div,.pip-face-lg img,.pip-face-lg md-icon svg{border-radius:50%}.pip-face-lg img{width:auto;height:auto}.pip-face-lg md-icon{border-radius:50%;width:80px;height:80px;margin:0}.pip-face-lg div md-icon.default_icon{width:48px;height:48px;margin-top:16px;fill:#fff;font-size:48px;font-family:arial}.pip-face-md{width:64px;height:64px;height:64px;border-radius:32px;text-align:center}.pip-face-md div,.pip-face-md img,.pip-face-md md-icon svg{border-radius:50%}.pip-face-md img{width:auto;height:auto}.pip-face-md md-icon{border-radius:50%;width:64px;height:64px;margin:0}.pip-face-md div md-icon.default_icon{width:38px;height:38px;margin-top:13px;fill:#fff;font-size:38px;font-family:arial}.pip-face{width:40px;height:40px;height:40px;border-radius:20px;text-align:center}.pip-face div,.pip-face img,.pip-face md-icon,.pip-face md-icon svg{border-radius:50%}.pip-face img{width:auto;height:auto}.pip-face md-icon{width:40px;height:40px;margin:0}.pip-face div md-icon.default_icon{width:24px;height:24px;margin-top:8px;fill:#fff;font-size:24px;font-family:arial}.pip-face-sm-md{width:56px;height:56px;height:56px;border-radius:28px;text-align:center}.pip-face-sm-md img{border-radius:50%;width:auto;height:auto}.pip-face-sm-md md-icon{border-radius:50%;width:56px;height:56px;margin:0}.pip-face-sm-md div,.pip-face-sm-md md-icon svg{border-radius:50%}.pip-face-sm-md div md-icon.default_icon{width:24px;height:24px;margin-top:16px;fill:#fff;font-size:24px;font-family:arial}.pip-face-sm{width:30px;height:30px;height:30px;border-radius:15px;text-align:center}.pip-face-sm div,.pip-face-sm img,.pip-face-sm md-icon svg{border-radius:50%}.pip-face-sm img{width:auto;height:auto}.pip-face-sm md-icon{border-radius:50%;position:relative;width:30px;height:30px;vertical-align:top;margin:0;padding:0}.pip-face-sm div md-icon.default_icon{width:18px;height:18px;margin-top:6px;fill:#fff;font-size:18px;font-family:arial}.pip-sface-xxl{width:180px;height:180px;text-align:center}.pip-sface-xxl img{width:auto;height:auto}.pip-sface-xxl md-icon{width:180px;height:180px;margin:0}.pip-sface-xxl div md-icon.default_icon{width:112px;height:112px;margin-top:34px;fill:#fff;font-size:112px;font-family:arial}.pip-sface-xl{width:100px;height:100px;text-align:center}.pip-sface-xl img{width:auto;height:auto}.pip-sface-xl md-icon{width:100px;height:100px;margin:0}.pip-sface-xl div md-icon.default_icon{width:50px;height:50px;margin-top:25px;fill:#fff;font-size:50px;font-family:arial}.pip-sface-lg{width:80px;height:80px;text-align:center}.pip-sface-lg img{width:auto;height:auto}.pip-sface-lg md-icon{width:80px;height:80px;margin:0}.pip-sface-lg div md-icon.default_icon{width:48px;height:48px;margin-top:16px;fill:#fff;font-size:48px;font-family:arial}.pip-sface-md{width:64px;height:64px;text-align:center}.pip-sface-md img{width:auto;height:auto}.pip-sface-md md-icon{width:64px;height:64px;margin:0}.pip-sface-md div md-icon.default_icon{width:38px;height:38px;margin-top:13px;fill:#fff;font-size:38px;font-family:arial}.pip-sface{width:40px;height:40px;text-align:center}.pip-sface img{width:auto;height:auto}.pip-sface md-icon{width:40px;height:40px;margin:0}.pip-sface div md-icon.default_icon{width:24px;height:24px;margin-top:8px;fill:#fff;font-size:24px;font-family:arial}.pip-sface-sm{width:30px;height:30px;text-align:center}.pip-sface-sm img{width:auto;height:auto}.pip-sface-sm md-icon{width:30px;height:30px;margin:0}.pip-sface-sm div md-icon.default_icon{width:18px;height:18px;margin-top:6px;fill:#fff;font-size:18px;font-family:arial}.pip-picture-upload.pip-picture-drop{border-style:dashed;cursor:pointer}.pip-picture-upload{position:relative;width:80px;height:80px;border:1px solid #c9c9c9;border-radius:2px;background-color:#f0f0f0;overflow:hidden}.pip-picture-upload.pip-picture-error{border-color:#ff5252;border-style:dashed}.pip-picture-upload.pip-picture-error .pip-default-text{margin-left:15px;margin-top:15px;height:50px;width:50px;border-radius:50%;background-color:#ff5252}.pip-picture-upload.pip-picture-error .pip-default-text md-icon{margin-top:-31px;color:#fff}.pip-picture-upload img{position:absolute;top:0;left:0;border-radius:2px;display:block;width:100%;height:auto}.pip-picture-upload img.pip-image-new{opacity:.5}.pip-picture-upload .pip-picture-drop{position:absolute;top:0;left:0;opacity:0;filter:alpha(opacity=0);width:80px;height:80px;cursor:pointer}.pip-picture-upload md-progress-linear{position:absolute;bottom:0;left:0;width:80px}.pip-picture-upload .md-button.md-icon-button{position:absolute;top:4px;right:4px;width:20px;height:20px;height:20px;border-radius:10px;min-width:20px;min-height:20px;background-color:rgba(0,0,0,.25);margin:0;padding:0}.pip-dialog.pip-picture-url-dialog .pip-no-images,.pip-gallery-search-dialog .pip-no-images{min-height:160px}.pip-picture-upload .md-button.md-icon-button>md-icon{margin-top:-5px;width:16px;height:16px;fill:#fff}.pip-picture-upload .md-button.md-icon-button:active,.pip-picture-upload .md-button.md-icon-button:focus,.pip-picture-upload .md-button.md-icon-button:hover{background-color:rgba(0,0,0,.54)}.pip-picture-upload .pip-default-icon,.pip-picture-upload .pip-default-text{position:absolute;display:block;top:0;left:0;width:80px;height:80px;line-height:80px;text-align:center;overflow:hidden}.pip-dialog.pip-gallery-search-dialog md-dialog-content,.pip-dialog.pip-picture-url-dialog md-dialog-content{overflow-y:overlay}.pip-picture-upload .pip-default-icon md-icon{display:inline-block;vertical-align:middle;width:74px;height:74px;color:#c9c9c9}.pip-picture-upload .pip-default-text span{padding:4px;display:inline-block;font-size:10px;line-height:1.2em;vertical-align:middle;color:#3f3f3f}.blue .pip-picture-upload.pip-picture-drop:focus,.blue .pip-picture-upload:focus{border:1px solid rgba(33,150,243,.54)}.pink .pip-picture-upload.pip-picture-drop:focus,.pink .pip-picture-upload:focus{border:1px solid rgba(188,86,121,.54)}.orange .pip-picture-upload.pip-picture-drop:focus,.orange .pip-picture-upload:focus{border:1px solid rgba(255,112,67,.54)}.amber .pip-picture-upload.pip-picture-drop:focus,.amber .pip-picture-upload:focus{border:1px solid rgba(255,152,0,.54)}.green .pip-picture-upload.pip-picture-drop:focus,.green .pip-picture-upload:focus{border:1px solid rgba(76,175,80,.54)}.navy .pip-picture-upload.pip-picture-drop:focus,.navy .pip-picture-upload:focus{border:1px solid rgba(86,97,125,.54)}.grey .pip-picture-upload.pip-picture-drop:focus,.grey .pip-picture-upload:focus{border:1px solid rgba(96,125,139,.54)}.dark .pip-picture-upload.pip-picture-drop:focus,.dark .pip-picture-upload:focus{border:1px solid rgba(33,33,33,.54)}.black .pip-picture-upload.pip-picture-drop:focus,.black .pip-picture-upload:focus{border:1px solid rgba(38,50,56,.54)}.pip-picture-list-edit{display:block;margin:0 -8px -8px 0}.pip-picture-list-edit .pip-picture-upload{display:block;float:left;margin:0 8px 8px 0}.pip-gallery-search-dialog md-input-container{margin-bottom:0;margin-top:0}.pip-gallery-search-dialog .pip-header>h3{margin:-10px 0 0 -26px}.pip-gallery-search-dialog .pip-header input{background-color:transparent}.pip-picture-dialog .button-hide{opacity:0;z-index:-999}@media (min-width:1200px){md-dialog.pip-gallery-search-dialog.pip-picture-dialog{width:508px;min-width:508px}}@media (min-width:768px) and (max-width:1200px){md-dialog.pip-gallery-search-dialog.pip-picture-dialog{width:508px;min-width:508px}}@media (max-width:768px){md-dialog.pip-gallery-search-dialog.pip-picture-dialog{width:380px;min-width:350px}}.pip-gallery-search-dialog .pip-no-images md-icon{color:#000;width:150px;height:150px;opacity:.118}.pip-gallery-search-dialog .fix-empty{height:calc(100%)}.pip-gallery-search-dialog{height:80%}.pip-gallery-search-dialog .pip-search-button{color:#1976D2;margin:0 -12px 0 0}.pip-gallery-search-dialog .pip-content .pip-image-container{display:inline-block;position:relative}.pip-gallery-search-dialog .pip-content .pip-image-container img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.pip-gallery-search-dialog .pip-content .pip-image-container .pip-picture{width:150px;height:150px;margin-right:5px}.pip-gallery-search-dialog .pip-content .pip-image-container .pip-checked-cover{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;top:5px;right:10px;width:35px;height:35px;border-radius:50%;position:absolute;background-color:rgba(0,0,0,.26)}.pip-gallery-search-dialog .pip-content .pip-image-container .pip-checkbox-backdrop{position:absolute;top:5px;right:10px;width:35px;height:35px;border-radius:50%;background-color:rgba(0,0,0,.1)}.pip-gallery-search-dialog .pip-content .pip-image-container .pip-checkbox-backdrop md-checkbox{margin-top:8px;margin-left:8px}.pip-camera-dialog md-input-container,.pip-dialog.pip-picture-url-dialog md-input-container{margin-bottom:0;margin-top:0}.pip-gallery-search-dialog .pip-content .pip-image-container .pip-checkbox-backdrop md-checkbox .md-icon{border-color:#fafafa}.pip-gallery-search-dialog .pip-content .pip-image-container:focus .pip-checked-cover{border-radius:0;right:5px;top:0;width:96%;height:96%;bottom:5px;background-color:rgba(0,0,0,.54)}.pip-gallery-search-dialog .pip-content .pip-image-container.checked .pip-checked-cover{border-radius:0;right:5px;top:0;width:96%;height:96%;bottom:5px}.pip-gallery-search-dialog .pip-content .pip-image-container.checked .pip-checkbox-backdrop{background-color:rgba(0,0,0,0)}.pip-dialog.pip-gallery-search-dialog md-dialog-content .pip-content{padding-left:24px;padding-right:0}.pip-dialog.pip-gallery-search-dialog .pip-footer{padding-left:12px;padding-right:8px}.pip-dialog.pip-picture-url-dialog .pip-header{padding:14px 24px 0 8px}.pip-dialog.pip-picture-url-dialog .pip-content>div{height:300px;background-color:#ebebeb}.pip-dialog.pip-picture-url-dialog .pip-no-images md-icon{color:#000;width:150px;height:150px;opacity:.118}.pip-dialog.pip-picture-url-dialog .fix-empty,.pip-dialog.pip-picture-url-dialog .pip-fix-empty{height:calc(100%)}.pip-dialog.pip-picture-url-dialog md-dialog-content .pip-content{padding-left:24px;padding-right:24px}.pip-dialog.pip-picture-url-dialog .pip-footer{padding-left:12px;padding-right:8px}.pip-camera-dialog.pip-android-dialog{width:0;height:0;min-width:0;max-width:0;min-height:0}.pip-camera-dialog .pip-header{padding:14px 24px 0 8px}.pip-camera-dialog{width:400px}.pip-camera-dialog .pip-body{overflow:hidden}.pip-camera-dialog .pip-body .camera-error{height:300px}.pip-camera-dialog .pip-body .camera-stream{margin-left:-24px}.camera-still,.camera-stream{display:inline-block;width:200px;height:200px;background-color:grey}.camera-still.icon-button,.camera-stream.icon-button{font-size:32px}