Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/styles.css @ 411:f7a434581872 default tip
chat: Add forward, rich editing and extra recipients:
- There is a new "forward" menu in message. For now, a simple prompt ask for recipient JID.
- A new "extra" menu is available next to input field. Inside there are 2 items for now:
add extra recipient, and toggle rich edit mode.
- Extra recipient option add a field to add an email-like "to", "cc" or "bcc" recipients.
- Rich edit let use rich styling such as bold, italic, underline, etc.
rel 461
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Fri, 04 Jul 2025 17:33:22 +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 |
| 67 .avatar { | |
| 68 width: 40px; | |
| 69 height: 40px; | |
| 70 border-radius: 50%; | |
| 71 background-color: #3273dc; | |
| 72 color: #fff; | |
| 73 } | |
| 74 | |
| 75 .avatar.image { | |
| 76 background-color: #ccc; | |
| 77 padding: 3px; | |
| 78 } | |
| 79 | |
| 80 div.jid-search-dialog { | |
| 81 min-height: 80%; | |
| 82 } | |
| 83 | |
| 84 div.search-item.is-selected { | |
| 85 background-color: var(--selected-item-bg); | |
| 86 } | |
| 87 | |
| 88 | |
| 89 .collapsible-content { | |
| 90 overflow: hidden; | |
| 91 max-height: 0; | |
| 92 opacity: 1; | |
| 93 transition: | |
| 94 max-height 0.3s ease-out, | |
| 95 opacity 0.2s linear; | |
| 96 } | |
| 97 | |
| 98 .collapsible-header.collapsed .collapsible-icon { | |
| 99 transform: rotate(-90deg); | |
| 100 } | |
| 101 | |
| 102 /* Animation */ | |
| 103 .collapsible-header.collapsed + .collapsible-content { | |
| 104 opacity: 0; | |
| 105 } | |
| 106 | |
| 107 .collapsible-icon { | |
| 108 transition: transform 0.2s ease-out; | |
| 109 } | |
|
405
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
110 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
111 /* Panels */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
112 |
| 406 | 113 .modal-panel-header { |
|
405
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
114 border-bottom: 1px solid #dbdbdb; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
115 padding: 0.5rem 1rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
116 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
117 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
118 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
119 #left_panel li:hover { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
120 background-color: #444; |
|
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 |
|
410
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
124 /* dialogs */ |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
125 |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
126 .modal-dialog { |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
127 transform: scaleY(0); |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
128 } |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
129 |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
130 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
|
131 transform: scaleY(1); |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
132 transition: transform 0.15s ease-in; |
|
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 .main_notification { |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
136 position: fixed; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
137 top: 2rem; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
138 left: 0; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
139 right: 0; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
140 z-index: 10000; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
141 transform: scaleY(0); |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
142 transition: transform 0.15s ease-in; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
143 } |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
144 |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
145 div.main_notification>div.column { |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
146 display: flex; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
147 max-width: 95%; |
|
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 div.main_notification>div.column>div.notification { |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
150 max-width: 80rem; |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
151 } |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
152 |
|
a5588ea3bcd6
css: Restore some dialogs/notifs rules.
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
153 |
|
405
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
154 /* Sidebar toggle transitions */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
155 .left-sidebar, .right-sidebar { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
156 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
|
157 overflow-x: hidden; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
158 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
159 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
160 .left-sidebar.is-collapsed { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
161 transform: translateX(-100%); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
162 max-width: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
163 padding: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
164 margin: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
165 opacity: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
166 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
167 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
168 .right-sidebar.is-collapsed { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
169 transform: translateX(100%); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
170 max-width: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
171 padding: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
172 margin: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
173 opacity: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
174 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
175 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
176 .main-panel.is-expanded-left { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
177 margin-left: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
178 } |
|
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 .main-panel.is-expanded-right { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
181 margin-right: 0; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
182 } |
|
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 /* Common components */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
185 /* Reactions */ |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
186 .reactions-container { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
187 gap: var(--reaction-gap); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
188 margin-top: var(--reaction-margin-top); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
189 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
190 .reaction { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
191 padding: var(--reaction-padding); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
192 border-radius: 1rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
193 background-color: var(--reaction-background); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
194 font-size: var(--reaction-font-size); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
195 cursor: pointer; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
196 transition: all 0.2s ease; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
197 border: 1px solid var(--reaction-border); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
198 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
|
199 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
200 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
201 .reaction:hover { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
202 background-color: var(--reaction-hover-background); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
203 } |
|
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 .reaction .counter { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
206 margin-left: 0.25rem; |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
207 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
|
208 color: var(--color-text); |
|
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 |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
211 .reaction.own-reaction { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
212 background-color: var(--reaction-user-background); |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
213 border-color: var(--reaction-user-border); |
|
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:hover { |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
217 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
|
218 } |
|
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
219 |
| 406 | 220 /* Side Panels */ |
|
405
5016fb0ff62f
Blog redesign: work in progress redesign of the blog.
Goffi <goffi@goffi.org>
parents:
404
diff
changeset
|
221 |
| 406 | 222 .modal-panel { |
| 223 position: fixed; | |
| 224 top: 0; | |
| 225 left: 0; | |
| 226 width: 100%; | |
| 227 height: 100%; | |
| 228 z-index: 100; | |
| 229 display: flex; | |
| 230 pointer-events: none; | |
| 231 } | |
| 232 | |
| 233 .modal-panel-background { | |
| 234 position: absolute; | |
| 235 top: 0; | |
| 236 left: 0; | |
| 237 width: 100%; | |
| 238 height: 100%; | |
| 239 background-color: hsla(221,14%,4%,0.86); | |
| 240 opacity: 0; | |
| 241 transition: opacity 0.3s ease; | |
| 242 pointer-events: all; | |
| 243 } | |
| 244 | |
| 245 .modal-panel-container { | |
| 246 position: absolute; | |
| 247 background: white; | |
| 248 box-shadow: -2px 0 10px rgba(0,0,0,0.1); | |
| 249 overflow-y: auto; | |
| 250 transition: transform 0.3s ease-out; | |
| 251 will-change: transform; | |
| 252 pointer-events: all; | |
| 253 } | |
| 254 | |
| 255 /* Position classes */ | |
| 256 .modal-panel-container.is-right { | |
| 257 top: 0; | |
| 258 right: 0; | |
| 259 height: 100vh; | |
| 260 transform: translateX(100%); | |
| 261 border-left: 1px solid #eee; | |
| 262 } | |
| 263 | |
| 264 .modal-panel-container.is-left { | |
| 265 top: 0; | |
| 266 left: 0; | |
| 267 height: 100vh; | |
| 268 transform: translateX(-100%); | |
| 269 border-right: 1px solid #eee; | |
| 270 } | |
| 271 | |
| 272 .modal-panel-container.is-top { | |
| 273 top: 0; | |
| 274 left: 0; | |
| 275 right: 0; | |
| 276 transform: translateY(-100%); | |
| 277 border-bottom: 1px solid #eee; | |
| 278 } | |
| 279 | |
| 280 .modal-panel-container.is-bottom { | |
| 281 bottom: 0; | |
| 282 left: 0; | |
| 283 right: 0; | |
| 284 transform: translateY(100%); | |
| 285 border-top: 1px solid #eee; | |
| 286 } | |
| 287 | |
| 288 /* Active state */ | |
| 289 .modal-panel.is-active .modal-panel-background { | |
| 290 opacity: 1; | |
| 291 } | |
| 292 | |
| 293 .modal-panel.is-active .modal-panel-container { | |
| 294 transform: none !important; | |
| 295 } | |
| 296 | |
| 297 /* Closing animation */ | |
| 298 .modal-panel.closing .modal-panel-background { | |
| 299 opacity: 0; | |
| 300 } | |
| 301 | |
| 302 .modal-panel.closing .modal-panel-container.is-right { | |
| 303 transform: translateX(100%) !important; | |
| 304 } | |
| 305 | |
| 306 .modal-panel.closing .modal-panel-container.is-left { | |
| 307 transform: translateX(-100%) !important; | |
| 308 } | |
| 309 | |
| 310 .modal-panel.closing .modal-panel-container.is-top { | |
| 311 transform: translateY(-100%) !important; | |
| 312 } | |
| 313 | |
| 314 .modal-panel.closing .modal-panel-container.is-bottom { | |
| 315 transform: translateY(100%) !important; | |
| 316 } | |
| 317 | |
| 318 | |
| 319 /* Responsive */ | |
| 320 | |
| 321 | |
| 322 @media screen and (max-width: 768px) { | |
| 323 .modal-panel-container { | |
| 324 width: 90% !important; | |
| 325 } | |
| 326 } | |
| 327 | |
| 328 @media screen and (min-width: 769px) { | |
| 329 .modal-panel-container.is-right, | |
| 330 .modal-panel-container.is-left { | |
| 331 width: 50rem; | |
| 332 } | |
| 333 | |
| 334 .modal-panel-container.is-top, | |
| 335 .modal-panel-container.is-bottom { | |
| 336 height: 80vh; | |
| 337 } | |
| 338 } |