@striae-org/striae 3.0.4

package/app/components/sidebar/hash/hash-utility.module.css

@@ -0,0 +1,366 @@
+/* Modal Overlay */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 50%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+}
+
+
+/* Modal Container */
+.modal {
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  width: 90%;
+  max-width: 600px;
+  max-height: 90vh;
+  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+  display: flex;
+  flex-direction: column;
+}
+
+
+/* Header */
+.header {
+  display: flex;
+  font-size: var(--fontSizeBodyL);
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  color: var(--textTitle);
+  flex-shrink: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: var(--fontSizeBodyL);
+  font-weight: 600;
+  color: var(--textTitle);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: var(--fontSizeH5);
+  cursor: pointer;
+  padding: var(--spaceS);
+  color: var(--textLight);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.closeButton:hover:not(:disabled) {
+  color: var(--text);
+}
+
+.closeButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Content */
+.content {
+  padding: var(--spaceL);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.description {
+  color: var(--textBody);
+  line-height: 1.5;
+  margin: 0 0 var(--spaceL) 0;
+  font-size: var(--fontSizeBodyM);
+}
+
+/* Upload Area */
+.uploadWrapper {
+  position: relative;
+  margin-bottom: var(--spaceL);
+}
+
+.uploadArea {
+  border: 2px dashed color-mix(in lab, var(--primary) 30%, transparent);
+  border-radius: var(--spaceXS);
+  background: color-mix(in lab, var(--primary) 5%, transparent);
+  padding: var(--spaceXL);
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.uploadArea:hover {
+  border-color: var(--primary);
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  transform: translateY(-1px);
+}
+
+.uploadArea:focus-visible {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 20%, transparent);
+}
+
+.uploadArea.dragOver {
+  border-color: var(--accent);
+  background: color-mix(in lab, var(--accent) 15%, transparent);
+  border-style: solid;
+  transform: scale(1.02);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--accent) 30%, transparent);
+}
+
+.uploadArea[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  border-color: color-mix(in lab, var(--text) 15%, transparent);
+  background: color-mix(in lab, var(--background) 95%, transparent);
+}
+
+.uploadArea[aria-disabled="true"]:hover {
+  border-color: color-mix(in lab, var(--text) 15%, transparent);
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  transform: none;
+}
+
+.uploadContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spaceS);
+}
+
+.uploadIcon {
+  font-size: var(--fontSizeBodyL);
+  opacity: 0.7;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.dragOver .uploadIcon {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.uploadText {
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textBody);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  flex: 1;
+}
+
+.dragOver .uploadText {
+  color: var(--accent);
+}
+
+.uploadText strong {
+  color: var(--primary);
+  font-weight: var(--fontWeightSemibold);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.dragOver .uploadText strong {
+  color: var(--accent);
+  font-weight: var(--fontWeightBold);
+}
+
+.uploadSubtext {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textLight);
+}
+
+.hiddenInput {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+/* Verification Status */
+.verifyingSection {
+  margin: var(--spaceM) 0;
+  padding: var(--spaceM);
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spaceM);
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--divider);
+  border-top: 3px solid var(--primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.verifyingText {
+  color: var(--textTitle);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+}
+
+/* Results Section */
+.resultSection {
+  margin-top: var(--spaceM);
+  padding: var(--spaceM);
+  border-radius: var(--spaceXS);
+}
+
+.resultSection.success {
+  background: color-mix(in lab, var(--success) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--success) 20%, transparent);
+}
+
+.resultSection.failure {
+  background: color-mix(in lab, var(--error) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--error) 20%, transparent);
+}
+
+.resultHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--spaceS);
+  margin-bottom: var(--spaceM);
+}
+
+.resultIcon {
+  font-size: var(--fontSizeBodyL);
+  line-height: 1;
+}
+
+.resultIcon.successIcon {
+  color: var(--success);
+}
+
+.resultIcon.failureIcon {
+  color: var(--error);
+}
+
+.resultTitle {
+  font-size: var(--fontSizeBodyL);
+  font-weight: var(--fontWeightSemibold);
+  margin: 0;
+}
+
+.resultSection.success .resultTitle {
+  color: var(--success);
+}
+
+.resultSection.failure .resultTitle {
+  color: var(--error);
+}
+
+/* Result Details */
+.resultDetails {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+  margin-bottom: var(--spaceM);
+  background: color-mix(in lab, var(--background) 50%, transparent);
+  padding: var(--spaceS);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 5%, transparent);
+}
+
+.resultRow {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spaceXS);
+}
+
+.resultLabel {
+  font-weight: var(--fontWeightMedium);
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyXS);
+  flex-shrink: 0;
+}
+
+.resultValue {
+  color: var(--text);
+  font-family: var(--fontFamilyMono);
+  font-size: var(--fontSizeBodyXS);
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  text-align: left;
+  width: 100%;
+}
+
+/* Special handling for error messages - use normal text wrapping */
+.resultValue.errorMessage {
+  font-family: var(--fontFamilyBody);
+  word-break: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  text-align: left;
+}
+
+.resultMessage {
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  line-height: 1.6;
+  padding: var(--spaceS);
+  border-radius: var(--spaceXS);
+  margin-top: var(--spaceXS);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  white-space: pre-wrap;
+}
+
+.resultSection.success .resultMessage {
+  background: color-mix(in lab, var(--success) 8%, transparent);
+  color: var(--success);
+}
+
+.resultSection.failure .resultMessage {
+  background: color-mix(in lab, var(--error) 8%, transparent);
+  color: var(--error);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .modal {
+    width: 95%;
+    max-height: 90vh;
+  }
+  
+  .content {
+    padding: var(--spaceM);
+  }
+  
+  .uploadArea {
+    padding: var(--spaceL);
+  }
+  
+  .resultRow {
+    flex-direction: column;
+    gap: var(--spaceXS);
+  }
+  
+  .resultValue {
+    text-align: left;
+  }
+}