Upload files to 'public_html/style'

public_html/style/inventory.css

@@ -0,0 +1,80 @@
+.edit-text{
+	position: absolute;
+	resize: both;
+	border-radius: 5px;
+	border: 1px solid lightgray;
+	padding: 5px;
+}
+
+.form-window{
+	width: 100%;
+	height: 100%;
+	color: #282828;
+	display: none;
+	text-align: center;
+	position: absolute;
+	z-index: 9998;
+	background-color: rgb(0,0,0,0.25);
+}
+.form-wrapper{
+	height: 85%;
+	width: 40%;
+	position: relative;
+	z-index: 9999;
+	top: 50%;
+	transform: translateY(-50%);
+	overflow: auto;
+	margin: auto;
+	border-radius: 5px;
+	padding: 1.25%;
+	background-color: #ffffff;
+
+}
+.form-header{
+	float: left;
+	display: inline-block;
+	text-transform: capitalize;
+}
+.close-icon{
+	color: #fd351d;
+	float: right;
+	display: inline-block;
+	cursor: pointer;
+}
+.close-icon:hover{
+  opacity: 0.75;
+  transition: opacity 0.5s;}
+.form{
+	padding: 7.5px;
+	width: 100%;
+	display: inline-block;
+	float: left;
+	text-align: left;
+}
+
+.form-header-wrapper{
+	display: block;
+	width: 100%;
+}
+.li-wrapper{
+	margin-bottom: 1%;
+}
+.text-field{
+	width: 100%;
+	display: block;
+
+	border: 1px solid lightgray;
+	border-radius: 5px;
+	padding: 7.5px;
+  background-color: #eaeded;
+}.empty-field{
+  border: 1px solid #fd351d; 
+}
+
+.required-field{
+	color: #fd351d;
+}
+.fields-required{
+	color: #fd351d;
+	display: none;
+}

public_html/style/main.css

@@ -0,0 +1,599 @@
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+                        José A. Quiñones-Flores
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   main.css
+    Description     :   Main styling for page, navbar and footer. */
+
+/* html,body,row - sizing/font */
+body,html{
+  width: 100%;
+  height: 100%;
+  font-family: Futura, Trebuchet MS, Arial, sans-serif; font-size: 15px;
+}
+/* Include padding and borders to element width and height. */
+*{
+  box-sizing: border-box;
+}
+/* content - styling/sizing, handle content overflow */
+.content{
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: hidden;
+  margin-left: 0%;
+  background-color: #ffffff; 
+}
+/* main - sizing/content overflow */
+.main{
+  height: 92%;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+/* header-wrapper - formatting */
+.header-wrapper{
+  margin-top: 1%;
+  margin-bottom: 1%;
+}
+/* header - styling/formatting */
+.header{
+  display: inline-block;
+  padding: 7.5px;
+  padding-left: 0px;
+  color: #282828;
+  text-transform: capitalize;
+}
+.inventory{
+  width: 100%;
+  height: 85%;
+  overflow: auto;
+  display: inline-block;
+  border-radius: 5px;
+  background-color: #eaeded;
+
+    /* animation-fill-mode: both; */
+}
+
+.inventory-row{
+
+
+}
+.inventory-col:first-child{
+/*   border-right: 1px solid black;
+ */}
+
+.table{
+  height: 100%;
+  width: 100%;
+  color: #282828;
+border: 5px solid rgba(0, 128, 255, 0.0) !important;
+  margin-bottom: 0%;
+  position: relative;
+    z-index:0;
+font-size: 15px;
+
+
+
+}
+.options{
+  font-size: 14px;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+
+}
+.no-padding{
+  padding: 0px;
+}
+.options:hover{
+  opacity: 0.75;
+  transition: opacity 0.5s;
+}
+
+.fa-minus-square{
+  color: #fd351d ;
+}
+.fa-copy{
+  color: white;
+}
+.fa-pen{
+  color:   #3f5efb    ;
+}
+th{
+  text-align: center;
+}
+thead{
+
+
+}
+.t-row{
+  height: 25%;
+  width: 100%;
+  display: flex;
+      animation: alternate_color ease-in-out;
+    animation-iteration-count: infinite;
+    animation-duration: 4s;
+}
+tr{
+  width: 100%;
+
+}
+td { max-width: 300px;  /*  position: relative; */  z-index:1;
+  padding: 7.5px;/* 
+    white-space: nowrap;
+  overflow: hidden; */
+  word-wrap: break-word;
+  text-overflow: ellipsis;
+  border: none;
+
+/*       vertical-align: bottom;
+ */
+} 
+
+.table td, .table th {
+    padding: .75rem;
+    vertical-align: top;
+    border-top: none;
+}
+th{
+        border-bottom: 1px solid black;
+}
+.no-padding{
+  padding: 0px;
+}
+.options-cell{
+  display: flex ;
+}
+
+.changes-wrapper{
+  margin: 2%;
+  display: block;
+  text-align: center;
+}
+
+.changes{
+  min-width: 100px;
+  cursor: pointer;
+  color: #ffffff;
+  border-radius: 5px;
+  border: none;
+  padding: 10px;
+  background-color: #fd351d;
+
+}.changes:hove{
+    opacity: 0.75;
+  transition: opacity 0.5s;
+}
+.submit{
+    background-color: #3f5efb;
+
+}
+
+p{
+/*   display: inline-block;
+  float: left; */
+  margin: 0px;
+}
+
+.text:-webkit-autofill,
+.text:-webkit-autofill:hover, 
+.text:-webkit-autofill:focus, 
+.text:-webkit-autofill:active{
+    -webkit-text-fill-color: gray !important;
+  -webkit-box-shadow: 0 0 0 30px #eaeded inset !important;
+  background-color: #eaeded;}
+/* success/warning - styling */
+.success,.warning{
+  color: #ffffff;
+  padding: 7.5px;
+  display: none;
+  margin-top: 1%;
+  margin-bottom: 1%;
+  background-color: rgba(205,97,85,1.0);
+}
+.success{
+  background-color: rgba(82,190,128,1.0);
+}
+
+/* redirect links - formatting */
+.redir{
+  color: #8cc2ff;
+}
+.redir:hover{
+  text-decoration: none;
+}
+
+/* Loading div styling/formatting */
+.loading-screen{
+  width: 100%;
+  height: 100%;
+  color: white;
+  display: block;
+  text-align: center;
+  position: absolute;
+  z-index: 9999;
+  background-color: rgb(2,2,12);
+}
+/* Loading text styling/formatting */
+.ls-wrapper{
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  overflow: hidden;
+  margin: auto;
+  text-align: center;
+}
+/* Loading animation */
+.loading-icon{
+  margin: auto;
+  border: 2.5px solid lightgray;
+  border-radius: 50%;
+  border-right: 2.5px solid rgba(0,0,0,0.5);
+  width: 100px;
+  height: 100px;
+  -webkit-animation: spin 3s linear infinite; /* Safari */
+  animation: spin 3s linear infinite;
+}
+.loading-text{
+  margin-top: 0.5%;
+}
+/* Fade in animation. */
+@keyframes fadein{
+  from{
+      opacity:0;
+  }
+  to{
+      opacity:1;
+  }
+}
+@-moz-keyframes fadein{ /* Firefox */
+  from{
+      opacity:0;
+  }
+  to{
+      opacity:1;
+  }
+}
+@-webkit-keyframes fadein{ /* Safari and Chrome */
+  from{
+      opacity:0;
+  }
+  to{
+      opacity:1;
+  }
+}
+@-o-keyframes fadein{ /* Opera */
+  from{
+      opacity:0;
+  }
+  to{
+      opacity: 1;
+  }
+}
+/* Spinning animation - Safari */
+@-webkit-keyframes spin {
+0% { -webkit-transform: rotate(0deg); }
+100% { -webkit-transform: rotate(360deg); }
+}
+/* Spinning animation */
+@keyframes spin {
+0% { transform: rotate(0deg); }
+100% { transform: rotate(360deg); }
+}
+
+.error{
+  font-size: 17.5px;
+  display: block;
+  padding: 1%;
+}
+
+@keyframes alternate_color{
+  0% {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  
+  50% {
+    background-color: #eaeded;
+  }
+  
+  100% {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* ------------------------------------ navbar -------------------------------- */
+
+/* navbar wrapper - formatting */
+.nav{
+	display: block;
+}
+.collapse-wrapper{
+    padding-left: calc(2.5% - 7.5px);
+
+  width: 100%;
+  display: block;
+  overflow-y: auto;
+
+    max-height: 0;
+    transition: max-height 0.50s ease-out;
+    }
+
+.navbar:hover .collapse-wrapper{
+    max-height: 500px;
+    transition: max-height 0.75s ease-in;
+
+}
+
+/* navbar - styling/formatting */
+.navbar{
+  position: relative;
+  text-align: left;
+  justify-content: space-between;
+  color: #ffffff;
+  width: 100%;
+  height: 7%;
+  padding: 0.25%;
+	padding-left: 2.5%;
+  padding-right: 2.5%;
+  background: rgb(2,0,36);
+  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 75%, rgba(0,212,255,1) 100%);
+}
+/* navbar-nav .dropdown-menu{
+    position: absolute;
+  z-index: 9999;
+} */
+.navbar-nav{
+  display: block;
+  width: 100%;
+}
+
+.navbar-collapse{
+
+}
+
+.navbar-dark .navbar-brand{
+  color: #ffffff;
+}
+.navbar-toggler{
+  display: none;
+}
+/* brand - sizing */
+.navbar-brand{
+  color: #ffffff;
+  display: inline-block;
+  float: left;
+	font-size: 27px;
+	margin-right: 2.5%;
+  font-weight: bold;
+  text-transform: capitalize;
+}
+
+/* collapse container - sizing */
+.collapse{
+	width: 100%;
+}
+.link:hover{
+  color: #ffffff;
+  background-color: rgba(0,0,0,0.25);
+  text-decoration: none;
+}
+.nav-item{
+  display: inline-block;
+  float: left;
+}
+
+.link{
+  font-size: 17.5px;
+  color: darkgray;
+  text-decoration: none;
+  display: inline-block;
+  float: left;
+  border-radius: 5px;
+  padding: 7.5px;
+  margin-right: 2.5px;
+  margin-bottom: 1px;
+}
+.current{
+  color: #ffffff;
+  background-color: rgba(0,0,0,0.25);
+}
+.fas{
+  display: inline-flex;
+}
+
+.link .fas{
+  margin-left: 2.5px;
+}
+
+
+/* search form wrapper - formatting */
+.sf-wrapper{
+  float: right;
+  border-radius: 5px;
+	width: 30%;
+  padding: 7.5px;
+  padding-right: 0px;
+}
+/* search form - formatting */
+.search-form{
+	display: flex;
+	border: none;
+  background-color: #eaeded;
+}
+.search-form:focus{
+  background-color: #eaeded;
+}
+.search-form::-webkit-input-placeholder { /* Edge */
+  color: rgba(0,0,0,0.5);
+}
+
+.search-form:-ms-input-placeholder { /* Internet Explorer */
+  color: rgba(0,0,0,0.5);
+}
+
+.search-form::placeholder {
+  color: rgba(0,0,0,0.5);
+}
+/* submit button - styling */
+.submit-query{
+  border:  1px solid lightgray;
+  color: rgba(0,0,0,0.5);
+	background-color: #eaeded;
+}
+/* user menu wrapper - formatting */
+/* .um-wrapper{
+  position: relative;
+  float: right;
+	display: inline-block;
+  padding: 0px;
+} */
+/* user menu - styling */
+.user-menu{
+  display: block;
+  background-color: transparent;
+  float: right;
+  /* position: relative; */
+	color: white;
+  /* overflow-y: auto; */
+}
+
+.user{
+  color: white;
+}
+.um-wrapper{
+  display: flex;
+  float: right;
+}
+/* .um-wrapper:hover .dropdown-menu{
+  display: block;
+  transition: display 0.5s ease-in;
+
+}
+.um-wrapper:hover .user{
+  color: #ffffff;
+  background-color: rgba(0,0,0,0.25);
+
+} */
+
+.um-icons{
+  float: right;
+}
+/* user dropdown menu - styling */
+.dropdown-menu{
+  margin: 0%;
+  top: 100%;
+  right: 2.5%;
+  /* position: absolute; */
+	padding: 0px;
+  background-color: #020024;
+}
+
+/* divider - styling */
+.dropdown-divider{
+	margin: 0px;
+	border-top: 0.5px solid #000000;
+}
+/* dropdown item - styling/formatting */
+.dropdown-item{
+	color: lightgray;
+	margin-bottom: 0px;
+}
+.dropdown-item:hover{
+  color: #ffffff;
+  background-color: #020024;
+
+  /* transition: color 0.50s ease-in; */
+}
+.log-out-wrapper{
+    float: right;
+  display: inline-block;
+}
+.log-out{
+  color: #ffffff;
+  margin-top: 1.5%;
+  padding: 5px;
+}
+/* log out - formatting */
+.log-out{
+	cursor: pointer;
+}
+/* navbar sizing on smaller screens */
+@media screen and (max-width: 991px){
+	/* navbar link items - formatting */
+	.navbar-nav{
+		text-align: center;
+	}
+	/* wrappers - formatting */
+	.left,.right,.um-wrapper{
+		float: none;
+	}
+	.sf-wrapper{
+		display: flex;
+		margin: auto;
+		text-align: center;
+		margin-bottom: 1%;
+	}
+	.um-wrapper{
+		display: block;
+		margin: auto;
+		text-align: center;
+	}
+	/* collapse wrapper - formatting childs */
+	.collapse *{
+		margin: auto;
+	}
+	/* user menu - formatting */
+	.user-menu{
+		margin: auto;
+		margin-top: 1%;
+		text-align: center;
+	}
+	/* user dropdown menu - formatting */
+	.dropdown-menu{
+		left: 0%;
+		margin: auto;
+		text-align: center;
+	}
+	.dropdown-menu.show{
+		width: 100%;
+		display: inline-block;
+	}
+	/* hide placeholder text */
+	::-webkit-input-placeholder{
+    	color: transparent !important; 
+    }
+	:-moz-placeholder{
+    	color: transparent !important; 
+    }
+	::-moz-placeholder{
+    	color: transparent !important; 
+    }
+	:-ms-input-placeholder{
+    	color: transparent !important; 
+    }
+}
+/* expand search form on smaller screens */
+@media screen and (max-width: 576px){
+	.sf-wrapper{
+		width: 50%;
+	}
+}
+/* ------------------------------------ FOOTER --------------------------------- */
+
+.footer{
+  margin-top: 1%;
+  padding-left: 5%;
+  padding-right: 5%;
+  padding-top: 2.5%;
+  color: white;
+  display: flex;
+  height: 100px;
+  background-color: rgba(40,41,45,1.0);
+  width: 100%;
+}
+.copyright-wrapper{
+  width: 100%;
+  text-align: right;
+}