Appearance

Dashboard Styles ​

File Information ​

  • Path: assets/css/dashboard.css
  • Purpose: Dashboard page, boxes, collage grid, and insights styles
  • Size: ~10.2 KB

Overview ​

The Dashboard CSS file provides comprehensive styles for the dashboard page, including dashboard boxes, collage grid layouts, image groups, and weekly insights displays.

Key Features ​

  1. Dashboard Boxes

    • Box containers
    • Hover effects
    • Active states
    • Card layouts

  2. Collage Grid

    • Grid layout
    • Image groups
    • Placeholder styles
    • Aspect ratios

  3. Insights Display

    • Weekly insights tabs
    • Chart containers
    • Data visualization

CSS Classes ​

.dashboardRecents ​

Recent items container:

css
.collage-body .dashboardRecents {
  height: calc(100% - 102px);
}

Properties:

  • Calculated height
  • Full height minus header

.dashboardBoxs ​

Dashboard box container:

css
.dashboardBoxs {
  background-color: var(--DBgrayLight3);
  color: var(--DBgray);
  border: 1px solid transparent;
  box-shadow: none !important;
  border-radius: 8px;
  transition-property: inherit !important;
}

.dashboardBoxs .v-avatar {
  margin-right: 12px;
}

.dashboardBoxs span {
  position: relative;
  top: 1px;
  font-weight: 500;
}

.dashboardBoxs svg {
  height: 20px;
  width: 20px;
}

.dashboardBoxs:hover {
  background-color: var(--DBpurpleLight);
  border-color: var(--DBblue);
}

.dashboardBoxs:active {
  background-color: var(--DBgrayLight3);
  border-color: var(--DBblue);
  box-shadow: inset 0px 0px 0px 1px var(--DBblue) !important;
}

Properties:

  • Light gray background
  • Hover purple background
  • Blue border on hover/active
  • Inset shadow on active

.boxview ​

Box view card:

css
.boxview {
  border-radius: 20px !important;
  box-shadow: none !important;
  border: none !important;
  height: 100%;
  padding: 16px 16px 32px;
  overflow: hidden;
}

.boxview .v-card__title {
  justify-content: space-between;
  flex-wrap: nowrap;
  word-break: normal;
}

.boxview .v-card__title h5 {
  margin: 0px;
  font-size: var(--fontsize18);
  font-weight: 500;
  color: var(--DBgray5252);
}

Properties:

  • Large border radius (20px)
  • Full height
  • Padding
  • Title layout

.collageBoxs ​

Collage box container:

css
.collageBoxs {
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
  border-radius: 8px !important;
  color: var(--DBgray);
  border: 1px solid var(--borderColor);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.collageBoxs.active,
.collageBoxs:hover {
  border-color: var(--DBblue);
  box-shadow: 0px 2px 6px 0px var(--boxshadow10) !important;
}

Properties:

  • Square aspect ratio
  • Column flex layout
  • Blue border on hover/active
  • Box shadow on hover

.collageBoxs .assetsName ​

Asset name display:

css
.collageBoxs .assetsName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: stretch;
  overflow: hidden;
  color: var(--DBgray);
  text-overflow: ellipsis;
  font-size: var(--fontsize13);
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
}

Properties:

  • Two-line clamp
  • Ellipsis overflow
  • Bold font weight

.collageBoxs .totalAssets ​

Total assets count:

css
.collageBoxs .totalAssets {
  color: var(--DBgray5252);
  font-size: var(--fontsize12);
  font-weight: 400;
  line-height: 1.35;
  margin-top: 2px;
}

Properties:

  • Lighter gray color
  • Smaller font size
  • Top margin

.imageGroup ​

Image group container:

css
.imageGroup {
  display: flex;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  height: 100%;
}

.imageGroup .imageGroup100 {
  width: 100%;
}

.imageGroup .imageGroup60 {
  width: 60%;
}

.imageGroup .imageGroup40 {
  width: 40%;
}

.imageGroup .imageGroup60 .h-100 {
  margin-right: 3px;
}

.imageGroup .imageGroup40 .h-50 + .h-50 {
  margin-top: 3px;
  height: calc(50% - 3px) !important;
}

Properties:

  • Flex layout
  • Percentage widths
  • Spacing between images
  • Height calculations

.imageGroupSvg ​

SVG placeholder:

css
.imageGroupSvg {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--DBgrayD9D9);
}

.imageGroupSvg.folderSvg {
  background-color: transparent;
}

.imageGroupSvg.folderSvg svg,
.imageGroupSvg.UnassignedFolder svg {
  width: 43%;
  min-width: 70px;
}

Properties:

  • Centered content
  • Gray background
  • Transparent for folders
  • Responsive SVG sizing

.threeColumnPlaceholder ​

Three-column placeholder:

css
.threeColumnPlaceholder .h-100 {
  background-color: var(--DBgrayD9D9);
}

.threeColumnPlaceholder .imageGroup40 .h-50 {
  background-color: var(--DBgrayCFCF);
}

.threeColumnPlaceholder .imageGroup40 .h-50 + .h-50 {
  background-color: var(--DBgrayB4B4);
}

Properties:

  • Different gray shades
  • Visual hierarchy

.weekly-insights-tab-list ​

Weekly insights tab:

css
.weekly-insights-tab-list {
  display: flex;
  align-items: center;
  box-shadow: none !important;
  padding: 10px 20px;
  margin-top: 16px;
  border-radius: 8px !important;
  color: var(--DBgray) !important;
  border: 1px solid var(--borderColor) !important;
}

.weekly-insights-tab-list:hover {
  border-color: var(--DBblue);
}

.weekly-insights-tab-list div,
.weekly-insights-tab-list canvas {
  width: 100% !important;
}

Properties:

  • Flex layout
  • Bordered container
  • Blue border on hover
  • Full-width content

Image Sizing ​

Image Group 100 ​

css
.imageGroup100 .imageGroupSvg img {
  max-width: 104px;
  width: 3.5vw;
  min-width: 64px;
  max-height: 104px;
  height: 3.5vw;
  min-height: 64px;
}

Image Group 60 ​

css
.imageGroup60 .imageGroupSvg img {
  max-width: 84px;
  width: 3vw;
  min-width: 44px;
  max-height: 84px;
  height: 3vw;
  min-height: 44px;
}

Image Group 40 ​

css
.imageGroup40 .imageGroupSvg img {
  max-width: 64px;
  width: 2.5vw;
  min-width: 32px;
  max-height: 64px;
  height: 2.5vw;
  min-height: 32px;
}

Properties:

  • Viewport-based sizing
  • Min/max constraints
  • Responsive scaling

Usage Examples ​

Dashboard Box ​

html
<div class="dashboardBoxs">
  <v-avatar>
    <svg><!-- Icon --></svg>
  </v-avatar>
  <span>Dashboard Item</span>
</div>

Collage Box ​

html
<div class="collageBoxs">
  <div class="v-card__text">
    <div class="imageGroup">
      <div class="imageGroup100">
        <img src="image.jpg" alt="Preview">
      </div>
    </div>
  </div>
  <div class="v-card__actions">
    <div class="assetsName">Collage Name</div>
    <div class="totalAssets">12 assets</div>
  </div>
</div>

Image Group Layout ​

html
<div class="imageGroup">
  <div class="imageGroup60">
    <div class="h-100">
      <img src="large.jpg" alt="Large">
    </div>
  </div>
  <div class="imageGroup40">
    <div class="h-50">
      <img src="small1.jpg" alt="Small 1">
    </div>
    <div class="h-50">
      <img src="small2.jpg" alt="Small 2">
    </div>
  </div>
</div>

Integration Points ​

  • Dashboard Page: Main dashboard interface
  • Collage Components: Collage grid display
  • Insights Components: Analytics display
  • Image Components: Image previews

Notes for Development ​

  • Uses CSS variables for theming
  • Aspect ratio maintained
  • Responsive image sizing
  • Hover effects included
  • Placeholder styles available