Usuário Discussão:Ttuzu

Predefinição:Persona/styles.css

@media (min-width: 1280px) and (min-aspect-ratio: 3/4) {

   .habilidades-details {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 16px;
       justify-content: center;
       width: 90%;
       align-self: center;
       margin-top: 20px;
   }

   .habilidades-container {
       flex-direction: column-reverse;
       width: 100%;
   }

   .cuadros-container {
       display: flex;
       flex-wrap: nowrap;
       gap: 16px;
       width: 100%;
       overflow-x: auto;
       padding-bottom: 8px;
       margin-bottom: 1%;
       justify-self: center;
       justify-content: flex-start;
   }

   .descripcion-container {
       display: flex;
       flex-direction: column;
       gap: 10px;
       flex: 1;
       padding: 20px;
       background-color: #2a2a2a;
       border-radius: 8px;
   }

   .descripcion-container h3 {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       gap: 15px;
       color: #fff;
       font-size: 1.5em;
       margin-bottom: 10px;
   }

   .ability-name-text {
       font-weight: bold;
   }

   .ability-level-text {
       font-size: 0.8em;
       color: #bbb;
   }

   .ability-attributes {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .ability-attributes div {
       display: flex;
       align-items: center;
       gap: 5px;
       color: #fff;
       font-size: 0.9em;
   }

   .ability-attributes img {
       width: 24px;
       height: 24px;
       vertical-align: middle;
   }

   .ability-desc {
       color: #ccc;
       line-height: 1.5;
       font-size: 1.1em;
       margin-bottom: 15px;
   }

   .ability-video-container {
       width: 100%;
       position: relative;
       padding-bottom: 56.25%;
       height: 0;
       overflow: hidden;
       margin-top: auto;
   }

   .ability-video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border-radius: 4px;
       background-color: #000;
   }

   .cuadros-container .cuadro {
       flex: 0 0 auto;
       width: 60px;
       height: 60px;
       border-radius: 8px;
       border: 2px solid transparent;
       cursor: pointer;
       transition: all 0.2s ease-in-out;
       background-size: cover;
       background-position: center;
       background-color: #333;
       overflow: hidden;
   }

   .cuadros-container .cuadro.active {
       border-color: #007bff;
       box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
   }

}

.persona-container {

   max-width: 1200px;
   margin: 20px auto;
   background-color: #1a1a1a;
   color: #fff;
   font-family: sans-serif; /* Usar fonte padrão, ou especificar uma que você importe */
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   padding: 20px;

}

.persona-header {

   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #333;

}

.art-personagem {

   width: 120px;
   height: 120px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid #007bff;

}

.persona-info h1 {

   font-size: 2.5em;
   margin: 0;
   color: #007bff;

}

.persona-info p {

   margin: 5px 0;
   color: #bbb;

}

.persona-tabs {

   display: flex;
   margin-bottom: 20px;
   border-bottom: 2px solid #333;

}

.tab-btn {

   background-color: #333;
   color: #fff;
   padding: 10px 20px;
   border: none;
   cursor: pointer;
   font-size: 1.1em;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   transition: background-color 0.3s ease;
   margin-right: 5px;

}

.tab-btn:hover {

   background-color: #444;

}

.tab-btn.active {

   background-color: #007bff;
   color: #fff;
   border-bottom: 2px solid #007bff;

}

@media (max-width: 768px) {

   .persona-header {
       flex-direction: column;
       text-align: center;
   }

   .persona-info {
       text-align: center;
   }

   .habilidades-details {
       flex-direction: column;
       width: 95%;
   }

   .cuadros-container {
       flex-wrap: wrap;
       justify-content: center;
   }

   .cuadros-container .cuadro {
       width: 50px;
       height: 50px;
   }

   .descripcion-container h3 {
       flex-direction: column;
       align-items: flex-start;
       gap: 5px;
   }

   .ability-attributes {
       margin-top: 10px;
       justify-content: center;
       flex-wrap: wrap;
   }

}