| @@ -35,9 +35,9 @@ | ||
| 35 | 35 | padding: 0; |
| 36 | 36 | border: none; |
| 37 | 37 | background: none; |
| 38 | 38 | font: inherit; |
| 39 | - color: theme.$accent; | |
| 39 | + color: var(--cs-color-accent); | |
| 40 | 40 | cursor: pointer; |
| 41 | 41 | text-align: start; |
| 42 | 42 | overflow: hidden; |
| 43 | 43 | white-space: nowrap; |
| @@ -47,11 +47,11 @@ | ||
| 47 | 47 | text-decoration: underline; |
| 48 | 48 | } |
| 49 | 49 | |
| 50 | 50 | &:focus-visible { |
| 51 | - outline: 2px solid theme.$accent; | |
| 51 | + outline: 2px solid var(--cs-color-accent); | |
| 52 | 52 | outline-offset: 2px; |
| 53 | - border-radius: 2px; | |
| 53 | + border-radius: 5px; | |
| 54 | 54 | } |
| 55 | 55 | } |
| 56 | 56 | } |
| 57 | 57 | |
| @@ -61,11 +61,13 @@ | ||
| 61 | 61 | flex-wrap: wrap; |
| 62 | 62 | gap: 16px; |
| 63 | 63 | font-size: 14px; |
| 64 | 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; |
| @@ -81,26 +83,24 @@ | ||
| 81 | 83 | overflow: hidden; |
| 82 | 84 | margin: 0; |
| 83 | 85 | font-size: 14px; |
| 84 | 86 | line-height: 1.5; |
| 85 | - color: #646970; | |
| 86 | - border-block-start: 1px solid #dcdcde; | |
| 87 | - padding-block-start: 16px; | |
| 87 | + color: var(--cs-color-text-muted); | |
| 88 | 88 | } |
| 89 | 89 | |
| 90 | 90 | .cloud-snippet-author { |
| 91 | 91 | margin: 0; |
| 92 | 92 | font-size: 14px; |
| 93 | - color: #646970; | |
| 93 | + color: var(--cs-color-text-muted); | |
| 94 | 94 | |
| 95 | 95 | a { |
| 96 | - color: theme.$accent; | |
| 96 | + color: var(--cs-color-accent); | |
| 97 | 97 | } |
| 98 | 98 | } |
| 99 | 99 | |
| 100 | 100 | footer { |
| 101 | 101 | .dashicons-warning { |
| 102 | - color: #b32d2e; | |
| 102 | + color: var(--cs-color-error); | |
| 103 | 103 | } |
| 104 | 104 | |
| 105 | 105 | .cloud-snippet-update svg { |
| 106 | 106 | display: block; |
| @@ -124,16 +124,16 @@ | ||
| 124 | 124 | |
| 125 | 125 | // Pro-only actions use the same quiet outline treatment in card and table views. |
| 126 | 126 | .cloud-pro-button.button { |
| 127 | 127 | background-color: transparent; |
| 128 | - border-color: theme.$accent; | |
| 129 | - color: theme.$accent; | |
| 128 | + border-color: var(--cs-color-accent); | |
| 129 | + color: var(--cs-color-accent); | |
| 130 | 130 | |
| 131 | 131 | &:hover, |
| 132 | 132 | &:focus { |
| 133 | - background-color: #eff5f9; | |
| 134 | - border-color: theme.$accent; | |
| 135 | - color: theme.$accent; | |
| 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 |
