API tools faq
paste
Luxup

black native

Luxup
Mar 1st, 2023
176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.68 KB | None | 0 0
raw download clone embed print report diff
  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. }
Tags: black native
Add Comment
Please, Sign In to add comment
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!