@omega.js/web 0.1.0

package/core/css/pages/admin/calendar/index.scss

@@ -0,0 +1,692 @@
+// Admin Marketing Calendar Styles
+
+// Current time / today accent color
+$calendar-now-color: #F44336;
+
+// Campaign type colors (match JS constants)
+$campaign-email-color: #2196F3;
+$campaign-push-color: #4CAF50;
+
+// ============================================
+// Fix: viewport-locked layout sets display:flex on all direct children,
+// which overrides Bootstrap modal's default display:none.
+// Restore Bootstrap's default: hidden unless .show is present.
+// ============================================
+#campaign-editor-modal:not(.show),
+#campaign-results-modal:not(.show) {
+  display: none !important;
+}
+
+// ============================================
+// Calendar Root
+// ============================================
+#calendar-root {
+  min-height: 0;
+}
+
+// ============================================
+// Toolbar
+// ============================================
+#calendar-toolbar {
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.calendar-toolbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.calendar-toolbar-period {
+  font-size: 1.1rem;
+  font-weight: 600;
+  text-align: center;
+  min-width: 200px;
+}
+
+.calendar-toolbar-utc-clock {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 400;
+  color: var(--bs-secondary-color);
+}
+
+.calendar-toolbar-views .btn {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8rem;
+}
+
+// ============================================
+// Calendar Grid (shared)
+// ============================================
+#calendar-grid {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+// Day-of-week header
+.calendar-day-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: var(--bs-secondary-color);
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--bs-border-color);
+  flex-shrink: 0;
+}
+
+// ============================================
+// Month View
+// ============================================
+.calendar-month {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: 1fr;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.calendar-cell {
+  border-right: 1px solid var(--bs-border-color);
+  border-bottom: 1px solid var(--bs-border-color);
+  padding: 0.25rem;
+  overflow: hidden;
+  min-height: 0;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  display: flex;
+  flex-direction: column;
+
+  &:nth-child(7n) {
+    border-right: none;
+  }
+
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+  }
+}
+
+.calendar-cell--today {
+  background-color: rgba($calendar-now-color, 0.05);
+
+  .calendar-cell-date {
+    background-color: $calendar-now-color;
+    color: #fff;
+    border-radius: 50%;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.calendar-cell--outside {
+  .calendar-cell-date,
+  .calendar-cell-events {
+    opacity: 0.35;
+  }
+}
+
+.calendar-cell--drag-over {
+  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
+}
+
+.calendar-cell-date {
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-bottom: 0.125rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.calendar-cell-events {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.calendar-cell-more {
+  font-size: 0.7rem;
+  color: var(--bs-secondary-color);
+  cursor: pointer;
+  padding: 0 0.25rem;
+
+  &:hover {
+    color: var(--bs-primary);
+  }
+}
+
+// ============================================
+// Week View
+// ============================================
+.calendar-week-header {
+  display: grid;
+  grid-template-columns: 50px repeat(7, 1fr);
+  border-bottom: 1px solid var(--bs-border-color);
+  flex-shrink: 0;
+}
+
+.calendar-week-header-cell {
+  text-align: center;
+  padding: 0.5rem 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--bs-secondary-color);
+
+  .calendar-week-header-date {
+    display: block;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--bs-body-color);
+  }
+
+  &.calendar-cell--today .calendar-week-header-date {
+    background-color: $calendar-now-color;
+    color: #fff;
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+  }
+}
+
+.calendar-week-allday {
+  display: grid;
+  grid-template-columns: 50px repeat(7, 1fr);
+  border-bottom: 1px solid var(--bs-border-color);
+  min-height: 1.5rem;
+  flex-shrink: 0;
+
+  .calendar-week-time-label {
+    font-size: 0.65rem;
+    color: var(--bs-secondary-color);
+    padding: 0.125rem 0.25rem;
+    text-align: right;
+  }
+}
+
+.calendar-week-body {
+  display: grid;
+  grid-template-columns: 50px repeat(7, 1fr);
+  flex-grow: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.calendar-week-time-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar-week-time-label {
+  height: 60px;
+  font-size: 0.65rem;
+  color: var(--bs-secondary-color);
+  text-align: right;
+  padding-right: 0.5rem;
+  padding-top: 0;
+  transform: translateY(-0.4rem);
+}
+
+.calendar-week-day-col {
+  position: relative;
+  border-left: 1px solid var(--bs-border-color);
+}
+
+.calendar-week-time-slot {
+  height: 60px;
+  border-bottom: 1px solid var(--bs-border-color-translucent);
+  position: relative;
+
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+  }
+}
+
+// Now line (real-time red indicator)
+.calendar-now-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: $calendar-now-color;
+  z-index: 3;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: -4px;
+    top: -4px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: $calendar-now-color;
+  }
+}
+
+
+.calendar-week-event {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  border-radius: 4px;
+  padding: 0.125rem 0.25rem;
+  font-size: 0.7rem;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 1;
+  color: #fff;
+  border-left: 3px solid rgba(0, 0, 0, 0.2);
+  transition: filter 0.15s, box-shadow 0.15s;
+
+  &:hover {
+    filter: brightness(1.2);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  }
+}
+
+// ============================================
+// Day View
+// ============================================
+.calendar-day-header-single {
+  text-align: center;
+  padding: 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--bs-border-color);
+  flex-shrink: 0;
+}
+
+.calendar-day-body {
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  flex-grow: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.calendar-day-col {
+  position: relative;
+}
+
+// ============================================
+// Year View
+// ============================================
+.calendar-year {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  padding: 0.5rem;
+  overflow-y: auto;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.calendar-mini-month {
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+  }
+}
+
+.calendar-mini-month-title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 0.25rem;
+}
+
+.calendar-mini-month-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-size: 0.65rem;
+  gap: 1px;
+}
+
+.calendar-mini-day-header {
+  color: var(--bs-secondary-color);
+  font-weight: 600;
+  padding: 0.125rem 0;
+}
+
+.calendar-mini-day {
+  padding: 0.125rem 0;
+  border-radius: 50%;
+  position: relative;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.calendar-cell--today {
+    background-color: $calendar-now-color;
+    color: #fff;
+    opacity: 1;
+  }
+
+  &.calendar-cell--outside {
+    visibility: hidden;
+  }
+
+  &.has-events::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: $calendar-now-color;
+  }
+}
+
+// ============================================
+// Event Pills (Month View)
+// CSS uses "event" as a calendar UI term; the data model uses "campaign"
+// ============================================
+.calendar-event {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.0625rem 0.25rem;
+  border-radius: 3px;
+  font-size: 0.7rem;
+  line-height: 1.3;
+  height: 1.25rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-left: 3px solid rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  color: #fff;
+  transition: filter 0.15s, box-shadow 0.15s;
+
+  &:hover {
+    filter: brightness(1.2);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.calendar-event--dragging {
+  opacity: 0.4 !important;
+}
+
+// During drag, disable pointer-events on all events so drops land on time slots
+.calendar-grid--dragging {
+  .calendar-event,
+  .calendar-week-event {
+    pointer-events: none;
+  }
+}
+
+.calendar-event-time {
+  font-weight: 600;
+  font-size: 0.65rem;
+  flex-shrink: 0;
+}
+
+.calendar-event-type-icon {
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+.calendar-event-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// ============================================
+// Campaign Status & Recurrence Styles
+// ============================================
+
+// Sent campaigns: faded with strikethrough-like visual
+.calendar-event--sent {
+  cursor: default;
+
+  .calendar-event-title {
+    text-decoration: line-through;
+    text-decoration-thickness: 1px;
+  }
+}
+
+// Failed campaigns: red border accent
+.calendar-event--failed {
+  cursor: pointer;
+  border-left: 3px solid $calendar-now-color !important;
+  background-color: $calendar-now-color !important;
+}
+
+// Virtual recurring occurrences: dashed border, slightly transparent
+.calendar-event--virtual {
+  border-style: dashed;
+  border-left-style: solid;
+  border-color: rgba(255, 255, 255, 0.5);
+  border-left-color: rgba(0, 0, 0, 0.2);
+  opacity: 0.7;
+}
+
+// Recurring template/history: subtle left border indicator
+.calendar-event--recurring {
+  border-left: 3px solid rgba(255, 255, 255, 0.6) !important;
+}
+
+// ============================================
+// Campaign Preview (Email)
+// ============================================
+.email-preview {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.email-preview-header {
+  border-bottom: 1px solid var(--bs-border-color);
+  padding-bottom: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.email-preview-subject {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.email-preview-preheader {
+  font-size: 0.85rem;
+  color: var(--bs-secondary-color);
+  margin-top: 0.25rem;
+}
+
+.email-preview-body {
+  font-size: 0.9rem;
+  line-height: 1.6;
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  h1 { font-size: 1.5rem; }
+  h2 { font-size: 1.25rem; }
+  h3 { font-size: 1.1rem; }
+
+  p { margin-bottom: 0.75rem; }
+
+  a { color: var(--bs-primary); }
+
+  ul, ol {
+    padding-left: 1.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  blockquote {
+    border-left: 3px solid var(--bs-border-color);
+    padding-left: 1rem;
+    color: var(--bs-secondary-color);
+    margin: 0.75rem 0;
+  }
+
+  code {
+    background-color: var(--bs-tertiary-bg);
+    padding: 0.125rem 0.375rem;
+    border-radius: 3px;
+    font-size: 0.85em;
+  }
+
+  pre {
+    background-color: var(--bs-tertiary-bg);
+    padding: 0.75rem;
+    border-radius: 6px;
+    overflow-x: auto;
+
+    code {
+      background: none;
+      padding: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+  }
+}
+
+.email-preview-disclaimer {
+  border-top: 1px solid var(--bs-border-color);
+  padding-top: 0.75rem;
+}
+
+// ============================================
+// Campaign Preview (Push Notification)
+// ============================================
+.push-preview-frame {
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.75rem;
+  padding: 0.5rem;
+  background-color: var(--bs-dark);
+}
+
+.push-preview-screen {
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+}
+
+.push-preview-status-bar {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 0.5rem;
+}
+
+.push-preview-notification {
+  background-color: var(--bs-secondary-bg);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+// ============================================
+// List View
+// ============================================
+.calendar-list {
+  flex-grow: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.calendar-list table {
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.calendar-list-date-header td {
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  color: var(--bs-secondary-color);
+  padding: 0.75rem 0.5rem 0.25rem;
+  border-bottom: 2px solid var(--bs-border-color);
+  position: sticky;
+  top: 0;
+  background-color: var(--bs-body-bg);
+  z-index: 1;
+}
+
+.calendar-list-row {
+  cursor: pointer;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+  }
+
+  td {
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--bs-border-color-translucent);
+    font-size: 0.85rem;
+    vertical-align: middle;
+  }
+}
+
+.calendar-list-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  color: var(--bs-secondary-color);
+}
+
+// ============================================
+// Responsive
+// ============================================
+@media (max-width: 767.98px) {
+  .calendar-year {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .calendar-toolbar-period {
+    min-width: auto;
+    font-size: 0.95rem;
+  }
+
+  .calendar-cell {
+    min-height: 60px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .calendar-year {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}

package/core/css/pages/admin/firebase/index.scss

@@ -0,0 +1,33 @@
+// Admin Firebase Explorer
+
+// JSON viewer
+.json-viewer {
+  max-height: 500px;
+  overflow-y: auto;
+  font-size: 0.85em;
+  background: var(--bs-tertiary-bg);
+  border-radius: 0;
+
+  code {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+}
+
+// JSON editor
+.json-editor {
+  font-family: var(--bs-font-monospace);
+  font-size: 0.85em;
+  min-height: 300px;
+}
+
+// Collection nav
+.collection-nav .nav-link {
+  font-size: 0.875rem;
+  border-radius: var(--bs-border-radius);
+
+  &.active {
+    font-weight: 600;
+    background: var(--bs-tertiary-bg);
+  }
+}

package/core/css/pages/admin/index.scss

@@ -0,0 +1,9 @@
+// Admin Dashboard Styles
+
+// Chart containers — the charts helper tells its SVG host the height it
+// measured (core/js/libs/charts.js), so the BOX carries that height and the
+// host fills it. Same contract as the helper's own `chartSlot` markup.
+.admin-chart-box {
+  position: relative;
+  height: 280px;
+}