| @@ -1,72 +1,195 @@ | ||
| 1 | 1 | #dw-wpmcs-survey-form-wrap { |
| 2 | + --wpmcs-paper: #ffffff; | |
| 3 | + --wpmcs-glass: rgba(255, 255, 255, 0.68); | |
| 4 | + --wpmcs-glass-border: rgba(255, 255, 255, 0.55); | |
| 5 | + --wpmcs-ink: #1d2327; | |
| 6 | + --wpmcs-muted: rgba(0, 0, 0, 0.6); | |
| 7 | + --wpmcs-line: #e7e7e7; | |
| 8 | + --wpmcs-accent: #3164e4; | |
| 9 | + --wpmcs-accent-hover: #2954c8; | |
| 10 | + --wpmcs-accent-soft: rgba(49, 100, 228, 0.08); | |
| 11 | + --wpmcs-danger: #c00000; | |
| 12 | + --wpmcs-danger-soft: rgba(192, 0, 0, 0.08); | |
| 13 | + | |
| 2 | 14 | display: none; |
| 3 | 15 | position: fixed; |
| 4 | - top: 0; | |
| 5 | - bottom: 0; | |
| 6 | - left: 0; | |
| 7 | - right: 0; | |
| 8 | - z-index: 10000; | |
| 9 | - background: rgba(0, 0, 0, 0.6); | |
| 16 | + inset: 0; | |
| 17 | + z-index: 100000; | |
| 18 | + background: rgba(12, 16, 24, 0.4); | |
| 19 | + backdrop-filter: blur(3px); | |
| 20 | + animation: dwWpmcsFadeIn 0.16s ease-out; | |
| 21 | + overflow-y: auto; | |
| 22 | + padding: 40px 16px; | |
| 10 | 23 | } |
| 11 | 24 | |
| 25 | +@keyframes dwWpmcsFadeIn { | |
| 26 | + from { opacity: 0; } | |
| 27 | + to { opacity: 1; } | |
| 28 | +} | |
| 29 | + | |
| 30 | +@keyframes dwWpmcsPopIn { | |
| 31 | + from { opacity: 0; transform: scale(0.96); } | |
| 32 | + to { opacity: 1; transform: scale(1); } | |
| 33 | +} | |
| 34 | + | |
| 12 | 35 | #dw-wpmcs-survey-form { |
| 13 | 36 | box-sizing: border-box; |
| 14 | - margin-top: 15px; | |
| 15 | - position: fixed; | |
| 16 | - text-align: left; | |
| 17 | - width: calc(100% - 30px); | |
| 18 | - max-width: 600px; | |
| 19 | - z-index: 100; | |
| 20 | - top: 50%; | |
| 21 | - left: 50%; | |
| 22 | - transform: translate(-50%, -50%); | |
| 23 | - background: #ffffff; | |
| 24 | - padding: 30px; | |
| 25 | - border-radius: 8px; | |
| 26 | - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| 37 | + width: 100%; | |
| 38 | + max-width: 560px; | |
| 39 | + margin: 0 auto; | |
| 40 | + background: var(--wpmcs-glass); | |
| 41 | + backdrop-filter: blur(24px) saturate(180%); | |
| 42 | + -webkit-backdrop-filter: blur(24px) saturate(180%); | |
| 43 | + border: 1px solid var(--wpmcs-glass-border); | |
| 44 | + padding: 28px; | |
| 45 | + border-radius: 14px; | |
| 46 | + box-shadow: | |
| 47 | + 0 24px 60px rgba(12, 16, 24, 0.22), | |
| 48 | + 0 2px 8px rgba(12, 16, 24, 0.06), | |
| 49 | + inset 0 1px 0 rgba(255, 255, 255, 0.6); | |
| 50 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| 27 | 51 | font-size: 14px; |
| 28 | - line-height: 24px; | |
| 52 | + line-height: 1.55; | |
| 53 | + color: var(--wpmcs-ink); | |
| 54 | + animation: dwWpmcsPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); | |
| 29 | 55 | } |
| 30 | 56 | |
| 31 | 57 | #dw-wpmcs-survey-form h2 { |
| 32 | - font-size: 18px; | |
| 33 | - margin-bottom: 10px; | |
| 34 | - color: #333333; | |
| 58 | + font-size: 19px; | |
| 59 | + font-weight: 700; | |
| 60 | + margin: 0 0 8px; | |
| 61 | + letter-spacing: -0.01em; | |
| 62 | + text-wrap: balance; | |
| 35 | 63 | } |
| 36 | 64 | |
| 37 | -#dw-wpmcs-survey-form p { | |
| 65 | +#dw-wpmcs-survey-form > p { | |
| 38 | 66 | font-size: 14px; |
| 39 | - line-height: 1.5; | |
| 40 | - margin-bottom: 20px; | |
| 67 | + color: var(--wpmcs-muted); | |
| 68 | + margin: 0 0 20px; | |
| 41 | 69 | } |
| 42 | 70 | |
| 71 | +/* macOS System Settings-style grouped list: one rounded container, | |
| 72 | + hairline dividers between rows, no per-row card/border */ | |
| 73 | +#dw-wpmcs-survey-form .dw-wpmcs-reason { | |
| 74 | + display: flex; | |
| 75 | + flex-direction: column; | |
| 76 | + margin-bottom: 4px; | |
| 77 | + background: rgba(255, 255, 255, 0.4); | |
| 78 | + border: 1px solid rgba(255, 255, 255, 0.6); | |
| 79 | + border-radius: 10px; | |
| 80 | + overflow: hidden; | |
| 81 | +} | |
| 82 | + | |
| 43 | 83 | #dw-wpmcs-survey-form .dw-wpmcs-reason label { |
| 44 | - display: block; | |
| 45 | - margin-bottom: 10px; | |
| 46 | - font-size: 14px; | |
| 84 | + display: flex; | |
| 85 | + align-items: center; | |
| 86 | + gap: 10px; | |
| 87 | + padding: 10px 14px; | |
| 88 | + margin-bottom: 0; | |
| 89 | + border-bottom: 1px solid var(--wpmcs-line); | |
| 90 | + font-size: 13.5px; | |
| 47 | 91 | cursor: pointer; |
| 92 | + transition: background-color 0.1s ease; | |
| 48 | 93 | } |
| 49 | 94 | |
| 50 | -#dw-wpmcs-survey-form .dw-wpmcs-reason input { | |
| 51 | - margin-right: 10px; | |
| 95 | +#dw-wpmcs-survey-form .dw-wpmcs-reason label:last-child { | |
| 96 | + border-bottom: none; | |
| 52 | 97 | } |
| 53 | 98 | |
| 99 | +#dw-wpmcs-survey-form .dw-wpmcs-reason label:hover { | |
| 100 | + background: rgba(49, 100, 228, 0.06); | |
| 101 | +} | |
| 102 | + | |
| 103 | +#dw-wpmcs-survey-form .dw-wpmcs-reason label:has(input:checked) { | |
| 104 | + background: rgba(49, 100, 228, 0.09); | |
| 105 | + font-weight: 590; | |
| 106 | +} | |
| 107 | + | |
| 108 | +#dw-wpmcs-survey-form .dw-wpmcs-reason input[type="radio"] { | |
| 109 | + accent-color: var(--wpmcs-accent); | |
| 110 | + width: 15px; | |
| 111 | + height: 15px; | |
| 112 | + margin: 0; | |
| 113 | + flex-shrink: 0; | |
| 114 | +} | |
| 115 | + | |
| 54 | 116 | #dw-wpmcs-survey-form .dw-wpmcs-comments { |
| 55 | - margin-top: 15px; | |
| 117 | + margin-top: 14px; | |
| 56 | 118 | } |
| 57 | 119 | |
| 58 | 120 | #dw-wpmcs-survey-form .dw-wpmcs-comments textarea { |
| 59 | 121 | width: 100%; |
| 60 | - padding: 10px; | |
| 61 | - border: 1px solid #ddd; | |
| 62 | - border-radius: 4px; | |
| 63 | - font-size: 14px; | |
| 122 | + padding: 11px 12px; | |
| 123 | + border: 1px solid var(--wpmcs-line); | |
| 124 | + border-radius: 10px; | |
| 125 | + font-size: 13.5px; | |
| 126 | + font-family: inherit; | |
| 127 | + color: var(--wpmcs-ink); | |
| 128 | + background: var(--wpmcs-paper); | |
| 64 | 129 | resize: none; |
| 130 | + transition: border-color 0.12s ease, box-shadow 0.12s ease; | |
| 65 | 131 | } |
| 66 | 132 | |
| 133 | +#dw-wpmcs-survey-form .dw-wpmcs-comments textarea:focus { | |
| 134 | + outline: none; | |
| 135 | + border-color: var(--wpmcs-accent); | |
| 136 | + box-shadow: 0 0 0 3px var(--wpmcs-accent-soft); | |
| 137 | +} | |
| 138 | + | |
| 139 | +#dw-wpmcs-survey-form .dw-wpmcs-comments textarea.has-error { | |
| 140 | + border-color: var(--wpmcs-danger); | |
| 141 | +} | |
| 142 | + | |
| 143 | +#dw-wpmcs-survey-form .dw-wpmcs-comments textarea.has-error:focus { | |
| 144 | + box-shadow: 0 0 0 3px var(--wpmcs-danger-soft); | |
| 145 | +} | |
| 146 | + | |
| 147 | +#dw-wpmcs-survey-form .dw-wpmcs-comments p { | |
| 148 | + font-size: 12.5px; | |
| 149 | + color: var(--wpmcs-muted); | |
| 150 | + margin: 8px 0 0; | |
| 151 | +} | |
| 152 | + | |
| 153 | +#dw-wpmcs-survey-form .dw-wpmcs-comments p a { | |
| 154 | + color: var(--wpmcs-accent); | |
| 155 | +} | |
| 156 | + | |
| 157 | +@keyframes dwWpmcsErrorIn { | |
| 158 | + from { opacity: 0; transform: translateY(-4px); } | |
| 159 | + to { opacity: 1; transform: translateY(0); } | |
| 160 | +} | |
| 161 | + | |
| 162 | +#dw-wpmcs-error { | |
| 163 | + display: none; | |
| 164 | + align-items: flex-start; | |
| 165 | + gap: 8px; | |
| 166 | + color: var(--wpmcs-danger); | |
| 167 | + background: var(--wpmcs-danger-soft); | |
| 168 | + font-size: 12.5px; | |
| 169 | + font-weight: 600; | |
| 170 | + line-height: 1.4; | |
| 171 | + padding: 10px 12px; | |
| 172 | + margin: 0; | |
| 173 | + border-radius: 8px; | |
| 174 | + border-left: 3px solid var(--wpmcs-danger); | |
| 175 | +} | |
| 176 | + | |
| 177 | +#dw-wpmcs-error.is-visible { | |
| 178 | + display: flex; | |
| 179 | + margin: 14px 0 0; | |
| 180 | + animation: dwWpmcsErrorIn 0.15s ease-out; | |
| 181 | +} | |
| 182 | + | |
| 183 | +#dw-wpmcs-error svg { | |
| 184 | + flex-shrink: 0; | |
| 185 | + width: 15px; | |
| 186 | + height: 15px; | |
| 187 | + margin-top: 1px; | |
| 188 | +} | |
| 189 | + | |
| 67 | 190 | #dw-wpmcs-survey-form .dw-wpmcs-actions { |
| 68 | - margin-top: 20px; | |
| 191 | + margin-top: 22px; | |
| 69 | 192 | display: flex; |
| 70 | 193 | align-items: center; |
| 71 | 194 | justify-content: flex-end; |
| 72 | 195 | flex-wrap: wrap; |
| @@ -72,35 +195,71 @@ | ||
| 72 | 195 | flex-wrap: wrap; |
| 73 | 196 | gap: 10px; |
| 74 | 197 | } |
| 75 | 198 | |
| 199 | +/* macOS-style capsule push buttons */ | |
| 76 | 200 | .dw-button { |
| 77 | - display: inline-block; | |
| 78 | - padding: 10px 20px; | |
| 79 | - font-size: 14px; | |
| 80 | - font-weight: bold; | |
| 201 | + display: inline-flex; | |
| 202 | + align-items: center; | |
| 203 | + justify-content: center; | |
| 204 | + min-height: 30px; | |
| 205 | + padding: 6px 18px; | |
| 206 | + font-size: 13px; | |
| 207 | + font-weight: 590; | |
| 208 | + font-family: inherit; | |
| 81 | 209 | text-decoration: none; |
| 82 | - border: none; | |
| 83 | - border-radius: 4px; | |
| 210 | + border: 1px solid transparent; | |
| 211 | + border-radius: 999px; | |
| 84 | 212 | cursor: pointer; |
| 213 | + transition: transform 0.08s ease, box-shadow 0.12s ease, background-color 0.12s ease, filter 0.12s ease; | |
| 85 | 214 | } |
| 86 | 215 | |
| 216 | +.dw-button:active { | |
| 217 | + transform: scale(0.97); | |
| 218 | +} | |
| 219 | + | |
| 87 | 220 | .dw-primary { |
| 88 | - background-color: #007bff; | |
| 221 | + background: linear-gradient(180deg, color-mix(in srgb, var(--wpmcs-accent) 92%, white 8%), var(--wpmcs-accent)); | |
| 89 | 222 | color: #ffffff; |
| 223 | + box-shadow: 0 1px 1px rgba(12, 16, 24, 0.18), 0 0 0 0.5px rgba(12, 16, 24, 0.05); | |
| 90 | 224 | } |
| 91 | 225 | |
| 226 | +.dw-primary:hover { | |
| 227 | + filter: brightness(1.06); | |
| 228 | +} | |
| 229 | + | |
| 230 | +.dw-primary:disabled { | |
| 231 | + opacity: 0.5; | |
| 232 | + cursor: not-allowed; | |
| 233 | + filter: none; | |
| 234 | + box-shadow: none; | |
| 235 | +} | |
| 236 | + | |
| 92 | 237 | .dw-secondary { |
| 93 | - background-color: #f8f9fa; | |
| 94 | - color: #6c757d; | |
| 238 | + background-color: rgba(120, 120, 128, 0.14); | |
| 239 | + color: var(--wpmcs-ink); | |
| 95 | 240 | } |
| 96 | 241 | |
| 242 | +.dw-secondary:hover { | |
| 243 | + background-color: rgba(120, 120, 128, 0.22); | |
| 244 | +} | |
| 245 | + | |
| 97 | 246 | .dw-skip { |
| 98 | 247 | background: none; |
| 99 | - color: #6c757d; | |
| 100 | - font-weight: normal; | |
| 248 | + color: var(--wpmcs-muted); | |
| 249 | + font-weight: 500; | |
| 250 | + padding-left: 6px; | |
| 251 | + padding-right: 6px; | |
| 101 | 252 | } |
| 102 | 253 | |
| 103 | -#dw-wpmcs-error { | |
| 104 | - color: #dc3545; | |
| 105 | - font-size: 12px; | |
| 254 | +.dw-skip:hover { | |
| 255 | + color: var(--wpmcs-ink); | |
| 256 | + text-decoration: underline; | |
| 257 | +} | |
| 258 | + | |
| 259 | +@media (prefers-reduced-motion: reduce) { | |
| 260 | + #dw-wpmcs-survey-form-wrap, | |
| 261 | + #dw-wpmcs-survey-form, | |
| 262 | + #dw-wpmcs-error.is-visible { | |
| 263 | + animation: none; | |
| 264 | + } | |
| 106 | 265 | } |
