Appearance

Collage Header Styles ​

File Information ​

  • Path: assets/css/collage-header.css
  • Purpose: Header alert box and notification styles
  • Size: ~873 bytes

Overview ​

The Collage Header CSS file provides styles for the header alert box component that displays system-wide notifications, announcements, and alerts at the top of the application.

Key Features ​

  1. Alert Box Styling

    • Header alert container
    • Alert message display
    • Close button styling
    • Responsive behavior

  2. Color Scheme

    • Red alert colors (error/warning)
    • Gray text colors
    • Background colors

  3. Responsive Design

    • Mobile hiding
    • Tablet/desktop display

CSS Classes ​

.alert-box-header ​

Main alert box container:

css
.alert-box-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 40px;
  color: var(--DBred50) !important;
  background-color: var(--DBred10) !important;
  border-bottom: 1px solid var(--DBred20) !important;
  box-shadow: none !important;
  margin: 0px;
  min-height: 48px !important;
  z-index: 1;
}

Properties:

  • Flexbox layout for alignment
  • Red color scheme for alerts
  • Fixed minimum height
  • Z-index for layering

.header-alert ​

Alert message content:

css
.alert-box-header .header-alert {
  font-size: var(--fontsize14);
  line-height: 1.4;
}

Properties:

  • Standard font size
  • Readable line height

.header-alert a ​

Links within alert messages:

css
.alert-box-header .header-alert a {
  font-weight: 700;
  text-decoration: underline;
  color: var(--DBgray);
}

Properties:

  • Bold font weight
  • Underlined links
  • Gray color

.v-btn ​

Close button styling:

css
.alert-box-header .v-btn {
  font-size: var(--fontsize14);
  color: var(--DBred50) !important;
  text-transform: none;
  letter-spacing: normal;
  height: auto !important;
  outline: none;
  padding: 0px !important;
}

Properties:

  • Red color matching alert
  • No text transformation
  • Auto height
  • No padding

Responsive Design ​

Mobile Hiding ​

css
@media only screen and (max-width: 599.98px) {
  .alert-box-header {
    display: none;
  }
}

Behavior:

  • Hides alert box on mobile devices
  • Prevents clutter on small screens

SVG Styling ​

css
svg {
  height: auto;
}

.alert-box-header svg {
  position: relative;
  top: 1px;
}

Properties:

  • Auto height for SVG icons
  • Slight vertical adjustment

Usage Examples ​

Basic Alert Box ​

html
<div class="alert-box-header">
  <div class="header-alert">
    System maintenance scheduled for tonight at 10 PM.
    <a href="/maintenance">Learn more</a>
  </div>
  <v-btn @click="closeAlert">
    <svg><!-- Close icon --></svg>
  </v-btn>
</div>
html
<div class="alert-box-header">
  <div class="header-alert">
    New feature available! 
    <a href="/features/new">Check it out</a>
  </div>
  <v-btn @click="dismiss">×</v-btn>
</div>

Integration Points ​

  • Header Component: Used in main layout header
  • Notification System: Displays system notifications
  • Alert System: Shows important alerts
  • Announcement System: Displays announcements

Notes for Development ​

  • Alert box uses red color scheme
  • Hidden on mobile devices
  • Close button required
  • Links styled with underline
  • Z-index ensures visibility