PluginProbe
Code Snippets / 3.8.1
Code Snippets v3.8.1
3.10.2 3.10.1 3.10.0 3.10.0-beta.2 3.10.0-beta.1 4.0.0-beta.1 3.9.6 trunk 2.10.0 2.10.1 2.12.0 2.12.1 2.13.0 2.13.1 2.13.2 2.13.3 2.14.0 2.14.1 2.14.2 2.14.3 2.14.4 2.14.5 2.14.6 3.0.0 3.0.1 All 64 releases
code-snippets / css / manage / _cloud.scss

_cloud.scss in Code Snippets 3.8.1, at css/manage/_cloud.scss

343 lines 5.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @use '../common/theme';
2 @use '../common/tooltips';
3
4 .cloud-legend-tooltip {
5 h3 {
6 font-size: 16px;
7 color: #fff;
8 text-align: center;
9 }
10
11 td {
12 vertical-align: top;
13 }
14 }
15
16 .cloud-search-info {
17 text-align: justify;
18
19 small {
20 color: #646970;
21 float: inline-end;
22 }
23 }
24
25 .thickbox-code-viewer {
26 min-block-size: 250px;
27 background-color: hsl(0deg 0% 96.5%);
28 padding: 20px;
29 border-radius: 10px;
30 }
31
32 #snippet-code-thickbox {
33 display: block;
34 inline-size: 100%;
35 }
36
37 .no-results {
38 font-size: 15px;
39 }
40
41 .dashicons.cloud-synced {
42 color: theme.$cloud;
43 }
44
45 .dashicons.cloud-downloaded {
46 color: #e91e63;
47 }
48
49 .dashicons.cloud-not-downloaded {
50 color: theme.$outline;
51 }
52
53 .dashicons.cloud-update {
54 color: theme.$cloud-update;
55 }
56
57 .cloud_update a {
58 color: theme.$cloud-update !important;
59 text-decoration: underline;
60 }
61
62 .updated.column-updated span {
63 text-decoration: dotted underline;
64 }
65
66 td.column-name {
67 .cloud-icon {
68 margin-inline-end: 3px;
69 }
70 }
71
72 td.column-download {
73 display: flex;
74 gap: 0.5em;
75 flex-flow: column;
76 text-align: center;
77 }
78
79 .cloud-snippet-download {
80 color: theme.$accent !important;
81 }
82
83 .cloud-snippet-downloaded, .cloud-snippet-preview-style {
84 color: #616161 !important;
85 }
86
87 .cloud-snippet-update {
88 color: theme.$cloud-update !important;
89 }
90
91 #cloud-search-form {
92 margin-block: 30px;
93 text-align: center;
94 }
95
96 .input-group {
97 position: relative;
98 display: flex;
99 flex-wrap: wrap;
100 align-items: stretch;
101 max-inline-size: 900px;
102 margin-block: 0;
103 margin-inline: auto;
104 }
105
106 #cloud_search {
107 display: block;
108 padding-block: 0.375rem;
109 padding-inline: 0.75rem;
110 font-size: 1rem;
111 color: #495057;
112 background-clip: padding-box;
113 border-radius: 0;
114 transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
115 position: relative;
116 flex: 1 1 auto;
117 inline-size: 1%;
118 margin-block-end: 0;
119
120 &:focus {
121 outline: 0;
122 border: 1px solid #8c8f94;
123 box-shadow: none;
124 }
125 }
126
127 #cloud-select-prepend {
128 margin-inline-end: -3px;
129 border-start-end-radius: 0;
130 border-end-end-radius: 0;
131 position: relative;
132 z-index: 2;
133 color: theme.$accent;
134 border-color: theme.$accent;
135 background-color: #f6f7f7;
136
137 &:hover {
138 background-color: #f0f0f1;
139 border-color: #0a4b78;
140 color: #0a4b78;
141 }
142 }
143
144 #cloud-search-submit {
145 padding-block: 0;
146 padding-inline: 15px;
147 margin-inline-start: -3px;
148 display: flex;
149 justify-content: center;
150 align-items: center;
151 }
152
153 .cloud-search {
154 margin-inline-start: 5px;
155 }
156
157 .bundle-group {
158 margin-block-start: 10px;
159 justify-content: space-between;
160 display: flex;
161 gap: 5px;
162 flex-wrap: nowrap;
163 }
164
165 #cloud-bundles {
166 color: #495057;
167 display: flex;
168 flex: 1 1 auto;
169 font-size: 1rem;
170 padding-block: 0.375rem;
171 padding-inline: 0.75rem;
172 position: relative;
173 inline-size: 50%;
174 }
175
176 #cloud-bundle-show {
177 inline-size: 10%;
178 }
179
180 #cloud-bundle-run {
181 inline-size: 15%;
182 }
183
184 #bundle_share_name {
185 color: #495057;
186 font-size: 1rem;
187 inline-size: 25%;
188 }
189
190 .heading-box {
191 max-inline-size: 900px;
192 margin: auto;
193 padding-block-end: 1rem;
194 }
195
196 .cloud-search-heading {
197 font-size: 23px;
198 font-weight: 400;
199 padding-block: 9px 4px;
200 padding-inline: 0;
201 line-height: 1.3;
202 text-align: center;
203 margin-block-end: 0;
204 }
205
206 .cloud-badge.ai-icon {
207 font-size: 12px;
208 padding: 3px;
209 margin-inline-start: 5px;
210 color: #b22222;
211 }
212
213 .cloud-search-card-bottom {
214 min-block-size: 40px;
215 }
216
217 #cloud-search-results .cloud-snippets #the-list {
218 display: flex;
219 flex-wrap: wrap;
220 justify-content: center;
221 }
222
223 .cloud-snippets .plugin-card {
224 display: flex;
225 flex-direction: column;
226 justify-content: space-between;
227 }
228
229 .cloud-connect-wrap {
230 display: flex;
231 justify-content: space-between;
232 align-items: center;
233 max-block-size: 35px;
234 margin-block: 0;
235 margin-inline: 3px;
236 float: inline-end;
237 gap: 5px;
238 }
239
240
241 .cloud-table > tbody > tr {
242 block-size: 80px;
243 box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
244 }
245
246 .cloud-table > tbody > tr > td {
247 max-inline-size: 250px;
248 }
249
250 .cloud-table tbody .active-snippet .column-name {
251 font-weight: 400;
252 max-inline-size: 400px;
253 white-space: normal !important;
254 }
255
256 .cloud-table td .no-results {
257 margin-block-start: 15px;
258 color: #e32121;
259 text-align: center;
260 }
261
262 .cloud-status-dot {
263 block-size: 10px;
264 inline-size: 10px;
265 background-color: #ce0000;
266 border-radius: 50%;
267
268
269 .cloud-connect-active & {
270 background-color: #25a349;
271 }
272 }
273
274 .cloud-connect-text {
275 color: #ce0000;
276
277 .cloud-connect-active & {
278 color: #2e7d32;
279 }
280 }
281
282 .thumbs-up {
283 inline-size: 1.25rem; /* 20px */
284 block-size: 1.25rem; /* 20px */
285 transform-origin: bottom left;
286
287 &:hover {
288 stroke: #059669;
289 fill: #6ee7b7;
290 }
291 }
292
293 .voted-info {
294 display: inline-flex;
295 gap: 3px;
296 align-items: center;
297 margin-block-end: 6px !important;
298
299 &:hover {
300 .thumbs-up {
301 stroke: #059669;
302 fill: #6ee7b7;
303 animation: thumb 1s ease-in-out infinite;
304 }
305 }
306 }
307
308 .plugin-card-bottom {
309 overflow: visible !important;
310 }
311
312 .beta-test-notice {
313 margin-block-start: 20px;
314 }
315
316 .highlight-yellow {
317 background: #fefdba;
318 padding: 3px;
319 border-radius: 3px;
320 }
321
322 @keyframes thumb {
323 0% {
324 transform: rotate(0)
325 }
326
327 33% {
328 transform: rotate(7deg)
329 }
330
331 66% {
332 transform: rotate(-15deg)
333 }
334
335 90% {
336 transform: rotate(5deg)
337 }
338
339 100% {
340 transform: rotate(0)
341 }
342 }
343