PluginProbe
Code Snippets / 3.6.3
Code Snippets v3.6.3
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.6.3, at css/manage/_cloud.scss

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