UNPKG

pip-webui

Version:

HTML5 UI for LOB applications

989 lines (988 loc) 21.7 kB
@-webkit-keyframes blink-hint { 0% { opacity: 0.38; } 50% { opacity: 1; } 100% { opacity: 0.38; } } @-moz-keyframes blink-hint { 0% { opacity: 0.38; } 50% { opacity: 1; } 100% { opacity: 0.38; } } @-o-keyframes blink-hint { 0% { opacity: 0.38; } 50% { opacity: 1; } 100% { opacity: 0.38; } } @keyframes blink-hint { 0% { opacity: 0.38; } 50% { opacity: 1; } 100% { opacity: 0.38; } } .pip-picture { display: inline-block; position: relative; overflow: hidden; } .pip-picture > img { display: block; top: 0px; left: 0px; width: 100%; height: auto; } .pip-picture > div { position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #eeeeee; } .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: 0px; } .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: 0px; right: 0px; top: 0px; bottom: 0px; } .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: none!important; } .pip-avatar { display: inline-block; position: relative; overflow: hidden; outline: none!important; } .pip-avatar > md-icon { display: block; position: relative; } .pip-avatar > div { position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; } .pip-avatar > div > span { display: block; position: absolute; top: 50%; left: 50%; margin-top: -0.5em; margin-left: -0.5em; width: 1em; height: 1em; line-height: 1em; font-size: 74px; color: #c9c9c9; text-align: center; text-transform: uppercase; } .pip-avatar { margin: 0px; padding: 0px; width: 80px; height: 80px; } .pip-avatar md-icon { width: 80px; height: 80px; } .pip-avatar md-icon.default_icon { width: 48px; height: 48px; } .pip-avatar-color-0 > div { background-color: #ef5350 !important; } .pip-avatar-color-1 > div { background-color: #ec407a !important; } .pip-avatar-color-2 > div { background-color: #ab47bc !important; } .pip-avatar-color-3 > div { background-color: #7e57c2 !important; } .pip-avatar-color-4 > div { background-color: #5c6bc0 !important; } .pip-avatar-color-5 > div { background-color: #03a9f4 !important; } .pip-avatar-color-6 > div { background-color: #00bcd4 !important; } .pip-avatar-color-7 > div { background-color: #009688 !important; } .pip-avatar-color-8 > div { background-color: #4caf50 !important; } .pip-avatar-color-9 > div { background-color: #8bc34a !important; } .pip-avatar-color-10 > div { background-color: #cddc39 !important; } .pip-avatar-color-11 > div { background-color: #ffc107 !important; } .pip-avatar-color-12 > div { background-color: #ff9800 !important; } .pip-avatar-color-13 > div { background-color: #ff5722 !important; } .pip-avatar-color-14 > div { background-color: #795548 !important; } .pip-avatar-color-15 > div { background-color: #607d8b !important; } .pip-face-xxl { width: 180px; height: 180px; height: 180px !important; border-radius: 90px; text-align: center; } .pip-face-xxl img { border-radius: 50%; width: auto; height: auto; } .pip-face-xxl md-icon { border-radius: 50%; position: relative; width: 180px; height: 180px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-face-xxl md-icon svg { border-radius: 50%; } .pip-face-xxl div { border-radius: 50%; } .pip-face-xxl div md-icon.default_icon { width: 112px; height: 112px; margin-top: 34px !important; fill: white; font-size: 112px; font-family: arial; } .pip-face-xl { width: 100px; height: 100px; height: 100px !important; border-radius: 50px; text-align: center; } .pip-face-xl img { border-radius: 50%; width: auto; height: auto; } .pip-face-xl md-icon { border-radius: 50%; position: relative; width: 100px; height: 100px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-face-xl md-icon svg { border-radius: 50%; } .pip-face-xl div { border-radius: 50%; } .pip-face-xl div md-icon.default_icon { width: 50px; height: 50px; margin-top: 25px !important; fill: white; font-size: 50px; font-family: arial; } .pip-face-lg { width: 80px; height: 80px; height: 80px !important; border-radius: 40px; text-align: center; } .pip-face-lg img { border-radius: 50%; width: auto; height: auto; } .pip-face-lg md-icon { border-radius: 50%; position: relative; width: 80px; height: 80px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-face-lg md-icon svg { border-radius: 50%; } .pip-face-lg div { border-radius: 50%; } .pip-face-lg div md-icon.default_icon { width: 48px; height: 48px; margin-top: 16px !important; fill: white; font-size: 48px; font-family: arial; } .pip-face-md { width: 64px; height: 64px; height: 64px !important; border-radius: 32px; text-align: center; } .pip-face-md img { border-radius: 50%; width: auto; height: auto; } .pip-face-md md-icon { border-radius: 50%; position: relative; width: 64px; height: 64px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-face-md md-icon svg { border-radius: 50%; } .pip-face-md div { border-radius: 50%; } .pip-face-md div md-icon.default_icon { width: 38px; height: 38px; margin-top: 13px !important; fill: white; font-size: 38px; font-family: arial; } .pip-face { width: 40px; height: 40px; height: 40px !important; border-radius: 20px; text-align: center; } .pip-face img { border-radius: 50%; width: auto; height: auto; } .pip-face md-icon { border-radius: 50%; position: relative; width: 40px; height: 40px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-face md-icon svg { border-radius: 50%; } .pip-face div { border-radius: 50%; } .pip-face div md-icon.default_icon { width: 24px; height: 24px; margin-top: 8px !important; fill: white; font-size: 24px; font-family: arial; } .pip-face-sm-md { width: 56px; height: 56px; height: 56px !important; 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%; position: relative; width: 56px; height: 56px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-face-sm-md md-icon svg { border-radius: 50%; } .pip-face-sm-md div { border-radius: 50%; } .pip-face-sm-md div md-icon.default_icon { width: 24px; height: 24px; margin-top: 16px !important; fill: white; font-size: 24px; font-family: arial; } .pip-face-sm { width: 30px; height: 30px; height: 30px !important; border-radius: 15px; text-align: center; } .pip-face-sm img { border-radius: 50%; width: auto; height: auto; } .pip-face-sm md-icon { border-radius: 50%; position: relative; width: 30px; height: 30px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-face-sm md-icon svg { border-radius: 50%; } .pip-face-sm div { border-radius: 50%; } .pip-face-sm div md-icon.default_icon { width: 18px; height: 18px; margin-top: 6px !important; fill: white; font-size: 18px; font-family: arial; } .pip-sface-xxl { width: 180px !important; height: 180px !important; text-align: center; } .pip-sface-xxl img { width: auto; height: auto; } .pip-sface-xxl md-icon { position: relative; width: 180px; height: 180px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-sface-xxl div md-icon.default_icon { width: 112px; height: 112px; margin-top: 34px !important; fill: white; font-size: 112px; font-family: arial; } .pip-sface-xl { width: 100px !important; height: 100px !important; text-align: center; } .pip-sface-xl img { width: auto; height: auto; } .pip-sface-xl md-icon { position: relative; width: 100px; height: 100px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-sface-xl div md-icon.default_icon { width: 50px; height: 50px; margin-top: 25px !important; fill: white; font-size: 50px; font-family: arial; } .pip-sface-lg { width: 80px !important; height: 80px !important; text-align: center; } .pip-sface-lg img { width: auto; height: auto; } .pip-sface-lg md-icon { position: relative; width: 80px; height: 80px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-sface-lg div md-icon.default_icon { width: 48px; height: 48px; margin-top: 16px !important; fill: white; font-size: 48px; font-family: arial; } .pip-sface-md { width: 64px !important; height: 64px !important; text-align: center; } .pip-sface-md img { width: auto; height: auto; } .pip-sface-md md-icon { position: relative; width: 64px; height: 64px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-sface-md div md-icon.default_icon { width: 38px; height: 38px; margin-top: 13px !important; fill: white; font-size: 38px; font-family: arial; } .pip-sface { width: 40px !important; height: 40px !important; text-align: center; } .pip-sface img { width: auto; height: auto; } .pip-sface md-icon { position: relative; width: 40px; height: 40px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-sface div md-icon.default_icon { width: 24px; height: 24px; margin-top: 8px !important; fill: white; font-size: 24px; font-family: arial; } .pip-sface-sm { width: 30px !important; height: 30px !important; text-align: center; } .pip-sface-sm img { width: auto; height: auto; } .pip-sface-sm md-icon { position: relative; width: 30px; height: 30px; vertical-align: top!important; margin: 0px!important; padding: 0px!important; } .pip-sface-sm div md-icon.default_icon { width: 18px; height: 18px; margin-top: 6px !important; fill: white; 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: white; } .pip-picture-upload img { position: absolute; top: 0px; left: 0px; border-radius: 2px; display: block; width: 100%; height: auto; } .pip-picture-upload img.pip-image-new { opacity: 0.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: 0px; left: 0px; width: 80px; } .pip-picture-upload .md-button.md-icon-button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; height: 20px !important; border-radius: 10px; min-width: 20px !important; min-height: 20px !important; background-color: rgba(0, 0, 0, 0.25); margin: 0px; padding: 0px; } .pip-picture-upload .md-button.md-icon-button > md-icon { margin-top: -5px; width: 16px !important; height: 16px !important; fill: white; } .pip-picture-upload .md-button.md-icon-button:hover, .pip-picture-upload .md-button.md-icon-button:focus, .pip-picture-upload .md-button.md-icon-button:active { background-color: rgba(0, 0, 0, 0.54) !important; } .pip-picture-upload .pip-default-icon, .pip-picture-upload .pip-default-text { position: absolute; display: block; top: 0px; left: 0px; width: 80px; height: 80px; line-height: 80px; text-align: center; overflow: hidden; } .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 { border: 1px solid rgba(33, 150, 243, 0.54) !important; } .blue .pip-picture-upload:focus { border: 1px solid rgba(33, 150, 243, 0.54) !important; } .pink .pip-picture-upload.pip-picture-drop:focus { border: 1px solid rgba(188, 86, 121, 0.54) !important; } .pink .pip-picture-upload:focus { border: 1px solid rgba(188, 86, 121, 0.54) !important; } .orange .pip-picture-upload.pip-picture-drop:focus { border: 1px solid rgba(255, 112, 67, 0.54) !important; } .orange .pip-picture-upload:focus { border: 1px solid rgba(255, 112, 67, 0.54) !important; } .amber .pip-picture-upload.pip-picture-drop:focus { border: 1px solid rgba(255, 152, 0, 0.54) !important; } .amber .pip-picture-upload:focus { border: 1px solid rgba(255, 152, 0, 0.54) !important; } .green .pip-picture-upload.pip-picture-drop:focus { border: 1px solid rgba(76, 175, 80, 0.54) !important; } .green .pip-picture-upload:focus { border: 1px solid rgba(76, 175, 80, 0.54) !important; } .navy .pip-picture-upload.pip-picture-drop:focus { border: 1px solid rgba(86, 97, 125, 0.54) !important; } .navy .pip-picture-upload:focus { border: 1px solid rgba(86, 97, 125, 0.54) !important; } .grey .pip-picture-upload.pip-picture-drop:focus { border: 1px solid rgba(96, 125, 139, 0.54) !important; } .grey .pip-picture-upload:focus { border: 1px solid rgba(96, 125, 139, 0.54) !important; } .dark .pip-picture-upload.pip-picture-drop:focus { border: 1px solid rgba(33, 33, 33, 0.54) !important; } .dark .pip-picture-upload:focus { border: 1px solid rgba(33, 33, 33, 0.54) !important; } .black .pip-picture-upload.pip-picture-drop:focus { border: 1px solid rgba(38, 50, 56, 0.54) !important; } .black .pip-picture-upload:focus { border: 1px solid rgba(38, 50, 56, 0.54) !important; } .pip-picture-list-edit { display: block; margin: 0px -8px -8px 0px; } .pip-picture-list-edit .pip-picture-upload { display: block; float: left; margin: 0px 8px 8px 0px; } .pip-gallery-search-dialog md-input-container { margin-bottom: 0px!important; margin-top: 0px!important; } .pip-gallery-search-dialog .pip-header > h3 { margin: -10px 0px 0px -26px !important; } .pip-gallery-search-dialog .pip-header input { background-color: transparent !important; } .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 !important; min-width: 508px !important; } } @media (min-width: 768px) and (max-width: 1200px) { md-dialog.pip-gallery-search-dialog.pip-picture-dialog { width: 508px !important; min-width: 508px !important; } } @media (max-width: 768px) { md-dialog.pip-gallery-search-dialog.pip-picture-dialog { width: 380px !important; min-width: 350px !important; } } .pip-gallery-search-dialog .pip-no-images { min-height: 160px!important; } .pip-gallery-search-dialog .pip-no-images md-icon { color: black; width: 150px; height: 150px; opacity: 0.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: 0px -12px 0px 0px; } .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 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.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 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.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, 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, 0.1); } .pip-gallery-search-dialog .pip-content .pip-image-container .pip-checkbox-backdrop md-checkbox { margin-top: 8px !important; margin-left: 8px !important; } .pip-gallery-search-dialog .pip-content .pip-image-container .pip-checkbox-backdrop md-checkbox .md-icon { border-color: #fafafa !important; } .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, 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 { overflow-y: overlay !important; } .pip-dialog.pip-gallery-search-dialog md-dialog-content .pip-content { padding-left: 24px; padding-right: 0px; } .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 0px 8px!important; } .pip-dialog.pip-picture-url-dialog md-input-container { margin-bottom: 0px!important; margin-top: 0px!important; } .pip-dialog.pip-picture-url-dialog .pip-content > div { height: 300px; background-color: #ebebeb; } .pip-dialog.pip-picture-url-dialog .pip-no-images { min-height: 160px!important; } .pip-dialog.pip-picture-url-dialog .pip-no-images md-icon { color: black; width: 150px; height: 150px; opacity: 0.118; } .pip-dialog.pip-picture-url-dialog .fix-empty { height: calc(100%); } .pip-dialog.pip-picture-url-dialog md-dialog-content { overflow-y: overlay !important; } .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-dialog.pip-picture-url-dialog .pip-fix-empty { height: calc(100%); } .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 0px 8px!important; } .pip-camera-dialog md-input-container { margin-bottom: 0px!important; margin-top: 0px!important; } .pip-camera-dialog { width: 400px; } .pip-camera-dialog .pip-body { overflow: hidden !important; } .pip-camera-dialog .pip-body .camera-error { height: 300px; } .pip-camera-dialog .pip-body .camera-stream { margin-left: -24px !important; } .camera-stream, .camera-still { display: inline-block; width: 200px; height: 200px; background-color: grey; } .camera-stream.icon-button, .camera-still.icon-button { font-size: 32px; }