initial commit
This commit is contained in:
6
static/css/bootstrap/bootstrap.min.css
vendored
Normal file
6
static/css/bootstrap/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
static/css/bootstrap/bootstrap.min.css.map
Normal file
1
static/css/bootstrap/bootstrap.min.css.map
Normal file
File diff suppressed because one or more lines are too long
798
static/css/custom.css
Normal file
798
static/css/custom.css
Normal file
@@ -0,0 +1,798 @@
|
||||
/* Estilos personalizados para el Balotario */
|
||||
|
||||
:root {
|
||||
--primary-color: #2c3e50;
|
||||
--secondary-color: #3498db;
|
||||
--success-color: #27ae60;
|
||||
--danger-color: #e74c3c;
|
||||
--warning-color: #f39c1
|
||||
-light-bg: #ecf0f1;
|
||||
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--gradient-success: linear-gradient(45deg, #27ae60, #58d68d);
|
||||
--gradient-danger: linear-gradient(45deg, #e74c3c, #ec7063);
|
||||
--gradient-warning: linear-gradient(45deg, #f39c12, #f7dc6f);
|
||||
}
|
||||
|
||||
/* Animaciones personalizadas */
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInScale {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Efectos de hover mejorados */
|
||||
.card-hover {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* Botones con efectos especiales */
|
||||
.btn-glow {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-glow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn-glow:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Indicadores de progreso mejorados */
|
||||
.progress-ring {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-ring svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-ring circle {
|
||||
fill: none;
|
||||
stroke-width: 8;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.progress-ring .bg {
|
||||
stroke: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.progress-ring .progress {
|
||||
stroke: #fff;
|
||||
stroke-dasharray: 283;
|
||||
stroke-dashoffset: 283;
|
||||
transition: stroke-dashoffset 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Efectos de texto */
|
||||
.text-glow {
|
||||
text-shadow: 0 0 10px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Tarjetas de preguntas mejoradas - tema claro por defecto */
|
||||
.question-card-enhanced {
|
||||
background: white;
|
||||
color: #333333;
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.question-card-enhanced::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
/* Opciones de respuesta mejoradas */
|
||||
.option-enhanced {
|
||||
background: white;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.option-enhanced::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.1), transparent);
|
||||
transition: left 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.option-enhanced:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.option-enhanced:hover {
|
||||
border-color: var(--secondary-color);
|
||||
transform: translateX(5px);
|
||||
box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
.option-enhanced.selected {
|
||||
border-color: var(--secondary-color);
|
||||
background: rgba(52, 152, 219, 0.25);
|
||||
transform: translateX(5px);
|
||||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.option-enhanced.correct {
|
||||
border-color: var(--success-color);
|
||||
background: rgba(39, 174, 96, 0.25);
|
||||
animation: pulse 0.6s ease-in-out;
|
||||
color: #1e5631;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.option-enhanced.incorrect {
|
||||
border-color: var(--danger-color);
|
||||
background: rgba(231, 76, 60, 0.25);
|
||||
color: #721c24;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Navegador de preguntas mejorado */
|
||||
.question-navigator {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.nav-question-btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #e9ecef;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.nav-question-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.nav-question-btn.answered {
|
||||
background: var(--gradient-success);
|
||||
border-color: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-question-btn.current {
|
||||
background: var(--gradient-primary);
|
||||
border-color: var(--secondary-color);
|
||||
color: white;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* Timer mejorado */
|
||||
.timer-display {
|
||||
background: var(--gradient-warning);
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 25px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 25px rgba(243, 156, 18, 0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timer-display.warning {
|
||||
background: var(--gradient-danger);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
/* Estadísticas mejoradas */
|
||||
.stats-enhanced {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stats-enhanced::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
animation: rotate 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.stats-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Responsive mejoras */
|
||||
@media (max-width: 768px) {
|
||||
.question-card-enhanced {
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.option-enhanced {
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-question-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.timer-display {
|
||||
font-size: 1.2rem;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tema claro - respuestas seleccionadas más intensas */
|
||||
[data-theme="light"] .option-enhanced.selected,
|
||||
:root:not([data-theme="dark"]) .option-enhanced.selected {
|
||||
border-color: var(--secondary-color);
|
||||
background: rgba(52, 152, 219, 0.35);
|
||||
transform: translateX(5px);
|
||||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
[data-theme="light"] .option-btn.selected,
|
||||
:root:not([data-theme="dark"]) .option-btn.selected {
|
||||
background: rgba(52, 152, 219, 0.35) !important;
|
||||
border-color: var(--secondary-color) !important;
|
||||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4) !important;
|
||||
border-width: 3px !important;
|
||||
}
|
||||
|
||||
/* Tema claro - respuestas correctas más intensas */
|
||||
[data-theme="light"] .option-enhanced.correct,
|
||||
:root:not([data-theme="dark"]) .option-enhanced.correct {
|
||||
border-color: #1e7e34;
|
||||
background: rgba(39, 174, 96, 0.4);
|
||||
color: #0d4016;
|
||||
font-weight: 700;
|
||||
border-width: 3px;
|
||||
box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="light"] .option-btn.correct,
|
||||
:root:not([data-theme="dark"]) .option-btn.correct {
|
||||
background: rgba(39, 174, 96, 0.4) !important;
|
||||
border-color: #1e7e34 !important;
|
||||
color: #0d4016 !important;
|
||||
font-weight: 700 !important;
|
||||
border-width: 3px !important;
|
||||
box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Tema claro - respuestas incorrectas más intensas */
|
||||
[data-theme="light"] .option-enhanced.incorrect,
|
||||
:root:not([data-theme="dark"]) .option-enhanced.incorrect {
|
||||
border-color: #c82333;
|
||||
background: rgba(231, 76, 60, 0.4);
|
||||
color: #721c24;
|
||||
font-weight: 700;
|
||||
border-width: 3px;
|
||||
box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="light"] .option-btn.incorrect,
|
||||
:root:not([data-theme="dark"]) .option-btn.incorrect {
|
||||
background: rgba(231, 76, 60, 0.4) !important;
|
||||
border-color: #c82333 !important;
|
||||
color: #721c24 !important;
|
||||
font-weight: 700 !important;
|
||||
border-width: 3px !important;
|
||||
box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Modal support for light theme - ensuring proper styling */
|
||||
[data-theme="light"] .modal-content,
|
||||
:root:not([data-theme="dark"]) .modal-content {
|
||||
background: #ffffff !important;
|
||||
color: #333333 !important;
|
||||
border: 1px solid #dee2e6 !important;
|
||||
}
|
||||
|
||||
[data-theme="light"] .modal-header,
|
||||
:root:not([data-theme="dark"]) .modal-header {
|
||||
border-bottom-color: #dee2e6 !important;
|
||||
}
|
||||
|
||||
[data-theme="light"] .modal-footer,
|
||||
:root:not([data-theme="dark"]) .modal-footer {
|
||||
border-top-color: #dee2e6 !important;
|
||||
}
|
||||
|
||||
[data-theme="light"] .modal-title,
|
||||
:root:not([data-theme="dark"]) .modal-title {
|
||||
color: #333333 !important;
|
||||
}
|
||||
|
||||
/* Tema claro - question cards */
|
||||
[data-theme="light"] .question-card-enhanced,
|
||||
:root:not([data-theme="dark"]) .question-card-enhanced {
|
||||
background: white !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
[data-theme="light"] .question-card,
|
||||
:root:not([data-theme="dark"]) .question-card {
|
||||
background: white !important;
|
||||
color: #333333 !important;
|
||||
}
|
||||
|
||||
/* Modo oscuro */
|
||||
[data-theme="dark"] {
|
||||
background: #1a1a1a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] body {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .container-main {
|
||||
background: rgba(44, 62, 80, 0.95) !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .card {
|
||||
background: #34495e !important;
|
||||
color: #e0e0e0 !important;
|
||||
border-color: #4a5f7a !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .question-card,
|
||||
[data-theme="dark"] .question-card-enhanced {
|
||||
background: #34495e !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .option-btn,
|
||||
[data-theme="dark"] .option-enhanced {
|
||||
background: #2c3e50 !important;
|
||||
border-color: #4a5f7a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .option-btn:hover,
|
||||
[data-theme="dark"] .option-enhanced:hover {
|
||||
background: #3d566e !important;
|
||||
border-color: var(--secondary-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .option-btn.correct,
|
||||
[data-theme="dark"] .option-enhanced.correct {
|
||||
background: rgba(39, 174, 96, 0.3) !important;
|
||||
border-color: #27ae60 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .option-btn.incorrect,
|
||||
[data-theme="dark"] .option-enhanced.incorrect {
|
||||
background: rgba(231, 76, 60, 0.3) !important;
|
||||
border-color: #e74c3c !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .option-btn.selected,
|
||||
[data-theme="dark"] .option-enhanced.selected {
|
||||
background: rgba(52, 152, 219, 0.3) !important;
|
||||
border-color: #3498db !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar {
|
||||
background: rgba(26, 26, 26, 0.95) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control,
|
||||
[data-theme="dark"] .form-select {
|
||||
background: #2c3e50 !important;
|
||||
border-color: #4a5f7a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control:focus,
|
||||
[data-theme="dark"] .form-select:focus {
|
||||
background: #34495e !important;
|
||||
border-color: var(--secondary-color) !important;
|
||||
color: #e0e0e0 !important;
|
||||
box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .alert-success {
|
||||
background: rgba(39, 174, 96, 0.2) !important;
|
||||
border-color: var(--success-color) !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .alert-danger {
|
||||
background: rgba(231, 76, 60, 0.2) !important;
|
||||
border-color: var(--danger-color) !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .badge {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-muted {
|
||||
color: #bbb !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .correct-option {
|
||||
background: rgba(39, 174, 96, 0.4) !important;
|
||||
border-color: #27ae60 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .answer-indicator {
|
||||
color: #27ae60 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .fa-check-circle {
|
||||
color: #27ae60 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-success {
|
||||
color: #2ecc71 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-danger {
|
||||
color: #e74c3c !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-warning {
|
||||
color: #f39c12 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-primary {
|
||||
color: #3498db !important;
|
||||
}
|
||||
|
||||
/* Modal support for dark theme */
|
||||
[data-theme="dark"] .modal-content {
|
||||
background: #2c3e50 !important;
|
||||
color: #e0e0e0 !important;
|
||||
border: 1px solid #4a5f7a !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-header {
|
||||
border-bottom-color: #4a5f7a !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-footer {
|
||||
border-top-color: #4a5f7a !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-title {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-close {
|
||||
filter: invert(1) grayscale(100%) brightness(200%);
|
||||
}
|
||||
|
||||
/* Buttons in dark theme */
|
||||
[data-theme="dark"] .btn-secondary {
|
||||
background: #4a5f7a !important;
|
||||
border-color: #4a5f7a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-secondary:hover {
|
||||
background: #5a6f8a !important;
|
||||
border-color: #5a6f8a !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-outline-secondary {
|
||||
border-color: #4a5f7a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-outline-secondary:hover {
|
||||
background: #4a5f7a !important;
|
||||
border-color: #4a5f7a !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-outline-primary {
|
||||
border-color: var(--secondary-color) !important;
|
||||
color: var(--secondary-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-outline-primary:hover {
|
||||
background: var(--secondary-color) !important;
|
||||
border-color: var(--secondary-color) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Progress bars in dark theme */
|
||||
[data-theme="dark"] .progress {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Badges in dark theme */
|
||||
[data-theme="dark"] .badge.bg-warning {
|
||||
background: var(--warning-color) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .badge.bg-success {
|
||||
background: var(--success-color) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .badge.bg-primary {
|
||||
background: var(--secondary-color) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Question navigator buttons in dark theme */
|
||||
[data-theme="dark"] .question-nav-btn,
|
||||
[data-theme="dark"] .nav-question-btn {
|
||||
background: #2c3e50 !important;
|
||||
border-color: #4a5f7a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .question-nav-btn:hover,
|
||||
[data-theme="dark"] .nav-question-btn:hover {
|
||||
background: #3d566e !important;
|
||||
border-color: var(--secondary-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .question-nav-btn.btn-success,
|
||||
[data-theme="dark"] .nav-question-btn.answered {
|
||||
background: var(--success-color) !important;
|
||||
border-color: var(--success-color) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .question-nav-btn.btn-primary,
|
||||
[data-theme="dark"] .nav-question-btn.current {
|
||||
background: var(--secondary-color) !important;
|
||||
border-color: var(--secondary-color) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Timer and other exam elements */
|
||||
[data-theme="dark"] .timer-display {
|
||||
background: var(--gradient-warning) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .timer-display.warning {
|
||||
background: var(--gradient-danger) !important;
|
||||
}
|
||||
|
||||
/* Question navigator card */
|
||||
[data-theme="dark"] .question-navigator {
|
||||
background: rgba(44, 62, 80, 0.95) !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
/* Modal theme support only - no interference with Bootstrap functionality */
|
||||
|
||||
/* Modal with reasonable z-index */
|
||||
.modal {
|
||||
z-index: 1055;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
/* Custom modal styling */
|
||||
#confirmModal {
|
||||
z-index: 1055;
|
||||
}
|
||||
|
||||
#confirmBackdrop {
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
#confirmDialog {
|
||||
z-index: 1055;
|
||||
}
|
||||
|
||||
/* Prevent scroll when modal is open */
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Ensure modal doesn't cause horizontal scroll */
|
||||
#confirmModal {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#confirmDialog {
|
||||
margin: 20px;
|
||||
max-width: calc(100vw - 40px);
|
||||
max-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
/* Force modal to be centered and visible */
|
||||
#confirmModal.show {
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
margin: 0 !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#confirmModal .modal-dialog {
|
||||
margin: 0 !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* Ensure backdrop covers entire screen */
|
||||
.modal-backdrop.show {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Custom modal theme support */
|
||||
[data-theme="dark"] #confirmDialog {
|
||||
background: #2c3e50 !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] #confirmDialog h5 {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] #confirmDialog p {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] #confirmDialog #confirm-message {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] #confirmModalClose {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
/* Modo oscuro automático removido para evitar conflictos */
|
||||
|
||||
/* Efectos de carga */
|
||||
.loading-dots {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.loading-dots::after {
|
||||
content: '';
|
||||
animation: dots 1.5s steps(5, end) infinite;
|
||||
}
|
||||
|
||||
@keyframes dots {
|
||||
0%, 20% { content: ''; }
|
||||
40% { content: '.'; }
|
||||
60% { content: '..'; }
|
||||
80%, 100% { content: '...'; }
|
||||
}
|
||||
|
||||
/* Confetti effect para celebrar */
|
||||
.confetti {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1040;
|
||||
}
|
||||
|
||||
.confetti-piece {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #f39c12;
|
||||
animation: confetti-fall 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes confetti-fall {
|
||||
0% {
|
||||
transform: translateY(-100vh) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
252
static/css/fontawesome-local.css
Normal file
252
static/css/fontawesome-local.css
Normal file
@@ -0,0 +1,252 @@
|
||||
/* Font Awesome Local CSS */
|
||||
@font-face {
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url("../fonts/fa-solid-900.woff2") format("woff2");
|
||||
}
|
||||
|
||||
.fa,
|
||||
.fas {
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialias
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Core Font Awesome Icons */
|
||||
.fa-home:before { content: "\f015"; }
|
||||
.fa-book:before { content: "\f02d"; }
|
||||
.fa-dumbbell:before { content: "\f44b"; }
|
||||
.fa-clipboard-check:before { content: "\f46c"; }
|
||||
.fa-car:before { content: "\f1b9"; }
|
||||
.fa-moon:before { content: "\f186"; }
|
||||
.fa-sun:before { content: "\f185"; }
|
||||
.fa-check-circle:before { content: "\f058"; }
|
||||
.fa-times-circle:before { content: "\f057"; }
|
||||
.fa-arrow-left:before { content: "\f060"; }
|
||||
.fa-arrow-right:before { content: "\f061"; }
|
||||
.fa-play:before { content: "\f04b"; }
|
||||
.fa-pause:before { content: "\f04c"; }
|
||||
.fa-stop:before { content: "\f04d"; }
|
||||
.fa-refresh:before { content: "\f021"; }
|
||||
.fa-reset:before { content: "\f021"; }
|
||||
.fa-redo:before { content: "\f01e"; }
|
||||
.fa-chart-bar:before { content: "\f080"; }
|
||||
.fa-trophy:before { content: "\f091"; }
|
||||
.fa-star:before { content: "\f005"; }
|
||||
.fa-clock:before { content: "\f017"; }
|
||||
.fa-question:before { content: "\f128"; }
|
||||
.fa-info:before { content: "\f129"; }
|
||||
.fa-exclamation:before { content: "\f12a"; }
|
||||
.fa-warning:before { content: "\f071"; }
|
||||
.fa-exclamation-triangle:before { content: "\f071"; }
|
||||
.fa-check:before { content: "\f00c"; }
|
||||
.fa-times:before { content: "\f00d"; }
|
||||
.fa-plus:before { content: "\f067"; }
|
||||
.fa-minus:before { content: "\f068"; }
|
||||
.fa-edit:before { content: "\f044"; }
|
||||
.fa-trash:before { content: "\f1f8"; }
|
||||
.fa-save:before { content: "\f0c7"; }
|
||||
.fa-download:before { content: "\f019"; }
|
||||
.fa-upload:before { content: "\f093"; }
|
||||
.fa-search:before { content: "\f002"; }
|
||||
.fa-filter:before { content: "\f0b0"; }
|
||||
.fa-sort:before { content: "\f0dc"; }
|
||||
.fa-list:before { content: "\f03a"; }
|
||||
.fa-th:before { content: "\f00a"; }
|
||||
.fa-th-list:before { content: "\f00b"; }
|
||||
.fa-bars:before { content: "\f0c9"; }
|
||||
.fa-cog:before { content: "\f013"; }
|
||||
.fa-gear:before { content: "\f013"; }
|
||||
.fa-settings:before { content: "\f013"; }
|
||||
.fa-user:before { content: "\f007"; }
|
||||
.fa-users:before { content: "\f0c0"; }
|
||||
.fa-envelope:before { content: "\f0e0"; }
|
||||
.fa-phone:before { content: "\f095"; }
|
||||
.fa-calendar:before { content: "\f073"; }
|
||||
.fa-folder:before { content: "\f07b"; }
|
||||
.fa-file:before { content: "\f15b"; }
|
||||
.fa-image:before { content: "\f03e"; }
|
||||
.fa-video:before { content: "\f03d"; }
|
||||
.fa-music:before { content: "\f001"; }
|
||||
.fa-volume-up:before { content: "\f028"; }
|
||||
.fa-volume-down:before { content: "\f027"; }
|
||||
.fa-volume-off:before { content: "\f026"; }
|
||||
.fa-mute:before { content: "\f131"; }
|
||||
.fa-heart:before { content: "\f004"; }
|
||||
.fa-thumbs-up:before { content: "\f164"; }
|
||||
.fa-thumbs-down:before { content: "\f165"; }
|
||||
.fa-share:before { content: "\f064"; }
|
||||
.fa-print:before { content: "\f02f"; }
|
||||
.fa-copy:before { content: "\f0c5"; }
|
||||
.fa-cut:before { content: "\f0c4"; }
|
||||
.fa-paste:before { content: "\f0ea"; }
|
||||
.fa-undo:before { content: "\f0e2"; }
|
||||
.fa-forward:before { content: "\f04e"; }
|
||||
.fa-backward:before { content: "\f04a"; }
|
||||
.fa-step-forward:before { content: "\f051"; }
|
||||
.fa-step-backward:before { content: "\f048"; }
|
||||
.fa-fast-forward:before { content: "\f050"; }
|
||||
.fa-fast-backward:before { content: "\f049"; }
|
||||
.fa-random:before { content: "\f074"; }
|
||||
.fa-shuffle:before { content: "\f074"; }
|
||||
.fa-repeat:before { content: "\f01e"; }
|
||||
.fa-lock:before { content: "\f023"; }
|
||||
.fa-unlock:before { content: "\f09c"; }
|
||||
.fa-key:before { content: "\f084"; }
|
||||
.fa-shield:before { content: "\f132"; }
|
||||
.fa-eye:before { content: "\f06e"; }
|
||||
.fa-eye-slash:before { content: "\f070"; }
|
||||
.fa-lightbulb:before { content: "\f0eb"; }
|
||||
.fa-bell:before { content: "\f0f3"; }
|
||||
.fa-bell-slash:before { content: "\f1f6"; }
|
||||
.fa-flag:before { content: "\f024"; }
|
||||
.fa-bookmark:before { content: "\f02e"; }
|
||||
.fa-tag:before { content: "\f02b"; }
|
||||
.fa-tags:before { content: "\f02c"; }
|
||||
.fa-comment:before { content: "\f075"; }
|
||||
.fa-comments:before { content: "\f086"; }
|
||||
.fa-quote-left:before { content: "\f10d"; }
|
||||
.fa-quote-right:before { content: "\f10e"; }
|
||||
.fa-link:before { content: "\f0c1"; }
|
||||
.fa-unlink:before { content: "\f127"; }
|
||||
.fa-external-link:before { content: "\f08e"; }
|
||||
.fa-external-link-alt:before { content: "\f35d"; }
|
||||
.fa-anchor:before { content: "\f13d"; }
|
||||
.fa-globe:before { content: "\f0ac"; }
|
||||
.fa-language:before { content: "\f1ab"; }
|
||||
.fa-map:before { content: "\f279"; }
|
||||
.fa-map-marker:before { content: "\f041"; }
|
||||
.fa-location:before { content: "\f041"; }
|
||||
.fa-compass:before { content: "\f14e"; }
|
||||
.fa-road:before { content: "\f018"; }
|
||||
.fa-plane:before { content: "\f072"; }
|
||||
.fa-train:before { content: "\f238"; }
|
||||
.fa-bus:before { content: "\f207"; }
|
||||
.fa-taxi:before { content: "\f1ba"; }
|
||||
.fa-bicycle:before { content: "\f206"; }
|
||||
.fa-motorcycle:before { content: "\f21c"; }
|
||||
.fa-truck:before { content: "\f0d1"; }
|
||||
.fa-ship:before { content: "\f21a"; }
|
||||
.fa-rocket:before { content: "\f135"; }
|
||||
.fa-fire:before { content: "\f06d"; }
|
||||
.fa-bolt:before { content: "\f0e7"; }
|
||||
.fa-lightning:before { content: "\f0e7"; }
|
||||
.fa-magic:before { content: "\f0d0"; }
|
||||
.fa-wand:before { content: "\f0d0"; }
|
||||
.fa-gift:before { content: "\f06b"; }
|
||||
.fa-birthday-cake:before { content: "\f1fd"; }
|
||||
.fa-cake:before { content: "\f1fd"; }
|
||||
.fa-coffee:before { content: "\f0f4"; }
|
||||
.fa-beer:before { content: "\f0fc"; }
|
||||
.fa-wine:before { content: "\f72f"; }
|
||||
.fa-utensils:before { content: "\f2e7"; }
|
||||
.fa-cutlery:before { content: "\f0f5"; }
|
||||
.fa-shopping-cart:before { content: "\f07a"; }
|
||||
.fa-credit-card:before { content: "\f09d"; }
|
||||
.fa-money:before { content: "\f0d6"; }
|
||||
.fa-dollar:before { content: "\f155"; }
|
||||
.fa-euro:before { content: "\f153"; }
|
||||
.fa-pound:before { content: "\f154"; }
|
||||
.fa-yen:before { content: "\f157"; }
|
||||
.fa-bitcoin:before { content: "\f379"; }
|
||||
.fa-bank:before { content: "\f19c"; }
|
||||
.fa-building:before { content: "\f1ad"; }
|
||||
.fa-hospital:before { content: "\f0f8"; }
|
||||
.fa-school:before { content: "\f549"; }
|
||||
.fa-university:before { content: "\f19c"; }
|
||||
.fa-graduation-cap:before { content: "\f19d"; }
|
||||
.fa-briefcase:before { content: "\f0b1"; }
|
||||
.fa-suitcase:before { content: "\f0f2"; }
|
||||
.fa-laptop:before { content: "\f109"; }
|
||||
.fa-desktop:before { content: "\f108"; }
|
||||
.fa-tablet:before { content: "\f10a"; }
|
||||
.fa-mobile:before { content: "\f10b"; }
|
||||
.fa-phone-alt:before { content: "\f879"; }
|
||||
.fa-keyboard:before { content: "\f11c"; }
|
||||
.fa-mouse:before { content: "\f8cc"; }
|
||||
.fa-gamepad:before { content: "\f11b"; }
|
||||
.fa-tv:before { content: "\f26c"; }
|
||||
.fa-camera:before { content: "\f030"; }
|
||||
.fa-microphone:before { content: "\f130"; }
|
||||
.fa-headphones:before { content: "\f025"; }
|
||||
.fa-speaker:before { content: "\f028"; }
|
||||
.fa-battery-full:before { content: "\f240"; }
|
||||
.fa-battery-half:before { content: "\f242"; }
|
||||
.fa-battery-empty:before { content: "\f244"; }
|
||||
.fa-plug:before { content: "\f1e6"; }
|
||||
.fa-wifi:before { content: "\f1eb"; }
|
||||
.fa-signal:before { content: "\f012"; }
|
||||
.fa-bluetooth:before { content: "\f293"; }
|
||||
.fa-usb:before { content: "\f287"; }
|
||||
.fa-cloud:before { content: "\f0c2"; }
|
||||
.fa-cloud-upload:before { content: "\f0ee"; }
|
||||
.fa-cloud-download:before { content: "\f0ed"; }
|
||||
.fa-database:before { content: "\f1c0"; }
|
||||
.fa-server:before { content: "\f233"; }
|
||||
.fa-code:before { content: "\f121"; }
|
||||
.fa-terminal:before { content: "\f120"; }
|
||||
.fa-bug:before { content: "\f188"; }
|
||||
.fa-wrench:before { content: "\f0ad"; }
|
||||
.fa-hammer:before { content: "\f6e3"; }
|
||||
.fa-screwdriver:before { content: "\f54a"; }
|
||||
.fa-tools:before { content: "\f7d9"; }
|
||||
.fa-paint-brush:before { content: "\f1fc"; }
|
||||
.fa-palette:before { content: "\f53f"; }
|
||||
.fa-ruler:before { content: "\f545"; }
|
||||
.fa-calculator:before { content: "\f1ec"; }
|
||||
.fa-balance-scale:before { content: "\f24e"; }
|
||||
.fa-thermometer:before { content: "\f491"; }
|
||||
.fa-stopwatch:before { content: "\f2f2"; }
|
||||
.fa-timer:before { content: "\f2f2"; }
|
||||
.fa-hourglass:before { content: "\f254"; }
|
||||
.fa-history:before { content: "\f1da"; }
|
||||
.fa-calendar-alt:before { content: "\f073"; }
|
||||
.fa-calendar-check:before { content: "\f274"; }
|
||||
.fa-calendar-times:before { content: "\f273"; }
|
||||
.fa-calendar-plus:before { content: "\f271"; }
|
||||
.fa-calendar-minus:before { content: "\f272"; }
|
||||
.fa-sticky-note:before { content: "\f249"; }
|
||||
.fa-paperclip:before { content: "\f0c6"; }
|
||||
.fa-pushpin:before { content: "\f08d"; }
|
||||
.fa-thumbtack:before { content: "\f08d"; }
|
||||
.fa-eraser:before { content: "\f12d"; }
|
||||
.fa-pen:before { content: "\f304"; }
|
||||
.fa-pencil:before { content: "\f040"; }
|
||||
.fa-marker:before { content: "\f5a1"; }
|
||||
.fa-highlighter:before { content: "\f591"; }
|
||||
.fa-ruler-combined:before { content: "\f546"; }
|
||||
.fa-compass-drafting:before { content: "\f568"; }
|
||||
.fa-drafting-compass:before { content: "\f568"; }
|
||||
.fa-square:before { content: "\f0c8"; }
|
||||
.fa-circle:before { content: "\f111"; }
|
||||
.fa-triangle:before { content: "\f2ec"; }
|
||||
.fa-polygon:before { content: "\f2ec"; }
|
||||
.fa-shapes:before { content: "\f61f"; }
|
||||
.fa-cube:before { content: "\f1b2"; }
|
||||
.fa-cubes:before { content: "\f1b3"; }
|
||||
.fa-dice:before { content: "\f522"; }
|
||||
.fa-dice-one:before { content: "\f525"; }
|
||||
.fa-dice-two:before { content: "\f528"; }
|
||||
.fa-dice-three:before { content: "\f527"; }
|
||||
.fa-dice-four:before { content: "\f524"; }
|
||||
.fa-dice-five:before { content: "\f523"; }
|
||||
.fa-dice-six:before { content: "\f526"; }
|
||||
.fa-chess:before { content: "\f439"; }
|
||||
.fa-chess-king:before { content: "\f43f"; }
|
||||
.fa-chess-queen:before { content: "\f445"; }
|
||||
.fa-chess-rook:before { content: "\f447"; }
|
||||
.fa-chess-bishop:before { content: "\f43a"; }
|
||||
.fa-chess-knight:before { content: "\f441"; }
|
||||
.fa-chess-pawn:before { content: "\f443"; }
|
||||
.fa-puzzle-piece:before { content: "\f12e"; }
|
||||
.fa-jigsaw:before { content: "\f12e"; }
|
||||
.fa-gamepad2:before { content: "\f11b"; }
|
||||
.fa-joystick:before { content: "\f11b"; }
|
||||
.fa-controller:before { content: "\f11b"; }
|
||||
Reference in New Issue
Block a user