OgestanPre curso completo
This commit is contained in:
@@ -0,0 +1,675 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Variables
|
||||
$btn-size: 38px !default;
|
||||
$outline-color: #ffa300 !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: #6d2778;
|
||||
background: linear-gradient(to top, #6d2778 0%, #cb198e 100%);
|
||||
border-radius: 40px;
|
||||
border: 3px solid #c97cbb;
|
||||
}
|
||||
|
||||
.btn-begin.pop-button-confirm {
|
||||
background-image: url(../img/adorno2.png);
|
||||
}
|
||||
|
||||
.inside-card {
|
||||
background: #6d2778;
|
||||
background: linear-gradient(to bottom, #6d2778 0%, #cb198e 100%);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.btn-begin:hover {
|
||||
background: #6d2778;
|
||||
background: linear-gradient(to bottom, #6d2778 0%, #cb198e 100%);
|
||||
}
|
||||
|
||||
.animate__animated.animate__pulse {
|
||||
box-shadow: 0 0 0 rgba(106, 33, 127, 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(106, 33, 127, 0.4);
|
||||
box-shadow: 0 0 0 0 rgba(106, 33, 127, 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(106, 33, 127, 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: #242d5d;
|
||||
background: linear-gradient(to right, #242d5d 0%, #83448b 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;
|
||||
}
|
||||
|
||||
.html-pop-style {
|
||||
border: 6px solid transparent;
|
||||
border-radius: 20px;
|
||||
background: url(../img/fondo-pop.jpg) padding-box, linear-gradient(to right, #00928e 32%, #c1c902 96%) border-box !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
.html-pop-style2 {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-image: url(../img/bgpop2.png);
|
||||
background-position: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
Reference in New Issue
Block a user