css styles¶
The styling for the temlates/maillib/home.html template can ebe found in the static/css/styles.css. Here is how it look:
1@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
2
3
4.formcarry-container * {
5 box-sizing: border-box;
6 font-family: "Inter", sans-serif;
7
8 /* colors */
9 --color-blue: #2552d0;
10 --color-light-blue: #3266e3;
11 --color-gray: #e5e7eb;
12 --color-dark-gray: #9da3ae;
13 --color-pink: #edadd2;
14}
15
16.formcarry-container {
17 /* container */
18 --c-width: 50%;
19 --c-max-width: 500px;
20
21 width: var(--c-width);
22 max-width: var(--c-max-width);
23 display: block;
24 margin: 5vh auto 0 auto;
25}
26
27.formcarry-form label {
28 display: block;
29 padding: 12px 0 2px 0;
30 letter-spacing: -0.2px;
31 cursor: pointer;
32 font-size: 16px;
33 font-weight: 700;
34}
35
36.formcarry-form input,
37.formcarry-form textarea {
38 font-size: 16px;
39 display: block;
40 width: 100%;
41 padding: 5px;
42 background-color: var(--color-gray);
43 border: none;
44 border: 4px solid var(--color-gray);
45 outline: none;
46 border-radius: 8px;
47 color: var(--color-dark-gray);
48}
49
50.formcarry-form input:focus,
51.formcarry-form textarea:focus {
52 background-color: #fff;
53 color: var(--color-dark-gray);
54}
55
56.formcarry-form input:focus:required:invalid {
57 border-color: var(--color-pink);
58 background-color: #fff;
59}
60
61.formcarry-form button {
62 display: block;
63 margin-top: 12px;
64 width: 100%;
65 padding: 12px 20px;
66 border-radius: 8px;
67 border-color: transparent;
68 background-color: var(--color-blue);
69 color: #fff;
70 font-weight: 700;
71 font-size: 18px;
72
73 transition: 300ms all;
74}
75
76.formcarry-form button:hover {
77 background-color: var(--color-light-blue);
78}
79
80.formcarry-alert {
81 padding: 12px;
82 border-radius: 10px;
83 color: #fff;
84 font-size: 14px;
85 font-weight: 400;
86 margin-top: 12px;
87 display: none;
88}
89
90.formcarry-alert.visible {
91 display: block;
92}
93
94.formcarry-alert.success {
95 background: #69cf9d;
96}
97
98.formcarry-alert.error {
99 background: #de524c;
100}
101
102.alert {
103 padding: 20px;
104 background-color: #36f46c;
105 color: white;
106 margin-bottom: 15px;
107}