gw-admin 0.1.0

package/styles.css

@@ -0,0 +1,901 @@
+:root {
+  --gw-admin-background: #f7f7f7;
+  --gw-admin-surface: #ffffff;
+  --gw-admin-surface-muted: #f5f5f5;
+  --gw-admin-text: #171717;
+  --gw-admin-text-muted: #666666;
+  --gw-admin-border: #d4d4d4;
+  --gw-admin-border-soft: #e5e5e5;
+  --gw-admin-primary: #171717;
+  --gw-admin-primary-text: #ffffff;
+  --gw-admin-danger: #b91c1c;
+  --gw-admin-danger-soft: #fecaca;
+  --gw-admin-error-background: #fef2f2;
+  --gw-admin-focus: #404040;
+  --gw-admin-sidebar-width: 15rem;
+  --gw-admin-mobile-header-height: 3.75rem;
+  --gw-admin-content-width: 80rem;
+  --gw-admin-radius: 0.25rem;
+}
+
+.gw-admin-shell,
+.gw-admin-shell *,
+.gw-admin-shell *::before,
+.gw-admin-shell *::after {
+  box-sizing: border-box;
+}
+
+.gw-admin-shell {
+  min-height: 100svh;
+  background: var(--gw-admin-background);
+  color: var(--gw-admin-text);
+}
+
+.gw-admin-shell__body {
+  display: flex;
+  min-height: 100svh;
+}
+
+.gw-admin-shell__content {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  padding-inline: 1rem;
+}
+
+.gw-admin-sidebar {
+  position: sticky;
+  top: 0;
+  display: none;
+  width: var(--gw-admin-sidebar-width);
+  height: 100svh;
+  flex: 0 0 var(--gw-admin-sidebar-width);
+  overflow-y: auto;
+  border-right: 1px solid var(--gw-admin-border-soft);
+  background: var(--gw-admin-surface);
+}
+
+.gw-admin-sidebar__brand {
+  display: flex;
+  min-height: 12.5rem;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+.gw-admin-sidebar__brand img,
+.gw-admin-mobile-header__brand img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.gw-admin-sidebar__navigation {
+  padding-block: 0.5rem 2rem;
+}
+
+.gw-admin-navigation__list {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gw-admin-navigation__link {
+  display: flex;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-inline: 1.5rem;
+  border-left: 3px solid transparent;
+  color: var(--gw-admin-text-muted);
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.gw-admin-navigation__link:hover,
+.gw-admin-navigation__link:focus-visible,
+.gw-admin-navigation__link.is-current {
+  background: var(--gw-admin-surface-muted);
+  color: var(--gw-admin-text);
+}
+
+.gw-admin-navigation__link.is-current {
+  border-left-color: var(--gw-admin-primary);
+}
+
+.gw-admin-mobile-header {
+  position: sticky;
+  z-index: 50;
+  top: 0;
+  display: flex;
+  height: var(--gw-admin-mobile-header-height);
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--gw-admin-border-soft);
+  background: var(--gw-admin-surface);
+  padding-inline: 1rem 0.5rem;
+}
+
+.gw-admin-mobile-header__brand {
+  display: flex;
+  max-width: 9rem;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+.gw-admin-icon-button {
+  display: inline-grid;
+  width: 2.75rem;
+  height: 2.75rem;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--gw-admin-text);
+  cursor: pointer;
+  font: inherit;
+}
+
+.gw-admin-icon-button:hover,
+.gw-admin-icon-button:focus-visible {
+  background: var(--gw-admin-surface-muted);
+}
+
+.gw-admin-icon-button svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.gw-admin-drawer-backdrop {
+  position: fixed;
+  z-index: 60;
+  inset: 0;
+  background: rgb(0 0 0 / 40%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease;
+}
+
+.gw-admin-drawer-backdrop.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.gw-admin-drawer {
+  position: fixed;
+  z-index: 70;
+  inset-block: 0;
+  right: 0;
+  display: flex;
+  width: min(22rem, 82vw);
+  flex-direction: column;
+  background: var(--gw-admin-surface);
+  transform: translateX(100%);
+  transition: transform 180ms ease;
+  pointer-events: none;
+}
+
+.gw-admin-drawer.is-open {
+  transform: translateX(0);
+  pointer-events: auto;
+}
+
+.gw-admin-drawer__header {
+  display: flex;
+  min-height: var(--gw-admin-mobile-header-height);
+  align-items: center;
+  justify-content: flex-end;
+  padding-inline: 0.5rem;
+}
+
+.gw-admin-page {
+  width: 100%;
+  max-width: var(--gw-admin-content-width);
+  margin-inline: auto;
+  padding-bottom: 4rem;
+}
+
+.gw-admin-page--detail {
+  max-width: 64rem;
+}
+
+.gw-admin-page--form {
+  max-width: 56rem;
+}
+
+.gw-admin-dashboard__grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.gw-admin-dashboard__item {
+  display: grid;
+  gap: 0.5rem;
+  min-height: 7rem;
+  align-content: center;
+  border: 1px solid var(--gw-admin-border-soft);
+  background: var(--gw-admin-surface);
+  padding: 1.5rem;
+  color: var(--gw-admin-text);
+  text-decoration: none;
+}
+
+.gw-admin-dashboard__item:hover,
+.gw-admin-dashboard__item:focus-visible {
+  border-color: var(--gw-admin-text-muted);
+}
+
+.gw-admin-dashboard__item strong {
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+
+.gw-admin-dashboard__item span {
+  color: var(--gw-admin-text-muted);
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.gw-admin-account-page {
+  max-width: 64rem;
+}
+
+.gw-admin-account-page__section {
+  max-width: 42rem;
+  border: 1px solid var(--gw-admin-border-soft);
+  background: var(--gw-admin-surface);
+  padding: 1.5rem;
+}
+
+.gw-admin-account-page__section h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.4;
+}
+
+.gw-admin-account-page__section p {
+  margin: 0.75rem 0 0;
+  color: var(--gw-admin-text-muted);
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.gw-admin-account-page__section .gw-admin-logout {
+  margin-top: 1.5rem;
+}
+
+.gw-admin-page-header {
+  display: flex;
+  min-height: 12.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.gw-admin-page-header__heading {
+  min-width: 0;
+}
+
+.gw-admin-page-header__title {
+  margin: 0.75rem 0 0;
+  color: var(--gw-admin-text);
+  font-size: clamp(2rem, 5vw, 2.5rem);
+  font-weight: 700;
+  line-height: 1.15;
+}
+
+.gw-admin-page-header__heading > .gw-admin-page-header__title:first-child {
+  margin-top: 0;
+}
+
+.gw-admin-page-header__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.gw-admin-breadcrumbs {
+  color: var(--gw-admin-text-muted);
+  font-size: 0.875rem;
+}
+
+.gw-admin-breadcrumbs__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gw-admin-breadcrumbs__item {
+  display: flex;
+  align-items: center;
+}
+
+.gw-admin-breadcrumbs__separator {
+  margin-inline: 0.375rem;
+}
+
+.gw-admin-breadcrumbs__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.gw-admin-breadcrumbs__link:hover,
+.gw-admin-breadcrumbs__link:focus-visible {
+  color: var(--gw-admin-text);
+}
+
+.gw-admin-button {
+  display: inline-flex;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--gw-admin-radius);
+  padding-inline: 1.25rem;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.2;
+  text-decoration: none;
+}
+
+.gw-admin-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.gw-admin-button--primary {
+  background: var(--gw-admin-primary);
+  color: var(--gw-admin-primary-text);
+}
+
+.gw-admin-button--muted {
+  background: #404040;
+  color: #ffffff;
+}
+
+.gw-admin-button--secondary {
+  border-color: var(--gw-admin-border);
+  background: var(--gw-admin-surface);
+  color: var(--gw-admin-text);
+}
+
+.gw-admin-button--danger {
+  border-color: var(--gw-admin-danger-soft);
+  background: var(--gw-admin-surface);
+  color: var(--gw-admin-danger);
+}
+
+.gw-admin-button--disabled {
+  border-color: var(--gw-admin-border-soft);
+  color: #b0b0b0;
+  cursor: default;
+}
+
+.gw-admin-logout {
+  margin-top: 1.5rem;
+}
+
+.gw-admin-search {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.gw-admin-search__query {
+  min-width: min(100%, 14rem);
+  flex: 1;
+}
+
+.gw-admin-search__filter {
+  min-width: min(100%, 10rem);
+}
+
+.gw-admin-input {
+  width: 100%;
+  min-height: 2.75rem;
+  border: 1px solid var(--gw-admin-border);
+  border-radius: var(--gw-admin-radius);
+  outline: 0;
+  background: var(--gw-admin-surface);
+  padding-inline: 0.75rem;
+  color: var(--gw-admin-text);
+  font: inherit;
+  font-size: 0.875rem;
+}
+
+.gw-admin-input:focus {
+  border-color: var(--gw-admin-focus);
+}
+
+.gw-admin-input:disabled {
+  background: var(--gw-admin-surface-muted);
+}
+
+.gw-admin-input::placeholder {
+  color: #a3a3a3;
+}
+
+.gw-admin-textarea {
+  min-height: 8rem;
+  padding-block: 0.75rem;
+  resize: vertical;
+}
+
+.gw-admin-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--gw-admin-border-soft);
+  background: var(--gw-admin-surface);
+}
+
+.gw-admin-table {
+  width: 100%;
+  min-width: 53.75rem;
+  border-collapse: collapse;
+  color: var(--gw-admin-text-muted);
+  font-size: 0.875rem;
+  text-align: left;
+}
+
+.gw-admin-table thead {
+  background: var(--gw-admin-surface-muted);
+  color: #404040;
+}
+
+.gw-admin-table th {
+  border-bottom: 1px solid var(--gw-admin-border-soft);
+  padding: 0.75rem 1rem;
+  font-weight: 700;
+}
+
+.gw-admin-table td {
+  max-width: 20rem;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 1rem;
+  vertical-align: top;
+}
+
+.gw-admin-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.gw-admin-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: inherit;
+  text-decoration: none;
+}
+
+.gw-admin-table__primary-link {
+  color: var(--gw-admin-text);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.gw-admin-table__primary-link:hover,
+.gw-admin-table__primary-link:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 0.25rem;
+}
+
+.gw-admin-table__value {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.gw-admin-table__actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.gw-admin-table__actions a {
+  color: var(--gw-admin-text-muted);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.gw-admin-table__actions a:hover,
+.gw-admin-table__actions a:focus-visible {
+  color: var(--gw-admin-text);
+}
+
+.gw-admin-table__empty {
+  padding-block: 4rem !important;
+  color: var(--gw-admin-text-muted);
+  text-align: center;
+}
+
+.gw-admin-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.25rem;
+  color: var(--gw-admin-text-muted);
+  font-size: 0.875rem;
+}
+
+.gw-admin-pagination p {
+  margin: 0;
+}
+
+.gw-admin-pagination__navigation {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.gw-admin-detail {
+  margin: 0;
+  border-top: 1px solid var(--gw-admin-border);
+  background: var(--gw-admin-surface);
+}
+
+.gw-admin-detail__row {
+  display: grid;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--gw-admin-border-soft);
+  padding-block: 1rem;
+}
+
+.gw-admin-detail__row.is-long {
+  min-height: 8rem;
+}
+
+.gw-admin-detail dt {
+  color: var(--gw-admin-text-muted);
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.gw-admin-detail dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--gw-admin-text);
+  font-size: 0.875rem;
+  line-height: 1.75;
+}
+
+.gw-admin-page__footer-action {
+  margin-top: 2rem;
+}
+
+.gw-admin-crud-form__fields {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.gw-admin-field {
+  display: block;
+}
+
+.gw-admin-field__label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #333333;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.gw-admin-field__required {
+  margin-left: 0.25rem;
+  color: var(--gw-admin-danger);
+}
+
+.gw-admin-field__description {
+  display: block;
+  margin-top: 0.5rem;
+  color: var(--gw-admin-text-muted);
+  font-size: 0.75rem;
+}
+
+.gw-admin-field-error {
+  display: block;
+  margin: 0.5rem 0 0;
+  color: var(--gw-admin-danger);
+  font-size: 0.875rem;
+}
+
+.gw-admin-checkbox {
+  display: flex;
+  min-height: 2.75rem;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--gw-admin-text-muted);
+  font-size: 0.875rem;
+}
+
+.gw-admin-checkbox__input {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.gw-admin-alert {
+  border: 1px solid var(--gw-admin-border);
+  border-radius: var(--gw-admin-radius);
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+}
+
+.gw-admin-alert--error {
+  border-color: var(--gw-admin-danger-soft);
+  background: var(--gw-admin-error-background);
+  color: var(--gw-admin-danger);
+}
+
+.gw-admin-attachment-list {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gw-admin-attachment-list__link,
+.gw-admin-rich-text-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--gw-admin-text);
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 0.25rem;
+}
+
+.gw-admin-attachment-list__empty,
+.gw-admin-file-input__empty {
+  color: #a3a3a3;
+}
+
+.gw-admin-file-input__dropzone {
+  display: flex;
+  min-height: 8rem;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--gw-admin-border);
+  background: var(--gw-admin-surface);
+  padding: 2rem 1.5rem;
+  color: var(--gw-admin-text-muted);
+  text-align: center;
+}
+
+.gw-admin-file-input__dropzone.is-drag-over,
+.gw-admin-file-input__dropzone:hover,
+.gw-admin-file-input__dropzone:focus-visible {
+  border-color: var(--gw-admin-text);
+  background: var(--gw-admin-surface-muted);
+  color: var(--gw-admin-text);
+}
+
+.gw-admin-file-input__previews {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.gw-admin-file-preview {
+  display: grid;
+  min-height: 3rem;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  background: var(--gw-admin-surface-muted);
+  padding: 0.75rem 1rem;
+  color: #333333;
+  font-size: 0.875rem;
+}
+
+.gw-admin-file-preview__thumbnail {
+  width: 3rem;
+  height: 3rem;
+  object-fit: cover;
+}
+
+.gw-admin-file-preview__progress {
+  margin-left: 0.75rem;
+  vertical-align: middle;
+}
+
+.gw-admin-file-preview__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.gw-admin-link-button {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--gw-admin-text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 0.25rem;
+}
+
+.gw-admin-link-button--danger {
+  color: var(--gw-admin-danger);
+}
+
+.gw-admin-rich-text-editor {
+  border: 1px solid var(--gw-admin-border);
+  background: var(--gw-admin-surface);
+}
+
+.gw-admin-rich-text-editor:focus-within {
+  border-color: var(--gw-admin-focus);
+}
+
+.gw-admin-rich-text-editor__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--gw-admin-border-soft);
+  background: var(--gw-admin-surface-muted);
+  padding: 0.25rem;
+}
+
+.gw-admin-rich-text-editor__tool {
+  display: grid;
+  width: 2.25rem;
+  height: 2.25rem;
+  place-items: center;
+  border: 0;
+  background: var(--gw-admin-surface);
+  color: #404040;
+  cursor: pointer;
+}
+
+.gw-admin-rich-text-editor__tool:hover,
+.gw-admin-rich-text-editor__tool:focus-visible {
+  background: #e5e5e5;
+  color: var(--gw-admin-text);
+}
+
+.gw-admin-rich-text-editor__tool svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.gw-admin-rich-text-editor__surface {
+  min-height: 18.75rem;
+  padding: 0.75rem;
+}
+
+.gw-admin-rich-text-editor__surface .ProseMirror {
+  min-height: 17rem;
+  outline: 0;
+  color: var(--gw-admin-text);
+  line-height: 1.75;
+}
+
+.gw-admin-rich-text-view {
+  color: var(--gw-admin-text);
+  line-height: 1.75;
+}
+
+.gw-admin-rich-text-editor__surface .ProseMirror h2,
+.gw-admin-rich-text-view h2 {
+  margin: 1.5rem 0 0.75rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.gw-admin-rich-text-editor__surface .ProseMirror p,
+.gw-admin-rich-text-view p {
+  margin: 0.75rem 0;
+}
+
+.gw-admin-rich-text-editor__surface .ProseMirror ul,
+.gw-admin-rich-text-view ul {
+  margin: 0.75rem 0;
+  padding-left: 1.5rem;
+  list-style: disc;
+}
+
+.gw-admin-rich-text-editor__surface .ProseMirror ol,
+.gw-admin-rich-text-view ol {
+  margin: 0.75rem 0;
+  padding-left: 1.5rem;
+  list-style: decimal;
+}
+
+.gw-admin-rich-text-editor__surface .ProseMirror a,
+.gw-admin-rich-text-view a {
+  color: #075985;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.gw-admin-rich-text-editor__surface img,
+.gw-admin-rich-text-view img,
+.gw-admin-rich-text-editor__surface video,
+.gw-admin-rich-text-view video {
+  max-width: 100%;
+  height: auto;
+}
+
+.gw-admin-rich-text-view > :first-child {
+  margin-top: 0;
+}
+
+.gw-admin-rich-text-view > :last-child {
+  margin-bottom: 0;
+}
+
+.gw-admin-rich-text-file {
+  justify-content: flex-start;
+}
+
+.gw-admin-rich-text-file small {
+  color: var(--gw-admin-text-muted);
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+.gw-admin-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (min-width: 48rem) {
+  .gw-admin-dashboard__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .gw-admin-account-page__section {
+    padding: 2rem;
+  }
+
+  .gw-admin-mobile-header {
+    display: none;
+  }
+
+  .gw-admin-sidebar {
+    display: block;
+  }
+
+  .gw-admin-shell__content {
+    padding-inline: 2.5rem;
+  }
+
+  .gw-admin-detail__row {
+    grid-template-columns: 10rem minmax(0, 1fr);
+    gap: 1.5rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gw-admin-drawer,
+  .gw-admin-drawer-backdrop {
+    transition: none;
+  }
+}