orionplace-react 0.7.8 → 0.8.0

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

@@ -1,696 +0,0 @@
-.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;
-}