Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/styles.css @ 248:a841837afe78
css (bulma): use a variable for grey light
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 16 Jul 2020 09:08:34 +0200 |
parents | bb5193cef770 |
children | a0e889d73bad |
rev | line source |
---|---|
230 | 1 :root { |
2 --photo-height: 280px; | |
3 --photo-height--poster: 500px; | |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
4 --col-primary: #82baff; |
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
5 --grey-light: hsl(0, 0%, 71%); |
230 | 6 } |
7 | |
235
f5f428a50c10
chat, ticket: use `pre-wrap` instead of `pre` for whitespaces
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
8 .has-whitespace-pre-wrap { |
f5f428a50c10
chat, ticket: use `pre-wrap` instead of `pre` for whitespaces
Goffi <goffi@goffi.org>
parents:
230
diff
changeset
|
9 white-space: pre-wrap; |
230 | 10 } |
11 | |
12 .is-avatar { | |
13 height: 64px; | |
14 width: 64px; | |
15 border-radius: 50%; | |
16 border: 1px solid #bbb; | |
17 background-color: #eee; | |
18 overflow: hidden; | |
19 } | |
20 | |
21 .is-photo-thumbnail { | |
22 max-height: var(--photo-height); | |
23 max-width: 100%; | |
24 } | |
25 | |
26 .is-photo-thumbnail-container { | |
27 height: var(--photo-height); | |
28 } | |
29 | |
30 .has-items-centered { | |
31 align-items: center; | |
32 justify-content: center; | |
33 } | |
34 | |
35 .is-poster { | |
36 height: var(--photo-height--poster) !important; | |
37 } | |
38 | |
39 .is-poster>.is-photo-thumbnail { | |
40 max-height: var(--photo-height--poster) !important; | |
41 } | |
42 | |
43 .has-items-vcentered { | |
44 align-items: center; | |
45 } | |
46 | |
47 | |
48 .x-is-hoverable:hover { | |
49 background-color: #eee !important; | |
50 } | |
51 | |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
52 .x-is-hoverable-primary:hover { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
53 background-color: var(--col-primary) !important; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
54 border-radius: 50%; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
55 box-shadow: 0px 0px 0 0.25rem var(--col-primary); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
56 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
57 |
230 | 58 .is-chat-message { |
59 margin: 0.5rem 0 0 !important; | |
60 padding: 0 !important; | |
61 border: 0 !important; | |
62 } | |
63 | |
64 a.is-wrapping { | |
65 line-height: 0; | |
66 } | |
67 | |
68 .has-no-background { | |
69 box-shadow: none !important; | |
70 background-color: initial !important; | |
71 } | |
72 | |
73 .pagination-disabled { | |
74 background-color: white; | |
75 border-color: #dbdbdb; | |
76 color: #b5b5b5; | |
77 cursor: auto; | |
78 } | |
79 | |
80 .pagination-disabled:hover { | |
81 background-color: white; | |
82 border-color: #dbdbdb; | |
83 color: #b5b5b5; | |
84 } | |
85 | |
86 .has-text-shortenable { | |
87 overflow: hidden; | |
88 text-overflow: ellipsis; | |
89 } | |
90 | |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
91 .has-border-dashed { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
92 border-style: dashed; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
93 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
94 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
95 .has-border-grey-light { |
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
96 border-color: var(--grey-light); |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
97 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
98 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
99 .has-justify-start { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
100 justify-content: start; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
101 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
102 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
103 /************** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
104 * selections * |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
105 **************/ |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
106 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
107 .selected_for_deletion { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
108 outline: solid red 0.25rem; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
109 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
110 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
111 /*************** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
112 * misc states * |
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
113 ***************/ |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
114 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
115 .state_deleted { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
116 opacity: 0; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
117 transform: scale(0); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
118 transition: opacity 0.5s ease-out, transform 0.5s ease-out; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
119 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
120 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
121 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
122 /*********** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
123 * dialogs * |
248
a841837afe78
css (bulma): use a variable for grey light
Goffi <goffi@goffi.org>
parents:
242
diff
changeset
|
124 ***********/ |
242
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
125 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
126 .modal-content { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
127 transform: scaleY(0); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
128 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
129 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
130 div.state_appended .modal-content { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
131 transform: scaleY(1); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
132 transition: transform 0.15s ease-in; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
133 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
134 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
135 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
136 /*************** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
137 * progression * |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
138 ***************/ |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
139 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
140 .progress_started img { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
141 filter: grayscale(100%); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
142 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
143 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
144 .progress_finished img { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
145 filter: grayscale(0%); |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
146 transition: filter 1.5s ease-out; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
147 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
148 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
149 .progress_finished progress { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
150 height: 0; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
151 opacity: 0; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
152 transition: all 1.5s ease-out; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
153 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
154 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
155 .progress { |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
156 transition: width 5s ease; |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
157 } |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
158 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
159 |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
160 /********** |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
161 * drawer * |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
162 **********/ |
bb5193cef770
bulma (css): some styles to handle dynamic content + misc
Goffi <goffi@goffi.org>
parents:
235
diff
changeset
|
163 |
230 | 164 |
165 .panel-drawer { | |
166 /* A panel which is hidden by default but can be | |
167 opened when it's clicked */ | |
168 max-height: 0; | |
169 opacity: 0; | |
170 overflow: hidden; | |
171 transition: max-height 0.5s, opacity 0.5s; | |
172 } | |
173 | |
174 .panel-drawer.state_clicked { | |
175 opacity: 1; | |
176 } | |
177 | |
178 /******** | |
179 * code * | |
180 ********/ | |
181 | |
182 .highlight { | |
183 overflow: auto; | |
184 } | |
185 | |
186 /********** | |
187 * blocks * | |
188 **********/ | |
189 | |
190 .block_separator { | |
191 font-size: 1.4em; | |
192 display: flex; | |
193 margin: 1rem 0; | |
194 } | |
195 | |
196 .block_separator__label { | |
197 display: inline-block; | |
198 margin: 0 0.2em; | |
199 } | |
200 | |
201 .block_separator__line { | |
202 height: 1px; | |
203 background: #ccc; | |
204 flex: 1; | |
205 margin-top: 0.7em; | |
206 } | |
207 | |
208 /******** | |
209 * tabs * | |
210 *******/ | |
211 | |
212 #tab_guests { | |
213 overflow: auto; | |
214 } | |
215 | |
216 .tab__page { | |
217 display: None; | |
218 } | |
219 | |
220 .tab__page.state_clicked { | |
221 display: block; | |
222 } |