| @@ -1,4 +1,19 @@ | ||
| 1 | +/* WPBot design tokens — change colors here to theme the whole admin UI */ | |
| 2 | +:root { | |
| 3 | + --woobot-primary: #5B4E96; | |
| 4 | + --woobot-primary-color: #5B4E96; | |
| 5 | + --woobot-primary-dark: #463a7a; | |
| 6 | + --woobot-primary-soft: #f3f1fa; | |
| 7 | + --woobot-primary-border: #e4e0f2; | |
| 8 | + --woobot-surface: #ffffff; | |
| 9 | + --woobot-page-bg: #F5F7FD; | |
| 10 | + --woobot-text: #2d2a3a; | |
| 11 | + --woobot-muted: #6b6680; | |
| 12 | + --woobot-danger: #e25563; | |
| 13 | + --woobot-nav-muted: #988FBD; | |
| 14 | + --woobot-primary-rgb: 91, 78, 150; | |
| 15 | +} | |
| 1 | 16 | .qc-review-notice{ |
| 2 | 17 | padding: 15px 15px 15px 0; |
| 3 | 18 | background-color: #222; |
| 4 | 19 | border-radius: 5px; |
| @@ -117,9 +132,9 @@ | ||
| 117 | 132 | box-shadow: 0px 4px 6px 1px #ebebeb !important; |
| 118 | 133 | width: 98%; |
| 119 | 134 | } |
| 120 | 135 | .qc-review-ul li a { |
| 121 | - color: #5B4E96; | |
| 136 | + color: var(--woobot-primary); | |
| 122 | 137 | border: 1px solid #eee; |
| 123 | 138 | padding: 5px 15px; |
| 124 | 139 | border-radius: 4px; |
| 125 | 140 | font-weight: 600; |
| @@ -127,10 +142,10 @@ | ||
| 127 | 142 | display: flex; |
| 128 | 143 | } |
| 129 | 144 | .qc-review-ul li a:hover { |
| 130 | 145 | color: #fff; |
| 131 | - border: 1px solid #5B4E96 !important; | |
| 132 | - background: #5B4E96 !important; | |
| 146 | + border: 1px solid var(--woobot-primary) !important; | |
| 147 | + background: var(--woobot-primary) !important; | |
| 133 | 148 | padding: 5px 15px; |
| 134 | 149 | border-radius: 4px; |
| 135 | 150 | font-weight: 600; |
| 136 | 151 | font-size: 13px; |
| @@ -146,9 +161,9 @@ | ||
| 146 | 161 | margin: 0; |
| 147 | 162 | padding: 0; |
| 148 | 163 | } |
| 149 | 164 | ul.qc-review-ul { |
| 150 | - margin: 4px 0 0 0; | |
| 165 | + margin: 8px 0 0 0; | |
| 151 | 166 | } |
| 152 | 167 | .qc-review-ul li a span { |
| 153 | 168 | font-size: 14px; |
| 154 | 169 | margin: 0; |
| @@ -191,5 +206,60 @@ | ||
| 191 | 206 | .notice.is-dismissible.qcbot-feedback .wpbot-notice-content { |
| 192 | 207 | padding: 10px 0px; |
| 193 | 208 | display: flex; |
| 194 | 209 | align-items: center; |
| 210 | +} | |
| 211 | + | |
| 212 | +/* AI Review Generator Styles */ | |
| 213 | +.qc-ai-review-wrapper { | |
| 214 | + position: relative; | |
| 215 | + transition: all 0.3s ease-in-out; | |
| 216 | +} | |
| 217 | +.qc-ai-review-wrapper.loading::before { | |
| 218 | + content: ''; | |
| 219 | + position: absolute; | |
| 220 | + top: 0; | |
| 221 | + left: 0; | |
| 222 | + right: 0; | |
| 223 | + bottom: 0; | |
| 224 | + background: rgba(255, 255, 255, 0.7); | |
| 225 | + z-index: 10; | |
| 226 | + border-radius: 8px; | |
| 227 | +} | |
| 228 | +.qc-ai-review-wrapper.loading::after { | |
| 229 | + content: ''; | |
| 230 | + position: absolute; | |
| 231 | + top: 50%; | |
| 232 | + left: 50%; | |
| 233 | + width: 24px; | |
| 234 | + height: 24px; | |
| 235 | + margin: -12px 0 0 -12px; | |
| 236 | + border: 3px solid var(--woobot-primary); | |
| 237 | + border-top: 3px solid transparent; | |
| 238 | + border-radius: 50%; | |
| 239 | + animation: qc-ai-spinner 0.8s linear infinite; | |
| 240 | + z-index: 11; | |
| 241 | +} | |
| 242 | +@keyframes qc-ai-spinner { | |
| 243 | + 0% { transform: rotate(0deg); } | |
| 244 | + 100% { transform: rotate(360deg); } | |
| 245 | +} | |
| 246 | +#qc-write-review-ai { | |
| 247 | + transition: background-color 0.2s ease, border-color 0.2s ease; | |
| 248 | +} | |
| 249 | +#qc-write-review-ai:hover { | |
| 250 | + background-color: #463c77 !important; | |
| 251 | + border-color: #463c77 !important; | |
| 252 | + color: #fff !important; | |
| 253 | +} | |
| 254 | +#qc-copy-review-btn.copied { | |
| 255 | + background: #46b450 !important; | |
| 256 | + border-color: #46b450 !important; | |
| 257 | + color: #fff !important; | |
| 258 | +} | |
| 259 | +#qc-copy-review-btn.copied span { | |
| 260 | + color: #fff !important; | |
| 261 | +} | |
| 262 | + | |
| 263 | +.qc-ai-review-actions span.dashicons.dashicons-clipboard, .qc-ai-review-actions span.dashicons.dashicons-external { | |
| 264 | + line-height: 22px !important; | |
| 195 | 265 | } |
