| @@ -1,266 +1,192 @@ | ||
| 1 | -@use 'sass:color'; | |
| 2 | 1 | @use 'common/theme'; |
| 3 | 2 | @use 'common/badges'; |
| 3 | +@use 'common/toolbar'; | |
| 4 | +@use 'common/wp-admin'; | |
| 5 | +@use 'common/page-header'; | |
| 4 | 6 | |
| 5 | -$breakpoint: 1060px; | |
| 7 | +#code-snippets-welcome-container { | |
| 8 | + margin-block-start: 0; | |
| 9 | +} | |
| 6 | 10 | |
| 7 | -.csp-welcome-wrap { | |
| 8 | - padding: 25px; | |
| 11 | +.code-snippets-updates { | |
| 12 | + display: flex; | |
| 13 | + flex-direction: row; | |
| 14 | + gap: 20px; | |
| 9 | 15 | |
| 10 | - h1, h2, h3 { | |
| 11 | - font-weight: 700; | |
| 12 | - margin-block: 10px; | |
| 13 | - | |
| 14 | - .dashicons { | |
| 15 | - font-size: 90%; | |
| 16 | - line-height: inherit; | |
| 17 | - inline-size: auto; | |
| 18 | - } | |
| 16 | + > * { | |
| 17 | + background: var(--cs-color-surface); | |
| 18 | + border: 1px solid var(--cs-color-border-subtle); | |
| 19 | + border-radius: var(--cs-card-radius); | |
| 20 | + padding: 32px; | |
| 19 | 21 | } |
| 20 | 22 | |
| 21 | - h1 { | |
| 22 | - font-size: 1.6rem; | |
| 23 | + .code-snippets-header-wrapper { | |
| 24 | + display: flex; | |
| 25 | + flex-flow: row; | |
| 26 | + justify-content: space-between; | |
| 27 | + align-items: center; | |
| 28 | + border-block-end: 1px solid var(--cs-color-border-subtle); | |
| 29 | + margin-block-end: 20px; | |
| 30 | + padding-block-end: 20px; | |
| 23 | 31 | } |
| 24 | 32 | |
| 25 | 33 | h2 { |
| 26 | - font-size: 1.4rem; | |
| 34 | + font-size: 18px; | |
| 35 | + margin: 0; | |
| 27 | 36 | } |
| 28 | 37 | |
| 29 | - .dashicons-external { | |
| 30 | - float: inline-end; | |
| 31 | - color: #666; | |
| 38 | + @media (width <= 960px) { | |
| 39 | + flex-direction: column; | |
| 32 | 40 | } |
| 33 | 41 | } |
| 34 | 42 | |
| 35 | -.csp-welcome-header { | |
| 43 | +.code-snippets-hero { | |
| 36 | 44 | display: flex; |
| 37 | - flex-flow: row wrap; | |
| 38 | - justify-content: space-between; | |
| 39 | - align-items: center; | |
| 45 | + flex-flow: column; | |
| 46 | + border: 1px solid var(--cs-color-border-subtle); | |
| 40 | 47 | |
| 41 | - header { | |
| 42 | - display: flex; | |
| 43 | - flex-direction: row; | |
| 44 | - align-items: center; | |
| 45 | - gap: 10px; | |
| 48 | + figure { | |
| 49 | + margin: 1em 0 0; | |
| 50 | + overflow: hidden; | |
| 51 | + border-radius: var(--cs-card-radius); | |
| 52 | + position: relative; | |
| 53 | + block-size: auto; | |
| 54 | + background: var(--cs-color-surface-muted); | |
| 55 | + flex: 1; | |
| 56 | + text-align: center; | |
| 46 | 57 | |
| 47 | - h1 { | |
| 48 | - font-size: 1.4rem; | |
| 49 | - font-weight: bold; | |
| 50 | - line-height: 1; | |
| 51 | - margin: 0; | |
| 52 | - | |
| 53 | - span { | |
| 54 | - text-decoration: underline theme.$primary wavy 3px; | |
| 55 | - text-decoration-skip-ink: none; | |
| 56 | - text-underline-offset: 11px; | |
| 57 | - text-transform: capitalize; | |
| 58 | - } | |
| 58 | + img { | |
| 59 | + inline-size: 100%; | |
| 60 | + block-size: 100%; | |
| 61 | + overflow: hidden; | |
| 62 | + object-fit: cover; | |
| 59 | 63 | } |
| 60 | 64 | } |
| 61 | 65 | } |
| 62 | 66 | |
| 63 | -.csp-welcome-header nav { | |
| 64 | - column-gap: 15px; | |
| 67 | +.code-snippets-partners, | |
| 68 | +.code-snippets-articles { | |
| 69 | + display: flex; | |
| 70 | + flex-direction: row; | |
| 71 | + gap: 16px; | |
| 72 | + margin: 0; | |
| 65 | 73 | |
| 66 | - ul { | |
| 67 | - display: flex; | |
| 68 | - flex-flow: row wrap; | |
| 69 | - justify-content: space-evenly; | |
| 74 | + figure { | |
| 70 | 75 | margin: 0; |
| 71 | - } | |
| 76 | + padding: 0; | |
| 72 | 77 | |
| 73 | - li { | |
| 74 | - margin-block-end: 0; | |
| 75 | - } | |
| 76 | - | |
| 77 | - li a { | |
| 78 | - margin-block: 10px; | |
| 79 | - align-items: center; | |
| 80 | - border-width: 1px; | |
| 81 | - border-style: solid; | |
| 82 | - color: white; | |
| 83 | - cursor: pointer; | |
| 84 | - display: flex; | |
| 85 | - font-weight: 400; | |
| 86 | - gap: 3px; | |
| 87 | - text-decoration: none; | |
| 88 | - transition: all .1s ease-in-out; | |
| 89 | - border-radius: 3px; | |
| 90 | - padding: 8px; | |
| 91 | - | |
| 92 | - &:hover { | |
| 93 | - background: transparent; | |
| 78 | + img { | |
| 79 | + inline-size: 100%; | |
| 80 | + block-size: 220px; | |
| 81 | + overflow: hidden; | |
| 82 | + object-fit: cover; | |
| 94 | 83 | } |
| 95 | - | |
| 96 | - .dashicons, svg { | |
| 97 | - text-decoration: none; | |
| 98 | - margin-block-start: -1px; | |
| 99 | - margin-inline-start: 3px; | |
| 100 | - } | |
| 101 | - | |
| 102 | - svg { | |
| 103 | - fill: #fff; | |
| 104 | - inline-size: 20px; | |
| 105 | - block-size: 20px; | |
| 106 | - font-size: 20px; | |
| 107 | - vertical-align: top; | |
| 108 | - } | |
| 109 | - | |
| 110 | - &:hover svg { | |
| 111 | - fill: currentcolor; | |
| 112 | - } | |
| 113 | 84 | } |
| 85 | +} | |
| 114 | 86 | |
| 115 | - $link-colors: ( | |
| 116 | - pro: theme.$secondary, | |
| 117 | - cloud: #08c5d1, | |
| 118 | - resources: #424242, | |
| 119 | - discord: theme.$brand-discord, | |
| 120 | - facebook: theme.$brand-facebook | |
| 121 | - ); | |
| 87 | +.code-snippets-card { | |
| 88 | + flex: 1; | |
| 89 | + background: var(--cs-color-surface); | |
| 90 | + border: 1px solid var(--cs-color-border-subtle); | |
| 91 | + border-radius: var(--cs-card-radius); | |
| 92 | + display: flex; | |
| 93 | + margin: 0; | |
| 94 | + flex-flow: column; | |
| 95 | + color: var(--cs-color-text); | |
| 122 | 96 | |
| 123 | - @each $link-name, $color in $link-colors { | |
| 124 | - .csp-link-#{$link-name} { | |
| 125 | - background: $color; | |
| 126 | - border-color: $color; | |
| 127 | - | |
| 128 | - &:hover { | |
| 129 | - color: $color; | |
| 130 | - } | |
| 131 | - } | |
| 97 | + figure img { | |
| 98 | + border-start-start-radius: var(--cs-card-radius); | |
| 99 | + border-start-end-radius: var(--cs-card-radius); | |
| 132 | 100 | } |
| 133 | 101 | } |
| 134 | 102 | |
| 135 | -.csp-cards { | |
| 136 | - display: grid; | |
| 137 | - grid-auto-rows: 1fr; | |
| 138 | - grid-template-columns: repeat(4, 1fr); | |
| 139 | - gap: 40px 15px; | |
| 140 | - | |
| 141 | - @media (width <= $breakpoint) { | |
| 142 | - grid-template-columns: 1fr !important; | |
| 103 | +.code-snippets-partners { | |
| 104 | + .code-snippets-header-wrapper { | |
| 105 | + display: flex; | |
| 106 | + flex-direction: row; | |
| 107 | + justify-content: space-between; | |
| 108 | + align-items: center; | |
| 109 | + padding: 24px; | |
| 143 | 110 | } |
| 144 | 111 | } |
| 145 | 112 | |
| 146 | -.csp-card { | |
| 147 | - border: 1px solid theme.$outline; | |
| 148 | - background: white; | |
| 149 | - border-radius: 10px; | |
| 150 | - display: flex; | |
| 151 | - flex-flow: column; | |
| 152 | -} | |
| 113 | +.code-snippets-articles { | |
| 114 | + .code-snippets-header-wrapper { | |
| 115 | + display: flex; | |
| 116 | + flex-direction: column; | |
| 117 | + align-items: flex-start; | |
| 118 | + padding: 24px; | |
| 119 | + gap: 14px; | |
| 120 | + block-size: 100%; | |
| 121 | + } | |
| 153 | 122 | |
| 154 | -a.csp-card { | |
| 155 | - text-decoration: none; | |
| 156 | - | |
| 157 | - &:hover { | |
| 158 | - background: color.adjust(theme.$primary, $lightness: 55%); | |
| 159 | - transition: .5s background-color; | |
| 160 | - box-shadow: 0 1px 1px rgb(255 255 255 / 50%); | |
| 161 | - | |
| 162 | - .dashicons-external { | |
| 163 | - color: #000; | |
| 164 | - } | |
| 123 | + .button { | |
| 124 | + margin-block-start: auto; | |
| 165 | 125 | } |
| 166 | -} | |
| 167 | 126 | |
| 168 | -.csp-section-changes { | |
| 169 | - border: 1px solid theme.$outline; | |
| 170 | - border-inline-start: 0; | |
| 171 | - border-inline-end: 0; | |
| 172 | - padding-block: 40px 50px; | |
| 173 | - padding-inline: 0; | |
| 174 | - display: flex; | |
| 175 | - flex-direction: column; | |
| 176 | - row-gap: 20px; | |
| 177 | - margin-block-start: 30px; | |
| 178 | - | |
| 179 | - .csp-cards { | |
| 180 | - grid-template-columns: 2fr 1fr; | |
| 181 | - gap: 20px; | |
| 127 | + h3 { | |
| 128 | + font-size: 18px; | |
| 129 | + margin: 0; | |
| 182 | 130 | } |
| 183 | 131 | |
| 184 | - .csp-card { | |
| 185 | - padding: 20px; | |
| 186 | - box-shadow: 0 1px 1px rgb(0 0 0 / 5%); | |
| 187 | - | |
| 188 | - h2 { | |
| 189 | - color: theme.$primary; | |
| 190 | - } | |
| 132 | + p { | |
| 133 | + margin: 0; | |
| 191 | 134 | } |
| 192 | 135 | |
| 193 | - .csp-changelog-wrapper { | |
| 194 | - overflow-y: scroll; | |
| 136 | + .item-category { | |
| 137 | + color: #fff; | |
| 138 | + background: color-mix(in srgb, var(--cs-color-secondary) 85%, #000 15%); | |
| 139 | + display: block; | |
| 140 | + font-size: 12px; | |
| 141 | + letter-spacing: 1px; | |
| 142 | + margin-block: 0; | |
| 143 | + text-transform: uppercase; | |
| 144 | + inline-size: fit-content; | |
| 145 | + padding: 3px 10px; | |
| 146 | + border-radius: 5px; | |
| 147 | + font-weight: bold; | |
| 195 | 148 | } |
| 149 | +} | |
| 196 | 150 | |
| 197 | - .csp-section-changelog { | |
| 198 | - font-size: 0.9rem; | |
| 199 | - line-height: 1.5; | |
| 200 | - color: #333; | |
| 201 | - block-size: 400px; | |
| 151 | +.code-snippets-changelog-entries { | |
| 152 | + font-size: 0.9rem; | |
| 153 | + line-height: 1.5; | |
| 154 | + overflow-y: scroll; | |
| 155 | + max-block-size: 500px; | |
| 156 | + color: var(--cs-color-text); | |
| 157 | + padding-inline-end: 1em; | |
| 202 | 158 | |
| 203 | - h3 { | |
| 204 | - float: inline-end; | |
| 205 | - color: #666; | |
| 206 | - } | |
| 159 | + h3 { | |
| 160 | + font-size: 16px; | |
| 161 | + display: flex; | |
| 207 | 162 | |
| 208 | - h4 { | |
| 209 | - margin-block: 30px 10px; | |
| 210 | - margin-inline: 0; | |
| 163 | + &:not(:first-of-type) { | |
| 164 | + margin-block-start: 100px; | |
| 211 | 165 | } |
| 212 | 166 | |
| 213 | - ul { | |
| 214 | - margin-block-start: 5px; | |
| 167 | + span { | |
| 168 | + font-size: 14px; | |
| 169 | + font-weight: normal; | |
| 170 | + margin-inline-start: auto; | |
| 215 | 171 | } |
| 172 | + } | |
| 216 | 173 | |
| 217 | - li { | |
| 218 | - display: grid; | |
| 219 | - grid-template-columns: 40px 1fr; | |
| 220 | - grid-template-rows: 1fr; | |
| 221 | - align-items: baseline; | |
| 222 | - gap: 7px; | |
| 223 | - } | |
| 174 | + h4 { | |
| 175 | + font-size: 14px; | |
| 176 | + margin: 1em 0; | |
| 177 | + } | |
| 224 | 178 | |
| 225 | - li .badge { | |
| 226 | - text-align: center; | |
| 227 | - } | |
| 228 | - | |
| 229 | - > article::after { | |
| 230 | - border-block-end: 1px solid #666; | |
| 231 | - content: ' '; | |
| 232 | - display: block; | |
| 233 | - inline-size: 50%; | |
| 234 | - margin-block: 3em 0; | |
| 235 | - margin-inline: auto; | |
| 236 | - } | |
| 237 | - | |
| 238 | - > article:last-child { | |
| 239 | - padding-block-end: 1px; | |
| 240 | - | |
| 241 | - &::after { | |
| 242 | - border: 0; | |
| 243 | - } | |
| 244 | - } | |
| 179 | + ul { | |
| 180 | + margin-block-start: 5px; | |
| 245 | 181 | } |
| 246 | 182 | |
| 247 | - figure { | |
| 248 | - margin-block: 1em 0; | |
| 249 | - margin-inline: 0; | |
| 250 | - overflow: hidden; | |
| 251 | - border-radius: 0.5rem; | |
| 252 | - border: 1px solid grey; | |
| 253 | - position: relative; | |
| 254 | - block-size: auto; | |
| 255 | - background: #646970; | |
| 256 | - | |
| 257 | - img { | |
| 258 | - inline-size: 100%; | |
| 259 | - block-size: 100%; | |
| 260 | - overflow: hidden; | |
| 261 | - object-fit: cover; | |
| 262 | - } | |
| 183 | + li { | |
| 184 | + display: grid; | |
| 185 | + grid-template-columns: 40px 1fr; | |
| 186 | + grid-template-rows: 1fr; | |
| 187 | + align-items: baseline; | |
| 188 | + gap: 10px; | |
| 263 | 189 | } |
| 264 | 190 | |
| 265 | 191 | .dashicons-lightbulb { |
| 266 | 192 | color: #f1c40f; |
| @@ -272,109 +198,53 @@ | ||
| 272 | 198 | |
| 273 | 199 | .dashicons-buddicons-replies { |
| 274 | 200 | color: #3d9970; |
| 275 | 201 | } |
| 276 | -} | |
| 277 | 202 | |
| 278 | -.csp-section-links { | |
| 279 | - padding-block: 40px 50px; | |
| 280 | - padding-inline: 0; | |
| 203 | + .dashicons-remove { | |
| 204 | + color: #ffbf00; | |
| 205 | + } | |
| 281 | 206 | |
| 282 | - .csp-card { | |
| 283 | - margin-block-start: 20px; | |
| 284 | - justify-content: flex-start; | |
| 285 | - color: black; | |
| 286 | - position: relative; | |
| 287 | - overflow: hidden; | |
| 288 | - row-gap: 10px; | |
| 289 | - padding: 1rem; | |
| 290 | - inline-size: 85%; | |
| 291 | - | |
| 292 | - header { | |
| 293 | - flex: 1; | |
| 294 | - } | |
| 295 | - | |
| 296 | - figure { | |
| 297 | - margin-block: 1em 0; | |
| 298 | - margin-inline: 0; | |
| 299 | - | |
| 300 | - img { | |
| 301 | - border-radius: 5px; | |
| 302 | - inline-size: 100%; | |
| 303 | - block-size: 100%; | |
| 304 | - max-block-size: 300px; | |
| 305 | - overflow: hidden; | |
| 306 | - object-fit: cover; | |
| 307 | - } | |
| 308 | - } | |
| 309 | - | |
| 310 | - .csp-card-item-category { | |
| 311 | - color: white; | |
| 312 | - background: theme.$secondary; | |
| 313 | - display: block; | |
| 314 | - font-size: .9rem; | |
| 315 | - letter-spacing: 1px; | |
| 316 | - margin-block: 0; | |
| 317 | - text-transform: uppercase; | |
| 318 | - inline-size: fit-content; | |
| 319 | - padding-block: 5px; | |
| 320 | - padding-inline: 15px; | |
| 321 | - border-radius: 50px; | |
| 322 | - } | |
| 323 | - | |
| 324 | - h3 { | |
| 325 | - font-size: 1.7rem; | |
| 326 | - color: theme.$primary; | |
| 327 | - line-height: normal; | |
| 328 | - } | |
| 329 | - | |
| 330 | - .csp-card-item-description { | |
| 331 | - color: #51525c; | |
| 332 | - font-size: 1rem; | |
| 333 | - font-weight: 300; | |
| 334 | - } | |
| 335 | - | |
| 336 | - footer { | |
| 337 | - display: flex; | |
| 338 | - flex-direction: row; | |
| 339 | - justify-content: space-between; | |
| 340 | - align-items: center; | |
| 341 | - } | |
| 207 | + .dashicons-trash { | |
| 208 | + color: #c0c0c0; | |
| 342 | 209 | } |
| 343 | 210 | |
| 344 | - &.csp-section-partners { | |
| 345 | - border-block-start: 1px solid theme.$outline; | |
| 346 | - | |
| 347 | - header { | |
| 348 | - display: flex; | |
| 349 | - flex-direction: row-reverse; | |
| 350 | - justify-content: space-between; | |
| 351 | - align-items: center; | |
| 352 | - } | |
| 211 | + .dashicons-shield { | |
| 212 | + color: #0074d9; | |
| 353 | 213 | } |
| 354 | 214 | |
| 355 | - &.csp-section-articles { | |
| 356 | - h2 { | |
| 357 | - font-size: 1.1rem; | |
| 358 | - } | |
| 359 | - | |
| 360 | - figure img { | |
| 361 | - aspect-ratio: 1; | |
| 362 | - } | |
| 215 | + .dashicons-open-folder { | |
| 216 | + color: #5d2f27; | |
| 363 | 217 | } |
| 364 | 218 | } |
| 365 | 219 | |
| 366 | -.csp-loading-spinner { | |
| 220 | +.code-snippets-loading-spinner { | |
| 367 | 221 | block-size: 0; |
| 368 | 222 | inline-size: 0; |
| 369 | 223 | padding: 15px; |
| 370 | 224 | border: 6px solid #e7c0b3; |
| 371 | - border-inline-end-color: theme.$secondary; | |
| 372 | - border-radius: 22px; | |
| 225 | + border-inline-end-color: var(--cs-color-secondary); | |
| 226 | + border-radius: 50%; | |
| 373 | 227 | animation: loading-rotate 1s infinite linear; |
| 374 | 228 | position: absolute; |
| 375 | 229 | inset-inline-start: 47%; |
| 376 | 230 | inset-block-start: 45%; |
| 231 | + | |
| 232 | + @media (prefers-reduced-motion: reduce) { | |
| 233 | + animation: none; | |
| 234 | + } | |
| 235 | +} | |
| 236 | + | |
| 237 | +.csp-welcome-header nav { | |
| 238 | + column-gap: 15px; | |
| 239 | + | |
| 240 | + ul { | |
| 241 | + display: flex; | |
| 242 | + flex-flow: row wrap; | |
| 243 | + justify-content: space-evenly; | |
| 244 | + gap: 5px; | |
| 245 | + margin: 0; | |
| 246 | + } | |
| 377 | 247 | } |
| 378 | 248 | |
| 379 | 249 | @keyframes loading-rotate { |
| 380 | 250 | 100% { |
