693 lines
12 KiB
SCSS
693 lines
12 KiB
SCSS
@charset "UTF-8";
|
|
|
|
// Variables
|
|
$btn-size: 38px !default;
|
|
$outline-color: #A34FAF !default;
|
|
|
|
// Global box-sizing
|
|
html {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
// Body layout
|
|
body {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'header'
|
|
'main'
|
|
'footer';
|
|
grid-template-rows: auto 1fr auto;
|
|
grid-template-columns: 1fr;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Roboto', sans-serif;
|
|
line-height: 1.3;
|
|
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
|
overflow: hidden;
|
|
|
|
>header,
|
|
>footer {
|
|
/* flex-shrink: 0; */
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
.coursenav-btn-navigation {
|
|
width: $btn-size;
|
|
height: $btn-size;
|
|
padding: 0;
|
|
border-radius: 100%;
|
|
border: none;
|
|
background: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: inherit;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
filter: opacity(0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
>main {
|
|
grid-area: main;
|
|
min-height: 0; // ← ESTO ES CRUCIAL PARA GRID
|
|
position: relative;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
header {
|
|
grid-area: header;
|
|
}
|
|
|
|
footer {
|
|
grid-area: footer;
|
|
}
|
|
|
|
#coursenav-offcanvas {
|
|
padding: 1em;
|
|
}
|
|
|
|
#coursenav-offcanvas-label {
|
|
user-select: none;
|
|
}
|
|
|
|
#coursenav-navbar {
|
|
.navbar-brand img {
|
|
object-fit: contain;
|
|
aspect-ratio: 1 / 1;
|
|
height: 51px;
|
|
}
|
|
}
|
|
|
|
// Menu styles
|
|
.course-menu,
|
|
.course-menu ul {
|
|
list-style: none !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.course-menu {
|
|
.witem {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: row;
|
|
|
|
>span {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.menu-item {
|
|
&+& {
|
|
margin-top: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.coursenav-link {
|
|
display: block;
|
|
padding: 0.5rem 1rem;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
user-select: none;
|
|
}
|
|
|
|
.sub-ul {
|
|
display: none;
|
|
padding-left: 1rem;
|
|
|
|
&.open {
|
|
display: block;
|
|
}
|
|
|
|
.coursenav-link {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
&[data-coursenavvisited='false'] {
|
|
&::before {
|
|
content: '\f023'; // unicode de fa-check
|
|
font-family: 'Font Awesome 6 Pro';
|
|
font-weight: lighter; // solid
|
|
display: inline-block;
|
|
margin-right: 0.5rem;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
&[data-coursenavvisited='true'] {
|
|
&::before {
|
|
content: '\f00c'; // unicode de fa-check
|
|
font-family: 'Font Awesome 6 Pro';
|
|
font-weight: 900; // solid
|
|
display: inline-block;
|
|
margin-right: 0.5rem;
|
|
color: var(--bs-success); // verde éxito (puedes cambiar)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-icon {
|
|
cursor: pointer;
|
|
margin-left: 0.5rem;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
// Mixin for control buttons (audio & toggler)
|
|
@mixin control-button {
|
|
width: $btn-size;
|
|
height: $btn-size;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: inherit;
|
|
position: relative;
|
|
|
|
>svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
>i {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
&:focus {
|
|
outline: 2px solid $outline-color;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
// Apply mixin
|
|
.controls-btn {
|
|
@include control-button;
|
|
|
|
// El contenedor interno debe ser relativo
|
|
.position-relative {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
// Asegúrate que el SVG ocupe todo el área
|
|
.position-relative svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
// El <i> ahora sí es absoluto dentro de .position-relative
|
|
.position-relative i {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
// opcional: tamaño fijo para el icono
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.navbar-toggler {
|
|
@include control-button;
|
|
|
|
.position-relative {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.position-relative svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.position-relative i {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.disabled {
|
|
pointer-events: none;
|
|
animation: none;
|
|
}
|
|
|
|
h1,
|
|
.h1 {
|
|
font-size: clamp(1.75rem, 1.4076rem + 1.461vw, 2.3125rem);
|
|
}
|
|
|
|
h2,
|
|
.h2 {
|
|
font-size: clamp(1.5rem, 1.2717rem + 0.974vw, 1.875rem);
|
|
}
|
|
|
|
h3,
|
|
.h3 {
|
|
font-size: clamp(1.25rem, 1.0217rem + 0.974vw, 1.625rem);
|
|
}
|
|
|
|
h4,
|
|
.h4 {
|
|
font-size: clamp(1.1875rem, 1.0353rem + 0.6494vw, 1.4375rem);
|
|
}
|
|
|
|
.text-white * {
|
|
color: #fff;
|
|
}
|
|
|
|
// Estilos para .page-sco - sticky fullpage effect
|
|
.page-sco {
|
|
min-height: 100%;
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
|
|
// Aplica a TODOS los contenedores de Bootstrap 5 dentro de .page-sco
|
|
.container,
|
|
.container-fluid,
|
|
.container-xxl,
|
|
.container-xl,
|
|
.container-lg,
|
|
.container-md,
|
|
.container-sm {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
// Asegura que las filas (.row) también ocupen el 100% de altura
|
|
.row {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card.flat {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
|
|
.card-body {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.cursor {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.white-opacity-05 {
|
|
background-color: rgba(232, 230, 228, 0.5);
|
|
}
|
|
|
|
.amor {
|
|
font-family: 'Bree', sans-serif;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.hespecial {
|
|
font-size: clamp(2.3125rem, 1.7418rem + 2.4351vw, 3.25rem);
|
|
}
|
|
|
|
.rounded-15 {
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.rounded-100 {
|
|
border-radius: 100%;
|
|
}
|
|
|
|
/* Clase para aplicar la animación de flotación */
|
|
.floating {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Animación de flotación */
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px);
|
|
/* Mueve hacia arriba */
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
/* Regresa a la posición original */
|
|
}
|
|
}
|
|
|
|
.btn-begin {
|
|
background: #cf4b97;
|
|
background: radial-gradient(#cf4b97 50%, #ffd0ee 90%);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.btn-begin:hover {
|
|
background: #ffd0ee;
|
|
background: radial-gradient(#ffd0ee 20%, #cf4b97 80%);
|
|
}
|
|
|
|
.animate__animated.animate__pulse {
|
|
box-shadow: 0 0 0 rgba(254, 80, 0, 0.4);
|
|
animation: aura 1.7s infinite ease-in-out;
|
|
}
|
|
|
|
.animate__animated.animate__pulse.disabled {
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
animation: none;
|
|
}
|
|
|
|
@-webkit-keyframes aura {
|
|
0% {
|
|
-webkit-box-shadow: 0 0 0 20px rgba(255, 163, 0, 0);
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-box-shadow: 0 0 0 0 rgba(255, 163, 0, 0);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
100% {
|
|
-webkit-box-shadow: 0 0 0 20px rgba(255, 163, 0, 0);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes aura {
|
|
0% {
|
|
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
|
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
-moz-box-shadow: 0 0 0 0 rgba(254, 80, 0, 0.4);
|
|
box-shadow: 0 0 0 0 rgba(254, 80, 0, 0.4);
|
|
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
100% {
|
|
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
|
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
|
}
|
|
|
|
.course-menu {
|
|
.btn {
|
|
border-radius: 10px;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
font-family: 'Bree';
|
|
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
#offcanvasGlossary {
|
|
min-width: 50vw;
|
|
font-size: 16px;
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
font-family: 'Bree';
|
|
font-weight: bold;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5em;
|
|
font-family: 'Bree';
|
|
font-weight: bold;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.2em;
|
|
font-family: 'Bree';
|
|
font-weight: bold;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1em;
|
|
font-family: 'Bree';
|
|
font-weight: bold;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 0.8em;
|
|
font-family: 'Bree';
|
|
font-weight: bold;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.6em;
|
|
font-family: 'Bree';
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.swal2-confirm {
|
|
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
|
}
|
|
|
|
.look_at_me {
|
|
animation: pulse-next-btn 1.75s infinite;
|
|
position: relative;
|
|
transition: background-color 0.5s ease;
|
|
}
|
|
|
|
@keyframes pulse-next-btn {
|
|
0% {
|
|
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 0 0 rgba(245, 128, 37, 0.4);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
|
|
}
|
|
}
|
|
|
|
.custom-tooltip {
|
|
.tooltip-inner {
|
|
max-width: 300px;
|
|
background-color: var(--bs-azul);
|
|
color: #fff;
|
|
font-size: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
|
|
padding: 0.2rem 0.3rem;
|
|
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* Cubre TODAS las posibles variaciones de posición */
|
|
&.bs-tooltip-top .tooltip-arrow::before,
|
|
&.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow::before {
|
|
border-top-color: var(--bs-azul);
|
|
}
|
|
|
|
&.bs-tooltip-end .tooltip-arrow::before,
|
|
&.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::before {
|
|
border-right-color: var(--bs-azul);
|
|
}
|
|
|
|
&.bs-tooltip-bottom .tooltip-arrow::before,
|
|
&.bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow::before {
|
|
border-bottom-color: var(--bs-azul);
|
|
}
|
|
|
|
&.bs-tooltip-start .tooltip-arrow::before,
|
|
&.bs-tooltip-auto[data-popper-placement^='left'] .tooltip-arrow::before {
|
|
border-left-color: var(--bs-azul);
|
|
}
|
|
}
|
|
|
|
.glossary-style {
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.glossary-style img {
|
|
width: 70px;
|
|
}
|
|
|
|
.swal2-popup {
|
|
color: #000;
|
|
}
|
|
|
|
.modal-general-bs5 {
|
|
background-color: rgba(60, 60, 59, 0.85);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.modal-style-pop-bs5 {
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
/*Configuracion Modal BS5*/
|
|
.modal-general-bs5 .content-pop-modal {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.modal-style-pop-bs5 .custom-close-btn {
|
|
cursor: pointer;
|
|
font-size: 50px;
|
|
width: 35px;
|
|
height: 35px;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0.2em;
|
|
right: 0.3em;
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
#bs5Modal .modal-dialog {
|
|
max-width: auto;
|
|
}
|
|
|
|
#bs5Modal.modal.fade .modal-dialog {
|
|
transform: translate(0, 0) !important;
|
|
}
|
|
|
|
#bs5Modal .modal-dialog {
|
|
transition: none !important;
|
|
}
|
|
|
|
.title_head_sco {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
#bs5Modal .modal-dialog {
|
|
min-width: 42em;
|
|
}
|
|
|
|
.title_head_sco {
|
|
flex: auto;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.btn-close-modal {
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.paginacion_sco.isFalse {
|
|
display: none;
|
|
}
|
|
|
|
// ===== ANIMATION DELAYS =====
|
|
@for $i from 1 through 40 {
|
|
.animate__delay-#{$i}s {
|
|
animation-delay: #{$i}s;
|
|
}
|
|
}
|
|
|
|
.bg-variacolor {
|
|
background: #A34FAF;
|
|
background: linear-gradient(to right, #8a7cd1 12%, #7b3686 100%);
|
|
}
|
|
|
|
.border-top-2 {
|
|
border-top: 3px solid;
|
|
}
|
|
|
|
ul>li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
ul>li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
ul.bul0 {
|
|
list-style-type: none;
|
|
list-style-image: url(../img/bul0.png);
|
|
}
|
|
|
|
ul.bul1 {
|
|
list-style-type: none;
|
|
list-style-image: url(../img/bul1.png);
|
|
}
|
|
|
|
.btn-next-section {
|
|
cursor: pointer;
|
|
}
|
|
|
|
body.swal2-height-auto {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.html-pop-style {
|
|
border: 6px solid transparent;
|
|
border-radius: 20px;
|
|
/* Fondo de contenido (imagen) en padding-box + borde radial degradado en border-box */
|
|
background: url(../img/fondo-pop.jpg) padding-box, radial-gradient(circle at center, #f5f0f5 0%, #7b3686 30%, #efba92 80%, #7b3686 100%) border-box !important;
|
|
background-size: cover !important;
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
}
|
|
|
|
body.swal2-height-auto {
|
|
height: inherit !important;
|
|
} |