web-to-print 0.1.0

package/dist/collection/components/wtp-logo-upload/wtp-logo-upload.css

@@ -0,0 +1,428 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  font-family: var(--wtp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  color: var(--wtp-color-text, #1e293b);
+  line-height: 1.5;
+}
+
+.wtp-logo-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.url-input-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.url-input-wrapper {
+  display: flex;
+  gap: 8px;
+}
+
+.url-input {
+  flex: 1;
+  padding: 8px 16px;
+  font-family: var(--wtp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-size: 14px;
+  border: 1px solid var(--wtp-color-border, #e2e8f0);
+  border-radius: 8px;
+  background: var(--wtp-color-bg, #ffffff);
+  color: var(--wtp-color-text, #1e293b);
+  transition-property: border-color;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+.url-input::placeholder {
+  color: var(--wtp-color-text-muted, #64748b);
+}
+.url-input:focus {
+  outline: none;
+  border-color: var(--wtp-color-primary, #2563eb);
+}
+.url-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.url-submit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-family: var(--wtp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 8px;
+  border: 1px solid var(--wtp-color-border, #e2e8f0);
+  background: var(--wtp-color-bg, #ffffff);
+  color: var(--wtp-color-text, #1e293b);
+  cursor: pointer;
+  transition-property: all;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+.url-submit-btn:hover {
+  background: var(--wtp-color-bg-muted, #f8fafc);
+}
+.url-submit-btn:focus-visible {
+  outline: 2px solid var(--wtp-color-primary, #2563eb);
+  outline-offset: 2px;
+}
+.url-submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.url-submit-btn {
+  background: var(--wtp-color-primary, #2563eb);
+  color: var(--wtp-color-bg, #ffffff);
+  border-color: var(--wtp-color-primary, #2563eb);
+  min-width: 72px;
+  justify-content: center;
+}
+.url-submit-btn:hover:not(:disabled) {
+  background: var(--wtp-color-primary-hover, #1d4ed8);
+  border-color: var(--wtp-color-primary-hover, #1d4ed8);
+}
+.url-submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.url-error {
+  margin: 0;
+  font-size: 12px;
+  color: var(--wtp-color-error, #dc2626);
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.divider::before, .divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--wtp-color-border, #e2e8f0);
+}
+
+.divider-text {
+  font-size: 14px;
+  color: var(--wtp-color-text-muted, #64748b);
+  text-transform: lowercase;
+}
+
+.upload-zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  min-height: 160px;
+  padding: 32px;
+  border: 2px dashed var(--wtp-color-border, #e2e8f0);
+  border-radius: 12px;
+  background: var(--wtp-color-bg-muted, #f8fafc);
+  cursor: pointer;
+  transition-property: border-color background-color;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+.upload-zone:hover {
+  border-color: var(--wtp-color-primary, #2563eb);
+  background: var(--wtp-color-primary-light, #dbeafe);
+}
+.upload-zone:focus-visible {
+  outline: 2px solid var(--wtp-color-primary, #2563eb);
+  outline-offset: 2px;
+}
+.upload-zone.drag-over {
+  border-color: var(--wtp-color-primary, #2563eb);
+  background: var(--wtp-color-primary-light, #dbeafe);
+  border-style: solid;
+}
+.upload-zone.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.default-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.upload-icon {
+  width: 40px;
+  height: 40px;
+  color: var(--wtp-color-secondary, #64748b);
+}
+
+.prompt-text {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--wtp-color-text, #1e293b);
+}
+
+.prompt-hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--wtp-color-text-muted, #64748b);
+}
+
+.processing-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 12px;
+}
+
+.spinner {
+  display: block;
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--wtp-color-border, #e2e8f0);
+  border-top-color: var(--wtp-color-primary, #2563eb);
+  border-radius: 50%;
+  animation: wtp-spin 0.8s linear infinite;
+}
+
+.spinner-sm {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--wtp-color-border, #e2e8f0);
+  border-top-color: var(--wtp-color-primary, #2563eb);
+  border-radius: 50%;
+  animation: wtp-spin 0.8s linear infinite;
+}
+
+@keyframes wtp-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.rejections {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rejection-item {
+  padding: 8px 16px;
+  border-radius: 8px;
+  background: var(--wtp-color-error-light, #fee2e2);
+  font-size: 14px;
+}
+.rejection-item strong {
+  color: var(--wtp-color-error, #dc2626);
+}
+.rejection-item ul {
+  margin: 4px 0 0;
+  padding-left: 24px;
+}
+.rejection-item .error {
+  color: var(--wtp-color-error, #dc2626);
+}
+.rejection-item .warning {
+  color: var(--wtp-color-warning, #d97706);
+}
+
+.pending-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.choice-card {
+  border: 1px solid var(--wtp-color-border, #e2e8f0);
+  border-radius: 12px;
+  padding: 16px;
+  background: var(--wtp-color-bg, #ffffff);
+}
+
+.choice-title {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--wtp-color-text, #1e293b);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.choice-options {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.choice-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border: 2px solid var(--wtp-color-border, #e2e8f0);
+  border-radius: 8px;
+  background: var(--wtp-color-bg, #ffffff);
+  cursor: pointer;
+  transition-property: border-color;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+.choice-option:hover:not(:disabled) {
+  border-color: var(--wtp-color-primary, #2563eb);
+}
+.choice-option:focus-visible {
+  outline: 2px solid var(--wtp-color-primary, #2563eb);
+  outline-offset: 2px;
+}
+.choice-option--disabled {
+  opacity: 0.7;
+  cursor: wait;
+}
+
+.choice-image {
+  width: 100%;
+  height: 120px;
+  object-fit: contain;
+  border-radius: 4px;
+}
+.choice-image--transparent {
+  background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 50%/12px 12px;
+}
+.choice-image--loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 4px;
+  background: var(--wtp-color-bg-muted, #f8fafc);
+}
+.choice-image--error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--wtp-color-error-light, #fee2e2);
+  padding: 8px;
+}
+
+.choice-loading-text {
+  font-size: 12px;
+  color: var(--wtp-color-text-muted, #64748b);
+}
+
+.choice-error-text {
+  font-size: 12px;
+  color: var(--wtp-color-error, #dc2626);
+  text-align: center;
+}
+
+.choice-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--wtp-color-text, #1e293b);
+}
+
+.previews {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 16px;
+}
+
+.preview-item {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border: 2px solid var(--wtp-color-border, #e2e8f0);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--wtp-color-bg, #ffffff);
+  cursor: pointer;
+  transition-property: border-color box-shadow;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+.preview-item:hover {
+  border-color: var(--wtp-color-secondary, #64748b);
+}
+.preview-item--selected {
+  border-color: var(--wtp-color-primary, #2563eb);
+  box-shadow: 0 0 0 2px var(--wtp-color-primary-fade, rgba(37, 99, 235, 0.2));
+}
+
+.preview-image {
+  width: 100%;
+  height: 100px;
+  object-fit: contain;
+  background: var(--wtp-color-bg-muted, #f8fafc);
+  padding: 8px;
+}
+
+.preview-info {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 2px;
+  font-size: 12px;
+  color: var(--wtp-color-text-muted, #64748b);
+}
+
+.preview-name {
+  font-weight: 500;
+  color: var(--wtp-color-text, #1e293b);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remove-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 9999px;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  cursor: pointer;
+  transition-property: all;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+.remove-btn:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+.remove-btn svg {
+  width: 14px;
+  height: 14px;
+}