192 lines
4.7 KiB
CSS
192 lines
4.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';
|
|
|
|
/* Dark mode support - system preference */
|
|
@import '@ionic/react/css/palettes/dark.system.css';
|
|
|
|
/* Tailwind CSS - comes after Ionic to avoid overriding essential Ionic styles */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Dark mode detection */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--ion-color-primary: #3880ff;
|
|
--ion-color-primary-rgb: 56, 128, 255;
|
|
--ion-color-primary-contrast: #ffffff;
|
|
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
|
--ion-color-primary-shade: #3171e0;
|
|
--ion-color-primary-tint: #4c8dff;
|
|
}
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* List item press states for Artists, Top100, SongLists */
|
|
ion-item.artist-item.ion-activated,
|
|
ion-item.top100-item.ion-activated,
|
|
ion-item.songlist-item.ion-activated,
|
|
ion-item.list-item.ion-activated {
|
|
--background: rgba(var(--ion-color-primary-rgb), 0.1);
|
|
--color: var(--ion-color-dark);
|
|
}
|
|
|
|
ion-item.artist-item.ion-focused,
|
|
ion-item.top100-item.ion-focused,
|
|
ion-item.songlist-item.ion-focused,
|
|
ion-item.list-item.ion-focused {
|
|
--background: rgba(var(--ion-color-primary-rgb), 0.05);
|
|
--color: var(--ion-color-dark);
|
|
}
|
|
|
|
/* Ensure icons remain visible during press states */
|
|
ion-item.ion-activated ion-icon {
|
|
color: var(--ion-color-primary) !important;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
ion-modal ion-list {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Ensure content is visible and properly styled */
|
|
ion-content {
|
|
--background: var(--ion-background-color);
|
|
}
|
|
|
|
ion-list {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Ensure items are properly displayed */
|
|
ion-item {
|
|
--background: transparent;
|
|
--color: var(--ion-text-color);
|
|
}
|
|
|
|
/* Settings page specific styling */
|
|
.settings-container {
|
|
padding: 0 16px !important;
|
|
}
|
|
|
|
.settings-container ion-list {
|
|
margin: 0 -16px !important;
|
|
padding: 0 16px !important;
|
|
}
|
|
|
|
.settings-container h2 {
|
|
padding-left: 16px !important;
|
|
padding-right: 16px !important;
|
|
}
|
|
|
|
.settings-container .bg-gray-50 {
|
|
margin: 0 16px !important;
|
|
}
|
|
|
|
.settings-container ion-item {
|
|
--padding-end: 0 !important;
|
|
}
|
|
|
|
.settings-container ion-toggle {
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
/* Right-justified button container with padding */
|
|
.right-button-container {
|
|
padding-right: 16px !important;
|
|
padding-top: 20px !important;
|
|
padding-bottom: 10px !important;
|
|
}
|
|
|
|
/* 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 {
|
|
font-weight: bold !important;
|
|
font-size: 1rem !important;
|
|
color: var(--ion-text-color) !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: var(--ion-text-color) !important;
|
|
margin-bottom: 0.5rem !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Bold song title styling */
|
|
.bold-title {
|
|
font-weight: bold !important;
|
|
color: var(--ion-text-color) !important;
|
|
}
|
|
|
|
/* Override Ionic label text color for song titles */
|
|
ion-item ion-label .bold-title {
|
|
color: var(--ion-text-color) !important;
|
|
}
|
|
|
|
/* Input field styling to match search box */
|
|
.visible-input {
|
|
border: 1px solid var(--ion-border-color, #d1d5db) !important;
|
|
border-radius: 8px !important;
|
|
padding: 0 12px !important;
|
|
background: var(--ion-background-color) !important;
|
|
}
|
|
|
|
.visible-input ion-input {
|
|
border: 1px solid var(--ion-border-color, #d1d5db) !important;
|
|
border-radius: 8px !important;
|
|
padding: 0 12px !important;
|
|
background: var(--ion-background-color) !important;
|
|
}
|