Corecciones al ccs añdido anteriormente, habia problemas con keywords en empresas. Y Ajusetes a insertes de creacion que pasa cuando arrancan la aplicaicon a primera vez.
parent
a0dd6cc2fa
commit
35d908e267
@ -0,0 +1,501 @@
|
|||||||
|
.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{
|
||||||
|
color: white;
|
||||||
|
background-color: #ed4040;
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
/* TOOLBABR-INPUT-PDF*/
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.2vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.toolbar .button-group{
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
}
|
||||||
|
.pdfButton {
|
||||||
|
font-size: 0.5em; /* Adjust as needed */
|
||||||
|
padding: 1em;
|
||||||
|
margin : 0.25em;
|
||||||
|
width: auto;
|
||||||
|
white-space: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--TABLE --*/
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
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: 0.5em; /* 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: 2.5em;
|
||||||
|
}
|
||||||
|
.logout-button {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
.toolbar h1 {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdfButton {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
#create-icon{
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td.scrollable-cell .scrollable-content {
|
||||||
|
max-height: 140px;
|
||||||
|
}
|
||||||
|
.edit-icon {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
.delete-icon {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1500px) {
|
||||||
|
.header h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
.logout-button {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
.toolbar h1 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdfButton {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
#create-icon{
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.table td.scrollable-cell .scrollable-content {
|
||||||
|
max-height: 120px;
|
||||||
|
}
|
||||||
|
.edit-icon {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
.delete-icon {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1000px) {
|
||||||
|
.header h1 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
.logout-button {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
.toolbar h1 {
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdfButton {
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
#create-icon{
|
||||||
|
font-size: 1.75em;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.table td.scrollable-cell .scrollable-content {
|
||||||
|
max-height: 100px;
|
||||||
|
}
|
||||||
|
.edit-icon {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
.delete-icon {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.header h1 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.logout-button {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
.toolbar h1 {
|
||||||
|
font-size: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdfButton {
|
||||||
|
font-size: 0.3em;
|
||||||
|
}
|
||||||
|
#create-icon{
|
||||||
|
font-size: 0.7em;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
font-size: 0.5em;
|
||||||
|
}
|
||||||
|
.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.scrollable-cell .scrollable-content {
|
||||||
|
max-height: 25px;
|
||||||
|
}
|
||||||
|
.edit-icon {
|
||||||
|
font-size: 0.5em;
|
||||||
|
}
|
||||||
|
.delete-icon {
|
||||||
|
font-size: 0.5em;
|
||||||
|
}
|
||||||
|
.table td, .table th{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.header h1 {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-button {
|
||||||
|
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.4em;
|
||||||
|
}
|
||||||
|
.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.3em;
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
font-size: 0.35em;
|
||||||
|
}
|
||||||
|
.toolbar h1 {
|
||||||
|
font-size: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdfButton {
|
||||||
|
font-size: 0.15em;
|
||||||
|
}
|
||||||
|
#create-icon{
|
||||||
|
font-size: 0.35em;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
font-size: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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.2em;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdfButton {
|
||||||
|
font-size: 0.1em;
|
||||||
|
}
|
||||||
|
#create-icon{
|
||||||
|
font-size: 0.25em;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
font-size: 0.1em;
|
||||||
|
}
|
||||||
|
.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: 1em;
|
||||||
|
}
|
||||||
|
.delete-icon {
|
||||||
|
color: red;
|
||||||
|
margin-left: 2px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
#create-icon {
|
||||||
|
color: green;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.inactive {
|
||||||
|
pointer-events: none;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
.no-link-style {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal{
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1001;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgb(0,0,0);
|
||||||
|
background-color: rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
.modal-content{
|
||||||
|
background-color: #fefefe;
|
||||||
|
margin: 20% auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 2px solid #888;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete{
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
color: red;
|
||||||
|
float: right;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.close{
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
color: black;
|
||||||
|
float: right;
|
||||||
|
font-size: 28px;
|
||||||
|
padding: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close:hover{
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete:hover{
|
||||||
|
color: #ed4040;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal p{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.page{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.page a{
|
||||||
|
padding:10px;
|
||||||
|
}
|
Loading…
Reference in new issue