web/meteo.css

   1 * {
   2     margin: 0;
   3     padding: 0;
   4     box-sizing: border-box;
   5 }
   6
   7 body {
   8     font-size: 0.8rem;
   9     background-color: #EEE;
  10 }
  11
  12 html, body {
  13     margin: 0px;
  14     padding: 0px;
  15     height: 100%;
  16     font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
  17 }
  18
  19 header {
  20     background: darkred;
  21     color: white;
  22 }
  23
  24 header, .main {
  25     width: 100%;
  26     position: absolute;
  27 }
  28
  29 header {
  30     height: 5rem;
  31     box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
  32     transition: box-shadow .2s;
  33     float: left;
  34     position: fixed;
  35     top: 0px;
  36     z-index: 2000;
  37 }
  38
  39 header > .fill > .container {
  40     padding-top: 0.25rem;
  41     padding-right: 1rem;
  42     padding-bottom: 0.25rem;
  43     display: flex;
  44     align-items: center;
  45     height: 5rem;
  46 }
  47
  48 header > .fill > .container > img{
  49     max-height: 4.5rem;
  50     margin: 0.5rem;
  51     padding: 0.5rem;
  52 }
  53
  54 header > .fill > .container > .brand {
  55     font-size: 1.2rem;
  56     color: white;
  57     text-decoration: none;
  58     margin-left: 1rem;
  59 }
  60
  61 .main {
  62     top: 4rem;
  63     bottom: 0rem;
  64     position: relative;
  65     height: calc(100% - 5rem);
  66 }
  67
  68 .main > #maincontent {
  69     background-color: #EEE;
  70     height: calc(100% - 5rem);
  71 }
  72
  73 #maincontent > .container {
  74     margin: 1rem 1rem 1rem 1rem;
  75     padding-top: 1px;
  76     height: 100%;
  77 }
  78
  79 .section {
  80     margin: 0.5rem;
  81     padding: 1rem;
  82     border: 0;
  83     font-weight: normal;
  84     font-style: normal;
  85     line-height: 1;
  86     font-family: inherit;
  87     float: left;
  88     min-width: inherit;
  89     border-radius: 0;
  90     color: #404040;
  91     background-color: #FFF;
  92     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
  93     -webkit-overflow-scrolling: touch;
  94 }
  95
  96 .wide-section {
  97     margin: 0.5rem;
  98     padding: 1rem;
  99     border: 0;
 100     font-weight: normal;
 101     font-style: normal;
 102     line-height: 1;
 103     font-family: inherit;
 104     float: left;
 105     min-width: calc(100% - 2rem);
 106     border-radius: 0;
 107     color: #404040;
 108     background-color: #FFF;
 109     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 110     -webkit-overflow-scrolling: touch;
 111 }
 112
 113 .divider {
 114     margin: 0.5rem;
 115     padding: 1rem;
 116     border: 0;
 117     font-weight: normal;
 118     font-style: bold;
 119     line-height: 1;
 120     font-family: inherit;
 121     font-size: 1.5rem;
 122     float: left;
 123     min-width: calc(100% - 2rem);
 124     border-radius: 0;
 125     color: #404040;
 126     -webkit-overflow-scrolling: touch;
 127 }
 128
 129 .large-section {
 130     margin: 0.5rem;
 131     padding: 1rem;
 132     border: 0;
 133     font-weight: normal;
 134     font-style: normal;
 135     line-height: 1;
 136     font-family: inherit;
 137     min-width: calc(100% - 2rem);
 138     border-radius: 0;
 139     height: 100%;
 140     background-color: #FFF;
 141     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 142     -webkit-overflow-scrolling: touch;
 143 }
 144
 145 .bottom-section {
 146     margin: 0.5rem;
 147     padding: 2rem;
 148     border: 0;
 149     font-weight: normal;
 150     font-style: normal;
 151     line-height: 1;
 152     font-family: inherit;
 153     float: left;
 154     min-width: calc(100% - 2rem);
 155     border-radius: 0;
 156     height: 80%;
 157     background-color: #FFF;
 158     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 159     -webkit-overflow-scrolling: touch;
 160 }
 161
 162 footer {
 163     text-align: right;
 164     padding: 1rem;
 165     color: #aaa;
 166     font-size: 0.8rem;
 167     text-shadow: 0px 0px 2px #BBB;
 168     position:   fixed;
 169     left:   0px;
 170     bottom: 0px;
 171     width:  100%;
 172 }
 173
 174 footer > a {
 175     color: #aaa;
 176     text-decoration: none;
 177 }
 178
 179 .reference {
 180     padding: 1rem 1rem;
 181     text-decoration: bold;
 182     float: left;
 183     font-size: 4rem;
 184 }
 185
 186 .reference-unit {
 187     padding: 0.5rem 1rem;
 188     text-decoration: bold;
 189     float: left;
 190     font-size: 3rem;
 191 }
 192
 193 .section:hover {
 194     color: white;
 195     background: darkred;
 196 }
 197
 198 .reference-header {
 199     padding: 0.5rem 0.2rem;
 200     text-decoration: none;
 201     font-size: 1.5rem;
 202     text-align: left;
 203 }
 204
 205 .selector-header {
 206     padding: 1rem 1rem;
 207     text-decoration: bold;
 208     float: left;
 209     font-size: 1.5rem;
 210 }
 211
 212 .selector {
 213     padding: 1rem 1rem;
 214     text-decoration: bold;
 215     float: left;
 216 }
 217
 218 option {
 219   font-size: 1.2rem;
 220 }