about and errorpages

2026-05-06 11:06:08 +02:00
parent 1baf4a8495
commit 6587e74892
4 changed files with 249 additions and 1 deletions
--- a/pytorrent/static/styles.css
+++ b/pytorrent/static/styles.css
@@ -2001,3 +2001,161 @@ body.mobile-mode #mobileList {
    padding-left: 0;
  }
 }
+
+
+/* Notatka: style About i stron błędów są zgrupowane, bez duplikowania istniejących klas. */
+.about-modal-content {
+  overflow: hidden;
+}
+
+.about-nav-btn {
+  opacity: 0.82;
+}
+
+.about-nav-btn:hover,
+.about-nav-btn:focus-visible {
+  opacity: 1;
+}
+
+.about-hero {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin-bottom: 1rem;
+  padding: 0.9rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.85rem;
+  background: rgba(var(--bs-secondary-bg-rgb), 0.38);
+}
+
+.about-logo {
+  display: inline-grid;
+  width: 2.8rem;
+  height: 2.8rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 0.8rem;
+  background: var(--bs-primary-bg-subtle);
+  color: var(--bs-primary-text-emphasis);
+  font-size: 1.25rem;
+}
+
+.about-hero h6,
+.about-hero p {
+  margin: 0;
+}
+
+.about-hero h6 {
+  font-weight: 800;
+}
+
+.about-hero p {
+  color: var(--bs-secondary-color);
+}
+
+.about-list {
+  display: grid;
+  gap: 0.55rem;
+  margin: 0;
+}
+
+.about-list div {
+  display: grid;
+  grid-template-columns: 7rem minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 0.55rem 0;
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.about-list div:last-child {
+  border-bottom: 0;
+}
+
+.about-list dt {
+  color: var(--bs-secondary-color);
+  font-weight: 700;
+}
+
+.about-list dd {
+  margin: 0;
+}
+
+.error-page {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 1rem;
+  background: radial-gradient(
+    circle at 50% 35%,
+    rgba(var(--bs-secondary-bg-rgb), 0.98),
+    var(--bs-body-bg) 68%
+  );
+  color: var(--bs-body-color);
+}
+
+.error-card {
+  width: min(92vw, 460px);
+  padding: 2rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 18px;
+  background: rgba(var(--bs-secondary-bg-rgb), 0.9);
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
+  text-align: center;
+}
+
+.error-brand {
+  font-size: 1.2rem;
+  font-weight: 800;
+}
+
+.error-icon {
+  display: inline-grid;
+  width: 4rem;
+  height: 4rem;
+  margin: 1.4rem 0 1rem;
+  place-items: center;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+  background: var(--bs-primary-bg-subtle);
+  color: var(--bs-primary-text-emphasis);
+  font-size: 1.55rem;
+}
+
+.error-code {
+  margin: 0;
+  color: var(--bs-secondary-color);
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.error-card h1 {
+  margin: 0.25rem 0 0.55rem;
+  font-size: 1.45rem;
+  font-weight: 800;
+}
+
+.error-card p:not(.error-code) {
+  margin: 0;
+  color: var(--bs-secondary-color);
+}
+
+.error-actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.55rem;
+  flex-wrap: wrap;
+  margin-top: 1.35rem;
+}
+
+@media (max-width: 576px) {
+  .about-list div {
+    grid-template-columns: 1fr;
+    gap: 0.15rem;
+  }
+
+  .error-actions .btn {
+    width: 100%;
+  }
+}