/**** NOVOS ESTILOS *****/ /* CUIDADO: Estilos para 'body' dentro de '.myapp' não terão efeito no global. Considere aplicar a `.minha-aplicacao` diretamente ou ajustar conforme a necessidade. Para fonte e cor de fundo da sua aplicação, aplique diretamente à div. */ .myapp { font-family: 'Rawline', sans-serif; font-size: 1.2rem; background-color: #FCF7EF; /* Define o fundo da *sua aplicação* dentro da div */ } .myapp header h1 { display: inline-block; } .myapp .container-principal { background-color: #fcfcfd; border-radius: 8px; padding: 20px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); margin: 20px auto; max-width: 1300px; } /******* Formulario principal de consulta ********/ .myapp .card-header { background-color: #155BCB !important; } .myapp .nav-tabs .nav-link { color: white; } .myapp .nav-tabs .nav-link.active { background-color: white; color: #007bff; } /******** Listagem de solicitações ******/ .myapp a.disabled { pointer-events: none; opacity: 0.5; cursor: not-allowed; } /*********** EVOLUÇÃO DAS SOLICITAÇÕES *************/ .myapp .timeline-container { position: relative; margin: 40px auto; padding: 20px; max-width: 1200px; display: flex; flex-direction: column-reverse; } .myapp .timeline-line { position: absolute; top: 0; bottom: 0; left: 50px; width: 4px; background-color: #dee2e6; transform: translateX(-50%); } .myapp .timeline-card { position: relative; margin-bottom: 30px; margin-left: 80px; border-radius: 8px; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); transform: perspective(1000px) rotateX(2deg); transition: all 0.3s ease; opacity: 0; transform: translateY(20px); animation: fadeIn 0.5s ease forwards; } .myapp .data-retificada-card { position: relative; padding: 15px; margin-bottom: 30px; margin-left: 20px; border-radius: 8px; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); transform: perspective(1000px) rotateX(2deg); transition: all 0.3s ease; opacity: 0; transform: translateY(20px); animation: fadeIn 0.5s ease forwards; } .myapp .data-retificada-card-body p { display: flex; align-items: flex-start; margin-bottom: 0.5rem; } .myapp .data-retificada-card-body p i { padding-top: 5px; margin-left: 10px; margin-right: 10px; min-width: 20px; text-align: center; } .myapp .data-retificada-card-body p b { margin-right: 5px; } .myapp .data-retificada-card-body p:first-child { padding-left: 40px; } @keyframes fadeIn { /* Keyframes não precisam ser prefixados, são globais */ to { opacity: 1; transform: translateY(0); } } .myapp .timeline-card:hover { transform: perspective(1000px) rotateX(0); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .myapp .timeline-card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background-color: #D4E5FF; border-radius: 8px 8px 0 0; } .myapp .timeline-card-header-success { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background-color: #154C21; color: white; border-radius: 8px 8px 0 0; } .myapp .timeline-card-header .date-time { display: flex; align-items: center; font-size: 0.9rem; } .myapp .timeline-card-header .date-time i { margin-right: 8px; } .myapp .timeline-card-header .badge { font-size: 0.8rem; padding: 6px 10px; background-color: rgba(255, 255, 255, 0.2); } .myapp .timeline-card-body { padding: 20px; background-color: white; border-radius: 0 0 8px 8px; } .myapp .timeline-connector { position: absolute; left: -80px; top: 50%; width: 80px; height: 4px; background-color: #dee2e6; transform: translateY(-50%); } .myapp .status-icon { position: absolute; left: -90px; top: 50%; width: 26px; height: 26px; border-radius: 50%; background-color: white; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; border: 4px solid #dee2e6; color: white; font-size: 0.8rem; z-index: 2; } .myapp .status-icon.success { background-color: #198754; } .myapp .status-icon.warning { background-color: yellow; } .myapp .status-icon.error { background-color: #dc3545; } .myapp .timeline-card:nth-child(1) { animation-delay: 0.1s; } .myapp .timeline-card:nth-child(2) { animation-delay: 0.2s; } .myapp .timeline-card:nth-child(3) { animation-delay: 0.3s; } .myapp .timeline-card:nth-child(4) { animation-delay: 0.4s; } .myapp .timeline-card:nth-child(5) { animation-delay: 0.5s; } .myapp .timeline-card:nth-child(6) { animation-delay: 0.6s; } .myapp .timeline-card:nth-child(7) { animation-delay: 0.7s; } /* Responsive adjustments */ @media (max-width: 767px) { .myapp .timeline-container { margin-left: 20px; } .myapp .timeline-card { margin-left: 60px; } .myapp .timeline-line { left: 30px; } .myapp .timeline-connector { left: -60px; width: 60px; } .myapp .status-icon { left: -70px; } } /**** ESTILOS DO LEGADO *****/ /* O footer é um elemento da sua aplicação, então faz sentido encapsular seus estilos. Se o footer for um fragmento separado que não está dentro de .myapp, você precisaria ajustar ou ter certeza que ele está sempre contido. */ .myapp footer { margin-top: 45px; background: #292929; width: 100%; height: 100px; position: relative; } @media (max-width: 1199px) { .myapp footer { height: auto; } } .myapp .menu-footer { margin: 0; padding: 0; height: 75px; text-align: center; line-height: 75px; width: 70%; position: absolute; top: -35px; z-index: 1001; left: 15%; } @media (max-width: 1199px) { .myapp .menu-footer { position: relative; width: auto; top: auto; left: auto; height: auto; } } .myapp .menu-footer ul { background-color: #036dc5; padding-left: 60px; } @media (max-width: 991px) { .myapp .menu-footer ul { padding-left: 0; } } /* Este seletor para `ul::before` precisa ser verificado. Se `ul` está dentro de `.menu-footer`, então `.myapp .menu-footer ul::before` está correto. */ .myapp .menu-footer ul::before { position: absolute; top: 8px; left: 40px; background-image: url("../img/logo-footer.png"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 110px; height: 61px; content: ''; } @media (max-width: 991px) { .myapp .menu-footer ul::before { display: none; } } .myapp .menu-footer li { display: inline-block; margin: 0 15px; } .myapp .menu-footer li.active a { border-bottom: 4px solid #fff; padding-bottom: 3px; } .myapp .menu-footer li a { color: #fff; font-size: .9rem; } .myapp .footer-wrapper { display: flex; align-items: center; justify-content: center; position: relative; padding-bottom: 10px; height: 100%; color: #686868; } .myapp .footer-wrapper .copyright { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; text-align: center; } .myapp .footer-wrapper .badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; height: 30px; padding: 5px 10px; } .myapp .btn { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-font-family: ; --bs-btn-font-size: 1rem; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; --bs-btn-color: var(--bs-body-color); --bs-btn-bg: transparent; --bs-btn-border-width: var(--bs-border-width); --bs-btn-border-color: transparent; --bs-btn-border-radius: var(--bs-border-radius); --bs-btn-hover-border-color: transparent; --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075); --bs-btn-disabled-opacity: 0.65; --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5); display: inline-block; padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); font-family: var(--bs-btn-font-family); font-size: var(--bs-btn-font-size); font-weight: var(--bs-btn-font-weight); line-height: var(--bs-btn-line-height); color: #FFFFFF; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); border-radius: var(--bs-btn-border-radius); background-color: var(--bs-btn-bg); transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; } /***********************************************************************************/ /******************************* ESTILOS PARA DESIGN SYSTEM ************************/ .myapp input[type="text"] { transition: background-color 0.2s ease-in-out; } .myapp input[type="text"]:hover { outline: none; background-color: #DEDEDE; } .myapp input[type="text"]:focus { border: none; background-color: #DEDEDE; outline: 4px solid #C2850C; } .myapp select.form-control { transition: background-color 0.2s ease-in-out, outline-color 0.2s ease-in-out, outline-width 0.2s ease-in-out; } .myapp select.form-control:hover { background-color: #DEDEDE; } .myapp select.form-control:focus { border: none; background-color: #FFFFFF; outline: 4px solid #C2850C; } /* CUIDADO: Estas classes são do Bootstrap 5. O !important já ajuda na precedência, mas ao prefixar, garanta que elas estejam sempre dentro da sua div principal. */ .myapp .btn-primary { background-color: #155BCB !important; border-radius: 100em !important; transition: background-color 0.3s ease; } .myapp .btn-primary:hover { background-color: #396DC0 !important; } .myapp .btn-success { background-color: #168821 !important; border-radius: 100em; transition: background-color 0.3s ease; } .myapp .btn-success:hover { background-color: #70E17B !important; } .myapp .btn-warning { background-color: #FFCD07 !important; border-radius: 100em; transition: background-color 0.3s ease; } .myapp .btn-warning:hover { background-color: #FEE685 !important; } .myapp .bg-primary { background-color: #155BCB !important; } .myapp .bg-success { background-color: #154C21 !important; } .myapp .alert-info { background-color: #D4E5FF !important; } /* O seletor h2 abaixo é global no seu CSS original. Se você quer que ele só afete h2 dentro da sua aplicação, prefixe-o. */ .myapp h2 { margin: 0; padding: 0; color: #1d94f0; font-size: 1.3rem; font-weight: 400; }