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