@uniai-fe/uds-templates 0.1.26 → 0.1.27

package/dist/styles.css

@@ -43,6 +43,36 @@
   var(--spacing-padding-9, 32px) + env(safe-area-inset-top, 0px)
   );
   --auth-container-padding-bottom: var(--spacing-padding-10, 40px);
+  /* Card layout */
+  --cctv-video-radius: 12px;
+  --cctv-list-gap: var(--spacing-gap-5);
+  --cctv-overlay-padding-x: var(--spacing-padding-8);
+  --cctv-overlay-padding-y: var(--spacing-padding-6);
+  --cctv-video-bg: #5f5f5f;
+  --cctv-overlay-bg: linear-gradient(
+  180deg,
+  rgba(0, 0, 0, 0) 0%,
+  rgba(0, 0, 0, 0.2) 100%
+  );
+  /* Live State */
+  --cctv-live-state-bg-active: var(--color-cool-gray-10);
+  --cctv-live-state-dot-active: var(--color-feedback-new);
+  --cctv-live-state-text-active: var(--color-common-99);
+  --cctv-live-state-bg-disabled: var(--color-cool-gray-55);
+  --cctv-live-state-dot-disabled: var(--color-border-strong);
+  --cctv-live-state-text-disabled: var(--color-label-disabled);
+  /* Error */
+  --cctv-error-text-color: var(--color-label-disabled);
+  --cctv-error-icon-color: var(--color-label-disabled);
+  /* Pagination */
+  --cctv-carousel-gap: var(--spacing-gap-5);
+  --cctv-pagination-move-button-size: 48px;
+  --cctv-pagination-move-button-active: var(--color-cool-gray-20);
+  --cctv-pagination-move-button-disabled: var(--color-cool-gray-85);
+  /* Controls */
+  --cctv-open-button-bg: rgba(0, 0, 0, 0.55);
+  --cctv-open-button-color: #ffffff;
+  --cctv-close-button-bg: rgba(0, 0, 0, 0.45);
 }
 
 /* templates styles는 foundation/primitives 순으로 import된 이후를 가정한다. */
@@ -957,3 +987,251 @@
 .weather-next-days-text dd:nth-of-type(n + 2) .unit {
   font-size: 1rem;
 }
+
+
+
+.cctv-video-container {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4/3;
+  min-height: 240px;
+  border-radius: var(--cctv-video-radius);
+  background: var(--cctv-video-bg);
+}
+
+.cctv-video-box {
+  width: 100%;
+  height: 100%;
+}
+
+.cctv-video-box video {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  display: block;
+  object-fit: contain;
+}
+
+.cctv-video-overlay-container {
+  padding: var(--cctv-overlay-padding-y) var(--cctv-overlay-padding-x);
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--cctv-overlay-bg);
+}
+
+.cctv-video-overlay-header {
+  width: 100%;
+  height: fit-content;
+}
+
+.cctv-video-overlay-header-upper,
+.cctv-video-overlay-header-lower {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cctv-video-live-state {
+  --theme-badge-font-weight: 400;
+  margin-right: 4px;
+}
+
+.cctv-video-live-state-dot {
+  width: 4px;
+  height: 4px;
+  margin-right: 4px;
+  border-radius: 4px;
+  background: var(--cctv-live-state-dot-active);
+}
+
+.cctv-video-live-state:where(.disabled) {
+  --badge-fill-bg-color: var(--cctv-live-state-bg-disabled);
+  --badge-fill-label-color: var(--cctv-live-state-text-disabled);
+}
+.cctv-video-live-state:where(.disabled) .cctv-video-live-state-dot {
+  background: var(--cctv-live-state-dot-disabled);
+}
+
+.cctv-video-close-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  font-size: 0;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.cctv-video-overlay-title {
+  font-weight: 600;
+  color: var(--color-common-99);
+  line-height: 1.5em;
+}
+
+.cctv-video-header-title {
+  font-size: var(--font-heading-large-size);
+}
+
+.cctv-video-footer-title {
+  font-size: var(--font-heading-xsmall-size);
+}
+
+.cctv-video-overlay-body {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.cctv-video-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.cctv-video-error-icon {
+  margin-bottom: 2px;
+  fill: var(--cctv-error-icon-color);
+}
+
+.cctv-video-error-message {
+  font-size: 13px;
+  color: var(--cctv-error-text-color);
+  line-height: 1.5em;
+  font-weight: 600;
+}
+
+.cctv-video-status-text {
+  font-size: 12px;
+  color: var(--cctv-text-muted);
+}
+
+.cctv-video-overlay-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto;
+}
+
+.cctv-video-open-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.cctv-cam-list-container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scroll-snap-type: y proximity;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.cctv-cam-list-container::-webkit-scrollbar {
+  display: none;
+}
+
+.cctv-cam-list-track {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--cctv-list-gap);
+  padding: 0;
+  margin: 0;
+  scroll-behavior: smooth;
+}
+.cctv-cam-list-track > * {
+  scroll-snap-align: start;
+}
+
+.cctv-cam-list-item .cctv-video-container {
+  max-height: 240px;
+}
+
+.cctv-pagination-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--cctv-carousel-gap);
+}
+
+.cctv-pagination-list-container {
+  width: calc(100% - var(--cctv-pagination-move-button-size) * 2 - var(--cctv-carousel-gap) * 2);
+}
+
+.cctv-pagination-viewport {
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: 100%;
+  scroll-snap-type: x proximity;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.cctv-pagination-viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.cctv-pagination-track {
+  display: flex;
+  gap: var(--cctv-carousel-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  scroll-behavior: smooth;
+}
+.cctv-pagination-track > * {
+  scroll-snap-align: start;
+}
+
+.cctv-pagination-track > li {
+  flex: 0 0 minmax(150px, 1fr);
+}
+
+.cctv-pagination-list-item {
+  cursor: pointer;
+}
+
+.cctv-pagination-list-item .cctv-video-container {
+  max-height: 152px;
+}
+
+.cctv-pagination-list-thumbnail {
+  width: 100%;
+  height: 100%;
+}
+
+.cctv-pagination-move-button {
+  width: var(--cctv-pagination-move-button-size);
+  height: var(--cctv-pagination-move-button-size);
+  border-radius: var(--cctv-pagination-move-button-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: var(--cctv-pagination-move-button-active);
+}
+.cctv-pagination-move-button.disabled {
+  background: var(--cctv-pagination-move-button-disabled);
+}
+.cctv-pagination-move-button:disabled {
+  background: var(--cctv-pagination-move-button-disabled);
+}
+
+.cctv-viewer-desktop-video-container {
+  max-height: 500px;
+}
+
+.cctv-viewer-desktop-pagination-container {
+  margin-top: var(--spacing-gap-8);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/index.scss

@@ -12,4 +12,5 @@
 @use "./auth/find-id/index.scss" as authFindId;
 @use "./auth/find-password/index.scss" as authFindPassword;
 @use "./auth/signup/styles/signup.scss" as authSignup;
-@use "./weather/styles/weather.scss" as weatherStyles;
+@use "./weather/index.scss" as weatherStyles;
+@use "./cctv/index.scss" as cctvStyles;

package/src/weather/index.scss

@@ -0,0 +1 @@
+@use "./styles/weather.scss";