|
12 | 12 | box-sizing: border-box; |
13 | 13 | animation: fadeIn 0.3s ease-out; |
14 | 14 | } |
15 | | - |
16 | 15 | @keyframes fadeIn { |
17 | 16 | from { opacity: 0; transform: scale(0.96); } |
18 | 17 | to { opacity: 1; transform: scale(1); } |
19 | 18 | } |
20 | | - |
21 | 19 | @keyframes fadeOut { |
22 | 20 | to { opacity: 0; transform: scale(0.96); } |
23 | 21 | } |
24 | | - |
25 | 22 | .container { |
26 | 23 | padding: 24px; |
27 | 24 | box-sizing: border-box; |
28 | 25 | } |
29 | | - |
30 | | - .dialog-title { |
31 | | - font-size: 20px; |
32 | | - font-weight: 600; |
33 | | - margin-bottom: 20px; |
34 | | - } |
35 | | - |
36 | 26 | .card-box { |
| 27 | + background-color: #f9f9f9; |
37 | 28 | border: 1px solid #dadce0; |
38 | 29 | border-radius: 4px; |
39 | 30 | padding: 16px; |
40 | 31 | margin-bottom: 20px; |
41 | 32 | } |
42 | | - |
43 | 33 | .section-title { |
44 | 34 | font-weight: 600; |
45 | 35 | font-size: 14px; |
46 | 36 | margin-bottom: 6px; |
47 | 37 | } |
48 | | - |
| 38 | + .getting-started .section-title { |
| 39 | + color: #1a73e8; |
| 40 | + } |
| 41 | + .export .section-title { |
| 42 | + color: #188038; |
| 43 | + } |
| 44 | + .default-page-setup .section-title { |
| 45 | + color: #d93025; |
| 46 | + } |
49 | 47 | .section-desc { |
50 | 48 | font-size: 14px; |
51 | 49 | color: #5f6368; |
52 | 50 | line-height: 1.6; |
53 | 51 | } |
54 | | - |
55 | 52 | .section-desc strong { |
56 | 53 | color: #202124; |
57 | 54 | font-weight: 600; |
58 | 55 | } |
59 | | - |
60 | 56 | .button-row { |
61 | 57 | display: flex; |
62 | 58 | justify-content: space-between; |
63 | 59 | align-items: center; |
64 | 60 | margin-top: 16px; |
65 | 61 | } |
66 | | - |
67 | 62 | .button-left, |
68 | 63 | .button-right { |
69 | 64 | display: flex; |
70 | | - gap: 24px; |
| 65 | + gap: 0px; |
71 | 66 | } |
72 | | - |
73 | 67 | .material-button { |
74 | 68 | font-size: 13px; |
75 | 69 | font-weight: 600; |
|
80 | 74 | transition: background-color 0.2s; |
81 | 75 | white-space: nowrap; |
82 | 76 | } |
83 | | - |
84 | 77 | .material-button:hover { |
85 | 78 | background-color: rgba(26, 115, 232, 0.1); |
86 | 79 | text-decoration: none; |
|
93 | 86 | google.script.host.close(); |
94 | 87 | }, 250); |
95 | 88 | } |
96 | | - |
97 | 89 | document.addEventListener("keydown", (e) => { |
98 | 90 | if (e.key === "Escape") closeDialog(); |
99 | 91 | }); |
100 | 92 | </script> |
101 | 93 | </head> |
102 | 94 | <body> |
103 | 95 | <div class="container"> |
104 | | - <div class="card-box"> |
105 | | - <div class="section-title">Getting started</div> |
| 96 | + <div class="card-box getting-started"> |
| 97 | + <div class="section-title">Getting Started</div> |
106 | 98 | <div class="section-desc"> |
107 | 99 | Open the Custom Page Sizer by going to:<br> |
108 | 100 | <strong>Extensions → Adam Natad – Custom Page Sizer → Start</strong> |
109 | 101 | </div> |
110 | 102 | </div> |
111 | | - |
| 103 | + <div class="card-box export"> |
| 104 | + <div class="section-title">Export or Download Note</div> |
| 105 | + <div class="section-desc"> |
| 106 | + <strong>NOTE:</strong> Do not export or download directly to PDF from Google Docs as this may cause incorrect page dimensions. Instead, export your document as a <strong>.docx</strong> file by selecting <em>File → Download → Microsoft Word (.docx)</em>. Open the file in MS Word, verify the page size via <em>Layout → Size → More Paper Sizes…</em>, and then convert it to PDF. |
| 107 | + </div> |
| 108 | + </div> |
| 109 | + <div class="card-box default-page-setup"> |
| 110 | + <div class="section-title">Google Default Page Setup</div> |
| 111 | + <div class="section-desc"> |
| 112 | + <strong>WARNING:</strong> Setting a custom page size that is not officially supported by Google Docs may cause the default |
| 113 | + <i>File → Page Setup</i> option to become unusable. To restore access, use this add-on to switch back to a Google-supported paper size. |
| 114 | + </div> |
| 115 | + </div> |
112 | 116 | <div class="button-row"> |
113 | 117 | <div class="button-left"> |
114 | 118 | <a class="material-button" href="https://www.natadtech.com" target="_blank">Learn more</a> |
| 119 | + <a class="material-button" href="#" target="_blank">View in store</a> |
115 | 120 | </div> |
116 | 121 | <div class="button-right"> |
117 | 122 | <a class="material-button" href="https://github.com/AdamNatad/PageSizer" target="_blank">View source code</a> |
|
0 commit comments