| @@ -84,9 +84,9 @@ | ||
| 84 | 84 | text-align: center; |
| 85 | 85 | } |
| 86 | 86 | |
| 87 | 87 | .forge12-plugin-content .box { |
| 88 | - background-color: #f8f9fa !important; | |
| 88 | + background-color: #f8f9fa; | |
| 89 | 89 | border-radius: 5px; |
| 90 | 90 | box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.05); |
| 91 | 91 | padding: 20px; |
| 92 | 92 | margin-bottom: 20px |
| @@ -111,43 +111,63 @@ | ||
| 111 | 111 | margin-top: 20px; |
| 112 | 112 | } |
| 113 | 113 | |
| 114 | 114 | /** |
| 115 | - * Popoup | |
| 115 | + * Popup | |
| 116 | 116 | */ |
| 117 | -.forge12-plugin-popup { | |
| 117 | +.forge12-plugin-popup-overlay { | |
| 118 | 118 | position: fixed; |
| 119 | - background-color: #f8f9fa; | |
| 120 | - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.05); | |
| 121 | - width: 470px; | |
| 122 | - left: calc(50% - 225px); | |
| 123 | - top: 150px; | |
| 119 | + inset: 0; | |
| 120 | + background: rgba(0, 0, 0, .5); | |
| 121 | + z-index: 100000; | |
| 124 | 122 | } |
| 125 | 123 | |
| 126 | -.forge12-plugin-popup .options { | |
| 127 | - margin-bottom: 10px; | |
| 128 | - margin-top: -10px; | |
| 129 | - font-size: 12px; | |
| 124 | +.forge12-plugin-popup { | |
| 125 | + position: fixed; | |
| 126 | + width: 680px; | |
| 127 | + top: 50%; | |
| 128 | + left: 50%; | |
| 129 | + transform: translate(-50%, -50%); | |
| 130 | + border-radius: 12px; | |
| 131 | + box-shadow: 0 8px 32px rgba(0, 0, 0, .18); | |
| 132 | + background: #fff; | |
| 133 | + z-index: 100001; | |
| 130 | 134 | } |
| 131 | 135 | |
| 132 | 136 | .forge12-plugin-popup-content { |
| 133 | - max-height: 600px; | |
| 134 | - overflow-y: scroll; | |
| 135 | - padding: 20px; | |
| 137 | + padding: 24px 28px; | |
| 138 | + max-height: 70vh; | |
| 139 | + overflow-y: auto; | |
| 136 | 140 | } |
| 137 | 141 | |
| 138 | 142 | .forge12-plugin-popup h2 { |
| 139 | 143 | margin-top: 0; |
| 144 | + font-size: 15px; | |
| 145 | + word-break: break-all; | |
| 146 | + padding-bottom: 16px; | |
| 147 | + border-bottom: 1px solid #e0e0e0; | |
| 148 | + margin-bottom: 16px; | |
| 140 | 149 | } |
| 141 | 150 | |
| 151 | +.forge12-plugin-popup .options { | |
| 152 | + margin: 0 0 16px; | |
| 153 | + display: flex; | |
| 154 | + gap: 8px; | |
| 155 | + font-size: 13px; | |
| 156 | +} | |
| 157 | + | |
| 142 | 158 | .forge12-plugin-popup table { |
| 143 | 159 | width: 100%; |
| 144 | 160 | border-collapse: collapse; |
| 161 | + border: 1px solid #e0e0e0; | |
| 162 | + border-radius: 6px; | |
| 163 | + overflow: hidden; | |
| 145 | 164 | } |
| 146 | 165 | |
| 147 | 166 | .forge12-plugin-popup table tr:first-child { |
| 148 | - background-color: #333 !important; | |
| 149 | - color: #fff; | |
| 167 | + background: #f6f7f7; | |
| 168 | + color: #1d2327; | |
| 169 | + font-weight: 600; | |
| 150 | 170 | } |
| 151 | 171 | |
| 152 | 172 | .forge12-plugin-popup table tr td:first-child { |
| 153 | 173 | min-width: 120px; |
| @@ -158,26 +178,146 @@ | ||
| 158 | 178 | word-break: break-all; |
| 159 | 179 | } |
| 160 | 180 | |
| 161 | 181 | .forge12-plugin-popup table tr:nth-child(odd) { |
| 162 | - background-color: rgba(0, 0, 0, 0.05); | |
| 182 | + background-color: rgba(0, 0, 0, .03); | |
| 163 | 183 | } |
| 164 | 184 | |
| 165 | 185 | .forge12-plugin-popup table td { |
| 166 | - padding: 10px; | |
| 186 | + padding: 10px 14px; | |
| 167 | 187 | } |
| 168 | 188 | |
| 189 | +.forge12-plugin-popup h3 { | |
| 190 | + margin: 20px 0 12px; | |
| 191 | + font-size: 14px; | |
| 192 | + font-weight: 600; | |
| 193 | +} | |
| 194 | + | |
| 169 | 195 | .forge12-plugin-popup .forge12-plugin-popup-close { |
| 170 | 196 | position: absolute; |
| 171 | - right: -15px; | |
| 172 | - top: -15px; | |
| 197 | + top: 16px; | |
| 198 | + right: 16px; | |
| 199 | + border: none; | |
| 200 | + background: none; | |
| 201 | + color: #646970; | |
| 202 | + cursor: pointer; | |
| 203 | + padding: 0; | |
| 204 | + line-height: 1; | |
| 205 | +} | |
| 206 | + | |
| 207 | +.forge12-plugin-popup .forge12-plugin-popup-close:hover { | |
| 208 | + color: #d63638; | |
| 209 | +} | |
| 210 | + | |
| 211 | +.forge12-plugin-popup .forge12-plugin-popup-close .dashicons { | |
| 212 | + font-size: 26px; | |
| 213 | + width: 26px; | |
| 214 | + height: 26px; | |
| 215 | +} | |
| 216 | + | |
| 217 | +.forge12-plugin-popup .doi-tooltip { | |
| 218 | + position: relative; | |
| 219 | + display: inline-block; | |
| 220 | + cursor: help; | |
| 221 | + margin-left: 4px; | |
| 222 | + vertical-align: middle; | |
| 223 | +} | |
| 224 | + | |
| 225 | +.forge12-plugin-popup .doi-tooltip .dashicons { | |
| 226 | + font-size: 16px; | |
| 227 | + width: 16px; | |
| 228 | + height: 16px; | |
| 229 | + color: #646970; | |
| 230 | + transition: color .2s; | |
| 231 | +} | |
| 232 | + | |
| 233 | +.forge12-plugin-popup .doi-tooltip:hover .dashicons { | |
| 234 | + color: #2271b1; | |
| 235 | +} | |
| 236 | + | |
| 237 | +.forge12-plugin-popup .doi-tooltip-text { | |
| 238 | + display: none; | |
| 239 | + position: fixed; | |
| 240 | + background: #1d2327; | |
| 241 | + color: #fff; | |
| 173 | 242 | padding: 8px 12px; |
| 174 | - cursor: pointer; | |
| 243 | + border-radius: 6px; | |
| 244 | + font-size: 12px; | |
| 245 | + line-height: 1.5; | |
| 246 | + width: 260px; | |
| 247 | + z-index: 100002; | |
| 248 | + box-shadow: 0 2px 8px rgba(0, 0, 0, .2); | |
| 249 | + pointer-events: none; | |
| 250 | +} | |
| 251 | + | |
| 252 | +.forge12-plugin-popup .doi-tooltip:hover .doi-tooltip-text { | |
| 253 | + display: block; | |
| 254 | +} | |
| 255 | + | |
| 256 | +.forge12-plugin-popup .doi-tooltip-text::after { | |
| 257 | + content: ''; | |
| 258 | + position: absolute; | |
| 259 | + top: 100%; | |
| 260 | + left: 50%; | |
| 261 | + transform: translateX(-50%); | |
| 262 | + border: 6px solid transparent; | |
| 263 | + border-top-color: #1d2327; | |
| 264 | +} | |
| 265 | + | |
| 266 | +/* Unscoped tooltip styles — used outside the popup (e.g. view-optin page) */ | |
| 267 | +.doi-tooltip { | |
| 268 | + position: relative; | |
| 269 | + display: inline-block; | |
| 270 | + cursor: help; | |
| 271 | + margin-left: 4px; | |
| 272 | + vertical-align: middle; | |
| 273 | +} | |
| 274 | + | |
| 275 | +.doi-tooltip .dashicons { | |
| 276 | + font-size: 16px; | |
| 277 | + width: 16px; | |
| 278 | + height: 16px; | |
| 279 | + color: #646970; | |
| 280 | + transition: color .2s; | |
| 281 | +} | |
| 282 | + | |
| 283 | +.doi-tooltip:hover .dashicons { | |
| 284 | + color: #2271b1; | |
| 285 | +} | |
| 286 | + | |
| 287 | +.doi-tooltip-text { | |
| 288 | + display: none; | |
| 289 | + position: absolute; | |
| 290 | + bottom: calc(100% + 8px); | |
| 291 | + left: 50%; | |
| 292 | + transform: translateX(-50%); | |
| 293 | + background: #1d2327; | |
| 175 | 294 | color: #fff; |
| 176 | - border-radius: 3px; | |
| 177 | - background: #333; | |
| 295 | + padding: 8px 12px; | |
| 296 | + border-radius: 6px; | |
| 297 | + font-size: 12px; | |
| 298 | + line-height: 1.5; | |
| 299 | + width: 260px; | |
| 300 | + z-index: 100002; | |
| 301 | + box-shadow: 0 2px 8px rgba(0, 0, 0, .2); | |
| 302 | + pointer-events: none; | |
| 303 | + white-space: normal; | |
| 178 | 304 | } |
| 179 | 305 | |
| 306 | +.doi-tooltip:hover .doi-tooltip-text { | |
| 307 | + display: block; | |
| 308 | +} | |
| 309 | + | |
| 310 | +.doi-tooltip-text::after { | |
| 311 | + content: ''; | |
| 312 | + position: absolute; | |
| 313 | + top: 100%; | |
| 314 | + left: 50%; | |
| 315 | + transform: translateX(-50%); | |
| 316 | + border: 6px solid transparent; | |
| 317 | + border-top-color: #1d2327; | |
| 318 | +} | |
| 319 | + | |
| 180 | 320 | /** |
| 181 | 321 | * Table design |
| 182 | 322 | */ |
| 183 | 323 | .forge12-plugin-content a { |
| @@ -185,11 +325,16 @@ | ||
| 185 | 325 | } |
| 186 | 326 | |
| 187 | 327 | .forge12-plugin-content table { |
| 188 | 328 | border-collapse: collapse; |
| 189 | - width: 100%; | |
| 329 | + width: auto; | |
| 190 | 330 | } |
| 191 | 331 | |
| 332 | +.doi-table { | |
| 333 | + width: 100% !important; | |
| 334 | + border-collapse: collapse; | |
| 335 | +} | |
| 336 | + | |
| 192 | 337 | .forge12-plugin-content table td, .forge12-plugin-content table th { |
| 193 | 338 | padding: 10px; |
| 194 | 339 | text-align: left; |
| 195 | 340 | word-break:break-all; |
| @@ -225,9 +370,9 @@ | ||
| 225 | 370 | margin-bottom: 30px; |
| 226 | 371 | } |
| 227 | 372 | |
| 228 | 373 | .forge12-license table { |
| 229 | - width: 100%; | |
| 374 | + width: auto; | |
| 230 | 375 | } |
| 231 | 376 | |
| 232 | 377 | .forge12-license table th { |
| 233 | 378 | background-color: #f0f0f0; |
| @@ -267,12 +412,28 @@ | ||
| 267 | 412 | margin-top: 30px; |
| 268 | 413 | box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.1); |
| 269 | 414 | } |
| 270 | 415 | |
| 416 | +.forge12-plugin-content .box.alert-success, | |
| 417 | +.alert-success { | |
| 418 | + background-color: #00ab6b; | |
| 419 | + padding: 20px; | |
| 420 | + border-radius: 5px; | |
| 421 | + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.05); | |
| 422 | + margin-bottom: 20px; | |
| 423 | + color: #fff; | |
| 424 | +} | |
| 425 | + | |
| 271 | 426 | .forge12-license #remove_license { |
| 272 | 427 | margin-top: 15px; |
| 273 | 428 | } |
| 274 | 429 | |
| 430 | +/* License page: use border instead of box-shadow for all content boxes */ | |
| 431 | +.forge12-plugin-content-main:has(.forge12-license) .box { | |
| 432 | + box-shadow: none; | |
| 433 | + border: 1px solid #e0e0e0; | |
| 434 | +} | |
| 435 | + | |
| 275 | 436 | /** |
| 276 | 437 | * Option design |
| 277 | 438 | */ |
| 278 | 439 | .forge12-plugin-content .option { |
| @@ -432,8 +593,20 @@ | ||
| 432 | 593 | /** |
| 433 | 594 | * Toggle |
| 434 | 595 | * requires toggle.js |
| 435 | 596 | */ |
| 597 | +.f12-checkbox-toggle { | |
| 598 | + display: flex; | |
| 599 | + flex-flow: row nowrap; | |
| 600 | + align-items: center; | |
| 601 | + gap: 10px; | |
| 602 | + cursor: pointer; | |
| 603 | +} | |
| 604 | + | |
| 605 | +.f12-checkbox-toggle .toggle-container { | |
| 606 | + flex: 0 0 auto; | |
| 607 | +} | |
| 608 | + | |
| 436 | 609 | .f12-toggle .btn-toggle { |
| 437 | 610 | position: relative; |
| 438 | 611 | display: inline-block; |
| 439 | 612 | width: 55px; |
| @@ -508,5 +681,152 @@ | ||
| 508 | 681 | .f12-toggle .btn-toggle .handle { |
| 509 | 682 | border-radius: 50%; |
| 510 | 683 | -moz-border-radius: 50%; |
| 511 | 684 | -webkit-border-radius: 50%; |
| 685 | +} | |
| 686 | + | |
| 687 | +/** | |
| 688 | + * Dashboard Statistics | |
| 689 | + */ | |
| 690 | +.doi-stats-grid { | |
| 691 | + display: grid; | |
| 692 | + grid-template-columns: repeat(4, 1fr); | |
| 693 | + gap: 16px; | |
| 694 | + margin-bottom: 30px; | |
| 695 | +} | |
| 696 | + | |
| 697 | +.doi-stat-card { | |
| 698 | + background: #fff; | |
| 699 | + border: 1px solid #c3c4c7; | |
| 700 | + border-radius: 6px; | |
| 701 | + padding: 20px; | |
| 702 | + text-align: center; | |
| 703 | + border-left: 4px solid #2271b1; | |
| 704 | +} | |
| 705 | + | |
| 706 | +.doi-stat-card.doi-stat-confirmed { | |
| 707 | + border-left-color: #00a32a; | |
| 708 | +} | |
| 709 | + | |
| 710 | +.doi-stat-card.doi-stat-unconfirmed { | |
| 711 | + border-left-color: #dba617; | |
| 712 | +} | |
| 713 | + | |
| 714 | +.doi-stat-card.doi-stat-rate { | |
| 715 | + border-left-color: #8c5ae0; | |
| 716 | +} | |
| 717 | + | |
| 718 | +.doi-stat-value { | |
| 719 | + font-size: 32px; | |
| 720 | + font-weight: 600; | |
| 721 | + line-height: 1.2; | |
| 722 | + color: #1d2327; | |
| 723 | +} | |
| 724 | + | |
| 725 | +.doi-stat-label { | |
| 726 | + font-size: 13px; | |
| 727 | + color: #646970; | |
| 728 | + margin-top: 6px; | |
| 729 | +} | |
| 730 | + | |
| 731 | +.doi-dashboard-section { | |
| 732 | + margin-bottom: 30px; | |
| 733 | +} | |
| 734 | + | |
| 735 | +.doi-dashboard-section h2 { | |
| 736 | + display: flex; | |
| 737 | + align-items: center; | |
| 738 | + justify-content: space-between; | |
| 739 | + margin-bottom: 10px; | |
| 740 | +} | |
| 741 | + | |
| 742 | +.doi-view-all { | |
| 743 | + font-size: 13px; | |
| 744 | + font-weight: 400; | |
| 745 | + text-decoration: none; | |
| 746 | +} | |
| 747 | + | |
| 748 | +.doi-activity-table { | |
| 749 | + width: 100%; | |
| 750 | + border-collapse: collapse; | |
| 751 | + background: #fff; | |
| 752 | + border: 1px solid #c3c4c7; | |
| 753 | + border-radius: 4px; | |
| 754 | +} | |
| 755 | + | |
| 756 | +.doi-activity-table th, | |
| 757 | +.doi-activity-table td { | |
| 758 | + padding: 10px 14px; | |
| 759 | + text-align: left; | |
| 760 | + border-bottom: 1px solid #f0f0f1; | |
| 761 | +} | |
| 762 | + | |
| 763 | +.doi-activity-table tr:first-child th { | |
| 764 | + background: #f6f7f7; | |
| 765 | + font-weight: 600; | |
| 766 | + color: #1d2327; | |
| 767 | + border-bottom: 1px solid #c3c4c7; | |
| 768 | +} | |
| 769 | + | |
| 770 | +.doi-activity-table tr:last-child td { | |
| 771 | + border-bottom: none; | |
| 772 | +} | |
| 773 | + | |
| 774 | +.doi-badge { | |
| 775 | + display: inline-block; | |
| 776 | + padding: 2px 8px; | |
| 777 | + border-radius: 3px; | |
| 778 | + font-size: 12px; | |
| 779 | + font-weight: 500; | |
| 780 | +} | |
| 781 | + | |
| 782 | +.doi-badge-confirmed { | |
| 783 | + background: #d4edda; | |
| 784 | + color: #155724; | |
| 785 | +} | |
| 786 | + | |
| 787 | +.doi-badge-pending { | |
| 788 | + background: #fff3cd; | |
| 789 | + color: #856404; | |
| 790 | +} | |
| 791 | + | |
| 792 | +.doi-quick-links { | |
| 793 | + list-style: none; | |
| 794 | + margin: 0; | |
| 795 | + padding: 0; | |
| 796 | +} | |
| 797 | + | |
| 798 | +.doi-quick-links li { | |
| 799 | + margin-bottom: 8px; | |
| 800 | +} | |
| 801 | + | |
| 802 | +.doi-quick-links li a { | |
| 803 | + text-decoration: none; | |
| 804 | + color: #2271b1; | |
| 805 | +} | |
| 806 | + | |
| 807 | +.doi-quick-links li a:hover { | |
| 808 | + color: #135e96; | |
| 809 | +} | |
| 810 | + | |
| 811 | +@media screen and (max-width: 960px) { | |
| 812 | + .doi-stats-grid { | |
| 813 | + grid-template-columns: repeat(2, 1fr); | |
| 814 | + } | |
| 815 | +} | |
| 816 | + | |
| 817 | +/** | |
| 818 | + * Confirmation Modal | |
| 819 | + */ | |
| 820 | +.doi-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100000; display:flex; align-items:center; justify-content:center; } | |
| 821 | +.doi-modal { background:#fff; border-radius:8px; padding:24px 28px; max-width:420px; width:90%; box-shadow:0 8px 32px rgba(0,0,0,.2); } | |
| 822 | +.doi-modal h3 { margin:0 0 12px; font-size:16px; } | |
| 823 | +.doi-modal p { color:#50575e; margin:0 0 20px; line-height:1.5; } | |
| 824 | +.doi-modal-actions { display:flex; justify-content:flex-end; gap:8px; } | |
| 825 | +.doi-button-delete { background:#d63638 !important; border-color:#d63638 !important; color:#fff !important; } | |
| 826 | +.doi-button-delete:hover { background:#b32d2e !important; border-color:#b32d2e !important; } | |
| 827 | + | |
| 828 | +@media screen and (max-width: 600px) { | |
| 829 | + .doi-stats-grid { | |
| 830 | + grid-template-columns: 1fr; | |
| 831 | + } | |
| 512 | 832 | } |
