orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/account/profile.module.css

@@ -0,0 +1,696 @@
+.ui {
+  box-sizing: border-box;
+  color: var(--orionplace-text);
+  background: var(--orionplace-surface);
+  font-size: 14px;
+  line-height: 1.7;
+}
+.profile {
+  container-type: inline-size;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  color: var(--orionplace-text);
+  background: var(--orionplace-surface);
+}
+.ui * {
+  box-sizing: border-box;
+}
+.ui .required {
+  margin: 0;
+  color: var(--orionplace-danger);
+  letter-spacing: 0;
+}
+.ui h1 {
+  margin: 0;
+  font-size: 30px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.ui h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.ui p {
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+/*
+ * Page heading and the reserved status area keep the layout from jumping.
+ * The account navigation of the surrounding account section is the only
+ * navigation on this page, so the heading row carries the two account
+ * actions instead of a second menu column.
+ */
+.heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
+  gap: 16px 32px;
+}
+.headingText {
+  display: grid;
+  gap: 8px;
+}
+.headingActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 24px;
+}
+.feedback,
+.profile .feedback.notice {
+  min-height: 52px;
+  max-width: 900px;
+  margin: 8px 0 16px;
+}
+.profile .feedback.notice {
+  align-items: center;
+}
+
+/*
+ * The identity summary and every settings group are separate framed cards,
+ * so the fields of one group read together and apart from the next group.
+ */
+.summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px 32px;
+  padding: 24px;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+}
+.avatar {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+}
+/* The avatar keeps the surface of the identity card around it. */
+.ui.avatar {
+  background: transparent;
+}
+.avatarImage {
+  display: grid;
+  place-items: center;
+  width: 96px;
+  height: 96px;
+  overflow: hidden;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--orionplace-muted);
+  font-size: 28px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.avatarImage img {
+  width: 96px;
+  height: 96px;
+  object-fit: cover;
+}
+.avatarActions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+.avatar small {
+  max-width: 200px;
+  text-align: center;
+}
+
+/* Square icon-only buttons; the accessible name comes from aria-label. */
+.ui button.iconButton {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid var(--orionplace-border);
+  color: var(--orionplace-text);
+}
+.ui button.iconButton:focus-visible {
+  border-color: var(--orionplace-text);
+  background: var(--orionplace-hover);
+}
+@media (hover: hover) {
+  .ui button.iconButton:hover:not(:disabled) {
+    border-color: var(--orionplace-text);
+    background: var(--orionplace-hover);
+  }
+}
+.iconButton svg {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.identity {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.identity h2 {
+  font-size: 16px;
+  letter-spacing: 0.08em;
+}
+.identityContacts {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--orionplace-muted);
+}
+.identityContacts li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.identityContacts svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+/* Forms keep a readable width instead of stretching across the section. */
+.content {
+  display: grid;
+  gap: 24px;
+  min-width: 0;
+  max-width: 900px;
+}
+.section {
+  container-type: inline-size;
+  display: grid;
+  min-width: 0;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  scroll-margin-top: 32px;
+}
+/* Card header: an icon tile beside the group title and its explanation. */
+.sectionHead {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 20px 24px;
+  border: 0;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+.sectionIcon {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-muted-surface);
+  color: var(--orionplace-text);
+}
+.sectionIcon svg {
+  width: 20px;
+  height: 20px;
+}
+.sectionTitle {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+.ui .sectionTitle h2 {
+  font-size: 16px;
+  letter-spacing: 0.08em;
+}
+.sectionBody {
+  padding: 24px;
+}
+/* Card footer: the save action, apart from the fields it saves. */
+.sectionFoot {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 16px 24px;
+  padding: 16px 24px;
+  border: 0;
+  border-top: 1px solid var(--orionplace-border);
+  background: var(--orionplace-muted-surface);
+}
+.fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px 24px;
+}
+.wide {
+  grid-column: 1 / -1;
+}
+.emailForm,
+.preferences {
+  display: grid;
+  gap: 20px;
+}
+.preferences {
+  border: 0;
+  border-top: 1px solid var(--orionplace-border);
+}
+
+/* Fields: meta labels above square inputs. */
+.ui label {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+/* :where keeps this base rule overridable by components with their own fields. */
+.ui input:where(:not([type="file"]):not([type="checkbox"])) {
+  width: 100%;
+  min-width: 0;
+  height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0;
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+  font: inherit;
+  font-size: 14px;
+  letter-spacing: normal;
+  text-transform: none;
+  outline: none;
+}
+.ui input:focus {
+  border-color: var(--orionplace-text);
+}
+@media (hover: hover) {
+  .ui input:hover:not(:disabled) {
+    border-color: var(--orionplace-text);
+  }
+}
+.ui input[aria-invalid="true"] {
+  border-color: var(--orionplace-danger);
+}
+.ui small {
+  min-height: 18px;
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-transform: none;
+}
+.ui .error {
+  color: var(--orionplace-danger);
+}
+
+/* Buttons: secondary by default, black primary for saving. */
+.ui button:where(:not([role="combobox"])) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: fit-content;
+  height: 44px;
+  padding: 0 24px;
+  border: 1px solid var(--orionplace-text);
+  border-radius: 0;
+  background: transparent;
+  color: var(--orionplace-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  outline: none;
+}
+.ui button:where(:not([role="combobox"])):focus-visible {
+  background: var(--orionplace-hover);
+}
+@media (hover: hover) {
+  .ui button:where(:not([role="combobox"])):hover:not(:disabled) {
+    background: var(--orionplace-hover);
+  }
+}
+.ui button.primary {
+  border-color: var(--orionplace-accent);
+  background: var(--orionplace-accent);
+  color: var(--orionplace-surface);
+}
+.ui button.primary:focus-visible {
+  background: var(--orionplace-accent);
+  opacity: 0.85;
+}
+@media (hover: hover) {
+  .ui button.primary:hover:not(:disabled) {
+    background: var(--orionplace-accent);
+    opacity: 0.85;
+  }
+}
+.ui button:disabled,
+.ui input:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.headingActions button,
+.feedback button,
+.emailForm > button,
+.actions button:not(.primary) {
+  height: auto;
+  padding: 2px 0;
+  border: 0;
+  border-bottom: 1px solid currentColor;
+  background: transparent;
+}
+.headingActions button:focus-visible,
+.feedback button:focus-visible,
+.emailForm > button:focus-visible,
+.actions button:not(.primary):focus-visible {
+  background: transparent;
+  color: var(--orionplace-muted);
+}
+@media (hover: hover) {
+  .headingActions button:hover:not(:disabled),
+  .feedback button:hover:not(:disabled),
+  .emailForm > button:hover:not(:disabled),
+  .actions button:not(.primary):hover:not(:disabled) {
+    background: transparent;
+    color: var(--orionplace-muted);
+  }
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px 24px;
+}
+.ui .switch {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--orionplace-text);
+  font-size: 14px;
+  letter-spacing: normal;
+  text-transform: none;
+  cursor: pointer;
+}
+.switchCopy {
+  display: grid;
+  gap: 2px;
+}
+.switchCopy strong {
+  font-size: 14px;
+  font-weight: 500;
+}
+.switchCopy small {
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  letter-spacing: normal;
+  text-transform: none;
+}
+.switch input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+.switchTrack {
+  width: 46px;
+  height: 26px;
+  flex: 0 0 46px;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 999px;
+  background: var(--orionplace-muted-surface);
+  transition: background-color 0.2s ease,border-color 0.2s ease;
+}
+.switchTrack::after {
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 2px;
+  border-radius: 50%;
+  background: var(--orionplace-surface);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
+  content: '';
+  transition: transform 0.2s ease;
+}
+.switch input:checked + .switchTrack {
+  border-color: var(--orionplace-accent);
+  background: var(--orionplace-accent);
+}
+.switch input:checked + .switchTrack::after {
+  transform: translateX(20px);
+}
+.switch input:focus-visible + .switchTrack {
+  border-color: var(--orionplace-muted);
+}
+.switch input:disabled + .switchTrack {
+  cursor: default;
+  opacity: 0.5;
+}
+.check input {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  border-radius: 0;
+  accent-color: var(--orionplace-accent);
+  cursor: pointer;
+}
+
+/* Account deletion: a red action and the confirmation checkbox. */
+.ui button.danger {
+  border-color: var(--orionplace-danger);
+  background: var(--orionplace-danger);
+  color: var(--orionplace-surface);
+}
+.ui button.danger:focus-visible {
+  background: var(--orionplace-danger);
+  opacity: 0.85;
+}
+@media (hover: hover) {
+  .ui button.danger:hover:not(:disabled) {
+    background: var(--orionplace-danger);
+    opacity: 0.85;
+  }
+}
+.deleteSection .sectionIcon {
+  color: var(--orionplace-danger);
+}
+.ui p.deleteError {
+  color: var(--orionplace-danger);
+}
+.ui label.consent {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  color: var(--orionplace-text);
+  font-size: 14px;
+  letter-spacing: normal;
+  text-transform: none;
+  cursor: pointer;
+}
+.consent input {
+  width: 18px;
+  height: 18px;
+  margin: 3px 0 0;
+  flex-shrink: 0;
+  border-radius: 0;
+  accent-color: var(--orionplace-danger);
+  cursor: pointer;
+}
+
+/* Sign-in panel. */
+.signin {
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+  padding: 32px;
+  gap: 12px;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0;
+  align-content: start;
+}
+.profile > .signin {
+  margin-top: 32px;
+}
+.signinHeading {
+  display: grid;
+  gap: 8px;
+  text-align: center;
+}
+.signinHeading > h1,
+.signinHeading > h2 {
+  font-size: 20px;
+  line-height: 1.3;
+}
+.signinField,
+.field {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+}
+.signin .error {
+  overflow-wrap: anywhere;
+}
+.signin svg {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.signinActions {
+  display: grid;
+  gap: 16px;
+}
+.signin .signinCooldown {
+  align-items: center;
+  color: var(--orionplace-text);
+  font-variant-numeric: tabular-nums;
+}
+.signin > button.primary,
+.signinActions .primary {
+  width: 100%;
+}
+.signinActions .signinBack {
+  justify-self: start;
+  height: auto;
+  padding: 2px 0;
+  border: 0;
+  border-bottom: 1px solid currentColor;
+}
+.signinActions .signinBack:focus-visible {
+  background: transparent;
+  color: var(--orionplace-muted);
+}
+@media (hover: hover) {
+  .signinActions .signinBack:hover:not(:disabled) {
+    background: transparent;
+    color: var(--orionplace-muted);
+  }
+}
+.signinActions .signinBack svg {
+  width: 14px;
+  height: 14px;
+}
+
+/*
+ * Waiting after a confirmed sign-in: a ring spinner and an indeterminate
+ * line replace the form while Application Load refreshes and the next page
+ * opens. The text for screen readers stays visually hidden.
+ */
+.signinWaiting {
+  display: grid;
+  justify-items: center;
+  gap: 24px;
+  padding: 16px 0 8px;
+}
+.signinSpinner {
+  box-sizing: border-box;
+  display: block;
+  width: 36px;
+  height: 36px;
+  border: 2px solid var(--orionplace-border);
+  border-top-color: var(--orionplace-text);
+  border-radius: 50%;
+  animation: op-signin-spin 0.8s linear infinite;
+}
+.signinProgress {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 2px;
+  overflow: hidden;
+  background: var(--orionplace-border);
+}
+.signinProgress::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40%;
+  height: 100%;
+  background: var(--orionplace-text);
+  content: "";
+  animation: op-signin-slide 1.2s ease-in-out infinite;
+}
+@keyframes op-signin-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes op-signin-slide {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+/* Reduced motion keeps a static ring and a partly filled line. */
+@media (prefers-reduced-motion: reduce) {
+  .signinSpinner,
+  .signinProgress::after {
+    animation: none;
+  }
+}
+
+/*
+ * The page and each form card follow their own width (472px is the old
+ * 520px screen step less the page padding), so a narrow column shows the
+ * phone layout on every screen. The sign-in card's own padding follows the
+ * container around it.
+ */
+@container (max-width: 472px) {
+  .summary {
+    gap: 16px 24px;
+    padding: 16px;
+  }
+  .sectionHead,
+  .sectionBody,
+  .sectionFoot {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+  .signin {
+    padding: 24px 16px;
+  }
+  .fields {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .ui h1 {
+    font-size: 24px;
+  }
+  .actions button.primary,
+  .sectionFoot button.primary,
+  .sectionFoot button.danger {
+    width: 100%;
+  }
+}
+
+.phoneInput {
+  position: relative;
+  display: block;
+}
+.phoneFlag {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 24px;
+  height: 16px;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.ui .phoneInput input.phoneWithFlag {
+  padding-left: 48px;
+}