| @@ -1,5 +1,4 @@ | ||
| 1 | -@use 'sass:color'; | |
| 2 | 1 | @use '../common/theme'; |
| 3 | 2 | @use '../common/cards'; |
| 4 | 3 | |
| 5 | 4 | .cloud-search-result { |
| @@ -36,9 +35,9 @@ | ||
| 36 | 35 | padding: 0; |
| 37 | 36 | border: none; |
| 38 | 37 | background: none; |
| 39 | 38 | font: inherit; |
| 40 | - color: theme.$accent; | |
| 39 | + color: var(--cs-color-accent); | |
| 41 | 40 | cursor: pointer; |
| 42 | 41 | text-align: start; |
| 43 | 42 | overflow: hidden; |
| 44 | 43 | white-space: nowrap; |
| @@ -48,11 +47,11 @@ | ||
| 48 | 47 | text-decoration: underline; |
| 49 | 48 | } |
| 50 | 49 | |
| 51 | 50 | &:focus-visible { |
| 52 | - outline: 2px solid theme.$accent; | |
| 51 | + outline: 2px solid var(--cs-color-accent); | |
| 53 | 52 | outline-offset: 2px; |
| 54 | - border-radius: 2px; | |
| 53 | + border-radius: 5px; | |
| 55 | 54 | } |
| 56 | 55 | } |
| 57 | 56 | } |
| 58 | 57 | |
| @@ -61,11 +60,14 @@ | ||
| 61 | 60 | align-items: center; |
| 62 | 61 | flex-wrap: wrap; |
| 63 | 62 | gap: 16px; |
| 64 | 63 | font-size: 14px; |
| 64 | + line-height: 1.5; | |
| 65 | + border-block-end: 1px solid var(--cs-color-border-subtle); | |
| 66 | + padding-block-end: 16px; | |
| 65 | 67 | |
| 66 | 68 | .cloud-snippet-tags { |
| 67 | - color: theme.$accent; | |
| 69 | + color: var(--cs-color-accent); | |
| 68 | 70 | } |
| 69 | 71 | |
| 70 | 72 | .snippet-card-modified { |
| 71 | 73 | color: #6c7e7e; |
| @@ -80,26 +82,25 @@ | ||
| 80 | 82 | line-clamp: 2; |
| 81 | 83 | overflow: hidden; |
| 82 | 84 | margin: 0; |
| 83 | 85 | font-size: 14px; |
| 84 | - color: #646970; | |
| 85 | - border-block-start: 1px solid #dcdcde; | |
| 86 | - padding-block-start: 16px; | |
| 86 | + line-height: 1.5; | |
| 87 | + color: var(--cs-color-text-muted); | |
| 87 | 88 | } |
| 88 | 89 | |
| 89 | 90 | .cloud-snippet-author { |
| 90 | 91 | margin: 0; |
| 91 | 92 | font-size: 14px; |
| 92 | - color: #646970; | |
| 93 | + color: var(--cs-color-text-muted); | |
| 93 | 94 | |
| 94 | 95 | a { |
| 95 | - color: theme.$accent; | |
| 96 | + color: var(--cs-color-accent); | |
| 96 | 97 | } |
| 97 | 98 | } |
| 98 | 99 | |
| 99 | 100 | footer { |
| 100 | 101 | .dashicons-warning { |
| 101 | - color: #b32d2e; | |
| 102 | + color: var(--cs-color-error); | |
| 102 | 103 | } |
| 103 | 104 | |
| 104 | 105 | .cloud-snippet-update svg { |
| 105 | 106 | display: block; |
| @@ -111,9 +112,9 @@ | ||
| 111 | 112 | border-radius: 5px; |
| 112 | 113 | } |
| 113 | 114 | |
| 114 | 115 | .button:not(.button-primary, .cloud-pro-button) { |
| 115 | - background: #fff; | |
| 116 | + background: transparent; | |
| 116 | 117 | } |
| 117 | 118 | } |
| 118 | 119 | } |
| 119 | 120 | |
| @@ -120,20 +121,19 @@ | ||
| 120 | 121 | .cloud-search-results .cloud-search-result footer .components-spinner { |
| 121 | 122 | margin: 0; |
| 122 | 123 | } |
| 123 | 124 | |
| 124 | -// Anchored to the card container so this keeps its brand-orange fill above the WP-admin | |
| 125 | -// compatibility layer's secondary-button styling (equal specificity, resolved by source order). | |
| 126 | -.cloud-search-result .cloud-pro-button.button { | |
| 127 | - background-color: theme.$secondary; | |
| 128 | - border-color: theme.$secondary; | |
| 129 | - color: #fff; | |
| 125 | +// Pro-only actions use the same quiet outline treatment in card and table views. | |
| 126 | +.cloud-pro-button.button { | |
| 127 | + background-color: transparent; | |
| 128 | + border-color: var(--cs-color-accent); | |
| 129 | + color: var(--cs-color-accent); | |
| 130 | 130 | |
| 131 | 131 | &:hover, |
| 132 | 132 | &:focus { |
| 133 | - background-color: color.adjust(theme.$secondary, $lightness: -10%); | |
| 134 | - border-color: color.adjust(theme.$secondary, $lightness: -10%); | |
| 135 | - color: #fff; | |
| 133 | + background-color: var(--cs-color-surface-info); | |
| 134 | + border-color: var(--cs-color-accent); | |
| 135 | + color: var(--cs-color-accent); | |
| 136 | 136 | } |
| 137 | 137 | } |
| 138 | 138 | |
| 139 | 139 | // Three equal-height snippet cards per row, matching the manage snippets |
