API tools faq
paste
View difference between Paste ID: LFV3w1KQ and CSRjaHJi
SHOW: | | - or go back to the newest paste.
1
#################################HTML#################################
2
<div class="wrapper" style="z-index: 10001 !important;">
3
  <input id="close-banner" class="input-hidden" type="checkbox">
4
    <div class="inner">
5
      <label for="close-banner" class="wrapper-close"></label>
6
      <ya-units-grid cols="1" rows="1">
7
        <div class="container">
8
          <div class="image">
9
            <ya-unit-image ratio="1" variant="contain" />
10
          </div>
11
          <div class="info">
12
            <div class="heading_wrap">
13
              <ya-unit-if condition="!unit.isRmp">
14
                <div class="heading">
15
                  <ya-unit-logo class="logo"
16
                              src="https://avatars.mds.yandex.net/get-bunker/49769/ced013bc0c7b12a2ead15fdc9f4deeffde7128d5/orig" />
17
                  <span class="domain">
18
                    <ya-unit-domain />
19
                  </span>
20
                </div>
21
              </ya-unit-if>
22
              <ya-unit-if condition="unit.isRmp">
23
                <div class="app">
24
                  <ya-unit-app-icon class="logo" />
25
                  <span class="domain">
26
                    <ya-unit-app-name />
27
                  </span>
28
                </div>
29
              </ya-unit-if>
30
            </div>
31
            <div class="bottom">
32
              <div class="text_col">
33
                <div class="title">
34
                  <ya-unit-if condition="unit.title < 30 | unit.title = 30">
35
                    <span class="title-short">
36
                      <ya-unit-title />
37
                    </span>
38
                  </ya-unit-if>
39
                  <ya-unit-if condition="unit.title > 30 & unit.title < 40">
40
                    <span class="title-mid">
41
                      <ya-unit-title />
42
                    </span>
43
                  </ya-unit-if>
44
                  <ya-unit-if condition="unit.title > 40 | unit.title = 40">
45
                    <span class="title-long">
46
                      <ya-unit-title />
47
                    </span>
48
                  </ya-unit-if>
49
                </div>
50
                <div class="desc">
51
                  <ya-unit-if condition="unit.desc > 40 | unit.desc = 40">
52
                    <ya-clamp class="desc-long" lines="2">
53
                      <ya-unit-desc />
54
                    </ya-clamp>
55
                  </ya-unit-if>
56
                  <ya-unit-if condition="unit.desc < 40">
57
                    <ya-clamp class="desc-short" lines="2">
58
                      <ya-unit-desc />
59
                    </ya-clamp>
60
                  </ya-unit-if>
61
                </div>
62
              </div>
63
              <ya-unit-if condition="!unit.isRmp">
64
                <div class="sitelinks">
65
                  <ya-unit-sitelinks limit="1" />
66
                </div>
67
              </ya-unit-if>
68
              <ya-unit-if condition="unit.isRmp | !unit.sitelinks">
69
                <div class="prices">
70
                  <ya-unit-price />
71
                  <ya-unit-discount />
72
                  <ya-unit-old-price />
73
                </div>
74
              </ya-unit-if>
75
            </div>
76
          </div>
77
        </div>
78
        <ya-unit-category class="ya-unit-category_default" />
79
        <ya-unit-kebab />
80
      </ya-units-grid>
81
    </div>
82
  </div>
83
#################################CSS#################################
84
.inner {
85
    position: absolute;
86
    left: 0;
87
    bottom: 0;
88
    height: 150px;
89
    width: 100%;
90
 }
91
  .wrapper {
92
    position: fixed;
93
    left: 0px;
94
    bottom: 0px;
95
    right: 0px;
96
    height: 0;
97
    z-index: 999;
98
 }
99
  .container {
100
    position: relative;
101
    display: flex;
102
    flex-direction: row;
103
    flex-wrap: nowrap;
104
    width: 100%;
105
    height: 100%;
106
 }
107
  .image {
108
    max-height: 150px;
109
    position: relative;
110
    flex: 0 1 40%;
111
    background: #fff;
112
 }
113
  .info {
114
    flex: 0 1 60%;
115
    display: flex;
116
    flex-flow: column nowrap;
117
    justify-content: flex-start;
118
    height: 150px;
119
    font-family: "Roboto",sans-serif !important;
120
    background-color: #fff;
121
    background-image: linear-gradient(to right, #f5f5f5 0%, #ffffff 100%);
122
    padding: 4px 10px 20px 6px;
123
    box-sizing: border-box;
124
 }
125
  .bottom {
126
    display: flex;
127
    flex-flow: column nowrap;
128
    justify-content: space-between;
129
    height: 100%;
130
 }
131
  .video-source-component, .video-source-container {
132
    display: block;
133
    position: absolute;
134
    top: 0;
135
    left: 0;
136
    bottom: 0;
137
    right: 0;
138
    height: 150px;
139
    background-color: #000;
140
 }
141
  .video-source-component:after {
142
    content: '';
143
    position: absolute;
144
    right: 0;
145
    z-index: 10000;
146
    width: 10%;
147
    height: 100%;
148
    background-image: linear-gradient(to left, #f5f5f5 0, rgba(5, 5, 5, 0) 10px, rgba(238, 238, 238, 0))
149
 }
150
  .image:after {
151
    content: '';
152
    position: absolute;
153
    top: 0;
154
    right: 0;
155
    min-width: 80px;
156
    max-width: 150px;
157
    height: 100%;
158
    width: 100%;
159
    background-image: linear-gradient(to left, #f5f5f5 0, rgba(5, 5, 5, 0) 10px, rgba(238, 238, 238, 0))
160
 }
161
  .title {
162
    position: relative;
163
    color: #3d3f43;
164
    font-weight: bold;
165
    margin-bottom: 8px;
166
 }
167
  .title-short {
168
    font-size: 18px;
169
 }
170
  .title-mid {
171
    font-size: 15px;
172
 }
173
  .title-long {
174
    font-size: 13px;
175
 }
176
  .desc {
177
    font-weight: 400;
178
    color: #3d3f43;
179
 }
180
  .desc-short {
181
    font-size: 12px;
182
 }
183
  .desc-long {
184
    font-size: 12px;
185
 }
186
  .app {
187
    display: flex;
188
    align-items: center;
189
 }
190
  .ya-unit-sitelink {
191
    display: inline-block;
192
    text-decoration: underline;
193
 }
194
  .sitelinks {
195
    font-size: 11px;
196
    color: #3d3f43;
197
 }
198
  .ya-unit-sitelink:hover, .ya-unit-sitelink:active {
199
    color: red;
200
 }
201
  .prices {
202
    position: relative;
203
    display: flex;
204
    font-size: 13px;
205
 }
206
  .prices span:not(:last-child) {
207
    margin-right: 6px;
208
 }
209
  .ya-unit-discount {
210
    margin-left: 10px;
211
 }
212
  .ya-unit-price {
213
    font-weight: 600;
214
    color: #3d3f43;
215
 }
216
  .heading_wrap {
217
    margin-bottom: 8px;
218
 }
219
  .heading, .app {
220
    background: #fff;
221
    display: inline-flex;
222
    align-items: center;
223
    padding: 2px 4px;
224
    margin-right: 4px;
225
    border-radius: 4px;
226
    box-sizing: border-box;
227
 }
228
  .domain, .logo {
229
    display: inline-block;
230
 }
231
  .logo {
232
    width: 12px;
233
    height: 12px;
234
    margin-right: 4px;
235
    border-radius: 4px;
236
    overflow: hidden;
237
 }
238
  .domain {
239
    overflow: hidden;
240
    text-overflow: ellipsis;
241
    font-size: 10px;
242
    line-height: 100%;
243
    font-weight: 500;
244
    color: #3d3f43;
245
    margin-left: 1px;
246
 }
247
  .input-hidden {
248
    height: 0;
249
    width: 0;
250
    position: absolute;
251
    opacity: 0;
252
 }
253
  .input-hidden:checked ~ .inner {
254
    display: none;
255
 }
256
  .wrapper-close {
257
    position: absolute;
258
    top: -28px;
259
    right: 0;
260
    width: 32px;
261
    height: 28px;
262
    background: url("data:image/svg+xml,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l8 8M1 9l8-8' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
263
    background-repeat: no-repeat;
264
    background-position: center;
265
    z-index: 3;
266
    border-radius: 6px 6px 0 0;
267
    background-color: rgba(0,0,0,.2);
268
    cursor: pointer;
269
 }
270
 /*.ya-unit-kebab_button {
271
     right: 4px;
272
     bottom: auto;
273
     left: auto;
274
     top: 7px;
275
     background: #808080!important;
276
 }*/
277
 .ya-unit-category_default {
278
     bottom: 7px;
279
     left: 4px!important;
280
 }
281
282
 /*.ya-unit-kebab_icon svg circle {
283
     fill: #292929!important;
284
 }*/
285
286
 .ya-unit-kebab_bg {
287
     background:#dfdfdf!important;
288
     opacity: .1!important;
289
 }
290
  @media(max-width:380px) {
291
    .ya-unit-image {
292
      min-height: 150px !important;
293
   }
294
    .unit-image {
295
      height: 100%;
296
   }
297
    .unit-image > div {
298
      padding-bottom: 117%;
299
   }
300
    .title {
301
      margin-bottom: 4px;
302
   }
303
    .title-short {
304
      font-size: 15px;
305
   }
306
    .title-mid {
307
      font-size: 14px;
308
   }
309
    .title-long {
310
      font-size: 13px;
311
   }
312
 }
313
  @media(min-width:768px) {
314
    .image {
315
      flex: 0 1 30%;
316
   }
317
    .img-source-component {
318
      margin-top: -20%;
319
   }
320
    .info {
321
      flex: 0 1 70%;
322
   }
323
    .title {
324
      margin-bottom: 2px;
325
   }
326
    .title-short {
327
      font-size: 20px;
328
   }
329
    .title-mid {
330
      font-size: 18px;
331
   }
332
    .title-long {
333
      font-size: 16px;
334
   }
335
    .desc-short {
336
      font-size: 15px;
337
   }
338
    .desc-long {
339
      font-size: 14px;
340
   }
341
    .sitelinks {
342
      font-size: 14px;
343
   }
344
    .heading_wrap {
345
      margin-bottom: 3px;
346
   }
347
    .logo {
348
      width: 16px;
349
      height: 16px;
350
   }
351
    .domain {
352
      font-size: 13px;
353
      line-height: 100%;
354
   }
355
    .prices {
356
      font-size: 15px;
357
   }
358
 }
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!