117 lines
2.7 KiB
CSS
117 lines
2.7 KiB
CSS
/* Ionic CSS imports - must come first to establish base styles */
|
|
@import '@ionic/react/css/core.css';
|
|
@import '@ionic/react/css/normalize.css';
|
|
@import '@ionic/react/css/structure.css';
|
|
@import '@ionic/react/css/typography.css';
|
|
@import '@ionic/react/css/display.css';
|
|
@import '@ionic/react/css/padding.css';
|
|
@import '@ionic/react/css/float-elements.css';
|
|
@import '@ionic/react/css/text-alignment.css';
|
|
@import '@ionic/react/css/text-transformation.css';
|
|
@import '@ionic/react/css/flex-utils.css';
|
|
@import '@ionic/react/css/display.css';
|
|
|
|
/* Tailwind CSS - comes after Ionic to avoid overriding essential Ionic styles */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Ensure menu button is visible */
|
|
ion-menu-button {
|
|
--color: var(--ion-color-primary);
|
|
--padding-start: 8px;
|
|
--padding-end: 8px;
|
|
}
|
|
|
|
/* Menu item styling */
|
|
ion-item.ion-activated {
|
|
--background: var(--ion-color-primary);
|
|
--color: var(--ion-color-primary-contrast);
|
|
}
|
|
|
|
/* Ensure mobile menu appears above other content */
|
|
ion-menu {
|
|
--z-index: 1000;
|
|
}
|
|
|
|
/* Ensure modal content is visible */
|
|
ion-modal ion-content {
|
|
--background: var(--ion-background-color, #ffffff);
|
|
}
|
|
|
|
ion-modal ion-list {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Ensure content is visible and properly styled */
|
|
ion-content {
|
|
--background: var(--ion-background-color, #ffffff);
|
|
}
|
|
|
|
ion-list {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Ensure items are properly displayed */
|
|
ion-item {
|
|
--background: transparent;
|
|
--color: var(--ion-text-color, #000000);
|
|
}
|
|
|
|
/* Ensure accordion content is visible */
|
|
ion-accordion {
|
|
--background: transparent;
|
|
}
|
|
|
|
ion-accordion ion-item {
|
|
--background: transparent;
|
|
}
|
|
|
|
/* Custom modal styling for Singers component */
|
|
ion-modal ion-input-label,
|
|
ion-modal .ion-input-label,
|
|
ion-modal ion-label {
|
|
font-weight: bold !important;
|
|
font-size: 1rem !important;
|
|
color: #111827 !important;
|
|
margin-bottom: 0.5rem !important;
|
|
display: block !important;
|
|
}
|
|
|
|
ion-modal ion-button {
|
|
height: 40px !important;
|
|
min-height: 40px !important;
|
|
--padding-top: 8px !important;
|
|
--padding-bottom: 8px !important;
|
|
}
|
|
|
|
/* Bold label styling for forms and titles */
|
|
.bold-label {
|
|
font-weight: bold !important;
|
|
font-size: 1rem !important;
|
|
color: #111827 !important;
|
|
margin-bottom: 0.5rem !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Bold song title styling */
|
|
.bold-title {
|
|
font-weight: bold !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
/* Input field styling to match search box */
|
|
.visible-input {
|
|
border: 1px solid #d1d5db !important;
|
|
border-radius: 8px !important;
|
|
padding: 0 12px !important;
|
|
background: #ffffff !important;
|
|
}
|
|
|
|
.visible-input ion-input {
|
|
border: 1px solid #d1d5db !important;
|
|
border-radius: 8px !important;
|
|
padding: 0 12px !important;
|
|
background: #ffffff !important;
|
|
}
|