src/cas/static/css/main.css

   1 * {
   2     box-sizing: border-box;
   3 }
   4
   5 .enclose {
   6     height: 450px;
   7     margin: 1em 0;
   8     background-size: auto 450px;
   9     display: flex;
  10     flex-direction: column;
  11 }
  12
  13 .enclosed {
  14     max-width: 300px;
  15     margin: auto;
  16 }
  17
  18 a {
  19     text-decoration: none;
  20 }
  21 a:hover {
  22     text-decoration: underline;
  23 }
  24
  25 .errorlist {
  26     color: red;
  27     margin: 0;
  28     padding: 0;
  29     list-style: none;
  30 }
  31
  32
  33 label, input, button, textarea {
  34     display: block;
  35     width: 100%;
  36 }
  37
  38 .enclosed input {
  39     font-size: 1.75em;
  40     margin-bottom: .4em;
  41     width: 100%;
  42 }
  43 .enclosed button {
  44     font-size: 1.75em;
  45     width: 100%;
  46     margin-bottom: 0;
  47 }
  48 .enclosed p {
  49     margin-bottom: 0;
  50 }
  51 h1 {
  52     font-size: 1.75em;
  53     margin: 0 0 16px;
  54 }
  55 html, body {
  56     margin: 0;
  57     padding: 0;
  58 }
  59 body {
  60     background-color: #F7F7F7;
  61     color: black;
  62     font-family: Lato;
  63 }
  64
  65 #header-wrap {
  66     background: #191919;
  67     color: #989898;
  68 }
  69 header {
  70     max-width: 600px;
  71     margin: auto;
  72     padding: 1em 0;
  73 }
  74 header img {
  75     vertical-align: middle;
  76 }
  77 footer, #content_push {
  78     height: 10em;
  79 }
  80
  81 #content {
  82     max-width: 600px;
  83     margin: auto;
  84 }
  85
  86 #details {
  87     margin: 1em 0;
  88     padding: 0 2em;
  89 }
  90
  91 #details form table th {
  92         text-align: left;
  93 }
  94
  95 #details form {
  96         margin-bottom: 2em;
  97 }
  98
  99 #details #messages {
 100     background: white;
 101     box-shadow: 0 0 10px black;
 102     font-size: 1.75em;
 103     padding: 20px;
 104     margin-bottom: 20px;
 105 }
 106 #details #messages p {
 107     margin: 0;
 108     color: green;
 109 }
 110
 111 .menu {
 112     margin: 1em 0;
 113     text-align: center;
 114 }
 115 .menu .active {
 116     font-weight: bold;
 117     color: black;
 118 }
 119 @media screen and (min-width: 620px) {
 120     .menu {
 121         float: left;
 122         max-width: 20%;
 123     }
 124
 125     #details {
 126         float: right;
 127         width: 80%;
 128     }
 129 }
 130
 131 .menu img {
 132     box-shadow: 0 0 .2em black;
 133     margin-bottom: 1em;
 134 }
 135
 136 code.key {
 137     white-space: nowrap;
 138     width: 100%;
 139     overflow: hidden;
 140     text-overflow: ellipsis;
 141     display: block;
 142     color: #666;
 143 }
 144
 145
 146 .service-list {
 147     display: flex;
 148     gap: 10px;
 149     flex-wrap: wrap;
 150 }
 151 a.service {
 152     width: 130px;
 153     height: 80px;
 154     background: white;
 155     box-shadow:  3px 3px 5px #aaa;
 156     padding: 10px;
 157     position: relative;
 158     display: flex;
 159     color: black;
 160     align-items: center;
 161     justify-content: center;
 162 }
 163 a.service:hover {
 164     text-decoration: none;
 165     background: orange;
 166 }
 167 .service-icon {
 168     max-width: 100%;
 169     max-height: 100%;
 170 }