| @@ -1,8 +1,14 @@ | ||
| 1 | 1 | .learn-press-themes { |
| 2 | 2 | max-width: 100%; |
| 3 | 3 | color: #6b7280; |
| 4 | 4 | } |
| 5 | +.learn-press-themes > .wp-heading-inline { | |
| 6 | + color: #1e1e1e; | |
| 7 | + font-size: 32px; | |
| 8 | + font-weight: 600; | |
| 9 | + line-height: 1.25; | |
| 10 | +} | |
| 5 | 11 | .learn-press-themes a:focus-visible, |
| 6 | 12 | .learn-press-themes button:focus-visible { |
| 7 | 13 | outline: none; |
| 8 | 14 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| @@ -12,10 +18,11 @@ | ||
| 12 | 18 | display: flex; |
| 13 | 19 | align-items: center; |
| 14 | 20 | justify-content: space-between; |
| 15 | 21 | gap: 16px; |
| 22 | + box-sizing: border-box; | |
| 16 | 23 | margin-bottom: 30px; |
| 17 | - padding: 16px; | |
| 24 | + padding: 20px; | |
| 18 | 25 | border: 1px solid #e5e7eb; |
| 19 | 26 | border-radius: 12px; |
| 20 | 27 | background: #ffffff; |
| 21 | 28 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); |
| @@ -23,9 +30,9 @@ | ||
| 23 | 30 | |
| 24 | 31 | .lp-themes-search { |
| 25 | 32 | position: relative; |
| 26 | 33 | flex-shrink: 0; |
| 27 | - width: 280px; | |
| 34 | + width: 360px; | |
| 28 | 35 | max-width: 100%; |
| 29 | 36 | } |
| 30 | 37 | .lp-themes-search__icon { |
| 31 | 38 | position: absolute; |
| @@ -44,14 +51,14 @@ | ||
| 44 | 51 | |
| 45 | 52 | .learn-press-themes input.lp-themes-search__input { |
| 46 | 53 | box-sizing: border-box; |
| 47 | 54 | width: 100%; |
| 48 | - min-height: 36px; | |
| 55 | + min-height: 48px; | |
| 49 | 56 | margin: 0; |
| 50 | 57 | padding: 4px 12px; |
| 51 | 58 | padding-inline-start: 40px; |
| 52 | 59 | border: 1px solid #d1d5db; |
| 53 | - border-radius: 6px; | |
| 60 | + border-radius: 12px; | |
| 54 | 61 | color: #1a1a1a; |
| 55 | 62 | background: #ffffff; |
| 56 | 63 | font-size: 14px; |
| 57 | 64 | } |
| @@ -70,10 +77,16 @@ | ||
| 70 | 77 | |
| 71 | 78 | .lp-themes-filter { |
| 72 | 79 | display: flex; |
| 73 | 80 | align-items: center; |
| 74 | - flex-wrap: wrap; | |
| 75 | - gap: 8px; | |
| 81 | + flex-wrap: nowrap; | |
| 82 | + gap: 12px; | |
| 83 | + margin: -4px; | |
| 84 | + padding: 4px; | |
| 85 | + overflow-x: auto; | |
| 86 | + overflow-y: hidden; | |
| 87 | + scrollbar-width: thin; | |
| 88 | + -webkit-overflow-scrolling: touch; | |
| 76 | 89 | } |
| 77 | 90 | .lp-themes-filter__count { |
| 78 | 91 | margin-inline-start: 4px; |
| 79 | 92 | } |
| @@ -80,15 +93,15 @@ | ||
| 80 | 93 | .lp-themes-filter__item { |
| 81 | 94 | display: inline-flex; |
| 82 | 95 | align-items: center; |
| 83 | 96 | 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; | |
| 97 | + min-height: 49px; | |
| 98 | + padding: 8px 20px; | |
| 99 | + border: 1px solid transparent; | |
| 100 | + border-radius: 12px; | |
| 101 | + color: #7067ED; | |
| 102 | + background: #EEF1FF; | |
| 103 | + font-size: 16px; | |
| 91 | 104 | font-weight: 500; |
| 92 | 105 | line-height: 150%; |
| 93 | 106 | cursor: pointer; |
| 94 | 107 | transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; |
| @@ -186,9 +199,9 @@ | ||
| 186 | 199 | font-size: 14px; |
| 187 | 200 | font-weight: 400; |
| 188 | 201 | line-height: 1.45; |
| 189 | 202 | -webkit-box-orient: vertical; |
| 190 | - -webkit-line-clamp: 2; | |
| 203 | + -webkit-line-clamp: 3; | |
| 191 | 204 | } |
| 192 | 205 | .lp-theme-card__footer { |
| 193 | 206 | display: flex; |
| 194 | 207 | margin: 0 0 16px; |
| @@ -312,29 +325,26 @@ | ||
| 312 | 325 | .lp-themes-grid { |
| 313 | 326 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| 314 | 327 | gap: 20px; |
| 315 | 328 | } |
| 316 | -} | |
| 317 | -@media (max-width: 782px) { | |
| 318 | - .lp-themes-filter { | |
| 319 | - flex-wrap: nowrap; | |
| 320 | - gap: 8px; | |
| 321 | - max-width: 100%; | |
| 322 | - overflow-x: auto; | |
| 323 | - } | |
| 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; | |
| 330 | - } | |
| 331 | 329 | .lp-themes-toolbar { |
| 332 | 330 | align-items: stretch; |
| 333 | 331 | flex-direction: column; |
| 334 | 332 | } |
| 333 | + .lp-themes-filter { | |
| 334 | + width: 100%; | |
| 335 | + min-width: 0; | |
| 336 | + } | |
| 335 | 337 | .lp-themes-search { |
| 336 | 338 | width: 100%; |
| 339 | + } | |
| 340 | +} | |
| 341 | +@media (max-width: 782px) { | |
| 342 | + .lp-themes-filter__item { | |
| 343 | + flex: 0 0 auto; | |
| 344 | + } | |
| 345 | + .lp-themes-toolbar { | |
| 346 | + padding: 12px; | |
| 337 | 347 | } |
| 338 | 348 | } |
| 339 | 349 | @media (max-width: 500px) { |
| 340 | 350 | .lp-themes-toolbar { |
