@okjavis/nodebb-theme-javis 1.1.0 → 1.4.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.
- package/package.json +1 -1
- package/scss/_base.scss +198 -3
- package/scss/_feed.scss +620 -0
- package/scss/_sidebar.scss +277 -1
- package/static/images/logo-full.png +0 -0
- package/static/images/logo-icon.png +0 -0
- package/templates/partials/header/brand.tpl +11 -0
- package/templates/partials/sidebar-left.tpl +11 -1
- package/theme.scss +1 -0
package/package.json
CHANGED
package/scss/_base.scss
CHANGED
|
@@ -2,12 +2,207 @@
|
|
|
2
2
|
// BASE STYLES – Core Layout + Typography
|
|
3
3
|
// ============================================
|
|
4
4
|
|
|
5
|
-
// Hide right sidebar
|
|
6
|
-
|
|
7
|
-
nav[component="sidebar/right"]
|
|
5
|
+
// Hide Harmony's right navigation sidebar (user profile moved to left sidebar)
|
|
6
|
+
// Note: This targets the nav sidebar, NOT the widget area sidebar
|
|
7
|
+
nav[component="sidebar/right"],
|
|
8
|
+
.sidebar-right:not([data-widget-area]) {
|
|
8
9
|
display: none !important;
|
|
9
10
|
}
|
|
10
11
|
|
|
12
|
+
// ===========================================================
|
|
13
|
+
// MAIN CONTENT CENTERING (Reddit-style)
|
|
14
|
+
// ===========================================================
|
|
15
|
+
// Center the main content area with equal margins on both sides
|
|
16
|
+
// This applies to ALL main content pages including feed, category, recent, etc.
|
|
17
|
+
|
|
18
|
+
// Feed page uses col-lg-6 for main content and col-lg-3 for sidebars
|
|
19
|
+
.feed > .row {
|
|
20
|
+
max-width: 1440px !important; // Max width for entire content area
|
|
21
|
+
margin: 0 auto !important; // Center the row
|
|
22
|
+
padding: 0 24px !important; // Equal padding on both sides - 24px like Reddit
|
|
23
|
+
display: flex !important;
|
|
24
|
+
justify-content: center !important; // Center the flex items
|
|
25
|
+
|
|
26
|
+
// Left sidebar (widget area)
|
|
27
|
+
> .col-lg-3[data-widget-area="left"] {
|
|
28
|
+
flex: 0 0 auto !important;
|
|
29
|
+
width: 0 !important; // Hide left sidebar to match your design
|
|
30
|
+
max-width: 0 !important;
|
|
31
|
+
padding: 0 !important;
|
|
32
|
+
overflow: hidden !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Main feed content (col-lg-6)
|
|
36
|
+
> .col-lg-6 {
|
|
37
|
+
flex: 0 0 auto !important;
|
|
38
|
+
width: 800px !important; // Main content fixed width (Reddit ~750-800px)
|
|
39
|
+
max-width: 800px !important;
|
|
40
|
+
padding-left: 0 !important;
|
|
41
|
+
padding-right: 24px !important; // Gap between content and sidebar
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Right sidebar (trending/widgets)
|
|
45
|
+
> .col-lg-3[data-widget-area="right"] {
|
|
46
|
+
flex: 0 0 auto !important;
|
|
47
|
+
width: 312px !important; // Sidebar fixed width (Reddit ~312px)
|
|
48
|
+
max-width: 312px !important;
|
|
49
|
+
padding-left: 0 !important;
|
|
50
|
+
padding-right: 0 !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media (max-width: 991px) {
|
|
54
|
+
padding: 0 16px !important; // Smaller padding on tablets
|
|
55
|
+
flex-direction: column !important;
|
|
56
|
+
|
|
57
|
+
> .col-lg-6,
|
|
58
|
+
> .col-lg-3 {
|
|
59
|
+
width: 100% !important;
|
|
60
|
+
max-width: 100% !important;
|
|
61
|
+
padding: 0 !important;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@media (max-width: 768px) {
|
|
66
|
+
padding: 0 12px !important; // Even smaller on mobile
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// ===========================================================
|
|
71
|
+
// SEARCH BAR (Reddit-style)
|
|
72
|
+
// ===========================================================
|
|
73
|
+
// Target the brand header area where search widget is
|
|
74
|
+
.brand-container [data-widget-area="brand-header"] {
|
|
75
|
+
max-width: 500px !important; // Reddit search bar width (~500px)
|
|
76
|
+
margin: 0 auto !important; // Center the search bar
|
|
77
|
+
display: flex !important;
|
|
78
|
+
align-items: center !important;
|
|
79
|
+
|
|
80
|
+
// Search form/input group
|
|
81
|
+
form,
|
|
82
|
+
.input-group {
|
|
83
|
+
width: 100% !important;
|
|
84
|
+
display: flex !important;
|
|
85
|
+
align-items: center !important;
|
|
86
|
+
position: relative !important; // For absolute positioning of button
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Search input styling
|
|
90
|
+
input[type="text"],
|
|
91
|
+
input[type="search"],
|
|
92
|
+
.form-control {
|
|
93
|
+
flex: 1 !important;
|
|
94
|
+
padding: 10px 48px 10px 16px !important; // Extra padding on right for button
|
|
95
|
+
border-radius: 20px !important; // Fully rounded like Reddit
|
|
96
|
+
border: 1px solid $jv-border-subtle !important;
|
|
97
|
+
background: $jv-surface !important;
|
|
98
|
+
font-size: 14px !important;
|
|
99
|
+
width: 100% !important;
|
|
100
|
+
|
|
101
|
+
&:focus {
|
|
102
|
+
border-color: $jv-primary !important;
|
|
103
|
+
outline: none !important;
|
|
104
|
+
box-shadow: 0 0 0 1px $jv-primary !important;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Search button styling - positioned inside input on the right
|
|
109
|
+
button[type="submit"],
|
|
110
|
+
.btn {
|
|
111
|
+
position: absolute !important;
|
|
112
|
+
right: 4px !important; // Small gap from edge
|
|
113
|
+
top: 50% !important;
|
|
114
|
+
transform: translateY(-50%) !important;
|
|
115
|
+
padding: 8px 12px !important;
|
|
116
|
+
border-radius: 16px !important;
|
|
117
|
+
background: transparent !important;
|
|
118
|
+
border: none !important;
|
|
119
|
+
color: $jv-text-muted !important;
|
|
120
|
+
margin: 0 !important;
|
|
121
|
+
|
|
122
|
+
&:hover {
|
|
123
|
+
background: rgba(0, 0, 0, 0.05) !important;
|
|
124
|
+
color: $jv-primary !important;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
i {
|
|
128
|
+
font-size: 16px !important;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// Main container padding adjustments (Reddit-style)
|
|
134
|
+
.container-lg {
|
|
135
|
+
max-width: 1440px !important; // Match our feed max-width
|
|
136
|
+
padding-left: 24px !important; // Equal padding like Reddit
|
|
137
|
+
padding-right: 24px !important;
|
|
138
|
+
|
|
139
|
+
@media (max-width: 991px) {
|
|
140
|
+
padding-left: 16px !important;
|
|
141
|
+
padding-right: 16px !important;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@media (max-width: 768px) {
|
|
145
|
+
padding-left: 12px !important;
|
|
146
|
+
padding-right: 12px !important;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// Feed header area - add more padding (Reddit-style)
|
|
151
|
+
.feed {
|
|
152
|
+
// Add top padding to feed container
|
|
153
|
+
padding-top: 20px !important; // Reddit has ~20px top padding
|
|
154
|
+
|
|
155
|
+
// Header controls (New Topic button, settings)
|
|
156
|
+
.d-flex.justify-content-between.py-2.mb-2 {
|
|
157
|
+
padding: 12px 0 !important; // More padding top/bottom
|
|
158
|
+
margin-bottom: 20px !important; // More space before cards (Reddit-style)
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// For other pages (category, recent, etc.) that use col-lg-9
|
|
163
|
+
main .container,
|
|
164
|
+
.container-fluid {
|
|
165
|
+
> .row {
|
|
166
|
+
max-width: 1440px !important;
|
|
167
|
+
margin: 0 auto !important;
|
|
168
|
+
padding: 0 24px !important;
|
|
169
|
+
justify-content: center !important;
|
|
170
|
+
|
|
171
|
+
> .col-lg-9 {
|
|
172
|
+
flex: 0 0 auto !important;
|
|
173
|
+
width: 640px !important;
|
|
174
|
+
max-width: 640px !important;
|
|
175
|
+
padding-left: 0 !important;
|
|
176
|
+
padding-right: 24px !important;
|
|
177
|
+
|
|
178
|
+
@media (max-width: 1200px) {
|
|
179
|
+
width: 100% !important;
|
|
180
|
+
max-width: 640px !important;
|
|
181
|
+
padding-right: 16px !important;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
> .col-lg-3[data-widget-area="sidebar"] {
|
|
186
|
+
flex: 0 0 auto !important;
|
|
187
|
+
width: 312px !important;
|
|
188
|
+
max-width: 312px !important;
|
|
189
|
+
padding-left: 0 !important;
|
|
190
|
+
padding-right: 0 !important;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
@media (max-width: 991px) {
|
|
194
|
+
padding: 0 16px !important;
|
|
195
|
+
|
|
196
|
+
> .col-lg-9,
|
|
197
|
+
> .col-lg-3 {
|
|
198
|
+
width: 100% !important;
|
|
199
|
+
max-width: 100% !important;
|
|
200
|
+
padding: 0 !important;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
11
206
|
body {
|
|
12
207
|
font-family: $jv-font-sans;
|
|
13
208
|
font-size: $jv-font-size-base;
|
package/scss/_feed.scss
ADDED
|
@@ -0,0 +1,620 @@
|
|
|
1
|
+
// ===========================================================
|
|
2
|
+
// FEED PLUGIN – Reddit-Style Post Cards
|
|
3
|
+
// Styles for nodebb-plugin-feed (/feed route)
|
|
4
|
+
// ===========================================================
|
|
5
|
+
|
|
6
|
+
// ===========================================================
|
|
7
|
+
// FEED CONTAINER
|
|
8
|
+
// ===========================================================
|
|
9
|
+
.feed {
|
|
10
|
+
// No max-width - let Bootstrap grid handle width
|
|
11
|
+
// Already inside col-lg-9 which provides proper constraints
|
|
12
|
+
|
|
13
|
+
// Header controls row
|
|
14
|
+
.d-flex.justify-content-between.py-2.mb-2 {
|
|
15
|
+
padding: $jv-space-4 0 !important;
|
|
16
|
+
margin-bottom: $jv-space-6 !important;
|
|
17
|
+
|
|
18
|
+
// New Topic button
|
|
19
|
+
#new_topic,
|
|
20
|
+
.btn-primary {
|
|
21
|
+
font-weight: 600;
|
|
22
|
+
padding: 10px 20px;
|
|
23
|
+
border-radius: $jv-radius-sm;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Settings dropdown button
|
|
27
|
+
#options-dropdown {
|
|
28
|
+
.btn-ghost {
|
|
29
|
+
background: $jv-surface;
|
|
30
|
+
border: 1px solid $jv-border-subtle;
|
|
31
|
+
border-radius: $jv-radius-sm;
|
|
32
|
+
padding: 8px 12px;
|
|
33
|
+
|
|
34
|
+
&:hover {
|
|
35
|
+
background: rgba(0, 0, 0, 0.02);
|
|
36
|
+
border-color: $jv-border-strong;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.dropdown-menu {
|
|
41
|
+
background: $jv-surface;
|
|
42
|
+
border: 1px solid $jv-border-subtle;
|
|
43
|
+
border-radius: $jv-radius-md;
|
|
44
|
+
box-shadow: $jv-shadow-card;
|
|
45
|
+
padding: $jv-space-2;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Empty state alert
|
|
51
|
+
.alert-warning {
|
|
52
|
+
background: $jv-surface;
|
|
53
|
+
border: 1px solid $jv-border-subtle;
|
|
54
|
+
border-radius: $jv-radius-lg;
|
|
55
|
+
color: $jv-text-muted;
|
|
56
|
+
padding: $jv-space-12;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// ===========================================================
|
|
61
|
+
// POSTS LIST
|
|
62
|
+
// ===========================================================
|
|
63
|
+
.feed ul[component="posts"] {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
gap: 0;
|
|
67
|
+
padding: 0;
|
|
68
|
+
margin: 0;
|
|
69
|
+
list-style: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// ===========================================================
|
|
73
|
+
// POST CARD – Main Styling
|
|
74
|
+
// ===========================================================
|
|
75
|
+
.feed li[component="post"].posts-list-item {
|
|
76
|
+
background: $jv-surface !important;
|
|
77
|
+
border: 1px solid $jv-border-subtle !important;
|
|
78
|
+
border-radius: $jv-radius-md !important; // 12px - more compact than 16px
|
|
79
|
+
margin-bottom: $jv-space-4 !important; // 8px - compact like Reddit
|
|
80
|
+
box-shadow: none !important;
|
|
81
|
+
overflow: hidden;
|
|
82
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
83
|
+
|
|
84
|
+
&:hover {
|
|
85
|
+
border-color: $jv-border-strong !important;
|
|
86
|
+
box-shadow: $jv-shadow-soft !important;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Deleted state
|
|
90
|
+
&.deleted {
|
|
91
|
+
opacity: 0.5;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Scheduled state
|
|
95
|
+
&.scheduled {
|
|
96
|
+
border-left: 3px solid #f59e0b;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// ===========================================================
|
|
101
|
+
// THUMBNAIL IMAGE
|
|
102
|
+
// ===========================================================
|
|
103
|
+
.feed li[component="post"].posts-list-item {
|
|
104
|
+
> .p-1.position-relative {
|
|
105
|
+
padding: 0 !important;
|
|
106
|
+
|
|
107
|
+
.overflow-hidden {
|
|
108
|
+
border-radius: $jv-radius-md $jv-radius-md 0 0 !important; // Match card radius
|
|
109
|
+
max-height: 350px !important;
|
|
110
|
+
|
|
111
|
+
img {
|
|
112
|
+
width: 100%;
|
|
113
|
+
object-fit: cover;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Additional thumbnails
|
|
118
|
+
.position-absolute {
|
|
119
|
+
padding: $jv-space-4 !important;
|
|
120
|
+
|
|
121
|
+
img {
|
|
122
|
+
border: 2px solid $jv-surface;
|
|
123
|
+
box-shadow: $jv-shadow-soft;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// ===========================================================
|
|
130
|
+
// POST CONTENT AREA
|
|
131
|
+
// ===========================================================
|
|
132
|
+
.feed li[component="post"].posts-list-item {
|
|
133
|
+
> .d-flex.gap-2.p-3 {
|
|
134
|
+
padding: $jv-space-6 !important; // 12px - compact but comfortable
|
|
135
|
+
gap: $jv-space-4 !important;
|
|
136
|
+
|
|
137
|
+
@media (max-width: 768px) {
|
|
138
|
+
padding: $jv-space-4 !important; // 8px on mobile
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
// Avatar
|
|
143
|
+
.d-none.d-lg-block {
|
|
144
|
+
.avatar,
|
|
145
|
+
img[class*="avatar"] {
|
|
146
|
+
width: 40px !important; // Smaller, cleaner
|
|
147
|
+
height: 40px !important;
|
|
148
|
+
border-radius: 50% !important;
|
|
149
|
+
object-fit: cover;
|
|
150
|
+
border: 2px solid rgba(0, 0, 0, 0.05);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// Post body
|
|
155
|
+
.post-body {
|
|
156
|
+
gap: $jv-space-2 !important; // Tighter gap - 4px
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
// ===========================================================
|
|
161
|
+
// TOPIC TITLE
|
|
162
|
+
// ===========================================================
|
|
163
|
+
.feed li[component="post"].posts-list-item {
|
|
164
|
+
.topic-title {
|
|
165
|
+
font-size: 18px !important; // Keeping subtle
|
|
166
|
+
font-weight: 600 !important;
|
|
167
|
+
line-height: 1.3 !important; // Tighter for clean look
|
|
168
|
+
color: $jv-text-main !important;
|
|
169
|
+
margin-bottom: $jv-space-2; // 4px
|
|
170
|
+
letter-spacing: -0.01em; // Slight tightening for modern feel
|
|
171
|
+
|
|
172
|
+
&:hover {
|
|
173
|
+
color: $jv-primary !important;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
// ===========================================================
|
|
179
|
+
// POST META (Author, Time)
|
|
180
|
+
// ===========================================================
|
|
181
|
+
.feed li[component="post"].posts-list-item {
|
|
182
|
+
.post-info {
|
|
183
|
+
font-size: 13px !important;
|
|
184
|
+
color: $jv-text-soft; // Lighter for hierarchy
|
|
185
|
+
gap: $jv-space-2 !important;
|
|
186
|
+
|
|
187
|
+
.post-author {
|
|
188
|
+
a {
|
|
189
|
+
color: $jv-text-muted; // Less prominent
|
|
190
|
+
font-weight: 500; // Lighter weight
|
|
191
|
+
|
|
192
|
+
&:hover {
|
|
193
|
+
color: $jv-primary;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
// Mobile avatar
|
|
198
|
+
.avatar,
|
|
199
|
+
img[class*="avatar"] {
|
|
200
|
+
width: 18px !important;
|
|
201
|
+
height: 18px !important;
|
|
202
|
+
border-radius: 50% !important;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.timeago {
|
|
207
|
+
color: $jv-text-soft !important;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
// ===========================================================
|
|
213
|
+
// POST CONTENT
|
|
214
|
+
// ===========================================================
|
|
215
|
+
.feed li[component="post"].posts-list-item {
|
|
216
|
+
.content[component="post/content"] {
|
|
217
|
+
font-size: 14px !important;
|
|
218
|
+
line-height: 1.6 !important;
|
|
219
|
+
color: $jv-text-muted;
|
|
220
|
+
|
|
221
|
+
// Truncation styles (from plugin)
|
|
222
|
+
&.truncate-post-content {
|
|
223
|
+
max-height: 150px;
|
|
224
|
+
overflow: hidden;
|
|
225
|
+
position: relative;
|
|
226
|
+
|
|
227
|
+
&::after {
|
|
228
|
+
content: '';
|
|
229
|
+
position: absolute;
|
|
230
|
+
bottom: 0;
|
|
231
|
+
left: 0;
|
|
232
|
+
right: 0;
|
|
233
|
+
height: 40px;
|
|
234
|
+
background: linear-gradient(transparent, $jv-surface);
|
|
235
|
+
pointer-events: none;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
// Links in content
|
|
240
|
+
a:not(.stretched-link) {
|
|
241
|
+
color: $jv-primary;
|
|
242
|
+
|
|
243
|
+
&:hover {
|
|
244
|
+
text-decoration: underline;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// Images in content
|
|
249
|
+
img {
|
|
250
|
+
max-width: 100%;
|
|
251
|
+
border-radius: $jv-radius-sm;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
// Code blocks
|
|
255
|
+
pre, code {
|
|
256
|
+
background: rgba(0, 0, 0, 0.03);
|
|
257
|
+
border-radius: $jv-radius-xs;
|
|
258
|
+
font-size: 13px;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
pre {
|
|
262
|
+
padding: $jv-space-4;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
code {
|
|
266
|
+
padding: 2px 6px;
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
// See more button
|
|
271
|
+
[component="show/more"] {
|
|
272
|
+
background: $jv-surface !important;
|
|
273
|
+
border: 1px solid $jv-border-subtle !important;
|
|
274
|
+
color: $jv-primary !important;
|
|
275
|
+
font-weight: 600;
|
|
276
|
+
padding: 6px 16px;
|
|
277
|
+
box-shadow: $jv-shadow-soft;
|
|
278
|
+
|
|
279
|
+
&:hover {
|
|
280
|
+
background: $jv-primary-soft !important;
|
|
281
|
+
border-color: $jv-primary !important;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
// ===========================================================
|
|
287
|
+
// DIVIDER
|
|
288
|
+
// ===========================================================
|
|
289
|
+
.feed li[component="post"].posts-list-item {
|
|
290
|
+
hr {
|
|
291
|
+
border-color: $jv-border-subtle !important;
|
|
292
|
+
margin: $jv-space-2 0 !important; // Tighter - 4px
|
|
293
|
+
opacity: 1;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
// ===========================================================
|
|
298
|
+
// ACTION BAR (Comments, Bookmark, Upvote, Reply)
|
|
299
|
+
// ===========================================================
|
|
300
|
+
.feed li[component="post"].posts-list-item {
|
|
301
|
+
.d-flex.justify-content-between:last-child {
|
|
302
|
+
margin: 0 (-$jv-space-2);
|
|
303
|
+
padding-top: $jv-space-2; // Small padding above - 4px
|
|
304
|
+
border-top: 1px solid rgba(0, 0, 0, 0.04); // Subtle separator
|
|
305
|
+
|
|
306
|
+
.btn-link {
|
|
307
|
+
display: inline-flex;
|
|
308
|
+
align-items: center;
|
|
309
|
+
gap: 6px;
|
|
310
|
+
padding: 6px 10px !important; // Tighter padding
|
|
311
|
+
font-size: 13px !important;
|
|
312
|
+
font-weight: 500 !important; // Lighter weight
|
|
313
|
+
color: $jv-text-muted !important;
|
|
314
|
+
background: transparent;
|
|
315
|
+
border: none;
|
|
316
|
+
border-radius: $jv-radius-sm;
|
|
317
|
+
text-decoration: none !important;
|
|
318
|
+
transition: background-color 0.15s ease, color 0.15s ease;
|
|
319
|
+
|
|
320
|
+
&:hover {
|
|
321
|
+
background: rgba(0, 0, 0, 0.03); // Subtler hover
|
|
322
|
+
color: $jv-text-main !important;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
i {
|
|
326
|
+
font-size: 16px;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
// Comments button
|
|
330
|
+
&[href*="post"]:first-child {
|
|
331
|
+
i {
|
|
332
|
+
color: $jv-text-soft;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
&:hover i {
|
|
336
|
+
color: $jv-primary;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
// Bookmark button
|
|
341
|
+
&[data-action="bookmark"] {
|
|
342
|
+
&[data-bookmarked="true"] {
|
|
343
|
+
color: $jv-primary !important;
|
|
344
|
+
|
|
345
|
+
i {
|
|
346
|
+
color: $jv-primary !important;
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
&:hover {
|
|
351
|
+
background: rgba(0, 81, 255, 0.06);
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
// Upvote button
|
|
356
|
+
&[data-action="upvote"] {
|
|
357
|
+
&[data-upvoted="true"] {
|
|
358
|
+
color: #ef4444 !important;
|
|
359
|
+
|
|
360
|
+
i {
|
|
361
|
+
color: #ef4444 !important;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
&:hover {
|
|
366
|
+
background: rgba(239, 68, 68, 0.06);
|
|
367
|
+
|
|
368
|
+
i {
|
|
369
|
+
color: #ef4444;
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
// Reply button
|
|
375
|
+
&[data-action="reply"] {
|
|
376
|
+
&:hover {
|
|
377
|
+
background: rgba(0, 81, 255, 0.06);
|
|
378
|
+
|
|
379
|
+
i {
|
|
380
|
+
color: $jv-primary;
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
// ===========================================================
|
|
389
|
+
// RESPONSIVE
|
|
390
|
+
// ===========================================================
|
|
391
|
+
@media (max-width: 992px) {
|
|
392
|
+
.feed li[component="post"].posts-list-item {
|
|
393
|
+
border-radius: $jv-radius-md !important;
|
|
394
|
+
margin-bottom: $jv-space-2 !important;
|
|
395
|
+
|
|
396
|
+
> .d-flex.gap-2.p-3 {
|
|
397
|
+
padding: $jv-space-4 !important;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.topic-title {
|
|
401
|
+
font-size: 16px !important;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.d-flex.justify-content-between:last-child {
|
|
405
|
+
.btn-link {
|
|
406
|
+
padding: 6px 8px !important;
|
|
407
|
+
font-size: 12px !important;
|
|
408
|
+
|
|
409
|
+
span {
|
|
410
|
+
display: none;
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
@media (max-width: 576px) {
|
|
418
|
+
.feed li[component="post"].posts-list-item {
|
|
419
|
+
.topic-title {
|
|
420
|
+
font-size: 15px !important;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.content[component="post/content"] {
|
|
424
|
+
font-size: 13px !important;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.d-flex.justify-content-between:last-child {
|
|
428
|
+
.btn-link {
|
|
429
|
+
padding: 6px !important;
|
|
430
|
+
|
|
431
|
+
i {
|
|
432
|
+
font-size: 14px;
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
// ===========================================================
|
|
440
|
+
// CATEGORIES LIST – Reddit-Style Category Cards
|
|
441
|
+
// Styles for world.tpl (/categories route)
|
|
442
|
+
// ===========================================================
|
|
443
|
+
|
|
444
|
+
// ===========================================================
|
|
445
|
+
// CATEGORIES LIST CONTAINER
|
|
446
|
+
// ===========================================================
|
|
447
|
+
ul.categories-list {
|
|
448
|
+
display: flex !important;
|
|
449
|
+
flex-direction: column;
|
|
450
|
+
gap: 0;
|
|
451
|
+
padding: 0 !important;
|
|
452
|
+
margin: 0;
|
|
453
|
+
list-style: none;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
// ===========================================================
|
|
457
|
+
// CATEGORY CARD – Main Styling
|
|
458
|
+
// ===========================================================
|
|
459
|
+
.categories-list > li[component="categories/category"] {
|
|
460
|
+
background: $jv-surface !important;
|
|
461
|
+
border: 1px solid $jv-border-subtle !important;
|
|
462
|
+
border-radius: $jv-radius-lg !important;
|
|
463
|
+
margin-bottom: $jv-space-4 !important;
|
|
464
|
+
padding: $jv-space-6 !important;
|
|
465
|
+
overflow: hidden;
|
|
466
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
467
|
+
|
|
468
|
+
&:hover {
|
|
469
|
+
border-color: $jv-border-strong !important;
|
|
470
|
+
box-shadow: $jv-shadow-soft !important;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
// Category icon
|
|
474
|
+
.category-icon {
|
|
475
|
+
width: 48px !important;
|
|
476
|
+
height: 48px !important;
|
|
477
|
+
border-radius: $jv-radius-md !important;
|
|
478
|
+
display: flex;
|
|
479
|
+
align-items: center;
|
|
480
|
+
justify-content: center;
|
|
481
|
+
font-size: 20px;
|
|
482
|
+
flex-shrink: 0;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
// Category header with icon and title
|
|
486
|
+
.category-header {
|
|
487
|
+
display: flex;
|
|
488
|
+
align-items: flex-start;
|
|
489
|
+
gap: $jv-space-4;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
// Category title
|
|
493
|
+
.category-name,
|
|
494
|
+
h2 a,
|
|
495
|
+
.title a {
|
|
496
|
+
font-size: 18px !important;
|
|
497
|
+
font-weight: 600 !important;
|
|
498
|
+
line-height: 1.35 !important;
|
|
499
|
+
color: $jv-text-main !important;
|
|
500
|
+
text-decoration: none !important;
|
|
501
|
+
|
|
502
|
+
&:hover {
|
|
503
|
+
color: $jv-primary !important;
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
// Category description
|
|
508
|
+
.category-description,
|
|
509
|
+
.description {
|
|
510
|
+
font-size: 14px !important;
|
|
511
|
+
line-height: 1.5 !important;
|
|
512
|
+
color: $jv-text-muted;
|
|
513
|
+
margin-top: $jv-space-2;
|
|
514
|
+
margin-bottom: 0;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
// Stats row (topics, posts count)
|
|
518
|
+
.category-stat,
|
|
519
|
+
.stat {
|
|
520
|
+
font-size: 13px !important;
|
|
521
|
+
color: $jv-text-soft;
|
|
522
|
+
|
|
523
|
+
strong,
|
|
524
|
+
.human-readable-number {
|
|
525
|
+
color: $jv-text-muted;
|
|
526
|
+
font-weight: 600;
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
// Teaser (latest post preview)
|
|
531
|
+
.category-teaser,
|
|
532
|
+
.teaser {
|
|
533
|
+
margin-top: $jv-space-4;
|
|
534
|
+
padding-top: $jv-space-4;
|
|
535
|
+
border-top: 1px solid $jv-border-subtle;
|
|
536
|
+
|
|
537
|
+
.avatar {
|
|
538
|
+
width: 24px !important;
|
|
539
|
+
height: 24px !important;
|
|
540
|
+
border-radius: 50% !important;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.timeago {
|
|
544
|
+
font-size: 12px !important;
|
|
545
|
+
color: $jv-text-soft;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
a {
|
|
549
|
+
color: $jv-text-muted;
|
|
550
|
+
font-size: 13px;
|
|
551
|
+
|
|
552
|
+
&:hover {
|
|
553
|
+
color: $jv-primary;
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
// Children categories
|
|
559
|
+
.category-children {
|
|
560
|
+
margin-top: $jv-space-4;
|
|
561
|
+
padding-top: $jv-space-4;
|
|
562
|
+
border-top: 1px solid $jv-border-subtle;
|
|
563
|
+
|
|
564
|
+
.category-children-item {
|
|
565
|
+
display: inline-flex;
|
|
566
|
+
align-items: center;
|
|
567
|
+
gap: $jv-space-2;
|
|
568
|
+
padding: $jv-space-2 $jv-space-4;
|
|
569
|
+
background: rgba(0, 0, 0, 0.02);
|
|
570
|
+
border-radius: $jv-radius-sm;
|
|
571
|
+
margin-right: $jv-space-2;
|
|
572
|
+
margin-bottom: $jv-space-2;
|
|
573
|
+
font-size: 13px;
|
|
574
|
+
color: $jv-text-muted;
|
|
575
|
+
|
|
576
|
+
&:hover {
|
|
577
|
+
background: rgba(0, 0, 0, 0.04);
|
|
578
|
+
color: $jv-primary;
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
// ===========================================================
|
|
585
|
+
// CATEGORIES RESPONSIVE
|
|
586
|
+
// ===========================================================
|
|
587
|
+
@media (max-width: 992px) {
|
|
588
|
+
.categories-list > li[component="categories/category"] {
|
|
589
|
+
border-radius: $jv-radius-md !important;
|
|
590
|
+
margin-bottom: $jv-space-2 !important;
|
|
591
|
+
padding: $jv-space-4 !important;
|
|
592
|
+
|
|
593
|
+
.category-icon {
|
|
594
|
+
width: 40px !important;
|
|
595
|
+
height: 40px !important;
|
|
596
|
+
font-size: 18px;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.category-name,
|
|
600
|
+
h2 a,
|
|
601
|
+
.title a {
|
|
602
|
+
font-size: 16px !important;
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
@media (max-width: 576px) {
|
|
608
|
+
.categories-list > li[component="categories/category"] {
|
|
609
|
+
.category-name,
|
|
610
|
+
h2 a,
|
|
611
|
+
.title a {
|
|
612
|
+
font-size: 15px !important;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.category-description,
|
|
616
|
+
.description {
|
|
617
|
+
font-size: 13px !important;
|
|
618
|
+
}
|
|
619
|
+
}
|
|
620
|
+
}
|
package/scss/_sidebar.scss
CHANGED
|
@@ -3,12 +3,67 @@
|
|
|
3
3
|
// Modern, clean sidebar with card-based widgets
|
|
4
4
|
// ===========================================================
|
|
5
5
|
|
|
6
|
+
// ===========================================================
|
|
7
|
+
// JAVIS SIDEBAR LOGO
|
|
8
|
+
// ===========================================================
|
|
9
|
+
.javis-sidebar-logo {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
padding: $jv-space-6 $jv-space-4; // 12px top/bottom, 8px left/right
|
|
14
|
+
margin-bottom: $jv-space-4; // 8px gap before nav - industry standard
|
|
15
|
+
border-bottom: 1px solid $jv-border-subtle;
|
|
16
|
+
flex-shrink: 0;
|
|
17
|
+
|
|
18
|
+
.javis-logo-link {
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
text-decoration: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Icon logo (collapsed state) - 32x32px
|
|
26
|
+
.javis-logo-icon {
|
|
27
|
+
width: 32px;
|
|
28
|
+
height: 32px;
|
|
29
|
+
object-fit: contain;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// Full logo (expanded state) - max 140px width
|
|
33
|
+
.javis-logo-full {
|
|
34
|
+
max-width: 140px;
|
|
35
|
+
height: 32px;
|
|
36
|
+
object-fit: contain;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Adjust when sidebar is open
|
|
41
|
+
.sidebar-left.open .javis-sidebar-logo {
|
|
42
|
+
padding: $jv-space-6 $jv-space-10; // 12px vertical, 20px horizontal when expanded
|
|
43
|
+
justify-content: flex-start;
|
|
44
|
+
}
|
|
45
|
+
|
|
6
46
|
// ===========================================================
|
|
7
47
|
// LEFT SIDEBAR (Main Navigation)
|
|
8
48
|
// ===========================================================
|
|
9
49
|
.sidebar {
|
|
10
50
|
background: $jv-surface;
|
|
11
51
|
border-right: 1px solid $jv-border-subtle;
|
|
52
|
+
padding-top: 0 !important; // Remove top padding so logo sits at top edge
|
|
53
|
+
|
|
54
|
+
// Main navigation list
|
|
55
|
+
#main-nav {
|
|
56
|
+
// No gap class - we control spacing per nav-item instead
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Nav items - proper spacing between items
|
|
60
|
+
.nav-item {
|
|
61
|
+
margin-bottom: $jv-space-2; // 4px between nav items - compact like Slack/Discord
|
|
62
|
+
|
|
63
|
+
&:last-child {
|
|
64
|
+
margin-bottom: 0; // No margin on last item
|
|
65
|
+
}
|
|
66
|
+
}
|
|
12
67
|
|
|
13
68
|
// Sidebar navigation links
|
|
14
69
|
.nav-link {
|
|
@@ -21,7 +76,6 @@
|
|
|
21
76
|
font-weight: 500;
|
|
22
77
|
border-radius: $jv-radius-sm;
|
|
23
78
|
transition: all 0.15s ease;
|
|
24
|
-
margin: 2px 0;
|
|
25
79
|
|
|
26
80
|
i {
|
|
27
81
|
width: 18px;
|
|
@@ -537,3 +591,225 @@ div[data-widget-area="right"] h8 {
|
|
|
537
591
|
}
|
|
538
592
|
}
|
|
539
593
|
}
|
|
594
|
+
|
|
595
|
+
// ===========================================================
|
|
596
|
+
// RIGHT SIDEBAR WIDGET AREA (Reddit-style)
|
|
597
|
+
// ===========================================================
|
|
598
|
+
div[data-widget-area="sidebar"],
|
|
599
|
+
.col-lg-3[data-widget-area="sidebar"] {
|
|
600
|
+
display: flex;
|
|
601
|
+
flex-direction: column;
|
|
602
|
+
gap: $jv-space-6;
|
|
603
|
+
|
|
604
|
+
// Widget card container
|
|
605
|
+
> div {
|
|
606
|
+
background: $jv-surface;
|
|
607
|
+
border: 1px solid $jv-border-subtle;
|
|
608
|
+
border-radius: $jv-radius-lg;
|
|
609
|
+
overflow: hidden;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
// Widget header/title
|
|
613
|
+
h5, h6, .widget-title {
|
|
614
|
+
font-size: 12px !important;
|
|
615
|
+
font-weight: 700 !important;
|
|
616
|
+
text-transform: uppercase;
|
|
617
|
+
letter-spacing: 0.5px;
|
|
618
|
+
color: $jv-text-soft;
|
|
619
|
+
padding: $jv-space-6 $jv-space-6 $jv-space-4;
|
|
620
|
+
margin: 0 !important;
|
|
621
|
+
border-bottom: 1px solid $jv-border-subtle;
|
|
622
|
+
background: rgba(0, 0, 0, 0.015);
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
// ===========================================================
|
|
627
|
+
// POPULAR TAGS WIDGET (Sidebar)
|
|
628
|
+
// ===========================================================
|
|
629
|
+
div[data-widget-area="sidebar"] {
|
|
630
|
+
.popular-tags,
|
|
631
|
+
[class*="tag"] {
|
|
632
|
+
padding: $jv-space-4;
|
|
633
|
+
|
|
634
|
+
// Tag items grid
|
|
635
|
+
.tag-list,
|
|
636
|
+
> div {
|
|
637
|
+
display: flex;
|
|
638
|
+
flex-direction: column;
|
|
639
|
+
gap: $jv-space-2;
|
|
640
|
+
|
|
641
|
+
> div,
|
|
642
|
+
> a {
|
|
643
|
+
display: flex;
|
|
644
|
+
align-items: center;
|
|
645
|
+
justify-content: space-between;
|
|
646
|
+
padding: $jv-space-4 $jv-space-4;
|
|
647
|
+
background: transparent;
|
|
648
|
+
border: none;
|
|
649
|
+
border-radius: $jv-radius-sm;
|
|
650
|
+
color: $jv-text-main;
|
|
651
|
+
font-size: 14px;
|
|
652
|
+
font-weight: 500;
|
|
653
|
+
text-decoration: none;
|
|
654
|
+
transition: background-color 0.15s ease;
|
|
655
|
+
cursor: pointer;
|
|
656
|
+
|
|
657
|
+
&:hover {
|
|
658
|
+
background: rgba(0, 81, 255, 0.06);
|
|
659
|
+
color: $jv-primary;
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
// Topic count
|
|
663
|
+
small,
|
|
664
|
+
.count,
|
|
665
|
+
span:last-child {
|
|
666
|
+
font-size: 12px;
|
|
667
|
+
color: $jv-text-soft;
|
|
668
|
+
font-weight: 400;
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
// ===========================================================
|
|
676
|
+
// RECENT/TRENDING POSTS WIDGET (Sidebar)
|
|
677
|
+
// ===========================================================
|
|
678
|
+
div[data-widget-area="sidebar"] {
|
|
679
|
+
#recent_posts,
|
|
680
|
+
.recent-posts,
|
|
681
|
+
ul {
|
|
682
|
+
list-style: none;
|
|
683
|
+
padding: 0;
|
|
684
|
+
margin: 0;
|
|
685
|
+
|
|
686
|
+
li {
|
|
687
|
+
padding: $jv-space-4 $jv-space-6;
|
|
688
|
+
border-bottom: 1px solid $jv-border-subtle;
|
|
689
|
+
transition: background-color 0.15s ease;
|
|
690
|
+
|
|
691
|
+
&:last-child {
|
|
692
|
+
border-bottom: none;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
&:hover {
|
|
696
|
+
background: rgba(0, 0, 0, 0.02);
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
// Post header with avatar
|
|
700
|
+
.d-flex {
|
|
701
|
+
display: flex;
|
|
702
|
+
align-items: center;
|
|
703
|
+
gap: $jv-space-2;
|
|
704
|
+
margin-bottom: $jv-space-2;
|
|
705
|
+
|
|
706
|
+
// Avatar
|
|
707
|
+
.avatar,
|
|
708
|
+
img[class*="avatar"] {
|
|
709
|
+
width: 20px !important;
|
|
710
|
+
height: 20px !important;
|
|
711
|
+
border-radius: 50%;
|
|
712
|
+
flex-shrink: 0;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
// Username
|
|
716
|
+
a:first-of-type {
|
|
717
|
+
font-size: 12px;
|
|
718
|
+
font-weight: 600;
|
|
719
|
+
color: $jv-text-main;
|
|
720
|
+
text-decoration: none;
|
|
721
|
+
|
|
722
|
+
&:hover {
|
|
723
|
+
color: $jv-primary;
|
|
724
|
+
}
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
// Timeago
|
|
728
|
+
.timeago {
|
|
729
|
+
font-size: 11px;
|
|
730
|
+
color: $jv-text-soft;
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
// Post title/content
|
|
735
|
+
> a,
|
|
736
|
+
.post-content a,
|
|
737
|
+
p {
|
|
738
|
+
display: block;
|
|
739
|
+
font-size: 13px;
|
|
740
|
+
font-weight: 500;
|
|
741
|
+
color: $jv-text-main;
|
|
742
|
+
text-decoration: none;
|
|
743
|
+
line-height: 1.4;
|
|
744
|
+
margin-bottom: $jv-space-2;
|
|
745
|
+
|
|
746
|
+
// Line clamp
|
|
747
|
+
display: -webkit-box;
|
|
748
|
+
-webkit-line-clamp: 2;
|
|
749
|
+
-webkit-box-orient: vertical;
|
|
750
|
+
overflow: hidden;
|
|
751
|
+
|
|
752
|
+
&:hover {
|
|
753
|
+
color: $jv-primary;
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
// Content preview text
|
|
758
|
+
.post-content,
|
|
759
|
+
.content,
|
|
760
|
+
.text-xs {
|
|
761
|
+
font-size: 12px;
|
|
762
|
+
color: $jv-text-muted;
|
|
763
|
+
line-height: 1.45;
|
|
764
|
+
display: -webkit-box;
|
|
765
|
+
-webkit-line-clamp: 2;
|
|
766
|
+
-webkit-box-orient: vertical;
|
|
767
|
+
overflow: hidden;
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
// Read more link
|
|
771
|
+
a.stretched-link,
|
|
772
|
+
.read-more {
|
|
773
|
+
font-size: 12px;
|
|
774
|
+
font-weight: 600;
|
|
775
|
+
color: $jv-primary;
|
|
776
|
+
text-decoration: none;
|
|
777
|
+
margin-top: $jv-space-2;
|
|
778
|
+
display: inline-block;
|
|
779
|
+
|
|
780
|
+
&:hover {
|
|
781
|
+
text-decoration: underline;
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
// ===========================================================
|
|
789
|
+
// WIDGET HEADER ICONS
|
|
790
|
+
// ===========================================================
|
|
791
|
+
div[data-widget-area="sidebar"] {
|
|
792
|
+
h5, h6, .widget-title {
|
|
793
|
+
display: flex;
|
|
794
|
+
align-items: center;
|
|
795
|
+
gap: $jv-space-2;
|
|
796
|
+
|
|
797
|
+
i {
|
|
798
|
+
font-size: 14px;
|
|
799
|
+
color: $jv-text-soft;
|
|
800
|
+
}
|
|
801
|
+
}
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
// ===========================================================
|
|
805
|
+
// EMPTY STATE
|
|
806
|
+
// ===========================================================
|
|
807
|
+
div[data-widget-area="sidebar"] {
|
|
808
|
+
.empty,
|
|
809
|
+
.no-content {
|
|
810
|
+
padding: $jv-space-8;
|
|
811
|
+
text-align: center;
|
|
812
|
+
color: $jv-text-soft;
|
|
813
|
+
font-size: $jv-font-size-sm;
|
|
814
|
+
}
|
|
815
|
+
}
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{{{ if widgets.brand-header.length }}}
|
|
2
|
+
<div class="container-lg px-md-4 brand-container">
|
|
3
|
+
<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
|
|
4
|
+
<div data-widget-area="brand-header" class="flex-fill gap-3 p-2 align-self-center">
|
|
5
|
+
{{{each widgets.brand-header}}}
|
|
6
|
+
{{./html}}
|
|
7
|
+
{{{end}}}
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
{{{ end }}}
|
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
<nav component="sidebar/left" class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-lg-flex flex-column justify-content-between sticky-top">
|
|
2
|
-
|
|
2
|
+
<!-- JAVIS Logo Section -->
|
|
3
|
+
<div class="javis-sidebar-logo">
|
|
4
|
+
<a href="{relative_path}/" class="javis-logo-link" title="JAVIS Community">
|
|
5
|
+
<!-- Icon logo (shown when collapsed) -->
|
|
6
|
+
<img src="{relative_path}/plugins/@okjavis/nodebb-theme-javis/static/images/logo-icon.png" alt="JAVIS" class="javis-logo-icon visible-closed" />
|
|
7
|
+
<!-- Full logo (shown when expanded) -->
|
|
8
|
+
<img src="{relative_path}/plugins/@okjavis/nodebb-theme-javis/static/images/logo-full.png" alt="JAVIS Community" class="javis-logo-full visible-open" />
|
|
9
|
+
</a>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 overflow-y-auto">
|
|
3
13
|
{{{ each navigation }}}
|
|
4
14
|
{{{ if displayMenuItem(@root, @index) }}}
|
|
5
15
|
<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
|
package/theme.scss
CHANGED