|
1 | 1 | <html> |
2 | 2 | <head> |
3 | | - <style> |
4 | | - .tab { |
| 3 | + <style>body { |
| 4 | + font-family: 'Segoe UI', Arial, sans-serif; |
| 5 | + background: #f4f8fb; |
| 6 | + margin: 0; |
| 7 | + padding: 0; |
| 8 | + min-height: 100vh; |
| 9 | +} |
| 10 | + |
| 11 | +#tabs { |
| 12 | + display: flex; |
| 13 | + justify-content: center; |
| 14 | + margin: 24px 0 0 0; |
| 15 | +} |
| 16 | + |
| 17 | +.tab { |
5 | 18 | background: #f7f7f7; |
6 | 19 | border: 1px solid #bbb; |
7 | 20 | border-bottom: none; |
8 | 21 | border-radius: 8px 8px 0 0; |
9 | | - padding: 8px 28px; |
10 | | - margin-right: 4px; |
11 | | - font-family: sans-serif; |
12 | | - font-size: 15px; |
13 | | - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04); |
| 22 | + padding: 10px 38px; |
| 23 | + margin-right: 8px; |
| 24 | + font-family: inherit; |
| 25 | + font-size: 16px; |
| 26 | + box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06); |
14 | 27 | cursor: pointer; |
15 | 28 | position: relative; |
16 | 29 | top: 1px; |
17 | | - transition: background 0.2s; |
18 | | -} |
19 | | -#tabs { |
20 | | - display: flex; |
21 | | - flex-direction: row; |
22 | | - margin-bottom: -1px; |
| 30 | + transition: background 0.2s, font-weight 0.2s; |
| 31 | + color: #555; |
23 | 32 | } |
| 33 | + |
24 | 34 | .tab.active { |
25 | 35 | background: #fff; |
26 | 36 | font-weight: bold; |
27 | 37 | border-color: #888 #888 #fff #888; |
28 | 38 | z-index: 1; |
| 39 | + color: #222; |
29 | 40 | } |
| 41 | + |
30 | 42 | .tab:not(.active):hover { |
31 | 43 | background: #ececec; |
32 | 44 | } |
| 45 | + |
33 | 46 | .tab-content { |
34 | 47 | display: none; |
35 | 48 | border: 1px solid #ccc; |
36 | | - padding: 15px; |
37 | | - margin-top: 10px; |
| 49 | + border-radius: 0 0 8px 8px; |
| 50 | + background: #fff; |
| 51 | + padding: 28px 32px 24px 32px; |
| 52 | + margin: 0 auto 32px auto; |
| 53 | + max-width: 480px; |
| 54 | + box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06); |
| 55 | + font-size: 15px; |
38 | 56 | } |
| 57 | + |
39 | 58 | .tab-content.active { |
40 | 59 | display: block !important; |
41 | 60 | } |
| 61 | + |
| 62 | +input[type="text"], input[type="number"] { |
| 63 | + width: 220px; |
| 64 | + padding: 7px 12px; |
| 65 | + font-size: 15px; |
| 66 | + margin: 24px 12px 8px 0; |
| 67 | + border: 1px solid #b0b0b0; |
| 68 | + border-radius: 5px; |
| 69 | + background-color: #f9f9f9; |
| 70 | + transition: border-color 0.2s; |
| 71 | +} |
| 72 | + |
| 73 | +input[type="text"]:focus, input[type="number"]:focus { |
| 74 | + outline: none; |
| 75 | + border-color: #0078d7; |
| 76 | +} |
| 77 | + |
| 78 | +textarea { |
| 79 | + width: 100%; |
| 80 | + min-height: 80px; |
| 81 | + margin: 10px 0 18px 0; |
| 82 | + padding: 10px; |
| 83 | + border-radius: 5px; |
| 84 | + border: 1px solid #b0b0b0; |
| 85 | + font-size: 15px; |
| 86 | + background: #f9f9f9; |
| 87 | + resize: vertical; |
| 88 | +} |
| 89 | + |
| 90 | +button { |
| 91 | + padding: 8px 20px; |
| 92 | + margin: 0 8px 10px 0; |
| 93 | + background: #0078d7; |
| 94 | + color: #fff; |
| 95 | + border: none; |
| 96 | + border-radius: 4px; |
| 97 | + font-size: 15px; |
| 98 | + cursor: pointer; |
| 99 | + transition: background 0.18s; |
| 100 | + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); |
| 101 | +} |
| 102 | + |
| 103 | +button:hover, button:focus { |
| 104 | + background: #005fa3; |
| 105 | +} |
| 106 | + |
| 107 | +@media (max-width: 600px) { |
| 108 | + .tab-content { |
| 109 | + padding: 16px 4vw; |
| 110 | + max-width: 98vw; |
| 111 | + } |
| 112 | + input[type="text"], input[type="number"] { |
| 113 | + width: 96vw; |
| 114 | + max-width: 98vw; |
| 115 | + } |
| 116 | +} |
42 | 117 | </style> |
43 | 118 | </head> |
44 | 119 | <body> |
|
0 commit comments