snow-flow 3.4.35 → 3.4.39

package/website/components/code-display/CodeDisplay.css

@@ -0,0 +1,583 @@
+/* Code Display Component - Terminal Style Black/White Theme */
+
+.sf-code-display {
+  background: #1a1a1a;
+  border-radius: 12px;
+  box-shadow: 
+    0 10px 30px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow: hidden;
+  position: relative;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: 100%;
+  margin: 1rem 0;
+}
+
+.sf-code-display--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Header */
+.sf-code-display__header {
+  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.sf-code-display__header::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+}
+
+/* Window Controls */
+.sf-code-display__window-controls {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.sf-code-display__control {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.sf-code-display__control--close {
+  background: linear-gradient(135deg, #ff5f57, #ff3b30);
+}
+
+.sf-code-display__control--minimize {
+  background: linear-gradient(135deg, #ffbd2e, #ff9500);
+}
+
+.sf-code-display__control--maximize {
+  background: linear-gradient(135deg, #28cd41, #30d158);
+}
+
+.sf-code-display__control:hover {
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Title */
+.sf-code-display__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #ffffff;
+  font-weight: 500;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.sf-code-display__icon {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.sf-code-display__filename {
+  font-size: 0.9rem;
+  opacity: 0.9;
+}
+
+/* Copy Button */
+.sf-code-display__copy {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.sf-code-display__copy::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  transition: left 0.5s ease;
+}
+
+.sf-code-display__copy:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-1px);
+}
+
+.sf-code-display__copy:hover::before {
+  left: 100%;
+}
+
+.sf-code-display__copy--copied {
+  background: rgba(76, 217, 100, 0.2);
+  border-color: #4cd964;
+  color: #4cd964;
+}
+
+.sf-code-display__copy-text {
+  transition: all 0.2s ease;
+}
+
+/* Body */
+.sf-code-display__body {
+  display: flex;
+  max-height: inherit;
+  overflow: hidden;
+  background: #0d0d0d;
+}
+
+/* Line Numbers */
+.sf-code-display__line-numbers {
+  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 1rem 0.75rem 1rem 1rem;
+  min-width: 3rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.4);
+  user-select: none;
+  position: relative;
+}
+
+.sf-code-display__line-numbers::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+}
+
+.sf-code-display__line-number {
+  display: block;
+  padding: 0;
+  transition: color 0.2s ease;
+  font-variant-numeric: tabular-nums;
+}
+
+.sf-code-display__line-number:hover {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* Content */
+.sf-code-display__content {
+  flex: 1;
+  overflow: auto;
+  max-height: inherit;
+}
+
+.sf-code-display__pre {
+  margin: 0;
+  padding: 1rem;
+  background: transparent;
+  overflow: visible;
+}
+
+.sf-code-display__code {
+  color: #ffffff;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  border: none;
+  outline: none;
+  resize: none;
+  white-space: pre;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.sf-code-display__code[contenteditable="true"]:focus {
+  outline: 2px solid rgba(255, 255, 255, 0.3);
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
+/* Syntax Highlighting - Black/White Theme */
+.sf-code-comment {
+  color: #6a6a6a;
+  font-style: italic;
+}
+
+.sf-code-string {
+  color: #d4d4d4;
+  position: relative;
+}
+
+.sf-code-string::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: rgba(212, 212, 212, 0.3);
+}
+
+.sf-code-keyword {
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.sf-code-number {
+  color: #b8b8b8;
+  font-weight: 500;
+}
+
+.sf-code-function {
+  color: #f0f0f0;
+  font-weight: 500;
+}
+
+.sf-code-property {
+  color: #e0e0e0;
+}
+
+.sf-code-operator {
+  color: #cccccc;
+  font-weight: 500;
+}
+
+/* Terminal Cursor */
+.sf-code-display__cursor {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  width: 8px;
+  height: 1rem;
+  background: rgba(255, 255, 255, 0.7);
+  animation: sf-cursor-blink 1.2s infinite;
+  border-radius: 1px;
+}
+
+@keyframes sf-cursor-blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+
+/* Copy Feedback */
+.sf-code-display__copy-feedback {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.9);
+  color: #4cd964;
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 500;
+  z-index: 10;
+  animation: sf-copy-feedback 2s ease-in-out;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(76, 217, 100, 0.3);
+}
+
+@keyframes sf-copy-feedback {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+  20% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  80% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+
+/* Scrollbar Styling */
+.sf-code-display__content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.sf-code-display__content::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.sf-code-display__content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  transition: background 0.3s ease;
+}
+
+.sf-code-display__content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.sf-code-display__content::-webkit-scrollbar-corner {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Firefox scrollbar */
+.sf-code-display__content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .sf-code-display {
+    font-size: 12px;
+    border-radius: 8px;
+    margin: 0.5rem 0;
+  }
+
+  .sf-code-display__header {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .sf-code-display__title {
+    position: static;
+    transform: none;
+    order: 1;
+    flex: 1;
+    justify-content: center;
+  }
+
+  .sf-code-display__window-controls {
+    order: 0;
+  }
+
+  .sf-code-display__copy {
+    order: 2;
+    padding: 0.4rem 0.6rem;
+  }
+
+  .sf-code-display__copy-text {
+    display: none;
+  }
+
+  .sf-code-display__line-numbers {
+    padding: 0.75rem 0.5rem;
+    min-width: 2.5rem;
+    font-size: 0.8rem;
+  }
+
+  .sf-code-display__pre {
+    padding: 0.75rem;
+  }
+
+  .sf-code-display__filename {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .sf-code-display {
+    font-size: 11px;
+  }
+
+  .sf-code-display__header {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .sf-code-display__window-controls {
+    flex: 1;
+  }
+
+  .sf-code-display__copy {
+    padding: 0.3rem;
+    min-width: 32px;
+    justify-content: center;
+  }
+
+  .sf-code-display__line-numbers {
+    min-width: 2rem;
+    padding: 0.5rem 0.25rem;
+    font-size: 0.75rem;
+  }
+
+  .sf-code-display__pre {
+    padding: 0.5rem;
+  }
+}
+
+/* Light Theme Alternative */
+@media (prefers-color-scheme: light) {
+  .sf-code-display.sf-code-display--light {
+    background: #ffffff;
+    box-shadow: 
+      0 10px 30px rgba(0, 0, 0, 0.1),
+      0 0 0 1px rgba(0, 0, 0, 0.1);
+  }
+
+  .sf-code-display--light .sf-code-display__header {
+    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+    color: #000000;
+  }
+
+  .sf-code-display--light .sf-code-display__body {
+    background: #fafafa;
+  }
+
+  .sf-code-display--light .sf-code-display__line-numbers {
+    background: linear-gradient(135deg, #f0f0f0 0%, #fafafa 100%);
+    border-right-color: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .sf-code-display--light .sf-code-display__code {
+    color: #000000;
+  }
+
+  .sf-code-display--light .sf-code-comment {
+    color: #6a737d;
+  }
+
+  .sf-code-display--light .sf-code-string {
+    color: #2a2a2a;
+  }
+
+  .sf-code-display--light .sf-code-keyword {
+    color: #000000;
+    font-weight: 700;
+  }
+
+  .sf-code-display--light .sf-code-number {
+    color: #333333;
+  }
+
+  .sf-code-display--light .sf-code-function {
+    color: #111111;
+  }
+
+  .sf-code-display--light .sf-code-property {
+    color: #444444;
+  }
+
+  .sf-code-display--light .sf-code-operator {
+    color: #222222;
+  }
+
+  .sf-code-display--light .sf-code-display__cursor {
+    background: rgba(0, 0, 0, 0.7);
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .sf-code-display {
+    border: 2px solid #ffffff;
+  }
+
+  .sf-code-display__code {
+    color: #ffffff;
+  }
+
+  .sf-code-comment {
+    color: #888888;
+  }
+
+  .sf-code-string {
+    color: #ffffff;
+  }
+
+  .sf-code-keyword {
+    color: #ffffff;
+    font-weight: 900;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .sf-code-display,
+  .sf-code-display__cursor,
+  .sf-code-display__copy,
+  .sf-code-display__copy::before,
+  .sf-code-display__copy-feedback,
+  .sf-code-display__control {
+    animation: none;
+    transition: none;
+  }
+
+  .sf-code-display__cursor {
+    opacity: 0.7;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .sf-code-display {
+    background: white;
+    color: black;
+    box-shadow: none;
+    border: 1px solid #ccc;
+  }
+
+  .sf-code-display__header,
+  .sf-code-display__cursor,
+  .sf-code-display__copy-feedback {
+    display: none;
+  }
+
+  .sf-code-display__body {
+    background: white;
+  }
+
+  .sf-code-display__code,
+  .sf-code-comment,
+  .sf-code-string,
+  .sf-code-keyword,
+  .sf-code-number,
+  .sf-code-function,
+  .sf-code-property,
+  .sf-code-operator {
+    color: black;
+  }
+
+  .sf-code-display__line-numbers {
+    color: #666666;
+  }
+}