zenkit-css 1.0.0

package/scss/components/_watermark.scss

@@ -0,0 +1,314 @@
+// ========================================
+// ZenKit - Watermark Component
+// Background watermark overlay
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Watermark Container
+// ----------------------------------------
+.watermark {
+  position: relative;
+}
+
+// ----------------------------------------
+// Watermark Overlay
+// ----------------------------------------
+.watermark-content {
+  position: absolute;
+  inset: 0;
+  z-index: 9;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+// ----------------------------------------
+// Watermark Pattern
+// ----------------------------------------
+// The actual watermark pattern is typically generated via JS/Canvas
+// These are CSS-only fallback patterns
+
+.watermark-pattern {
+  position: absolute;
+  inset: 0;
+  background-repeat: repeat;
+  // Background image is set via inline style (JS generated)
+}
+
+// ----------------------------------------
+// Watermark Text (CSS Only)
+// ----------------------------------------
+.watermark-text {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 100px;
+  padding: 50px;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.08);
+  transform: rotate(-22deg);
+  user-select: none;
+  overflow: hidden;
+}
+
+.watermark-text-item {
+  white-space: nowrap;
+}
+
+// ----------------------------------------
+// Watermark Image
+// ----------------------------------------
+.watermark-image {
+  position: absolute;
+  inset: 0;
+  background-repeat: repeat;
+  background-size: 200px auto;
+  opacity: 0.05;
+}
+
+// ----------------------------------------
+// Watermark Grayscale
+// ----------------------------------------
+.watermark-grayscale .watermark-image {
+  filter: grayscale(100%);
+}
+
+// ----------------------------------------
+// Watermark Opacity Variants
+// ----------------------------------------
+.watermark-opacity-5 .watermark-text,
+.watermark-opacity-5 .watermark-image {
+  opacity: 0.05;
+}
+
+.watermark-opacity-10 .watermark-text,
+.watermark-opacity-10 .watermark-image {
+  opacity: 0.1;
+}
+
+.watermark-opacity-15 .watermark-text,
+.watermark-opacity-15 .watermark-image {
+  opacity: 0.15;
+}
+
+.watermark-opacity-20 .watermark-text,
+.watermark-opacity-20 .watermark-image {
+  opacity: 0.2;
+}
+
+.watermark-opacity-25 .watermark-text,
+.watermark-opacity-25 .watermark-image {
+  opacity: 0.25;
+}
+
+// ----------------------------------------
+// Watermark Colors
+// ----------------------------------------
+.watermark-light .watermark-text {
+  color: rgba(255, 255, 255, 0.15);
+}
+
+.watermark-dark .watermark-text {
+  color: rgba(0, 0, 0, 0.15);
+}
+
+.watermark-primary .watermark-text {
+  color: rgba(var(--primary-rgb), 0.1);
+}
+
+// ----------------------------------------
+// Watermark Font Sizes
+// ----------------------------------------
+.watermark-sm .watermark-text {
+  font-size: 12px;
+  gap: 60px;
+  padding: 30px;
+}
+
+.watermark-lg .watermark-text {
+  font-size: 20px;
+  gap: 120px;
+  padding: 60px;
+}
+
+.watermark-xl .watermark-text {
+  font-size: 28px;
+  gap: 160px;
+  padding: 80px;
+}
+
+// ----------------------------------------
+// Watermark Font Weight
+// ----------------------------------------
+.watermark-bold .watermark-text {
+  font-weight: 600;
+}
+
+.watermark-light-weight .watermark-text {
+  font-weight: 300;
+}
+
+// ----------------------------------------
+// Watermark Rotation
+// ----------------------------------------
+.watermark-rotate-0 .watermark-text,
+.watermark-rotate-0 .watermark-pattern {
+  transform: rotate(0deg);
+}
+
+.watermark-rotate-15 .watermark-text,
+.watermark-rotate-15 .watermark-pattern {
+  transform: rotate(-15deg);
+}
+
+.watermark-rotate-30 .watermark-text,
+.watermark-rotate-30 .watermark-pattern {
+  transform: rotate(-30deg);
+}
+
+.watermark-rotate-45 .watermark-text,
+.watermark-rotate-45 .watermark-pattern {
+  transform: rotate(-45deg);
+}
+
+// ----------------------------------------
+// Watermark Gap / Density
+// ----------------------------------------
+.watermark-dense .watermark-text {
+  gap: 50px;
+  padding: 25px;
+}
+
+.watermark-sparse .watermark-text {
+  gap: 150px;
+  padding: 75px;
+}
+
+// ----------------------------------------
+// Watermark Position
+// ----------------------------------------
+.watermark-center {
+  .watermark-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .watermark-text {
+    position: static;
+    flex-wrap: nowrap;
+    gap: 0;
+    padding: 0;
+  }
+
+  .watermark-text-item {
+    font-size: 3rem;
+    opacity: 0.1;
+  }
+}
+
+// ----------------------------------------
+// Watermark Full Page
+// ----------------------------------------
+.watermark-fullpage {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+// ----------------------------------------
+// Watermark Inherit (within container)
+// ----------------------------------------
+.watermark-inherit .watermark-content {
+  z-index: inherit;
+}
+
+// ----------------------------------------
+// Watermark Anti-Tamper
+// ----------------------------------------
+// Prevents easy removal via developer tools
+.watermark-secure {
+  .watermark-content {
+    // MutationObserver is used in JS to detect tampering
+    // This class is for identification
+  }
+}
+
+// ----------------------------------------
+// Watermark with Children Styling
+// ----------------------------------------
+.watermark-children {
+  position: relative;
+  z-index: 1;
+}
+
+// ----------------------------------------
+// Watermark Mask Gradient
+// ----------------------------------------
+.watermark-fade-edges {
+  .watermark-content {
+    mask-image: radial-gradient(
+      ellipse at center,
+      black 30%,
+      transparent 70%
+    );
+    -webkit-mask-image: radial-gradient(
+      ellipse at center,
+      black 30%,
+      transparent 70%
+    );
+  }
+}
+
+.watermark-fade-bottom {
+  .watermark-content {
+    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
+  }
+}
+
+// ----------------------------------------
+// Watermark Print
+// ----------------------------------------
+@media print {
+  .watermark-hide-print .watermark-content {
+    display: none;
+  }
+
+  .watermark-print-only {
+    .watermark-content {
+      display: block;
+    }
+  }
+}
+
+// ----------------------------------------
+// Watermark Responsive
+// ----------------------------------------
+@media (max-width: 767.98px) {
+  .watermark-text {
+    font-size: 12px;
+    gap: 60px;
+    padding: 30px;
+  }
+
+  .watermark-hide-mobile .watermark-content {
+    display: none;
+  }
+}
+
+// ----------------------------------------
+// Watermark Z-Index Control
+// ----------------------------------------
+.watermark-z-low .watermark-content {
+  z-index: 1;
+}
+
+.watermark-z-high .watermark-content {
+  z-index: 9999;
+}

package/scss/content/_figures.scss

@@ -0,0 +1,38 @@
+// ========================================
+// ZenKit - Figures
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Figure
+// ----------------------------------------
+.figure {
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: 0.5rem;
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+// ----------------------------------------
+// Figure Variants
+// ----------------------------------------
+.figure-centered {
+  text-align: center;
+}
+
+.figure-bordered {
+  .figure-img {
+    padding: 0.25rem;
+    background-color: var(--bg);
+    border: $border-width solid var(--border);
+    border-radius: var(--radius);
+  }
+}

package/scss/content/_images.scss

@@ -0,0 +1,138 @@
+// ========================================
+// ZenKit - Images
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Responsive Images
+// ----------------------------------------
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+// ----------------------------------------
+// Image Thumbnails
+// ----------------------------------------
+.img-thumbnail {
+  padding: 0.25rem;
+  background-color: var(--bg);
+  border: $border-width solid var(--border);
+  border-radius: var(--radius);
+  max-width: 100%;
+  height: auto;
+}
+
+// ----------------------------------------
+// Rounded Images
+// ----------------------------------------
+.img-rounded {
+  border-radius: var(--radius);
+}
+
+.img-circle {
+  border-radius: 50%;
+}
+
+// ----------------------------------------
+// Image Cover (fills container)
+// ----------------------------------------
+.img-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.img-contain {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+// ----------------------------------------
+// Avatar Sizes
+// ----------------------------------------
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: var(--gray-200);
+  color: var(--gray-600);
+  font-weight: $font-weight-medium;
+  font-size: var(--text-sm);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.avatar-xs {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--text-xs);
+}
+
+.avatar-sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--text-xs);
+}
+
+.avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--text-base);
+}
+
+.avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--text-lg);
+}
+
+.avatar-2xl {
+  width: 5rem;
+  height: 5rem;
+  font-size: var(--text-xl);
+}
+
+// ----------------------------------------
+// Avatar Group
+// ----------------------------------------
+.avatar-group {
+  display: flex;
+
+  .avatar {
+    border: 2px solid var(--bg);
+    margin-left: -0.5rem;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+// ----------------------------------------
+// Image Placeholder
+// ----------------------------------------
+.img-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--gray-200);
+  color: var(--gray-500);
+
+  svg {
+    width: 25%;
+    height: 25%;
+    max-width: 4rem;
+    max-height: 4rem;
+  }
+}

package/scss/content/_tables.scss

@@ -0,0 +1,232 @@
+// ========================================
+// ZenKit - Tables
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Base Table
+// ----------------------------------------
+.table {
+  --table-color: var(--text);
+  --table-bg: transparent;
+  --table-border-color: var(--border);
+  --table-accent-bg: transparent;
+  --table-striped-color: var(--text);
+  --table-striped-bg: rgba(0, 0, 0, 0.02);
+  --table-hover-color: var(--text);
+  --table-hover-bg: rgba(0, 0, 0, 0.04);
+
+  width: 100%;
+  margin-bottom: 1rem;
+  color: var(--table-color);
+  vertical-align: top;
+  border-color: var(--table-border-color);
+
+  > :not(caption) > * > * {
+    padding: 0.75rem;
+    background-color: var(--table-bg);
+    border-bottom-width: $border-width;
+    box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
+  }
+
+  > tbody {
+    vertical-align: inherit;
+  }
+
+  > thead {
+    vertical-align: bottom;
+  }
+}
+
+// ----------------------------------------
+// Table Head Styles
+// ----------------------------------------
+.table > thead {
+  border-bottom: 2px solid var(--border-dark);
+}
+
+.table-dark > thead {
+  border-bottom-color: var(--gray-600);
+}
+
+// ----------------------------------------
+// Striped Rows
+// ----------------------------------------
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+  --table-accent-bg: var(--table-striped-bg);
+  color: var(--table-striped-color);
+}
+
+.table-striped-columns > :not(caption) > tr > :nth-child(even) {
+  --table-accent-bg: var(--table-striped-bg);
+  color: var(--table-striped-color);
+}
+
+// ----------------------------------------
+// Hover Effect
+// ----------------------------------------
+.table-hover > tbody > tr:hover > * {
+  --table-accent-bg: var(--table-hover-bg);
+  color: var(--table-hover-color);
+}
+
+// ----------------------------------------
+// Active State
+// ----------------------------------------
+.table-active {
+  --table-accent-bg: var(--table-hover-bg);
+  color: var(--table-hover-color);
+}
+
+// ----------------------------------------
+// Bordered Table
+// ----------------------------------------
+.table-bordered > :not(caption) > * {
+  border-width: $border-width 0;
+
+  > * {
+    border-width: 0 $border-width;
+  }
+}
+
+// ----------------------------------------
+// Borderless Table
+// ----------------------------------------
+.table-borderless > :not(caption) > * > * {
+  border-bottom-width: 0;
+}
+
+.table-borderless > :not(:first-child) {
+  border-top-width: 0;
+}
+
+// ----------------------------------------
+// Table Sizes
+// ----------------------------------------
+.table-sm > :not(caption) > * > * {
+  padding: 0.375rem;
+}
+
+.table-lg > :not(caption) > * > * {
+  padding: 1rem;
+}
+
+// ----------------------------------------
+// Table Colors
+// ----------------------------------------
+.table-primary {
+  --table-color: var(--primary-900);
+  --table-bg: var(--primary-50);
+  --table-border-color: var(--primary-200);
+  --table-striped-bg: var(--primary-100);
+  --table-hover-bg: var(--primary-100);
+}
+
+.table-secondary {
+  --table-color: var(--gray-900);
+  --table-bg: var(--gray-100);
+  --table-border-color: var(--gray-200);
+  --table-striped-bg: var(--gray-200);
+  --table-hover-bg: var(--gray-200);
+}
+
+.table-success {
+  --table-color: #{$success-dark};
+  --table-bg: var(--success-light);
+  --table-border-color: #{$success};
+  --table-striped-bg: #{rgba($success, 0.1)};
+  --table-hover-bg: #{rgba($success, 0.15)};
+}
+
+.table-danger {
+  --table-color: #{$danger-dark};
+  --table-bg: var(--danger-light);
+  --table-border-color: #{$danger};
+  --table-striped-bg: #{rgba($danger, 0.1)};
+  --table-hover-bg: #{rgba($danger, 0.15)};
+}
+
+.table-warning {
+  --table-color: #{$warning-dark};
+  --table-bg: var(--warning-light);
+  --table-border-color: #{$warning};
+  --table-striped-bg: #{rgba($warning, 0.1)};
+  --table-hover-bg: #{rgba($warning, 0.15)};
+}
+
+.table-info {
+  --table-color: #{$info-dark};
+  --table-bg: var(--info-light);
+  --table-border-color: #{$info};
+  --table-striped-bg: #{rgba($info, 0.1)};
+  --table-hover-bg: #{rgba($info, 0.15)};
+}
+
+.table-light {
+  --table-color: var(--gray-900);
+  --table-bg: var(--gray-50);
+  --table-border-color: var(--gray-200);
+}
+
+.table-dark {
+  --table-color: var(--white);
+  --table-bg: var(--gray-800);
+  --table-border-color: var(--gray-700);
+  --table-striped-color: var(--white);
+  --table-striped-bg: #{rgba($white, 0.05)};
+  --table-hover-color: var(--white);
+  --table-hover-bg: #{rgba($white, 0.075)};
+}
+
+// ----------------------------------------
+// Responsive Tables
+// ----------------------------------------
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $infix: if($breakpoint == xs, "", "-#{$breakpoint}");
+
+  @include breakpoint-down($breakpoint) {
+    .table-responsive#{$infix} {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}
+
+// ----------------------------------------
+// Caption
+// ----------------------------------------
+.table caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: var(--text-muted);
+  text-align: left;
+}
+
+.caption-top {
+  caption-side: top;
+}
+
+// ----------------------------------------
+// Table Group Dividers
+// ----------------------------------------
+.table-group-divider {
+  border-top: 2px solid var(--border-dark);
+}
+
+// ----------------------------------------
+// Table Layout
+// ----------------------------------------
+.table-fixed {
+  table-layout: fixed;
+}
+
+.table-auto {
+  table-layout: auto;
+}