mljr-css 1.0.14 → 1.1.0

package/src/components/turnstile.css

@@ -0,0 +1,113 @@
+/* ============================================
+   Turnstile - Cloudflare CAPTCHA widget
+   ============================================ */
+
+.mljr-turnstile {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.mljr-turnstile-widget {
+  /* The Turnstile iframe renders inside this container */
+  display: block;
+  line-height: 0;
+}
+
+/* Status messages */
+.mljr-turnstile-status {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-family: var(--mljr-font-body);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.mljr-turnstile-status-verified {
+  color: #16a34a;
+}
+
+.mljr-turnstile-status-error {
+  color: #dc2626;
+}
+
+.mljr-turnstile-status-expired {
+  color: #d97706;
+}
+
+.dark .mljr-turnstile-status-verified { color: #4ade80; }
+.dark .mljr-turnstile-status-error    { color: #f87171; }
+.dark .mljr-turnstile-status-expired  { color: #fbbf24; }
+
+.mljr-turnstile-status svg {
+  flex-shrink: 0;
+}
+
+/* Demo/placeholder (when no siteKey is provided) */
+.mljr-turnstile-demo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--mljr-radius-sm);
+  border: 1px solid var(--mljr-border);
+  background: var(--mljr-surface);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  min-width: 300px;
+  max-width: 300px;
+  height: 65px;
+}
+
+.mljr-turnstile-demo-checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 4px;
+  border: 2px solid var(--mljr-border);
+  background: var(--mljr-surface);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.mljr-turnstile-demo-checkbox-checked {
+  background: var(--mljr-primary-500);
+  border-color: var(--mljr-primary-500);
+}
+
+.mljr-turnstile-demo-label {
+  font-family: var(--mljr-font-body);
+  font-size: 0.875rem;
+  color: var(--mljr-text);
+  flex: 1;
+  user-select: none;
+  cursor: pointer;
+}
+
+.mljr-turnstile-demo-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  margin-left: auto;
+}
+
+.mljr-turnstile-demo-brand-name {
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: #f6821f;
+  letter-spacing: 0.04em;
+  font-family: var(--mljr-font-body);
+  line-height: 1;
+}
+
+.mljr-turnstile-demo-brand-sub {
+  font-size: 0.5rem;
+  color: var(--mljr-text-muted);
+  font-family: var(--mljr-font-body);
+  line-height: 1;
+}

package/src/components/video-player.css

@@ -0,0 +1,266 @@
+/* ============================================================
+   Video Player Component
+   ============================================================ */
+
+.mljr-video-player {
+  position: relative;
+  background: #000;
+  border-radius: var(--mljr-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--mljr-clay-shadow-lg);
+  user-select: none;
+}
+
+.mljr-video-player video {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 540px;
+  object-fit: contain;
+  cursor: pointer;
+}
+
+/* ── Overlay (idle/center play button) ── */
+.mljr-video-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  transition: opacity var(--mljr-transition-base);
+}
+
+.mljr-video-overlay.mljr-video-overlay-visible {
+  background: rgba(0, 0, 0, 0.25);
+}
+
+.mljr-video-center-btn {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  pointer-events: all;
+  transition: transform var(--mljr-transition-fast), background var(--mljr-transition-fast);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  color: #111;
+}
+
+.mljr-video-center-btn:hover {
+  transform: scale(1.1);
+  background: #fff;
+}
+
+/* ── Controls bar ── */
+.mljr-video-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-2);
+  transition: opacity var(--mljr-transition-base);
+}
+
+.mljr-video-player:not(.mljr-video-controls-visible) .mljr-video-controls {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.mljr-video-player.mljr-video-controls-visible .mljr-video-controls {
+  opacity: 1;
+  pointer-events: all;
+}
+
+/* ── Progress / Seek bar ── */
+.mljr-video-progress {
+  position: relative;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: height var(--mljr-transition-fast);
+}
+
+.mljr-video-progress:hover {
+  height: 6px;
+}
+
+.mljr-video-progress-buffered {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.mljr-video-progress-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: var(--mljr-primary-500);
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.mljr-video-progress-thumb {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform var(--mljr-transition-fast);
+  pointer-events: none;
+}
+
+.mljr-video-progress:hover .mljr-video-progress-thumb {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* ── Bottom row: buttons + time + volume + fullscreen ── */
+.mljr-video-controls-row {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+}
+
+.mljr-video-btn {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: transparent;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--mljr-transition-fast);
+  padding: 0;
+}
+
+.mljr-video-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.mljr-video-btn svg {
+  width: 18px;
+  height: 18px;
+  pointer-events: none;
+}
+
+/* ── Time display ── */
+.mljr-video-time {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: var(--mljr-text-xs);
+  font-family: var(--mljr-font-mono);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ── Volume control ── */
+.mljr-video-volume {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-1);
+}
+
+.mljr-video-volume-slider {
+  width: 72px;
+  height: 4px;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 999px;
+  cursor: pointer;
+  outline: none;
+  transition: width var(--mljr-transition-fast);
+}
+
+.mljr-video-volume-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+}
+
+.mljr-video-volume-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  border: none;
+}
+
+/* Push fullscreen to right */
+.mljr-video-spacer {
+  flex: 1;
+}
+
+/* ── Caption/title overlay (top-left) ── */
+.mljr-video-title {
+  position: absolute;
+  top: var(--mljr-space-4);
+  left: var(--mljr-space-4);
+  color: rgba(255, 255, 255, 0.9);
+  font-size: var(--mljr-text-sm);
+  font-weight: 600;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+  transition: opacity var(--mljr-transition-base);
+  pointer-events: none;
+}
+
+/* ── Loading spinner overlay ── */
+.mljr-video-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  pointer-events: none;
+}
+
+/* ── Error state ── */
+.mljr-video-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mljr-space-3);
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: var(--mljr-text-sm);
+  padding: var(--mljr-space-6);
+  text-align: center;
+}
+
+/* ── Aspect ratios ── */
+.mljr-video-16-9 {
+  aspect-ratio: 16 / 9;
+}
+
+.mljr-video-16-9 video {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  object-fit: contain;
+}

package/src/index.css

@@ -1,9 +1,12 @@
 /* ============================================
    MLJR CSS Framework
    A TailwindCSS-based CSS framework with
-   orange/purple color scheme
+   claymorphism design system
    ============================================ */
 
+/* Google Fonts - Nunito (display/body) + JetBrains Mono (code) */
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Nunito:wght@300;400;500;600;700&display=swap');
+
 /* All imports must come first before @tailwind directives */
 @import "./themes/variables.css";
 @import "./base/reset.css";
@@ -46,6 +49,37 @@
 @import "./components/stepper.css";
 @import "./components/drawer.css";
 @import "./components/empty-state.css";
+@import "./components/navigation-rail.css";
+@import "./components/dock.css";
+@import "./components/tree-view.css";
+@import "./components/marquee.css";
+@import "./components/autocomplete.css";
+@import "./components/animated-headline.css";
+@import "./components/image-compare.css";
+@import "./components/table-of-content.css";
+@import "./components/chart.css";
+@import "./components/inview.css";
+@import "./components/lazy-image.css";
+@import "./components/infinite-scroll.css";
+@import "./components/diff-viewer.css";
+@import "./components/audio-visualizer.css";
+@import "./components/pin-input.css";
+@import "./components/video-player.css";
+@import "./components/drop-zone.css";
+@import "./components/rich-text-editor.css";
+@import "./components/map-embed.css";
+@import "./components/pdf-viewer.css";
+@import "./components/turnstile.css";
+@import "./components/cookie-banner.css";
+@import "./components/legal-page.css";
+@import "./components/number-input.css";
+@import "./components/context-menu.css";
+@import "./components/calendar.css";
+@import "./components/notification-center.css";
+@import "./components/gauge.css";
+@import "./components/alert-dialog.css";
+@import "./components/number-ticker.css";
+@import "./components/resizable.css";
 @import "./utilities/utilities.css";
 
 /* Tailwind Base */

package/src/layout/footer.css

@@ -6,7 +6,7 @@
 .mljr-footer {
   width: 100%;
   padding: var(--mljr-space-12) var(--mljr-space-8);
-  background: var(--mljr-bg);
+  background: transparent;
   margin-top: auto;
   border-top: none;
 }
@@ -261,7 +261,7 @@
 /* Dark Mode - Enhanced Claymorphism */
 .dark .mljr-footer,
 [data-theme="dark"] .mljr-footer {
-  background: var(--mljr-bg);
+  background: transparent;
 }
 
 .dark .mljr-footer-container,