/* static/css/style.css */
/* --- Theme Variables --- */
:root {
--dark-bg-primary: #121216;
/* Deeper, slightly blue-ish black */
--dark-bg-secondary: #1c1d2e;
/* Darker grey-blue for containers */
--dark-bg-tertiary: #2a2c41;
/* Slightly lighter for cards, inputs */
--dark-bg-action-button: #222433;
/* Slightly darker than tertiary for more depth */
--dark-border-action-button: #4a4c63;
/* More distinct border for these buttons */
--dark-border-subtle: rgba(138, 43, 226, 0.2);
/* Faint purple border */
--dark-border-strong: rgba(138, 43, 226, 0.4);
--text-primary-dark: #e4e6eb;
/* Off-white, good readability */
--text-secondary-dark: #b0b3b8;
/* Lighter grey for less emphasis */
--text-placeholder-dark: #8a8d91;
--brand-purple-deep: #6a0dad;
/* Deep amethyst */
--brand-purple-base: #8A2BE2;
/* BlueViolet - a good, vibrant purple */
--brand-purple-medium: #9d4edd;
/* Medium purple for accents */
--brand-purple-light: #c77dff;
/* Lighter purple for highlights/hovers */
--brand-purple-highlight: #e0c3fc;
/* Very light lavender for shine */
/* Metallic Purple Gradient */
--brand-purple-gradient: linear-gradient(135deg, var(--brand-purple-deep) 0%, var(--brand-purple-base) 40%, var(--brand-purple-medium) 70%, var(--brand-purple-light) 100%);
--brand-purple-gradient-hover: linear-gradient(135deg, var(--brand-purple-base) 0%, var(--brand-purple-medium) 40%, var(--brand-purple-light) 70%, var(--brand-purple-highlight) 100%);
--success-dark: #2a9d8f;
/* Muted teal */
--warning-dark: #e9c46a;
/* Muted gold/amber */
--danger-dark: #e76f51;
/* Muted coral/red */
--info-dark: #457b9d;
/* Muted blue */
--font-heading: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-body: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* Bootstrap Overrides (Ensure these are loaded *after* Bootstrap if using separate files) */
--bs-body-color: var(--text-primary-dark);
--bs-body-bg: var(--dark-bg-primary);
--bs-secondary-bg: var(--dark-bg-secondary);
/* For components like list-group-item */
--bs-tertiary-bg: var(--dark-bg-tertiary);
/* For components like card headers */
--bs-border-color: var(--dark-border-subtle);
--bs-border-color-translucent: rgba(138, 43, 226, 0.15);
/* Link colors */
--bs-link-color: var(--brand-purple-light);
--bs-link-hover-color: var(--brand-purple-highlight);
/* Glassmorphism Variables */
--glass-bg: rgba(28, 29, 46, 0.7);
/* translucent secondary bg */
--glass-border: rgba(255, 255, 255, 0.08);
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.glass-bg {
background: var(--glass-bg);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
}
.container,
.container-fluid {
/* overflow-x: hidden; Removed to fix dropdown clipping */
}
/* --- Base Styles --- */
body {
font-family: var(--font-body);
padding-top: 0px;
/* Adjust based on actual navbar height */
line-height: 1.7;
transition: background-color 0.3s ease;
/* Smooth transition for potential future light/dark toggle */
background-color: var(--dark-bg-primary);
/* Ensure a fallback */
background-image: radial-gradient(rgba(138, 43, 226, 0.05) 1px, transparent 1px);
background-size: 15px 15px;
overflow-x: clip;
/* Prevent horizontal scrollbar on the whole page without breaking position: sticky */
/* Disable long-press context menu on mobile for a more native feel */
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
font-family: var(--font-heading);
color: var(--text-primary-dark);
font-weight: 600;
/* Slightly bolder headings */
}
a {
transition: color 0.2s ease-in-out;
}
hr {
border-top: 1px solid var(--dark-border-subtle);
opacity: 0.5;
}
/* --- Navbar --- */
.navbar.sticky-top {
/* Ensure it's sticky */
top: 0;
z-index: 1030;
/* Default Bootstrap z-index for sticky */
}
.navbar.bg-primary {
/* Assuming Bootstrap class, override it */
background-color: var(--dark-bg-secondary) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.navbar-dark .navbar-brand {
color: var(--brand-purple-highlight);
/* Make brand stand out */
font-weight: 700;
font-size: 1.5rem;
}
.navbar-dark .navbar-brand img {
border: 1px solid var(--brand-purple-base);
}
.navbar-dark .navbar-nav .nav-link {
color: var(--text-secondary-dark);
transition: color 0.2s ease;
padding-left: 1rem;
padding-right: 1rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: var(--brand-purple-highlight);
}
.navbar-dark .navbar-nav .nav-link.active {
color: var(--brand-purple-light);
font-weight: 600;
/* background-color: rgba(138, 43, 226, 0.1); */
/* Subtle active background */
/* border-bottom: 2px solid var(--brand-purple-base); */
}
.navbar-dark .navbar-toggler {
border-color: rgba(138, 43, 226, 0.3);
}
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28157, 78, 221, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Dropdown Menu (Navbar) */
.dropdown-menu {
background-color: rgba(42, 44, 65, 0.95);
/* High opacity for readability */
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
.dropdown-item {
color: var(--text-secondary-dark);
}
.dropdown-item:hover,
.dropdown-item:focus {
color: var(--text-primary-dark);
background-color: var(--brand-purple-base);
}
.dropdown-divider {
border-top: 1px solid var(--dark-border-subtle);
}
/* --- Hero Section Specific (If your homepage has one like in the image) --- */
.hero-section {
/* Give your hero section container this class */
background-color: var(--dark-bg-secondary);
color: var(--text-primary-dark);
padding: 3rem 1.5rem;
border-radius: 0.375rem;
/* Bootstrap's default rounded */
margin-bottom: 2rem;
/* Space below hero */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.hero-section .display-4,
.hero-section h1 {
/* "Welcome to QuizMaster!" */
color: var(--text-primary-dark);
font-weight: 700;
}
.hero-section p.lead {
/* Paragraph below welcome */
color: var(--text-secondary-dark);
font-size: 1.15rem;
margin-bottom: 1.5rem;
}
.hero-section .logo-placeholder {
/* The purple square in your image */
width: 100px;
height: 100px;
background-image: var(--brand-purple-gradient);
margin: 0 auto 1.5rem auto;
/* Center it */
border-radius: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
/* For any text/icon inside */
font-size: 2rem;
/* Example if you put an icon */
box-shadow: 0 2px 8px rgba(138, 43, 226, 0.3);
}
/* --- Cards --- */
.card {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
color: var(--text-primary-dark);
margin-bottom: 1.5rem;
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
border-radius: 16px;
/* Modern rounded corners */
}
.card:hover.quiz-card {
/* Only apply hover to quiz-cards if you want */
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(138, 43, 226, 0.15);
border-color: var(--brand-purple-base);
}
.card-header {
background-color: rgba(42, 44, 65, 0.5);
/* var(--dark-bg-tertiary) slightly lightened or more transparent */
border-bottom: 1px solid var(--dark-border-subtle);
color: var(--text-primary-dark);
font-weight: 600;
}
.card-title {
color: var(--text-primary-dark);
/* Ensure titles within cards are bright */
}
.card-text {
color: var(--text-secondary-dark);
/* Standard text in card body */
}
.card-footer {
background-color: rgba(42, 44, 65, 0.3);
border-top: 1px solid var(--dark-border-subtle);
}
/* --- Buttons --- */
.btn {
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 0.3rem;
transition: all 0.2s ease-in-out;
letter-spacing: 0.5px;
}
/* Metallic Purple Brand Button */
.btn-brand-purple,
.btn-primary {
/* Override .btn-primary */
background-image: var(--brand-purple-gradient);
border: none;
color: white !important;
/* Ensure text is white */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-brand-purple:hover,
.btn-primary:hover {
background-image: var(--brand-purple-gradient-hover);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
color: white !important;
}
.btn-brand-purple:focus,
.btn-primary:focus {
box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.4);
color: white !important;
}
/* Outline Purple Button */
.btn-outline-brand-purple,
.btn-outline-primary {
/* Override .btn-outline-primary */
color: var(--brand-purple-light);
border-color: var(--brand-purple-medium);
}
.btn-outline-brand-purple:hover,
.btn-outline-primary:hover {
color: white;
background-color: var(--brand-purple-medium);
border-color: var(--brand-purple-medium);
box-shadow: 0 2px 10px rgba(138, 43, 226, 0.2);
}
/* Other Bootstrap Button Overrides */
.btn-secondary {
background-color: #4f545c;
/* Darker grey */
border-color: #4f545c;
color: var(--text-primary-dark);
}
.btn-secondary:hover {
background-color: #5a6268;
border-color: #5a6268;
}
.btn-success {
background-color: var(--success-dark);
border-color: var(--success-dark);
color: white;
}
.btn-success:hover {
background-color: #248a7f;
border-color: #248a7f;
}
.btn-info {
background-color: var(--info-dark);
border-color: var(--info-dark);
color: white;
}
.btn-info:hover {
background-color: #3b6a88;
border-color: #3b6a88;
}
.btn-warning {
background-color: var(--warning-dark);
border-color: var(--warning-dark);
color: #212529;
/* Dark text for light warning */
}
.btn-warning:hover {
background-color: #d9b55a;
border-color: #d9b55a;
}
.btn-danger {
background-color: var(--danger-dark);
border-color: var(--danger-dark);
color: white;
}
.btn-danger:hover {
background-color: #d75a3a;
border-color: #d75a3a;
}
.btn-light {
background-color: var(--dark-bg-tertiary);
border-color: var(--dark-border-subtle);
color: var(--text-primary-dark);
}
.btn-light:hover {
background-color: #495057;
/* Darken slightly */
}
.btn-dark {
background-color: #212529;
border-color: #212529;
color: white;
}
.btn-dark:hover {
background-color: #1c1f23;
}
/* Links as buttons */
.btn-link {
color: var(--brand-purple-light);
}
.btn-link:hover {
color: var(--brand-purple-highlight);
}
/* --- Forms --- */
.form-control,
.form-select {
background-color: var(--dark-bg-tertiary);
color: var(--text-primary-dark);
border: 1px solid var(--dark-border-subtle);
border-radius: 0.25rem;
}
.form-control::placeholder,
.form-select::placeholder {
color: var(--text-placeholder-dark);
}
.form-control:focus,
.form-select:focus {
background-color: var(--dark-bg-secondary);
/* Slightly different on focus */
color: var(--text-primary-dark);
border-color: var(--brand-purple-base);
box-shadow: 0 0 0 0.2rem rgba(138, 43, 226, 0.25);
/* Purple glow */
}
.form-check-input {
background-color: var(--dark-bg-tertiary);
border: 1px solid var(--dark-border-strong);
}
.form-check-input:checked {
background-color: var(--brand-purple-base);
border-color: var(--brand-purple-base);
}
.form-check-input:focus {
border-color: var(--brand-purple-light);
box-shadow: 0 0 0 0.2rem rgba(138, 43, 226, 0.25);
}
label,
.form-label {
color: var(--text-secondary-dark);
margin-bottom: 0.5rem;
}
.form-text {
/* Help text */
color: var(--text-secondary-dark);
}
.invalid-feedback {
color: var(--danger-dark);
}
.valid-feedback {
color: var(--success-dark);
}
.input-group-text {
background-color: var(--dark-bg-secondary);
border: 1px solid var(--dark-border-subtle);
color: var(--text-secondary-dark);
}
/* --- Alerts --- */
.alert {
border-left-width: 5px;
border-radius: 0.25rem;
color: var(--text-primary-dark);
/* Default text color for alerts */
}
.alert-heading {
color: inherit;
/* Inherit from .alert */
}
.alert-primary {
background-color: rgba(138, 43, 226, 0.15);
border-color: var(--brand-purple-base);
color: var(--brand-purple-light);
}
.alert-secondary {
background-color: rgba(108, 117, 125, 0.15);
border-color: #6c757d;
color: var(--text-secondary-dark);
}
.alert-success {
background-color: rgba(42, 157, 143, 0.15);
border-color: var(--success-dark);
color: #c3e6cb;
}
.alert-danger {
background-color: rgba(231, 111, 81, 0.15);
border-color: var(--danger-dark);
color: #f5c6cb;
}
.alert-warning {
background-color: rgba(233, 196, 106, 0.15);
border-color: var(--warning-dark);
color: #ffeeba;
/* Keep dark text for better contrast on yellow-ish */
}
.alert-info {
background-color: rgba(69, 123, 157, 0.15);
border-color: var(--info-dark);
color: #bee5eb;
}
.alert-light {
/* Not really "light" in dark mode */
background-color: var(--dark-bg-tertiary);
border-color: var(--dark-border-subtle);
color: var(--text-primary-dark);
}
.alert-dark {
/* Very dark, use sparingly */
background-color: #1c1e22;
border-color: #343a40;
color: var(--text-secondary-dark);
}
.alert .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
/* Make close button white */
}
.btn-close {
float: right;
color: #ffffff;
}
/* --- List Group --- */
.list-group-item {
background-color: var(--dark-bg-tertiary);
border: 1px solid var(--dark-border-subtle);
color: var(--text-secondary-dark);
}
.list-group-item.active {
background-color: var(--brand-purple-base);
border-color: var(--brand-purple-base);
color: white;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
background-color: var(--dark-bg-secondary);
color: var(--text-primary-dark);
}
/* --- Pagination --- */
.pagination .page-link {
background-color: var(--dark-bg-tertiary);
border: 1px solid var(--dark-border-subtle);
color: var(--brand-purple-light);
}
.pagination .page-link:hover {
background-color: var(--dark-bg-secondary);
color: var(--brand-purple-highlight);
border-color: var(--dark-border-strong);
}
.pagination .page-item.active .page-link {
background-color: var(--brand-purple-base);
border-color: var(--brand-purple-base);
color: white;
box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}
.pagination .page-item.disabled .page-link {
background-color: var(--dark-bg-tertiary);
border-color: var(--dark-border-subtle);
color: var(--text-placeholder-dark);
}
/* --- Badges --- */
.badge {
font-weight: 500;
}
.badge.bg-primary {
background-color: var(--brand-purple-base) !important;
color: white !important;
}
.badge.bg-secondary {
background-color: #4f545c !important;
}
.badge.bg-success {
background-color: var(--success-dark) !important;
}
.badge.bg-danger {
background-color: var(--danger-dark) !important;
}
.badge.bg-warning {
background-color: var(--warning-dark) !important;
color: #212529 !important;
}
.badge.bg-info {
background-color: var(--info-dark) !important;
}
.badge.bg-light {
background-color: var(--dark-bg-tertiary) !important;
color: var(--text-primary-dark) !important;
border: 1px solid var(--dark-border-subtle);
}
.badge.bg-dark {
background-color: #212529 !important;
}
/* --- Specific Quiz Elements Styling --- */
.quiz-card .card-img-top {
border-bottom: 2px solid var(--brand-purple-deep);
/* Purple accent on thumbnails */
}
/* --- Badge & Tag Overrides for Cards --- */
.difficulty-badge-overlay {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
padding: 0.4em 0.8em;
border-radius: 20px;
font-weight: 600;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.difficulty-easy {
background-color: rgba(42, 157, 143, 0.85);
color: white;
}
.difficulty-medium {
background-color: rgba(233, 196, 106, 0.85);
color: #212529;
}
.difficulty-hard {
background-color: rgba(231, 111, 81, 0.85);
color: white;
}
.difficulty-expert {
background-color: rgba(214, 40, 40, 0.85);
color: white;
}
.hashtag-badge-card {
background-color: rgba(138, 43, 226, 0.15) !important;
color: var(--brand-purple-light) !important;
border: 1px solid rgba(138, 43, 226, 0.3);
font-weight: 500;
padding: 0.35em 0.6em;
border-radius: 6px;
transition: all 0.2s ease;
text-decoration: none;
}
.hashtag-badge-card:hover {
background-color: var(--brand-purple-base) !important;
color: white !important;
transform: translateY(-1px);
}
/* Profile specific */
.profile-stats .card {
background-color: rgba(42, 44, 65, 0.7);
/* Slightly more transparent */
}
/* Quiz play choice styling */
.question-card .form-check-input {
width: 1.4em;
height: 1.4em;
margin-top: 0.15em;
cursor: pointer;
}
.question-card .form-check-label {
cursor: pointer;
padding-left: 0.5rem;
font-size: 1.05rem;
}
.question-card.border-danger .card-header {
/* For unanswered question highlight */
background-color: rgba(231, 111, 81, 0.1) !important;
border-left: 3px solid var(--danger-dark);
}
/* Result page details */
.quiz-result-details .card {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
color: var(--dark-bg-secondary) !important;
}
.quiz-result-details .card-header.bg-success-subtle {
background-color: rgba(42, 157, 143, 0.2) !important;
color: #a3d9d2 !important;
border-left: 3px solid var(--success-dark);
}
.quiz-result-details .card-header.bg-danger-subtle {
background-color: rgba(231, 111, 81, 0.2) !important;
color: #f7c5ba !important;
border-left: 3px solid var(--danger-dark);
}
.quiz-result-details .badge.bg-success {
color: white !important;
}
.quiz-result-details .badge.bg-danger {
color: white !important;
}
/* --- Utilities --- */
.text-brand-purple {
color: var(--brand-purple-medium) !important;
}
.text-brand-purple-light {
color: var(--brand-purple-light) !important;
}
/* Shimmer effect (use sparingly on brand elements like logo or special buttons) */
.has-shimmer-effect {
position: relative;
overflow: hidden;
}
.has-shimmer-effect::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-image: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(224, 195, 252, 0.2) 40%,
/* Light lavender shimmer */
rgba(224, 195, 252, 0.3) 50%,
rgba(224, 195, 252, 0.2) 60%,
rgba(255, 255, 255, 0) 100%);
transform: rotate(25deg);
transition: opacity 0.8s ease;
opacity: 0;
pointer-events: none;
z-index: 1;
/* Ensure it's above the element's content */
}
.has-shimmer-effect:hover::after {
opacity: 1;
animation: shimmer 2.5s infinite linear;
}
@keyframes shimmer {
0% {
transform: translateX(-100%) rotate(25deg);
}
/* Start further left */
100% {
transform: translateX(100%) rotate(25deg);
}
/* End further right */
}
/* Sticky sidebar for quiz list (if needed) */
.sticky-sidebar {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 5rem;
/* Adjust based on navbar height + desired gap */
max-height: calc(100vh - 6rem);
/* Optional: prevent very long sidebars */
overflow-y: auto;
}
.category-sidebar-widget .category-link {
transition: background-color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
border-radius: 0.25rem;
}
.category-sidebar-widget .category-link:hover {
background-color: rgba(138, 43, 226, 0.1);
/* Faint purple bg */
padding-left: 0.5rem !important;
/* Indent on hover */
}
.category-sidebar-widget .category-link:hover span:first-child {
/* Text color on hover */
color: var(--brand-purple-light) !important;
}
.category-sidebar-widget .category-link-all:hover {
color: var(--brand-purple-highlight) !important;
}
.category-sidebar-widget .list-group-item.active-category {
background-color: var(--brand-purple-base) !important;
/* Prominent active state */
color: white !important;
font-weight: 600;
border-left: 4px solid var(--brand-purple-highlight) !important;
padding-left: 1.25rem !important;
/* More indent for active */
}
.category-sidebar-widget .list-group-item.active-category .badge {
background-color: white !important;
color: var(--brand-purple-base) !important;
}
.difficulty-sidebar-widget .difficulty-link {
transition: background-color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
border-radius: 0;
/* Align with list-group flush */
}
.difficulty-sidebar-widget .difficulty-link:hover {
background-color: rgba(138, 43, 226, 0.1);
/* Faint purple bg */
padding-left: 1.25rem !important;
/* Indent on hover */
color: var(--brand-purple-light) !important;
}
.difficulty-sidebar-widget .list-group-item.active-difficulty {
background-color: var(--brand-purple-base) !important;
color: white !important;
font-weight: 600;
border-left: 4px solid var(--brand-purple-highlight) !important;
padding-left: 1.25rem !important;
}
.difficulty-badge {
font-size: 0.75em;
padding: 0.35em 0.65em;
text-transform: capitalize;
/* Or uppercase if preferred */
letter-spacing: 0.3px;
border: 1px solid transparent;
font-weight: 500;
}
.difficulty-easy {
background-color: rgba(40, 167, 69, 0.15);
color: var(--success-dark);
border-color: rgba(40, 167, 69, 0.4);
}
.difficulty-medium {
background-color: rgba(233, 196, 106, 0.15);
color: var(--warning-dark);
border-color: rgba(233, 196, 106, 0.4);
}
.difficulty-hard {
background-color: rgba(231, 111, 81, 0.15);
color: var(--danger-dark);
border-color: rgba(231, 111, 81, 0.4);
}
.difficulty-expert {
background-color: rgba(108, 0, 138, 0.2);
color: var(--brand-purple-base);
border-color: rgba(108, 0, 138, 0.4);
}
.category-badge-on-card {
background-color: rgba(138, 43, 226, 0.6) !important;
/* From your previous suggestion */
color: var(--brand-purple-highlight) !important;
text-decoration: none;
font-size: 0.75em;
padding: 0.35em 0.65em;
}
/* 3-Dot Menu on Quiz Card */
.quiz-card .dropdown .btn.no-arrow {
background-color: rgba(0, 0, 0, 0.3);
/* Semi-transparent background for better visibility on images */
border: none;
padding: 0.2rem 0.4rem;
/* Smaller padding */
line-height: 1;
}
.quiz-card .dropdown .btn.no-arrow:hover,
.quiz-card .dropdown .btn.no-arrow:focus {
background-color: rgba(0, 0, 0, 0.5);
}
.quiz-card .dropdown .btn.no-arrow::after {
/* Remove Bootstrap's default dropdown arrow */
display: none;
}
.quiz-card .dropdown .dropdown-menu {
/* Uses existing .dropdown-menu styles from your theme */
min-width: 160px;
/* Adjust as needed */
}
.quiz-card .dropdown .dropdown-item {
font-size: 0.9rem;
/* Uses existing .dropdown-item styles */
}
.quiz-card .dropdown .dropdown-item i {
width: 20px;
/* Align icons nicely */
}
/* Share Modal Styling (Optional, but good to have) */
#shareQuizModal .modal-body input[type="text"] {
background-color: var(--dark-bg-secondary);
/* Match theme */
color: var(--text-primary-dark);
border: 1px solid var(--dark-border-subtle);
}
#shareQuizModal .share-platform-btn {
font-size: 1.5rem;
/* Larger icons for social media */
padding: 0.5rem 0.8rem;
margin: 0.25rem;
border-radius: 50%;
/* Circular buttons */
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.quiz-description-title {
color: var(--brand-purple-light) !important;
font-weight: 600;
}
.quiz-detail-actions-menu .btn.no-arrow {
/* Example class for the parent div on detail page */
background-color: transparent;
/* Or your secondary button color */
border-color: var(--dark-border-subtle);
color: var(--text-secondary-dark);
}
.modal-content {
background-color: var(--dark-bg-primary);
color: var(--text-primary-dark);
border: 1px solid var(--dark-border-strong);
}
.modal-header {
background-color: var(--dark-bg-secondary);
border-bottom: 1px solid var(--dark-border-strong);
color: var(--text-primary-dark);
}
.modal-header .modal-title {
color: var(--text-primary-dark);
}
/* Bootstrap's .btn-close-white is good for dark backgrounds if your variables are set up
If not, you might need:
.modal-header .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
*/
.modal-body {
color: var(--text-secondary-dark);
}
#shareQuizModal .modal-body input[type="text"] {
background-color: var(--dark-bg-primary);
/* Darker input field */
color: var(--text-primary-dark);
border: 1px solid var(--dark-border-subtle);
}
#shareQuizModal .modal-body input[type="text"]:focus {
border-color: var(--brand-purple-base);
box-shadow: 0 0 0 0.2rem rgba(138, 43, 226, 0.25);
}
#shareQuizModal .copy-quiz-link-btn {
color: var(--brand-purple-light);
border-color: var(--brand-purple-light);
}
#shareQuizModal .copy-quiz-link-btn:hover {
background-color: var(--brand-purple-light);
color: var(--dark-bg-primary);
}
/* Share platform button colors (using Bootstrap outline classes as base,
but overriding for specific brand colors if needed) */
#shareQuizModal .share-platform-btn.btn-outline-primary {
/* Facebook, LinkedIn default */
border-color: #1877F2;
color: #1877F2;
}
#shareQuizModal .share-platform-btn.btn-outline-primary:hover {
background-color: #1877F2;
color: white;
}
#shareQuizModal .share-platform-btn.btn-outline-info {
/* Twitter/X */
border-color: #1DA1F2;
color: #1DA1F2;
/* Or black for X logo */
}
#shareQuizModal .share-platform-btn.btn-outline-info:hover {
background-color: #1DA1F2;
color: white;
}
#shareQuizModal .share-platform-btn.btn-outline-success {
/* WhatsApp */
border-color: #25D366;
color: #25D366;
}
#shareQuizModal .share-platform-btn.btn-outline-success:hover {
background-color: #25D366;
color: white;
}
#shareQuizModal .share-platform-btn.btn-outline-danger {
/* Reddit */
border-color: #FF4500;
color: #FF4500;
}
#shareQuizModal .share-platform-btn.btn-outline-danger:hover {
background-color: #FF4500;
color: white;
}
#shareQuizModal .share-platform-btn.btn-outline-secondary {
/* Email */
border-color: var(--text-secondary-dark);
color: var(--text-secondary-dark);
}
#shareQuizModal .share-platform-btn.btn-outline-secondary:hover {
background-color: var(--text-secondary-dark);
color: var(--dark-bg-primary);
}
/* --- Navbar QuizzMe Custom Styling --- */
.navbar-quizzme {
background-color: var(--dark-bg-secondary) !important;
/* From your theme */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
padding-top: 0.6rem;
/* Adjust vertical padding for a more compact feel */
padding-bottom: 0.6rem;
}
.navbar-quizzme .navbar-brand {
color: var(--brand-purple-highlight);
font-weight: 700;
font-size: 1.4rem;
/* Slightly adjust size */
margin-right: 0.5rem;
/* Reduce margin next to brand */
}
.navbar-quizzme .navbar-brand img {
width: 32px;
/* Set base size for layout */
height: 32px;
transform: scale(1.125);
/* Makes the image visually larger without changing layout space */
transition: transform 0.2s ease-in-out;
/* Smooth transition for any future hover effects */
}
.navbar-quizzme .navbar-nav .nav-link {
color: var(--text-secondary-dark);
transition: color 0.2s ease, background-color 0.2s ease;
padding: 0.5rem 0.8rem;
/* Adjust padding for nav links */
border-radius: 0.25rem;
/* Slight rounding for links */
}
.navbar-quizzme .navbar-nav .nav-link:hover,
.navbar-quizzme .navbar-nav .nav-link:focus {
color: var(--brand-purple-highlight);
background-color: rgba(138, 43, 226, 0.1);
/* Subtle hover background */
}
.navbar-quizzme .navbar-nav .nav-link.active {
color: var(--brand-purple-light);
font-weight: 600;
background-color: rgba(138, 43, 226, 0.15);
}
.navbar-quizzme .navbar-toggler {
border-color: rgba(138, 43, 226, 0.3);
padding: 0.25rem 0.5rem;
/* Smaller toggler */
}
.navbar-quizzme .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28199, 125, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
/* Brighter purple for toggler icon */
width: 1.25em;
/* Adjust icon size */
height: 1.25em;
}
/* User Avatar in Navbar */
.nav-user-avatar {
width: 30px;
height: 30px;
object-fit: cover;
border: 1px solid var(--brand-purple-medium);
}
.desktop-search-container {
/* New container for centering */
/* This container will grow, and justify-content-center centers its child */
}
/* Desktop Search Form in Navbar */
.desktop-search-form {
flex-grow: 1;
/* Allow it to take available space */
max-width: 450px;
/* Max width for the search bar */
width: 100%;
}
.mobile-search-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2050;
background: var(--dark-bg-secondary);
border-bottom: 1px solid var(--dark-border-subtle);
transform: translateY(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
opacity: 0;
visibility: hidden;
display: flex;
align-items: center;
}
.mobile-search-container.active {
display: flex !important;
transform: translateY(0) !important;
opacity: 1 !important;
visibility: visible !important;
}
.search-no-results-card {
background-color: var(--dark-bg-secondary) !important;
border: 1px solid var(--dark-border-subtle) !important;
color: var(--text-primary-dark) !important;
}
.search-no-results-card hr {
border-top: 1px solid var(--dark-border-subtle) !important;
opacity: 1;
}
.search-no-results-card .text-muted {
color: var(--text-secondary-dark) !important;
}
.search-input-mobile {
background-color: var(--dark-bg-tertiary) !important;
border-color: var(--dark-border-subtle) !important;
color: var(--text-primary-dark) !important;
border-radius: 20px !important;
padding-left: 15px !important;
}
.search-input-navbar {
background-color: var(--dark-bg-tertiary) !important;
color: var(--text-primary-dark) !important;
border: 1px solid var(--dark-border-subtle) !important;
font-size: 0.9rem;
}
.search-input-navbar::placeholder {
color: var(--text-placeholder-dark);
}
.search-input-navbar:focus {
background-color: var(--dark-bg-secondary) !important;
border-color: var(--brand-purple-base) !important;
box-shadow: 0 0 0 0.2rem rgba(138, 43, 226, 0.25) !important;
}
.btn-icon-only {
/* For search toggle and close buttons */
padding: 0.375rem 0.6rem;
line-height: 1;
background: transparent;
border: none;
}
.btn-icon-only:hover,
.btn-icon-only:focus {
color: var(--brand-purple-highlight) !important;
background-color: rgba(138, 43, 226, 0.1);
}
@media (max-width: 991.98px) {
/* Mobile and Tablet (Bootstrap lg breakpoint) */
.navbar-quizzme .navbar-brand .brand-text {
/* display: none; */
/* Optionally hide brand text to save space if logo is enough */
flex-shrink: 0;
}
.navbar-quizzme .container {
/* For mobile, make the brand and toggler take full width available after icons */
/* This might need flex adjustments on the parent .container or .navbar */
}
.navbar-quizzme .navbar-collapse {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1050;
background-color: var(--dark-bg-secondary);
margin-top: 0;
border-top: 1px solid var(--dark-border-strong);
border-bottom: 1px solid var(--dark-border-strong);
padding: 0.5rem 0;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.navbar-quizzme .navbar-nav .nav-link {
padding: 0.6rem 1rem;
/* Slightly larger tap targets for mobile links */
}
.navbar-quizzme .navbar-nav .nav-link i {
font-size: 1.1rem;
/* Make icons in nav links a bit bigger */
width: 25px;
/* Consistent width for alignment */
text-align: center;
}
.user-actions-nav .nav-link {
display: flex;
/* Align avatar and text nicely in collapsed menu */
align-items: center;
}
.user-actions-nav .nav-user-avatar {
margin-right: 0.5rem;
}
body {
padding-top: 0px;
/* Default Bootstrap navbar height for mobile, adjust if yours is different */
}
.mobile-search-container.sticky-top {
top: 56px;
/* Position below the main navbar */
}
.mobile-actions-right {}
}
@media (max-width: 767.98px) {
/* Smaller breakpoint for phone-specific refinements */
/* --- GENERAL COMPONENT SIZING --- */
.btn-lg {
padding: 0.5rem 1rem;
font-size: 1rem;
}
h1,
.h1 {
font-size: 2rem;
}
.lead {
font-size: 1.1rem;
}
/* --- MY QUIZZES PAGE FILTERS --- */
.my-quizzes-controls .row>div {
margin-bottom: 0.5rem;
}
.my-quizzes-controls .btn {
width: 100%;
}
/* --- PROFILE EDIT CROPPER MODAL --- */
#cropperModal .modal-footer {
flex-wrap: wrap;
justify-content: center;
}
#cropperModal .cropper-controls-modal .btn,
#cropperModal .modal-footer>div:last-child .btn {
padding: 0.5rem 1rem;
font-size: 1rem;
}
#cropperModal .cropper-controls-modal {
margin-bottom: 0.5rem;
}
/* --- QUIZ PLAY PAGE --- */
.quiz-play-page .quiz-play-title {
font-size: 1.75rem;
}
.quiz-play-page .question-card .card-body {
padding: 1.25rem;
}
.quiz-play-page .question-card .card-title {
font-size: 1.15rem;
}
.quiz-play-page .quiz-choice-item .form-check-label {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
.quiz-play-page .quiz-navigation-footer {
padding: 0;
}
.quiz-play-page .quiz-navigation-footer .btn {
font-size: 0.9rem;
padding: 0.6rem 1rem;
flex-grow: 1;
margin: 0 0.25rem;
}
.quiz-play-page .quiz-navigation-footer .btn:first-child {
margin-left: 0;
}
.quiz-play-page .quiz-navigation-footer .btn:last-child {
margin-right: 0;
}
}
@media (min-width: 992px) {
/* Desktop */
.navbar-quizzme .navbar-nav.nav-links-main {
/* If desktop search is me-auto, main links might need ms-auto to go right */
/* For current setup where user actions are ms-auto, this should be fine */
}
body {
padding-top: 0px;
/* Adjust based on your desktop navbar height after styling */
/* You set 70px previously, let's try a bit less since padding adjusted */
}
.mobile-search-container.sticky-top {
top: 60px;
/* Position below the main navbar */
}
.navbar-quizzme .user-actions-nav {
/* ms-lg-2 should provide spacing from nav-links-main */
}
}
/* Ensure main content starts below the navbar AND the mobile search if visible */
main {
/* padding-top will be handled by body padding initially.
If mobile search is visible, JS might need to adjust main's padding-top.
For simplicity, we'll try to keep mobile search compact or make it overlay.
*/
}
.my-quizzes-table {
background-color: var(--dark-bg-tertiary);
/* Match card background */
border: 1px solid var(--dark-border-subtle);
}
.my-quizzes-table thead.table-dark th {
background-color: var(--dark-bg-secondary) !important;
/* Darker header for the table */
color: var(--text-primary-dark);
border-bottom: 2px solid var(--dark-border-strong);
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.my-quizzes-table tbody tr {
border-bottom: 1px solid var(--dark-border-subtle);
}
.my-quizzes-table tbody tr:last-child {
border-bottom: none;
}
.my-quizzes-table tbody td {
color: var(--text-secondary-dark);
vertical-align: middle;
}
.my-quizzes-table tbody td a.stretched-link-hover-only {
/* Title link */
color: var(--text-primary-dark);
font-weight: 500;
}
.my-quizzes-table tbody td a.stretched-link-hover-only:hover {
color: var(--brand-purple-light);
}
.my-quizzes-table .btn-group-sm .btn {
padding: 0.25rem 0.5rem;
/* Adjust padding for smaller buttons in table */
font-size: 0.8rem;
/* Smaller font for buttons */
}
.my-quizzes-table .btn-group-sm .btn i {
font-size: 0.9rem;
/* Adjust icon size if needed */
}
.fs-09rem {
/* Utility class for font size if needed for badges */
font-size: 0.9rem !important;
}
/* --- My Quizzes Page Specifics --- */
.my-quizzes-page hr.bright-divider {
border-top: 1px solid var(--brand-purple-medium) !important;
/* Ensure it overrides default hr */
opacity: 0.75 !important;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.my-quizzes-controls {
background-color: var(--dark-bg-secondary);
padding: 1rem 1.5rem;
/* Increased padding */
border-radius: 0.375rem;
margin-bottom: 1.5rem;
border: 1px solid var(--dark-border-strong);
/* Brighter border */
}
.my-quizzes-controls .form-control,
.my-quizzes-controls .form-select {
font-size: 0.9rem;
background-color: var(--dark-bg-tertiary);
color: var(--text-primary-dark);
border-color: var(--dark-border-subtle);
/* Default border */
}
.my-quizzes-controls .form-control:focus,
.my-quizzes-controls .form-select:focus {
border-color: var(--brand-purple-base);
/* Purple focus */
box-shadow: 0 0 0 0.2rem rgba(138, 43, 226, 0.25);
}
.my-quizzes-controls label {
font-size: 0.85rem;
margin-bottom: 0.25rem;
color: var(--text-secondary-dark);
font-weight: 500;
}
.my-quizzes-controls .btn {
/* General button styling within controls */
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
}
.my-quizzes-table {
background-color: var(--dark-bg-tertiary);
border: 1px solid var(--brand-purple-medium) !important;
/* Bright table border */
border-radius: 0.375rem;
/* Consistent rounding */
overflow: hidden;
/* For rounded corners on table */
}
.my-quizzes-table thead.table-dark th {
background-color: var(--dark-bg-secondary) !important;
color: var(--text-primary-dark);
border-color: var(--brand-purple-medium) !important;
/* Bright header border */
border-bottom-width: 2px !important;
font-weight: 600;
font-size: 0.85rem;
/* Slightly smaller header text */
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
/* Prevent headers from wrapping */
}
.my-quizzes-table tbody tr {
border-bottom: 1px solid var(--dark-border-subtle);
/* Subtler row dividers */
}
.my-quizzes-table tbody tr:last-child {
border-bottom: none;
}
.my-quizzes-table tbody tr:hover {
background-color: var(--dark-bg-secondary) !important;
/* Hover effect for rows */
}
.my-quizzes-table tbody td {
color: var(--text-secondary-dark);
vertical-align: middle;
padding: 0.85rem 0.75rem;
/* Adjust padding */
font-size: 0.9rem;
border-right: 1px solid var(--dark-border-subtle);
}
.my-quizzes-table tbody td:last-child {
border-right: none;
}
.my-quizzes-table tbody td a.stretched-link-hover-only {
color: var(--text-primary-dark);
font-weight: 500;
}
.my-quizzes-table tbody td a.stretched-link-hover-only:hover {
color: var(--brand-purple-light);
}
.my-quizzes-table .btn-group-sm .btn {
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
}
.my-quizzes-table .btn-group-sm .btn i {
font-size: 0.9rem;
}
/* Table Header Sorting Links */
.sortable-header a {
color: var(--text-primary-dark) !important;
/* Bright link color */
text-decoration: none;
font-weight: 600;
display: inline-flex;
/* Align icon nicely */
align-items: center;
}
.sortable-header a:hover {
color: var(--brand-purple-highlight) !important;
}
.sortable-header .sort-icon {
font-size: 0.9em;
/* Relative to parent */
margin-left: 0.4em;
transition: opacity 0.2s ease;
}
.sortable-header a:not(:hover) .text-muted.sort-icon {
/* Dim inactive sort icons slightly */
opacity: 0.6;
}
/* Stat Emphasis */
.stat-play-count {
color: var(--info-dark);
font-weight: 600;
font-size: 0.95rem;
}
.stat-avg-score {
color: var(--warning-dark);
font-weight: 600;
font-size: 0.95rem;
}
.fs-09rem {
font-size: 0.9rem !important;
}
/* For badges if needed */
.separator {
display: flex;
align-items: center;
text-align: center;
color: var(--text-secondary-dark);
}
.separator::before,
.separator::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--dark-border-subtle);
}
.separator:not(:empty)::before {
margin-right: .25em;
}
.separator:not(:empty)::after {
margin-left: .25em;
}
.btn-google-dark-custom {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
border-radius: 0.3rem;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
background-color: var(--dark-bg-secondary);
/* Dark background */
border: 2px solid var(--dark-border-strong);
color: var(--text-primary-dark);
/* Light text */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.btn-google-dark-custom .google-icon-svg {
/* Using an SVG for Google logo */
width: 20px;
height: 20px;
margin-right: 0.75rem;
}
.btn-google-dark-custom:hover,
.btn-google-dark-custom:focus {
background-color: var(--dark-bg-secondary);
/* Slightly lighter dark on hover */
border-color: var(--brand-purple-base);
/* Purple border on hover/focus */
color: var(--brand-purple-highlight);
/* Purple text highlight */
box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
}
/* --- Authentication Form Footer Links --- */
.auth-form-footer-link {
/* A general class you can apply */
color: var(--text-secondary-dark);
/* Muted color for less emphasis */
text-decoration: none;
font-size: 0.9rem;
/* Slightly smaller */
transition: color 0.2s ease-in-out;
}
.auth-form-footer-link:hover,
.auth-form-footer-link:focus {
color: var(--brand-purple-light);
/* Brand color on hover */
text-decoration: underline;
}
/* Styling for links specifically within card footers or specific divs if you prefer */
.card .text-center a,
/* Targets links within .text-center divs in cards */
.auth-actions-footer a {
/* If you add a wrapper class to the div */
color: var(--brand-purple-medium);
text-decoration: none;
/* Remove default underline */
font-weight: 500;
/* Slightly bolder than normal paragraph text */
transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}
.card .text-center a:hover,
.auth-actions-footer a:hover {
color: var(--brand-purple-light);
/* Your brand's hover color */
text-decoration: underline;
/* Underline on hover for clear affordance */
}
/* Specific styling for the paragraph containing these links */
.card .text-center p.account-action-text {
/* Add this class to the tag */
margin-top: 1rem;
/* Add some space above */
font-size: 0.9rem;
/* Slightly smaller text for the whole line */
color: var(--text-secondary-dark);
/* Muted text for the non-link part */
}
.auth-actions-footer {
margin-top: 1rem;
/* Add some space above these links */
}
.auth-actions-footer p {
font-size: 0.9rem;
/* Slightly smaller text for the whole line */
color: var(--text-secondary-dark);
/* Muted text for the non-link part */
}
.auth-actions-footer a:hover,
.auth-actions-footer a:focus {
color: var(--brand-purple-highlight);
/* Your brand's brighter hover color */
text-decoration: underline;
/* Underline on hover for clear affordance */
}
/*
==========================================================================
Tom Select Custom Dark Theme ("Cosmic Enigma" Style)
==========================================================================
*/
.ts-control {
background-color: var(--dark-bg-tertiary) !important;
color: var(--text-primary-dark);
border: 1px solid var(--dark-border-subtle) !important;
border-radius: 0.375rem !important;
padding: 0.5rem 0.8rem !important;
/* Adjust padding */
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: none !important;
}
.ts-control.focus {
border-color: var(--brand-purple-base) !important;
box-shadow: 0 0 0 0.2rem rgba(138, 43, 226, 0.25) !important;
}
.ts-control>input {
/* The actual text input field */
color: var(--text-primary-dark) !important;
padding: 0 !important;
/* Remove default padding */
}
.ts-control>input::placeholder {
color: var(--text-placeholder-dark) !important;
}
/* Selected Items (the "pills") */
.ts-control>.item {
background-image: var(--brand-purple-gradient) !important;
color: white !important;
padding: 0.25rem 0.6rem !important;
margin: 2px 4px 2px 0 !important;
border-radius: 0.25rem !important;
font-size: 0.9em;
font-weight: 500;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
display: inline-flex;
align-items: center;
border: none !important;
}
/* Remove Button on selected items */
.ts-control>.item .remove-button {
color: var(--brand-purple-highlight) !important;
opacity: 0.7;
margin-left: 0.5rem;
font-size: 1.1em;
text-decoration: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.ts-control>.item .remove-button:hover {
opacity: 1;
transform: scale(1.2);
background: none !important;
}
/* The Dropdown Panel */
.ts-dropdown {
background-color: var(--dark-bg-secondary) !important;
border: 1px solid var(--dark-border-strong) !important;
border-top: none !important;
/* Smooth connection to control */
border-radius: 0 0 0.375rem 0.375rem !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
overflow: hidden;
/* For rounded corners on content */
}
/* Search input inside the dropdown */
.ts-dropdown .dropdown-input-wrap .dropdown-input {
background-color: var(--dark-bg-primary) !important;
color: var(--text-primary-dark);
border: 1px solid var(--dark-border-subtle) !important;
border-radius: 0.25rem !important;
padding: 0.5rem 0.75rem !important;
margin: 0.5rem;
width: calc(100% - 1rem);
/* Full width with margin */
}
.ts-dropdown .dropdown-input-wrap .dropdown-input:focus {
border-color: var(--brand-purple-base) !important;
box-shadow: none !important;
}
/* Dropdown Options */
.ts-dropdown .ts-dropdown-content .option {
padding: 0.75rem 1rem !important;
color: var(--text-secondary-dark);
transition: background-color 0.2s ease, color 0.2s ease;
border-bottom: 1px solid var(--dark-border-subtle);
}
.ts-dropdown .ts-dropdown-content .option:last-child {
border-bottom: none;
}
.ts-dropdown .ts-dropdown-content .option:hover {
background-color: rgba(138, 43, 226, 0.15) !important;
color: var(--text-primary-dark);
}
.ts-dropdown .ts-dropdown-content .active {
/* The currently highlighted option */
background-color: var(--brand-purple-base) !important;
color: white !important;
}
.ts-dropdown .ts-dropdown-content .active .option-title,
.ts-dropdown .ts-dropdown-content .active i {
color: white !important;
/* Ensure content inside active option is also white */
}
/* Custom rendered option styling */
.ts-dropdown .option .option-title {
font-weight: 500;
}
/* Create new option style (if enabled) */
.ts-dropdown .create {
color: var(--brand-purple-light) !important;
}
.ts-dropdown .create:hover {
background-color: var(--dark-bg-tertiary) !important;
}
/* --- Offcanvas Filter Menu Styling --- */
.offcanvas {
background-color: var(--dark-bg-secondary);
color: var(--text-primary-dark);
border-right: 2px solid var(--brand-purple-base);
}
.offcanvas-header {
border-bottom: 1px solid var(--dark-border-strong);
}
.offcanvas-body .list-group-item {
background-color: transparent;
color: var(--text-secondary-dark);
border-color: var(--dark-border-subtle);
}
.offcanvas-body .list-group-item:hover {
background-color: rgba(138, 43, 226, 0.1);
color: var(--brand-purple-light);
}
.offcanvas-body .list-group-item.active-difficulty,
.offcanvas-body .list-group-item.active-category {
background-color: var(--brand-purple-base) !important;
color: white !important;
border-color: var(--brand-purple-base) !important;
}
/* --- Active Filters Display (Mobile) --- */
.active-filters-mobile {
color: var(--text-secondary-dark);
}
.active-filters-mobile .badge {
font-size: 0.8rem;
padding: 0.4em 0.8em;
}
.active-filters-mobile .badge a {
color: inherit;
/* Inherit the badge's text color */
}
.active-filters-mobile .badge a:hover {
color: white;
/* Make remove button brighter on hover */
text-decoration: none;
}
/* Ensure other interactive elements inside the card are "on top" of the stretched link */
.quiz-card .dropdown,
.quiz-card .btn,
.quiz-card .badge {
/* If badges are links */
position: relative;
/* This gives them a stacking context */
z-index: 2;
/* Explicitly place them above the stretched link's pseudo-element (which has z-index: 1) */
}
.quiz-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(138, 43, 226, 0.2);
border-color: var(--brand-purple-base);
}
.quiz-card:hover .card-title a.stretched-link {
color: var(--brand-purple-light);
text-decoration: underline;
}
.quiz-card .card-title a.stretched-link {
color: var(--text-primary-dark);
}
/* --- FORM STYLING REFINEMENT (for better contrast) --- */
/* Style for all standard form inputs, textareas, and selects */
.form-control,
.form-select,
.ts-control {
/* Added .ts-control for Tom Select */
background-color: var(--dark-bg-primary) !important;
/* Make it darker than the card/container bg */
color: var(--text-primary-dark) !important;
border: 1px solid var(--dark-border-strong) !important;
/* Use the STRONGER purple border */
border-radius: 0.25rem;
}
/* Placeholder text styling */
.form-control::placeholder {
color: var(--text-placeholder-dark);
}
/* --- Focus State --- */
/* Add a more prominent glow and border on focus */
.form-control:focus,
.form-select:focus,
.ts-control.focus {
background-color: var(--dark-bg-secondary) !important;
/* Can lighten slightly on focus */
color: var(--text-primary-dark) !important;
border-color: var(--brand-purple-light) !important;
/* Use a lighter purple for focus border */
box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.35) !important;
/* Make the glow a bit more visible */
}
/* File Input Specifics (Choose File button) */
.form-control[type="file"] {
background-color: var(--dark-bg-tertiary);
/* Keep this one a bit lighter */
}
.form-control[type="file"]::-webkit-file-upload-button {
background-color: #4f545c;
border: 1px solid #555;
color: var(--text-primary-dark);
padding: 0.4rem 0.8rem;
border-radius: 0.25rem;
margin-right: 0.75rem;
transition: background-color 0.2s ease;
}
.form-control[type="file"]::-webkit-file-upload-button:hover {
background-color: #5a6268;
}
/* Tom Select Specific Overrides for better contrast */
/* The input area of Tom Select */
.ts-control {
padding: 0.5rem 0.75rem;
/* Match Bootstrap's padding */
box-shadow: none;
/* Remove Tom Select's default shadow */
}
/* The items (pills) inside Tom Select */
.ts-control .item {
background-color: var(--brand-purple-base) !important;
color: white !important;
border-radius: 3px;
padding: 0.2rem 0.5rem;
}
/* The 'x' remove button on the items */
.ts-control .item .remove-button {
color: white;
text-decoration: none;
}
.ts-control .item .remove-button:hover {
background-color: rgba(0, 0, 0, 0.3) !important;
}
/* The dropdown menu for Tom Select */
.ts-dropdown {
background: var(--dark-bg-secondary);
border: 1px solid var(--dark-border-strong);
}
.ts-dropdown .option {
color: var(--text-secondary-dark);
padding: 0.5rem 0.75rem;
}
.ts-dropdown .option:hover,
.ts-dropdown .active {
background-color: var(--brand-purple-base);
color: white;
}
.ts-dropdown .create {
/* For "add new" option if enabled */
color: var(--brand-purple-light);
}
/* --- Checkboxes and Radios --- */
.form-check-input {
background-color: var(--dark-bg-primary);
border: 1px solid var(--dark-border-strong);
}
.form-check-input:checked {
background-color: var(--brand-purple-base);
border-color: var(--brand-purple-base);
}
.form-check-input:focus {
border-color: var(--brand-purple-light);
box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25);
}
/* --- Labels and Legends --- */
label,
.form-label,
legend {
color: var(--text-secondary-dark);
font-weight: 500;
}
legend.h5 {
color: var(--brand-purple-light) !important;
/* Make legends stand out */
padding-bottom: 0.75rem !important;
border-bottom: 1px solid var(--dark-border-strong) !important;
}
.card-header h2 {
/* Targeting the "Create Quiz" title */
color: var(--brand-purple-highlight) !important;
/* Make main form title brighter */
}
/* --- Profile Page Redesign --- */
.profile-picture-container {
position: relative;
/* For potential future additions like a "change" icon overlay */
}
/* Stat Box Styling */
.stat-box {
border: 1px solid var(--dark-border-subtle);
}
.stat-box .stat-number {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
}
.stat-box .stat-label {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Profile Edit Page - Cropperjs UI */
/* django-image-cropping provides its own CSS, but we can override it for our theme */
.cropper-container {
background-color: var(--dark-bg-primary);
/* Make cropper bg match our theme */
}
.cropper-view-box {
box-shadow: 0 0 0 1px #39f;
/* Bootstrap's default focus color */
outline-color: rgba(138, 43, 226, 0.75);
/* Use our brand color for the outline */
}
.cropper-face {
/* Make the crop selection circle more visible */
background-color: #fff;
opacity: 0.1;
}
/* Bright Divider utility */
hr.bright-divider {
border-top: 1px solid var(--brand-purple-medium);
opacity: 0.75;
}
legend.h5.bright-divider {
/* For profile_edit form legends */
color: var(--brand-purple-light) !important;
padding-bottom: 0.75rem !important;
border-bottom: 1px solid var(--brand-purple-medium) !important;
opacity: 0.75 !important;
}
form #id_bio.textarea.form-control {
resize: none !important;
overflow-y: hidden !important;
transition: height 0.15s ease-out !important;
/* Set a specific, fixed initial height for ~3-4 lines. */
height: 7rem !important;
min-height: 7rem !important;
/* Acts as a floor */
box-sizing: content-box !important;
/* Keep this for calculation consistency */
}
/* --- Profile Page Redesign --- */
.profile-stats .card,
.profile-page-card {
/* Add a common class to profile cards if needed */
background-color: var(--dark-bg-tertiary);
/* Use the slightly lighter dark for the main card */
}
/* Bright Divider utility (if you haven't already added this) */
hr.bright-divider {
border-top: 1px solid var(--brand-purple-medium);
opacity: 0.75;
}
/* Stat Box Styling */
.stat-box {
border: 1px solid var(--dark-border-subtle);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.stat-box:hover {
background-color: var(--dark-bg-secondary) !important;
transform: translateY(-3px);
}
.stat-box .stat-number {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
}
/* Use brand colors for stat numbers */
.stat-box .text-primary {
color: var(--brand-purple-light) !important;
}
.stat-box .text-success {
color: var(--success-dark) !important;
}
.stat-box .text-warning {
color: var(--warning-dark) !important;
}
.stat-box .stat-label {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Created Quizzes List styling */
.list-group-item h6 {
/* Quiz title in the list */
color: var(--text-primary-dark);
font-weight: 600;
}
.list-group-item:hover h6 {
color: var(--brand-purple-light);
}
/* --- Profile Edit Page --- */
/* Change the blue header background */
.card-header.bg-info {
background-color: var(--dark-bg-secondary) !important;
border-bottom: 2px solid var(--brand-purple-base) !important;
color: var(--text-primary-dark) !important;
}
/* Make legends on edit page stand out */
legend.h5.bright-divider {
color: var(--brand-purple-light) !important;
padding-bottom: 0.75rem !important;
border-bottom: 1px solid var(--brand-purple-medium) !important;
opacity: 0.75 !important;
}
/* static/css/style.css - Add these styles */
/* --- Profile Page Redesign & Contrast Fixes --- */
/* Sidebar Profile Card */
.profile-sidebar {
background-color: var(--dark-bg-secondary) !important;
/* Slightly distinct background */
border: 1px solid var(--dark-border-strong);
}
.profile-pic-main {
width: 150px !important;
height: 150px !important;
object-fit: cover;
border: 3px solid var(--brand-purple-base) !important;
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.2);
}
.profile-sidebar .card-title {
/* Username */
color: var(--text-primary-dark);
font-weight: 700;
margin-bottom: 0.25rem;
}
.profile-sidebar .profile-fullname {
/* Full Name */
color: var(--text-secondary-dark);
margin-bottom: 0.25rem;
}
.profile-sidebar .profile-email {
/* Email */
color: var(--info-dark);
/* Make email a different color */
font-family: monospace;
font-size: 0.85rem;
}
.profile-sidebar .bio-header {
color: var(--brand-purple-light);
font-weight: 600;
border-left: 3px solid var(--brand-purple-light);
padding-left: 0.75rem;
}
.profile-sidebar .profile-bio {
color: var(--text-secondary-dark);
font-size: 0.95rem;
}
/* Bright Divider utility */
hr.bright-divider {
border-top: 1px solid var(--brand-purple-medium);
opacity: 0.75;
}
/* Right Column Cards */
.profile-stats-card .card-header,
.created-quizzes-card .card-header {
background-color: var(--dark-bg-tertiary);
border-bottom: 1px solid var(--dark-border-strong) !important;
/* Brighter bottom border */
color: var(--brand-purple-light);
}
/* Stat Box Styling */
.stat-box {
border: 1px solid var(--dark-border-subtle);
background-color: var(--dark-bg-secondary) !important;
/* Darker than card body */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-box:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.stat-box .stat-number {
font-size: 2.2rem;
font-weight: 700;
line-height: 1.2;
}
.stat-box .stat-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Re-applying text colors for emphasis within stats */
.stat-box .text-primary {
color: var(--brand-purple-light) !important;
}
.stat-box .text-success {
color: var(--success-dark) !important;
}
.stat-box .text-warning {
color: var(--warning-dark) !important;
}
/* Created Quizzes List */
.created-quizzes-card .list-group-item {
background-color: var(--dark-bg-tertiary);
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--dark-border-subtle) !important;
}
.created-quizzes-card .list-group-item:last-child {
border-bottom: none !important;
}
.created-quizzes-card .list-group-item-action:hover,
.created-quizzes-card .list-group-item-action:focus {
background-color: var(--dark-bg-secondary);
transform: translateX(5px);
border-left: 3px solid var(--brand-purple-base);
padding-left: calc(1.25rem - 3px) !important;
/* Account for border */
}
.quiz-title-in-list {
color: var(--text-primary-dark);
font-weight: 500;
}
.created-quizzes-card .list-group-item:hover .quiz-title-in-list {
color: var(--brand-purple-light);
}
/* Form Edit Page Legend Fix */
legend.h5.bright-divider {
color: var(--brand-purple-light) !important;
padding-bottom: 0.75rem !important;
border-bottom: 3px solid var(--brand-purple-medium) !important;
opacity: 0.75 !important;
}
.quiz-list-controls .dropdown-toggle {
/* Assuming you might wrap sort in a div with this class */
font-size: 0.9rem;
/* Add more specific styling if the default btn-outline-secondary isn't ideal */
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
background-color: var(--brand-purple-base);
/* Ensure active item uses brand color */
color: white !important;
}
/* --- Quiz List Header and Controls --- */
.quiz-list-header .dropdown .btn-sm {
font-size: 0.85rem;
/* Adjust size of desktop sort button */
}
/* Active Filters Display on Mobile */
.active-filters-mobile .badge {
font-size: 0.75rem;
padding: 0.4em 0.6em;
background-color: var(--dark-bg-tertiary) !important;
/* Match other secondary elements */
color: var(--text-secondary-dark) !important;
border: 1px solid var(--dark-border-subtle);
}
.active-filters-mobile .badge a.text-white {
/* Ensure x is visible */
color: var(--text-secondary-dark) !important;
}
.active-filters-mobile .badge a.text-white:hover {
color: var(--brand-purple-light) !important;
}
.active-filters-mobile strong {
color: var(--text-primary-dark);
}
/* --- Offcanvas Filter & Sort Menu --- */
.offcanvas {
background-color: var(--dark-bg-secondary);
/* Already styled, ensure it's consistent */
color: var(--text-primary-dark);
/* border-right: 2px solid var(--brand-purple-base); Remove if offcanvas-start */
border-left: 2px solid var(--brand-purple-base);
/* For offcanvas-end if you switch */
}
.offcanvas-header {
border-bottom: 1px solid var(--dark-border-strong);
background-color: var(--dark-bg-tertiary);
/* Header distinct from body */
}
.offcanvas-header .offcanvas-title {
color: var(--brand-purple-light);
/* Brand color for title */
}
.offcanvas-body .offcanvas-filter-title {
/* Common style for filter section titles */
color: var(--brand-purple-light);
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--dark-border-subtle);
}
.offcanvas-body .list-group-item {
background-color: transparent;
color: var(--text-secondary-dark);
border: none;
/* Cleaner look for list items in offcanvas */
padding: 0.6rem 0.5rem;
/* Adjust padding */
border-radius: 0.25rem;
/* Add some rounding */
margin-bottom: 0.25rem;
/* Space between items */
}
.offcanvas-body .list-group-item:hover {
background-color: rgba(138, 43, 226, 0.15);
/* Brighter hover */
color: var(--brand-purple-highlight);
}
/* Consistent active state for filters and sort in offcanvas */
.offcanvas-body .list-group-item.active-dashed {
background-color: rgba(138, 43, 226, 0.2) !important;
/* More subtle active state */
color: var(--brand-purple-highlight) !important;
font-weight: 500;
border-left: 3px solid var(--brand-purple-base) !important;
}
.offcanvas-body .category-link.active-dashed .badge,
.offcanvas-body .difficulty-link.active-dashed .badge {
/* If badges exist */
background-color: var(--brand-purple-highlight) !important;
color: var(--dark-bg-primary) !important;
}
/* Ensure desktop filter sidebar active states are distinct if needed */
.sticky-sidebar .list-group-item.active-difficulty,
.sticky-sidebar .list-group-item.active-category {
background-color: var(--brand-purple-base) !important;
color: white !important;
border-color: var(--brand-purple-base) !important;
}
hr.bright-divider {
/* Ensure visibility */
border-top: 1px solid var(--brand-purple-medium);
opacity: 0.75;
}
/* --- Sleeker Quiz Card Styling --- */
/* static/css/style.css */
/* ... (your existing theme variables and other styles) ... */
/* --- Sleeker Compact Quiz Card Styling (Modified for Density) --- */
.quiz-card-compact {
background-color: var(--dark-bg-secondary);
/* Darker background */
border: 1px solid var(--dark-border-subtle);
border-radius: 0.5rem;
transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out;
overflow: hidden;
}
.quiz-card-compact .card-body {
padding: 0.6rem;
/* Denser padding */
}
/* Avatar Styling */
.quiz-card-author-avatar {
width: 24px;
height: 24px;
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--dark-border-subtle);
}
/* Font Size Adjustments */
.quiz-card-compact .quiz-card-title a.stretched-link {
font-size: 1.1rem;
/* Slightly smaller title */
font-weight: 500;
line-height: 1.2;
}
.quiz-card-compact .quiz-card-author {
font-size: 0.75rem;
/* Smaller author text */
}
.quiz-card-compact .quiz-card-stats {
font-size: 0.75rem;
/* Smaller stats text */
}
.quiz-card-compact .quiz-card-play-btn.btn-sm {
font-size: 0.75rem;
padding: 0.2rem 0.5rem !important;
}
/* Responsive Font Sizes (YouTube-like) */
@media (max-width: 767.98px) {
.quiz-card-compact .quiz-card-title a.stretched-link {
font-size: 1rem;
/* Smaller title on mobile */
}
.quiz-card-compact .quiz-card-author,
.quiz-card-compact .quiz-card-stats {
font-size: 0.7rem;
/* Even smaller text on mobile */
}
}
.quiz-card-compact:hover {
transform: translateY(-6px);
box-shadow: 0 10px 30px rgba(138, 43, 226, 0.25);
border-color: var(--brand-purple-medium);
}
.quiz-card-compact .quiz-card-image-container {
position: relative;
}
.quiz-card-compact .quiz-card-thumbnail {
display: block;
/* Important to remove any default bottom space of inline images */
width: 100%;
/* Make image responsive within its container */
height: auto;
/* <<< KEY FIX FOR THUMBNAIL: Let height be automatic to maintain aspect ratio */
aspect-ratio: 16 / 9;
/* <<< OPTIONAL BUT RECOMMENDED: Enforce a 16:9 aspect ratio */
object-fit: cover;
/* If using aspect-ratio, cover will ensure it fills without distortion */
/* If you DON'T want aspect-ratio and want the image's natural height:
remove aspect-ratio and ensure no fixed height is set on this element or its parent link.
Keep object-fit: cover; or change to object-fit: contain; if you want to see the whole image
even if it means letterboxing.
*/
border-bottom: 1px solid var(--dark-bg-secondary);
/* Subtle separator */
}
.quiz-card-compact .quiz-card-overlay-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0.4rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
/* Mature Difficulty Badge */
.quiz-card-compact .difficulty-badge-overlay {
font-size: 0.7rem !important;
padding: 0.2em 0.45em !important;
font-weight: 500;
letter-spacing: 0.3px;
border-radius: 0.2rem;
text-transform: uppercase;
opacity: 0.9;
/* Increased opacity slightly */
border: none;
/* Removing border from overlay badge for cleaner look */
/* Colors are set by specific difficulty classes below */
}
.quiz-card-compact .difficulty-badge-overlay.difficulty-easy {
background-color: rgba(42, 157, 143, 0.8);
color: #e0f2f1;
}
.quiz-card-compact .difficulty-badge-overlay.difficulty-medium {
background-color: rgba(233, 196, 106, 0.8);
color: #3e300a;
}
.quiz-card-compact .difficulty-badge-overlay.difficulty-hard {
background-color: rgba(231, 111, 81, 0.8);
color: #fce8e3;
}
.quiz-card-compact .difficulty-badge-overlay.difficulty-expert {
background-color: rgba(106, 0, 138, 0.8);
color: var(--brand-purple-highlight);
}
.quiz-card-compact .quiz-card-actions .btn.no-arrow {
background-color: rgba(28, 29, 46, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-primary-dark);
padding: 0.15rem 0.3rem;
}
.quiz-card-compact .quiz-card-actions .btn.no-arrow:hover,
.quiz-card-compact .quiz-card-actions .btn.no-arrow:focus {
background-color: rgba(42, 44, 65, 0.8);
color: var(--brand-purple-highlight);
}
.quiz-card-compact .quiz-card-actions .btn.no-arrow i {
font-size: 1rem;
}
.quiz-card-compact .card-body {
padding: 0.75rem;
/* Slightly increased from p-2 for a bit more breathing room */
}
.quiz-card-compact .quiz-card-title {
/* Targeting the
or */
margin-bottom: 0.25rem !important;
/* <<< KEY FIX FOR GAPS: Reduce margin below title */
}
.quiz-card-compact .quiz-card-title a.stretched-link {
color: var(--text-primary-dark);
font-weight: 600;
/* Make title stand out more */
font-size: 1.3rem;
/* Adjusted size */
line-height: 1.3;
min-height: 0;
/* Remove min-height if title is short */
/* -webkit-line-clamp: 2; Remove if you prefer not to clamp and just truncate */
/* -webkit-box-orient: vertical; */
/* overflow: hidden; */
/* text-overflow: ellipsis; */
}
.quiz-card-compact:hover .quiz-card-title a.stretched-link {
color: var(--brand-purple-light);
}
.quiz-card-compact .quiz-card-author {
font-size: 0.8rem;
color: var(--text-secondary-dark);
margin-bottom: 0.5rem !important;
/* <<< KEY FIX FOR GAPS: Reduce margin below author */
}
.quiz-card-compact .quiz-card-categories {
margin-bottom: 0.75rem !important;
/* <<< KEY FIX FOR GAPS: Reduce margin below categories */
}
.quiz-card-compact .quiz-card-categories .badge {
font-size: 0.65rem;
padding: 0.25em 0.4em;
}
.quiz-card-compact .quiz-card-footer-info {
border-top: 1px solid var(--dark-border-subtle);
padding-top: 0.5rem;
/* Reduced space above footer */
margin-top: auto;
/* Ensures footer is pushed to bottom if content above is short */
}
.quiz-card-compact .quiz-card-stats {
font-size: 0.8rem;
/* Increased slightly for better readability */
color: var(--text-secondary-dark);
display: inline-flex;
align-items: center;
}
.quiz-card-compact .quiz-card-stats i {
color: var(--text-secondary-dark);
/* Icons match text color for subtlety */
font-size: 0.95em;
/* Slightly larger icons */
margin-right: 0.2rem !important;
}
.quiz-card-compact .quiz-card-stats .mx-1 {
/* For the dot separator */
margin-left: 0.4rem !important;
margin-right: 0.4rem !important;
}
.quiz-card-compact .quiz-card-play-btn.btn-sm {
font-size: 0.8rem;
padding: 0.25rem 0.6rem !important;
}
.quiz-card-compact .quiz-card-play-btn i {
font-size: 1rem;
}
.fs-08rem {
font-size: 0.8rem !important;
}
/* --- Homepage Specific Quiz Card Styles --- */
.homepage-quiz-cards .quiz-card-compact .quiz-card-thumbnail {
height: 190px;
/* Example: Slightly taller thumbnails on homepage */
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-title a.stretched-link {
font-size: 1.3rem;
/* Example: Slightly larger title on homepage */
}
.homepage-quiz-cards .quiz-card-compact .card-body {
padding: 0.7rem;
/* Example: Different padding */
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-title {
/* Targeting the or */
margin-bottom: 0.25rem !important;
/* <<< KEY FIX FOR GAPS: Reduce margin below title */
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-title a.stretched-link {
color: var(--text-primary-dark);
font-weight: 600;
/* Make title stand out more */
font-size: 1.3rem;
/* Adjusted size */
line-height: 1.3;
min-height: 0;
/* Remove min-height if title is short */
/* -webkit-line-clamp: 2; Remove if you prefer not to clamp and just truncate */
/* -webkit-box-orient: vertical; */
/* overflow: hidden; */
/* text-overflow: ellipsis; */
}
.homepage-quiz-cards .quiz-card-compact:hover .quiz-card-title a.stretched-link {
color: var(--brand-purple-light);
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-author {
font-size: 1rem;
color: var(--text-secondary-dark);
margin-bottom: 0.5rem !important;
/* <<< KEY FIX FOR GAPS: Reduce margin below author */
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-categories {
margin-bottom: 0.75rem !important;
/* <<< KEY FIX FOR GAPS: Reduce margin below categories */
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-categories .badge {
font-size: 0.8rem;
padding: 0.25em 0.4em;
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-footer-info {
border-top: 1px solid var(--dark-border-subtle);
padding-top: 0.5rem;
/* Reduced space above footer */
margin-top: auto;
/* Ensures footer is pushed to bottom if content above is short */
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-stats {
font-size: 0.9rem;
/* Increased slightly for better readability */
color: var(--text-secondary-dark);
display: inline-flex;
align-items: center;
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-stats i {
color: var(--text-secondary-dark);
/* Icons match text color for subtlety */
font-size: 0.95em;
/* Slightly larger icons */
margin-right: 0.2rem !important;
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-stats .mx-1 {
/* For the dot separator */
margin-left: 0.4rem !important;
margin-right: 0.4rem !important;
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-play-btn.btn-sm {
font-size: 0.8rem;
padding: 0.25rem 0.6rem !important;
}
.homepage-quiz-cards .quiz-card-compact .quiz-card-play-btn i {
font-size: 1rem;
}
.homepage-quiz-cards .fs-08rem {
font-size: 0.8rem !important;
}
/* --- Quiz Listing Page Specific Card Styles --- */
.quiz-listing-page-cards .quiz-card-compact .quiz-card-thumbnail {
height: 190px;
/* Example: Even more compact thumbnails on list page */
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-title a.stretched-link {
font-size: 1.2rem;
/* Example: Smaller title on list page */
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-author {
font-size: 0.9rem;
color: var(--text-secondary-dark);
margin-bottom: 0.5rem !important;
/* <<< KEY FIX FOR GAPS: Reduce margin below author */
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-categories {
margin-bottom: 0.75rem !important;
/* <<< KEY FIX FOR GAPS: Reduce margin below categories */
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-categories .badge {
font-size: 0.8rem;
padding: 0.25em 0.4em;
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-footer-info {
border-top: 1px solid var(--dark-border-subtle);
padding-top: 0.5rem;
/* Reduced space above footer */
margin-top: auto;
/* Ensures footer is pushed to bottom if content above is short */
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-stats {
font-size: 0.9rem;
/* Increased slightly for better readability */
color: var(--text-secondary-dark);
display: inline-flex;
align-items: center;
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-stats i {
color: var(--text-secondary-dark);
/* Icons match text color for subtlety */
font-size: 0.95em;
/* Slightly larger icons */
margin-right: 0.2rem !important;
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-stats .mx-1 {
/* For the dot separator */
margin-left: 0.4rem !important;
margin-right: 0.4rem !important;
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-play-btn.btn-sm {
font-size: 1rem;
padding: 0.25rem 0.6rem !important;
}
.quiz-listing-page-cards .quiz-card-compact .quiz-card-play-btn i {
font-size: 1rem;
}
.quiz-listing-page-cards .fs-08rem {
font-size: 0.8rem !important;
}
/* --- Offcanvas Filter & Sort Menu Refinements --- */
.offcanvas-body .offcanvas-filter-title {
color: var(--brand-purple-light);
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--dark-border-subtle);
font-weight: 600;
}
.offcanvas-body .filter-form .form-select {
background-color: var(--dark-bg-tertiary);
color: var(--text-primary-dark);
border: 1px solid var(--dark-border-strong);
}
.offcanvas-body .filter-form .form-select:focus {
border-color: var(--brand-purple-base);
box-shadow: 0 0 0 0.2rem rgba(138, 43, 226, 0.25);
}
.quiz-detail-header-hero {
background-color: var(--dark-bg-secondary);
/* Or a subtle gradient */
border: 1px solid var(--dark-border-strong);
position: relative;
/* For potential pseudo-elements */
color: var(--text-primary-dark);
background-image: linear-gradient(to right, var(--dark-bg-secondary), var(--dark-bg-tertiary));
padding: 15px !important;
}
.quiz-title-main {
color: var(--brand-purple-highlight);
/* Make title pop */
margin-bottom: 0.5rem;
text-shadow: 0 0 10px rgba(224, 195, 252, 0.3), 0 0 20px rgba(138, 43, 226, 0.2);
/* Subtle glow */
/* --- NEW: Overflow Handling --- */
overflow-wrap: break-word;
/* Allows breaking long words if they would overflow */
word-wrap: break-word;
/* Older alias for overflow-wrap */
/* More aggressive: will break words anywhere to prevent overflow */
/* Use 'break-word' if you prefer to only break between words if possible,
then break within words only if necessary.
'break-all' is more forceful for strings like "dddddd..." */
/* Optional: Hyphenation (browser support varies, and needs lang attribute on ) */
/* Ensure it doesn't push other elements too far if it wraps to many lines */
line-height: 1.2;
/* Adjust if it looks too cramped when wrapped */
}
.quiz-meta-hero {
gap: 0.5rem 1rem;
/* Spacing between meta items */
}
.quiz-meta-hero span,
.quiz-meta-hero a.badge {
font-size: 0.9rem;
display: inline-flex;
align-items: center;
}
.quiz-meta-hero .badge {
/* Badges in hero */
padding: 0.4em 0.7em;
font-weight: 500;
}
.category-badge-hero {
background-color: var(--brand-purple-base) !important;
color: white !important;
border: 1px solid var(--brand-purple-light);
}
.difficulty-badge-hero {
/* Uses existing difficulty-badge styles */
border: 1px solid currentColor;
color: white;
/* Ensure text is white for better contrast on colored bg */
border: none;
/* Remove border if color itself is enough distinction */
font-weight: 500;
padding: 0.3em 0.6em !important;
/* Override if needed */
}
/* Specific colors (these should match your global difficulty badge styles) */
.difficulty-badge-hero.difficulty-easy {
background-color: var(--success-dark) !important;
color: #212529 !important;
}
.difficulty-badge-hero.difficulty-medium {
background-color: var(--warning-dark) !important;
color: #212529 !important;
}
/* Dark text for yellow */
.difficulty-badge-hero.difficulty-hard {
background-color: var(--danger-dark) !important;
color: #212529 !important;
}
.difficulty-badge-hero.difficulty-expert {
background-color: var(--brand-purple-deep) !important;
}
.quiz-meta-hero .text-muted i {
color: var(--brand-purple-medium);
/* Color for icons in meta */
}
.quiz-actions-hero .btn-group .btn,
.quiz-actions-hero .dropdown .btn {
margin-bottom: 0.25rem;
/* Prevent buttons from being too squished if they wrap */
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
}
.quiz-actions-hero .dropdown .btn.no-arrow {
background-color: var(--dark-bg-tertiary);
border-color: var(--dark-border-subtle);
color: var(--text-secondary-dark);
}
.quiz-actions-hero .dropdown .btn.no-arrow:hover {
background-color: var(--dark-bg-primary);
color: var(--brand-purple-light);
}
.quiz-detail-thumbnail {
border-radius: 0.375rem 0 0 0.375rem;
/* Rounded left corners */
max-height: 380px;
/* Increased max height */
width: 100%;
object-fit: cover;
}
@media (max-width: 767.98px) {
/* On mobile, image on top */
.quiz-detail-thumbnail {
border-right: none;
border-bottom: 1px solid var(--dark-border-subtle);
max-height: 280px;
border-top-left-radius: calc(0.375rem - 1px);
/* Match card rounding */
border-top-right-radius: calc(0.375rem - 1px);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-radius: 0.375rem 0.375rem 0 0;
/* Rounded top corners on mobile */
}
.img-fluid.rounded-start {
/* Bootstrap class needs override for mobile */
border-top-left-radius: calc(0.375rem - 1px) !important;
border-bottom-left-radius: 0 !important;
}
.quiz-title-main {
font-size: 1.5rem;
/* Adjust display size for mobile */
}
.quiz-meta-hero {
justify-content: center !important;
/* Force center on mobile */
gap: 0.4rem 0.8rem;
font-size: 0.9em;
}
.quiz-meta-hero .meta-item {
font-size: 0.8rem;
background-color: rgba(42, 44, 65, 0.4);
/* Slightly more transparent */
padding: 0.25rem 0.2.5rem;
border-radius: 0.2rem;
white-space: nowrap;
/* Prevent individual meta items from wrapping if possible */
}
.quiz-actions-hero {
margin-top: 1rem;
/* Add space above actions on mobile */
text-align: center !important;
/* Force center actions on mobile */
}
.quiz-actions-hero .btn-group {
margin-bottom: 0.5rem;
/* Space below creator buttons if they wrap */
}
}
.quiz-detail-description {
font-size: 0.95rem;
/* Slightly smaller than lead, but readable */
line-height: 1.7;
color: var(--text-primary-dark);
/* Brighter than secondary for readability */
}
.quiz-meta-body {
/* For status, created date under description */
font-size: 0.85rem;
}
.quiz-meta-body strong {
color: var(--text-primary-dark);
}
.quiz-meta-body p {
color: var(--text-secondary-dark);
}
.quiz-play-footer {
background-color: var(--dark-bg-secondary) !important;
/* Distinct footer for play button */
border-top: 1px solid var(--dark-border-strong) !important;
}
.quiz-play-footer .btn-brand-purple {
font-size: 1.1rem;
/* Make play button prominent */
padding: 0.75rem 1.5rem;
}
/* Sidebar card styling (can reuse some card styles) */
.sticky-sidebar .card {
/* Existing card styles apply, can add specific overrides here */
}
.sticky-sidebar .card-header {
font-size: 1.1rem;
/* Make sidebar headers slightly larger */
}
.sticky-sidebar .card-header i {
/* Icons in sidebar headers */
font-size: 1rem;
/* Match text better */
}
.quiz-meta-hero .meta-item {
font-size: 0.9rem;
color: var(--text-secondary-dark);
display: inline-flex;
align-items: center;
background-color: rgba(42, 44, 65, 0.3);
/* var(--dark-bg-tertiary with alpha) */
padding: 0.25rem 0.25rem !important;
border-radius: 0.25rem;
transition: background-color 0.2s ease;
}
.quiz-meta-hero .meta-item:hover {
background-color: rgba(42, 44, 65, 0.6);
}
.quiz-meta-hero .meta-item i {
color: var(--brand-purple-medium);
margin-right: 0.4rem;
font-size: 1em;
/* Relative to parent span */
}
.quiz-meta-hero .creator-link {
color: var(--text-primary-dark);
font-weight: 500;
}
.quiz-meta-hero .creator-link:hover {
color: var(--brand-purple-light);
}
/* Give outline buttons in hero a bit more pop */
.quiz-actions-hero .btn-outline-warning {
border-color: var(--warning-dark);
color: var(--warning-dark);
}
.quiz-actions-hero .btn-outline-warning:hover {
background-color: var(--warning-dark);
color: #212529;
}
.quiz-actions-hero .btn-outline-success {
border-color: var(--success-dark);
color: var(--success-dark);
}
.quiz-actions-hero .btn-outline-success:hover {
background-color: var(--success-dark);
color: white;
}
.quiz-actions-hero .btn-outline-info {
border-color: var(--info-dark);
color: var(--info-dark);
}
.quiz-actions-hero .btn-outline-info:hover {
background-color: var(--info-dark);
color: white;
}
.quiz-actions-hero .btn-outline-danger {
border-color: var(--danger-dark);
color: var(--danger-dark);
}
.quiz-actions-hero .btn-outline-danger:hover {
background-color: var(--danger-dark);
color: white;
}
.sidebar-widget .card-header i {
font-size: 0.9em;
/* Align icon size with header */
opacity: 0.8;
}
.sidebar-widget .list-group-item {
background-color: transparent;
/* Let card bg show through */
padding: 0.6rem 1rem;
/* Adjust padding */
}
.sidebar-widget .list-group-item:hover {
background-color: rgba(138, 43, 226, 0.05);
/* Very subtle purple hover */
}
.three-dots-btn {
background-color: var(--dark-bg-tertiary) !important;
border-color: var(--dark-border-strong) !important;
color: var(--text-secondary-dark) !important;
transition: all 0.2s ease;
}
.three-dots-btn:hover,
.three-dots-btn:focus {
background-color: var(--dark-bg-primary) !important;
color: var(--brand-purple-highlight) !important;
border-color: var(--brand-purple-base) !important;
box-shadow: 0 0 8px rgba(138, 43, 226, 0.3);
}
.three-dots-btn i {
transition: transform 0.2s ease;
}
.three-dots-btn:hover i {
transform: scale(1.1);
}
/* --- Enhanced "About The Creator" Widget --- */
.sidebar-widget.creator-widget .card-body {
padding-top: 1.5rem;
/* More space above avatar */
}
.creator-avatar {
width: 100px !important;
/* Override inline style if needed, or control from template */
height: 100px !important;
object-fit: cover;
border: 3px solid var(--brand-purple-base);
/* Brand color border */
margin-bottom: 0.75rem !important;
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.2);
/* Subtle purple glow */
}
.creator-name a {
color: var(--text-primary-dark);
font-weight: 600;
font-size: 1.2rem;
}
.creator-name a:hover {
color: var(--brand-purple-light);
}
.creator-bio {
font-size: 0.85rem;
line-height: 1.6;
padding: 0 0.5rem;
/* Slight horizontal padding for bio text */
}
.creator-stats {
border-top: 1px solid var(--dark-border-subtle);
border-bottom: 1px solid var(--dark-border-subtle);
padding: 0.75rem 0;
}
.creator-stats>div {
/* Each stat block */
flex: 1;
/* Distribute space evenly */
}
.creator-stats .stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--brand-purple-light);
line-height: 1.1;
}
.creator-stats .stat-label {
font-size: 0.7rem;
text-transform: uppercase;
color: var(--text-secondary-dark);
letter-spacing: 0.5px;
}
.creator-social-links .btn-sm {
/* If you add social links */
width: 32px;
height: 32px;
font-size: 0.9rem;
}
.view-creator-quizzes-btn {
font-weight: 500;
/* Uses .btn-outline-brand-purple styles */
}
.view-creator-quizzes-btn:hover {
/* Uses .btn-outline-brand-purple:hover styles */
letter-spacing: 0.3px;
/* Subtle effect on hover */
color: white !important;
}
/* Ensure sidebar card headers have consistent styling */
.sidebar-widget {
background-color: var(--dark-bg-secondary);
}
.sidebar-widget .card-header {
background-color: var(--dark-bg-tertiary);
border-bottom: 1px solid var(--dark-border-strong);
font-size: 1rem;
color: var(--brand-purple-light);
padding: 0.6rem 1rem;
/* Adjust padding */
}
.sidebar-widget .card-header i {
font-size: 0.9em;
opacity: 0.9;
}
.quiz-result-header {
background-color: var(--dark-bg-secondary) !important;
/* Match other headers */
border-bottom: 1px solid var(--dark-border-strong) !important;
}
.quiz-result-header .display-6 .text-primary {
color: var(--brand-purple-light) !important;
/* Brand color for quiz title */
}
/* Result page action buttons area */
.result-actions .btn-lg {
font-size: 1rem;
/* Adjust size of action buttons if needed */
padding: 0.6rem 1.2rem;
}
.result-actions .btn-info {
/* Style for the share button */
/* Uses your theme's .btn-info from previous styling */
/* You can override if needed: */
/* background-color: var(--info-dark); */
/* border-color: var(--info-dark); */
/* color: white; */
}
.result-actions .btn-info:hover {
/* background-color: #3b6a88; */
/* Darker info for hover */
}
/* New Metadata Grid Styling */
.quiz-meta-grid {
font-size: 0.9rem;
color: var(--text-secondary-dark);
}
.meta-grid-item {
padding: 0.5rem 0;
/* Vertical spacing */
display: flex;
align-items: center;
border-bottom: 1px solid var(--dark-border-subtle);
}
.quiz-meta-grid .row {
/* Remove bottom border from last row of items */
--bs-gutter-x: 1.5rem;
}
.meta-grid-item:nth-last-child(-n+2) {
/* Target last two items in a 2-col grid */
border-bottom: none;
}
@media (max-width: 575.98px) {
/* On mobile, only last item has no border */
.meta-grid-item:nth-last-child(-n+2) {
border-bottom: 1px solid var(--dark-border-subtle);
}
.meta-grid-item:last-child {
border-bottom: none;
}
}
.meta-grid-item i {
color: var(--brand-purple-medium);
margin-right: 0.75rem;
font-size: 1.1rem;
width: 20px;
/* Align icons */
}
.meta-grid-item strong {
color: var(--text-primary-dark);
margin-right: 0.5rem;
}
.meta-grid-item .badge {
/* Badges for difficulty/category */
font-size: 0.8rem;
vertical-align: middle;
}
/* --- Profile Header Mobile --- */
@media (max-width: 767.98px) {
.profile-header-card .card-body {
flex-direction: column;
text-align: center;
background-color: var(--dark-bg-secondary) !important;
}
.profile-header-card img {
margin-right: 0;
margin-bottom: 1rem;
}
.profile-header-card .d-flex.justify-content-center.gap-3.mt-3 {
flex-direction: column;
gap: 0.5rem !important;
}
}
.profile-header-card .card-body {
flex-direction: column;
text-align: center;
background-color: var(--dark-bg-secondary) !important;
}
/* static/css/style.css */
/* --- Quiz Detail Page Final Polish --- */
.quiz-detail-title-header {
/* Remove the background and border to make it feel like a page header, not a box */
background: none !important;
border: none !important;
box-shadow: none !important;
}
.quiz-title-main {
/* Keep previous styles (color, shadow, word-break) */
}
/* Bright divider below the main title */
hr.bright-divider {
border-top: 1px solid var(--brand-purple-medium);
opacity: 0.75;
}
/* Container for actions in the header */
.quiz-detail-title-header .d-flex {
min-height: 38px;
/* Give it a minimum height so it doesn't look empty if no actions are present */
}
/* This is the same main content card as before, but ensure thumbnail
and info block are balanced */
.quiz-main-content-card {
background-color: var(--dark-bg-secondary);
border: 1px solid var(--dark-border-strong);
position: relative;
z-index: 10;
}
.quiz-info-section .quiz-info-title {
color: var(--brand-purple-light);
font-weight: 600;
margin-bottom: 0.5rem;
}
/* --- Refined Metadata Grid Styling --- */
.quiz-meta-grid-compact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* Responsive columns */
gap: 0.5rem 1rem;
/* Row and column gap */
font-size: 0.85rem;
color: var(--text-secondary-dark);
margin-top: 1rem !important;
/* Ensure spacing */
padding-top: 1rem;
border-top: 1px solid var(--dark-border-subtle);
}
.meta-grid-item-compact {
display: flex;
align-items: center;
min-height: 28px;
/* Ensure consistent height for items */
/* margin-bottom is no longer needed due to grid gap */
}
.meta-grid-item-compact i {
color: var(--brand-purple-medium);
margin-right: 0.6rem;
font-size: 1.1rem;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.meta-grid-item-compact .creator-link {
color: var(--text-primary-dark) !important;
/* Brighter for a name */
font-weight: 500;
text-decoration: none;
}
.meta-grid-item-compact .creator-link:hover {
color: var(--brand-purple-light) !important;
}
/* This targets the tags item specifically if we need to adjust it */
.tags-meta-item {
align-items: flex-start;
/* Align icon to the top if tags wrap */
}
.tags-meta-item i {
margin-top: 0.2rem;
/* Align icon better with first line of tags */
}
.tags-meta-item .badge {
/* Hashtag badges in the grid */
font-size: 0.8rem;
padding: 0.3em 0.5em;
font-weight: 500;
}
/* Ensure other badges in this section are styled nicely */
.meta-grid-item-compact .badge {
vertical-align: middle;
}
.quiz-detail-thumbnail-wrapper .bi-three-dots-vertical {
/* --- CHANGE THIS VALUE --- */
background-color: rgba(0, 0, 0, 0.4) !important;
/* Darker, 40% opaque black */
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: white !important;
/* Keep the dots white */
z-index: 2;
padding: 0.1rem 0.25rem !important;
}
.quiz-detail-thumbnail-wrapper .bi-three-dots-vertical:hover {
background-color: rgba(0, 0, 0, 0.6) !important;
/* Slightly more opaque on hover */
color: var(--brand-purple-highlight) !important;
/* Keep the nice purple highlight on hover */
}
/* --- Form Character Counter --- */
.char-counter {
transition: color 0.2s ease-in-out;
}
/* Hashtag badge on quiz card */
.hashtag-badge-card {
background-color: rgba(69, 123, 157, 0.2) !important;
/* Muted info color */
color: var(--info-dark) !important;
font-weight: 500;
font-size: 0.7rem;
padding: 0.3em 0.5em;
text-decoration: none;
border-radius: 0.25rem;
}
.hashtag-badge-card:hover {
background-color: rgba(69, 123, 157, 0.4) !important;
color: white !important;
}
/* Hashtag badge on detail page */
.hashtag-badge {
background-color: var(--dark-bg-tertiary) !important;
color: var(--info-dark) !important;
border: 1px solid var(--info-dark);
font-weight: 500;
font-size: 0.85rem;
padding: 0.35em 0.6em;
text-decoration: none;
}
.hashtag-badge:hover {
background-color: var(--info-dark) !important;
color: white !important;
}
/* --- Quiz Play Page Enhancements --- */
.quiz-play-page .card-header {
/* You can add .quiz-play-page to the container in the template */
background-color: var(--dark-bg-tertiary) !important;
color: var(--text-primary-dark);
}
.question-media-container {
border-bottom: 1px solid var(--dark-border-subtle);
}
/* Hide the actual radio button and checkbox */
.quiz-choice-item .form-check-input {
display: none;
}
/* Style the label as a large, clickable block */
.quiz-choice-item .form-check-label {
display: flex;
/* Use flexbox for alignment */
align-items: center;
width: 100%;
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
border: 2px solid var(--dark-border-subtle);
border-radius: 0.5rem;
background-color: var(--dark-bg-tertiary);
color: var(--text-secondary-dark);
font-size: 1.05rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
/* For positioning the check icon */
}
/* Hover effect */
.quiz-choice-item .form-check-label:hover {
border-color: var(--brand-purple-medium);
background-color: var(--dark-bg-secondary);
color: var(--text-primary-dark);
}
/* Custom check icon inside the label */
.quiz-choice-item .check-icon {
position: absolute;
right: 1.25rem;
font-size: 1.5rem;
color: var(--success-dark);
opacity: 0;
/* Hidden by default */
transform: scale(0.5);
transition: all 0.2s ease-in-out;
}
/* --- The Magic: Styling the selected state --- */
/* Use the :checked pseudo-selector on the hidden input to style its sibling label */
.quiz-choice-item .form-check-input:checked+.form-check-label {
background-color: rgba(138, 43, 226, 0.15);
/* Faint purple background */
border-color: var(--brand-purple-base);
/* Strong purple border */
color: var(--brand-purple-highlight);
/* Brighter text */
box-shadow: 0 0 15px rgba(138, 43, 226, 0.2);
/* Subtle glow */
animation: popIn 0.3s ease;
}
@keyframes popIn {
0% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
/* Show the check icon when the input is checked */
.quiz-choice-item .form-check-input:checked+.form-check-label .check-icon {
opacity: 1;
transform: scale(1);
}
/* Invalid feedback styling */
.question-card.border-danger .invalid-feedback {
display: block;
/* Show the feedback message */
color: var(--danger-dark);
}
/* --- Custom Error Page Styling --- */
.error-page-container {
padding: 2rem;
background-color: var(--dark-bg-secondary);
border-radius: 0.5rem;
border: 1px solid var(--dark-border-subtle);
}
.error-code-wrapper {
position: relative;
display: inline-block;
}
h1.error-code-main {
font-size: 8rem;
font-weight: 900;
line-height: 1;
margin: 0;
color: var(--dark-bg-tertiary);
/* Make numbers dark, like they are "cut out" */
text-shadow:
-1px -1px 0 var(--dark-border-strong),
1px -1px 0 var(--dark-border-strong),
-1px 1px 0 var(--dark-border-strong),
1px 1px 0 var(--dark-border-strong);
/* Outline effect */
}
.error-icon {
font-size: 4rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.8;
color: var(--brand-purple-base);
/* Default icon color */
text-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
/* Icon glow */
}
.error-page-container h2 {
color: var(--text-primary-dark);
}
.error-page-container .lead {
color: var(--text-secondary-dark);
font-size: 1.1rem;
}
.error-page-container .btn-lg {
font-size: 1rem;
padding: 0.75rem 1.5rem;
}
/* --- Profile Edit Page - Cropperjs UI Fixes & Styling --- */
/* This is the container for the image being cropped.
It needs to be a block element for Cropper.js to measure correctly. */
.img-crop-container {
display: block;
max-height: 50vh;
/* Constrain height to 50% of viewport height */
width: 100%;
}
.img-crop-container>img {
/* Cropper.js will hide the original image and create its own canvas.
This ensures the original doesn't interfere. */
display: block;
max-width: 100%;
}
/* Make the Cropper.js generated canvas responsive */
.cropper-container {
width: 100% !important;
max-width: 100%;
}
/* Style the control buttons */
.cropper-controls .cropper-action-btn {
background-color: var(--dark-bg-action-button);
border: 1px solid var(--dark-border-action-button);
color: var(--text-secondary-dark);
/* Use secondary text color for icons */
transition: all 0.2s ease;
}
.cropper-controls .cropper-action-btn:hover,
.cropper-controls .cropper-action-btn:focus {
background-color: var(--dark-bg-secondary);
color: var(--brand-purple-light);
/* Highlight with brand color on hover */
border-color: var(--brand-purple-base);
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.cropper-controls .btn-group .btn {
/* Ensure no weird spacing between buttons in the group */
margin: 0 !important;
}
/* --- Override Cropper.js default styles for dark theme --- */
/* The crop box outline and grid */
.cropper-view-box,
.cropper-face {
outline-color: var(--brand-purple-base);
}
.cropper-dashed {
border-color: rgba(224, 195, 252, 0.5);
/* Use a light purple for the dashed lines */
}
/* The drag handles */
.cropper-point {
background-color: var(--brand-purple-light);
opacity: 1;
width: 10px;
/* Make handles a bit bigger */
height: 10px;
}
.cropper-line {
background-color: var(--brand-purple-light);
opacity: 1;
}
/* The modal background behind the crop box */
.cropper-modal {
background-color: #000;
opacity: 0.6;
/* Dark semi-transparent overlay */
}
#div_id_profile_picture input[type="file"] {
display: none;
}
/* Style the label to look like a button */
#div_id_profile_picture label.btn {
/* Uses your existing .btn .btn-outline-secondary styles */
cursor: pointer;
}
/* Modal-specific styles */
#cropperModal .modal-dialog {
max-width: 800px;
/* Wider modal for better cropping */
}
#cropperModal .modal-body {
padding: 1rem;
background-color: var(--dark-bg-primary);
}
#cropperModal .img-crop-container {
width: 100%;
max-height: 75vh;
}
#cropperModal img {
max-width: 100%;
}
#cropperModal .modal-footer {
display: flex;
justify-content: space-between;
/* Pushes controls left and actions right */
align-items: center;
}
.cropper-action-btn {
/* Re-style buttons for modal context */
background-color: var(--dark-bg-action-button);
border: 1px solid var(--dark-border-action-button);
color: var(--text-secondary-dark);
}
.cropper-action-btn:hover {
background-color: var(--dark-bg-secondary);
color: var(--brand-purple-light);
}
/* Live preview on the main page */
.profile-pic-preview {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--dark-border-strong);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* --- Enhanced Quiz Play Page Styling --- */
.quiz-play-title {
color: var(--brand-purple-highlight);
}
.progress-container .progress-bar {
background-image: var(--brand-purple-gradient);
transition: width 0.4s ease-in-out;
box-shadow: 0 0 10px var(--brand-purple-base), 0 0 20px var(--brand-purple-light);
}
.question-slide {
/* Base styles for the slide container */
}
/* Fade In/Out Animations for Slides */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
}
.question-slide.fade-in-active {
animation: fadeIn 0.3s ease-in-out forwards;
}
.question-slide.fade-out-active {
animation: fadeOut 0.2s ease-in-out forwards;
}
.quiz-play-container .question-card {
border: none;
/* Let the container handle the visual look */
}
.quiz-play-container .question-card .card-body {
padding: 1.5rem 2rem;
/* More padding inside card */
}
/* Your existing quiz-choice-item styles are great and should be kept */
.quiz-choice-item .form-check-label {
/* ... your existing styles for this ... */
}
.quiz-choice-item .form-check-input:checked+.form-check-label {
/* ... your existing styles for selected choices ... */
}
/* Review Slide Styling */
.review-card .card-header {
background-color: var(--dark-bg-tertiary);
color: var(--brand-purple-light);
font-size: 1.2rem;
}
#review-summary-list .list-group-item {
background-color: var(--dark-bg-tertiary);
border-color: var(--dark-border-subtle);
}
#review-summary-list .list-group-item .fw-bold {
color: var(--text-primary-dark);
}
#review-summary-list .list-group-item .go-to-question-btn {
font-size: 0.8rem;
}
.result-answer-badge {
/* --- CRITICAL: Word Wrapping --- */
white-space: normal;
/* Allow the badge to wrap text to multiple lines */
word-wrap: break-word;
/* Break long words if necessary */
text-align: left;
/* Align wrapped text to the left for readability */
/* --- Aesthetic Improvements for Multi-line Badges --- */
display: inline-block;
/* Treat it like a block for better layout control */
line-height: 1.4;
/* Add some space between lines of wrapped text */
padding: 0.5em 0.75em;
/* Give it slightly more padding to look less cramped */
margin-bottom: 0.3rem;
/* Add a little space below if multiple badges stack */
max-width: 100%;
/* Ensure the badge itself doesn't overflow its container */
}
/* Optional: a slightly different style for the 'correct answer' badges */
.result-answer-badge.border-success {
/* You could add a subtle background or different text color here if you want */
}
/* --- Legal Page Styling --- */
.legal-text {
line-height: 1.8;
color: var(--text-secondary-dark);
}
.legal-text h4 {
color: var(--text-primary-dark);
margin-top: 2rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--dark-border-subtle);
}
.legal-text p,
.legal-text li {
margin-bottom: 1rem;
}
/* Footer Links */
.footer-links a:hover {
color: var(--brand-purple-light) !important;
text-decoration: underline !important;
}
.footer-links a {
color: grey;
}
/* --- Quiz Play Page Image Frame --- */
.quiz-image-frame {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
background-color: var(--dark-bg-secondary);
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid var(--dark-border-subtle);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
}
.quiz-image-frame img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
/* Was 'cover', changed to 'contain' to show the whole image */
}
.quiz-play-container .question-card {
background-color: var(--dark-bg-secondary);
border-radius: 0.75rem;
/* Slightly larger radius for a modern feel */
}
.quiz-play-container .question-card .question-text {
color: var(--text-primary-dark);
line-height: 1.4;
font-weight: 500;
/* Less aggressive than bolder */
}
/* --- CHOICE ITEM STYLING (KEY CHANGES) --- */
.quiz-choice-item .form-check-label {
/* Set the darker background for choices */
background-color: var(--dark-bg-primary);
color: var(--text-secondary-dark);
border: 2px solid var(--dark-bg-tertiary);
/* Use a subtle border color */
/* Other styles from before, which are good */
display: flex;
align-items: center;
width: 100%;
padding: 0.9rem 1.25rem;
/* Slightly reduced padding */
margin-bottom: 0.75rem;
border-radius: 0.5rem;
font-size: 1rem;
/* Base font size for choices */
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.quiz-choice-item .form-check-label:hover {
border-color: var(--brand-purple-medium);
background-color: var(--dark-bg-tertiary);
/* Lighten on hover */
color: var(--text-primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.quiz-choice-item .form-check-input:checked+.form-check-label {
background-color: rgba(138, 43, 226, 0.2);
/* Brighter purple background on select */
border-color: var(--brand-purple-base);
color: var(--brand-purple-highlight);
box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
transform: scale(1.02);
}
/* --- MOBILE FONT & LAYOUT REFINEMENTS (YOUTUBE STYLE) --- */
@media (max-width: 767.98px) {
/* Bootstrap's 'md' breakpoint */
.quiz-play-container .quiz-play-title {
font-size: 1.75rem;
/* Smaller, cleaner title for mobile */
font-weight: 600;
}
.quiz-play-container .question-card .card-body {
padding: 1rem 1.25rem;
/* Reduce padding on mobile */
}
.quiz-play-container .question-card .question-text {
font-size: 1.15rem;
/* ~18-19px, common for question text on mobile */
margin-bottom: 1rem !important;
}
.quiz-choice-item .form-check-label {
padding: 0.75rem 1rem;
/* More compact padding for choices */
font-size: 0.95rem;
/* ~15-16px, very common for app list item text */
margin-bottom: 0.6rem;
}
.quiz-choice-item .check-icon {
font-size: 1.3rem;
/* Slightly smaller check icon */
right: 1rem;
}
.quiz-navigation-footer {
padding: 0;
/* Remove padding to let buttons touch edges */
}
.quiz-nav-btn {
font-size: 0.9rem;
/* Smaller nav buttons */
padding: 0.5rem 1rem;
flex-grow: 1;
/* Make prev/next buttons take half the width each */
margin: 0 0.25rem;
/* Small gap between them */
}
.quiz-nav-btn:first-child {
margin-left: 0;
}
.quiz-nav-btn:last-child {
margin-right: 0;
}
}
/* Review Slide Styling */
.review-card .card-header {
background-color: var(--dark-bg-tertiary);
color: var(--brand-purple-light);
font-size: 1.2rem;
}
#review-summary-list .list-group-item {
background-color: var(--dark-bg-secondary);
border-color: var(--dark-border-subtle);
}
#review-summary-list .list-group-item .fw-bold {
color: var(--text-primary-dark);
font-size: 0.9rem;
}
#review-summary-list .list-group-item small {
font-size: 0.85rem;
color: var(--text-secondary-dark);
}
/* --- Custom Image Upload Widget Styling --- */
.image-preview-container {
position: relative;
display: inline-block;
vertical-align: top;
background-color: var(--dark-bg-tertiary);
border: 1px solid var(--dark-border-subtle);
border-radius: 5px;
padding: 5px;
}
.uploaded-image-preview {
max-width: 200px;
max-height: 100px;
display: block;
border-radius: 3px;
}
.file-name-display {
display: block;
padding: 1rem;
color: var(--text-secondary-dark);
font-style: italic;
}
.remove-image-btn {
position: absolute;
top: -12px;
right: -12px;
width: 26px;
height: 26px;
background-color: #333;
border: 1px solid #555;
border-radius: 50%;
color: #fff;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
font-weight: bold;
line-height: 23px;
text-align: center;
cursor: pointer;
opacity: 0.8;
transition: all 0.2s ease-in-out;
z-index: 10;
}
.remove-image-btn:hover {
opacity: 1;
background-color: var(--danger-dark);
border-color: #fff;
transform: scale(1.1);
}
.quiz-question-image {
border: 1px solid var(--dark-border-strong);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* --- Button Pop Effect --- */
.btn-pop {
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.btn-pop:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.btn-pop.btn-primary {
background-image: linear-gradient(135deg, #6a0dad 0%, #8A2BE2 50%, #9d4edd 100%);
}
.btn-pop.btn-success {
background-image: linear-gradient(135deg, #2a9d8f 0%, #264653 100%);
}
.btn-pop.btn-info {
background-image: linear-gradient(135deg, #457b9d 0%, #1d3557 100%);
}
/* Cookie Consent Banner */
.cookie-consent-banner {
display: none;
/* Hidden by default, shown with JS */
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--dark-bg-secondary);
color: var(--text-primary-dark);
padding: 1rem;
z-index: 1055;
/* Above most elements */
border-top: 1px solid var(--dark-border-strong);
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
}
.cookie-consent-banner p {
margin: 0;
font-size: 0.9rem;
color: var(--text-secondary-dark);
}
.cookie-consent-banner a {
color: var(--brand-purple-light);
text-decoration: underline;
}
.cookie-consent-banner .btn {
margin-left: 1.5rem;
white-space: nowrap;
}
@media (max-width: 767.98px) {
.cookie-consent-banner .container {
flex-direction: column;
text-align: center;
}
.cookie-consent-banner p {
margin-bottom: 1rem;
}
.cookie-consent-banner .btn {
margin-left: 0;
width: 100%;
}
}
/* --- File Upload Widget & Drop Zone --- */
.file-upload-widget__drop-zone,
.drop-zone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 150px;
border: 2px dashed var(--dark-border-strong);
border-radius: 0.375rem;
padding: 1rem;
text-align: center;
color: var(--text-secondary-dark);
cursor: pointer;
transition: all 0.2s ease-in-out;
background-color: var(--dark-bg-primary);
}
.file-upload-widget__input {
display: none;
}
.drop-zone__input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 10;
}
@media (max-width: 767.98px) {
.drop-zone {
min-height: auto;
border: none;
padding: 0;
background-color: transparent;
display: block;
}
.drop-zone__input {
position: relative;
opacity: 1;
height: auto;
z-index: 1;
margin-bottom: 0.5rem;
}
}
.file-upload-widget__drop-zone.has-file,
.drop-zone.has-file {
/* Assuming we might add this class via JS to the profile dropzone */
border-style: solid;
padding: 0.5rem;
background-color: var(--dark-bg-tertiary);
}
.file-upload-widget__drop-zone.drop-zone--over,
.drop-zone.drop-zone--over {
background-color: var(--dark-bg-secondary);
border-color: var(--brand-purple-base);
}
.file-upload-widget__prompt,
.drop-zone .drop-zone__prompt {
/* Target prompt inside generic .drop-zone */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.file-upload-widget__prompt i,
.drop-zone .drop-zone__prompt i {
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--brand-purple-medium);
}
.file-upload-widget__preview-container {
position: relative;
}
.file-upload-widget__preview-item {
position: relative;
max-width: 100%;
}
.file-upload-widget__preview-img {
max-width: 100%;
max-height: 200px;
border-radius: 0.25rem;
}
.file-upload-widget__remove-btn {
position: absolute;
top: -10px;
right: -10px;
width: 24px;
height: 24px;
background-color: #333;
border: 1px solid #555;
border-radius: 50%;
color: #fff;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
font-weight: bold;
line-height: 22px;
text-align: center;
cursor: pointer;
opacity: 0.8;
transition: all 0.2s ease-in-out;
z-index: 10;
}
.file-upload-widget__remove-btn:hover {
opacity: 1;
background-color: var(--danger-dark);
transform: scale(1.1);
}
/* Mobile Fallback (Hide Drop Zone UI) */
@media (max-width: 767.98px) {
.file-upload-widget__drop-zone,
.drop-zone {
border: none;
padding: 0;
min-height: 0;
cursor: default;
background-color: transparent !important;
}
.file-upload-widget__prompt,
.drop-zone .drop-zone__prompt {
display: none;
}
.file-upload-widget__input {
/* This is for the widget */
display: block;
width: 100%;
}
.file-upload-widget__preview-container {
margin-bottom: 0.5rem;
}
/* For the profile pic, the label is the button, so we just need to hide the prompt */
#profile_pic_drop_zone {
text-align: center;
}
}
/* --- Swup Transitions --- */
.transition-fade {
transition: 0.4s;
opacity: 1;
}
html.is-animating .transition-fade {
opacity: 0;
}
html.is-leaving .transition-fade {
opacity: 0;
}
.transition-slide {
transition: 0.4s;
transform: translateX(0);
}
html.is-animating .transition-slide {
transform: translateX(20px);
}
/*
==========================================================================
Mobile & Responsive Overrides
==========================================================================
*/
@media (max-width: 991.98px) {
/* Applies to screens smaller than Bootstrap's lg breakpoint */
/* --- GENERAL LAYOUT --- */
.sticky-sidebar {
position: static;
top: auto;
max-height: none;
overflow-y: visible;
}
/* --- TYPOGRAPHY --- */
.display-3 {
font-size: 2.5rem;
/* Default is 3rem */
}
.display-5 {
font-size: 2rem;
/* Default is 2.5rem */
}
.display-6 {
font-size: 1.75rem;
/* Default is 2rem */
}
.error-code-main {
font-size: 5rem;
/* Default was 8rem */
}
}
/* --- Aesthetic Password Toggle --- */
.password-input-wrapper {
position: relative;
display: block;
/* Ensures input height is respected and feedback stacks */
width: 100%;
}
.password-input-wrapper input.form-control {
padding-right: 2.5rem;
/* Make room for the eye icon */
}
.password-toggle-btn {
position: absolute;
top: 50%;
right: 0.5rem;
/* Spacing from right edge */
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-secondary-dark);
padding: 0.25rem;
cursor: pointer;
z-index: 10;
line-height: 1;
transition: color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.password-toggle-btn:hover,
.password-toggle-btn:focus {
color: var(--brand-purple-light);
outline: none;
}
.password-toggle-btn i {
font-size: 1.1rem;
}
/* --- Animations --- */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Tooltip arrow */
.tour-arrow {
position: absolute;
width: 20px;
height: 20px;
background: inherit;
/* Inherit glassmorphism */
border: inherit;
/* Inherit purple border */
z-index: -1;
transform: rotate(45deg);
/* Box shadow to match tooltip */
box-shadow: inherit;
opacity: 0;
transition: opacity 0.3s ease;
}
.tour-tooltip-enter .tour-arrow {
opacity: 1;
}
/* Arrow positioning */
.tour-arrow-top .tour-arrow {
top: -10px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom: none;
border-right: none;
}
.tour-arrow-bottom .tour-arrow {
bottom: -10px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-top: none;
border-left: none;
}
.tour-arrow-left .tour-arrow {
left: -10px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
border-top: none;
border-right: none;
}
.tour-arrow-right .tour-arrow {
right: -10px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
border-bottom: none;
border-left: none;
}
/* Hide arrow for center position */
.tour-tooltip-center .tour-arrow {
display: none;
}
.tour-tooltip-center {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 10000;
}
/* Animations */
@keyframes tour-pulse {
0% {
box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(138, 43, 226, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(138, 43, 226, 0);
}
}
.animate-fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
.animate-slide-up {
animation: slideUp 0.6s ease-out forwards;
}
.hover-scale {
transition: transform 0.2s ease;
}
.hover-scale:hover {
transform: scale(1.02);
}
.btn-pulse:hover {
animation: pulse-purple 1.5s infinite;
}
/* Glassmorphism Utility */
.glass-panel {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
border-radius: 12px;
}
/* ===================================
ONBOARDING TOUR STYLES
=================================== */
/* Tour Overlay - Dark backdrop */
.tour-overlay {
position: fixed;
top: 0;
left: 0;
width: 1000%;
height: 1000%;
/* background: rgba(0, 0, 0, 0.85); */
background: transparent;
/* backdrop-filter: blur(4px); */
/* -webkit-backdrop-filter: blur(4px); */
z-index: 9998;
transition: opacity 0.3s ease;
}
/* Tour Spotlight - Highlights target element */
.tour-spotlight {
position: fixed;
pointer-events: none;
z-index: 9999;
border-radius: 12px;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85),
0 0 20px rgba(138, 43, 226, 0.5),
inset 0 0 20px rgba(138, 43, 226, 0.3);
border: 2px solid rgba(138, 43, 226, 0.6);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-spotlight-pulse {
animation: tourSpotlightPulse 2s ease-in-out infinite;
}
@keyframes tourSpotlightPulse {
0%,
100% {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85),
0 0 20px rgba(138, 43, 226, 0.5),
inset 0 0 20px rgba(138, 43, 226, 0.3);
border-color: rgba(138, 43, 226, 0.6);
}
50% {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85),
0 0 35px rgba(138, 43, 226, 0.8),
inset 0 0 30px rgba(138, 43, 226, 0.5);
border-color: rgba(138, 43, 226, 0.9);
}
}
/* Tour Tooltip - Main tooltip container */
.tour-tooltip {
position: fixed;
z-index: 10000;
max-width: 420px;
width: calc(100vw - 40px);
opacity: 0;
transform: scale(0.9);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-tooltip-enter {
opacity: 1;
transform: scale(1);
}
/* Center positioning for welcome/complete steps */
.tour-tooltip-center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
max-width: 480px;
}
.tour-tooltip-center.tour-tooltip-enter {
transform: translate(-50%, -50%) scale(1);
}
/* Tooltip Content */
.tour-tooltip-content {
background: rgba(28, 29, 46, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(138, 43, 226, 0.3);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
0 0 30px rgba(138, 43, 226, 0.2);
padding: 0;
overflow: hidden;
}
/* Tooltip Header */
.tour-tooltip-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.5rem 1rem 1.5rem;
background: linear-gradient(135deg,
rgba(138, 43, 226, 0.1) 0%,
rgba(157, 78, 221, 0.05) 100%);
border-bottom: 1px solid rgba(138, 43, 226, 0.2);
}
.tour-tooltip-title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
color: var(--text-primary-dark);
font-family: var(--font-heading);
}
.tour-close-btn {
background: transparent;
border: none;
color: var(--text-secondary-dark);
font-size: 1.2rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.tour-close-btn:hover {
background: rgba(138, 43, 226, 0.2);
color: var(--brand-purple-light);
transform: rotate(90deg);
}
/* Tooltip Body */
.tour-tooltip-body {
padding: 1rem 1.5rem 1.5rem 1.5rem;
}
.tour-tooltip-text {
margin: 0;
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-secondary-dark);
}
/* Tooltip Footer */
.tour-tooltip-footer {
padding: 1rem 1.5rem 1.5rem 1.5rem;
background: rgba(18, 18, 22, 0.6);
border-top: 1px solid rgba(138, 43, 226, 0.15);
}
/* Progress Bar */
.tour-progress {
margin-bottom: 1rem;
}
.tour-progress-bar {
height: 6px;
background: linear-gradient(90deg,
var(--brand-purple-deep) 0%,
var(--brand-purple-base) 50%,
var(--brand-purple-light) 100%);
border-radius: 3px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
position: relative;
overflow: hidden;
}
.tour-progress-bar::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
animation: tourProgressShine 2s infinite;
}
@keyframes tourProgressShine {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.tour-progress-text {
display: block;
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--text-secondary-dark);
text-align: center;
}
/* Tooltip Actions */
.tour-tooltip-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
.tour-nav-buttons {
display: flex;
gap: 0.5rem;
}
/* Tour Buttons */
.tour-btn {
padding: 0.6rem 1.2rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.tour-btn-skip {
background: transparent;
color: var(--text-secondary-dark);
border: 1px solid rgba(138, 43, 226, 0.3);
}
.tour-btn-skip:hover {
background: rgba(138, 43, 226, 0.1);
color: var(--text-primary-dark);
border-color: rgba(138, 43, 226, 0.5);
}
.tour-btn-prev {
background: rgba(138, 43, 226, 0.15);
color: var(--brand-purple-light);
border: 1px solid rgba(138, 43, 226, 0.3);
}
.tour-btn-prev:hover {
background: rgba(138, 43, 226, 0.25);
color: var(--brand-purple-highlight);
transform: translateX(-2px);
}
.tour-btn-next,
.tour-btn-primary {
background: linear-gradient(135deg,
var(--brand-purple-deep) 0%,
var(--brand-purple-base) 50%,
var(--brand-purple-medium) 100%);
color: white;
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}
.tour-btn-next:hover,
.tour-btn-primary:hover {
background: linear-gradient(135deg,
var(--brand-purple-base) 0%,
var(--brand-purple-medium) 50%,
var(--brand-purple-light) 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}
.tour-btn i {
font-size: 0.9rem;
}
/* Take Tour Button (for homepage) */
.btn-take-tour {
background: linear-gradient(135deg,
var(--brand-purple-deep) 0%,
var(--brand-purple-base) 50%,
var(--brand-purple-medium) 100%);
color: white !important;
border: none;
padding: 0.75rem 1.5rem;
font-weight: 600;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-take-tour:hover {
background: linear-gradient(135deg,
var(--brand-purple-base) 0%,
var(--brand-purple-medium) 50%,
var(--brand-purple-light) 100%);
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(138, 43, 226, 0.5);
}
.btn-take-tour i {
font-size: 1.1rem;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.tour-tooltip {
max-width: calc(100vw - 32px);
}
.tour-tooltip-center {
max-width: calc(100vw - 32px);
}
.tour-tooltip-title {
font-size: 1.2rem;
}
.tour-tooltip-text {
font-size: 1rem;
}
.tour-tooltip-header,
.tour-tooltip-body,
.tour-tooltip-footer {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.tour-tooltip-actions {
flex-direction: column;
gap: 0.5rem;
}
.tour-nav-buttons {
width: 100%;
justify-content: space-between;
}
.tour-btn {
padding: 0.65rem 1rem;
font-size: 0.9rem;
flex: 1;
justify-content: center;
}
.tour-btn-skip {
width: 100%;
order: 2;
}
.tour-spotlight {
border-radius: 8px;
}
}
@media (max-width: 480px) {
.tour-tooltip-title {
font-size: 1.1rem;
}
.tour-tooltip-text {
font-size: 0.95rem;
}
.tour-btn {
padding: 0.6rem 0.8rem;
font-size: 0.85rem;
}
}
/* --- Tour Fixes: Force Transparency & Hoisting --- */
.tour-spotlight {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.tour-target-active {
position: relative !important;
z-index: 10001 !important;
/* Above spotlight (9999) and tooltip (10000?) */
pointer-events: auto !important;
}
.tour-tooltip {
z-index: 10002 !important;
/* Tooltip on top of everything */
}
/* --- Modal & Guide Fixes --- */
.modal-backdrop.show {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
#formatTabContent .tab-pane {
transition: opacity 0.15s linear;
}
#formatTabContent .tab-pane.active {
display: block !important;
opacity: 1 !important;
}
/* --- Bottom Navigation & FAB (Mobile Only) --- */
@media (max-width: 991.98px) {
body {
padding-bottom: 75px !important; /* Space for bottom nav */
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 65px;
background: rgba(28, 29, 46, 0.95);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid rgba(138, 43, 226, 0.3);
z-index: 1040;
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-secondary-dark);
font-size: 0.7rem;
font-weight: 500;
transition: all 0.2s ease;
flex: 1;
padding: 5px 0;
}
.bottom-nav-item i {
font-size: 1.3rem;
margin-bottom: 2px;
}
.bottom-nav-item.active {
color: var(--brand-purple-light);
}
.bottom-nav-item:active {
transform: scale(0.9);
}
.bottom-nav-fab-placeholder {
width: 60px; /* Placeholder for the FAB in the center */
}
.fab-create {
position: fixed;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background-image: var(--brand-purple-gradient);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white !important;
font-size: 1.8rem;
box-shadow: 0 4px 20px rgba(138, 43, 226, 0.5);
z-index: 1050;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 4px solid var(--dark-bg-primary);
animation: pulse-purple 3s infinite;
}
.fab-create:active {
transform: translateX(-50%) scale(0.85);
box-shadow: 0 2px 10px rgba(138, 43, 226, 0.3);
}
}
/* Pulse Animation for FAB */
@keyframes pulse-purple {
0% {
box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.4);
}
70% {
box-shadow: 0 0 0 15px rgba(138, 43, 226, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(138, 43, 226, 0);
}
}
/* In-Feed Creator Card Styling */
.creator-card {
background: linear-gradient(135deg, rgba(28, 29, 46, 0.8) 0%, rgba(106, 13, 173, 0.15) 100%) !important;
border: 2px dashed var(--brand-purple-strong, rgba(138, 43, 226, 0.5)) !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 340px;
padding: 2rem;
cursor: pointer;
transition: all 0.3s ease !important;
border-radius: 16px;
height: 100%;
}
.creator-card:hover {
border-style: solid !important;
border-color: var(--brand-purple-light) !important;
background: linear-gradient(135deg, rgba(28, 29, 46, 0.9) 0%, rgba(106, 13, 173, 0.25) 100%) !important;
transform: translateY(-5px);
}
.creator-card .plus-icon {
font-size: 3rem;
color: var(--brand-purple-light);
margin-bottom: 1rem;
background: rgba(138, 43, 226, 0.1);
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.creator-card:hover .plus-icon {
transform: rotate(90deg);
background: rgba(138, 43, 226, 0.2);
}
.creator-card h4 {
font-weight: 700;
margin-bottom: 0.5rem;
}
.creator-card p {
font-size: 0.9rem;
color: var(--text-secondary-dark);
}
/* --- Premium UX Enhancements --- */
/* 1. Smart Sticky Header */
.navbar {
transition: transform 0.3s ease-in-out, background-color 0.3s ease;
}
.navbar.header-hidden {
transform: translateY(-100%);
}
/* 2. Active State Scale-down (Tactile Feedback) */
.btn:active,
.card.quiz-card:active,
.nav-link:active,
.bottom-nav-item:active {
transform: scale(0.97) !important;
transition: transform 0.1s ease !important;
}
/* 3. Ripple Effect (CSS Only) */
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::after {
content: " \;
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .5s, opacity 1s;
}
.ripple-effect:active::after {
transform: scale(0, 0);
opacity: .3;
transition: 0s;
}
/* 4. Skeleton Loading Shimmer */
.skeleton {
background: linear-gradient(90deg, var(--dark-bg-tertiary) 25%, var(--dark-bg-action-button) 50%, var(--dark-bg-tertiary) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 4px;
display: inline-block;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 5. Page Transition Fade-in */
body {
animation: page-fade-in 0.4s ease-out;
}
@keyframes page-fade-in {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
/* Entry Animations */
.animate-slide-up {
animation: slideUp 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
opacity: 0;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}