Mercurial > libervia-templates

comparison sat_templates/templates/bulma/static/forum.css @ 413:0190a0d32909 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Forum: Major redesign of forums: Forums have been redesigned. They follow the new general design with 2 or 3 panels, allowing to have directly a forum if one is found/set up, and a panel on the left to search/discover other ones. Categories have been rewritten to be usable with pubsub relationships, a XEP-0277 type node is used for topics, and each item has a comments node for the threads. The thread view is set in `forum/show_messages.html` template. It has a header with a search box and a button to (un)subscribe. Items are displayed with the same macros as for the blog items. Below a room is set for editor, tags and attachments. rel 463
author Goffi <goffi@goffi.org>
date Fri, 05 Sep 2025 21:54:09 +0200
parents
children
comparison
equal deleted inserted replaced
412:c1d33d7e4b96 413:0190a0d32909
1 #body {
2 display: flex;
3 flex-grow: 1;
4 overflow: auto;
5 }
6
7 #forum_main_body {
8 overflow-y: auto;
9 }
10
11 .topics-container {
12 max-height: calc(100vh - 100px);
13 overflow-y: auto;
14 }
15
16 .topic-item {
17 border-radius: 8px;
18 border: 1px solid #e8e8e8;
19 transition: all 0.2s ease;
20 box-shadow: 0 2px 4px rgba(10, 10, 10, 0.03);
21 }
22
23
24 .topic-item:hover {
25 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
26 transform: translateY(-1px);
27 border-color: #3273dc;
28 }
29
30 .no-topics-message {
31 border-radius: 12px;
32 background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
33 max-width: 500px;
34 margin: 2rem auto 1rem !important;
35 }
36
37
38 .no-topics-message i.fa-comments {
39 color: #3273dc;
40 opacity: 0.7;
41 }
42
43
44 @media (max-width: 768px) {
45 .topic-item {
46 padding: 0.75rem !important;
47 }
48
49 .media-left {
50 margin-right: 0.5rem !important;
51 }
52
53 .title.is-6 {
54 font-size: 0.95rem !important;
55 }
56
57 .tags {
58 flex-wrap: wrap;
59 }
60 }
61
62 .transition-all {
63 transition: all 0.25s ease;
64 }
65
66 .tags.has-addons .tag:first-child {
67 border-top-right-radius: 0;
68 border-bottom-right-radius: 0;
69 border-right: none;
70 background: rgba(235, 245, 255, 0.5);
71 }
72
73 [data-theme="dark"] .tags.has-addons .tag:first-child {
74 background: rgba(0, 50, 100, 0.3);
75 }
76
77 .tags.has-addons .tag:last-child {
78 border-top-left-radius: 0;
79 border-bottom-left-radius: 0;
80 }
81
82 .new-message-section {
83 border-top: 1px solid #dbdbdb;
84 padding-top: 1.5rem;
85 margin-top: 1.5rem;
86 }
87
88 [data-theme="dark"] .topic-item {
89 background-color: #1a1a1a !important;
90 border-color: #333333;
91 }
92
93 [data-theme="dark"] .no-topics-message {
94 background: linear-gradient(135deg, #1a1d22 0%, #14171c 100%);
95 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
96 }
97
98 [data-theme="dark"] .no-topics-message i.fa-comments {
99 color: #48c0ff;
100 }
101
102 [data-theme="dark"] .new-message-section {
103 border-top: 1px solid #4a4a4a;
104 }
105
106 .extra-buttons {
107 display: inline-block;
108 vertical-align: middle;
109 }
110
111 /* Custom Quill toolbar buttons */
112 .extra-btn-tag, .extra-btn-attachment {
113 background: none;
114 border: none;
115 cursor: pointer;
116 padding: 4px 8px;
117 border-radius: 3px;
118 display: inline-block;
119 }
120
121 .extra-btn-tag:hover, .extra-btn-attachment:hover {
122 background-color: #f0f0f0;
123 }
124
125 [data-theme="dark"] .extra-btn-tag:hover,
126 [data-theme="dark"] .extra-btn-attachment:hover {
127 background-color: #4a4a4a;
128 }
129
130 #message_editor.drag-over, #attachments-area.drag-over {
131 border-color: #3273dc;
132 background-color: rgba(50, 115, 220, 0.05);
133 }