rails_den 2.0.0

data/app/assets/stylesheets/rails_den/notifications.css

@@ -0,0 +1,222 @@
+.rails-den-notification-list {
+  overflow: hidden;
+  background: var(--rails-den-surface);
+  border: 1px solid var(--rails-den-border);
+  border-radius: var(--rails-den-radius);
+  box-shadow: var(--rails-den-shadow);
+}
+
+.rails-den-notification-row {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid var(--rails-den-border);
+}
+
+.rails-den-notification-row:last-child {
+  border-bottom: 0;
+}
+
+.rails-den-notification {
+  min-width: 0;
+  min-height: 78px;
+  padding: 16px 20px;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  color: inherit;
+  text-decoration: none;
+  transition: background 0.15s ease;
+}
+
+a.rails-den-notification:hover {
+  background: var(--rails-den-surface-raised);
+}
+
+.rails-den-notification-icon {
+  width: 42px;
+  height: 42px;
+  flex: 0 0 42px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(200, 59, 50, 0.35);
+  border-radius: 50%;
+  background: rgba(200, 59, 50, 0.1);
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.rails-den-notification-content {
+  min-width: 0;
+  flex: 1 1 auto;
+  display: grid;
+  gap: 5px;
+}
+
+.rails-den-notification-text {
+  color: var(--rails-den-text);
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.rails-den-notification-time {
+  color: var(--rails-den-muted);
+  font-size: 0.85rem;
+}
+
+.rails-den-notification-arrow {
+  flex: 0 0 auto;
+  color: #727a85;
+  font-size: 1.8rem;
+  font-weight: 300;
+  line-height: 1;
+}
+
+a.rails-den-notification:hover .rails-den-notification-arrow {
+  color: var(--rails-den-primary-hover);
+}
+
+.rails-den-notification-unavailable {
+  opacity: 0.65;
+}
+
+.rails-den-notification-delete-form {
+  margin: 0;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding: 0 18px;
+  border-left: 1px solid var(--rails-den-border);
+}
+
+.rails-den-notification-delete {
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--rails-den-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.rails-den-notification-delete:hover {
+  background: rgba(249, 112, 102, 0.12);
+  color: var(--rails-den-danger);
+}
+
+.rails-den-notification-delete:focus-visible {
+  outline: 3px solid rgba(249, 112, 102, 0.3);
+  outline-offset: 3px;
+}
+
+.rails-den-notifications-empty {
+  padding: 64px 28px;
+  background: var(--rails-den-surface);
+  border: 1px solid var(--rails-den-border);
+  border-radius: var(--rails-den-radius);
+  box-shadow: var(--rails-den-shadow);
+  text-align: center;
+}
+
+.rails-den-notifications-empty-icon {
+  margin-bottom: 16px;
+  font-size: 2.5rem;
+}
+
+.rails-den-notifications-empty h2 {
+  margin: 0;
+  color: var(--rails-den-text);
+}
+
+.rails-den-notifications-empty p {
+  max-width: 520px;
+  margin: 10px auto 0;
+  color: var(--rails-den-muted);
+  line-height: 1.55;
+}
+
+.rails-den-navbar-notifications {
+  position: relative;
+  min-width: 36px;
+  min-height: 36px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  color: var(--rails-den-muted);
+  line-height: 1;
+  text-decoration: none;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.rails-den-navbar-notifications:hover {
+  background: var(--rails-den-surface-raised);
+  color: #ffffff;
+}
+
+.rails-den-navbar-notifications.is-unread {
+  background: rgba(200, 59, 50, 0.1);
+  color: var(--rails-den-primary-hover);
+}
+
+.rails-den-navbar-notifications.is-unread:hover {
+  background: rgba(200, 59, 50, 0.18);
+  color: #ffffff;
+}
+
+.rails-den-navbar-notification-bell {
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.rails-den-navbar-notification-badge {
+  position: absolute;
+  top: -5px;
+  right: -8px;
+  min-width: 19px;
+  height: 19px;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--rails-den-surface);
+  border-radius: 999px;
+  background: var(--rails-den-primary);
+  color: #ffffff;
+  font-size: 0.68rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.rails-den-navbar-notifications:focus-visible {
+  outline: 3px solid rgba(200, 59, 50, 0.35);
+  outline-offset: 3px;
+}
+
+@media (max-width: 640px) {
+  .rails-den-notification-row {
+    align-items: center;
+  }
+
+  .rails-den-notification {
+    padding: 14px;
+    gap: 12px;
+  }
+
+  .rails-den-notification-icon {
+    width: 38px;
+    height: 38px;
+    flex-basis: 38px;
+  }
+
+  .rails-den-notification-delete-form {
+    padding: 0 10px;
+  }
+}

data/app/assets/stylesheets/rails_den/onebox.css

@@ -0,0 +1,126 @@
+.rails-den-onebox {
+  width: min(100%, 720px);
+  margin: 1rem 0;
+  overflow: hidden;
+  border: 1px solid var(--rails-den-border);
+  border-radius: var(--rails-den-radius);
+  background: var(--rails-den-surface-raised);
+}
+
+.rails-den-onebox-link {
+  display: flex;
+  color: inherit;
+  text-decoration: none;
+}
+
+.rails-den-onebox-link:hover {
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.rails-den-onebox-content {
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 16px 18px;
+}
+
+.rails-den-onebox-image {
+  width: 180px;
+  min-height: 120px;
+  flex: 0 0 180px;
+  overflow: hidden;
+  background: var(--rails-den-surface-input);
+}
+
+.rails-den-onebox-image img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.rails-den-onebox-provider {
+  color: var(--rails-den-muted);
+  font-size: 0.78rem;
+  font-weight: 750;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.rails-den-onebox-title {
+  margin-top: 5px;
+  color: var(--rails-den-text);
+  font-size: 1.05rem;
+  font-weight: 800;
+  line-height: 1.35;
+}
+
+.rails-den-onebox-description {
+  margin-top: 7px;
+  color: var(--rails-den-muted);
+  font-size: 0.92rem;
+  line-height: 1.5;
+}
+
+.rails-den-onebox-meta {
+  margin-top: 10px;
+  color: var(--rails-den-muted);
+  font-size: 0.8rem;
+}
+
+.rails-den-onebox-embed-frame {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: #000000;
+}
+
+.rails-den-onebox-embed-frame iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: 0;
+}
+
+.rails-den-onebox-embed-footer {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.rails-den-onebox-embed-link {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--rails-den-text);
+  font-weight: 700;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rails-den-onebox-embed-link:hover {
+  color: #ffffff;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+@media (max-width: 640px) {
+  .rails-den-onebox-link {
+    display: block;
+  }
+
+  .rails-den-onebox-image {
+    width: 100%;
+    height: 180px;
+  }
+
+  .rails-den-onebox-embed-footer {
+    display: block;
+  }
+
+  .rails-den-onebox-embed-footer .rails-den-onebox-provider {
+    margin-top: 6px;
+  }
+}

data/app/assets/stylesheets/rails_den/post_links.css

@@ -0,0 +1,37 @@
+.rails-den-post-author-link,
+.rails-den-post-author-link:visited {
+  color: var(--rails-den-primary-hover);
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.rails-den-post-author-link:hover {
+  color: #ffffff;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rails-den-post-author-link:focus-visible {
+  outline: 3px solid rgba(200, 59, 50, 0.22);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+
+.rails-den-mention,
+.rails-den-mention:visited {
+  color: var(--rails-den-primary-hover);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+a.rails-den-mention:hover {
+  color: #ffffff;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+a.rails-den-mention:focus-visible {
+  outline: 3px solid rgba(200, 59, 50, 0.22);
+  outline-offset: 3px;
+  border-radius: 3px;
+}

data/app/assets/stylesheets/rails_den/post_presence.css

@@ -0,0 +1,47 @@
+/*
+ * RailsDen Post Presence
+ */
+
+body.rails-den .rails-den-post-author-presence {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 7px;
+  vertical-align: middle;
+}
+
+body.rails-den .rails-den-post-author-presence-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #71717a;
+  box-shadow:
+    0 0 0 3px rgba(113, 113, 122, 0.11);
+}
+
+body.rails-den
+  .rails-den-post-author-presence.is-presence-online
+  .rails-den-post-author-presence-dot {
+  background: #22c55e;
+  box-shadow:
+    0 0 0 3px rgba(34, 197, 94, 0.14),
+    0 0 9px rgba(34, 197, 94, 0.28);
+}
+
+body.rails-den
+  .rails-den-post-author-presence.is-presence-away
+  .rails-den-post-author-presence-dot {
+  background: #f59e0b;
+  box-shadow:
+    0 0 0 3px rgba(245, 158, 11, 0.14),
+    0 0 9px rgba(245, 158, 11, 0.2);
+}
+
+body.rails-den
+  .rails-den-post-author-presence.is-presence-offline
+  .rails-den-post-author-presence-dot {
+  background: #71717a;
+  box-shadow:
+    0 0 0 3px rgba(113, 113, 122, 0.11);
+}

data/app/assets/stylesheets/rails_den/presence.css

@@ -0,0 +1,96 @@
+/*
+ * RailsDen Presence
+ */
+
+body.rails-den .rails-den-member-profile-presence {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 2px 0 12px;
+  color: var(--rails-den-muted);
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+body.rails-den .rails-den-member-profile-presence strong {
+  color: var(--rails-den-text);
+  font-weight: 750;
+}
+
+body.rails-den .rails-den-presence-dot {
+  display: inline-block;
+  flex: none;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #71717a;
+  box-shadow: 0 0 0 3px rgba(113, 113, 122, 0.12);
+}
+
+body.rails-den
+  .rails-den-member-profile-header.is-presence-online
+  .rails-den-presence-dot {
+  background: #22c55e;
+  box-shadow:
+    0 0 0 3px rgba(34, 197, 94, 0.14),
+    0 0 10px rgba(34, 197, 94, 0.28);
+}
+
+body.rails-den
+  .rails-den-member-profile-header.is-presence-online
+  .rails-den-member-profile-presence strong {
+  color: #86efac;
+}
+
+body.rails-den
+  .rails-den-member-profile-header.is-presence-away
+  .rails-den-presence-dot {
+  background: #f59e0b;
+  box-shadow:
+    0 0 0 3px rgba(245, 158, 11, 0.14),
+    0 0 10px rgba(245, 158, 11, 0.2);
+}
+
+body.rails-den
+  .rails-den-member-profile-header.is-presence-away
+  .rails-den-member-profile-presence strong {
+  color: #fcd34d;
+}
+
+body.rails-den
+  .rails-den-member-profile-header.is-presence-offline
+  .rails-den-presence-dot {
+  background: #71717a;
+  box-shadow: 0 0 0 3px rgba(113, 113, 122, 0.12);
+}
+
+body.rails-den
+  .rails-den-member-profile-header.is-presence-offline
+  .rails-den-member-profile-presence strong {
+  color: var(--rails-den-muted);
+}
+
+/*
+ * Offline members are intentionally ghosted.
+ */
+body.rails-den
+  .rails-den-member-profile-header.is-presence-offline
+  .rails-den-member-profile-avatar {
+  opacity: 0.42;
+  filter:
+    grayscale(0.75)
+    saturate(0.25)
+    brightness(0.82);
+}
+
+body.rails-den
+  .rails-den-member-profile-header
+  .rails-den-member-profile-avatar {
+  transition:
+    opacity 0.2s ease,
+    filter 0.2s ease;
+}
+
+body.rails-den .rails-den-member-profile-presence time {
+  color: var(--rails-den-muted);
+}