Mercurial > libervia-templates
comparison sat_templates/templates/bulma/static/styles.css @ 242:bb5193cef770
bulma (css): some styles to handle dynamic content + misc
author | Goffi <goffi@goffi.org> |
---|---|
date | Fri, 19 Jun 2020 17:57:13 +0200 |
parents | f5f428a50c10 |
children | a841837afe78 |
comparison
equal
deleted
inserted
replaced
241:11874a332add | 242:bb5193cef770 |
---|---|
1 :root { | 1 :root { |
2 --photo-height: 280px; | 2 --photo-height: 280px; |
3 --photo-height--poster: 500px; | 3 --photo-height--poster: 500px; |
4 --col-primary: #82baff; | |
4 } | 5 } |
5 | 6 |
6 .has-whitespace-pre-wrap { | 7 .has-whitespace-pre-wrap { |
7 white-space: pre-wrap; | 8 white-space: pre-wrap; |
8 } | 9 } |
45 | 46 |
46 .x-is-hoverable:hover { | 47 .x-is-hoverable:hover { |
47 background-color: #eee !important; | 48 background-color: #eee !important; |
48 } | 49 } |
49 | 50 |
51 .x-is-hoverable-primary:hover { | |
52 background-color: var(--col-primary) !important; | |
53 border-radius: 50%; | |
54 box-shadow: 0px 0px 0 0.25rem var(--col-primary); | |
55 } | |
56 | |
50 .is-chat-message { | 57 .is-chat-message { |
51 margin: 0.5rem 0 0 !important; | 58 margin: 0.5rem 0 0 !important; |
52 padding: 0 !important; | 59 padding: 0 !important; |
53 border: 0 !important; | 60 border: 0 !important; |
54 } | 61 } |
55 | 62 |
56 a.is-wrapping { | 63 a.is-wrapping { |
57 line-height: 0; | 64 line-height: 0; |
58 } | |
59 | |
60 .has-margin-top-1 { | |
61 margin-top: 1rem; | |
62 } | |
63 | |
64 .has-vmargin-1 { | |
65 margin: 0.5rem 0; | |
66 } | |
67 | |
68 .has-padding-1 { | |
69 padding: 0.25rem; | |
70 } | |
71 | |
72 .has-vpadding-1 { | |
73 padding: 0 0.25rem; | |
74 } | |
75 | |
76 .has-vpadding-6 { | |
77 padding: 0 1.5rem; | |
78 } | 65 } |
79 | 66 |
80 .has-no-background { | 67 .has-no-background { |
81 box-shadow: none !important; | 68 box-shadow: none !important; |
82 background-color: initial !important; | 69 background-color: initial !important; |
97 | 84 |
98 .has-text-shortenable { | 85 .has-text-shortenable { |
99 overflow: hidden; | 86 overflow: hidden; |
100 text-overflow: ellipsis; | 87 text-overflow: ellipsis; |
101 } | 88 } |
89 | |
90 .has-border-dashed { | |
91 border-style: dashed; | |
92 } | |
93 | |
94 .has-border-grey-light { | |
95 border-color: hsl(0, 0%, 71%); | |
96 } | |
97 | |
98 .has-justify-start { | |
99 justify-content: start; | |
100 } | |
101 | |
102 /************** | |
103 * selections * | |
104 **************/ | |
105 | |
106 .selected_for_deletion { | |
107 outline: solid red 0.25rem; | |
108 } | |
109 | |
110 /*************** | |
111 * misc states * | |
112 **************/ | |
113 | |
114 .state_deleted { | |
115 opacity: 0; | |
116 transform: scale(0); | |
117 transition: opacity 0.5s ease-out, transform 0.5s ease-out; | |
118 } | |
119 | |
120 | |
121 /*********** | |
122 * dialogs * | |
123 **********/ | |
124 | |
125 .modal-content { | |
126 transform: scaleY(0); | |
127 } | |
128 | |
129 div.state_appended .modal-content { | |
130 transform: scaleY(1); | |
131 transition: transform 0.15s ease-in; | |
132 } | |
133 | |
134 | |
135 /*************** | |
136 * progression * | |
137 ***************/ | |
138 | |
139 .progress_started img { | |
140 filter: grayscale(100%); | |
141 } | |
142 | |
143 .progress_finished img { | |
144 filter: grayscale(0%); | |
145 transition: filter 1.5s ease-out; | |
146 } | |
147 | |
148 .progress_finished progress { | |
149 height: 0; | |
150 opacity: 0; | |
151 transition: all 1.5s ease-out; | |
152 } | |
153 | |
154 .progress { | |
155 transition: width 5s ease; | |
156 } | |
157 | |
158 | |
159 /********** | |
160 * drawer * | |
161 **********/ | |
102 | 162 |
103 | 163 |
104 .panel-drawer { | 164 .panel-drawer { |
105 /* A panel which is hidden by default but can be | 165 /* A panel which is hidden by default but can be |
106 opened when it's clicked */ | 166 opened when it's clicked */ |