/* #region modal */ .popup-modal { display: flex; align-items: center; justify-content: center; z-index: 9998; /** 05-09-2022: reduced from 9999 to 9998 to be 1 behind loader-modal */ max-height: 100vh; } .popup-modal.modal { background: rgba(0,0,0,0.25); } .popup-modal, .popup-modal > .dimmer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .popup-modal > .dimmer { z-index: -1; } /* have to re-enable pointer events on children when you disable pointer events on parent */ .popup-modal:not(.modal) * { pointer-events: auto; } /* allowing click through when not modal */ .popup-modal:not(.modal), .popup-modal:not(.modal) > .dimmer { pointer-events: none; } /* #endregion modal */ /* #region popup */ .popup-modal > .popup { background: var(--color-text); background-size: 100% 100%; border-radius: 6px; position: relative; top: 3em; overflow-y: hidden; /* important: redirect all scrolling to body */ -webkit-box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.25); box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.25); max-height: 100%; } @media screen and (max-height: 900px) { /* when screen height is smaller, don't push popup down by default */ .popup-modal > .popup { top: 0; } } .popup-modal:not(.full-screen) > .popup { width: 25em; } .popup-modal:not(.full-screen):not(.large):not(.medium) .popup { max-height: calc(100vh - 6em); } @media screen and (max-width: 992px) { .popup-modal:not(.full-screen) > .popup { width: 25em; } } /* #endregion popup */ /* #region positioning */ /* #region full screen */ .popup-modal.full-screen:not(.mobile) .popup { border-radius: 0; margin: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; /*margin: auto; 10-26-22: this was allow title-search popups to shrink when page height was small (or zoomed in)*/ } .popup-modal.full-screen:not(.mobile) .header { border-radius: 0; } /* only allowing mobile popups into full-screen when screen is mobile sized */ @media screen and (max-width: 500px) { .popup-modal.full-screen.mobile .popup { border-radius: 0; margin: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .popup-modal.full-screen.mobile .header .btn-minimize { display: none; } .popup-modal.full-screen.mobile .header { border-radius: 0; } } /* hiding max/min buttons for mobile popups on non-mobile screen */ @media screen and (min-width: 501px) { .popup-modal.mobile > .popup > .header > .btn-maximize, .popup-modal.mobile > .popup > .header > .btn-minimize { display: none; } .popup-modal.mobile > .popup { width: 25em; } /* capping height to emulate a mobile screen shape (don't want it super tall and skinny) however, only set this when device height is taller, otherwisse max-height should be 100% (default) and cause scroll */ @media screen and (min-height: 768px) { .popup-modal.mobile > .popup { max-height: 700px; } } } /* #endregion full screen */ /* #region top */ .popup-modal.top { align-items: flex-start; padding: 1em; /*4.5em 1em 1em 1em;*/ } /*@media only screen and (min-device-width: 768px) { .popup-modal.top { padding-left: 5.5em; /* moving right for side-bar* } }*/ /* #endregion top */ /* #endregion positioning */ /* #region header */ .popup > .header { background: var(--color-text); color: var(--color-text-text); font-size: 1.5em; user-select: none; display: flex; grid-column-gap: 0.5em; padding: 0.5em; border-radius: 6px 6px 0 0; /* NOTE: radius is necessary on both popup AND header. When popup allows overflow, the header escapes the container's radius */ } .popup-modal .header input { color: var(--color-text); } /* #region mouse grab */ .popup-modal:not(.full-screen) > .popup.ui-draggable:not(.ui-draggable-dragging) > .header { cursor: grab; } .popup-modal:not(.full-screen) > .popup.ui-draggable-dragging { cursor: grabbing; } /* #endregion mouse grab */ .popup-modal.error .popup > .header { background: var(--color-error); color: var(--color-error-text); } /* #region header buttons */ .popup > .header .btn-icon { border-radius: 6px; padding: 0.1em; background: var(--color-accent); border: 2px solid var(--color-accent); color: var(--color-accent-text); position: relative; } .popup > .header .btn-icon.success { background: var(--color-success); border-color: var(--color-success); color: var(--color-success-text); } .popup > .header .btn-icon.error { background: var(--color-error); border-color: var(--color-error); color: var(--color-error-text); } /* when title bar is same color as button, buttons need inverted border to contrast */ .popup-modal.error .popup > .header > .btn-icon.error { border-color: var(--color-error-text); } /* minimize/maximize */ @media screen and (max-device-width: 480px) { .popup > .header > .btn-icon { font-size: 1.25em; } } @media screen and (hover:hover) { .popup > .header > .btn-icon:not([disabled]):hover { border-color: var(--color-accent-text); } .popup > .header > .btn-icon.success:not([disabled]):hover { border-color: var(--color-success-text); } .popup > .header > .btn-icon.error:not([disabled]):hover { border-color: var(--color-error-text); } /* hovering applies transparent white overlay */ .popup > .header > .btn-icon:not([disabled]):hover:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.2); border-radius: 6px; } } /* #endregion header buttons */ /* #endregion header */ /* #region body */ .popup > .body { padding: 0.5em; /* default: pad horizontally and vertically */ min-height: 0; background: var(--color-container); } @media screen and (max-device-width: 480px) { .popup > .body { font-size: 1.25em; } } .popup > .body:empty { /*padding-top: 0;*/ display: none; } .popup-modal.pad-horiz .popup > .body { padding: 0 0.5em; /* pad = "horizontal" -> only pad horizontally */ } .popup-modal.pad-vert .popup > .body { padding: 0.5em 0; /* pad = "vertical" -> only pad vertically */ } .popup-modal.pad-top .popup > .body { padding: 0.5em 0 0 0; } .popup-modal.pad-none .popup > .body { padding: 0; /* pad = "none" -> no pad */ } .popup-modal.pad-small .popup > .body { padding: 0.25em; } /* #region overflow */ /* this allows dropdowns and quill popups to escape container... but ONLY when not full screen (this includes mobile fullscreen */ .popup-modal.overflow:not(.full-screen) .popup, .popup-modal.overflow:not(.full-screen) .popup > .body { overflow: visible; } @media screen and (min-width: 501px) { /* only do for mobile-fullscreen when not in mobile-fullscreen */ .popup-modal.overflow.mobile.full-screen .popup, .popup-modal.overflow.mobile.full-screen .popup > .body { overflow: visible !important; } } /* #endregion */ /* #endregion body */ /* #region footer */ .popup .footer:not(:empty) { padding: 0.5em; /* 0 0.5em 0.5em 0.5em;*/ border-top: 1px solid var(--color-header-border); } .popup-modal.pad-none .footer:not(:empty) { padding-top: 0.5em; } .popup .footer.separated:not(:empty) { padding: 0.5em; border-top: 1px solid var(--color-text); } .popup .footer { display: flex; align-items: center; padding-top: 0; background: var(--color-container); } /* #region footer buttons */ .popup .footer button { flex-grow: 100; flex-basis: 50%; color: white; outline: none; border: none; border-radius: .25em; height: 2.7272727em; /* 3em / 1.1em */ display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-size: 1.1em; font-weight: bold; } .popup .footer button:disabled { opacity: 0.75; } .popup .footer button.ok { background: var(--color-success); border: 1px solid var(--color-success); } .popup .footer button.cancel { background: var(--color-error); border: 1px solid var(--color-error); } @media screen and (hover:hover) { .popup .footer button.ok:not(:disabled):hover { background: transparent; color: var(--color-success); } .popup .footer button.cancel:not(:disabled):hover { background: transparent; color: var(--color-error); } } /* #endregion footer buttons */ /* #endregion footer */ /* #region size */ @media screen and (min-width: 501px) { .popup-modal.medium > .popup { width: 35em; max-height: 60em; } } .popup-modal.large:not(.full-screen) > .popup { width: 992px; height: 100%; max-height: 1080px; } /* NOTE: 1083 = 992 + sidebar width + padding */ @media screen and (max-width: 1083px) { /* large popup on small screen => force full screen (hide max/min button) */ .popup-modal.large.top { padding: 0; } .popup-modal.large:not(.full-screen) .popup { width: 100% !important; margin: 0; min-height: 100%; /* 03-08-21: used to be 100vh, changed to 100% for messenger scrolling issue */ left: 0 !important; /* must be important to override drag position (if dragged, top/left will be set on the element itself) */ top: 0 !important; border-radius: 0; } .popup-modal.large:not(.full-screen) > .popup > .header { border-radius: 0; } .popup-modal.large .btn-maximize, .popup-modal.large .btn-minimize { display: none; } .popup-modal.large .popup.ui-draggable > .header { /* since large popup becomes full screen on smaller screen, disable drag mouse */ cursor: auto !important; } } /* #endregion */ @media screen and (max-width: 767px) { .popup-modal:not(.full-screen) .popup { width: 25em; } } @media screen and (max-width: 540px) { .popup-modal:not(.full-screen) .popup { top: 0; width: 100%; } .popup > .header > .flex-fill { padding-left: 0.25em; } } @media screen and (max-device-width: 540px) { .popup > .header > .btn-icon, .popup > .header > .btn-icon.btn-aux { padding: 0.25em; } } /* #region re-usable popup types */ /* #region prompt */ .popup-prompt .prompt-message { text-align: center; } .popup-prompt .prompt-message.error { color: var(--color-error); } /* #endregion prompt */ /* #region email popup */ .email-popup .body iframe { border: 1px solid var(--color-accent); border-radius: 0.25em; display: flex; flex-grow: 100; } /* #endregion */ /* #region error popup */ .error-popup .body iframe { border: 1px solid var(--color-error); border-radius: 0.25em; margin-top: 0.5em; display: flex; flex-grow: 100; } .error-popup h3 { margin-top: 0; margin-bottom: 0.25em; } /* #endregion */ /* #region attachments */ /* #region attachment popup */ .attach-popup.popup-modal:not(.large):not(.full-screen) > .popup { width: 27.15em; } .attach-popup .popup > .body { position: relative; grid-row-gap: 0.5em; } .attach-popup .body .loader-modal { position: absolute; background: rgba(0, 0, 0, 0.25); } .attach-popup .popup > .body .attch.pdf .image { background-image: url(/graphics/pdf.png); } /* #region drag drop */ .attach-popup .drag-preview { border: 2px dashed var(--color-auxiliary); border-radius: 4px; color: var(--color-auxiliary); display: flex; align-items: center; justify-content: center; padding: 5em 0; font-size: 1.5em; flex-direction: column; flex-grow: 100; background: rgba(0, 0, 0, 0.05); } /* mobile devices can't drag/drop. (i'd assume hover and drag/drop go hand in hand so i think this media query should suffice for detecting drag/drop funcitonality) */ @media not screen and (hover:hover) { .attach-popup .drag-preview { display: none; } } .attach-popup .drag-preview i { font-size: 2em; } .attach-popup .drop { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); padding: 0.25em; color: white; justify-content: center; align-items: center; flex-direction: column; font-size: 2em; font-style: italic; display: none; pointer-events: none !important; /* without this, it will immediately cause a drag leave event because it pops up in front of the body */ } .attach-popup .drop::before { content: ""; position: absolute; top: 0.25em; left: 0.25em; bottom: 0.25em; right: 0.25em; border: 2px dashed white; border-radius: 4px; } .attach-popup .drop .icon { position: relative; } .attach-popup .drop i { position: absolute; font-size: 2em; bottom: 0; margin-left: -0.5em; } .attach-popup .drop .arrow { animation: MoveUpDown 1.5s linear infinite; color: var(--color-accent); font-size: 1.25em; opacity: 0; } @keyframes MoveUpDown { 0%, 100% { bottom: 0.55em; opacity: 0; } 45% { opacity: 1; } 50% { bottom: 0.33em; } 55% { opacity: 1 } } /* when drag is initiated, preview goes away and drop appears */ .attach-popup .popup > .body.dragging .drag-preview { display: none; } .attach-popup .popup > .body.dragging .drop { display: flex; } /* #endregion */ /* #region thumbnail grid */ .attach-popup .thumb-grid { display: flex; flex-wrap: wrap; grid-gap: 0.5em; } .attach-popup .thumb-grid:empty { display: none; } .attach-popup .doc-group { background: var(--color-header); padding: 0.5em; border-radius: 4px; border: 1px solid var(--color-stripe-border); } /** readonly (when size='large'): full-width groups, and "None Found..." empty caption */ .attach-popup.popup-modal:not(.large) .doc-group { width: 100%; } .attach-popup.popup-modal:not(.large) .thumb-grid:empty:after { content: "None..."; text-align: center; margin: 0 auto; } .attach-popup h3 { margin: 0 0 0.25em 0; } .attach-popup .attch, .attach-popup .btn-add { width: 8em; } @media only screen and (max-width: 600px) { .attach-popup .doc-group { width: 100%; } .attach-popup .attch, .attach-popup .btn-add { width: calc(33.333% - 0.34em); } } /* #endregion */ /* #region triangle-button */ .triangle-button { position: relative; width: 100%; height: 100%; overflow: hidden; outline: none; /*border-radius: 0.25em; border: 0.1rem solid #0080ff;*/ padding: 0; margin: 0; background: var(--color-container); } .triangle-button > * { position: absolute; border: none; outline: none; width: 141.42%; /* sqrt(2) */ height: 141.42%; top: 0; background: transparent; color: var(--color-text); } .triangle-button > button { display: flex; align-items: center; justify-content: flex-start; transform-origin: 0 0; padding: 10%; } .triangle-button > button:hover { background: #0080ff !important; color: white !important; } .triangle-button > button:first-child { border-top: 1px solid var(--color-accent); transform: rotate(45deg); flex-direction: column; } .triangle-button > .camera-btn > i { transform: rotate(-45deg); /* undoing parent rotation */ } .triangle-button > button:last-child { border-left: 1px solid var(--color-accent); transform: rotate(-45deg); } /* #endregion triangle-button */ /* #endregion attachment popup */ /* #region attachment scale popup */ .attach-scale-popup .scale-slider { font-size: 2.5em; -webkit-appearance: none; width: 100%; height: 0.5em; border-radius: 1em; background: var(--color-header); outline: none; opacity: 0.7; -webkit-transition: 0.2s; transition: opacity 0.2s; overflow: visible !important; margin: 0.4em 0 0.35em 0 } .attach-scale-popup .scale-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1em; height: 1em; border-radius: 50%; background: var(--color-accent); cursor: pointer; } .attach-scale-popup .scale-slider::-webkit-slider-thumb::before { content: "HEY"; } .attach-scale-popup .scale-slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: var(--color-accent); cursor: pointer; } /* #endregion attachment scale popup */ /* #region attachment viewer popup */ /* #region TODO: scope this css to attach viewer popup only... and remove things that are not longer relevent */ .attch-img { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--color-accent); border-radius: .25em; z-index: 1; /* needed prevent pdf pages from overlapping rounded edge (overflow hidden is not enough, but also necessary) */ overflow: hidden; position: relative; /* necessary for loader to be centered */ } .attch-img audio { /* cant remove the roundness of the default audio element... so matching the background to hide the roundness */ background-color: #f1f3f4; width: 100%; } .attch-img .loader { font-size: 5em; } .attch-img .resolution, .image-editor-popup .popup > .body .resolution { text-align: center; background: var(--color-header); position: absolute; bottom: 0; width: 100%; } .pdf-container { display: flex; flex-direction: column; flex-grow: 100; overflow: hidden; } .pdfViewer { display: flex; flex-direction:column; flex-grow: 100; overflow-x: auto; overflow-y: scroll; flex-grow: 100; z-index: 0; /* needed to not overlap rounded edge of container */ background: #525659; } .pdfViewer .page { /*height: 100% !important; /* enforce full height to allow scrolling (necessary for lazy load paging to work) */ /*margin: 0 auto !important; /* removing weird tiny margin from pdf_viewer.css that was causing unnecessary ~1 pixel scroll...if necessary replace this with padding on the container because that would make so much more sense */ margin: 0 auto; border: none !important; } .pdfViewer .page:not(:last-child) { margin-bottom: 1em; } .pdfViewer .page .textLayer { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .pdf-controls { flex-shrink: 0; display: flex; background: #323639; color: #f1f1f1; } .pdf-controls button { font-size: 1.5em; padding: 0.5em; } .attach-popup .image-wrapper { width: 100%; position: relative; padding-top: 100%; border-radius: .25em; overflow: hidden; /*border: 1px solid var(--color-accent);*/ border: 6px solid #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); } .attach-popup .image-wrapper input { display: none; } .attach-popup .image-wrapper i { justify-content: center; font-size: 3em; } .attach-popup .image-wrapper .text-cutoff { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.25); color: white; padding: 0 0.25em; text-align: center; } .attach-popup .image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: white; } .attach-popup .image i { font-size: 3em; } .attach-popup .image-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; width: 100%; opacity: 0; } .attachment-viewer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 99999; width: 100%; background: rgba(0,0,0,0.9); padding: 1em; } .attachment-viewer-image { width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: -1; } .attachment-viewer .icon-button { float: left; width: 50%; } .attachment-viewer .icon-button i { font-size: 2em; color: white !important; } .btn-attch-edit { justify-content: center; } .btn-attch-remove { justify-content: flex-start !important; } .btn-attch-close { display: inline; text-align: right; } /*.attachment-desc { background: rgba(255, 255, 255, 0.75); border: none; border-radius: .5em; font-size: 1.25em; padding: 0 .25em; outline: none; }*/ /* #endregion TODO */ /* #region prev/next buttons */ .attach-viewer-popup .body > button { position: absolute; font-size: 3em; color: white; background: rgba(0,0,0,0.4); border-radius: 100%; width: 1em; height: 1em; top: calc(50% - 0.5em); z-index: 99; } .attach-viewer-popup .body > button:hover { background: rgba(0, 0, 0, 0.75); } .attach-viewer-popup .body > button:first-child { left: 0.75em; } .attach-viewer-popup .body > button:last-child { right: 0.75em; } .attach-viewer-popup.azure .attch-img { border: none; border-radius: 0; } /* #endregion */ /* #endregion attachment viewer popup */ /* #endregion attachments */ /* #region error popup */ .error-popup .bug { font-size: 3em; margin-right: 0.15em; color: var(--color-error); } .error-popup .popup > .body h1 { margin-top: 0; margin-bottom: 0; font-size: 1.5em; } .error-popup .popup > .body h2 { margin-top: 0; margin-bottom: 0; font-size: 1.15em; } /* #endregion error popup */ /* #region search popup */ @media screen and (min-width: 501px) { .popup-modal.search-popup > .popup { min-height: 50em; } } .popup-modal.search-popup > .popup > .body > .filters:not(:empty) { padding: 0.5em; } .popup-modal.search-popup .scroller { overflow: hidden auto; } /*.popup-modal.search-popup .filters .input-wrapper.with-label { margin-top: 0.5em; /* tightening spacing to make more room for search content * }*/ .popup-modal.search-popup .filters.no-header { border-bottom: 1px solid var(--color-text); } /*.popup-modal.search-popup { min-height: 45em; overflow-y: hidden; }*/ @media screen and (max-device-width: 480px) { .popup-modal.search-popup .popup > .body { font-size: 1.25em; } } .popup-modal.search-popup > .popup > .body .striped { cursor: pointer; } @media (hover:hover) { .popup-modal.search-popup > .popup > .body .striped:hover { background: var(--color-accent-75); color: var(--color-accent-text); } .popup-modal.search-popup > .popup > .body .striped:hover mark { background: var(--color-accent-text) !important; color: var(--color-accent) !important; } } .popup-modal.search-popup .header .input-wrapper { margin: 0 0.25em 0 0; flex-grow: 1; } /* #endregion search popup */ /* #region title-search popup */ .title-search-popup .header input { color: var(--color-text); } /* #endregion */ /* #region info popup */ @media screen and (max-device-width: 480px) { .popup-modal.info-popup .popup > .body { font-size: 1.25em; } .popup-modal.info-popup .popup .sticky-header { font-size: 0.75em; } } /* #endregion */ /* #region notifications */ .popup-notifications { position: absolute; top: 4em; align-self: center; z-index: 999999; padding: 0 0.5em; margin-left: 2.25em; /* offset for side menu */ display:flex; flex-direction:column; justify-content:center; align-items:center; } @media only screen and (max-device-width: 767px) { .popup-notifications { top: 6.5rem; margin-left: 0; /* in mobile, left side-menu is collapsed, so we don't provide extra left margin */ } } .popup-notifications > div { min-width: 10em; max-width: 600px; background: var(--color-accent); color: var(--color-accent-text); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0.25em; padding: 1em; margin-bottom: 0.5em; } .popup-notifications > div.success { background: var(--color-success) !important; color: var(--color-success-text) !important; } .popup-notifications > div.error { background: var(--color-error) !important; color: var(--color-error-text) !important; } /* #endregion notifications */ /* #region image scaler popup */ .image-editor-popup .popup > .body .control-panel { padding: 0.5em 0.25em 0 0.25em } .image-editor-popup .popup > .body .canvas-container { margin: 0.5em; width: calc(100% - 1em); padding-top: calc(100% + 0.25em); border: 1px solid var(--color-accent); border-radius: 0.25em; position: relative; overflow: hidden; } .image-editor-popup .popup > .body canvas { margin-bottom: 1.25em; position: absolute; top: 0; width: 100%; } .image-editor-popup .popup > .body .resolution { height: 1.25em; line-height: 1em; align-items: center; display: flex; justify-content: center; } /* #region rounded */ .image-editor-popup .popup > .body .canvas-container.rounded { padding-top: calc(100% + 1em); border: none; } .image-editor-popup .popup > .body .canvas-container.rounded canvas { border-radius: 100%; border: 1px solid var(--color-accent); } .image-editor-popup .popup > .body .canvas-container.rounded .resolution { background: transparent; } /* #endregion */ .icon-upload-popup .popup > .body label { cursor: pointer; } .icon-upload-popup .popup > .body input[type='file'] { display: none; } /* #endregion */ /* #region PDF Popup */ .popup-modal.pdf-popup:not(.full-screen) > .popup { height: 100%; top: 0; } .popup-modal.pdf-popup > .popup iframe { flex-grow: 100; border: none; outline: none; } .popup-modal.pdf-popup > .popup .pdfViewer { background: var(--color-header-border); } @media screen and (min-width: 961px) { .popup-modal.pdf-popup:not(.full-screen) > .popup { min-width: calc(960px - 4.5em); /* subtracting width of side menu */ } } @media screen and (max-width: 960px) { .popup-modal.pdf-popup:not(.full-screen) > .popup { min-width: unset; width: 100%; } } /* #endregion */ /* #region serial pattern popup */ .serial-pattern-popup .popup > .body .list { margin-top: 0.5em; border-top: 1px solid var(--color-text); } .serial-pattern-popup .popup > .body .list .striped { padding: 0.5em; } /* #endregion */ /* #region serial list popup */ .serial-list-popup .popup > .body .input-wrapper { margin: 0 0.5em; } .serial-list-popup .popup > .body .striped { padding: 0.5em; } .serial-list-popup .popup > .body .status { padding: 0.25em 0.75em; font-weight: bold; } .serial-list-popup .popup > .body .status > span { padding: 0 0.25em; } .serial-list-popup .popup > .body .status > span:nth-child(2) { flex-grow: 1; } .serial-list-popup .popup > .body .selection { margin-top: 0.5em; border-top: 1px solid var(--color-text); } /* #endregion */ /* #region search popup */ .call-adv-search-popup h3 { display: flex; align-items: center; margin-bottom: 0.25em; } .call-adv-search-popup h3:first-child { margin-top: 0; } .call-adv-search-popup h3 i { margin-right: 0.25em; } .call-adv-search-popup .date-range { display: none; } .call-adv-search-popup .start-date, .adv-search-popup .end-date { text-align: center; padding: 0; } /* #endregion */ /* #region call popup */ .call-popup .body > .input-wrapper { /* weird issue... removing right border causes horizontal scroll... luckily the accent border blends with search button so it's not a big deal */ border-left: none; border-top: none; border-bottom: 1px solid var(--color-header-border); border-radius: 0; } /* #region calls */ .call-popup #calls { padding: 0.5em; background: var(--color-header); display: flex; flex-direction: column; grid-row-gap: 0.5em; position: relative; } .call-popup #calls:empty::after { content: "None..."; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; font-size: 1.5em; } .call-popup .call { border: 1px solid var(--color-header-border); border-radius: 4.5em 1em 1em 4.5em; padding: 0.5em; background: var(--color-container); display: flex; flex-direction: column; width: 100%; } .call-popup .call mark { border-radius: 0.125em; } .call-popup .call .bold mark { font-weight: normal !important; } .call-popup .call .italic mark { padding-right: 0.25em; } .call-popup .call:not(.open) { cursor: pointer; } .call-popup .call .read-only .profile-icon { width: 8em; height: 8em; margin-right: 0.75em; } .call-popup .call .call-desc { max-height: 4em; overflow-y: hidden; text-overflow: ellipsis; } .call-popup .call:not(.open) .editable { display: none; } .call-popup .call.open .read-only { display: none; } .call-popup .call.open { padding: 0; border-radius: 0.25em 0.25em 0.5em 0.5em; } .call-popup .call.open .content { padding: 0.5em; } .call-popup .call .header { display: flex; align-items: center; background: var(--color-text); color: var(--color-text-text); padding: 0 0.5em; height: 2em; cursor: pointer; user-select: none; } @media (hover:hover) { .call-popup .call .header:hover { background: var(--color-accent); color: var(--color-accent-text); } .call-popup .contacts .btn-new:hover { background: var(--color-accent); color: var(--color-accent-text); } } .call-popup .call h3 { border-bottom: 1px solid var(--color-text); line-height: 1.25em; font-style: italic; margin-bottom: 0.25em; margin-top: 0.25em; } /* #region contacts */ .call-popup .contacts { display: flex; flex-wrap: wrap; grid-gap: 1em; } .call-popup .contact { position: relative; display: inline-flex; float: left; width: 7em; cursor: pointer; } .call-popup .contact .profile-icon { width: 7em; height: 7em; } .call-popup .contact:not(.primary) .material-icons { display: none; } .call-popup .contact .material-icons { position: absolute; top: 0; right: 0; font-size: 2.25em; background: var(--color-success); color: var(--color-success-text); border-radius: 100%; } .call-popup .contacts .btn-new { width: 1.75em; height: 1.75em; display: inline-flex; font-size: 4em; float: left; color: var(--color-accent); border-color: var(--color-accent); align-items: center; justify-content: center; border-radius: 100%; background: transparent; outline: none; border-width: 0.05em; border-style: solid; } /* #endregion */ @media screen and (max-width: 720px) { .call-popup .call .read-only .profile-icon { width: 4.5em; height: 4.5em; } .call-popup .contacts { font-size: 0.66em; } .call-popup .contacts .name { font-size: 1.25em; } } /* #endregion */ .call-popup .body #footer { border-top: 2px solid var(--color-text); text-align: center; font-weight: bold; } /* #endregion */ /* #region memo popup */ .memo-popup .body { background: var(--color-header); grid-row-gap: 0.5em; position: relative; } .memo-popup .body .memo .header .btn-icon { border-radius: 0; } /* overriding default popup logic that hides empty body */ .memo-popup .body:empty { display: inherit !important; } .memo-popup .body:empty::after { content: "None..."; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; font-size: 1.5em; } /* #region memo element */ .memo-popup .memo { background: var(--color-container); } .memo-popup .memo > div { padding: 0 0.5em; } .memo-popup .memo .input-wrapper { border: none !important; box-shadow: none !important; } .memo-popup .memo textarea { width: 100%; outline: none; border: none; resize: vertical; } /* #region header */ .memo-popup .memo .header { border-bottom: 2px solid var(--color-header-border); } .memo-popup .memo .memo-desc { border: none; outline: none; width: 100%; font-style: italic; padding: 0.35em 0.25em 0m 0.25em; } /* #endregion */ /* #endregion */ /* #endregion */ /* #region IFrame Popup */ .iframe-popup .body { position: relative; } .iframe-popup iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; outline: none; /* adding top border to separate embeded popup headers from iframe popoup header */ border-top: 1px solid var(--color-container); } /* #endregion */ /* #region scanner popup */ .scanner-popup #scanner_container { /*width: 100%;*/ display: flex; /*box-shadow: 0px 0px 0px 2px var(--color-text);*/ } /*.scanner-popup .body.success #scanner_container { box-shadow: 0px 0px 0px 2px var(--color-success); } .scanner-popup .body.error #scanner_container { box-shadow: 0px 0px 0px 2px var(--color-error); }*/ /* #endregion */ /* #region signature popup */ .signature-popup canvas { width: 100%; } .signature-popup .body { background: #777; } .signature-prompt .input-wrapper { border: none !important; box-shadow: none !important; min-height: 2em; height: unset; } .signature-prompt input { font-family: 'Cedarville Cursive'; font-size: 36px; text-align: center; color: black; } /* #endregion */ /* #region user settings popup (admin only side-menu) */ .user-setting-popup th:last-child, .user-setting-popup td:last-child { width: 0; } .user-setting-popup td:last-child button { height: 100%; } .user-setting-popup .editable-grid th { background: var(--color-accent); color: var(--color-accent-text); } /* #endregion */ /* #endregion */ /* removing details border/radius when embedded directly within a zero-padding popup */ /* by default, details get separated with 0.5em top margin (idk why i designed it this way it was a long time ago) but in context of popups, we have less space and only really want 1px stripe between them to separate the colors */ .popup-modal.pad-none .popup > .body details:not(:first-child) { margin-top: 1px; } .popup-modal.pad-none .popup > .body details > summary { border-radius: 0; } .popup-modal.pad-none .popup > .body details > *:last-child { border-radius: 0; border: none; }