Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/styles.css @ 413:0190a0d32909 default tip
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 | a5588ea3bcd6 |
| children |
| rev | line source |
|---|---|
| 403 | 1 :root { |
| 2 --selected-item-bg: deepskyblue; | |
|
405
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
3 /* Reaction colors */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
4 --reaction-background: #ffffff; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
5 --reaction-hover-background: #f5f5f5; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
6 --reaction-border: #dbdbdb; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
7 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
8 /* User reaction colors */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
9 --reaction-user-background: #eef6fc; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
10 --reaction-user-hover-background: #e3f1fc; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
11 --reaction-user-border: #3273dc; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
12 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
13 /* Spacing */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
14 --reaction-padding: 0.25rem 0.5rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
15 --reaction-gap: 0.5rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
16 --reaction-margin-top: 0.5rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
17 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
18 /* Typography */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
19 --reaction-font-size: 0.875rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
20 --reaction-counter-font-size: 0.75rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
21 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
22 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
23 [data-theme="dark"] { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
24 --reaction-background: #2c2c2c; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
25 --reaction-hover-background: #404040; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
26 --reaction-border: #4a4a4a; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
27 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
28 --reaction-user-background: #1a3b5c; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
29 --reaction-user-hover-background: #234875; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
30 --reaction-user-border: #3273dc; |
| 403 | 31 } |
| 32 | |
|
402
2bbcb7da56bc
bulma: use Font-Awesome instead of Fontello + start of major redesign:
Goffi <goffi@goffi.org>
parents:
396
diff
changeset
|
33 html, body { |
|
381
387c8c5a3bee
bulma (styles): disable the delete cross on search input:
Goffi <goffi@goffi.org>
parents:
371
diff
changeset
|
34 |
| 403 | 35 height: 100vh; |
| 36 overflow: hidden; | |
| 37 } | |
| 38 | |
| 39 body { | |
| 40 display: flex; | |
| 41 flex-direction: column; | |
| 42 } | |
| 43 | |
| 44 #body { | |
| 45 display: flex; | |
| 46 flex-direction: column; | |
| 47 overflow: auto; | |
| 48 } | |
| 49 | |
| 50 .is-full-height { | |
|
402
2bbcb7da56bc
bulma: use Font-Awesome instead of Fontello + start of major redesign:
Goffi <goffi@goffi.org>
parents:
396
diff
changeset
|
51 height: 100%; |
| 230 | 52 } |
| 53 | |
| 404 | 54 .is-full-width { |
| 55 width: 100%; | |
| 56 } | |
| 57 | |
|
402
2bbcb7da56bc
bulma: use Font-Awesome instead of Fontello + start of major redesign:
Goffi <goffi@goffi.org>
parents:
396
diff
changeset
|
58 .navbar-item { |
|
2bbcb7da56bc
bulma: use Font-Awesome instead of Fontello + start of major redesign:
Goffi <goffi@goffi.org>
parents:
396
diff
changeset
|
59 gap: 0; |
| 319 | 60 } |
| 61 | |
|
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
62 |
|
402
2bbcb7da56bc
bulma: use Font-Awesome instead of Fontello + start of major redesign:
Goffi <goffi@goffi.org>
parents:
396
diff
changeset
|
63 .menu-item { |
|
2bbcb7da56bc
bulma: use Font-Awesome instead of Fontello + start of major redesign:
Goffi <goffi@goffi.org>
parents:
396
diff
changeset
|
64 padding-top: 0.225em; |
|
286
f8026bf77a4c
bulma (CSS): updated classed to handle native video player + video in slideshow
Goffi <goffi@goffi.org>
parents:
278
diff
changeset
|
65 } |
| 403 | 66 |
| 413 | 67 |
| 68 .is-text-content { | |
| 69 white-space: break-spaces; | |
| 70 } | |
| 71 | |
| 72 | |
| 403 | 73 .avatar { |
| 74 width: 40px; | |
| 75 height: 40px; | |
| 76 border-radius: 50%; | |
| 77 background-color: #3273dc; | |
| 78 color: #fff; | |
| 79 } | |
| 80 | |
| 81 .avatar.image { | |
| 82 background-color: #ccc; | |
| 83 padding: 3px; | |
| 84 } | |
| 85 | |
| 86 div.jid-search-dialog { | |
| 87 min-height: 80%; | |
| 88 } | |
| 89 | |
| 90 div.search-item.is-selected { | |
| 91 background-color: var(--selected-item-bg); | |
| 92 } | |
| 93 | |
| 94 .collapsible-content { | |
| 95 overflow: hidden; | |
| 96 max-height: 0; | |
| 97 opacity: 1; | |
| 98 transition: | |
| 99 max-height 0.3s ease-out, | |
| 100 opacity 0.2s linear; | |
| 101 } | |
| 102 | |
| 103 .collapsible-header.collapsed .collapsible-icon { | |
| 104 transform: rotate(-90deg); | |
| 105 } | |
| 106 | |
| 107 /* Animation */ | |
| 108 .collapsible-header.collapsed + .collapsible-content { | |
| 109 opacity: 0; | |
| 110 } | |
| 111 | |
| 112 .collapsible-icon { | |
| 113 transition: transform 0.2s ease-out; | |
| 114 } | |
|
405
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
115 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
116 /* Panels */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
117 |
| 406 | 118 .modal-panel-header { |
|
405
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
119 border-bottom: 1px solid #dbdbdb; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
120 padding: 0.5rem 1rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
121 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
122 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
123 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
124 #left_panel li:hover { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
125 background-color: #444; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
126 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
127 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
128 |
|
410
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
129 /* dialogs */ |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
130 |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
131 .modal-dialog { |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
132 transform: scaleY(0); |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
133 } |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
134 |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
135 div.state_appended .modal-dialog, div.main_notification.state_appended { |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
136 transform: scaleY(1); |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
137 transition: transform 0.15s ease-in; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
138 } |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
139 |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
140 .main_notification { |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
141 position: fixed; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
142 top: 2rem; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
143 left: 0; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
144 right: 0; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
145 z-index: 10000; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
146 transform: scaleY(0); |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
147 transition: transform 0.15s ease-in; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
148 } |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
149 |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
150 div.main_notification>div.column { |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
151 display: flex; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
152 max-width: 95%; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
153 } |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
154 div.main_notification>div.column>div.notification { |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
155 max-width: 80rem; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
156 } |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
157 |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
158 |
|
405
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
159 /* Sidebar toggle transitions */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
160 .left-sidebar, .right-sidebar { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
161 transition: transform 0.3s ease, max-width 0.3s ease, opacity 0.3s ease; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
162 overflow-x: hidden; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
163 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
164 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
165 .left-sidebar.is-collapsed { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
166 transform: translateX(-100%); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
167 max-width: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
168 padding: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
169 margin: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
170 opacity: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
171 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
172 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
173 .right-sidebar.is-collapsed { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
174 transform: translateX(100%); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
175 max-width: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
176 padding: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
177 margin: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
178 opacity: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
179 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
180 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
181 .main-panel.is-expanded-left { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
182 margin-left: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
183 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
184 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
185 .main-panel.is-expanded-right { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
186 margin-right: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
187 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
188 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
189 /* Common components */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
190 /* Reactions */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
191 .reactions-container { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
192 gap: var(--reaction-gap); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
193 margin-top: var(--reaction-margin-top); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
194 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
195 .reaction { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
196 padding: var(--reaction-padding); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
197 border-radius: 1rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
198 background-color: var(--reaction-background); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
199 font-size: var(--reaction-font-size); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
200 cursor: pointer; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
201 transition: all 0.2s ease; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
202 border: 1px solid var(--reaction-border); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
203 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
204 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
205 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
206 .reaction:hover { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
207 background-color: var(--reaction-hover-background); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
208 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
209 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
210 .reaction .counter { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
211 margin-left: 0.25rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
212 font-size: var(--reaction-counter-font-size); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
213 color: var(--color-text); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
214 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
215 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
216 .reaction.own-reaction { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
217 background-color: var(--reaction-user-background); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
218 border-color: var(--reaction-user-border); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
219 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
220 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
221 .reaction.own-reaction:hover { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
222 background-color: var(--reaction-user-hover-background); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
223 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
224 |
| 406 | 225 /* Side Panels */ |
|
405
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
226 |
| 406 | 227 .modal-panel { |
| 228 position: fixed; | |
| 229 top: 0; | |
| 230 left: 0; | |
| 231 width: 100%; | |
| 232 height: 100%; | |
| 233 z-index: 100; | |
| 234 display: flex; | |
| 235 pointer-events: none; | |
| 236 } | |
| 237 | |
| 238 .modal-panel-background { | |
| 239 position: absolute; | |
| 240 top: 0; | |
| 241 left: 0; | |
| 242 width: 100%; | |
| 243 height: 100%; | |
| 244 background-color: hsla(221,14%,4%,0.86); | |
| 245 opacity: 0; | |
| 246 transition: opacity 0.3s ease; | |
| 247 pointer-events: all; | |
| 248 } | |
| 249 | |
| 250 .modal-panel-container { | |
| 251 position: absolute; | |
| 252 background: white; | |
| 253 box-shadow: -2px 0 10px rgba(0,0,0,0.1); | |
| 254 overflow-y: auto; | |
| 255 transition: transform 0.3s ease-out; | |
| 256 will-change: transform; | |
| 257 pointer-events: all; | |
| 258 } | |
| 259 | |
| 260 /* Position classes */ | |
| 261 .modal-panel-container.is-right { | |
| 262 top: 0; | |
| 263 right: 0; | |
| 264 height: 100vh; | |
| 265 transform: translateX(100%); | |
| 266 border-left: 1px solid #eee; | |
| 267 } | |
| 268 | |
| 269 .modal-panel-container.is-left { | |
| 270 top: 0; | |
| 271 left: 0; | |
| 272 height: 100vh; | |
| 273 transform: translateX(-100%); | |
| 274 border-right: 1px solid #eee; | |
| 275 } | |
| 276 | |
| 277 .modal-panel-container.is-top { | |
| 278 top: 0; | |
| 279 left: 0; | |
| 280 right: 0; | |
| 281 transform: translateY(-100%); | |
| 282 border-bottom: 1px solid #eee; | |
| 283 } | |
| 284 | |
| 285 .modal-panel-container.is-bottom { | |
| 286 bottom: 0; | |
| 287 left: 0; | |
| 288 right: 0; | |
| 289 transform: translateY(100%); | |
| 290 border-top: 1px solid #eee; | |
| 291 } | |
| 292 | |
| 293 /* Active state */ | |
| 294 .modal-panel.is-active .modal-panel-background { | |
| 295 opacity: 1; | |
| 296 } | |
| 297 | |
| 298 .modal-panel.is-active .modal-panel-container { | |
| 299 transform: none !important; | |
| 300 } | |
| 301 | |
| 302 /* Closing animation */ | |
| 303 .modal-panel.closing .modal-panel-background { | |
| 304 opacity: 0; | |
| 305 } | |
| 306 | |
| 307 .modal-panel.closing .modal-panel-container.is-right { | |
| 308 transform: translateX(100%) !important; | |
| 309 } | |
| 310 | |
| 311 .modal-panel.closing .modal-panel-container.is-left { | |
| 312 transform: translateX(-100%) !important; | |
| 313 } | |
| 314 | |
| 315 .modal-panel.closing .modal-panel-container.is-top { | |
| 316 transform: translateY(-100%) !important; | |
| 317 } | |
| 318 | |
| 319 .modal-panel.closing .modal-panel-container.is-bottom { | |
| 320 transform: translateY(100%) !important; | |
| 321 } | |
| 322 | |
| 413 | 323 .thumbnail-image { |
| 324 max-height: 100%; | |
| 325 } | |
| 326 | |
| 327 /* Tags */ | |
| 328 | |
| 329 .tag_input { | |
| 330 display: inline-block; | |
| 331 width: 6rem; | |
| 332 } | |
| 333 | |
| 334 /* Attachments */ | |
| 335 | |
| 336 .attachments { | |
| 337 opacity: 1; | |
| 338 max-height: 1000px; | |
| 339 transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out; | |
| 340 overflow-x: auto; | |
| 341 overflow-y: hidden; | |
| 342 padding: 1.25rem 0; | |
| 343 margin: 0; | |
| 344 white-space: nowrap; | |
| 345 } | |
| 346 | |
| 347 .attachments.is-contracted { | |
| 348 opacity: 0; | |
| 349 max-height: 0; | |
| 350 padding: 0; | |
| 351 } | |
| 352 | |
| 353 .attachment-preview { | |
| 354 position: relative; | |
| 355 border: 1px solid #dbdbdb; | |
| 356 padding: 0.3rem 0.5rem; | |
| 357 border-radius: 4px; | |
| 358 background-color: #f5f5f5; | |
| 359 margin: 0 1rem 0 0 !important; | |
| 360 width: 9rem; | |
| 361 } | |
| 362 | |
| 363 .progress_finished progress { | |
| 364 opacity: 0; | |
| 365 } | |
| 406 | 366 |
| 367 /* Responsive */ | |
| 368 | |
| 369 | |
| 370 @media screen and (max-width: 768px) { | |
| 371 .modal-panel-container { | |
| 372 width: 90% !important; | |
| 373 } | |
| 374 } | |
| 375 | |
| 376 @media screen and (min-width: 769px) { | |
| 377 .modal-panel-container.is-right, | |
| 378 .modal-panel-container.is-left { | |
| 379 width: 50rem; | |
| 380 } | |
| 381 | |
| 382 .modal-panel-container.is-top, | |
| 383 .modal-panel-container.is-bottom { | |
| 384 height: 80vh; | |
| 385 } | |
| 386 } |