| @@ -3,16 +3,38 @@ | ||
| 3 | 3 | .snippet-priority { |
| 4 | 4 | .priority-input-tooltip { |
| 5 | 5 | margin-inline-end: auto; |
| 6 | 6 | } |
| 7 | - | |
| 7 | + | |
| 8 | 8 | input { |
| 9 | 9 | inline-size: 4em; |
| 10 | 10 | } |
| 11 | 11 | } |
| 12 | 12 | |
| 13 | -.activation-switch-container, | |
| 14 | -.lock-control-container { | |
| 13 | +.code-snippets-copy-text.button { | |
| 14 | + display: flex; | |
| 15 | + align-items: center; | |
| 16 | + gap: 3px; | |
| 17 | + | |
| 18 | + .dashicons { | |
| 19 | + block-size: 18px; | |
| 20 | + inline-size: 18px; | |
| 21 | + font-size: 18px; | |
| 22 | + } | |
| 23 | + | |
| 24 | + .spinner-wrapper { | |
| 25 | + block-size: 18px; | |
| 26 | + inline-size: 18px; | |
| 27 | + display: flex; | |
| 28 | + align-items: center; | |
| 29 | + } | |
| 30 | + | |
| 31 | + .components-spinner { | |
| 32 | + block-size: 12px; | |
| 33 | + } | |
| 34 | +} | |
| 35 | + | |
| 36 | +.activation-switch-container { | |
| 15 | 37 | inline-size: 100%; |
| 16 | 38 | display: flex; |
| 17 | 39 | flex-flow: row; |
| 18 | 40 | gap: 5px; |
| @@ -19,8 +41,9 @@ | ||
| 19 | 41 | justify-content: center; |
| 20 | 42 | align-items: center; |
| 21 | 43 | |
| 22 | 44 | label { |
| 45 | + font-size: 13px; | |
| 23 | 46 | font-weight: 600; |
| 24 | 47 | } |
| 25 | 48 | |
| 26 | 49 | span:first-of-type { |
| @@ -32,50 +55,156 @@ | ||
| 32 | 55 | .button-large { |
| 33 | 56 | block-size: 48px; |
| 34 | 57 | } |
| 35 | 58 | |
| 36 | - .row-actions { | |
| 59 | + .box { | |
| 60 | + background-color: var(--cs-color-surface); | |
| 61 | + border: 1px solid var(--cs-color-border); | |
| 62 | + border-radius: 5px; | |
| 63 | + padding: 0; | |
| 37 | 64 | display: flex; |
| 65 | + flex-flow: column; | |
| 66 | + gap: 0; | |
| 67 | + overflow: hidden; | |
| 38 | 68 | |
| 39 | - // Row-action buttons render as plain inline links. Neutralise the generic `.button` | |
| 40 | - // WP 7.0 compatibility styling (fill/border/radius/40px height) here — emitted after | |
| 41 | - // the wp-admin layer at equal specificity, so it wins. Export/Download inherit the accent. | |
| 69 | + > * { | |
| 70 | + box-sizing: border-box; | |
| 71 | + padding: 24px; | |
| 72 | + border-block-end: 1px solid var(--cs-color-border); | |
| 73 | + } | |
| 74 | + | |
| 75 | + > :last-child { | |
| 76 | + border-block-end: 0; | |
| 77 | + } | |
| 78 | + | |
| 79 | + .inline-form-field { | |
| 80 | + display: flex; | |
| 81 | + flex-flow: row wrap; | |
| 82 | + justify-content: space-between; | |
| 83 | + align-items: center; | |
| 84 | + gap: 5px; | |
| 85 | + } | |
| 86 | + | |
| 87 | + .block-form-field { | |
| 88 | + display: flex; | |
| 89 | + flex-flow: column; | |
| 90 | + gap: 4px; | |
| 91 | + } | |
| 92 | + } | |
| 93 | + | |
| 94 | + label { | |
| 95 | + font-size: 13px; | |
| 96 | + font-weight: 600; | |
| 97 | + } | |
| 98 | + | |
| 99 | + .activation-switch-container { | |
| 100 | + label, | |
| 101 | + .status-text { | |
| 102 | + font-size: 16px; | |
| 103 | + line-height: 24px; | |
| 104 | + } | |
| 105 | + } | |
| 106 | + | |
| 107 | + .snippet-editor-sidebar-settings { | |
| 108 | + display: flex; | |
| 109 | + flex-flow: column; | |
| 110 | + gap: 24px; | |
| 111 | + | |
| 112 | + .conditions-editor-open { | |
| 113 | + gap: 16px; | |
| 114 | + | |
| 115 | + .conditions-editor-header { | |
| 116 | + margin-block-end: 0; | |
| 117 | + | |
| 118 | + strong { | |
| 119 | + font-size: 16px; | |
| 120 | + line-height: 24px; | |
| 121 | + } | |
| 122 | + } | |
| 123 | + } | |
| 124 | + | |
| 125 | + label { | |
| 126 | + font-size: 16px; | |
| 127 | + line-height: 24px; | |
| 128 | + } | |
| 129 | + | |
| 130 | + .code-snippets-select-location { | |
| 131 | + inline-size: 100%; | |
| 132 | + } | |
| 133 | + } | |
| 134 | + | |
| 135 | + .inline-form-field.row-actions { | |
| 136 | + display: grid; | |
| 137 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 138 | + align-items: stretch; | |
| 139 | + gap: 12px; | |
| 140 | + | |
| 141 | + .snippet-export-buttons { | |
| 142 | + display: contents; | |
| 143 | + } | |
| 144 | + | |
| 145 | + .snippet-lock-control { | |
| 146 | + display: flex; | |
| 147 | + min-inline-size: 0; | |
| 148 | + | |
| 149 | + > .snippet-lock-control { | |
| 150 | + inline-size: 100%; | |
| 151 | + display: flex; | |
| 152 | + } | |
| 153 | + } | |
| 154 | + | |
| 42 | 155 | .button { |
| 43 | - block-size: auto; | |
| 44 | - min-block-size: theme.$control-height; | |
| 45 | - padding-block: 0; | |
| 46 | - padding-inline: 10px; | |
| 47 | - border: 0; | |
| 48 | - border-radius: 0; | |
| 49 | - background: none; | |
| 156 | + block-size: 48px; | |
| 157 | + min-block-size: 48px; | |
| 158 | + inline-size: 100%; | |
| 159 | + min-inline-size: 0; | |
| 160 | + padding: 0 12px; | |
| 161 | + border: 1px solid var(--cs-color-accent); | |
| 162 | + border-radius: var(--cs-control-radius); | |
| 163 | + background: transparent; | |
| 50 | 164 | box-shadow: none; |
| 165 | + color: var(--cs-color-accent); | |
| 51 | 166 | font-weight: 400; |
| 167 | + display: inline-flex; | |
| 168 | + justify-content: center; | |
| 169 | + align-items: center; | |
| 170 | + gap: 8px; | |
| 52 | 171 | |
| 172 | + .dashicons { | |
| 173 | + block-size: 20px; | |
| 174 | + inline-size: 20px; | |
| 175 | + color: inherit; | |
| 176 | + font-size: 20px; | |
| 177 | + line-height: 1; | |
| 178 | + vertical-align: middle; | |
| 179 | + } | |
| 180 | + | |
| 53 | 181 | &:hover:not(:disabled), |
| 54 | - &:focus:not(:disabled) { | |
| 55 | - background: none; | |
| 56 | - border: 0; | |
| 182 | + &:focus:not(:disabled), | |
| 183 | + &:active:not(:disabled) { | |
| 184 | + background: #f6f7f7; | |
| 185 | + border-color: var(--cs-color-accent); | |
| 57 | 186 | box-shadow: none; |
| 187 | + color: var(--cs-color-accent-hover); | |
| 58 | 188 | } |
| 59 | 189 | } |
| 60 | 190 | |
| 61 | - // Nested under `.row-actions` so the dark-red trash colour outranks the generic | |
| 62 | - // `.button` accent text colour from the wp-admin compatibility layer. | |
| 63 | 191 | .delete-button { |
| 192 | + border-color: #cc1818; | |
| 64 | 193 | color: #cc1818; |
| 65 | 194 | |
| 66 | 195 | &:disabled { |
| 67 | - color: #a7aaad; | |
| 196 | + border-color: #a7aaad; | |
| 197 | + color: var(--cs-color-text-disabled); | |
| 68 | 198 | cursor: not-allowed; |
| 69 | 199 | } |
| 70 | 200 | |
| 71 | - &:hover:not(:disabled) { | |
| 201 | + &:hover:not(:disabled), | |
| 202 | + &:focus:not(:disabled), | |
| 203 | + &:active:not(:disabled) { | |
| 204 | + border-color: #9e1313; | |
| 72 | 205 | color: #9e1313; |
| 73 | 206 | } |
| 74 | - | |
| 75 | - &:focus:not(:disabled) { | |
| 76 | - color: #710d0d; | |
| 77 | - } | |
| 78 | 207 | } |
| 79 | 208 | } |
| 80 | 209 | |
| 81 | 210 | .help-tooltip { |
| @@ -82,52 +211,10 @@ | ||
| 82 | 211 | margin-block: 0; |
| 83 | 212 | margin-inline: 5px auto; |
| 84 | 213 | } |
| 85 | 214 | |
| 86 | - .box { | |
| 87 | - background-color: #fff; | |
| 88 | - border: 1px solid #ccc; | |
| 89 | - border-radius: 4px; | |
| 90 | - padding: 1.5em; | |
| 91 | - display: flex; | |
| 92 | - flex-flow: column; | |
| 93 | - gap: 1em; | |
| 94 | - | |
| 95 | - .inline-form-field { | |
| 96 | - display: flex; | |
| 97 | - flex-flow: row wrap; | |
| 98 | - justify-content: space-between; | |
| 99 | - align-items: center; | |
| 100 | - gap: 5px; | |
| 101 | - | |
| 102 | - &.lock-control-container { | |
| 103 | - border-block-start: 1px solid #eee; | |
| 104 | - padding-block-start: 1em; | |
| 105 | - margin-block-start: 0.5em; | |
| 106 | - | |
| 107 | - .description { | |
| 108 | - flex-basis: 100%; | |
| 109 | - margin-block-start: 4px; | |
| 110 | - color: #646970; | |
| 111 | - font-style: italic; | |
| 112 | - } | |
| 113 | - } | |
| 114 | - } | |
| 115 | - | |
| 116 | - .block-form-field { | |
| 117 | - display: flex; | |
| 118 | - flex-flow: column; | |
| 119 | - gap: 4px; | |
| 120 | - | |
| 121 | - } | |
| 122 | - } | |
| 123 | - | |
| 124 | - label { | |
| 125 | - font-weight: 600; | |
| 126 | - } | |
| 127 | - | |
| 128 | 215 | .beta-badge { |
| 129 | - color: theme.$accent; | |
| 216 | + color: var(--cs-color-accent); | |
| 130 | 217 | border: 1px solid currentcolor; |
| 131 | 218 | margin-inline-start: auto; |
| 132 | 219 | } |
| 133 | 220 | |
| @@ -148,9 +235,9 @@ | ||
| 148 | 235 | padding-block-start: 0; |
| 149 | 236 | } |
| 150 | 237 | |
| 151 | 238 | .shortcode-tag-wrapper { |
| 152 | - background: #fff; | |
| 239 | + background: var(--cs-color-surface); | |
| 153 | 240 | min-block-size: 54px; |
| 154 | 241 | display: flex; |
| 155 | 242 | align-items: center; |
| 156 | 243 | justify-content: space-between; |
| @@ -160,29 +247,6 @@ | ||
| 160 | 247 | code { |
| 161 | 248 | background: transparent; |
| 162 | 249 | padding-inline: 0.5em; |
| 163 | 250 | text-indent: -0.5em; |
| 164 | - } | |
| 165 | -} | |
| 166 | - | |
| 167 | -.code-snippets-copy-text.button { | |
| 168 | - display: flex; | |
| 169 | - align-items: center; | |
| 170 | - gap: 3px; | |
| 171 | - | |
| 172 | - .dashicons { | |
| 173 | - block-size: 18px; | |
| 174 | - inline-size: 18px; | |
| 175 | - font-size: 18px; | |
| 176 | - } | |
| 177 | - | |
| 178 | - .spinner-wrapper { | |
| 179 | - block-size: 18px; | |
| 180 | - inline-size: 18px; | |
| 181 | - display: flex; | |
| 182 | - align-items: center; | |
| 183 | - } | |
| 184 | - | |
| 185 | - .components-spinner { | |
| 186 | - block-size: 12px; | |
| 187 | 251 | } |
| 188 | 252 | } |
