| @@ -1,67 +1,88 @@ | ||
| 1 | 1 | @use '../common/theme'; |
| 2 | 2 | |
| 3 | -.code-snippets-modal { | |
| 4 | - p h4 { | |
| 5 | - margin-block-start: 0; | |
| 3 | +.snippet-priority { | |
| 4 | + .priority-input-tooltip { | |
| 5 | + margin-inline-end: auto; | |
| 6 | 6 | } |
| 7 | + | |
| 8 | + input { | |
| 9 | + inline-size: 4em; | |
| 10 | + } | |
| 7 | 11 | } |
| 8 | 12 | |
| 9 | -.snippet-editor-sidebar { | |
| 10 | - .button-large { | |
| 11 | - block-size: 48px; | |
| 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; | |
| 12 | 22 | } |
| 13 | 23 | |
| 14 | - .row-actions { | |
| 24 | + .spinner-wrapper { | |
| 25 | + block-size: 18px; | |
| 26 | + inline-size: 18px; | |
| 15 | 27 | display: flex; |
| 28 | + align-items: center; | |
| 29 | + } | |
| 16 | 30 | |
| 17 | - .button { | |
| 18 | - background: none; | |
| 19 | - border: none; | |
| 20 | - } | |
| 31 | + .components-spinner { | |
| 32 | + block-size: 12px; | |
| 21 | 33 | } |
| 34 | +} | |
| 22 | 35 | |
| 23 | - .delete-button { | |
| 24 | - color: #cc1818; | |
| 36 | +.activation-switch-container { | |
| 37 | + inline-size: 100%; | |
| 38 | + display: flex; | |
| 39 | + flex-flow: row; | |
| 40 | + gap: 5px; | |
| 41 | + justify-content: center; | |
| 42 | + align-items: center; | |
| 25 | 43 | |
| 26 | - &:hover { | |
| 27 | - color: #9e1313; | |
| 28 | - } | |
| 44 | + label { | |
| 45 | + font-size: 13px; | |
| 46 | + font-weight: 600; | |
| 47 | + } | |
| 29 | 48 | |
| 30 | - &:focus { | |
| 31 | - color: #710d0d; | |
| 32 | - border-color: #710d0d; | |
| 33 | - } | |
| 49 | + span:first-of-type { | |
| 50 | + margin-inline-start: auto; | |
| 34 | 51 | } |
| 52 | +} | |
| 35 | 53 | |
| 36 | - .help-tooltip { | |
| 37 | - margin-block: 0; | |
| 38 | - margin-inline: 5px auto; | |
| 54 | +.snippet-editor-sidebar { | |
| 55 | + .button-large { | |
| 56 | + block-size: 48px; | |
| 39 | 57 | } |
| 40 | 58 | |
| 41 | 59 | .box { |
| 42 | - background-color: #fff; | |
| 43 | - border: 1px solid #ccc; | |
| 44 | - border-radius: 4px; | |
| 45 | - padding: 1.5em; | |
| 60 | + background-color: var(--cs-color-surface); | |
| 61 | + border: 1px solid var(--cs-color-border); | |
| 62 | + border-radius: 5px; | |
| 63 | + padding: 0; | |
| 46 | 64 | display: flex; |
| 47 | 65 | flex-flow: column; |
| 48 | - gap: 1em; | |
| 66 | + gap: 0; | |
| 67 | + overflow: hidden; | |
| 49 | 68 | |
| 50 | - h4 { | |
| 51 | - margin-block: 0.5em; | |
| 52 | - margin-inline: 0; | |
| 69 | + > * { | |
| 70 | + box-sizing: border-box; | |
| 71 | + padding: 24px; | |
| 72 | + border-block-end: 1px solid var(--cs-color-border); | |
| 53 | 73 | } |
| 54 | 74 | |
| 75 | + > :last-child { | |
| 76 | + border-block-end: 0; | |
| 77 | + } | |
| 78 | + | |
| 55 | 79 | .inline-form-field { |
| 56 | 80 | display: flex; |
| 57 | 81 | flex-flow: row wrap; |
| 82 | + justify-content: space-between; | |
| 58 | 83 | align-items: center; |
| 59 | 84 | gap: 5px; |
| 60 | - | |
| 61 | - > :last-child { | |
| 62 | - margin-inline-start: auto; | |
| 63 | - } | |
| 64 | 85 | } |
| 65 | 86 | |
| 66 | 87 | .block-form-field { |
| 67 | 88 | display: flex; |
| @@ -66,26 +87,136 @@ | ||
| 66 | 87 | .block-form-field { |
| 67 | 88 | display: flex; |
| 68 | 89 | flex-flow: column; |
| 69 | 90 | gap: 4px; |
| 91 | + } | |
| 92 | + } | |
| 70 | 93 | |
| 71 | - h4 { | |
| 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 { | |
| 72 | 116 | margin-block-end: 0; |
| 117 | + | |
| 118 | + strong { | |
| 119 | + font-size: 16px; | |
| 120 | + line-height: 24px; | |
| 121 | + } | |
| 73 | 122 | } |
| 74 | 123 | } |
| 124 | + | |
| 125 | + label { | |
| 126 | + font-size: 16px; | |
| 127 | + line-height: 24px; | |
| 128 | + } | |
| 129 | + | |
| 130 | + .code-snippets-select-location { | |
| 131 | + inline-size: 100%; | |
| 132 | + } | |
| 75 | 133 | } |
| 76 | 134 | |
| 77 | - h4 .badge { | |
| 78 | - float: inline-end; | |
| 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; | |
| 79 | 140 | |
| 80 | - + .badge { | |
| 81 | - margin-inline-end: 5px; | |
| 141 | + .snippet-export-buttons { | |
| 142 | + display: contents; | |
| 82 | 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 | + | |
| 155 | + .button { | |
| 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; | |
| 164 | + box-shadow: none; | |
| 165 | + color: var(--cs-color-accent); | |
| 166 | + font-weight: 400; | |
| 167 | + display: inline-flex; | |
| 168 | + justify-content: center; | |
| 169 | + align-items: center; | |
| 170 | + gap: 8px; | |
| 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 | + | |
| 181 | + &:hover:not(:disabled), | |
| 182 | + &:focus:not(:disabled), | |
| 183 | + &:active:not(:disabled) { | |
| 184 | + background: #f6f7f7; | |
| 185 | + border-color: var(--cs-color-accent); | |
| 186 | + box-shadow: none; | |
| 187 | + color: var(--cs-color-accent-hover); | |
| 188 | + } | |
| 189 | + } | |
| 190 | + | |
| 191 | + .delete-button { | |
| 192 | + border-color: #cc1818; | |
| 193 | + color: #cc1818; | |
| 194 | + | |
| 195 | + &:disabled { | |
| 196 | + border-color: #a7aaad; | |
| 197 | + color: var(--cs-color-text-disabled); | |
| 198 | + cursor: not-allowed; | |
| 199 | + } | |
| 200 | + | |
| 201 | + &:hover:not(:disabled), | |
| 202 | + &:focus:not(:disabled), | |
| 203 | + &:active:not(:disabled) { | |
| 204 | + border-color: #9e1313; | |
| 205 | + color: #9e1313; | |
| 206 | + } | |
| 207 | + } | |
| 83 | 208 | } |
| 84 | 209 | |
| 210 | + .help-tooltip { | |
| 211 | + margin-block: 0; | |
| 212 | + margin-inline: 5px auto; | |
| 213 | + } | |
| 214 | + | |
| 85 | 215 | .beta-badge { |
| 86 | - color: theme.$accent; | |
| 216 | + color: var(--cs-color-accent); | |
| 87 | 217 | border: 1px solid currentcolor; |
| 218 | + margin-inline-start: auto; | |
| 88 | 219 | } |
| 89 | 220 | |
| 90 | 221 | .components-form-token-field { |
| 91 | 222 | inline-size: 100%; |
| @@ -95,12 +226,8 @@ | ||
| 95 | 226 | margin-inline-start: auto; |
| 96 | 227 | } |
| 97 | 228 | } |
| 98 | 229 | |
| 99 | -.snippet-priority input { | |
| 100 | - inline-size: 4em; | |
| 101 | -} | |
| 102 | - | |
| 103 | 230 | p.submit { |
| 104 | 231 | display: flex; |
| 105 | 232 | flex-flow: column; |
| 106 | 233 | gap: 8px; |
| @@ -107,17 +234,10 @@ | ||
| 107 | 234 | margin-block-start: 17px; |
| 108 | 235 | padding-block-start: 0; |
| 109 | 236 | } |
| 110 | 237 | |
| 111 | -.activation-switch-container label { | |
| 112 | - display: flex; | |
| 113 | - flex-flow: row; | |
| 114 | - gap: 5px; | |
| 115 | - justify-content: center; | |
| 116 | -} | |
| 117 | - | |
| 118 | 238 | .shortcode-tag-wrapper { |
| 119 | - background: #fff; | |
| 239 | + background: var(--cs-color-surface); | |
| 120 | 240 | min-block-size: 54px; |
| 121 | 241 | display: flex; |
| 122 | 242 | align-items: center; |
| 123 | 243 | justify-content: space-between; |
| @@ -127,29 +247,6 @@ | ||
| 127 | 247 | code { |
| 128 | 248 | background: transparent; |
| 129 | 249 | padding-inline: 0.5em; |
| 130 | 250 | text-indent: -0.5em; |
| 131 | - } | |
| 132 | -} | |
| 133 | - | |
| 134 | -.code-snippets-copy-text.button { | |
| 135 | - display: flex; | |
| 136 | - align-items: center; | |
| 137 | - gap: 3px; | |
| 138 | - | |
| 139 | - .dashicons { | |
| 140 | - block-size: 18px; | |
| 141 | - inline-size: 18px; | |
| 142 | - font-size: 18px; | |
| 143 | - } | |
| 144 | - | |
| 145 | - .spinner-wrapper { | |
| 146 | - block-size: 18px; | |
| 147 | - inline-size: 18px; | |
| 148 | - display: flex; | |
| 149 | - align-items: center; | |
| 150 | - } | |
| 151 | - | |
| 152 | - .components-spinner { | |
| 153 | - block-size: 12px; | |
| 154 | 251 | } |
| 155 | 252 | } |
