nodebb-theme-flawless 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-flawless",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A dark Flawless Roleplay child theme for NodeBB v4 and Harmony.",
   "main": "lib/theme.js",
   "keywords": [

package/scss/flawless.scss

@@ -133,6 +133,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body.theme-flawless,
 body.flawless-theme {
   background:
     linear-gradient(180deg, rgba(245, 158, 11, 0.03), transparent 22rem),
@@ -164,6 +165,10 @@ hr,
   color: var(--ucp-text-muted) !important;
 }
 
+.text-primary {
+  color: var(--ucp-accent) !important;
+}
+
 .text-body,
 .text-reset {
   color: var(--ucp-text) !important;
@@ -214,21 +219,33 @@ pre,
   color: var(--ucp-text);
 }
 
-[component="sidebar/left"] {
+[component="sidebar/left"],
+.sidebar.sidebar-left {
   width: 220px;
   min-width: 220px;
-  background: var(--ucp-sidebar) !important;
+  background-color: #111113 !important;
   color: var(--ucp-text-muted) !important;
   border-color: var(--ucp-border) !important;
 }
 
-[component="sidebar/left"]:not(.open) {
+[component="sidebar/left"].bg-light,
+[component="sidebar/left"].text-dark,
+.sidebar.sidebar-left.bg-light,
+.sidebar.sidebar-left.text-dark {
+  background-color: #111113 !important;
+  color: var(--ucp-text-muted) !important;
+}
+
+[component="sidebar/left"]:not(.open),
+.sidebar.sidebar-left:not(.open) {
   width: 64px;
   min-width: 64px;
 }
 
 [component="sidebar/left"] .navigation-link,
 [component="sidebar/left"] [component="sidebar/toggle"],
+.sidebar.sidebar-left .navigation-link,
+.sidebar.sidebar-left [component="sidebar/toggle"],
 .bottombar-nav .nav-link {
   color: var(--ucp-text-muted) !important;
   border-radius: 8px;
@@ -238,6 +255,8 @@ pre,
 
 [component="sidebar/left"] .navigation-link:hover,
 [component="sidebar/left"] [component="sidebar/toggle"]:hover,
+.sidebar.sidebar-left .navigation-link:hover,
+.sidebar.sidebar-left [component="sidebar/toggle"]:hover,
 .bottombar-nav .nav-link:hover {
   background: rgba(245, 158, 11, 0.05);
   color: var(--ucp-text) !important;
@@ -245,6 +264,8 @@ pre,
 
 [component="sidebar/left"] .nav-item.active .navigation-link,
 [component="sidebar/left"] .navigation-link.active,
+.sidebar.sidebar-left .nav-item.active .navigation-link,
+.sidebar.sidebar-left .navigation-link.active,
 .navigation-dropdown .nav-item.active .navigation-link {
   background: rgba(245, 158, 11, 0.1);
   color: var(--ucp-accent) !important;
@@ -252,8 +273,9 @@ pre,
 }
 
 [component="sidebar/left"] .badge,
+.sidebar.sidebar-left .badge,
 .bottombar-nav .badge {
-  background: var(--ucp-accent) !important;
+  background-color: #f59e0b !important;
   color: #000 !important;
 }
 
@@ -317,6 +339,7 @@ pre,
 .dropdown-item:hover,
 .dropdown-item:focus,
 .dropdown-item.active,
+.dropdown-item[aria-selected="true"],
 .dropdown-menu .nav-link:hover,
 .dropdown-menu .nav-link.active {
   background: rgba(245, 158, 11, 0.1);
@@ -397,12 +420,27 @@ pre,
   text-transform: uppercase;
 }
 
-.badge.border,
+.badge.border:not([style*="background-color"]),
 .tag-list .tag,
-[component="topic/labels"] .badge {
-  background: rgba(161, 161, 170, 0.1);
+[component="topic/labels"] .badge:not([style*="background-color"]) {
+  background-color: rgba(24, 24, 27, 0.92) !important;
   border-color: rgba(113, 113, 122, 0.3) !important;
-  color: var(--ucp-text-muted) !important;
+  color: #d4d4d8 !important;
+}
+
+.badge.stats,
+[component="topic/stats"] .badge,
+.category-header .stats {
+  background: rgba(24, 24, 27, 0.94) !important;
+  border-color: rgba(113, 113, 122, 0.38) !important;
+  color: #d4d4d8 !important;
+}
+
+.badge.stats .fw-bold,
+.badge.stats .fw-normal,
+[component="topic/stats"] .fw-bold,
+[component="topic/stats"] .fw-normal {
+  color: inherit !important;
 }
 
 .tag-list .tag:hover,
@@ -412,6 +450,20 @@ pre,
   color: var(--ucp-accent) !important;
 }
 
+[component="topic/category"].badge {
+  background-color: rgba(24, 24, 27, 0.96) !important;
+  border-color: rgba(245, 158, 11, 0.38) !important;
+  color: var(--ucp-accent-hover) !important;
+}
+
+.icon[style*="background-color"] {
+  background-color: #27272a !important;
+  border-color: rgba(245, 158, 11, 0.38) !important;
+  color: var(--ucp-accent-hover) !important;
+  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.08);
+  text-shadow: none;
+}
+
 .bg-primary,
 .text-bg-primary {
   background-color: var(--ucp-accent) !important;
@@ -439,7 +491,7 @@ pre,
 .bg-info,
 .text-bg-info {
   background-color: var(--ucp-info) !important;
-  color: #fff !important;
+  color: #000 !important;
 }
 
 .btn {
@@ -464,6 +516,30 @@ pre,
   --bs-btn-active-bg: #d97706;
   --bs-btn-active-border-color: #d97706;
   --bs-btn-active-color: #000;
+  background-color: var(--bs-btn-bg);
+  border-color: var(--bs-btn-border-color);
+  color: var(--bs-btn-color) !important;
+}
+
+.btn-primary:hover,
+.btn-primary:focus-visible {
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+  color: var(--bs-btn-hover-color) !important;
+}
+
+.btn-primary:active,
+.btn-primary.active {
+  background-color: var(--bs-btn-active-bg);
+  border-color: var(--bs-btn-active-border-color);
+  color: var(--bs-btn-active-color) !important;
+}
+
+.btn-primary *,
+.btn-warning *,
+.btn-info *,
+.btn-success * {
+  color: inherit !important;
 }
 
 .btn-secondary,
@@ -479,6 +555,42 @@ pre,
   --bs-btn-active-bg: rgba(245, 158, 11, 0.12);
   --bs-btn-active-border-color: rgba(245, 158, 11, 0.35);
   --bs-btn-active-color: var(--ucp-accent);
+  background-color: var(--bs-btn-bg);
+  border-color: var(--bs-btn-border-color);
+  color: var(--bs-btn-color);
+}
+
+.btn-secondary:hover,
+.btn-secondary:focus-visible,
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus-visible,
+.btn-light:hover,
+.btn-light:focus-visible,
+.btn-ghost:hover,
+.btn-ghost:focus-visible {
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+  color: var(--bs-btn-hover-color);
+}
+
+.btn-secondary.active,
+.btn-secondary:active,
+.btn-outline-secondary.active,
+.btn-outline-secondary:active,
+.btn-light.active,
+.btn-light:active,
+.btn-ghost.active,
+.btn-ghost:active {
+  background-color: var(--bs-btn-active-bg);
+  border-color: var(--bs-btn-active-border-color);
+  color: var(--bs-btn-active-color);
+}
+
+.btn:disabled,
+.btn.disabled,
+[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.55;
 }
 
 .btn-success {
@@ -488,6 +600,9 @@ pre,
   --bs-btn-hover-bg: #4ade80;
   --bs-btn-hover-border-color: #4ade80;
   --bs-btn-hover-color: #000;
+  background-color: var(--bs-btn-bg);
+  border-color: var(--bs-btn-border-color);
+  color: var(--bs-btn-color) !important;
 }
 
 .btn-danger {
@@ -497,6 +612,21 @@ pre,
   --bs-btn-hover-bg: #f87171;
   --bs-btn-hover-border-color: #f87171;
   --bs-btn-hover-color: #fff;
+  background-color: var(--bs-btn-bg);
+  border-color: var(--bs-btn-border-color);
+  color: var(--bs-btn-color) !important;
+}
+
+.btn-warning {
+  background-color: var(--ucp-warning);
+  border-color: var(--ucp-warning);
+  color: #000 !important;
+}
+
+.btn-info {
+  background-color: var(--ucp-info);
+  border-color: var(--ucp-info);
+  color: #000 !important;
 }
 
 .form-control,
@@ -539,35 +669,80 @@ input::placeholder {
   border-color: var(--ucp-accent);
 }
 
+a:focus-visible,
+button:focus-visible,
+.btn:focus-visible,
+.dropdown-item:focus-visible,
+.nav-link:focus-visible,
+.form-control:focus-visible,
+.form-select:focus-visible,
+.form-check-input:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--ucp-accent);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
+}
+
 .alert {
   border-radius: 8px;
   border-width: 1px;
 }
 
 .alert-info {
-  background: rgba(59, 130, 246, 0.1);
+  background: #102038;
   border-color: rgba(59, 130, 246, 0.25);
   color: #93c5fd;
 }
 
 .alert-success {
-  background: rgba(34, 197, 94, 0.1);
+  background: #0f2a1a;
   border-color: rgba(34, 197, 94, 0.25);
   color: #86efac;
 }
 
 .alert-warning {
-  background: rgba(245, 158, 11, 0.12);
+  background: #2f230f;
   border-color: rgba(245, 158, 11, 0.3);
   color: #fcd34d;
 }
 
 .alert-danger {
-  background: rgba(239, 68, 68, 0.1);
+  background: #321316;
   border-color: rgba(239, 68, 68, 0.25);
   color: #fca5a5;
 }
 
+.text-bg-warning,
+.card.text-bg-warning {
+  background-color: var(--ucp-warning) !important;
+  color: #000 !important;
+}
+
+.text-bg-warning .card-header,
+.card.text-bg-warning .card-header {
+  background: rgba(0, 0, 0, 0.06);
+  border-color: rgba(0, 0, 0, 0.16);
+  color: #000;
+}
+
+.btn-close {
+  color: #fff !important;
+  filter: invert(1) grayscale(100%) brightness(180%);
+  opacity: 0.72;
+}
+
+.text-bg-warning .btn-close {
+  color: #000 !important;
+  filter: none;
+}
+
+.btn-close:focus,
+.btn-close:focus-visible {
+  outline: 2px solid var(--ucp-accent);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
+}
+
 .breadcrumb {
   gap: 6px;
   margin-bottom: 0;
@@ -575,10 +750,15 @@ input::placeholder {
 
 .breadcrumb-item,
 .breadcrumb-item a {
-  color: var(--ucp-text-muted);
+  color: var(--ucp-text-muted) !important;
   font-size: 0.82rem;
 }
 
+.breadcrumb-item a *,
+.breadcrumb .fw-semibold {
+  color: inherit !important;
+}
+
 .breadcrumb-item.active {
   color: var(--ucp-text) !important;
 }
@@ -623,6 +803,16 @@ input::placeholder {
   line-height: 1.65;
 }
 
+[component="post/content"] code,
+.post-content code,
+code {
+  padding: 0.12em 0.32em;
+  background: rgba(17, 17, 19, 0.96);
+  border: 1px solid rgba(245, 158, 11, 0.22);
+  border-radius: 4px;
+  color: var(--ucp-accent-hover);
+}
+
 [component="post/signature"] {
   border-top: 1px solid var(--ucp-border);
   padding-top: 10px;
@@ -677,27 +867,41 @@ input::placeholder {
 .avatar,
 [component="user/picture"] {
   border: 1px solid rgba(245, 158, 11, 0.22);
+  background-color: #3f3f46 !important;
+  box-shadow:
+    inset 0 0 0 999px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(0, 0, 0, 0.2);
+  color: #fff !important;
+  font-weight: 700;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
 }
 
 [component="user/status"].online,
 .status.online {
-  background: var(--ucp-success) !important;
+  background-color: #22c55e !important;
 }
 
 [component="user/status"].away,
 .status.away {
-  background: var(--ucp-warning) !important;
+  background-color: #f59e0b !important;
 }
 
 [component="user/status"].dnd,
 .status.dnd,
 [component="user/status"].offline,
 .status.offline {
-  background: var(--ucp-danger) !important;
+  background-color: #ef4444 !important;
+}
+
+[component="user/status"],
+.status {
+  color: transparent !important;
+  font-size: 0 !important;
+  line-height: 0 !important;
 }
 
 .bottombar-nav {
-  background: var(--ucp-sidebar) !important;
+  background-color: #111113 !important;
   border-color: var(--ucp-border) !important;
   color: var(--ucp-text) !important;
 }
@@ -708,6 +912,102 @@ input::placeholder {
   border-color: var(--ucp-border);
 }
 
+[component="sidebar/right"] {
+  background-color: #111113 !important;
+  border-color: var(--ucp-border) !important;
+  color: var(--ucp-text-muted);
+}
+
+[component="sidebar/right"] a:not(.btn) {
+  color: var(--ucp-accent);
+}
+
+.sidebar.sidebar-right,
+.sidebar.sidebar-right.bg-light,
+.sidebar.sidebar-right.text-dark {
+  background-color: #111113 !important;
+  border-color: var(--ucp-border) !important;
+  color: var(--ucp-text-muted) !important;
+}
+
+.sidebar.sidebar-right .nav-link {
+  color: var(--ucp-text-muted) !important;
+  border-radius: 8px;
+}
+
+.sidebar.sidebar-right .nav-link:hover,
+.sidebar.sidebar-right .nav-link:focus-visible {
+  background-color: rgba(245, 158, 11, 0.08);
+  color: var(--ucp-text) !important;
+}
+
+html,
+body,
+.layout-container,
+#panel,
+#content,
+.flex-fill,
+.users,
+.topic {
+  min-width: 0;
+}
+
+body {
+  overflow-x: hidden;
+}
+
+#content > .flex-fill,
+.users.flex-fill,
+.topic.flex-fill,
+.posts-container,
+body.template-topic #content > .flex-fill > .d-flex.flex-column.gap-3 {
+  max-width: 100%;
+  overflow-x: clip;
+}
+
+.topic-list-header,
+.sticky-tools .card,
+[component="category/controls"] {
+  min-width: 0;
+}
+
+.topic-list-header .card,
+.sticky-tools .card {
+  background: var(--ucp-card);
+  border-color: var(--ucp-border) !important;
+  color: var(--ucp-text);
+}
+
+.category-children {
+  padding-top: 4px;
+}
+
+.category-children-item > div {
+  min-width: 0;
+  padding: 4px 6px;
+  border-radius: 6px;
+}
+
+.category-children-item > div:hover {
+  background: rgba(245, 158, 11, 0.07);
+}
+
+.category-children-item a {
+  color: #d4d4d8 !important;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.category-children-item a:hover {
+  color: var(--ucp-accent-hover) !important;
+}
+
+.login-block,
+.register-block {
+  max-width: 28rem;
+  margin-inline: auto;
+}
+
 .cmd {
   display: inline-flex;
   align-items: center;
@@ -765,6 +1065,35 @@ input::placeholder {
     padding-bottom: 4.25rem;
   }
 
+  html,
+  body,
+  .layout-container,
+  #panel,
+  #content {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  #panel,
+  #content,
+  .flex-fill,
+  .topic,
+  .users,
+  .posts-container,
+  .category,
+  .recent {
+    min-width: 0;
+  }
+
+  .text-break,
+  .text-wrap-pretty,
+  [component="post/content"],
+  [component="topic/header"],
+  .topic-title,
+  .category-header {
+    overflow-wrap: anywhere;
+  }
+
   [component="categories/category"],
   [component="category/topic"],
   .post-container,