@striae-org/striae 3.0.4

package/app/components/user/delete-account.module.css

@@ -0,0 +1,274 @@
+/* Modal Overlay */
+.modalOverlay {
+  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;
+  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+  overflow: hidden;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+/* Modal Header */
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  border-bottom: 2px solid var(--error);
+  background-color: color-mix(in lab, var(--error) 5%, transparent);
+}
+
+.dangerTitle {
+  font-size: var(--fontSizeBodyL);
+  margin: 0;
+  font-weight: var(--fontWeightMedium);
+  color: var(--error);
+}
+
+.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 {
+  color: var(--error);
+}
+
+/* Modal Content */
+.modalContent {
+  padding: var(--spaceL);
+}
+
+/* Dividers */
+.divider {
+  height: 1px;
+  background-color: color-mix(in lab, var(--text) 15%, transparent);
+  margin: var(--spaceL) 0;
+}
+
+/* User Information Section */
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+.infoRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+}
+
+.label {
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+  font-size: var(--fontSizeBodyS);
+}
+
+.value {
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyS);
+  padding: var(--spaceS);
+  background-color: color-mix(in lab, var(--text) 5%, transparent);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  font-family: monospace;
+  word-break: break-all;
+}
+
+/* Warning Section */
+.warningSection {
+  text-align: center;
+}
+
+.warningText {
+  color: var(--error);
+  font-weight: var(--fontWeightMedium);
+  font-size: var(--fontSizeBodyM);
+  line-height: 1.5;
+  margin: 0;
+  padding: var(--spaceL);
+  background-color: color-mix(in lab, var(--error) 8%, transparent);
+  border: 1px solid color-mix(in lab, var(--error) 25%, transparent);
+  border-radius: var(--spaceXS);
+}
+
+.progressSection {
+  margin: var(--spaceL) 0;
+  padding: var(--spaceM);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--error) 25%, transparent);
+  background-color: color-mix(in lab, var(--error) 8%, transparent);
+}
+
+.progressHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spaceM);
+  margin-bottom: var(--spaceS);
+}
+
+.progressTitle {
+  margin: 0;
+  color: var(--error);
+  font-weight: var(--fontWeightMedium);
+  font-size: var(--fontSizeBodyS);
+}
+
+.progressMeta {
+  margin: 0;
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyS);
+}
+
+.progressTrack {
+  width: 100%;
+  height: var(--spaceM);
+  border-radius: var(--spaceXL);
+  overflow: hidden;
+  background-color: color-mix(in lab, var(--error) 18%, transparent);
+  border: 1px solid color-mix(in lab, var(--error) 25%, transparent);
+}
+
+.progressFill {
+  height: 100%;
+  width: 0;
+  background-color: var(--error);
+  transition: width var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.progressStatus {
+  margin: var(--spaceS) 0 0;
+  color: var(--error);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  word-break: break-word;
+}
+
+/* Success and Error Messages */
+.errorMessage {
+  background-color: color-mix(in lab, var(--error) 10%, transparent);
+  color: var(--error);
+  border: 1px solid color-mix(in lab, var(--error) 25%, transparent);
+  padding: var(--spaceM);
+  border-radius: var(--spaceXS);
+  margin: var(--spaceL) 0;
+  text-align: center;
+}
+
+.errorMessage p {
+  margin: 0;
+  font-weight: var(--fontWeightMedium);
+}
+
+.successMessage {
+  background-color: color-mix(in lab, var(--accent) 10%, transparent);
+  color: var(--accent);
+  border: 1px solid color-mix(in lab, var(--accent) 25%, transparent);
+  padding: var(--spaceM);
+  border-radius: var(--spaceXS);
+  margin: var(--spaceL) 0;
+  text-align: center;
+}
+
+.successMessage p {
+  margin: 0;
+  font-weight: var(--fontWeightMedium);
+}
+
+.successMessage p:first-child {
+  margin-bottom: var(--spaceS);
+}
+
+/* Confirmation Form */
+.confirmationForm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceL);
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.formLabel {
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+  font-size: var(--fontSizeBodyS);
+}
+
+.confirmationInput {
+  width: 100%;
+  padding: var(--spaceM);
+  border: 2px solid color-mix(in lab, var(--error) 30%, transparent);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  background: var(--backgroundLight);
+  color: var(--textBody);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  box-sizing: border-box;
+  font-family: monospace;
+}
+
+.confirmationInput:focus {
+  outline: none;
+  border-color: var(--error);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--error) 25%, transparent);
+}
+
+.confirmationInput::placeholder {
+  color: var(--textLight);
+  font-family: inherit;
+}
+
+/* Delete Button */
+.deleteButton {
+  background-color: var(--error);
+  color: var(--white);
+  border: none;
+  padding: var(--spaceL) var(--spaceXL);
+  border-radius: var(--spaceXS);
+  font-weight: var(--fontWeightMedium);
+  font-size: var(--fontSizeBodyM);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  margin-top: var(--spaceL);
+  width: 100%;
+}
+
+.deleteButton:hover:not(:disabled) {
+  background-color: color-mix(in lab, var(--error) 85%, var(--black));
+}
+
+.deleteButton:focus:not(:disabled) {
+  outline: 2px solid var(--error);
+  outline-offset: 2px;
+}
+
+.deleteButton:disabled {
+  background-color: color-mix(in lab, var(--text) 20%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}