misfinanzas/static/style.css

@import url('https://fonts.gogleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Variables globales */
:root {
   --ancho-menu: 250px;
 }
 
/* Estilo general por defecto */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}

/* Estilo del body */

body {
   width: 100%;
   background: #E5E7EB;
   position: relative;
   display: flex;
}

/* Estilo del menú lateral */

#menu {
   background: #E3DBFC;
   width: var(--ancho-menu); /* si cambia este valor puede afectar a otros calculos más abajo, por ejemplo el ancho de navigation */
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
}

#menu .logo {
   display: flex;
   align-items: center;
   color: #000;
   padding: 30px 0 0 30px;
}

#menu .logo img {
   width: 40px;
   margin-right: 15px;
}

#menu .items {
   margin-top: 40px;
}

#menu .items li {
   list-style: none;
   padding: 15px 0;
   transition: 0.3s ease;
}

#menu .items li:hover {
   background: #253047;
   cursor: pointer;
}

#menu .items li:nth-child(i) {
   border-left: 4px solid #fff;
}

#menu .items li i{
   color: rgb(134, 141, 151);
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   font-size: 14px;
   margin: 0 5px 0 25px;
}

#menu .items li:hover i,
#menu .items li:hover a {
   color: #F3F4F6;
}


#menu .items li a{
   text-decoration: none;
   color: rgb(134, 141, 151);
   font-weight: 300px;
   transition: 0.3s ease;
}

/* Estilo del contenedor principal */

#interface {
   width: calc(100% - var(--ancho-menu)); /* el 200px es el ancho del menú. Si cambia este hay que cambiarlo aquí */
   margin-left: var(--ancho-menu); /* el 200px es el ancho del menú. Si cambia este hay que cambiarlo aquí */
   position: relative;
}

#interface .titulo-login {
   color: #2b2b2b;
   padding: 30px 30px 0 30px;
   font-size: 24px;
   font-weight: 700;
}

#interface .errornote {
   color: #2b2b2b;
   padding: 30px 30px 20px 30px;
   font-size: 15px;
}

/* Estilo de la barra de navegación */

#interface .navigation {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #fff;
   padding: 20px 30px;
   border-bottom: 3px solid #E3DBFC;
   position: fixed;
   width: calc(100% - var(--ancho-menu)); /* el 200px es el ancho del menú. Si cambia este hay que cambiarlo aquí */
}

#interface .navigation .search{
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 10px 14px;
   border: 1px;
   border-radius: 4px;
}

#interface .navigation .search i{
   margin-right: 14px;
}

#interface .navigation .search input{
   border: 1px solid #E3DBFC;
   outline: none;
   font-size: 14px;
}

#interface .navigation .profile {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

#interface .navigation .profile i {
   margin-right: 20px;
   font-size: 19px;
   font-weight: 400;;
}

#interface .navigation .profile img {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border-width: 50%;
}

/* Estilo del formulario de inicio de sesión */

#login-form {
   display: flex;
   justify-content: left;
   align-items: left;
   flex-direction: column;
   padding: 30px 30px 0 30px;
}

#login-form .usuario-login {
   display: flex;
   color: #2b2b2b;
   font-size: 20px;
   font-weight: 400;
}

#login-form .password-login {
   display: flex;
   color: #2b2b2b;
   font-size: 20px;
   font-weight: 400;
}

#login-form .usuario {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 0 0 10px 20px ;
   width: 100%;
}

#login-form .input-usuario input {
   border: 1px solid #E3DBFC;
   outline: none;
   font-size: 14px;
   padding: 0 0 10px 20px ;
   width: 100%;
   border-radius: 5px;
}

#login-form .input-password input {
   border: 1px solid #E3DBFC;
   outline: none;
   font-size: 14px;
   padding: 0 0 10px 20px ;
   width: 100%;
   border-radius: 5px;
}

#login-form .password {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 0 0 10px 20px ;
   width: 100%;
}

#login-form .input-usuario {
   justify-content: flex-start;
   align-items: center;
   padding: 0 0 0 20px ;
   width: 100%;
}

#login-form .input-password {
   justify-content: flex-start;
   align-items: center;
   padding: 0 0 0 20px ;
   width: 100%;
}

#login-form .text-center {
   display: flex;
   color: #2b2b2b;
   font-size: 20px;
   font-weight: 400;
   padding: 0 0 5px 10px;
}

#login-form .boton-primario {
   display: flex;
   justify-content: center;
   align-items: center;
   background: #05e781;
   color: #fff;
   font-size: 20px;
   font-weight: 400;
   padding: 10px 10px;
   border-radius: 10px;
   margin-top: 30px;
}

/* Estilo del contenedor del menú burger para mostrar-ocultar el menú lateral */

.n1 {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

/* Estilo del botón de menú burger */

#menu-btn {
   display: none;
   color: #2b2b2b;
   font-size: 20px;
   cursor: pointer;
   margin-right: 20px;
}

/* Estilo del título de las páginas */

.i-name {
   color: #444a53;
   padding: 30px 30px 0 30px;
   font-size: 24px;
   font-weight: 700;
   margin-top: 70px;
}

/* Estilo de las tarjetas mostradas en el interfaz */

.values {
   display: flex;
   padding: 30px 40px 0 30px;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.values .val-box {
   background: #a1ccdf;
   width: 235px;
   padding: 16px 20px;
   border-radius: 5px;
   display: flex;
   justify-content: flex-start;   
   align-items: center;
}

.values .val-box i {
   font-size: 50px;
   width: 60px;
   height: 60px;   
   line-height: 30px;
   border-radius: 10%;
   text-align: center;
   color: #fff;
   margin-right: 15px;
}

.values .val-box:nth-child(1) i {
   background: #E3DBFC;
}

.values .val-box:nth-child(2) i {
   background: #6249ac;
}

.values .val-box:nth-child(3) i {
   background: #b4a3e9;
}

.values .val-box:nth-child(4) i{
   background: #615780;
}

.values .val-box h3 {
   font-size: 18px;
   font-weight: 600;
}

.values .val-box span {
   font-size: 15px;
   color: #828997;
}

.values .val-cuenta {
   background: #ade78c;
   width: 235px;
   padding: 16px 20px;
   border-radius: 5px;
   display: flex;
   justify-content: flex-start;   
   align-items: center;
}

.values .val-cuenta i {
   font-size: 50px;
   width: 60px;
   height: 60px;   
   line-height: 30px;
   border-radius: 10%;
   text-align: center;
   color: #fff;
   margin-right: 15px;
}

.values .val-cuenta:nth-child(1) i {
   background: #E3DBFC;
}

.values .val-cuenta:nth-child(2) i {
   background: #6249ac;
}

.values .val-cuenta:nth-child(3) i {
   background: #b4a3e9;
}

.values .val-cuenta:nth-child(4) i{
   background: #615780;
}

.values .val-cuenta h3 {
   font-size: 18px;
   font-weight: 600;
}

.values .val-cuenta span {
   font-size: 15px;
   color: #828997;
}
/* Estilo del panel principal donde irá el contenido */

.board{
   width: 94%;
   margin: 30px 0 30px 30px;
   overflow: auto;
   background: #fff;
   border-radius: 8px;
}

.board img {
   width: 45px;
   height: 45px;
   object-fit: cover;
   border-radius: 50%;
   margin-right: 15px;
}

.board h5 {
   font-size: 14px;
   font-weight: 600;
}

.board p {
   font-weight: 400;
   font-size: 13px;
   color: #828997;
}

.board .people {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   text-align: start;
}

/* Estilo del contenedor para recoger los botones */

.botones {
   width: 94%;
   margin: 30px 0px 30px 0px;
   overflow: auto;
   background: #fff;
   border-radius: 8px;
}

/* Estilo de la tabla o tablas que van el el board */

table {
   border-collapse: collapse;
}

tr {
   border-bottom: 1px solid #fff;
}

thead {
   font-size: 14px;
   text-transform: uppercase;
   font-weight: 400;
   background: #dddce2;
   text-align: start;
   padding: 15px;
}

thead tr {
   height: 50px;
}

tbody tr td {
   padding: 10px 15px;
}

tbody .fila-impar {
   background-color: #ccceca;
}

tbody .fila-par {
   background-color: #fff;
}

.active p {
   background: #d7fada;
   padding: 2px 10px;
   display: inline-block;
   border-radius: 40px;
   color: #2b2b2b;
}

.edit a {
   text-decoration: none;
   font-size: 14px;
   color: #554cd1;
   font-weight: 600;
}

/* Control de los tamaños en modo responsive */

@media (max-width: 769px) {
   #menu {
      width: 170px;
      position: fixed;
      left: -170px;
      transition: 0.3s ease;
   }
   #menu.active {
      left: 0;
   }
   #menu-btn {
      display: initial;
   }
   #interface {
      width: 100%;
      margin-left: 0px;
      display: inline-block;
      transition: 0.3s ease;
  }
  #menu.active~#interface {
      width: calc(100% - 170px);
      margin-left: 170px;
      transition: 0.3s ease;
  }
  #interface .navigation {
      width: 100%;
  }

  .values {
   padding: 30px 40px 0 30px;
   justify-content: flex-start;
  }
  .values .val-box {
   padding: 16px 20px;
   margin: 10px 20px 10px 0;
  }
  .values .val-cuenta {
   padding: 16px 20px;
   margin: 10px 20px 10px 0;
  }
  .board {
   width: 92%;
   padding: 0;
   overflow-x: auto;
   }
   table{
      width: 100%;
      border-collapse: collapse;
   }
}

@media (max-width: 477px) {
   #interface .navigation {
      padding: 15px;
  }
  /* esto de aquí no se si hace algo */
  #interface .navigation .search input {
      width: 150px;
  }
  .i-name {
   padding: 30px 15px 0 15px;
  }
  .values {
   padding: 15px 15px 0 15px;
  }
  .values .val-box {
   width: 100%;
   margin: 8px
  }
  .values .val-cuenta {
   width: 100%;
   margin: 8px
  }
  #menu-toggle {
   display: none;
 }
}

/* Botón desplegable (usado para el menú de usuario) */

.dropbtn {
   background-color: #fff;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
   cursor: pointer;
}

.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}

.dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
   display: block;
}

.dropdown:hover .dropbtn {
   background-color: #fff;
}

.boton-salir {
   background: none!important;
   border: none;
   padding: 0!important;
   /*optional*/
   font-family: arial, sans-serif;
   /*input has OS specific font-family*/
   /*color: #069;
   text-decoration: underline;*/
   cursor: pointer;
   font-size: 16px;
}

/* Estilo del contenedor para albergar un form */

.div-form {
   width: 60%;
   padding: 90px 0 0 0;
}