|
6 | 6 | <title>Edit Blocked Sites</title> |
7 | 7 | <style> |
8 | 8 | body { |
9 | | - font-family: Arial, sans-serif; |
10 | | - width: 300px; |
11 | | - padding: 10px; |
| 9 | + font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; |
| 10 | + width: 320px; |
| 11 | + padding: 16px; |
| 12 | + margin: 0; |
| 13 | + background-color: #f8f9fa; |
12 | 14 | } |
| 15 | + |
| 16 | + h3 { |
| 17 | + margin: 0 0 16px 0; |
| 18 | + color: #1a1a1a; |
| 19 | + font-size: 18px; |
| 20 | + } |
| 21 | + |
| 22 | + #siteInput { |
| 23 | + width: 100%; |
| 24 | + padding: 8px 12px; |
| 25 | + margin-bottom: 12px; |
| 26 | + border: 1px solid #dee2e6; |
| 27 | + border-radius: 6px; |
| 28 | + box-sizing: border-box; |
| 29 | + font-size: 14px; |
| 30 | + } |
| 31 | + |
| 32 | + #siteInput:focus { |
| 33 | + outline: none; |
| 34 | + border-color: #2a9d8f; |
| 35 | + box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.2); |
| 36 | + } |
| 37 | + |
13 | 38 | #siteList { |
14 | 39 | list-style-type: none; |
15 | 40 | padding: 0; |
| 41 | + margin: 16px 0; |
| 42 | + max-height: 200px; |
| 43 | + overflow-y: auto; |
16 | 44 | } |
| 45 | + |
17 | 46 | #siteList li { |
18 | 47 | display: flex; |
19 | 48 | justify-content: space-between; |
20 | | - padding: 5px 0; |
21 | | - border-bottom: 1px solid #ddd; |
| 49 | + align-items: center; |
| 50 | + padding: 8px 12px; |
| 51 | + background: white; |
| 52 | + border-radius: 6px; |
| 53 | + margin-bottom: 8px; |
| 54 | + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
22 | 55 | } |
23 | | - #siteList li button { |
24 | | - background-color: #f94144; |
25 | | - color: white; |
| 56 | + |
| 57 | + button { |
| 58 | + padding: 8px 16px; |
26 | 59 | border: none; |
27 | | - border-radius: 3px; |
| 60 | + border-radius: 6px; |
28 | 61 | cursor: pointer; |
29 | | - padding: 3px 5px; |
30 | | - } |
31 | | - #siteInput { |
32 | | - width: calc(100% - 24px); |
33 | | - padding: 5px; |
34 | | - margin-bottom: 10px; |
| 62 | + font-size: 14px; |
| 63 | + font-weight: 500; |
| 64 | + transition: all 0.2s ease; |
35 | 65 | } |
36 | | - button { |
37 | | - padding: 5px 10px; |
38 | | - margin: 5px 0; |
39 | | - cursor: pointer; |
40 | | - border: none; |
41 | | - border-radius: 3px; |
| 66 | + |
| 67 | + button:hover { |
| 68 | + transform: translateY(-1px); |
| 69 | + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
42 | 70 | } |
| 71 | + |
43 | 72 | #addSiteBtn { |
44 | | - background-color: #8ac926; |
| 73 | + background-color: #2a9d8f; |
45 | 74 | color: white; |
| 75 | + width: 100%; |
46 | 76 | } |
47 | | - #saveSites, |
48 | | - #cancelSites { |
49 | | - width: 45%; |
50 | | - } |
51 | | - #saveSites { |
52 | | - background-color: #2a9d8f; |
| 77 | + |
| 78 | + #siteList li button { |
| 79 | + background-color: #ef476f; |
53 | 80 | color: white; |
| 81 | + padding: 4px 8px; |
| 82 | + font-size: 12px; |
54 | 83 | } |
55 | | - #cancelSites { |
56 | | - background-color: #f94144; |
| 84 | + |
| 85 | + #closeButton { |
| 86 | + background-color: #6c757d; |
57 | 87 | color: white; |
| 88 | + width: 100%; |
| 89 | + margin-top: 8px; |
58 | 90 | } |
59 | 91 | </style> |
60 | 92 | </head> |
61 | 93 | <body> |
62 | | - <h3>Edit Blocked Sites</h3> |
63 | | - <input type="text" id="siteInput" placeholder="Add new site" /> |
| 94 | + <h3>Blocked Sites</h3> |
| 95 | + <input type="text" id="siteInput" placeholder="Enter website URL..." /> |
64 | 96 | <button id="addSiteBtn">Add Site</button> |
65 | 97 | <ul id="siteList"></ul> |
66 | | - <div> |
67 | | - <button id="closeButton">Close</button> |
68 | | - </div> |
| 98 | + <button id="closeButton">Close</button> |
69 | 99 | <script src="popup.js"></script> |
70 | 100 | </body> |
71 | 101 | </html> |
0 commit comments