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 */