|
|
|
@ -1,173 +1,461 @@
|
|
|
|
|
.header {
|
|
|
|
|
font-size: 2em;
|
|
|
|
|
display: flex;
|
|
|
|
|
background-color: blue;
|
|
|
|
|
color: white;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header::before,
|
|
|
|
|
.header::after {
|
|
|
|
|
content: '';
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header::before {
|
|
|
|
|
order: -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logout-button {
|
|
|
|
|
order: 2;
|
|
|
|
|
}
|
|
|
|
|
.logout-button{
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
background-color: red;
|
|
|
|
|
color: white;
|
|
|
|
|
border: none;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
background-color: #ed4040;
|
|
|
|
|
font-size: 1.5em;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
/* TOOLBABR-INPUT-PDF*/
|
|
|
|
|
.toolbar {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 0.2vw;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
th {
|
|
|
|
|
background-color: #f2f2f2;
|
|
|
|
|
color: black;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border: 2px solid #ddd;
|
|
|
|
|
.toolbar .button-group{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 0.5em; /* Adjust as needed */
|
|
|
|
|
padding: 1em;
|
|
|
|
|
margin : 0.25em;
|
|
|
|
|
width: auto;
|
|
|
|
|
white-space: normal;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
|
|
|
font-size: 3vw;
|
|
|
|
|
color: white;
|
|
|
|
|
margin: 0 0 50px;
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*--TABLE --*/
|
|
|
|
|
.table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
table-layout: auto!important;
|
|
|
|
|
table-layout: fixed;
|
|
|
|
|
border: black 2px;
|
|
|
|
|
}
|
|
|
|
|
.scrollable-cell {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
white-space: normal;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
white-space: normal;
|
|
|
|
|
}
|
|
|
|
|
.table-container{
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 1em; /* Adjust as needed */
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
white-space: normal;
|
|
|
|
|
max-height: 70px;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
}
|
|
|
|
|
/* TALBE SIZES */
|
|
|
|
|
@media screen and (min-width: 1900px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 3.5em;
|
|
|
|
|
}
|
|
|
|
|
.logout-button {
|
|
|
|
|
font-size: 3em;
|
|
|
|
|
}
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 1.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 1.2em;
|
|
|
|
|
}
|
|
|
|
|
.table thead th {
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
background: #fff;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
width: 300px !important; /* Set a specific width */
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 2.5em;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 2.5em;
|
|
|
|
|
}
|
|
|
|
|
.table td{
|
|
|
|
|
border: 2px solid #ddd;
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 2.2em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
overflow-y: auto !important; /* Enables vertical scrollbar if content exceeds cell height */
|
|
|
|
|
white-space: normal; /* Allows text to wrap to next line */
|
|
|
|
|
max-height: 25px !important; /* Set a specific height */
|
|
|
|
|
max-height: 140px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 2.5em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 2.5em;
|
|
|
|
|
}
|
|
|
|
|
.table .td.scrollable-cell .keyword-cell {
|
|
|
|
|
min-width: 300px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table tr td:first-child {
|
|
|
|
|
min-width: 150px !important;
|
|
|
|
|
@media screen and (min-width: 1500px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 3em;
|
|
|
|
|
}
|
|
|
|
|
@media screen and (max-width: 600px) {
|
|
|
|
|
.table {
|
|
|
|
|
.logout-button {
|
|
|
|
|
font-size: 2.5em;
|
|
|
|
|
}
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 600px) {
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
}
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 2em;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 2em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
font-size: 1.8em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
max-height: 120px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 2em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 2em;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#edit-icon, #delete-icon {
|
|
|
|
|
min-width: 16px;
|
|
|
|
|
@media screen and (min-width: 1000px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 2.5em;
|
|
|
|
|
}
|
|
|
|
|
.logout-button {
|
|
|
|
|
font-size: 2em;
|
|
|
|
|
}
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 0.75em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 400px) {
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 0.75em;
|
|
|
|
|
}
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 1.75em;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 1.75em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
font-size: 1.5em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
max-height: 100px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 1.25em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 1.25em;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#edit-icon, #delete-icon {
|
|
|
|
|
min-width: 12px;
|
|
|
|
|
@media screen and (max-width: 800px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
}
|
|
|
|
|
.logout-button {
|
|
|
|
|
font-size: 0.8em;
|
|
|
|
|
}
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table tr {
|
|
|
|
|
height: 10%;
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 0.7em;
|
|
|
|
|
}
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
background-color: #007BFF;
|
|
|
|
|
padding: 0.2vw;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
input{
|
|
|
|
|
font-size: 0.7em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 0.7em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
max-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 0.75em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 0.75em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th{
|
|
|
|
|
width: 90%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 700px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 0.9em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logout-button {
|
|
|
|
|
font-size: 0.6em;
|
|
|
|
|
}
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 0.6em;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 0.6em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 0.6em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
max-height: 25px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
padding: 1em;
|
|
|
|
|
margin : 0.25em;
|
|
|
|
|
width: auto;
|
|
|
|
|
white-space: normal;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.toolbar {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
i.fas.fa-arrow-left {
|
|
|
|
|
z-index: 1;
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
.table td, .table th{
|
|
|
|
|
width: 80%;
|
|
|
|
|
}
|
|
|
|
|
.button-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
.header button {
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 600px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 0.8em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logout-button {
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
max-height: 18px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th{
|
|
|
|
|
width: 70%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 500px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 0.7em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logout-button {
|
|
|
|
|
font-size: 0.4em;
|
|
|
|
|
}
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 0.18em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 0.18em;
|
|
|
|
|
}
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 0.4em;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 0.4em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 0.4em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
max-height: 17px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 0.225em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 0.225em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th{
|
|
|
|
|
width: 60%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 400px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 0.6em;
|
|
|
|
|
}
|
|
|
|
|
.logout-button {
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: 0.35em;
|
|
|
|
|
}
|
|
|
|
|
html, body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 0.15em;
|
|
|
|
|
}
|
|
|
|
|
.page{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 0.15em;
|
|
|
|
|
}
|
|
|
|
|
.page a{
|
|
|
|
|
padding:10px;
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 0.35em;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 0.35em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 0.35em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
max-height: 20px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th{
|
|
|
|
|
width: 30%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 300px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
.logout-button {
|
|
|
|
|
font-size: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 0.13em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 0.13em;
|
|
|
|
|
}
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
max-height: 20px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 0.175em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 0.175em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th{
|
|
|
|
|
width: 30%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 200px) {
|
|
|
|
|
.header h1 {
|
|
|
|
|
font-size: 0.4em;
|
|
|
|
|
}
|
|
|
|
|
.logout-button {
|
|
|
|
|
font-size: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
.toolbar h1 {
|
|
|
|
|
font-size: 0.1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-icon, #delete-icon {
|
|
|
|
|
min-width: 24px;
|
|
|
|
|
.pdfButton {
|
|
|
|
|
font-size: 0.1em;
|
|
|
|
|
}
|
|
|
|
|
#create-icon{
|
|
|
|
|
font-size: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th {
|
|
|
|
|
font-size: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
.table td.scrollable-cell .scrollable-content {
|
|
|
|
|
max-height: 15px;
|
|
|
|
|
}
|
|
|
|
|
.edit-icon {
|
|
|
|
|
font-size: 0.15em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
font-size: 0.15em;
|
|
|
|
|
}
|
|
|
|
|
.table td, .table th{
|
|
|
|
|
width: 20%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-icon {
|
|
|
|
|
color: #ffa600;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon {
|
|
|
|
|
color: red;
|
|
|
|
|
margin-left: 2px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
}
|
|
|
|
|
#create-icon {
|
|
|
|
|
color: green;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
}
|
|
|
|
|
.inactive {
|
|
|
|
|
pointer-events: none;
|
|
|
|
@ -230,13 +518,12 @@ html, body {
|
|
|
|
|
.modal p{
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
.scrollable-table {
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
.page{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hide-icon {
|
|
|
|
|
display: none;
|
|
|
|
|
.page a{
|
|
|
|
|
padding:10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|