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}