All files / src/styles header.css

0% Statements 0/0
0% Branches 0/0
0% Functions 0/0
0% Lines 0/0

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44                                                                                       
@import './tailwindCustom.css'; /* Import global Tailwind styles for consistency */
 
/* 
  Header Styling 
  - Defines the layout and appearance of the header section.
  - Ensures consistent spacing, colors, and typography.
*/
 
/* Header Container
   - Uses flexbox for a balanced layout.
   - Applies a blue background with white text for visibility.
   - Adds padding and shadow for a structured look.
*/
.header-container {
    @apply flex justify-between items-center bg-blue-600 text-white px-6 py-4 shadow-md h-16;
}
 
/* Header Title
   - Sets a larger font size for emphasis.
   - Applies bold styling for readability.
   - Uses tracking-wide for a slight spacing effect.
*/
.header-title {
    @apply text-2xl font-bold tracking-wide;
}
 
/* Header Subtitle
   - Uses a smaller font size for a subtle secondary text.
   - Applies opacity for a softer appearance.
*/
.header-subtitle {
    @apply text-sm opacity-80;
}
 
/* Header Buttons Container
   - Aligns buttons horizontally with spacing.
   - Ensures consistent positioning for UI elements.
*/
.header-buttons {
    @apply flex items-center space-x-2;
}