@striae-org/striae 3.0.5 → 3.1.0

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

@@ -1,366 +0,0 @@
-/* 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;
-  }
-}