@okjavis/nodebb-theme-javis 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/package.json +7 -23
  2. package/plugin.json +6 -5
  3. package/scss/_base.scss +71 -0
  4. package/scss/_buttons.scss +410 -0
  5. package/scss/_cards.scss +434 -0
  6. package/{less/_categories.less → scss/_categories.scss} +10 -10
  7. package/scss/_forms.scss +502 -0
  8. package/scss/_sidebar-user.scss +150 -0
  9. package/scss/_sidebar.scss +539 -0
  10. package/scss/_variables.scss +54 -0
  11. package/scss/overrides.scss +39 -0
  12. package/static/lib/theme.js +39 -2
  13. package/templates/partials/posts_list_item.tpl +3 -7
  14. package/templates/partials/sidebar/user-menu-dropdown.tpl +99 -0
  15. package/templates/partials/sidebar-left.tpl +77 -0
  16. package/templates/partials/sidebar-right.tpl +7 -0
  17. package/templates/partials/topics_list.tpl +111 -0
  18. package/theme.js +49 -7
  19. package/theme.json +8 -0
  20. package/theme.scss +20 -0
  21. package/less/_base.less +0 -70
  22. package/less/_buttons.less +0 -90
  23. package/less/_cards.less +0 -118
  24. package/less/_forms.less +0 -104
  25. package/less/_sidebar.less +0 -110
  26. package/less/_variables.less +0 -54
  27. package/less/theme.less +0 -18
package/less/_forms.less DELETED
@@ -1,104 +0,0 @@
1
- // ===========================================================
2
- // INPUT SYSTEM – Global Form Controls
3
- // ===========================================================
4
-
5
- .form-control,
6
- input[type="text"],
7
- input[type="search"],
8
- input[type="email"],
9
- input[type="password"],
10
- textarea,
11
- .form-select {
12
- background: @jv-surface;
13
- border: 1px solid @jv-border-subtle;
14
- border-radius: @jv-radius-pill;
15
- padding: 10px 16px;
16
- font-size: @jv-font-size-base;
17
- color: @jv-text-main;
18
- line-height: @jv-line-height-tight;
19
- box-shadow: none;
20
- transition: all 0.15s ease;
21
-
22
- &::placeholder {
23
- color: @jv-text-muted;
24
- }
25
-
26
- &:focus {
27
- outline: none;
28
- border-color: @jv-primary;
29
- box-shadow: 0 0 0 3px @jv-primary-soft;
30
- }
31
- }
32
-
33
- // Textarea specific
34
- textarea {
35
- border-radius: @jv-radius-md;
36
- resize: vertical;
37
- min-height: 100px;
38
- }
39
-
40
- // ===========================================================
41
- // SEARCH BAR
42
- // ===========================================================
43
-
44
- .search-widget .input-group {
45
- .form-control {
46
- border-top-right-radius: 0;
47
- border-bottom-right-radius: 0;
48
- }
49
-
50
- .btn-primary {
51
- border-top-left-radius: 0;
52
- border-bottom-left-radius: 0;
53
- padding: 0 18px;
54
- }
55
- }
56
-
57
- // ===========================================================
58
- // COMPOSER TRIGGER (Write a Post…)
59
- // ===========================================================
60
-
61
- .jlc-trigger {
62
- width: 100%;
63
- background: @jv-surface;
64
- border: 1px solid @jv-border-subtle;
65
- border-radius: @jv-radius-pill;
66
- padding: 12px 18px;
67
- font-size: @jv-font-size-base;
68
- font-weight: 400;
69
- text-align: left;
70
- color: @jv-text-muted;
71
- box-shadow: @jv-shadow-soft;
72
- transition: all 0.15s ease;
73
-
74
- &:hover,
75
- &:focus {
76
- background: @jv-surface;
77
- border-color: @jv-primary;
78
- color: @jv-primary;
79
- box-shadow: @jv-shadow-soft;
80
- outline: none;
81
- }
82
-
83
- &:active {
84
- transform: scale(0.99);
85
- }
86
-
87
- // Override Bootstrap button states
88
- &.btn,
89
- &.btn:focus,
90
- &.btn:hover,
91
- &.btn:active {
92
- background: @jv-surface;
93
- border-radius: @jv-radius-pill;
94
- box-shadow: @jv-shadow-soft;
95
- border-color: @jv-border-subtle;
96
- outline: none;
97
- }
98
-
99
- &.btn:hover,
100
- &.btn:focus {
101
- border-color: @jv-primary;
102
- color: @jv-primary;
103
- }
104
- }
package/less/_sidebar.less DELETED
@@ -1,110 +0,0 @@
1
- // ===========================================================
2
- // SIDEBAR SYSTEM – Trending Tags + Trending Now
3
- // ===========================================================
4
-
5
- // Sidebar Widget Titles
6
- div[data-widget-area="right"] {
7
- h5, h8 {
8
- font-size: 16px;
9
- font-weight: 600;
10
- margin-bottom: @jv-space-4;
11
- color: @jv-text-main;
12
- }
13
- }
14
-
15
- // ===========================================================
16
- // TRENDING TAGS
17
- // ===========================================================
18
-
19
- .popular-tags {
20
- gap: 6px;
21
-
22
- .tag-list > div {
23
- background: @jv-surface;
24
- border: 1px solid @jv-border-subtle;
25
- border-radius: 10px;
26
- padding: 10px 12px;
27
- font-size: 14px;
28
- color: @jv-text-main;
29
- display: flex;
30
- flex-direction: column;
31
- gap: 2px;
32
- cursor: pointer;
33
- transition: border-color 0.15s ease, background 0.15s ease;
34
-
35
- &:hover {
36
- border-color: rgba(0,0,0,0.12);
37
- background: rgba(0,0,0,0.03);
38
- }
39
-
40
- small {
41
- color: @jv-text-muted;
42
- font-size: @jv-font-size-xs;
43
- }
44
- }
45
- }
46
-
47
- // ===========================================================
48
- // TRENDING NOW
49
- // ===========================================================
50
-
51
- #recent_posts {
52
- display: flex;
53
- flex-direction: column;
54
- gap: 10px;
55
- margin-top: @jv-space-6;
56
-
57
- li.widget-posts {
58
- background: @jv-surface;
59
- border: 1px solid rgba(0,0,0,0.05);
60
- border-radius: @jv-radius-md;
61
- padding: 10px 14px;
62
- display: flex;
63
- flex-direction: column;
64
- gap: @jv-space-4;
65
- transition: box-shadow 0.15s ease, border 0.15s ease;
66
-
67
- &:hover {
68
- border-color: rgba(0,0,0,0.08);
69
- box-shadow: @jv-shadow-soft;
70
- }
71
-
72
- // Meta info
73
- .d-flex.gap-2,
74
- .timeago {
75
- font-size: @jv-font-size-xs;
76
- color: @jv-text-muted;
77
- }
78
-
79
- // Title inside mini post
80
- a {
81
- font-size: 14px;
82
- font-weight: 500;
83
- color: @jv-text-main;
84
- text-decoration: none;
85
- line-height: @jv-line-height-tight;
86
-
87
- &:hover {
88
- color: @jv-primary;
89
- }
90
- }
91
-
92
- // 2-line clamp for content preview
93
- p,
94
- .content {
95
- display: -webkit-box;
96
- -webkit-line-clamp: 2;
97
- -webkit-box-orient: vertical;
98
- overflow: hidden;
99
- font-size: @jv-font-size-sm;
100
- color: @jv-text-muted;
101
- margin: 0;
102
- }
103
-
104
- // Read more alignment
105
- a.stretched-link {
106
- font-size: @jv-font-size-xs;
107
- color: @jv-primary;
108
- }
109
- }
110
- }
package/less/_variables.less DELETED
@@ -1,54 +0,0 @@
1
- // ============================================
2
- // JAVIS Design System – Tokens
3
- // ============================================
4
-
5
- // Brand Colors
6
- @jv-primary: #0051ff;
7
- @jv-primary-hover: #0044dd;
8
- @jv-primary-soft: rgba(0, 81, 255, 0.12);
9
-
10
- // Neutrals
11
- @jv-bg: #f5f6f8; // app background
12
- @jv-surface: #ffffff; // cards, panels
13
- @jv-border-subtle: rgba(0,0,0,0.06);
14
- @jv-border-strong: rgba(0,0,0,0.12);
15
-
16
- // Text
17
- @jv-text-main: #111111;
18
- @jv-text-muted: #6b7280;
19
- @jv-text-soft: #9ca3af;
20
-
21
- // Radii
22
- @jv-radius-xs: 4px;
23
- @jv-radius-sm: 8px;
24
- @jv-radius-md: 12px;
25
- @jv-radius-lg: 16px;
26
- @jv-radius-pill: 999px;
27
-
28
- // Shadows
29
- @jv-shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
30
- @jv-shadow-card: 0 4px 10px rgba(0,0,0,0.05);
31
- @jv-shadow-button: 0 4px 12px rgba(0, 81, 255, 0.25);
32
- @jv-shadow-button-hover: 0 6px 16px rgba(0, 81, 255, 0.35);
33
-
34
- // Spacing (8pt-ish scale)
35
- @jv-space-2: 4px;
36
- @jv-space-4: 8px;
37
- @jv-space-6: 12px;
38
- @jv-space-8: 16px;
39
- @jv-space-10: 20px;
40
- @jv-space-12: 24px;
41
-
42
- // Typography
43
- @jv-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
44
- @jv-font-size-base: 15px;
45
- @jv-font-size-sm: 13px;
46
- @jv-font-size-xs: 12px;
47
- @jv-font-size-lg: 18px;
48
- @jv-font-size-xl: 22px;
49
- @jv-font-size-xxl: 32px;
50
-
51
- // Line Heights
52
- @jv-line-height-base: 1.52;
53
- @jv-line-height-tight: 1.4;
54
- @jv-line-height-relaxed: 1.6;
package/less/theme.less DELETED
@@ -1,18 +0,0 @@
1
- // ============================================
2
- // JAVIS Community Theme
3
- // Modern, premium NodeBB theme
4
- // Inspired by Apple, Stripe, and Linear
5
- // ============================================
6
-
7
- // Core Design System
8
- @import "_variables";
9
-
10
- // Base Styles
11
- @import "_base";
12
-
13
- // Components
14
- @import "_buttons";
15
- @import "_forms";
16
- @import "_cards";
17
- @import "_sidebar";
18
- @import "_categories";