Skip to content

W
web-ui
Commit 8cdc3cb5 by Owen Ryan Ang
Options

Merge branch 'feature-WG-399' into 'development-mobile'

add functionality for encode button See merge request !69
parents 89892ed8 3f94e7dd
Showing with 1176 additions and 1046 deletions
WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css
...@@ -86,8 +86,8 @@ body { ...@@ -86,8 +86,8 @@ body {
color: #7d7d7d; color: #7d7d7d;
} }
/* Buttons */ /* Specific styles for the encode button */
button { #encode-btn {
padding: 1rem 2rem; padding: 1rem 2rem;
border: none; border: none;
border-radius: 50px; border-radius: 50px;
...@@ -98,22 +98,48 @@ button { ...@@ -98,22 +98,48 @@ button {
transition: background-color 0.3s ease, transform 0.1s ease; transition: background-color 0.3s ease, transform 0.1s ease;
} }
button:active { #encode-btn:active {
transform: scale(0.95); transform: scale(0.95);
} }
button.encode:hover, #encode-btn:hover {
button.encode:active {
background-color: #0056b3; background-color: #0056b3;
} }
button.new { #encode-btn:active {
background-color: #28a745; background-color: #0056b3;
}
/* Style for disabled encode button */
#encode-btn.disabled {
background-color: #9fb3c8;
/* Grayed out color */
cursor: not-allowed;
}
/* Specific styles for the new button */
#new-btn {
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-size: 1rem;
color: #fff;
background-color: #007bff;
/* Green color */
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
}
#new-btn:active {
transform: scale(0.95);
}
#new-btn:hover {
background-color: #0056b3;
} }
button.new:hover, #new-btn:active {
button.new:active { background-color: #0056b3;
background-color: #218838;
} }
.button-container { .button-container {
...@@ -124,10 +150,7 @@ button.new:active { ...@@ -124,10 +150,7 @@ button.new:active {
gap: 2rem; gap: 2rem;
} }
button.disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* Media Queries */ /* Media Queries */
@media (max-width: 768px) { @media (max-width: 768px) {
......
WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.js
const API_ROOT = "http://18.233.158.67:8080/bpo/req"; import { createWebGdeInterface } from '../../script.js';
import { DocumentControlWidget } from "../documentControlWidget/documentControlWidget.js";
import { INDEXED_DB_STORAGE, HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_NAME, INDEXED_DB_TBL_NAME, setIndexedDBStorage, setHighlightObject, setImageViewerObject, setBPOObject, BPO_OBJECT, DISPLAY_FIELD_OBJECT, setDisplayFieldObject, activateGDE, setDocumentControlObject, DOCUMENT_CONTROL_OBJECT, IS_GDE_ACTIVATED } from "../globalVariable.js";
const API_ROOT = "http://52.207.220.74:8080/bpo/req";
export class ElementListWidget { export class ElementListWidget {
global = { global = {
...@@ -75,6 +80,7 @@ export class ElementListWidget { ...@@ -75,6 +80,7 @@ export class ElementListWidget {
// Initialize the encode button as disabled // Initialize the encode button as disabled
this.global.encodeButton = document.createElement("button"); this.global.encodeButton = document.createElement("button");
this.global.encodeButton.textContent = "ENCODE"; this.global.encodeButton.textContent = "ENCODE";
this.global.encodeButton.id = "encode-btn";
this.global.encodeButton.disabled = true; this.global.encodeButton.disabled = true;
this.global.encodeButton.classList.add("disabled"); this.global.encodeButton.classList.add("disabled");
...@@ -122,13 +128,16 @@ export class ElementListWidget { ...@@ -122,13 +128,16 @@ export class ElementListWidget {
return; return;
} }
if (this.global.selectedElement) { if (this.global.selectedElement) {
this.handleEncodeClick(this.global.selectedElement); this.handleEncodeLogic(); // Only invoke this method
} }
}); });
buttonContainer.appendChild(this.global.encodeButton); buttonContainer.appendChild(this.global.encodeButton);
const newButton = document.createElement("button"); const newButton = document.createElement("button");
newButton.id = "new-btn";
newButton.textContent = "NEW"; newButton.textContent = "NEW";
newButton.addEventListener("click", () => this.handleNewClick()); newButton.addEventListener("click", () => this.handleNewClick());
buttonContainer.appendChild(newButton); buttonContainer.appendChild(newButton);
...@@ -181,6 +190,50 @@ export class ElementListWidget { ...@@ -181,6 +190,50 @@ export class ElementListWidget {
} }
} }
async handleEncodeLogic() {
// Store the selected element's details in the session storage
if (this.global.selectedElement) {
sessionStorage.setItem('selectedElementId', this.global.selectedElement.elementId);
sessionStorage.setItem('selectedElementExtraDetails', JSON.stringify(this.global.selectedElement.extraDetails));
}
// Remove the current container from the DOM
this.global.container.remove();
// Continue with the original logic
await createWebGdeInterface(null);
// Create and style a new container for the selected element's details
const detailsContainer = document.createElement('div');
detailsContainer.classList.add('details-container');
// Retrieve and display the selected element's ID
const elementId = sessionStorage.getItem('selectedElementId');
const elementIdDiv = document.createElement('div');
elementIdDiv.textContent = `Element ID: ${elementId}`;
elementIdDiv.classList.add('element-id');
detailsContainer.appendChild(elementIdDiv);
// Retrieve and display the selected element's extra details
const extraDetails = JSON.parse(sessionStorage.getItem('selectedElementExtraDetails'));
for (const [key, value] of Object.entries(extraDetails)) {
const detailDiv = document.createElement('div');
detailDiv.textContent = `${key}: ${value}`;
detailDiv.classList.add('extra-detail');
detailsContainer.appendChild(detailDiv);
}
// Insert the details container above the input container in the DOM
const inputContainer = document.getElementById("input-field-container");
inputContainer.parentElement.insertBefore(detailsContainer, inputContainer);
// Append the DocumentControlWidget
setDocumentControlObject(new DocumentControlWidget());
inputContainer.appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());
}
} }
async function fetchWorkersForNode(nodeId) { async function fetchWorkersForNode(nodeId) {
...@@ -193,6 +246,10 @@ async function fetchElementsForNode(nodeId) { ...@@ -193,6 +246,10 @@ async function fetchElementsForNode(nodeId) {
return await response.json(); return await response.json();
} }
/*await createWebGdeInterface(null);
setDocumentControlObject(new DocumentControlWidget());
document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());*/
WebGde/WebContent/WebGde-Widgets/config.js
...@@ -10,7 +10,7 @@ export const HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno. ...@@ -10,7 +10,7 @@ export const HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno.
export const ROOT_FOLDER = "/WebGde-Widgets"; export const ROOT_FOLDER = "/WebGde-Widgets";
//this determines if the images will be retrieved from the gfs //this determines if the images will be retrieved from the gfs
export const DOMAIN = "http://100.24.19.34:8080" export const DOMAIN = "http://52.207.220.74:8080"
export const CONTEXTROOT = "gfs-explorer-ws" export const CONTEXTROOT = "gfs-explorer-ws"
export const GDE_URL = DOMAIN + "/MobileGdeDev/svc/gfs-rest" export const GDE_URL = DOMAIN + "/MobileGdeDev/svc/gfs-rest"
export const FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/" export const FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"
......
WebGde/WebContent/script.js
...@@ -46,9 +46,15 @@ async function initializeWebGDE() { ...@@ -46,9 +46,15 @@ async function initializeWebGDE() {
// UNCOMMENTED BY ADAM 9/25/2023 // UNCOMMENTED BY ADAM 9/25/2023
sessionStorage.setItem("element_id","element1"); sessionStorage.setItem("element_id","element1");
<<<<<<< WebGde/WebContent/script.js
/* await createWebGdeInterface(null);*/
setDocumentControlObject(new DocumentControlWidget());
/* document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());*/
=======
await createWebGdeInterface(null); await createWebGdeInterface(null);
setDocumentControlObject(new DocumentControlWidget()); setDocumentControlObject(new DocumentControlWidget());
document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget()); document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());
>>>>>>> WebGde/WebContent/script.js
var mainLogInScreenContainer = document.getElementById("logInMainContainer"); var mainLogInScreenContainer = document.getElementById("logInMainContainer");
mainLogInScreenContainer.remove(); mainLogInScreenContainer.remove();
...@@ -58,7 +64,7 @@ async function initializeWebGDE() { ...@@ -58,7 +64,7 @@ async function initializeWebGDE() {
} }
async function createWebGdeInterface(GDEContainer) { export async function createWebGdeInterface(GDEContainer) {
let gdeContainer = document.createElement("div"); let gdeContainer = document.createElement("div");
gdeContainer.setAttribute("class", "container web-gde-container"); gdeContainer.setAttribute("class", "container web-gde-container");
...@@ -136,14 +142,24 @@ export function removeLoadingScreen() { ...@@ -136,14 +142,24 @@ export function removeLoadingScreen() {
} }
<<<<<<< WebGde/WebContent/script.js
export async function resetGDE() {
// TO-DO
}
function init() {
console.log("Application Started");
=======
export async function resetGDE(){ export async function resetGDE(){
// TO-DO // TO-DO
} }
function init(){ function init(){
console.log("Application Started"); console.log("Application Started");
>>>>>>> WebGde/WebContent/script.js
} }
function testFunction() { function testFunction() {
try { try {
let doctype; let doctype;
......
WebGde/WebContent/style.css
* { * {
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
font-size: 11px; font-size: 11px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-weight: normal; font-weight: normal;
font-family: OpenSans, sans-serif; font-family: OpenSans, sans-serif;
font-style: normal; font-style: normal;
} }
.remove-button { .remove-button {
display: inline-block; display: inline-block;
padding: 2px 6px; padding: 2px 6px;
background-color: red; background-color: red;
color: white; color: white;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
margin-left: 5px; margin-left: 5px;
} }
.field-header { .field-header {
color: white; color: white;
text-align: center; text-align: center;
} }
h1 { h1 {
display: none; display: none;
} }
h2 { h2 {
display: none; display: none;
} }
h3 { h3 {
display: none; display: none;
} }
.web-gde-container { .web-gde-container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
/* #imageViewerContainer{ /* #imageViewerContainer{
width: 70vh; width: 70vh;
height: 80vh; height: 80vh;
} */ } */
#imageViewerContainer { #imageViewerContainer {
width: 70%; width: 70%;
height: 98.5%; height: 98.5%;
} }
.sidebar { .sidebar {
position: absolute; position: absolute;
right: 0; right: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 30%; width: 30%;
background-image: linear-gradient(to bottom, #23569f, #00a8c0); background-image: linear-gradient(to bottom, #23569f, #00a8c0);
} }
.row-bar { .row-bar {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
margin: 2vh; margin: 2vh;
} }
#zz, #zz,
#thumbnail { #thumbnail {
margin-top: 5px; margin-top: 5px;
} }
#pause { #pause {
background: no-repeat center/75% url("./WebGde-Widgets/resources/pause_icon.png"); background: no-repeat center/75% url("./WebGde-Widgets/resources/pause_icon.png");
height: 3vh; height: 3vh;
width: 3vh; width: 3vh;
border: 0; border: 0;
} }
.pause-button { .pause-button {
margin-left: 1vh; margin-left: 1vh;
} }
#info-icon { #info-icon {
color: #fff; color: #fff;
font-size: 3vh; font-size: 3vh;
} }
#logoutBtn { #logoutBtn {
background: no-repeat center/90% url("./WebGde-Widgets/resources/logout_icon.png"); background: no-repeat center/90% url("./WebGde-Widgets/resources/logout_icon.png");
height: 3vh; height: 3vh;
width: 3vh; width: 3vh;
border: 0; border: 0;
} }
#input-field-container { #input-field-container {
/* height : 600px; /* height : 600px;
width : 400px; */ width : 400px; */
height: 100%; height: 100%;
width: 30%; width: 30%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
background-image: linear-gradient(to bottom, #23569f, #00a8c0); background-image: linear-gradient(to bottom, #23569f, #00a8c0);
} }
#shortcut-popUp { #shortcut-popUp {
position: absolute; position: absolute;
top: 5vh; top: 5vh;
left: 71%; left: 71%;
max-width: 50vh; max-width: 50vh;
background-color: #000; background-color: #000;
z-index: 2; z-index: 2;
padding: 3px; padding: 3px;
} }
#shortcut-popUp div h3 { #shortcut-popUp div h3 {
color: #fff; color: #fff;
font: 14px; font: 14px;
margin: 5px !important; margin: 5px !important;
} }
#shortcut-popUp div table { #shortcut-popUp div table {
border: 1px solid #fff; border: 1px solid #fff;
margin: 2px; margin: 2px;
} }
#shortcut-popUp div table tr td { #shortcut-popUp div table tr td {
border-bottom: 1px solid #fff !important; border-bottom: 1px solid #fff !important;
margin-bottom: 2px !important; margin-bottom: 2px !important;
color: #fff; color: #fff;
} }
#input-field-container::-webkit-scrollbar { #input-field-container::-webkit-scrollbar {
width: 10px; width: 10px;
} }
#input-field-container::-webkit-scrollbar-track { #input-field-container::-webkit-scrollbar-track {
background-color: #f1f1f1; background-color: #f1f1f1;
} }
#input-field-container::-webkit-scrollbar-thumb { #input-field-container::-webkit-scrollbar-thumb {
background-color: #888; background-color: #888;
} }
#input-field-container::-webkit-scrollbar-thumb:hover { #input-field-container::-webkit-scrollbar-thumb:hover {
background-color: #555; background-color: #555;
} }
#inputs { #inputs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 500px; min-width: 500px;
} }
input[type=text] { input[type=text] {
width: 100%; width: 100%;
} }
/* .SECTION1.inputField { /* .SECTION1.inputField {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.SECTION2.inputField { .SECTION2.inputField {
width: 100%; width: 100%;
height: 100%; height: 100%;
} */ } */
.inputField { .inputField {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.select2 { .select2 {
width: 100% !important; width: 100% !important;
} }
.fieldContainer { .fieldContainer {
/* layout config */ /* layout config */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
/* border config */ /* border config */
border-style: solid; border-style: solid;
border-width: thin; border-width: thin;
border-color: #446397; border-color: #446397;
padding: 0px 0px 0px 4px; padding: 0px 0px 0px 4px;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
#fields *:not([type=submit]):focus { #fields *:not([type=submit]):focus {
background-color: yellow; background-color: yellow;
} }
#fields { #fields {
width: auto; width: auto;
display: flex; display: flex;
flex: 1; flex: 1;
max-height: 100vh; max-height: 100vh;
display: inline-block; display: inline-block;
overflow-y: auto; overflow-y: auto;
} }
#fields>div { #fields>div {
background-color: white; background-color: white;
} }
.submitButtons { .submitButtons {
font-weight: 600; font-weight: 600;
display: block; display: block;
margin: auto; margin: auto;
font-size: 13px; font-size: 13px;
width: 93px; width: 93px;
margin-top: 10px; margin-top: 10px;
cursor: pointer; cursor: pointer;
} }
.labelContainer { .labelContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 98px; width: 98px;
padding: 3px; padding: 3px;
margin-top: 4px; margin-top: 4px;
} }
.inputContainer { .inputContainer {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
padding-left: 3px; padding-left: 3px;
overflow-x: clip; overflow-x: clip;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.input-invalid { .input-invalid {
border-color: #ff3333 !important; border-color: #ff3333 !important;
border-style: solid; border-style: solid;
} }
.input-valid { .input-valid {
/* border-color: #000000 !important; */ /* border-color: #000000 !important; */
border-style: solid; border-style: solid;
} }
input:focus, input:focus,
textarea:focus { textarea:focus {
/* background-color: yellow; */ /* background-color: yellow; */
border: 0px; border: 0px;
} }
input[type=text] { input[type=text] {
width: 100%; width: 100%;
} }
input[type=checkbox], input[type=checkbox],
input[type=radio] { input[type=radio] {
margin-right: 8px; margin-right: 8px;
} }
.dropdown-content { .dropdown-content {
padding: 3px; padding: 3px;
border-style: solid; border-style: solid;
border-width: thin; border-width: thin;
border-color: gray; border-color: gray;
} }
.radio-like-checkbox { .radio-like-checkbox {
display: flex; display: flex;
padding: 3px; padding: 3px;
} }
.checkbox { .checkbox {
display: flex; display: flex;
padding: 3px; padding: 3px;
} }
.dash { .dash {
align-self: center; align-self: center;
padding: 6px; padding: 6px;
display: none; display: none;
} }
.image-capture, .fingerprint-capture, .file-upload { .image-capture,
display: flex; .fingerprint-capture {
flex-direction: column; display: flex;
width: 100%; flex-direction: column;
padding: 4px; width: 100%;
border: thin solid #555; padding: 4px;
position: relative; border: thin solid #555;
height: 100%; position: relative;
align-items: center; height: 100%;
} align-items: center;
}
.x {
display: none; .x {
position: absolute; display: none;
top: 15px; position: absolute;
left: 7px; top: 15px;
padding: 2px 6px; left: 7px;
background-color: red; padding: 2px 6px;
color: white; background-color: red;
font-size: inherit; color: white;
cursor: pointer; font-size: inherit;
border-radius: 50%; cursor: pointer;
margin-left: 5px; border-radius: 50%;
} margin-left: 5px;
}
/* Style for the video element (thumbnail) */
video#thumbnail { /* Style for the video element (thumbnail) */
display: none; video#thumbnail {
width: 100%; display: none;
height: 100%; width: 100%;
object-fit: cover; height: 100%;
} object-fit: cover;
}
/* Style for the image element (thumbnail) */
img#zz { /* Style for the image element (thumbnail) */
display: none; img#zz {
width: 100%; display: none;
height: 100%; width: 100%;
object-fit: cover; height: 100%;
} object-fit: cover;
}
input[type=file]::file-selector-button {
padding: 5px 10px 5px 10px; input[type=file]::file-selector-button {
border-radius: 8px; padding: 5px 10px 5px 10px;
border: none; border-radius: 8px;
outline: none; border: none;
border-radius: 2px; outline: none;
/* border-style: solid; border-radius: 2px;
border-width: thin; /* border-style: solid;
border-color: gray; */ border-width: thin;
background-color: #00a8c0; border-color: gray; */
color: white; background-color: #00a8c0;
} color: white;
}
input[type=file] {
width: 100%; input[type=file] {
padding: 5px 0px 5px 0px; width: 100%;
} padding: 5px 0px 5px 0px;
}
input[type=button] {
input[type=button] {
padding: 5px 10px 5px 10px;
margin: 4px; padding: 5px 10px 5px 10px;
border: none; margin: 4px;
outline: none; border: none;
border-radius: 2px; outline: none;
background-color: #00a8c0; border-radius: 2px;
color: white; background-color: #00a8c0;
} color: white;
}
input[type=file]:hover {
background-color: #cecccc; input[type=file]:hover {
z-index: 1; background-color: #cecccc;
} z-index: 1;
}
.dateContainer {
width: 100%; .dateContainer {
height: 100%; width: 100%;
} height: 100%;
}
.date-range {
display: flex; .date-range {
justify-content: space-between; display: flex;
height: 100%; justify-content: space-between;
width: 100%; height: 100%;
/* padding: 20px 0px 20px 0px; */ width: 100%;
/* border-style: solid; /* padding: 20px 0px 20px 0px; */
border-width: thin; /* border-style: solid;
border-color: gray; border-width: thin;
background-color: #e7e7e7; */ border-color: gray;
} background-color: #e7e7e7; */
}
input[type=text],
input[type=date], input[type=text],
input[type=time] { input[type=date],
width: 100%; input[type=time] {
height: 100%; width: 100%;
} height: 100%;
}
label {
font-size: 11px; label {
font-weight: 700; font-size: 11px;
} font-weight: 700;
}
select {
width: 100%; select {
height: 28px; width: 100%;
color: #444; height: 28px;
} color: #444;
}
.select2 {
width: 100% !important; .select2 {
} width: 100% !important;
}
.select2-container--default .select2-selection--single {
border-radius: 0px !important; .select2-container--default .select2-selection--single {
} border-radius: 0px !important;
}
textarea {
width: 100%; textarea {
resize: none; width: 100%;
} resize: none;
}
#text-area {
width: 91%; #text-area {
font-size: 11px; width: 91%;
padding: 9px 9px; font-size: 11px;
margin-left: 15px; padding: 9px 9px;
margin-top: 5px; margin-left: 15px;
margin-bottom: 5px; margin-top: 5px;
height: 103px; margin-bottom: 5px;
} height: 103px;
}
.buttonsContainer {
display: flex; .buttonsContainer {
flex-direction: column; display: flex;
width: 100%; flex-direction: column;
} width: 100%;
}
.ctrl-buttons {
background-color: transparent !important; .ctrl-buttons {
display: flex !important; background-color: transparent !important;
justify-content: space-evenly !important; display: flex !important;
} justify-content: space-evenly !important;
}
span#filename {
text-overflow: ellipsis; span#filename {
width: 90%; text-overflow: ellipsis;
overflow: hidden; width: 90%;
align-self: center; overflow: hidden;
} align-self: center;
}
.filename-container {
overflow: hidden; .filename-container {
justify-content: space-between; overflow: hidden;
width: 100%; justify-content: space-between;
} width: 100%;
}
.ctrl-buttons .buttonRightClass {
margin: 1vh; .ctrl-buttons .buttonRightClass {
padding: 1vh; margin: 1vh;
} padding: 1vh;
}
.parent_Window {
box-shadow: var(- -ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31)); .parent_Window {
width: 238px; box-shadow: var(- -ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31));
height: fit-content; width: 238px;
margin: auto; height: fit-content;
position: relative; margin: auto;
background: white; position: relative;
padding: 17px; background: white;
border-radius: 1%; padding: 17px;
max-height: 90%; border-radius: 1%;
padding-right: 22px; max-height: 90%;
text-align: center; padding-right: 22px;
} text-align: center;
}
#butt .genericPopup {
background-color: #000000a1; #butt .genericPopup {
display: -webkit-inline-box; background-color: #000000a1;
width: 100%; display: -webkit-inline-box;
height: 100%; width: 100%;
position: absolute; height: 100%;
top: 0; position: absolute;
z-index: 5; top: 0;
backdrop-filter: blur(4px); z-index: 5;
} backdrop-filter: blur(4px);
}
.floatingButtonPanel {
display: flex; .floatingButtonPanel {
text-align: right; display: flex;
margin-top: 9px; text-align: right;
width: 100%; margin-top: 9px;
padding: 0px; width: 100%;
} padding: 0px;
}
.emphasizeButton {
display: inline-block; .emphasizeButton {
flex: 1; display: inline-block;
vertical-align: middle; flex: 1;
margin-right: 10px; /* Adjust the spacing between buttons as needed */ vertical-align: middle;
padding: 10px 20px; /* Adjust the padding as needed */ margin-right: 10px;
border: none; /* Adjust the spacing between buttons as needed */
cursor: pointer; padding: 10px 20px;
width: 40%; /* Adjust the padding as needed */
background-color: #00a8c0; border: none;
color: white; cursor: pointer;
font-family: OpenSans, sans-serif; width: 40%;
font-size: 14px; background-color: #00a8c0;
cursor: pointer; color: white;
transition: color .6s ease-in-out, box-shadow .6s ease-in-out; font-family: OpenSans, sans-serif;
} font-size: 14px;
cursor: pointer;
.normalButton { transition: color .6s ease-in-out, box-shadow .6s ease-in-out;
display: inline-block; }
flex: 1;
vertical-align: middle; .normalButton {
margin-right: 10px; /* Adjust the spacing between buttons as needed */ display: inline-block;
padding: 10px 20px; /* Adjust the padding as needed */ flex: 1;
border: none; vertical-align: middle;
cursor: pointer; margin-right: 10px;
background-color: white; /* Adjust the spacing between buttons as needed */
color: blaock; padding: 10px 20px;
font-family: OpenSans, sans-serif; /* Adjust the padding as needed */
font-size: 14px; border: none;
cursor: pointer; cursor: pointer;
border: 1px solid #000; background-color: white;
transition: color .6s ease-in-out, box-shadow .6s ease-in-out; color: blaock;
} font-family: OpenSans, sans-serif;
font-size: 14px;
.headerLabel { cursor: pointer;
color: #676767; border: 1px solid #000;
font-weight: 600; transition: color .6s ease-in-out, box-shadow .6s ease-in-out;
font-size: 20px; }
padding: 4px 0px 5px 8px;
text-align: left; .headerLabel {
} color: #676767;
/* LOader css */ font-weight: 600;
.modal-container { font-size: 20px;
display: block; padding: 4px 0px 5px 8px;
position: fixed; text-align: left;
top: 0; }
left: 0;
width: 100%; /* LOader css */
height: 100%; .modal-container {
z-index: 1; display: block;
background-color: rgba(0, 0, 0, .5); position: fixed;
} top: 0;
left: 0;
#loaderContainer { width: 100%;
height: 280px; height: 100%;
width: 280px; z-index: 1;
margin-top: 15%; background-color: rgba(0, 0, 0, .5);
} }
@keyframes mulShdSpin { #loaderContainer {
0%, height: 280px;
100% { width: 280px;
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); margin-top: 15%;
} }
12.5% { .details-container {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); padding: 10px;
} margin: 20px 17px 0px 17px;
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); .element-id {
} font-weight: bold;
margin-bottom: 10px;
37.5% { color: #FFFFFF;
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
}
.extra-detail {
50% { padding: 5px 0;
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); color: #FFFFFF;
} }
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); @keyframes mulShdSpin {
}
0%,
75% { 100% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
} }
87.5% { 12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
} }
}
25% {
#counter { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
height: 11px; }
/* font-size: 22px;
padding: 10px; 37.5% {
position: absolute; box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
z-index: 1; }
right: 199px;
bottom: -6px; 50% {
text-shadow: box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
-1px -1px 0 #000, }
0 -1px 0 #000,
1px -1px 0 #000, 62.5% {
1px 0 0 #000, box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
1px 1px 0 #000, }
0 1px 0 #000,
-1px 1px 0 #000, 75% {
-1px 0 0 #000; */ box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
} }
.green { 87.5% {
color: green; box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
} }
}
.red {
color: red; #counter {
} height: 11px;
/* font-size: 22px;
@media only screen and (orientation: portrait) { padding: 10px;
* { position: absolute;
-webkit-font-smoothing: auto; z-index: 1;
font-size: 17px; right: 199px;
letter-spacing: 0.1em; bottom: -6px;
text-rendering: optimizeLegibility; text-shadow:
font-weight: normal; -1px -1px 0 #000,
font-family: OpenSans, sans-serif; 0 -1px 0 #000,
font-style: normal; 1px -1px 0 #000,
} 1px 0 0 #000,
1px 1px 0 #000,
h1 { 0 1px 0 #000,
display: none; -1px 1px 0 #000,
} -1px 0 0 #000; */
}
h2 {
display: none; .green {
} color: green;
}
h3 {
display: none; .red {
} color: red;
}
.web-gde-container {
width: 100vw; @media only screen and (orientation: portrait) {
height: 100vh; * {
} -webkit-font-smoothing: auto;
font-size: 17px;
#imageViewerContainer { letter-spacing: 0.1em;
display: none; text-rendering: optimizeLegibility;
} font-weight: normal;
font-family: OpenSans, sans-serif;
.sidebar { font-style: normal;
position: absolute; }
right: 0;
display: flex; h1 {
flex-direction: column; display: none;
height: 100%; }
width: 100%;
background-image: linear-gradient(to bottom, #23569f, #00a8c0); h2 {
} display: none;
}
.remove-button {
display: inline-block; h3 {
padding: 2px 6px; display: none;
background-color: red; }
color: white;
font-size: 16px; .web-gde-container {
cursor: pointer; width: 100vw;
border-radius: 50%; height: 100vh;
margin-left: 5px; }
}
#imageViewerContainer {
#input-field-container { display: none;
height: 100%; }
width: 100%;
display: flex; .sidebar {
flex-direction: column; position: absolute;
overflow: auto; right: 0;
background-image: linear-gradient(to bottom, #23569f, #00a8c0); display: flex;
justify-content: space-between; flex-direction: column;
} height: 100%;
width: 100%;
.dash { background-image: linear-gradient(to bottom, #23569f, #00a8c0);
display: unset; }
align-self: center;
padding: 6px; .remove-button {
} display: inline-block;
padding: 2px 6px;
.fieldContainer { background-color: red;
/* layout config */ color: white;
display: flex; font-size: 16px;
flex-direction: column; cursor: pointer;
border: none; border-radius: 50%;
outline: none; margin-left: 5px;
padding: 0px 4px 20px 4px; }
flex-wrap: nowrap;
} #input-field-container {
height: 100%;
#fields *:not([type=submit]):focus { width: 100%;
background-color: yellow; display: flex;
} flex-direction: column;
overflow: auto;
.image-capture, .fingerprint-capture, .file-upload { background-image: linear-gradient(to bottom, #23569f, #00a8c0);
display: flex; justify-content: space-between;
flex-direction: column; }
width: 100%;
padding: 20px; .dash {
border-radius: 2px; display: unset;
border: solid; align-self: center;
border-width: thin; padding: 6px;
border-color: gray; }
cursor: pointer;
align-items: center; .fieldContainer {
} /* layout config */
display: flex;
#fields { flex-direction: column;
margin-left: 17px; border: none;
margin-right: 17px; outline: none;
padding: 18px; padding: 0px 4px 20px 4px;
border-radius: 15px; flex-wrap: nowrap;
background-color: white; }
overflow-y: auto;
display: flex; #fields *:not([type=submit]):focus {
flex-direction: column; background-color: yellow;
flex: unset; }
max-height: 100vh;
border-style: solid; .image-capture,
border-width: thin; .fingerprint-capture {
border-color: #446397; display: flex;
} flex-direction: column;
width: 100%;
#fields>div { padding: 20px;
background-color: white; border-radius: 2px;
} border: solid;
border-width: thin;
.submitButtons { border-color: gray;
font-weight: 600; cursor: pointer;
display: block; align-items: center;
margin: auto; }
font-size: 13px;
width: 93px; #fields {
margin-top: 10px; margin-left: 17px;
margin-bottom: 15px; margin-right: 17px;
cursor: pointer; padding: 18px;
background-color: white; border-radius: 15px;
padding: 10px; background-color: white;
width: 100%; overflow-y: auto;
border-radius: 5px; display: flex;
outline: none; flex-direction: column;
border: none; flex: unset;
font-size: 16px; max-height: 100vh;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54); border-style: solid;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54); border-width: thin;
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54); border-color: #446397;
}
}
#fields>div {
background-color: white;
@media only screen and (max-width: 530px) { }
.date-range {
display: flex; .submitButtons {
flex-direction: column; font-weight: 600;
justify-content: space-between; display: block;
/* padding: 20px 0px 20px 0px; */ margin: auto;
/* border-style: solid; font-size: 13px;
border-width: thin; width: 93px;
border-color: gray; margin-top: 10px;
background-color:#e7e7e7; margin-bottom: 15px;
*/ cursor: pointer;
} background-color: white;
} padding: 10px;
width: 100%;
.dash { border-radius: 5px;
display: unset; outline: none;
align-self: center; border: none;
padding: 6px; font-size: 16px;
} box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
.date-range { -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
display: flex;
justify-content: space-between; }
}
.dateContainer { @media only screen and (max-width: 530px) {
width: 100%; .date-range {
} display: flex;
flex-direction: column;
label { justify-content: space-between;
font-size: 16px; /* padding: 20px 0px 20px 0px; */
font-weight: 700; /* border-style: solid;
} border-width: thin;
border-color: gray;
.captureButtons { background-color:#e7e7e7;
display: inline-block; */
width: 100%; }
overflow-x: clip; }
flex-wrap: nowrap;
flex-grow: 1; .dash {
border-radius: 2px; display: unset;
background-color: white; align-self: center;
border-style: solid; padding: 6px;
border-width: 0.1cm; }
border-color: #d4d2d2;
} .date-range {
display: flex;
.labelContainer { justify-content: space-between;
width: 100%; }
padding: 2px;
margin-top: 5px; .dateContainer {
} width: 100%;
}
.inputContainer {
display: inline-block; label {
width: 100%; font-size: 16px;
overflow-x: clip; font-weight: 700;
flex-wrap: nowrap; }
flex-grow: 1;
border-radius: 2px; .captureButtons {
padding: 1px; display: inline-block;
} width: 100%;
overflow-x: clip;
.input-invalid { flex-wrap: nowrap;
border-color: #ff3333 !important; flex-grow: 1;
border-style: solid; border-radius: 2px;
border-radius: inherit; background-color: white;
} border-style: solid;
border-width: 0.1cm;
.input-valid { border-color: #d4d2d2;
/* border-color: #000000 !important; */ }
border-style: solid;
border-radius: inherit; .labelContainer {
} width: 100%;
padding: 2px;
input:focus, margin-top: 5px;
textarea:focus { }
background-color: yellow;
border: 0px; .inputContainer {
border-radius: inherit; display: inline-block;
} width: 100%;
overflow-x: clip;
input[type=text], flex-wrap: nowrap;
input[type=date], flex-grow: 1;
input[type=time] { border-radius: 2px;
width: 100%; padding: 1px;
height: 25px; }
padding: 20px;
} .input-invalid {
border-color: #ff3333 !important;
input[type=checkbox], border-style: solid;
input[type=radio] { border-radius: inherit;
width: 20px; }
height: 20px;
margin-right: 15px; .input-valid {
margin-top: 1px; /* border-color: #000000 !important; */
} border-style: solid;
border-radius: inherit;
.radio-like-checkbox { }
display: flex;
padding: 3px; input:focus,
} textarea:focus {
background-color: yellow;
.checkbox { border: 0px;
display: flex; border-radius: inherit;
padding: 3px; }
}
input[type=text],
input[type=file]::file-selector-button { input[type=date],
padding: 5px 10px 5px 10px; input[type=time] {
border-radius: 2px; width: 100%;
border: none; height: 25px;
outline: none; padding: 20px;
background-color: #00a8c0; }
color: white;
} input[type=checkbox],
input[type=radio] {
input[type=file] { width: 20px;
width: 100%; height: 20px;
padding: 5px; margin-right: 15px;
} margin-top: 1px;
}
input[type=file]:hover {
background-color: #cecccc; .radio-like-checkbox {
z-index: 1; display: flex;
} padding: 3px;
}
input[type=button] {
width: 100%; .checkbox {
padding: 5px; display: flex;
margin: unset; padding: 3px;
border: none; }
outline: none;
border-radius: 2px; input[type=file]::file-selector-button {
background-color: #00a8c0; padding: 5px 10px 5px 10px;
color: white; border-radius: 2px;
} border: none;
outline: none;
.dropdown-content { background-color: #00a8c0;
padding: 10px; color: white;
border-style: solid; }
border-width: thin;
border-color: gray; input[type=file] {
} width: 100%;
padding: 5px;
select { }
width: 100%;
border-style: solid; input[type=file]:hover {
border-width: thin; background-color: #cecccc;
border-color: gray; z-index: 1;
padding: 2px; }
color: #444;
} input[type=button] {
width: 100%;
textarea { padding: 5px;
resize: none; margin: unset;
padding: 20px; border: none;
} outline: none;
border-radius: 2px;
#text-area { background-color: #00a8c0;
width: 91%; color: white;
font-size: 11px; }
padding: 9px 9px;
margin-left: 15px; .dropdown-content {
margin-top: 5px; padding: 10px;
margin-bottom: 5px; border-style: solid;
height: 103px; border-width: thin;
} border-color: gray;
}
}
select {
.clear-background { width: 100%;
background-color: transparent; border-style: solid;
} border-width: thin;
border-color: gray;
.no-border { padding: 2px;
border: 0px; color: #444;
} }
.center-objects { textarea {
display: flex; resize: none;
flex-direction: column; padding: 20px;
align-items: center; }
justify-content: flex-start;
flex-wrap: wrap; #text-area {
width: 100%; width: 91%;
} font-size: 11px;
padding: 9px 9px;
.row { margin-left: 15px;
display: block; margin-top: 5px;
} margin-bottom: 5px;
height: 103px;
.prompt-message { }
color: #636363;
} }
.prompt-message h3 { .clear-background {
font-size: 20px; background-color: transparent;
text-align: center; }
margin: 2px;
} .no-border {
border: 0px;
.prompt-message p { }
font-size: 14px;
text-align: center; .center-objects {
margin: 2px; display: flex;
} flex-direction: column;
align-items: center;
.reject-modal{ justify-content: flex-start;
overflow: auto; flex-wrap: wrap;
background-color: #fff; width: 100%;
position: absolute; }
padding: 15px;
top:15%; .row {
left:10%; display: block;
right: 10%; }
width: 80%;
height: fit-content; .prompt-message {
max-height: 70%; color: #636363;
border-radius: 5px; }
/* border: 2px solid #000; */
.prompt-message h3 {
animation-name: modalTransition; font-size: 20px;
animation-duration: .4s; text-align: center;
box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63); margin: 2px;
-webkit-box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63); }
-moz-box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
.prompt-message p {
} font-size: 14px;
text-align: center;
.button { margin: 2px;
border: 1px solid #000; }
color: #fff;
width: 15%; .reject-modal {
min-width: fit-content; overflow: auto;
border-radius: 5px; background-color: #fff;
} position: absolute;
padding: 15px;
.button.close-btn-modal:hover { top: 15%;
border: 1px solid gray !important; left: 10%;
background-color: transparent !important; right: 10%;
color: gray !important; width: 80%;
} height: fit-content;
max-height: 70%;
.btn-sm { border-radius: 5px;
width: 15% !important; /* border: 2px solid #000; */
border: 0% !important;
} animation-name: modalTransition;
animation-duration: .4s;
.btn-md { box-shadow: 13px 13px 21px 4px rgba(32, 29, 29, 0.63);
width: 30% !important; -webkit-box-shadow: 13px 13px 21px 4px rgba(32, 29, 29, 0.63);
border: 0px !important; -moz-box-shadow: 13px 13px 21px 4px rgba(32, 29, 29, 0.63);
}
}
@keyframes mulShdSpin {
0%, .button {
100% { border: 1px solid #000;
box-shadow: 0em -2.6em 0em 0em #FFFFFF, 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.5), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7); color: #fff;
} width: 15%;
12.5% { min-width: fit-content;
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.7), 1.8em -1.8em 0 0em #FFFFFF, 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5); border-radius: 5px;
} }
25% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.5), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7), 2.5em 0em 0 0em #FFFFFF, 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2); .button.close-btn-modal:hover {
} border: 1px solid gray !important;
37.5% { background-color: transparent !important;
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5), 2.5em 0em 0 0em rgba(20, 52, 164, 0.7), 1.75em 1.75em 0 0em #FFFFFF, 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2); color: gray !important;
} }
50% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.5), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.7), 0em 2.5em 0 0em #FFFFFF, -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2); .btn-sm {
} width: 15% !important;
62.5% { border: 0% !important;
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.5), 0em 2.5em 0 0em rgba(20, 52, 164, 0.7), -1.8em 1.8em 0 0em #FFFFFF, -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2); }
}
75% { .btn-md {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.5), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.7), -2.6em 0em 0 0em #FFFFFF, -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2); width: 30% !important;
} border: 0px !important;
87.5% { }
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.5), -2.6em 0em 0 0em rgba(20, 52, 164, 0.7), -1.8em -1.8em 0 0em #FFFFFF;
} @keyframes mulShdSpin {
}
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #FFFFFF, 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.5), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.7), 1.8em -1.8em 0 0em #FFFFFF, 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.5), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7), 2.5em 0em 0 0em #FFFFFF, 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5), 2.5em 0em 0 0em rgba(20, 52, 164, 0.7), 1.75em 1.75em 0 0em #FFFFFF, 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.5), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.7), 0em 2.5em 0 0em #FFFFFF, -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.5), 0em 2.5em 0 0em rgba(20, 52, 164, 0.7), -1.8em 1.8em 0 0em #FFFFFF, -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.5), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.7), -2.6em 0em 0 0em #FFFFFF, -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.5), -2.6em 0em 0 0em rgba(20, 52, 164, 0.7), -1.8em -1.8em 0 0em #FFFFFF;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment