367 lines
8.7 KiB
CSS
Executable File
367 lines
8.7 KiB
CSS
Executable File
@import "tailwindcss";
|
|
|
|
body {
|
|
@apply bg-gradient-to-br from-blue-50 to-indigo-100;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
@apply bg-gradient-to-br from-gray-900 to-gray-800;
|
|
}
|
|
}
|
|
|
|
/* Navbar theme classes */
|
|
.theme-navbar {
|
|
@apply bg-white/90 backdrop-blur-sm shadow-xl;
|
|
}
|
|
.theme-navbar-text {
|
|
@apply text-gray-700 hover:text-gray-900;
|
|
}
|
|
.theme-navbar-accent {
|
|
@apply text-blue-600 hover:text-blue-700;
|
|
}
|
|
.theme-navbar-button {
|
|
@apply text-blue-600 hover:text-blue-700;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-navbar {
|
|
@apply bg-black/80 backdrop-blur-sm shadow-xl;
|
|
}
|
|
.theme-navbar-text {
|
|
@apply text-cyan-400 hover:text-cyan-300;
|
|
}
|
|
.theme-navbar-accent {
|
|
@apply text-cyan-400 hover:text-cyan-300;
|
|
}
|
|
.theme-navbar-button {
|
|
@apply text-blue-400 hover:text-cyan-300;
|
|
}
|
|
}
|
|
|
|
/* Card theme classes */
|
|
.theme-card {
|
|
@apply bg-white/90 shadow-md;
|
|
}
|
|
.theme-card-input {
|
|
@apply bg-white/80 text-gray-900 border-gray-300 focus:ring-blue-500;
|
|
}
|
|
.theme-card-button {
|
|
@apply bg-blue-500/80 text-white hover:bg-blue-600/80;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-card {
|
|
@apply bg-gray-800/90 shadow-md;
|
|
}
|
|
.theme-card-input {
|
|
@apply bg-gray-700/80 text-white border-gray-600 focus:ring-blue-400;
|
|
}
|
|
.theme-card-button {
|
|
@apply bg-blue-600/80 text-white hover:bg-blue-700/80;
|
|
}
|
|
}
|
|
|
|
/* Dashboard theme classes - auto-switch based on system preference */
|
|
.theme-container {
|
|
@apply bg-white/95 text-gray-900 backdrop-blur-xl;
|
|
}
|
|
.theme-secondary-container {
|
|
@apply bg-gray-100/80 text-gray-900;
|
|
}
|
|
.theme-border {
|
|
@apply border-gray-200;
|
|
}
|
|
.theme-button-text {
|
|
@apply text-gray-900;
|
|
}
|
|
.theme-icon-button {
|
|
@apply text-gray-600 hover:text-gray-800;
|
|
}
|
|
.theme-question-text {
|
|
@apply text-black bg-white/70 rounded px-2 py-1 inline;
|
|
}
|
|
.theme-admin-button {
|
|
@apply bg-blue-500 hover:bg-blue-600 text-white;
|
|
}
|
|
.theme-button {
|
|
@apply bg-blue-500 hover:bg-blue-600 text-white;
|
|
}
|
|
.theme-input {
|
|
@apply bg-white/90 text-gray-900 border-gray-300;
|
|
}
|
|
.theme-text {
|
|
@apply text-gray-900;
|
|
}
|
|
.theme-select {
|
|
@apply bg-white text-gray-900 border-gray-300;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-container {
|
|
@apply bg-gray-800/95 text-white backdrop-blur-xl;
|
|
}
|
|
.theme-secondary-container {
|
|
@apply bg-gray-700/80 text-white;
|
|
}
|
|
.theme-border {
|
|
@apply border-gray-600;
|
|
}
|
|
.theme-button-text {
|
|
@apply text-white;
|
|
}
|
|
.theme-icon-button {
|
|
@apply text-gray-300 hover:text-white;
|
|
}
|
|
.theme-question-text {
|
|
@apply text-white bg-gray-800/70 rounded px-2 py-1 inline;
|
|
}
|
|
.theme-admin-button {
|
|
@apply bg-blue-600 hover:bg-blue-700 text-white;
|
|
}
|
|
.theme-button {
|
|
@apply bg-blue-600 hover:bg-blue-700 text-white;
|
|
}
|
|
.theme-input {
|
|
@apply bg-gray-700/90 text-white border-gray-600;
|
|
}
|
|
.theme-text {
|
|
@apply text-white;
|
|
}
|
|
.theme-select {
|
|
@apply bg-gray-700 text-white border-gray-600;
|
|
}
|
|
}
|
|
|
|
/* Popup theme classes */
|
|
.theme-popup-overlay {
|
|
@apply fixed inset-0 bg-black/50 flex items-center justify-center z-[1000];
|
|
}
|
|
.theme-popup-container {
|
|
@apply bg-white/95 text-gray-900 backdrop-blur-xl p-8 rounded-lg w-[300px]
|
|
min-h-[100px] shadow-xl;
|
|
}
|
|
.theme-popup-button {
|
|
@apply bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-md
|
|
cursor-pointer text-base font-bold transition-colors duration-200;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-popup-container {
|
|
@apply bg-gray-800/95 text-white backdrop-blur-xl;
|
|
}
|
|
.theme-popup-button {
|
|
@apply bg-blue-600 hover:bg-blue-700;
|
|
}
|
|
}
|
|
|
|
/* Image generator overlay classes */
|
|
.theme-image-overlay {
|
|
@apply fixed inset-0 bg-black/50 flex items-center justify-center z-[1000];
|
|
}
|
|
.theme-image-container {
|
|
@apply relative bg-white/95 backdrop-blur-xl rounded-lg shadow-xl
|
|
overflow-hidden;
|
|
}
|
|
.theme-image-input {
|
|
@apply w-full p-2 border rounded bg-white/90 text-gray-900 border-gray-300;
|
|
}
|
|
.theme-image-button {
|
|
@apply px-0 py-2 rounded-md bg-blue-500 hover:bg-blue-600 text-white
|
|
font-medium transition-colors duration-200;
|
|
white-space: nowrap;
|
|
font-size: 0.95rem;
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-image-container {
|
|
@apply bg-gray-800/95 backdrop-blur-xl;
|
|
}
|
|
.theme-image-input {
|
|
@apply bg-gray-700/90 text-white border-gray-600;
|
|
}
|
|
.theme-image-button {
|
|
@apply bg-blue-600 hover:bg-blue-700;
|
|
}
|
|
}
|
|
|
|
/* Voice recorder overlay classes */
|
|
.theme-recorder-container {
|
|
@apply bg-white/95 text-gray-900 backdrop-blur-xl p-8 rounded-lg w-[364px]
|
|
min-h-[220px] flex flex-col justify-center items-center relative shadow-xl;
|
|
}
|
|
.theme-recorder-close {
|
|
@apply absolute top-3 right-3 bg-transparent border-none text-gray-600
|
|
hover:text-gray-900 text-2xl cursor-pointer z-10 p-0 leading-none;
|
|
}
|
|
.theme-recorder-button {
|
|
@apply w-[100px] h-12 rounded-full text-base font-bold border-none
|
|
cursor-pointer transition-all duration-200 flex items-center justify-center;
|
|
}
|
|
.theme-recorder-start {
|
|
@apply bg-blue-500 hover:bg-blue-600 text-white;
|
|
}
|
|
.theme-recorder-stop {
|
|
@apply bg-red-500 hover:bg-red-600 text-white;
|
|
}
|
|
.theme-recorder-save {
|
|
@apply bg-green-500 hover:bg-green-600 text-white;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-recorder-container {
|
|
@apply bg-gray-800/95 text-white backdrop-blur-xl;
|
|
}
|
|
.theme-recorder-close {
|
|
@apply text-gray-300 hover:text-white;
|
|
}
|
|
.theme-recorder-start {
|
|
@apply bg-blue-600 hover:bg-blue-700;
|
|
}
|
|
.theme-recorder-stop {
|
|
@apply bg-red-600 hover:bg-red-700;
|
|
}
|
|
.theme-recorder-save {
|
|
@apply bg-green-600 hover:bg-green-700;
|
|
}
|
|
}
|
|
|
|
/* Financial Calendar theme classes */
|
|
.theme-calendar-form {
|
|
@apply bg-gray-50 border-gray-300 shadow-sm;
|
|
}
|
|
.theme-calendar-label {
|
|
@apply text-gray-900;
|
|
}
|
|
.theme-calendar-input {
|
|
@apply bg-white text-gray-900 border-gray-300;
|
|
}
|
|
.theme-calendar-nav-button {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
}
|
|
.theme-calendar-title {
|
|
@apply text-gray-900;
|
|
}
|
|
.theme-calendar-table {
|
|
@apply text-gray-900;
|
|
}
|
|
.theme-calendar-cell {
|
|
@apply border-gray-300 bg-white;
|
|
}
|
|
.theme-calendar-day {
|
|
@apply text-gray-900;
|
|
}
|
|
.theme-calendar-list-container {
|
|
@apply bg-white border-gray-200 shadow-sm;
|
|
}
|
|
.theme-calendar-list-empty {
|
|
@apply text-gray-500;
|
|
}
|
|
.theme-calendar-list-item {
|
|
@apply border-gray-200;
|
|
}
|
|
.theme-calendar-list-frequency {
|
|
@apply text-gray-500;
|
|
}
|
|
.theme-calendar-close-button {
|
|
@apply bg-gray-500 hover:bg-gray-600 text-white;
|
|
}
|
|
.theme-calendar-today {
|
|
@apply border-2 border-blue-500 bg-blue-50;
|
|
}
|
|
|
|
/* Dialog form theme classes */
|
|
.theme-dialog-overlay {
|
|
@apply fixed inset-0 flex items-start justify-center bg-black/40 z-50;
|
|
}
|
|
.theme-dialog-container {
|
|
@apply bg-white text-gray-900 p-4 rounded-xl shadow-2xl w-full max-w-md;
|
|
}
|
|
.theme-dialog-title {
|
|
@apply text-xl font-bold text-center mb-2 text-gray-900;
|
|
}
|
|
.theme-dialog-input {
|
|
@apply w-full border border-gray-300 rounded-md px-3 py-2 text-base bg-white
|
|
text-gray-900;
|
|
}
|
|
.theme-dialog-select {
|
|
@apply w-full border border-gray-300 rounded-md px-3 py-2 text-base bg-white
|
|
text-gray-900;
|
|
}
|
|
.theme-dialog-cancel-button {
|
|
@apply bg-gray-200 text-gray-800 px-4 py-2 rounded-md font-semibold
|
|
hover:bg-gray-300 transition-colors;
|
|
}
|
|
.theme-dialog-submit-button {
|
|
@apply bg-green-600 text-white px-4 py-2 rounded-md font-semibold
|
|
hover:bg-green-700 transition-colors;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-dialog-container {
|
|
@apply bg-gray-800 text-white shadow-2xl;
|
|
}
|
|
.theme-dialog-title {
|
|
@apply text-white;
|
|
}
|
|
.theme-dialog-input {
|
|
@apply border-gray-600 bg-gray-700 text-white;
|
|
}
|
|
.theme-dialog-select {
|
|
@apply border-gray-600 bg-gray-700 text-white;
|
|
}
|
|
.theme-dialog-cancel-button {
|
|
@apply bg-gray-600 text-white hover:bg-gray-500;
|
|
}
|
|
.theme-dialog-submit-button {
|
|
@apply bg-green-600 text-white hover:bg-green-500;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-calendar-form {
|
|
@apply bg-gray-800 border-gray-600 shadow-md;
|
|
}
|
|
.theme-calendar-label {
|
|
@apply text-white;
|
|
}
|
|
.theme-calendar-input {
|
|
@apply bg-gray-700 text-white border-gray-600;
|
|
}
|
|
.theme-calendar-nav-button {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
.theme-calendar-title {
|
|
@apply text-white;
|
|
}
|
|
.theme-calendar-table {
|
|
@apply text-white;
|
|
}
|
|
.theme-calendar-cell {
|
|
@apply border-gray-600 bg-gray-800;
|
|
}
|
|
.theme-calendar-day {
|
|
@apply text-white;
|
|
}
|
|
.theme-calendar-list-container {
|
|
@apply bg-gray-800 border-gray-600 shadow-md;
|
|
}
|
|
.theme-calendar-list-empty {
|
|
@apply text-gray-400;
|
|
}
|
|
.theme-calendar-list-item {
|
|
@apply border-gray-600;
|
|
}
|
|
.theme-calendar-list-frequency {
|
|
@apply text-gray-400;
|
|
}
|
|
.theme-calendar-close-button {
|
|
@apply bg-gray-600 hover:bg-gray-500 text-white;
|
|
}
|
|
.theme-calendar-today {
|
|
@apply border-2 border-cyan-400 bg-cyan-900/30;
|
|
}
|
|
}
|