chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Add global CSS design system with Tailwind integration, light/dark mode support, and a new discovery page.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-26 16:05:41 +07:00
parent f6cb4e4f81
commit 6d7e78fb33
2 changed files with 55 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

45
Frontend-Learner/assets/css/main.css
View file

@ -1133,3 +1133,48 @@ ul {
.checkbox-visible.q-checkbox--dense .q-checkbox__bg {
border-width: 2px !important;
}
/* ===========================
Dropdown Menu Visibility Enhancement
=========================== */
/* Force white background for all dropdown menus */
.q-menu,
.q-menu .q-list {
background-color: #ffffff !important;
}
/* Dropdown menu items - simple dark text */
.q-menu .q-item {
color: #0f172a !important; /* slate-900 - dark text */
background-color: transparent !important;
}
.q-menu .q-item__label {
color: #0f172a !important; /* slate-900 - dark text */
font-weight: 400 !important; /* normal weight */
}
/* Subtle hover state */
.q-menu .q-item:hover {
background-color: #f8fafc !important; /* slate-50 - very light hover */
}
/* Selected/Active item - keep simple, just slightly darker text */
.q-menu .q-item--active {
background-color: transparent !important; /* no background color */
color: #0f172a !important; /* same dark text */
}
.q-menu .q-item--active .q-item__label {
color: #0f172a !important; /* same dark text */
font-weight: 500 !important; /* slightly bolder */
}
/* Force option text to be dark */
.q-item__label,
.q-select__dropdown .q-item {
color: #0f172a !important;
}

12
Frontend-Learner/pages/browse/discovery.vue
View file

@ -203,7 +203,8 @@ const { currentUser } = useAuth();
placeholder="ค้นหาคอร์ส..."
class="bg-white dark:bg-slate-800 w-full md:w-64"
bg-color="white"
dark:bg-color="slate-800"
color="slate-900"
:input-style="{ color: '#0f172a' }"
>
<template v-slot:append>
<q-icon name="search" class="text-slate-400" />
@ -217,8 +218,15 @@ const { currentUser } = useAuth();
dense
outlined
rounded
class="bg-white dark:bg-slate-800 w-40"
:dark="false"
class="bg-white w-40"
bg-color="white"
color="slate-900"
:input-style="{ color: '#0f172a' }"
:options-dark="false"
options-dense
:popup-content-style="{ backgroundColor: '#ffffff', color: '#0f172a' }"
popup-content-class="text-slate-900"
behavior="menu"
/>
</div>