| @@ -1,70 +1,15 @@ | ||
| 1 | -.learn-press-themes { | |
| 2 | - max-width: 100%; | |
| 3 | - color: #6b7280; | |
| 1 | +.lp-themes-page .lp-be-page-title { | |
| 2 | + margin: 0 0 4px; | |
| 4 | 3 | } |
| 5 | -.learn-press-themes a:focus-visible, | |
| 6 | -.learn-press-themes button:focus-visible { | |
| 7 | - outline: none; | |
| 8 | - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| 4 | +.lp-themes-page .lp-be-page-subtitle { | |
| 5 | + margin: 0 0 40px; | |
| 9 | 6 | } |
| 10 | 7 | |
| 11 | -.lp-themes-toolbar { | |
| 12 | - display: flex; | |
| 13 | - align-items: center; | |
| 14 | - justify-content: space-between; | |
| 15 | - gap: 16px; | |
| 16 | - margin-bottom: 30px; | |
| 17 | - padding: 16px; | |
| 18 | - border: 1px solid #e5e7eb; | |
| 19 | - border-radius: 12px; | |
| 20 | - background: #ffffff; | |
| 21 | - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); | |
| 22 | -} | |
| 23 | - | |
| 24 | -.lp-themes-search { | |
| 25 | - position: relative; | |
| 26 | - flex-shrink: 0; | |
| 27 | - width: 280px; | |
| 8 | +.learn-press-themes { | |
| 28 | 9 | max-width: 100%; |
| 10 | + color: #626262; | |
| 29 | 11 | } |
| 30 | -.lp-themes-search__icon { | |
| 31 | - position: absolute; | |
| 32 | - display: inline-flex; | |
| 33 | - align-items: center; | |
| 34 | - justify-content: center; | |
| 35 | - width: 20px; | |
| 36 | - height: 20px; | |
| 37 | - inset-inline-start: 12px; | |
| 38 | - top: 50%; | |
| 39 | - transform: translateY(-50%); | |
| 40 | - color: #9ca3af; | |
| 41 | - font-size: 16px; | |
| 42 | - pointer-events: none; | |
| 43 | -} | |
| 44 | - | |
| 45 | -.learn-press-themes input.lp-themes-search__input { | |
| 46 | - box-sizing: border-box; | |
| 47 | - width: 100%; | |
| 48 | - min-height: 36px; | |
| 49 | - margin: 0; | |
| 50 | - padding: 4px 12px; | |
| 51 | - padding-inline-start: 40px; | |
| 52 | - border: 1px solid #d1d5db; | |
| 53 | - border-radius: 6px; | |
| 54 | - color: #1a1a1a; | |
| 55 | - background: #ffffff; | |
| 56 | - font-size: 14px; | |
| 57 | -} | |
| 58 | -.learn-press-themes input.lp-themes-search__input::placeholder { | |
| 59 | - color: #9ca3af; | |
| 60 | -} | |
| 61 | -.learn-press-themes input.lp-themes-search__input:focus { | |
| 62 | - border-color: #7067ED; | |
| 63 | - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| 64 | - outline: none; | |
| 65 | -} | |
| 66 | - | |
| 67 | 12 | .learn-press-themes [hidden] { |
| 68 | 13 | display: none !important; |
| 69 | 14 | } |
| 70 | 15 | |
| @@ -70,71 +15,55 @@ | ||
| 70 | 15 | |
| 71 | 16 | .lp-themes-filter { |
| 72 | 17 | display: flex; |
| 73 | 18 | align-items: center; |
| 74 | - flex-wrap: wrap; | |
| 75 | - gap: 8px; | |
| 19 | + flex-wrap: nowrap; | |
| 20 | + gap: 12px; | |
| 21 | + margin: 0; | |
| 22 | + padding: 0; | |
| 76 | 23 | } |
| 77 | -.lp-themes-filter__count { | |
| 78 | - margin-inline-start: 4px; | |
| 24 | +.lp-themes-filter__toggle { | |
| 25 | + display: none; | |
| 79 | 26 | } |
| 80 | -.lp-themes-filter__item { | |
| 81 | - display: inline-flex; | |
| 27 | +.lp-themes-filter__menu { | |
| 28 | + display: flex; | |
| 82 | 29 | align-items: center; |
| 83 | - justify-content: center; | |
| 84 | - min-height: 40px; | |
| 85 | - padding: 8px 16px; | |
| 86 | - border: 1px solid #d1d5db; | |
| 87 | - border-radius: 6px; | |
| 88 | - color: #374151; | |
| 89 | - background: #ffffff; | |
| 90 | - font-size: 14px; | |
| 91 | - font-weight: 500; | |
| 92 | - line-height: 150%; | |
| 93 | - cursor: pointer; | |
| 94 | - transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; | |
| 30 | + gap: 12px; | |
| 31 | + min-width: 0; | |
| 95 | 32 | } |
| 96 | -.lp-themes-filter__item:hover, .lp-themes-filter__item:focus { | |
| 97 | - border-color: #7067ED; | |
| 98 | - color: #7067ED; | |
| 99 | - background: #F7F7F7; | |
| 33 | +.lp-themes-filter__count { | |
| 34 | + margin-inline-start: 4px; | |
| 100 | 35 | } |
| 101 | -.lp-themes-filter__item.active { | |
| 102 | - border-color: #7067ED; | |
| 103 | - color: #ffffff; | |
| 104 | - background: #7067ED; | |
| 105 | -} | |
| 106 | 36 | |
| 107 | 37 | .lp-themes-grid { |
| 108 | 38 | display: grid; |
| 109 | 39 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
| 110 | 40 | gap: 24px; |
| 111 | - margin-bottom: 30px; | |
| 41 | + margin-bottom: 32px; | |
| 112 | 42 | } |
| 113 | 43 | |
| 114 | 44 | .lp-theme-card { |
| 115 | - overflow: hidden; | |
| 116 | 45 | position: relative; |
| 117 | 46 | display: flex; |
| 118 | 47 | flex-direction: column; |
| 119 | - min-width: 0; | |
| 120 | - border: 1px solid #e5e7eb; | |
| 121 | - border-radius: 12px; | |
| 48 | + box-sizing: border-box; | |
| 49 | + border: 1px solid #e1e1e1; | |
| 50 | + border-radius: 10px; | |
| 122 | 51 | background: #ffffff; |
| 123 | - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); | |
| 52 | + box-shadow: 0 0 10px rgba(0, 0, 0, 0.07); | |
| 53 | + overflow: hidden; | |
| 124 | 54 | transition: border-color 0.2s ease, box-shadow 0.2s ease; |
| 125 | 55 | } |
| 126 | 56 | .lp-theme-card:hover, .lp-theme-card:focus-within { |
| 127 | - border-color: #7067ED; | |
| 128 | - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); | |
| 57 | + border-color: #7067ed; | |
| 58 | + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); | |
| 129 | 59 | } |
| 130 | 60 | .lp-theme-card__thumbnail { |
| 61 | + position: relative; | |
| 131 | 62 | overflow: hidden; |
| 132 | - position: relative; | |
| 133 | - width: 100%; | |
| 134 | - box-sizing: border-box; | |
| 63 | + border-top-left-radius: inherit; | |
| 64 | + border-top-right-radius: inherit; | |
| 135 | 65 | padding: 20px; |
| 136 | - flex-shrink: 0; | |
| 137 | 66 | background: #ffffff; |
| 138 | 67 | } |
| 139 | 68 | .lp-theme-card__thumbnail img { |
| 140 | 69 | display: block; |
| @@ -139,8 +68,9 @@ | ||
| 139 | 68 | .lp-theme-card__thumbnail img { |
| 140 | 69 | display: block; |
| 141 | 70 | width: 100%; |
| 142 | 71 | height: auto; |
| 72 | + object-fit: cover; | |
| 143 | 73 | border-radius: 8px; |
| 144 | 74 | } |
| 145 | 75 | .lp-theme-card__badge { |
| 146 | 76 | position: absolute; |
| @@ -148,13 +78,13 @@ | ||
| 148 | 78 | top: 24px; |
| 149 | 79 | right: 24px; |
| 150 | 80 | display: inline-flex; |
| 151 | 81 | align-items: center; |
| 152 | - padding: 8px 12px; | |
| 153 | - border-radius: 20px; | |
| 82 | + padding: 4px 8px; | |
| 83 | + border-radius: 6px; | |
| 154 | 84 | color: #ffffff; |
| 155 | 85 | background: linear-gradient(135deg, #ff0000 0%, #af00b8 100%); |
| 156 | - font-size: 11px; | |
| 86 | + font-size: 12px; | |
| 157 | 87 | font-weight: 600; |
| 158 | 88 | line-height: 1; |
| 159 | 89 | text-transform: uppercase; |
| 160 | 90 | } |
| @@ -169,26 +99,33 @@ | ||
| 169 | 99 | display: -webkit-box; |
| 170 | 100 | overflow: hidden; |
| 171 | 101 | min-height: 2.8em; |
| 172 | 102 | margin: 0 0 8px; |
| 173 | - color: #1e1e1e; | |
| 174 | - font-size: 18px; | |
| 103 | + color: #111111; | |
| 104 | + font-size: 16px; | |
| 175 | 105 | font-weight: 600; |
| 176 | 106 | line-height: 1.4; |
| 177 | 107 | -webkit-box-orient: vertical; |
| 178 | 108 | -webkit-line-clamp: 2; |
| 179 | 109 | } |
| 110 | +.lp-theme-card__title a { | |
| 111 | + color: inherit; | |
| 112 | + text-decoration: none; | |
| 113 | +} | |
| 114 | +.lp-theme-card__title a:hover { | |
| 115 | + color: #7067ed; | |
| 116 | +} | |
| 180 | 117 | .lp-theme-card__description { |
| 181 | 118 | display: -webkit-box; |
| 182 | 119 | overflow: hidden; |
| 183 | 120 | min-height: 35px; |
| 184 | 121 | margin: 0 0 16px; |
| 185 | - color: #6b7280; | |
| 122 | + color: #626262; | |
| 186 | 123 | font-size: 14px; |
| 187 | 124 | font-weight: 400; |
| 188 | 125 | line-height: 1.45; |
| 189 | 126 | -webkit-box-orient: vertical; |
| 190 | - -webkit-line-clamp: 2; | |
| 127 | + -webkit-line-clamp: 3; | |
| 191 | 128 | } |
| 192 | 129 | .lp-theme-card__footer { |
| 193 | 130 | display: flex; |
| 194 | 131 | margin: 0 0 16px; |
| @@ -199,27 +136,27 @@ | ||
| 199 | 136 | align-items: center; |
| 200 | 137 | gap: 8px; |
| 201 | 138 | } |
| 202 | 139 | .lp-theme-card__price strong { |
| 203 | - color: #E31A1B; | |
| 140 | + color: #e31a1a; | |
| 204 | 141 | font-size: 18px; |
| 205 | 142 | font-weight: 600; |
| 206 | 143 | line-height: 1.2; |
| 207 | 144 | } |
| 208 | 145 | .lp-theme-card__price del { |
| 209 | - color: #9ca3af; | |
| 146 | + color: #898989; | |
| 210 | 147 | font-size: 14px; |
| 211 | 148 | font-weight: 400; |
| 212 | 149 | line-height: 1; |
| 213 | 150 | } |
| 214 | 151 | .lp-theme-card[data-category=free] .lp-theme-card__price strong { |
| 215 | - color: #28A746; | |
| 152 | + color: #28a746; | |
| 216 | 153 | } |
| 217 | 154 | .lp-theme-card__meta { |
| 218 | 155 | display: flex; |
| 219 | 156 | align-items: center; |
| 220 | 157 | gap: 12px; |
| 221 | - color: #1e1e1e; | |
| 158 | + color: #111111; | |
| 222 | 159 | font-size: 14px; |
| 223 | 160 | line-height: 1; |
| 224 | 161 | } |
| 225 | 162 | .lp-theme-card__rating { |
| @@ -225,13 +162,13 @@ | ||
| 225 | 162 | .lp-theme-card__rating { |
| 226 | 163 | display: inline-flex; |
| 227 | 164 | align-items: center; |
| 228 | 165 | gap: 4px; |
| 229 | - color: #374151; | |
| 166 | + color: #4f4f4f; | |
| 230 | 167 | white-space: nowrap; |
| 231 | 168 | } |
| 232 | 169 | .lp-theme-card__star { |
| 233 | - color: #ffd700; | |
| 170 | + color: #f8cb2b; | |
| 234 | 171 | font-size: 16px; |
| 235 | 172 | } |
| 236 | 173 | .lp-theme-card__sold { |
| 237 | 174 | display: inline-flex; |
| @@ -239,9 +176,9 @@ | ||
| 239 | 176 | gap: 8px; |
| 240 | 177 | white-space: nowrap; |
| 241 | 178 | } |
| 242 | 179 | .lp-theme-card__cart { |
| 243 | - color: #7067ED; | |
| 180 | + color: #7067ed; | |
| 244 | 181 | font-size: 16px; |
| 245 | 182 | } |
| 246 | 183 | .lp-theme-card__actions { |
| 247 | 184 | display: grid; |
| @@ -248,60 +185,53 @@ | ||
| 248 | 185 | grid-template-columns: minmax(0, 1fr) auto; |
| 249 | 186 | gap: 8px; |
| 250 | 187 | margin-top: auto; |
| 251 | 188 | } |
| 252 | -.lp-theme-card__buy { | |
| 253 | - display: flex; | |
| 189 | +.lp-theme-card__actions a:focus, | |
| 190 | +.lp-theme-card__actions a:focus-visible, | |
| 191 | +.lp-theme-card__actions a:active { | |
| 192 | + border-radius: 10px !important; | |
| 193 | + box-shadow: none !important; | |
| 194 | + outline: none !important; | |
| 195 | +} | |
| 196 | + | |
| 197 | +.lp-theme-badge, | |
| 198 | +.lp-be-badge { | |
| 199 | + display: inline-flex; | |
| 254 | 200 | align-items: center; |
| 255 | 201 | justify-content: center; |
| 256 | - box-sizing: border-box; | |
| 257 | - height: 40px; | |
| 258 | - min-height: 40px; | |
| 259 | - padding: 0 16px; | |
| 260 | - border: 1px solid #7067ED; | |
| 202 | + gap: 4px; | |
| 203 | + padding: 2px 8px; | |
| 261 | 204 | border-radius: 6px; |
| 262 | - color: #ffffff; | |
| 263 | - background: #7067ED; | |
| 264 | - font-size: 14px; | |
| 205 | + font-size: 12px; | |
| 265 | 206 | font-weight: 500; |
| 266 | - line-height: 1.25; | |
| 267 | - text-align: center; | |
| 268 | - text-decoration: none; | |
| 207 | + line-height: 1.4; | |
| 208 | + white-space: nowrap; | |
| 269 | 209 | } |
| 270 | -.lp-theme-card__buy:visited { | |
| 271 | - color: #ffffff; | |
| 210 | +.lp-theme-badge--primary, | |
| 211 | +.lp-be-badge--primary { | |
| 212 | + color: #7067ed; | |
| 213 | + background: #eef1ff; | |
| 272 | 214 | } |
| 273 | -.lp-theme-card__buy:hover, .lp-theme-card__buy:focus, .lp-theme-card__buy:active { | |
| 274 | - border-color: #5b52d1; | |
| 275 | - color: #ffffff; | |
| 276 | - background: #5b52d1; | |
| 215 | +.lp-theme-badge--success, | |
| 216 | +.lp-be-badge--success { | |
| 217 | + color: #1a953a; | |
| 218 | + background: #e7f6e9; | |
| 277 | 219 | } |
| 278 | -.lp-theme-card__demo { | |
| 279 | - display: flex; | |
| 280 | - align-items: center; | |
| 281 | - justify-content: center; | |
| 282 | - min-width: 56px; | |
| 283 | - box-sizing: border-box; | |
| 284 | - height: 40px; | |
| 285 | - min-height: 40px; | |
| 286 | - padding: 0 16px; | |
| 287 | - border: 1px solid #d1d5db; | |
| 288 | - border-radius: 6px; | |
| 289 | - color: #374151; | |
| 290 | - background: #ffffff; | |
| 291 | - font-size: 14px; | |
| 292 | - font-weight: 500; | |
| 293 | - line-height: 1.25; | |
| 294 | - text-align: center; | |
| 295 | - text-decoration: none; | |
| 220 | +.lp-theme-badge--warning, | |
| 221 | +.lp-be-badge--warning { | |
| 222 | + color: #b45309; | |
| 223 | + background: #fef8e1; | |
| 296 | 224 | } |
| 297 | -.lp-theme-card__demo:visited { | |
| 298 | - color: #374151; | |
| 225 | +.lp-theme-badge--danger, | |
| 226 | +.lp-be-badge--danger { | |
| 227 | + color: #d60b11; | |
| 228 | + background: #feebe9; | |
| 299 | 229 | } |
| 300 | -.lp-theme-card__demo:hover, .lp-theme-card__demo:focus, .lp-theme-card__demo:active { | |
| 301 | - border-color: #7067ED; | |
| 302 | - color: #7067ED; | |
| 303 | - background: #F7F7F7; | |
| 230 | +.lp-theme-badge--info, | |
| 231 | +.lp-be-badge--info { | |
| 232 | + color: #2e91fa; | |
| 233 | + background: #e3f1fe; | |
| 304 | 234 | } |
| 305 | 235 | |
| 306 | 236 | @media (max-width: 1400px) { |
| 307 | 237 | .lp-themes-grid { |
| @@ -313,37 +243,73 @@ | ||
| 313 | 243 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| 314 | 244 | gap: 20px; |
| 315 | 245 | } |
| 316 | 246 | } |
| 317 | -@media (max-width: 782px) { | |
| 247 | +@media (max-width: 1024px) { | |
| 248 | + .lp-themes-toolbar { | |
| 249 | + flex-wrap: wrap; | |
| 250 | + gap: 12px; | |
| 251 | + overflow: visible; | |
| 252 | + } | |
| 318 | 253 | .lp-themes-filter { |
| 319 | - flex-wrap: nowrap; | |
| 320 | - gap: 8px; | |
| 321 | - max-width: 100%; | |
| 322 | - overflow-x: auto; | |
| 254 | + display: contents; | |
| 323 | 255 | } |
| 324 | - .lp-themes-filter__item { | |
| 325 | - flex: 1 0 auto; | |
| 326 | - min-height: 44px; | |
| 327 | - padding: 4px 8px; | |
| 328 | - font-size: 13px; | |
| 329 | - white-space: nowrap; | |
| 256 | + .lp-themes-filter__toggle { | |
| 257 | + order: 1; | |
| 258 | + display: inline-flex; | |
| 259 | + align-items: center; | |
| 260 | + justify-content: center; | |
| 261 | + gap: 4px; | |
| 262 | + box-sizing: border-box; | |
| 263 | + min-width: 94px; | |
| 264 | + height: 40px; | |
| 265 | + min-height: 40px; | |
| 266 | + padding: 0 12px; | |
| 267 | + border: 1px solid transparent; | |
| 268 | + border-radius: 10px; | |
| 269 | + color: #ffffff; | |
| 270 | + background: #7067ed; | |
| 271 | + font-size: 14px; | |
| 272 | + font-weight: 500; | |
| 273 | + cursor: pointer; | |
| 330 | 274 | } |
| 331 | - .lp-themes-toolbar { | |
| 332 | - align-items: stretch; | |
| 333 | - flex-direction: column; | |
| 275 | + .lp-themes-filter__toggle:hover, .lp-themes-filter__toggle:focus-visible, .lp-themes-filter__toggle[aria-expanded=true] { | |
| 276 | + background: #5e48e0; | |
| 277 | + outline: none; | |
| 278 | + box-shadow: 0 0 0 3px rgba(112, 103, 237, 0.15); | |
| 334 | 279 | } |
| 335 | - .lp-themes-search { | |
| 336 | - width: 100%; | |
| 280 | + .lp-themes-filter__menu { | |
| 281 | + position: absolute; | |
| 282 | + top: 100%; | |
| 283 | + inset-inline: 0; | |
| 284 | + z-index: 9; | |
| 285 | + display: none; | |
| 286 | + flex-wrap: wrap; | |
| 287 | + padding: 12px; | |
| 288 | + border: 1px solid #e1e1e1; | |
| 289 | + border-radius: 10px; | |
| 290 | + background: #ffffff; | |
| 291 | + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); | |
| 337 | 292 | } |
| 293 | + .lp-themes-toolbar.is-filter-open .lp-themes-filter__menu { | |
| 294 | + display: flex; | |
| 295 | + } | |
| 296 | + .lp-themes-toolbar.is-filter-open .lp-themes-filter__toggle { | |
| 297 | + background: #5e48e0; | |
| 298 | + } | |
| 338 | 299 | } |
| 339 | -@media (max-width: 500px) { | |
| 300 | +@media (max-width: 782px) { | |
| 340 | 301 | .lp-themes-toolbar { |
| 341 | 302 | padding: 12px; |
| 342 | 303 | } |
| 343 | 304 | .lp-themes-filter__item { |
| 344 | 305 | padding-inline: 8px; |
| 345 | - font-size: 12px; | |
| 306 | + font-size: 14px; | |
| 307 | + } | |
| 308 | +} | |
| 309 | +@media (max-width: 500px) { | |
| 310 | + .lp-themes-toolbar { | |
| 311 | + padding: 12px; | |
| 346 | 312 | } |
| 347 | 313 | .lp-themes-grid { |
| 348 | 314 | grid-template-columns: 1fr; |
| 349 | 315 | } |
